1import { 2 AvatarComponent, 3 CodeExampleComponent, 4 ComponentExampleComponent, 5 DescriptionComponent, 6 DocPageComponent, 7 DocsSectionTitleComponent, 8 HeaderComponent, 9 HeaderTabsComponent, 10 ImportComponent, 11 SeparatorComponent, 12 getExampleFile 13} from "./chunk-K3LHL6EA.js"; 14import "./chunk-766TVXPR.js"; 15import "./chunk-NI7U2CKV.js"; 16import { 17 ChangeDetectionStrategy, 18 Component, 19 setClassMetadata, 20 ɵsetClassDebugInfo, 21 ɵɵadvance, 22 ɵɵdefineComponent, 23 ɵɵelement, 24 ɵɵelementEnd, 25 ɵɵelementStart, 26 ɵɵlistener, 27 ɵɵproperty, 28 ɵɵrepeater, 29 ɵɵrepeaterCreate, 30 ɵɵrepeaterTrackByIdentity, 31 ɵɵtext 32} from "./chunk-BYGBOVNF.js"; 33import "./chunk-5OPBC4KR.js"; 34
35// libs/docs/core/avatar/examples/avatar-accent-colors-example.component.ts 36function AvatarAccentColorsExampleComponent_For_1_Template(rf, ctx) { 37 if (rf & 1) { 38 \u0275\u0275element(0, "fd-avatar", 0); 39 } 40 if (rf & 2) { 41 const color_r1 = ctx.$implicit; 42 \u0275\u0275property("colorAccent", color_r1); 43 } 44} 45function AvatarAccentColorsExampleComponent_For_4_Template(rf, ctx) { 46 if (rf & 1) { 47 \u0275\u0275element(0, "fd-avatar", 1); 48 } 49 if (rf & 2) { 50 const color_r2 = ctx.$implicit; 51 \u0275\u0275property("colorIndication", color_r2); 52 } 53} 54var AvatarAccentColorsExampleComponent = class _AvatarAccentColorsExampleComponent { 55 constructor() { 56 this.colorAccents = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 57 this.colorIndications = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 58 } 59 static { 60 this.\u0275fac = function AvatarAccentColorsExampleComponent_Factory(__ngFactoryType__) { 61 return new (__ngFactoryType__ || _AvatarAccentColorsExampleComponent)(); 62 }; 63 } 64 static { 65 this.\u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _AvatarAccentColorsExampleComponent, selectors: [["fd-avatar-accent-colors-example"]], decls: 5, vars: 0, consts: [["glyph", "customer", 3, "colorAccent"], ["glyph", "customer", 3, "colorIndication"]], template: function AvatarAccentColorsExampleComponent_Template(rf, ctx) { 66 if (rf & 1) { 67 \u0275\u0275repeaterCreate(0, AvatarAccentColorsExampleComponent_For_1_Template, 1, 1, "fd-avatar", 0, \u0275\u0275repeaterTrackByIdentity); 68 \u0275\u0275element(2, "br"); 69 \u0275\u0275repeaterCreate(3, AvatarAccentColorsExampleComponent_For_4_Template, 1, 1, "fd-avatar", 1, \u0275\u0275repeaterTrackByIdentity); 70 } 71 if (rf & 2) { 72 \u0275\u0275repeater(ctx.colorAccents); 73 \u0275\u0275advance(3); 74 \u0275\u0275repeater(ctx.colorIndications); 75 } 76 }, dependencies: [AvatarComponent], styles: ["\nfd-avatar[_ngcontent-%COMP%] {\n margin: 1rem;\n}"] }); 77 } 78}; 79(() => { 80 (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(AvatarAccentColorsExampleComponent, [{ 81 type: Component, 82 args: [{ selector: "fd-avatar-accent-colors-example", changeDetection: ChangeDetectionStrategy.OnPush, imports: [AvatarComponent], template: '@for (color of colorAccents; track color) {\n <fd-avatar [colorAccent]="color" glyph="customer"></fd-avatar>\n}\n<br />\n@for (color of colorIndications; track color) {\n <fd-avatar [colorIndication]="color" glyph="customer"></fd-avatar>\n}\n', styles: ["/* angular:styles/component:css;000ef2bb94ec4b6078d254aee21b966abb3a3df18c9556b723dfb2d341ed626f;/opt/build/repo/libs/docs/core/avatar/examples/avatar-accent-colors-example.component.ts */\nfd-avatar {\n margin: 1rem;\n}\n"] }] 83 }], null, null); 84})(); 85(() => { 86 (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(AvatarAccentColorsExampleComponent, { className: "AvatarAccentColorsExampleComponent", filePath: "libs/docs/core/avatar/examples/avatar-accent-colors-example.component.ts", lineNumber: 18 }); 87})(); 88
89// libs/docs/core/avatar/examples/avatar-background-image-example.component.ts 90var AvatarBackgroundImageExampleComponent = class _AvatarBackgroundImageExampleComponent { 91 static { 92 this.\u0275fac = function AvatarBackgroundImageExampleComponent_Factory(__ngFactoryType__) { 93 return new (__ngFactoryType__ || _AvatarBackgroundImageExampleComponent)(); 94 }; 95 } 96 static { 97 this.\u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _AvatarBackgroundImageExampleComponent, selectors: [["fd-avatar-background-image-example"]], decls: 6, vars: 1, consts: [["image", "https://picsum.photos/seed/nature/400/400", "size", "xs"], ["image", "https://picsum.photos/seed/nature/400/400", "size", "s"], ["image", "https://picsum.photos/seed/nature/400/400", "size", "m"], ["image", "https://picsum.photos/seed/nature/400/400", "size", "l"], ["image", "https://picsum.photos/seed/nature/400/400", "size", "xl"], ["image", "https://picsum.photos/seed/nature/400/400", "size", "xl", 3, "contain"]], template: function AvatarBackgroundImageExampleComponent_Template(rf, ctx) { 98 if (rf & 1) { 99 \u0275\u0275element(0, "fd-avatar", 0)(1, "fd-avatar", 1)(2, "fd-avatar", 2)(3, "fd-avatar", 3)(4, "fd-avatar", 4)(5, "fd-avatar", 5); 100 } 101 if (rf & 2) { 102 \u0275\u0275advance(5); 103 \u0275\u0275property("contain", true); 104 } 105 }, dependencies: [AvatarComponent], styles: ["\nfd-avatar[_ngcontent-%COMP%] {\n margin: 1rem;\n}"] }); 106 } 107}; 108(() => { 109 (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(AvatarBackgroundImageExampleComponent, [{ 110 type: Component, 111 args: [{ selector: "fd-avatar-background-image-example", changeDetection: ChangeDetectionStrategy.OnPush, imports: [AvatarComponent], template: '<fd-avatar image="https://picsum.photos/seed/nature/400/400" size="xs"></fd-avatar>\n<fd-avatar image="https://picsum.photos/seed/nature/400/400" size="s"></fd-avatar>\n<fd-avatar image="https://picsum.photos/seed/nature/400/400" size="m"></fd-avatar>\n<fd-avatar image="https://picsum.photos/seed/nature/400/400" size="l"></fd-avatar>\n<fd-avatar image="https://picsum.photos/seed/nature/400/400" size="xl"></fd-avatar>\n<fd-avatar [contain]="true" image="https://picsum.photos/seed/nature/400/400" size="xl"></fd-avatar>\n', styles: ["/* angular:styles/component:css;000ef2bb94ec4b6078d254aee21b966abb3a3df18c9556b723dfb2d341ed626f;/opt/build/repo/libs/docs/core/avatar/examples/avatar-background-image-example.component.ts */\nfd-avatar {\n margin: 1rem;\n}\n"] }] 112 }], null, null); 113})(); 114(() => { 115 (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(AvatarBackgroundImageExampleComponent, { className: "AvatarBackgroundImageExampleComponent", filePath: "libs/docs/core/avatar/examples/avatar-background-image-example.component.ts", lineNumber: 17 }); 116})(); 117
118// libs/docs/core/avatar/examples/avatar-borders-example.component.ts 119var AvatarBordersExampleComponent = class _AvatarBordersExampleComponent { 120 static { 121 this.\u0275fac = function AvatarBordersExampleComponent_Factory(__ngFactoryType__) { 122 return new (__ngFactoryType__ || _AvatarBordersExampleComponent)(); 123 }; 124 } 125 static { 126 this.\u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _AvatarBordersExampleComponent, selectors: [["fd-avatar-borders-example"]], decls: 11, vars: 20, consts: [["size", "xs", "glyph", "money-bills", 3, "border", "transparent"], ["size", "s", "glyph", "money-bills", 3, "border", "transparent"], ["size", "m", "glyph", "money-bills", 3, "border", "transparent"], ["size", "l", "glyph", "money-bills", 3, "border", "transparent"], ["size", "xl", "glyph", "money-bills", 3, "border", "transparent"], ["size", "xs", "label", "Jane Doe", 3, "border", "transparent"], ["size", "s", "label", "Jane Doe", 3, "border", "transparent"], ["size", "m", "label", "Jane Doe", 3, "border", "transparent"], ["size", "l", "label", "Jane Doe", 3, "border", "transparent"], ["size", "xl", "label", "Jane Doe", 3, "border", "transparent"]], template: function AvatarBordersExampleComponent_Template(rf, ctx) { 127 if (rf & 1) { 128 \u0275\u0275element(0, "fd-avatar", 0)(1, "fd-avatar", 1)(2, "fd-avatar", 2)(3, "fd-avatar", 3)(4, "fd-avatar", 4)(5, "br")(6, "fd-avatar", 5)(7, "fd-avatar", 6)(8, "fd-avatar", 7)(9, "fd-avatar", 8)(10, "fd-avatar", 9); 129 } 130 if (rf & 2) { 131 \u0275\u0275property("border", true)("transparent", true); 132 \u0275\u0275advance(); 133 \u0275\u0275property("border", true)("transparent", true); 134 \u0275\u0275advance(); 135 \u0275\u0275property("border", true)("transparent", true); 136 \u0275\u0275advance(); 137 \u0275\u0275property("border", true)("transparent", true); 138 \u0275\u0275advance(); 139 \u0275\u0275property("border", true)("transparent", true); 140 \u0275\u0275advance(2); 141 \u0275\u0275property("border", true)("transparent", true); 142 \u0275\u0275advance(); 143 \u0275\u0275property("border", true)("transparent", true); 144 \u0275\u0275advance(); 145 \u0275\u0275property("border", true)("transparent", true); 146 \u0275\u0275advance(); 147 \u0275\u0275property("border", true)("transparent", true); 148 \u0275\u0275advance(); 149 \u0275\u0275property("border", true)("transparent", true); 150 } 151 }, dependencies: [AvatarComponent], styles: ["\nfd-avatar[_ngcontent-%COMP%] {\n margin: 1rem;\n}"] }); 152 } 153}; 154(() => { 155 (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(AvatarBordersExampleComponent, [{ 156 type: Component, 157 args: [{ selector: "fd-avatar-borders-example", changeDetection: ChangeDetectionStrategy.OnPush, imports: [AvatarComponent], template: '<fd-avatar [border]="true" [transparent]="true" size="xs" glyph="money-bills"></fd-avatar>\n<fd-avatar [border]="true" [transparent]="true" size="s" glyph="money-bills"></fd-avatar>\n<fd-avatar [border]="true" [transparent]="true" size="m" glyph="money-bills"></fd-avatar>\n<fd-avatar [border]="true" [transparent]="true" size="l" glyph="money-bills"></fd-avatar>\n<fd-avatar [border]="true" [transparent]="true" size="xl" glyph="money-bills"></fd-avatar>\n\n<br />\n\n<fd-avatar [border]="true" [transparent]="true" size="xs" label="Jane Doe"></fd-avatar>\n<fd-avatar [border]="true" [transparent]="true" size="s" label="Jane Doe"></fd-avatar>\n<fd-avatar [border]="true" [transparent]="true" size="m" label="Jane Doe"></fd-avatar>\n<fd-avatar [border]="true" [transparent]="true" size="l" label="Jane Doe"></fd-avatar>\n<fd-avatar [border]="true" [transparent]="true" size="xl" label="Jane Doe"></fd-avatar>\n', styles: ["/* angular:styles/component:css;000ef2bb94ec4b6078d254aee21b966abb3a3df18c9556b723dfb2d341ed626f;/opt/build/repo/libs/docs/core/avatar/examples/avatar-borders-example.component.ts */\nfd-avatar {\n margin: 1rem;\n}\n"] }] 158 }], null, null); 159})(); 160(() => { 161 (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(AvatarBordersExampleComponent, { className: "AvatarBordersExampleComponent", filePath: "libs/docs/core/avatar/examples/avatar-borders-example.component.ts", lineNumber: 17 }); 162})(); 163
164// libs/docs/core/avatar/examples/avatar-circle-example.component.ts 165var AvatarCircleExampleComponent = class _AvatarCircleExampleComponent { 166 static { 167 this.\u0275fac = function AvatarCircleExampleComponent_Factory(__ngFactoryType__) { 168 return new (__ngFactoryType__ || _AvatarCircleExampleComponent)(); 169 }; 170 } 171 static { 172 this.\u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _AvatarCircleExampleComponent, selectors: [["fd-avatar-circle-example"]], decls: 11, vars: 10, consts: [["size", "xs", "glyph", "batch-payments", 3, "circle"], ["size", "s", "glyph", "batch-payments", 3, "circle"], ["size", "m", "glyph", "batch-payments", 3, "circle"], ["size", "l", "glyph", "batch-payments", 3, "circle"], ["size", "xl", "glyph", "batch-payments", 3, "circle"], ["size", "xs", "label", "Jane Doe", 3, "circle"], ["size", "s", "label", "Jane Doe", 3, "circle"], ["size", "m", "label", "Jane Doe", 3, "circle"], ["size", "l", "label", "Jane Doe", 3, "circle"], ["size", "xl", "label", "Jane Doe", 3, "circle"]], template: function AvatarCircleExampleComponent_Template(rf, ctx) { 173 if (rf & 1) { 174 \u0275\u0275element(0, "fd-avatar", 0)(1, "fd-avatar", 1)(2, "fd-avatar", 2)(3, "fd-avatar", 3)(4, "fd-avatar", 4)(5, "br")(6, "fd-avatar", 5)(7, "fd-avatar", 6)(8, "fd-avatar", 7)(9, "fd-avatar", 8)(10, "fd-avatar", 9); 175 } 176 if (rf & 2) { 177 \u0275\u0275property("circle", true); 178 \u0275\u0275advance(); 179 \u0275\u0275property("circle", true); 180 \u0275\u0275advance(); 181 \u0275\u0275property("circle", true); 182 \u0275\u0275advance(); 183 \u0275\u0275property("circle", true); 184 \u0275\u0275advance(); 185 \u0275\u0275property("circle", true); 186 \u0275\u0275advance(2); 187 \u0275\u0275property("circle", true); 188 \u0275\u0275advance(); 189 \u0275\u0275property("circle", true); 190 \u0275\u0275advance(); 191 \u0275\u0275property("circle", true); 192 \u0275\u0275advance(); 193 \u0275\u0275property("circle", true); 194 \u0275\u0275advance(); 195 \u0275\u0275property("circle", true); 196 } 197 }, dependencies: [AvatarComponent], styles: ["\nfd-avatar[_ngcontent-%COMP%] {\n margin: 1rem;\n}"] }); 198 } 199}; 200(() => { 201 (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(AvatarCircleExampleComponent, [{ 202 type: Component, 203 args: [{ selector: "fd-avatar-circle-example", changeDetection: ChangeDetectionStrategy.OnPush, imports: [AvatarComponent], template: '<fd-avatar [circle]="true" size="xs" glyph="batch-payments"></fd-avatar>\n<fd-avatar [circle]="true" size="s" glyph="batch-payments"></fd-avatar>\n<fd-avatar [circle]="true" size="m" glyph="batch-payments"></fd-avatar>\n<fd-avatar [circle]="true" size="l" glyph="batch-payments"></fd-avatar>\n<fd-avatar [circle]="true" size="xl" glyph="batch-payments"></fd-avatar>\n\n<br />\n\n<fd-avatar [circle]="true" size="xs" label="Jane Doe"></fd-avatar>\n<fd-avatar [circle]="true" size="s" label="Jane Doe"></fd-avatar>\n<fd-avatar [circle]="true" size="m" label="Jane Doe"></fd-avatar>\n<fd-avatar [circle]="true" size="l" label="Jane Doe"></fd-avatar>\n<fd-avatar [circle]="true" size="xl" label="Jane Doe"></fd-avatar>\n', styles: ["/* angular:styles/component:css;000ef2bb94ec4b6078d254aee21b966abb3a3df18c9556b723dfb2d341ed626f;/opt/build/repo/libs/docs/core/avatar/examples/avatar-circle-example.component.ts */\nfd-avatar {\n margin: 1rem;\n}\n"] }] 204 }], null, null); 205})(); 206(() => { 207 (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(AvatarCircleExampleComponent, { className: "AvatarCircleExampleComponent", filePath: "libs/docs/core/avatar/examples/avatar-circle-example.component.ts", lineNumber: 17 }); 208})(); 209
210// libs/docs/core/avatar/examples/avatar-default-image-with-alternative-options-example.component.ts 211var AvatarDefaultImageWithAlternativeOptionsExampleComponent = class _AvatarDefaultImageWithAlternativeOptionsExampleComponent { 212 static { 213 this.\u0275fac = function AvatarDefaultImageWithAlternativeOptionsExampleComponent_Factory(__ngFactoryType__) { 214 return new (__ngFactoryType__ || _AvatarDefaultImageWithAlternativeOptionsExampleComponent)(); 215 }; 216 } 217 static { 218 this.\u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _AvatarDefaultImageWithAlternativeOptionsExampleComponent, selectors: [["fd-avatar-default-image-with-alternative-options-example"]], decls: 7, vars: 1, consts: [["size", "xs", "image", "http://example.com/1.jpeg", "alterIcon", "content|alt|backup|default-icon", "backupImage", "https://picsum.photos/id/1018/400"], ["size", "s", "image", "http://example.com/2.jpeg", "alterIcon", "content|alt|backup|default-icon", "backupImage", "https://picsum.photos/id/1018/400", "alt", "John Doe"], ["size", "m", "image", "http://example.com/3.jpeg", "alterIcon", "content|alt|backup|default-icon", "backupImage", "https://picsum.photos/id/1018/400"], ["size", "l", "image", "http://example.com/4.jpeg", "alterIcon", "alt|content|backup|default-icon"], ["size", "xl", "image", "http://example.com/5.jpeg", "alterIcon", "custom", "backupImage", "http://example.com/6.jpeg"], ["size", "xl", "image", "http://example.com/4.jpeg", "alterIcon", "alt|content|backup|default-icon", "backupImage", "https://picsum.photos/id/1018/400", 3, "contain"]], template: function AvatarDefaultImageWithAlternativeOptionsExampleComponent_Template(rf, ctx) { 219 if (rf & 1) { 220 \u0275\u0275elementStart(0, "fd-avatar", 0); 221 \u0275\u0275text(1, " John Doe\n"); 222 \u0275\u0275elementEnd(); 223 \u0275\u0275element(2, "fd-avatar", 1)(3, "fd-avatar", 2)(4, "fd-avatar", 3)(5, "fd-avatar", 4)(6, "fd-avatar", 5); 224 } 225 if (rf & 2) { 226 \u0275\u0275advance(6); 227 \u0275\u0275property("contain", true); 228 } 229 }, dependencies: [AvatarComponent], styles: ["\nfd-avatar[_ngcontent-%COMP%] {\n margin: 1rem;\n}"] }); 230 } 231}; 232(() => { 233 (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(AvatarDefaultImageWithAlternativeOptionsExampleComponent, [{ 234 type: Component, 235 args: [{ selector: "fd-avatar-default-image-with-alternative-options-example", changeDetection: ChangeDetectionStrategy.OnPush, imports: [AvatarComponent], template: `<!-- should display "JD" from content --> 236<fd-avatar 237 size="xs" 238 image="http://example.com/1.jpeg" 239 alterIcon="content|alt|backup|default-icon" 240 backupImage="https://picsum.photos/id/1018/400" 241> 242 John Doe 243</fd-avatar> 244 245<!-- should display "JD" from alt --> 246<fd-avatar 247 size="s" 248 image="http://example.com/2.jpeg" 249 alterIcon="content|alt|backup|default-icon" 250 backupImage="https://picsum.photos/id/1018/400" 251 alt="John Doe" 252> 253</fd-avatar> 254 255<!-- should display backupImage --> 256<fd-avatar 257 size="m" 258 image="http://example.com/3.jpeg" 259 alterIcon="content|alt|backup|default-icon" 260 backupImage="https://picsum.photos/id/1018/400" 261> 262</fd-avatar> 263 264<!-- should display default icon, because there's no backupImage url provided --> 265<fd-avatar size="l" image="http://example.com/4.jpeg" alterIcon="alt|content|backup|default-icon"> </fd-avatar> 266 267<!-- should display default icon, because backupImage is not loadable --> 268<fd-avatar size="xl" image="http://example.com/5.jpeg" alterIcon="custom" backupImage="http://example.com/6.jpeg"> 269</fd-avatar> 270 271<!-- should load image --> 272<fd-avatar 273 size="xl" 274 [contain]="true" 275 image="http://example.com/4.jpeg" 276 alterIcon="alt|content|backup|default-icon" 277 backupImage="https://picsum.photos/id/1018/400" 278> 279</fd-avatar> 280`, styles: ["/* angular:styles/component:css;000ef2bb94ec4b6078d254aee21b966abb3a3df18c9556b723dfb2d341ed626f;/opt/build/repo/libs/docs/core/avatar/examples/avatar-default-image-with-alternative-options-example.component.ts */\nfd-avatar {\n margin: 1rem;\n}\n"] }] 281 }], null, null); 282})(); 283(() => { 284 (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(AvatarDefaultImageWithAlternativeOptionsExampleComponent, { className: "AvatarDefaultImageWithAlternativeOptionsExampleComponent", filePath: "libs/docs/core/avatar/examples/avatar-default-image-with-alternative-options-example.component.ts", lineNumber: 17 }); 285})(); 286
287// libs/docs/core/avatar/examples/avatar-icon-example.component.ts 288var AvatarIconExampleComponent = class _AvatarIconExampleComponent { 289 onAvatarClicked(num) { 290 alert("avatar " + num + " clicked!"); 291 } 292 static { 293 this.\u0275fac = function AvatarIconExampleComponent_Factory(__ngFactoryType__) { 294 return new (__ngFactoryType__ || _AvatarIconExampleComponent)(); 295 }; 296 } 297 static { 298 this.\u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _AvatarIconExampleComponent, selectors: [["fd-avatar-icon-example"]], decls: 5, vars: 5, consts: [["size", "xs", "glyph", "group", 3, "avatarClicked", "clickable"], ["size", "s", "glyph", "group", 3, "avatarClicked", "clickable"], ["size", "m", "glyph", "group", 3, "avatarClicked", "clickable"], ["size", "l", "glyph", "group", 3, "avatarClicked", "clickable"], ["size", "xl", "glyph", "group", 3, "avatarClicked", "clickable"]], template: function AvatarIconExampleComponent_Template(rf, ctx) { 299 if (rf & 1) { 300 \u0275\u0275elementStart(0, "fd-avatar", 0); 301 \u0275\u0275listener("avatarClicked", function AvatarIconExampleComponent_Template_fd_avatar_avatarClicked_0_listener() { 302 return ctx.onAvatarClicked(1); 303 }); 304 \u0275\u0275elementEnd(); 305 \u0275\u0275elementStart(1, "fd-avatar", 1); 306 \u0275\u0275listener("avatarClicked", function AvatarIconExampleComponent_Template_fd_avatar_avatarClicked_1_listener() { 307 return ctx.onAvatarClicked(2); 308 }); 309 \u0275\u0275elementEnd(); 310 \u0275\u0275elementStart(2, "fd-avatar", 2); 311 \u0275\u0275listener("avatarClicked", function AvatarIconExampleComponent_Template_fd_avatar_avatarClicked_2_listener() { 312 return ctx.onAvatarClicked(3); 313 }); 314 \u0275\u0275elementEnd(); 315 \u0275\u0275elementStart(3, "fd-avatar", 3); 316 \u0275\u0275listener("avatarClicked", function AvatarIconExampleComponent_Template_fd_avatar_avatarClicked_3_listener() { 317 return ctx.onAvatarClicked(4); 318 }); 319 \u0275\u0275elementEnd(); 320 \u0275\u0275elementStart(4, "fd-avatar", 4); 321 \u0275\u0275listener("avatarClicked", function AvatarIconExampleComponent_Template_fd_avatar_avatarClicked_4_listener() { 322 return ctx.onAvatarClicked(5); 323 }); 324 \u0275\u0275elementEnd(); 325 } 326 if (rf & 2) { 327 \u0275\u0275property("clickable", true); 328 \u0275\u0275advance(); 329 \u0275\u0275property("clickable", true); 330 \u0275\u0275advance(); 331 \u0275\u0275property("clickable", true); 332 \u0275\u0275advance(); 333 \u0275\u0275property("clickable", true); 334 \u0275\u0275advance(); 335 \u0275\u0275property("clickable", true); 336 } 337 }, dependencies: [AvatarComponent], styles: ["\nfd-avatar[_ngcontent-%COMP%] {\n margin: 1rem;\n}"] }); 338 } 339}; 340(() => { 341 (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(AvatarIconExampleComponent, [{ 342 type: Component, 343 args: [{ selector: "fd-avatar-icon-example", changeDetection: ChangeDetectionStrategy.OnPush, imports: [AvatarComponent], template: '<fd-avatar size="xs" glyph="group" [clickable]="true" (avatarClicked)="onAvatarClicked(1)"></fd-avatar>\n<fd-avatar size="s" glyph="group" [clickable]="true" (avatarClicked)="onAvatarClicked(2)"></fd-avatar>\n<fd-avatar size="m" glyph="group" [clickable]="true" (avatarClicked)="onAvatarClicked(3)"></fd-avatar>\n<fd-avatar size="l" glyph="group" [clickable]="true" (avatarClicked)="onAvatarClicked(4)"></fd-avatar>\n<fd-avatar size="xl" glyph="group" [clickable]="true" (avatarClicked)="onAvatarClicked(5)"></fd-avatar>\n', styles: ["/* angular:styles/component:css;000ef2bb94ec4b6078d254aee21b966abb3a3df18c9556b723dfb2d341ed626f;/opt/build/repo/libs/docs/core/avatar/examples/avatar-icon-example.component.ts */\nfd-avatar {\n margin: 1rem;\n}\n"] }] 344 }], null, null); 345})(); 346(() => { 347 (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(AvatarIconExampleComponent, { className: "AvatarIconExampleComponent", filePath: "libs/docs/core/avatar/examples/avatar-icon-example.component.ts", lineNumber: 17 }); 348})(); 349
350// libs/docs/core/avatar/examples/avatar-initials-example.component.ts 351var AvatarInitialsExampleComponent = class _AvatarInitialsExampleComponent { 352 static { 353 this.\u0275fac = function AvatarInitialsExampleComponent_Factory(__ngFactoryType__) { 354 return new (__ngFactoryType__ || _AvatarInitialsExampleComponent)(); 355 }; 356 } 357 static { 358 this.\u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _AvatarInitialsExampleComponent, selectors: [["fd-avatar-initials-example"]], decls: 17, vars: 0, consts: [["size", "xs", "label", "Jane Doe"], ["size", "s", "label", "Jane Doe"], ["size", "m", "label", "Jane Doe"], ["size", "l", "label", "Jane Doe"], ["size", "xl", "label", "Jane Doe"], ["size", "xs", "label", "Marjolein van Veen"], ["size", "s", "label", "Marjolein van Veen"], ["size", "m", "label", "Marjolein van Veen"], ["size", "l", "label", "Marjolein van Veen"], ["size", "xl", "label", "Marjolein van Veen"], ["size", "xs", "label", "Anna Mar\xEDa Agust\xED Su\xE1rez"], ["size", "s", "label", "Anna Mar\xEDa Agust\xED Su\xE1rez"], ["size", "m", "label", "Anna Mar\xEDa Agust\xED Su\xE1rez"], ["size", "l", "label", "Anna Mar\xEDa Agust\xED Su\xE1rez"], ["size", "xl", "label", "Anna Mar\xEDa Agust\xED Su\xE1rez"]], template: function AvatarInitialsExampleComponent_Template(rf, ctx) { 359 if (rf & 1) { 360 \u0275\u0275element(0, "fd-avatar", 0)(1, "fd-avatar", 1)(2, "fd-avatar", 2)(3, "fd-avatar", 3)(4, "fd-avatar", 4)(5, "br")(6, "fd-avatar", 5)(7, "fd-avatar", 6)(8, "fd-avatar", 7)(9, "fd-avatar", 8)(10, "fd-avatar", 9)(11, "br")(12, "fd-avatar", 10)(13, "fd-avatar", 11)(14, "fd-avatar", 12)(15, "fd-avatar", 13)(16, "fd-avatar", 14); 361 } 362 }, dependencies: [AvatarComponent], styles: ["\nfd-avatar[_ngcontent-%COMP%] {\n margin: 1rem;\n}"] }); 363 } 364}; 365(() => { 366 (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(AvatarInitialsExampleComponent, [{ 367 type: Component, 368 args: [{ selector: "fd-avatar-initials-example", changeDetection: ChangeDetectionStrategy.OnPush, imports: [AvatarComponent], template: '<fd-avatar size="xs" label="Jane Doe"></fd-avatar>\n<fd-avatar size="s" label="Jane Doe"></fd-avatar>\n<fd-avatar size="m" label="Jane Doe"></fd-avatar>\n<fd-avatar size="l" label="Jane Doe"></fd-avatar>\n<fd-avatar size="xl" label="Jane Doe"></fd-avatar>\n\n<br />\n\n<fd-avatar size="xs" label="Marjolein van Veen"></fd-avatar>\n<fd-avatar size="s" label="Marjolein van Veen"></fd-avatar>\n<fd-avatar size="m" label="Marjolein van Veen"></fd-avatar>\n<fd-avatar size="l" label="Marjolein van Veen"></fd-avatar>\n<fd-avatar size="xl" label="Marjolein van Veen"></fd-avatar>\n\n<br />\n\n<fd-avatar size="xs" label="Anna Mar\xEDa Agust\xED Su\xE1rez"></fd-avatar>\n<fd-avatar size="s" label="Anna Mar\xEDa Agust\xED Su\xE1rez"></fd-avatar>\n<fd-avatar size="m" label="Anna Mar\xEDa Agust\xED Su\xE1rez"></fd-avatar>\n<fd-avatar size="l" label="Anna Mar\xEDa Agust\xED Su\xE1rez"></fd-avatar>\n<fd-avatar size="xl" label="Anna Mar\xEDa Agust\xED Su\xE1rez"></fd-avatar>\n', styles: ["/* angular:styles/component:css;000ef2bb94ec4b6078d254aee21b966abb3a3df18c9556b723dfb2d341ed626f;/opt/build/repo/libs/docs/core/avatar/examples/avatar-initials-example.component.ts */\nfd-avatar {\n margin: 1rem;\n}\n"] }] 369 }], null, null); 370})(); 371(() => { 372 (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(AvatarInitialsExampleComponent, { className: "AvatarInitialsExampleComponent", filePath: "libs/docs/core/avatar/examples/avatar-initials-example.component.ts", lineNumber: 17 }); 373})(); 374
375// libs/docs/core/avatar/examples/avatar-placeholder-example.component.ts 376var AvatarPlaceholderExampleComponent = class _AvatarPlaceholderExampleComponent { 377 static { 378 this.\u0275fac = function AvatarPlaceholderExampleComponent_Factory(__ngFactoryType__) { 379 return new (__ngFactoryType__ || _AvatarPlaceholderExampleComponent)(); 380 }; 381 } 382 static { 383 this.\u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _AvatarPlaceholderExampleComponent, selectors: [["fd-avatar-placeholder-example"]], decls: 5, vars: 7, consts: [["size", "xs", "glyph", "product", 3, "placeholder"], ["size", "s", "glyph", "product", 3, "placeholder"], ["size", "m", "glyph", "product", 3, "placeholder"], ["size", "l", "glyph", "person-placeholder", 3, "circle", "placeholder"], ["size", "xl", "glyph", "person-placeholder", 3, "circle", "placeholder"]], template: function AvatarPlaceholderExampleComponent_Template(rf, ctx) { 384 if (rf & 1) { 385 \u0275\u0275element(0, "fd-avatar", 0)(1, "fd-avatar", 1)(2, "fd-avatar", 2)(3, "fd-avatar", 3)(4, "fd-avatar", 4); 386 } 387 if (rf & 2) { 388 \u0275\u0275property("placeholder", true); 389 \u0275\u0275advance(); 390 \u0275\u0275property("placeholder", true); 391 \u0275\u0275advance(); 392 \u0275\u0275property("placeholder", true); 393 \u0275\u0275advance(); 394 \u0275\u0275property("circle", true)("placeholder", true); 395 \u0275\u0275advance(); 396 \u0275\u0275property("circle", true)("placeholder", true); 397 } 398 }, dependencies: [AvatarComponent], styles: ["\nfd-avatar[_ngcontent-%COMP%] {\n margin: 1rem;\n}"] }); 399 } 400}; 401(() => { 402 (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(AvatarPlaceholderExampleComponent, [{ 403 type: Component, 404 args: [{ selector: "fd-avatar-placeholder-example", changeDetection: ChangeDetectionStrategy.OnPush, imports: [AvatarComponent], template: '<fd-avatar [placeholder]="true" size="xs" glyph="product"></fd-avatar>\n<fd-avatar [placeholder]="true" size="s" glyph="product"></fd-avatar>\n<fd-avatar [placeholder]="true" size="m" glyph="product"></fd-avatar>\n<fd-avatar [circle]="true" [placeholder]="true" size="l" glyph="person-placeholder"></fd-avatar>\n<fd-avatar [circle]="true" [placeholder]="true" size="xl" glyph="person-placeholder"></fd-avatar>\n', styles: ["/* angular:styles/component:css;000ef2bb94ec4b6078d254aee21b966abb3a3df18c9556b723dfb2d341ed626f;/opt/build/repo/libs/docs/core/avatar/examples/avatar-placeholder-example.component.ts */\nfd-avatar {\n margin: 1rem;\n}\n"] }] 405 }], null, null); 406})(); 407(() => { 408 (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(AvatarPlaceholderExampleComponent, { className: "AvatarPlaceholderExampleComponent", filePath: "libs/docs/core/avatar/examples/avatar-placeholder-example.component.ts", lineNumber: 17 }); 409})(); 410
411// libs/docs/core/avatar/examples/avatar-tile-example.component.ts 412var AvatarTileExampleComponent = class _AvatarTileExampleComponent { 413 static { 414 this.\u0275fac = function AvatarTileExampleComponent_Factory(__ngFactoryType__) { 415 return new (__ngFactoryType__ || _AvatarTileExampleComponent)(); 416 }; 417 } 418 static { 419 this.\u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _AvatarTileExampleComponent, selectors: [["fd-avatar-tile-example"]], decls: 5, vars: 5, consts: [["size", "xs", "glyph", "favorite", 3, "tile"], ["size", "s", "glyph", "favorite", 3, "tile"], ["size", "m", "glyph", "favorite", 3, "tile"], ["size", "l", "glyph", "favorite", 3, "tile"], ["size", "xl", "glyph", "favorite", 3, "tile"]], template: function AvatarTileExampleComponent_Template(rf, ctx) { 420 if (rf & 1) { 421 \u0275\u0275element(0, "fd-avatar", 0)(1, "fd-avatar", 1)(2, "fd-avatar", 2)(3, "fd-avatar", 3)(4, "fd-avatar", 4); 422 } 423 if (rf & 2) { 424 \u0275\u0275property("tile", true); 425 \u0275\u0275advance(); 426 \u0275\u0275property("tile", true); 427 \u0275\u0275advance(); 428 \u0275\u0275property("tile", true); 429 \u0275\u0275advance(); 430 \u0275\u0275property("tile", true); 431 \u0275\u0275advance(); 432 \u0275\u0275property("tile", true); 433 } 434 }, dependencies: [AvatarComponent], styles: ["\nfd-avatar[_ngcontent-%COMP%] {\n margin: 1rem;\n}"] }); 435 } 436}; 437(() => { 438 (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(AvatarTileExampleComponent, [{ 439 type: Component, 440 args: [{ selector: "fd-avatar-tile-example", changeDetection: ChangeDetectionStrategy.OnPush, imports: [AvatarComponent], template: '<fd-avatar [tile]="true" size="xs" glyph="favorite"></fd-avatar>\n<fd-avatar [tile]="true" size="s" glyph="favorite"></fd-avatar>\n<fd-avatar [tile]="true" size="m" glyph="favorite"></fd-avatar>\n<fd-avatar [tile]="true" size="l" glyph="favorite"></fd-avatar>\n<fd-avatar [tile]="true" size="xl" glyph="favorite"></fd-avatar>\n', styles: ["/* angular:styles/component:css;000ef2bb94ec4b6078d254aee21b966abb3a3df18c9556b723dfb2d341ed626f;/opt/build/repo/libs/docs/core/avatar/examples/avatar-tile-example.component.ts */\nfd-avatar {\n margin: 1rem;\n}\n"] }] 441 }], null, null); 442})(); 443(() => { 444 (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(AvatarTileExampleComponent, { className: "AvatarTileExampleComponent", filePath: "libs/docs/core/avatar/examples/avatar-tile-example.component.ts", lineNumber: 17 }); 445})(); 446
447// libs/docs/core/avatar/examples/avatar-transparent-example.component.ts 448var AvatarTransparentExampleComponent = class _AvatarTransparentExampleComponent { 449 static { 450 this.\u0275fac = function AvatarTransparentExampleComponent_Factory(__ngFactoryType__) { 451 return new (__ngFactoryType__ || _AvatarTransparentExampleComponent)(); 452 }; 453 } 454 static { 455 this.\u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _AvatarTransparentExampleComponent, selectors: [["fd-avatar-transparent-example"]], decls: 11, vars: 10, consts: [["size", "xs", "glyph", "car-rental", 3, "transparent"], ["size", "s", "glyph", "car-rental", 3, "transparent"], ["size", "m", "glyph", "car-rental", 3, "transparent"], ["size", "l", "glyph", "car-rental", 3, "transparent"], ["size", "xl", "glyph", "car-rental", 3, "transparent"], ["size", "xs", "label", "Jane Doe", 3, "transparent"], ["size", "s", "label", "Jane Doe", 3, "transparent"], ["size", "m", "label", "Jane Doe", 3, "transparent"], ["size", "l", "label", "Jane Doe", 3, "transparent"], ["size", "xl", "label", "Jane Doe", 3, "transparent"]], template: function AvatarTransparentExampleC
455omponent_Template(rf, ctx) { 456 if (rf & 1) { 457 \u0275\u0275element(0, "fd-avatar", 0)(1, "fd-avatar", 1)(2, "fd-avatar", 2)(3, "fd-avatar", 3)(4, "fd-avatar", 4)(5, "br")(6, "fd-avatar", 5)(7, "fd-avatar", 6)(8, "fd-avatar", 7)(9, "fd-avatar", 8)(10, "fd-avatar", 9); 458 } 459 if (rf & 2) { 460 \u0275\u0275property("transparent", true); 461 \u0275\u0275advance(); 462 \u0275\u0275property("transparent", true); 463 \u0275\u0275advance(); 464 \u0275\u0275property("transparent", true); 465 \u0275\u0275advance(); 466 \u0275\u0275property("transparent", true); 467 \u0275\u0275advance(); 468 \u0275\u0275property("transparent", true); 469 \u0275\u0275advance(2); 470 \u0275\u0275property("transparent", true); 471 \u0275\u0275advance(); 472 \u0275\u0275property("transparent", true); 473 \u0275\u0275advance(); 474 \u0275\u0275property("transparent", true); 475 \u0275\u0275advance(); 476 \u0275\u0275property("transparent", true); 477 \u0275\u0275advance(); 478 \u0275\u0275property("transparent", true); 479 } 480 }, dependencies: [AvatarComponent], styles: ["\nfd-avatar[_ngcontent-%COMP%] {\n margin: 1rem;\n}"] }); 481 } 482}; 483(() => { 484 (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(AvatarTransparentExampleC
484omponent, [{ 485 type: Component, 486 args: [{ selector: "fd-avatar-transparent-example", changeDetection: ChangeDetectionStrategy.OnPush, imports: [AvatarComponent], template: '<fd-avatar [transparent]="true" size="xs" glyph="car-rental"></fd-avatar>\n<fd-avatar [transparent]="true" size="s" glyph="car-rental"></fd-avatar>\n<fd-avatar [transparent]="true" size="m" glyph="car-rental"></fd-avatar>\n<fd-avatar [transparent]="true" size="l" glyph="car-rental"></fd-avatar>\n<fd-avatar [transparent]="true" size="xl" glyph="car-rental"></fd-avatar>\n\n<br />\n\n<fd-avatar [transparent]="true" size="xs" label="Jane Doe"></fd-avatar>\n<fd-avatar [transparent]="true" size="s" label="Jane Doe"></fd-avatar>\n<fd-avatar [transparent]="true" size="m" label="Jane Doe"></fd-avatar>\n<fd-avatar [transparent]="true" size="l" label="Jane Doe"></fd-avatar>\n<fd-avatar [transparent]="true" size="xl" label="Jane Doe"></fd-avatar>\n', styles: ["/* angular:styles/component:css;000ef2bb94ec4b6078d254aee21b966abb3a3df18c9556b723dfb2d341ed626f;/opt/build/repo/libs/docs/core/avatar/examples/avatar-transparent-example.component.ts */\nfd-avatar {\n margin: 1rem;\n}\n"] }] 487 }], null, null); 488})(); 489(() => { 490 (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(AvatarTransparentExampleC
490omponent, { className: "AvatarTransparentExampleComponent", filePath: "libs/docs/core/avatar/examples/avatar-transparent-example.component.ts", lineNumber: 17 }); 491})(); 492
493// libs/docs/core/avatar/examples/avatar-value-state-example.component.ts 494var AvatarValueStateExampleComponent = class _AvatarValueStateExampleComponent { 495 static { 496 this.\u0275fac = function AvatarValueStateExampleComponent_Factory(__ngFactoryType__) { 497 return new (__ngFactoryType__ || _AvatarValueStateExampleComponent)(); 498 }; 499 } 500 static { 501 this.\u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _AvatarValueStateExampleComponent, selectors: [["fd-avatar-value-state-example"]], decls: 4, vars: 4, consts: [["valueState", "positive", "glyph", "customer", 3, "colorAccent"], ["valueState", "caution", "glyph", "customer", 3, "colorAccent"], ["valueState", "negative", "glyph", "customer", 3, "colorAccent"], ["valueState", "information", "glyph", "customer", 3, "colorAccent"]], template: function AvatarValueStateExampleComponent_Template(rf, ctx) { 502 if (rf & 1) { 503 \u0275\u0275element(0, "fd-avatar", 0)(1, "fd-avatar", 1)(2, "fd-avatar", 2)(3, "fd-avatar", 3); 504 } 505 if (rf & 2) { 506 \u0275\u0275property("colorAccent", 2); 507 \u0275\u0275advance(); 508 \u0275\u0275property("colorAccent", 3); 509 \u0275\u0275advance(); 510 \u0275\u0275property("colorAccent", 4); 511 \u0275\u0275advance(); 512 \u0275\u0275property("colorAccent", 5); 513 } 514 }, dependencies: [AvatarComponent], styles: ["\nfd-avatar[_ngcontent-%COMP%] {\n margin: 1rem;\n}"] }); 515 } 516}; 517(() => { 518 (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(AvatarValueStateExampleComponent, [{ 519 type: Component, 520 args: [{ selector: "fd-avatar-value-state-example", imports: [AvatarComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: '<fd-avatar [colorAccent]="2" valueState="positive" glyph="customer"></fd-avatar>\n<fd-avatar [colorAccent]="3" valueState="caution" glyph="customer"></fd-avatar>\n<fd-avatar [colorAccent]="4" valueState="negative" glyph="customer"></fd-avatar>\n<fd-avatar [colorAccent]="5" valueState="information" glyph="customer"></fd-avatar>\n', styles: ["/* angular:styles/component:css;000ef2bb94ec4b6078d254aee21b966abb3a3df18c9556b723dfb2d341ed626f;/opt/build/repo/libs/docs/core/avatar/examples/avatar-value-state-example.component.ts */\nfd-avatar {\n margin: 1rem;\n}\n"] }] 521 }], null, null); 522})(); 523(() => { 524 (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(AvatarValueStateExampleComponent, { className: "AvatarValueStateExampleComponent", filePath: "libs/docs/core/avatar/examples/avatar-value-state-example.component.ts", lineNumber: 17 }); 525})(); 526
527// libs/docs/core/avatar/examples/avatar-zoom-icon-example.component.ts 528var AvatarZoomIconExampleComponent = class _AvatarZoomIconExampleComponent { 529 onZoomGlyphClick(num) { 530 alert("avatar " + num + " clicked!"); 531 } 532 static { 533 this.\u0275fac = function AvatarZoomIconExampleComponent_Factory(__ngFactoryType__) { 534 return new (__ngFactoryType__ || _AvatarZoomIconExampleComponent)(); 535 }; 536 } 537 static { 538 this.\u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _AvatarZoomIconExampleComponent, selectors: [["fd-avatar-zoom-icon-example"]], decls: 11, vars: 15, consts: [["size", "xs", "zoomGlyph", "edit", "glyph", "customer", 3, "zoomGlyphClicked", "circle", "colorAccent"], ["size", "s", "zoomGlyph", "edit", "glyph", "customer", 3, "zoomGlyphClicked", "circle", "colorAccent"], ["size", "m", "zoomGlyph", "edit", "glyph", "customer", 3, "zoomGlyphClicked", "circle", "colorAccent"], ["size", "l", "zoomGlyph", "edit", "glyph", "customer", 3, "zoomGlyphClicked", "circle", "colorAccent"], ["size", "xl", "zoomGlyph", "edit", "glyph", "customer", 3, "zoomGlyphClicked", "circle", "colorAccent"], ["size", "xs", "zoomGlyph", "camera", "label", "Jane Doe", 3, "zoomGlyphClicked", "colorAccent"], ["size", "s", "zoomGlyph", "camera", "label", "Jane Doe", 3, "zoomGlyphClicked", "colorAccent"], ["size", "m", "zoomGlyph", "camera", "label", "Jane Doe", 3, "zoomGlyphClicked", "colorAccent"], ["size", "l", "zoomGlyph", "camera", "label", "Jane Doe", 3, "zoomGlyphClicked", "colorAccent"], ["size", "xl", "zoomGlyph", "camera", "label", "Jane Doe", 3, "zoomGlyphClicked", "colorAccent"]], template: function AvatarZoomIconExampleComponent_Template(rf, ctx) { 539 if (rf & 1) { 540 \u0275\u0275elementStart(0, "fd-avatar", 0); 541 \u0275\u0275listener("zoomGlyphClicked", function AvatarZoomIconExampleComponent_Template_fd_avatar_zoomGlyphClicked_0_listener() { 542 return ctx.onZoomGlyphClick(1); 543 }); 544 \u0275\u0275elementEnd(); 545 \u0275\u0275elementStart(1, "fd-avatar", 1); 546 \u0275\u0275listener("zoomGlyphClicked", function AvatarZoomIconExampleComponent_Template_fd_avatar_zoomGlyphClicked_1_listener() { 547 return ctx.onZoomGlyphClick(2); 548 }); 549 \u0275\u0275elementEnd(); 550 \u0275\u0275elementStart(2, "fd-avatar", 2); 551 \u0275\u0275listener("zoomGlyphClicked", function AvatarZoomIconExampleComponent_Template_fd_avatar_zoomGlyphClicked_2_listener() { 552 return ctx.onZoomGlyphClick(3); 553 }); 554 \u0275\u0275elementEnd(); 555 \u0275\u0275elementStart(3, "fd-avatar", 3); 556 \u0275\u0275listener("zoomGlyphClicked", function AvatarZoomIconExampleComponent_Template_fd_avatar_zoomGlyphClicked_3_listener() { 557 return ctx.onZoomGlyphClick(4); 558 }); 559 \u0275\u0275elementEnd(); 560 \u0275\u0275elementStart(4, "fd-avatar", 4); 561 \u0275\u0275listener("zoomGlyphClicked", function AvatarZoomIconExampleComponent_Template_fd_avatar_zoomGlyphClicked_4_listener() { 562 return ctx.onZoomGlyphClick(5); 563 }); 564 \u0275\u0275elementEnd(); 565 \u0275\u0275element(5, "br"); 566 \u0275\u0275elementStart(6, "fd-avatar", 5); 567 \u0275\u0275listener("zoomGlyphClicked", function AvatarZoomIconExampleComponent_Template_fd_avatar_zoomGlyphClicked_6_listener() { 568 return ctx.onZoomGlyphClick(6); 569 }); 570 \u0275\u0275elementEnd(); 571 \u0275\u0275elementStart(7, "fd-avatar", 6); 572 \u0275\u0275listener("zoomGlyphClicked", function AvatarZoomIconExampleComponent_Template_fd_avatar_zoomGlyphClicked_7_listener() { 573 return ctx.onZoomGlyphClick(7); 574 }); 575 \u0275\u0275elementEnd(); 576 \u0275\u0275elementStart(8, "fd-avatar", 7); 577 \u0275\u0275listener("zoomGlyphClicked", function AvatarZoomIconExampleComponent_Template_fd_avatar_zoomGlyphClicked_8_listener() { 578 return ctx.onZoomGlyphClick(8); 579 }); 580 \u0275\u0275elementEnd(); 581 \u0275\u0275elementStart(9, "fd-avatar", 8); 582 \u0275\u0275listener("zoomGlyphClicked", function AvatarZoomIconExampleComponent_Template_fd_avatar_zoomGlyphClicked_9_listener() { 583 return ctx.onZoomGlyphClick(9); 584 }); 585 \u0275\u0275elementEnd(); 586 \u0275\u0275elementStart(10, "fd-avatar", 9); 587 \u0275\u0275listener("zoomGlyphClicked", function AvatarZoomIconExampleComponent_Template_fd_avatar_zoomGlyphClicked_10_listener() { 588 return ctx.onZoomGlyphClick(10); 589 }); 590 \u0275\u0275elementEnd(); 591 } 592 if (rf & 2) { 593 \u0275\u0275property("circle", true)("colorAccent", 1); 594 \u0275\u0275advance(); 595 \u0275\u0275property("circle", true)("colorAccent", 2); 596 \u0275\u0275advance(); 597 \u0275\u0275property("circle", true)("colorAccent", 3); 598 \u0275\u0275advance(); 599 \u0275\u0275property("circle", true)("colorAccent", 4); 600 \u0275\u0275advance(); 601 \u0275\u0275property("circle", true)("colorAccent", 5); 602 \u0275\u0275advance(2); 603 \u0275\u0275property("colorAccent", 6); 604 \u0275\u0275advance(); 605 \u0275\u0275property("colorAccent", 7); 606 \u0275\u0275advance(); 607 \u0275\u0275property("colorAccent", 8); 608 \u0275\u0275advance(); 609 \u0275\u0275property("colorAccent", 9); 610 \u0275\u0275advance(); 611 \u0275\u0275property("colorAccent", 10); 612 } 613 }
613, dependencies: [AvatarComponent], styles: ["\nfd-avatar[_ngcontent-%COMP%] {\n margin: 1rem;\n}"] }); 614 } 615}; 616(() => { 617 (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(AvatarZoomIconExampleComponent, [{ 618 type: Component, 619 args: [{ selector: "fd-avatar-zoom-icon-example", changeDetection: ChangeDetectionStrategy.OnPush, imports: [AvatarComponent], template: '<fd-avatar\n [circle]="true"\n size="xs"\n zoomGlyph="edit"\n [colorAccent]="1"\n glyph="customer"\n (zoomGlyphClicked)="onZoomGlyphClick(1)"\n></fd-avatar>\n<fd-avatar\n [circle]="true"\n size="s"\n zoomGlyph="edit"\n [colorAccent]="2"\n glyph="customer"\n (zoomGlyphClicked)="onZoomGlyphClick(2)"\n></fd-avatar>\n<fd-avatar\n [circle]="true"\n size="m"\n zoomGlyph="edit"\n [colorAccent]="3"\n glyph="customer"\n (zoomGlyphClicked)="onZoomGlyphClick(3)"\n></fd-avatar>\n<fd-avatar\n [circle]="true"\n size="l"\n zoomGlyph="edit"\n [colorAccent]="4"\n glyph="customer"\n (zoomGlyphClicked)="onZoomGlyphClick(4)"\n></fd-avatar>\n<fd-avatar\n [circle]="true"\n size="xl"\n zoomGlyph="edit"\n [colorAccent]="5"\n glyph="customer"\n (zoomGlyphClicked)="onZoomGlyphClick(5)"\n></fd-avatar>\n\n<br />\n\n<fd-avatar\n size="xs"\n zoomGlyph="camera"\n [colorAccent]="6"\n label="Jane Doe"\n (zoomGlyphClicked)="onZoomGlyphClick(6)"\n></fd-avatar>\n<fd-avatar\n size="s"\n zoomGlyph="camera"\n [colorAccent]="7"\n label="Jane Doe"\n (zoomGlyphClicked)="onZoomGlyphClick(7)"\n></fd-avatar>\n<fd-avatar\n size="m"\n zoomGlyph="camera"\n [colorAccent]="8"\n label="Jane Doe"\n (zoomGlyphClicked)="onZoomGlyphClick(8)"\n></fd-avatar>\n<fd-avatar\n size="l"\n zoomGlyph="camera"\n [colorAccent]="9"\n label="Jane Doe"\n (zoomGlyphClicked)="onZoomGlyphClick(9)"\n></fd-avatar>\n<fd-avatar\n size="xl"\n zoomGlyph="camera"\n [colorAccent]="10"\n label="Jane Doe"\n (zoomGlyphClicked)="onZoomGlyphClick(10)"\n></fd-avatar>\n', styles: ["/* angular:styles/component:css;000ef2bb94ec4b6078d254aee21b966abb3a3df18c9556b723dfb2d341ed626f;/opt/build/repo/libs/docs/core/avatar/examples/avatar-zoom-icon-example.component.ts */\nfd-avatar {\n margin: 1rem;\n}\n"] }] 620 }], null, null); 621})(); 622(() => { 623 (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(AvatarZoomIconExampleComponent, { className: "AvatarZoomIconExampleComponent", filePath: "libs/docs/core/avatar/examples/avatar-zoom-icon-example.component.ts", lineNumber: 17 }); 624})(); 625
626// libs/docs/core/avatar/avatar-docs.component.ts 627var AvatarDocsComponent = class _AvatarDocsComponent { 628 constructor() { 629 this.avatarIcon = [ 630 getExampleFile("avatar-icon-example.component.html"), 631 getExampleFile("avatar-icon-example.component.ts", { component: "AvatarIconExampleComponent" }) 632 ]; 633 this.avatarInitials = [ 634 getExampleFile("avatar-initials-example.component.html"), 635 getExampleFile("avatar-initials-example.component.ts", { 636 component: "AvatarInitialsExampleComponent" 637 }) 638 ]; 639 this.avatarCircle = [ 640 getExampleFile("avatar-circle-example.component.html"), 641 getExampleFile("avatar-circle-example.component.ts", { 642 component: "AvatarCircleExampleComponent" 643 }) 644 ]; 645 this.avatarBackgroundImage = [ 646 getExampleFile("avatar-background-image-example.component.html"), 647 getExampleFile("avatar-background-image-example.component.ts", { 648 component: "AvatarBackgroundImageExampleComponent" 649 }) 650 ]; 651 this.avatarTransparent = [ 652 getExampleFile("avatar-transparent-example.component.html"), 653 getExampleFile("avatar-transparent-example.component.ts", {
654 component: "AvatarTransparentExampleComponent" 655 }) 656 ]; 657 this.avatarPlaceholder = [ 658 getExampleFile("avatar-placeholder-example.component.html"), 659 getExampleFile("avatar-placeholder-example.component.ts", { 660 component: "AvatarPlaceholderExampleComponent" 661 }) 662 ]; 663 this.avatarTile = [ 664 getExampleFile("avatar-tile-example.component.html"), 665 getExampleFile("avatar-tile-example.component.ts", { component: "AvatarTileExampleComponent" }) 666 ]; 667 this.avatarAccentColors = [ 668 getExampleFile("avatar-accent-colors-example.component.html"), 669 getExampleFile("avatar-accent-colors-example.component.ts", { 670 component: "AvatarAccentColorsExampleComponent" 671 }) 672 ]; 673 this.avatarZoomIcon = [ 674 getExampleFile("avatar-zoom-icon-example.component.html"), 675 getExampleFile("avatar-zoom-icon-example.component.ts", { 676 component: "AvatarZoomIconExampleComponent" 677 }) 678 ]; 679 this.avatarBorders = [ 680 getExampleFile("avatar-borders-example.component.html"), 681 getExampleFile("avatar-borders-example.component.ts", { 682 component: "AvatarBordersExampleComponent" 683 }) 684 ]; 685 this.avatarBackgroundImageWithAlterOptions = [ 686 getExampleFile("avatar-default-image-with-alternative-options-example.component.html"), 687 getExampleFile("avatar-default-image-with-alternative-options-example.component.ts", { 688 component: "AvatarDefaultImageWithAlternativeOptionsExampleComponent" 689 }) 690 ]; 691 this.avatarValueStates = [ 692 getExampleFile("avatar-value-state-example.component.html"), 693 getExampleFile("avatar-value-state-example.component.ts", { 694 component: "AvatarValueStateExampleComponent" 695 }) 696 ]; 697 } 698 static { 699 this.\u0275fac = function AvatarDocsComponent_Factory(__ngFactoryType__) { 700 return new (__ngFactoryType__ || _AvatarDocsComponent)(); 701 }; 702 } 703 static { 704 this.\u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _AvatarDocsComponent, selectors: [["app-avatar"]], decls: 213, vars: 12, consts: [["id", "avatar", "componentName", "avatar"], [3, "exampleFiles"], ["id", "initials", "componentName", "avatar"], ["id", "circle", "componentName", "avatar"], ["id", "background-image", "componentName", "avatar"], ["id", "transparent", "componentName", "avatar"], ["id", "placeholder", "componentName", "avatar"], ["id", "tile", "componentName", "avatar"], ["id", "accent-colors", "componentName", "avatar"], ["id", "zoom-icon", "componentName", "avatar"], ["id", "border", "componentName", "avatar"], ["id", "default-image-alter-options", "componentName", "avatar"], ["id", "value-states", "componentName", "avatar"]], template: function AvatarDocsComponent_Template(rf, ctx) { 705 if (rf & 1) { 706 \u0275\u0275elementStart(0, "fd-docs-section-title", 0); 707 \u0275\u0275text(1, " Icon "); 708 \u0275\u0275elementEnd(); 709 \u0275\u0275elementStart(2, "description"); 710 \u0275\u0275text(3, " Use the "); 711 \u0275\u0275elementStart(4, "code"); 712 \u0275\u0275text(5, "[glyph]"); 713 \u0275\u0275elementEnd(); 714 \u0275\u0275text(6, " property to specify the name of the icon. The size of the Avatar is controlled by the "); 715 \u0275\u0275elementStart(7, "code"); 716 \u0275\u0275text(8, "[size]"); 717 \u0275\u0275elementEnd(); 718 \u0275\u0275text(9, " property. If omitted, the default size of the Avatar is set to large ("); 719 \u0275\u0275elementStart(10, "code"); 720 \u0275\u0275text(11, "l"); 721 \u0275\u0275elementEnd(); 722 \u0275\u0275text(12, "). Use "); 723 \u0275\u0275elementStart(13, "code"); 724 \u0275\u0275text(14, "[clickable]"); 725 \u0275\u0275elementEnd(); 726 \u0275\u0275text(15, " input property to make avatar focusable & clickable. Listen for "); 727 \u0275\u0275elementStart(16, "code"); 728 \u0275\u0275text(17, "avatarClicked"); 729 \u0275\u0275elementEnd(); 730 \u0275\u0275text(18, " event to process avatar clicks.\n"); 731 \u0275\u0275elementEnd(); 732 \u0275\u0275elementStart(19, "component-example");
733 \u0275\u0275element(20, "fd-avatar-icon-example"); 734 \u0275\u0275elementEnd(); 735 \u0275\u0275element(21, "code-example", 1)(22, "separator"); 736 \u0275\u0275elementStart(23, "fd-docs-section-title", 2); 737 \u0275\u0275text(24, " Initials "); 738 \u0275\u0275elementEnd(); 739 \u0275\u0275elementStart(25, "description"); 740 \u0275\u0275text(26, " The initials stand for the first name(s) and last name(s) of a person. Which name comes first depends on the language-specific settings.\n"); 741 \u0275\u0275elementEnd(); 742 \u0275\u0275elementStart(27, "component-example"); 743 \u0275\u0275element(28, "fd-avatar-initials-example"); 744 \u0275\u0275elementEnd(); 745 \u0275\u0275element(29, "code-example", 1)(30, "separator"); 746 \u0275\u0275elementStart(31, "fd-docs-section-title", 3); 747 \u0275\u0275text(32, " Circle "); 748 \u0275\u0275elementEnd(); 749 \u0275\u0275elementStart(33, "description"); 750 \u0275\u0275text(34, " Set "); 751 \u0275\u0275elementStart(35, "code"); 752 \u0275\u0275text(36, '[circle]="true"'); 753 \u0275\u0275elementEnd(); 754 \u0275\u0275text(37, " for a circular shape of the Avatar. "); 755 \u0275\u0275elementEnd(); 756 \u0275\u0275elementStart(38, "component-example"); 757 \u0275\u0275element(39, "fd-avatar-circle-example"); 758 \u0275\u0275elementEnd(); 759 \u0275\u0275element(40, "code-example", 1)(41, "separator"); 760 \u0275\u0275elementStart(42, "fd-docs-section-title", 4); 761 \u0275\u0275text(43, " Background Image "); 762 \u0275\u0275elementEnd(); 763 \u0275\u0275elementStart(44, "description"); 764 \u0275\u0275text(45, " To provide an image resource ("); 765 \u0275\u0275elementStart(46, "code"); 766 \u0275\u0275text(47, "url"); 767 \u0275\u0275elementEnd(); 768 \u0275\u0275text(48, " or "); 769 \u0275\u0275elementStart(49, "code"); 770 \u0275\u0275text(50, "data:base64"); 771 \u0275\u0275elementEnd(); 772 \u0275\u0275text(51, ") use the "); 773 \u0275\u0275elementStart(52, "code"); 774 \u0275\u0275text(53, "[image]"); 775 \u0275\u0275elementEnd(); 776 \u0275\u0275text(54, " property. "); 777 \u0275\u0275element(55, "br"); 778 \u0275\u0275text(56, " By default, the size of the image is scaled up to completely cover the control area."); 779 \u0275\u0275element(57, "br"); 780 \u0275\u0275text(58, " If you want to scale the image as large as possible within its container"); 781 \u0275\u0275element(59, "br"); 782 \u0275\u0275text(60, "without cropping or stretching the image, set "); 783 \u0275\u0275elementStart(61, "code"); 784 \u0275\u0275text(62, '[contain]="true"'); 785 \u0275\u0275elementEnd()(); 786 \u0275\u0275elementStart(63, "component-example"); 787 \u0275\u0275element(64, "fd-avatar-background-image-example"); 788 \u0275\u0275elementEnd(); 789 \u0275\u0275element(65, "code-example", 1)(66, "separator"); 790 \u0275\u0275elementStart(67, "fd-docs-section-title", 5); 791 \u0275\u0275text(68, " Transparent "); 792 \u0275\u0275elementEnd(); 793 \u0275\u0275elementStart(69, "description"); 794 \u0275\u0275text(70, " To remove the background of the Avatar set "); 795 \u0275\u0275elementStart(71, "code"); 796 \u0275\u0275text(72, '[transparent]="true"'); 797 \u0275\u0275elementEnd(); 798 \u0275\u0275text(73, ". "); 799 \u0275\u0275elementEnd(); 800 \u0275\u0275elementStart(74, "component-example"); 801 \u0275\u0275element(75, "fd-avatar-transparent-example"); 802 \u0275\u0275elementEnd(); 803 \u0275\u0275element(76, "code-example", 1)(77, "separator"); 804 \u0275\u0275elementStart(78, "fd-docs-section-title", 6); 805 \u0275\u0275text(79, " Placeholder Background "); 806 \u0275\u0275elementEnd(); 807 \u0275\u0275elementStart(80, "description"); 808 \u0275\u0275text(81, " To apply a Placeholder Background set "); 809 \u0275\u0275elementStart(82, "code"); 810 \u0275\u0275text(83, '[placeholder]="true"'); 811 \u0275\u0275elementEnd(); 812 \u0275\u0275text(84, ". "); 813 \u0275\u0275element(85, "br"); 814 \u0275\u0275text(86, " Placeholder images are used when no other image is available. "); 815 \u0275\u0275element(87, "br"); 816 \u0275\u0275text(88, " The default placeholder for an avatar is a gender-neutral person icon inside a circle. "); 817 \u0275\u0275element(89, "br"); 818 \u0275\u0275text(90, " For a business image is a neutral product icon inside a square can be used or you can specify your own default placeholder icon.\n"); 819 \u0275\u0275elementEnd(); 820 \u0275\u0275elementStart(91, "component-example"); 821 \u0275\u0275element(92, "fd-avatar-placeholder-example"); 822 \u0275\u0275elementEnd(); 823 \u0275\u0275element(93, "code-example", 1)(94, "separator"); 824 \u0275\u0275elementStart(95, "fd-docs-section-title", 7);
825 \u0275\u0275text(96, " Tile Icon Background "); 826 \u0275\u0275elementEnd(); 827 \u0275\u0275elementStart(97, "description"); 828 \u0275\u0275text(98, " For Tile Background set "); 829 \u0275\u0275elementStart(99, "code"); 830 \u0275\u0275text(100, '[tile]="true"'); 831 \u0275\u0275elementEnd(); 832 \u0275\u0275text(101, ". "); 833 \u0275\u0275elementEnd(); 834 \u0275\u0275elementStart(102, "component-example"); 835 \u0275\u0275element(103, "fd-avatar-tile-example"); 836 \u0275\u0275elementEnd(); 837 \u0275\u0275element(104, "code-example", 1)(105, "separator"); 838 \u0275\u0275elementStart(106, "fd-docs-section-title", 8); 839 \u0275\u0275text(107, " Accent and Indication Colors "); 840 \u0275\u0275elementEnd(); 841 \u0275\u0275elementStart(108, "description"); 842 \u0275\u0275text(109, " By default, the placeholder background color is set to blue. Use "); 843 \u0275\u0275elementStart(110, "code"); 844 \u0275\u0275text(111, "[colorAccent]"); 845 \u0275\u0275elementEnd(); 846 \u0275\u0275text(112, " property to change the background color. Options include numbers from 1 to 10. For example: "); 847 \u0275\u0275elementStart(113, "code"); 848 \u0275\u0275text(114, '[colorAccent]="6"'); 849 \u0275\u0275elementEnd(); 850 \u0275\u0275text(115, ". If you want to use random accent color, use "); 851 \u0275\u0275elementStart(116, "code"); 852 \u0275\u0275text(117, '[random]="true"'); 853 \u0275\u0275elementEnd(); 854 \u0275\u0275text(118, " property. In parallel the avatar supports Indication colors, which can be set with "); 855 \u0275\u0275elementStart(119, "code"); 856 \u0275\u0275text(120, "[colorIndication]"); 857 \u0275\u0275elementEnd(); 858 \u0275\u0275text(121, " property. Options include numbers from 1 to 10. For example: "); 859 \u0275\u0275elementStart(122, "code"); 860 \u0275\u0275text(123, '[colorIndication]="6"'); 861 \u0275\u0275elementEnd(); 862 \u0275\u0275text(124, ". Accent input has higher priority than Indication.\n"); 863 \u0275\u0275elementEnd(); 864 \u0275\u0275elementStart(125, "component-example"); 865 \u0275\u0275element(126, "fd-avatar-accent-colors-example"); 866 \u0275\u0275elementEnd(); 867 \u0275\u0275element(127, "code-example", 1)(128, "separator"); 868 \u0275\u0275elementStart(129, "fd-docs-section-title", 9); 869 \u0275\u0275text(130, " Zoom Icon "); 870 \u0275\u0275elementEnd(); 871 \u0275\u0275elementStart(131, "description"); 872 \u0275\u0275text(132, " To specify the zoom icon use the "); 873 \u0275\u0275elementStart(133, "code"); 874 \u0275\u0275text(134, "[zoomGlyph]"); 875 \u0275\u0275elementEnd(); 876 \u0275\u0275text(135, " property. This icon is focusable & clickable, listen to "); 877 \u0275\u0275elementStart(136, "code"); 878 \u0275\u0275text(137, "zoomGlyphClicked"); 879 \u0275\u0275elementEnd(); 880 \u0275\u0275text(138, " event.\n"); 881 \u0275\u0275elementEnd(); 882 \u0275\u0275elementStart(139, "component-example"); 883 \u0275\u0275element(140, "fd-avatar-zoom-icon-example"); 884 \u0275\u0275elementEnd(); 885 \u0275\u0275element(141, "code-example", 1)(142, "separator"); 886 \u0275\u0275elementStart(143, "fd-docs-section-title", 10); 887 \u0275\u0275text(144, " Borders "); 888 \u0275\u0275elementEnd(); 889 \u0275\u0275elementStart(145, "description"); 890 \u0275\u0275text(146, " A border can be added with "); 891 \u0275\u0275elementStart(147, "code"); 892 \u0275\u0275text(148, '[border]="true"'); 893 \u0275\u0275elementEnd(); 894 \u0275\u0275text(149, ". "); 895 \u0275\u0275elementEnd(); 896 \u0275\u0275elementStart(150, "component-example"); 897 \u0275\u0275element(151, "fd-avatar-borders-example"); 898 \u0275\u0275elementEnd(); 899 \u0275\u0275element(152, "code-example", 1)(153, "separator"); 900 \u0275\u0275elementStart(154, "fd-docs-section-title", 11); 901 \u0275\u0275text(155, " Default image with alter icon options\n"); 902 \u0275\u0275elementEnd(); 903 \u0275\u0275elementStart(156, "description");
904 \u0275\u0275text(157, " To provide alternative icon options by priority use the "); 905 \u0275\u0275elementStart(158, "code"); 906 \u0275\u0275text(159, "[alterIcon]"); 907 \u0275\u0275elementEnd(); 908 \u0275\u0275text(160, " property. "); 909 \u0275\u0275element(161, "br"); 910 \u0275\u0275text(162, " There's few options can be set the order priority, Avatar component will process them and display first successful option if "); 911 \u0275\u0275elementStart(163, "code"); 912 \u0275\u0275text(164, "[image]"); 913 \u0275\u0275elementEnd(); 914 \u0275\u0275text(165, " url fails to load: "); 915 \u0275\u0275elementStart(166, "ul")(167, "li")(168, "code"); 916 \u0275\u0275text(169, "content"); 917 \u0275\u0275elementEnd(); 918 \u0275\u0275text(170, " - Avatar will display first letter from string, provided as component content"); 919 \u0275\u0275elementEnd(); 920 \u0275\u0275elementStart(171, "li")(172, "code"); 921 \u0275\u0275text(173, "alt"); 922 \u0275\u0275elementEnd(); 923 \u0275\u0275text(174, " - Avatar will display first letter from string, provided as "); 924 \u0275\u0275elementStart(175, "code"); 925 \u0275\u0275text(176, "alt"); 926 \u0275\u0275elementEnd(); 927 \u0275\u0275text(177, " attribute"); 928 \u0275\u0275elementEnd(); 929 \u0275\u0275elementStart(178, "li")(179, "code"); 930 \u0275\u0275text(180, "backup"); 931 \u0275\u0275elementEnd(); 932 \u0275\u0275text(181, " - Avatar will display image, provided as "); 933 \u0275\u0275elementStart(182, "code"); 934 \u0275\u0275text(183, "backupImage"); 935 \u0275\u0275elementEnd()(); 936 \u0275\u0275elementStart(184, "li")(185, "code"); 937 \u0275\u0275text(186, "default-icon"); 938 \u0275\u0275elementEnd(); 939 \u0275\u0275text(187, " - Avatar will display user glyph icon"); 940 \u0275\u0275elementEnd()(); 941 \u0275\u0275element(188, "br"); 942 \u0275\u0275text(189, " Alternative options can be passed the following way "); 943 \u0275\u0275elementStart(190, "code"); 944 \u0275\u0275text(191, 'alterIcon="content|alt|backup|default-icon"'); 945 \u0275\u0275elementEnd()(); 946 \u0275\u0275elementStart(192, "component-example"); 947 \u0275\u0275element(193, "fd-avatar-default-image-with-alternative-options-example"); 948 \u0275\u0275elementEnd(); 949 \u0275\u0275element(194, "code-example", 1)(195, "separator"); 950 \u0275\u0275elementStart(196, "fd-docs-section-title", 12); 951 \u0275\u0275text(197, " Avatar Value States "); 952 \u0275\u0275elementEnd(); 953 \u0275\u0275elementStart(198, "description")(199, "p"); 954 \u0275\u0275text(200, "Avatar component supports following Value States:"); 955 \u0275\u0275elementEnd(); 956 \u0275\u0275elementStart(201, "ul")(202, "li"); 957 \u0275\u0275text(203, "positive;"); 958 \u0275\u0275elementEnd(); 959 \u0275\u0275elementStart(204, "li"); 960 \u0275\u0275text(205, "caution;"); 961 \u0275\u0275elementEnd(); 962 \u0275\u0275elementStart(206, "li"); 963 \u0275\u0275text(207, "negative;"); 964 \u0275\u0275elementEnd(); 965 \u0275\u0275elementStart(208, "li"); 966 \u0275\u0275text(209, "information;"); 967 \u0275\u0275elementEnd()()(); 968 \u0275\u0275elementStart(210, "component-example"); 969 \u0275\u0275element(211, "fd-avatar-value-state-example"); 970 \u0275\u0275elementEnd(); 971 \u0275\u0275element(212, "code-example", 1); 972 } 973 if (rf & 2) { 974 \u0275\u0275advance(21); 975 \u0275\u0275property("exampleFiles", ctx.avatarIcon); 976 \u0275\u0275advance(8); 977 \u0275\u0275property("exampleFiles", ctx.avatarInitials); 978 \u0275\u0275advance(11); 979 \u0275\u0275property("exampleFiles", ctx.avatarCircle); 980 \u0275\u0275advance(25); 981 \u0275\u0275property("exampleFiles", ctx.avatarBackgroundImage); 982 \u0275\u0275advance(11); 983 \u0275\u0275property("exampleFiles", ctx.avatarTransparent); 984 \u0275\u0275advance(17); 985 \u0275\u0275property("exampleFiles", ctx.avatarPlaceholder); 986 \u0275\u0275advance(11); 987 \u0275\u0275property("exampleFiles", ctx.avatarTile); 988 \u0275\u0275advance(23); 989 \u0275\u0275property("exampleFiles", ctx.avatarAccentColors); 990 \u0275\u0275advance(14); 991 \u0275\u0275property("exampleFiles", ctx.avatarZoomIcon); 992 \u0275\u0275advance(11); 993 \u0275\u0275property("exampleFiles", ctx.avatarBorders); 994 \u0275\u0275advance(42); 995 \u0275\u0275property("exampleFiles", ctx.avatarBackgroun
995dImageWithAlterOptions); 996 \u0275\u0275advance(18); 997 \u0275\u0275property("exampleFiles", ctx.avatarValueStates); 998 } 999 }, dependencies: [ 1000 DocsSectionTitleComponent, 1001 DescriptionComponent, 1002 ComponentExampleComponent, 1003 AvatarIconExampleComponent, 1004 CodeExampleComponent, 1005 SeparatorComponent, 1006 AvatarInitialsExampleComponent, 1007 AvatarCircleExampleComponent, 1008 AvatarBackgroundImageExampleComponent, 1009 AvatarTransparentExampleComponent, 1010 AvatarPlaceholderExampleComponent, 1011 AvatarTileExampleComponent, 1012 AvatarAccentColorsExampleComponent, 1013 AvatarZoomIconExampleComponent, 1014 AvatarBordersExampleComponent, 1015 AvatarDefaultImageWithAlternativeOptionsExampleComponent, 1016 AvatarValueStateExampleComponent 1017 ], encapsulation: 2 }); 1018 } 1019}; 1020(() => { 1021 (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(AvatarDocsComponent, [{ 1022 type: Component, 1023 args: [{ selector: "app-avatar", imports: [ 1024 DocsSectionTitleComponent, 1025 DescriptionComponent, 1026 ComponentExampleComponent, 1027 AvatarIconExampleComponent, 1028 CodeExampleComponent, 1029 SeparatorComponent, 1030 AvatarInitialsExampleComponent, 1031 AvatarCircleExampleComponent, 1032 AvatarBackgroundImageExampleComponent,
1033 AvatarTransparentExampleComponent, 1034 AvatarPlaceholderExampleComponent, 1035 AvatarTileExampleComponent, 1036 AvatarAccentColorsExampleComponent, 1037 AvatarZoomIconExampleComponent, 1038 AvatarBordersExampleComponent, 1039 AvatarDefaultImageWithAlternativeOptionsExampleComponent, 1040 AvatarValueStateExampleComponent 1041 ], template: `<fd-docs-section-title id="avatar" componentName="avatar"> Icon </fd-docs-section-title> 1042<description> 1043 Use the <code>[glyph]</code> property to specify the name of the icon. The size of the Avatar is controlled by the 1044 <code>[size]</code> property. If omitted, the default size of the Avatar is set to large (<code>l</code>). Use 1045 <code>[clickable]</code> input property to make avatar focusable & clickable. Listen for 1046 <code>avatarClicked</code> event to process avatar clicks. 1047</description> 1048<component-example> 1049 <fd-avatar-icon-example></fd-avatar-icon-example> 1050</component-example> 1051<code-example [exampleFiles]="avatarIcon"></code-example> 1052 1053<separator></separator> 1054 1055<fd-docs-section-title id="initials" componentName="avatar"> Initials </fd-docs-section-title> 1056<description> 1057 The initials stand for the first name(s) and last name(s) of a person. Which name comes first depends on the 1058 language-specific settings. 1059</description> 1060<component-example> 1061 <fd-avatar-initials-example></fd-avatar-initials-example> 1062</component-example> 1063<code-example [exampleFiles]="avatarInitials"></code-example> 1064 1065<separator></separator> 1066 1067<fd-docs-section-title id="circle" componentName="avatar"> Circle </fd-docs-section-title> 1068<description> Set <code>[circle]="true"</code> for a circular shape of the Avatar. </description> 1069<component-example> 1070 <fd-avatar-circle-example></fd-avatar-circle-example> 1071</component-example> 1072<code-example [exampleFiles]="avatarCircle"></code-example> 1073 1074<separator></separator> 1075 1076<fd-docs-section-title id="background-image" componentName="avatar"> Background Image </fd-docs-section-title> 1077<description> 1078 To provide an image resource (<code>url</code> or <code>data:base64</code>) use the <code>[image]</code> property. 1079 <br /> 1080 By default, the size of the image is scaled up to completely cover the control area.<br /> 1081 If you want to scale the image as large as possible within its container<br />without cropping or stretching the 1082 image, set <code>[contain]="true"</code> 1083</description> 1084<component-example> 1085 <fd-avatar-background-image-example></fd-avatar-background-image-example> 1086</component-example> 1087<code-example [exampleFiles]="avatarBackgroundImage"></code-example> 1088 1089<separator></separator> 1090 1091<fd-docs-section-title id="transparent" componentName="avatar"> Transparent </fd-docs-section-title> 1092<description> To remove the background of the Avatar set <code>[transparent]="true"</code>. </description> 1093<component-example> 1094 <fd-avatar-transparent-example></fd-avatar-transparent-example> 1095</component-example> 1096<code-example [exampleFiles]="avatarTransparent"></code-example> 1097 1098<separator></separator> 1099 1100<fd-docs-section-title id="placeholder" componentName="avatar"> Placeholder Background </fd-docs-section-title> 1101<description> 1102 To apply a Placeholder Background set <code>[placeholder]="true"</code>. <br /> 1103 Placeholder images are used when no other image is available. <br /> 1104 The default placeholder for an avatar is a gender-neutral person icon inside a circle. <br /> 1105 For a business image is a neutral product icon inside a square can be used or you can specify your own default 1106 placeholder icon. 1107</description> 1108<component-example> 1109 <fd-avatar-placeholder-example></fd-avatar-placeholder-example> 1110</component-example> 1111<code-example [exampleFiles]="avatarPlaceholder"></code-example> 1112 1113<separator></separator> 1114 1115<fd-docs-section-title id="tile" componentName="avatar"> Tile Icon Background </fd-docs-section-title> 1116<description>
1116 For Tile Background set <code>[tile]="true"</code>. </description> 1117<component-example> 1118 <fd-avatar-tile-example></fd-avatar-tile-example> 1119</component-example> 1120<code-example [exampleFiles]="avatarTile"></code-example> 1121 1122<separator></separator> 1123 1124<fd-docs-section-title id="accent-colors" componentName="avatar"> Accent and Indication Colors </fd-docs-section-title> 1125<description> 1126 By default, the placeholder background color is set to blue. Use <code>[colorAccent]</code> property to change the 1127 background color. Options include numbers from 1 to 10. For example: <code>[colorAccent]="6"</code>. If you want to 1128 use random accent color, use <code>[random]="true"</code> property. In parallel the avatar supports Indication 1129 colors, which can be set with <code>[colorIndication]</code> property. Options include numbers from 1 to 10. For 1130 example: <code>[colorIndication]="6"</code>. Accent input has higher priority than Indication. 1131</description> 1132<component-example> 1133 <fd-avatar-accent-colors-example></fd-avatar-accent-colors-example> 1134</component-example> 1135<code-example [exampleFiles]="avatarAccentColors"></code-example> 1136 1137<separator></separator> 1138 1139<fd-docs-section-title id="zoom-icon" componentName="avatar"> Zoom Icon </fd-docs-section-title> 1140<description> 1141 To specify the zoom icon use the <code>[zoomGlyph]</code> property. This icon is focusable & clickable, listen to 1142 <code>zoomGlyphClicked</code> event. 1143</description> 1144<component-example> 1145 <fd-avatar-zoom-icon-example></fd-avatar-zoom-icon-example> 1146</component-example> 1147<code-example [exampleFiles]="avatarZoomIcon"></code-example> 1148 1149<separator></separator> 1150 1151<fd-docs-section-title id="border" componentName="avatar"> Borders </fd-docs-section-title> 1152<description> A border can be added with <code>[border]="true"</code>. </description> 1153<component-example> 1154 <fd-avatar-borders-example></fd-avatar-borders-example> 1155</component-example> 1156<code-example [exampleFiles]="avatarBorders"></code-example> 1157 1158<separator></separator> 1159 1160<fd-docs-section-title id="default-image-alter-options" componentName="avatar"> 1161 Default image with alter icon options 1162</fd-docs-section-title> 1163<description> 1164 To provide alternative icon options by priority use the <code>[alterIcon]</code> property. <br /> 1165 There's few options can be set the order priority, Avatar component will process them and display first successful 1166 option if <code>[image]</code> url fails to load: 1167 <ul> 1168 <li><code>content</code> - Avatar will display first letter from string, provided as component content</li> 1169 <li><code>alt</code> - Avatar will display first letter from string, provided as <code>alt</code> attribute</li> 1170 <li><code>backup</code> - Avatar will display image, provided as <code>backupImage</code></li> 1171 <li><code>default-icon</code> - Avatar will display user glyph icon</li> 1172 </ul> 1173 <br /> 1174 Alternative options can be passed the following way <code>alterIcon="content|alt|backup|default-icon"</code> 1175</description> 1176<component-example> 1177 <fd-avatar-default-image-with-alternative-options-example></fd-avatar-default-image-with-alternative-options-example> 1178</component-example> 1179<code-example [exampleFiles]="avatarBackgroundImageWithAlterOptions"></code-example> 1180 1181<separator></separator> 1182 1183<fd-docs-section-title id="value-states" componentName="avatar"> Avatar Value States </fd-docs-section-title> 1184<description> 1185 <p>Avatar component supports following Value States:</p> 1186 <ul> 1187 <li>positive;</li> 1188 <li>caution;</li> 1189 <li>negative;</li> 1190 <li>information;</li> 1191 </ul> 1192</description> 1193<component-example> 1194 <fd-avatar-value-state-example></fd-avatar-value-state-example> 1195</component-example> 1196<code-example [exampleFiles]="avatarValueStates"></code-example> 1197` }] 1198 }], null, null); 1199})(); 1200(() => { 1201 (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(AvatarDocsComponent, { className: "AvatarDocsComponent", filePath: "libs/docs/core/avatar/avatar-docs.component.ts", lineNumber: 48 }); 1202})(); 1203
1204// libs/docs/core/avatar/avatar-header/avatar-header.component.ts 1205var AvatarHeaderComponent = class _AvatarHeaderComponent { 1206 static { 1207 this.\u0275fac = function AvatarHeaderComponent_Factory(__ngFactoryType__) { 1208 return new (__ngFactoryType__ || _AvatarHeaderComponent)(); 1209 }; 1210 } 1211 static { 1212 this.\u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _AvatarHeaderComponent, selectors: [["fd-avatar-header"]], decls: 24, vars: 0, consts: [["module", "AvatarComponent", "subPackage", "avatar"]], template: function AvatarHeaderComponent_Template(rf, ctx) { 1213 if (rf & 1) { 1214 \u0275\u0275elementStart(0, "fd-doc-page")(1, "header"); 1215 \u0275\u0275text(2, "Avatar"); 1216 \u0275\u0275elementEnd(); 1217 \u0275\u0275elementStart(3, "description")(4, "p"); 1218 \u0275\u0275text(5, " The Avatar is used for displaying images. These can be user profiles, user initials, placeholder images,icons, product images, etc. "); 1219 \u0275\u0275element(6, "br"); 1220 \u0275\u0275text(7, " Use the Avatar only in case you need to display an image, initials, placeholder for a user, icons, placeholder images or images with transparent background."); 1221 \u0275\u0275element(8, "br"); 1222 \u0275\u0275text(9, " Do not use the Avatar to include an image for any other case. "); 1223 \u0275\u0275elementEnd(); 1224 \u0275\u0275text(10, " Size variations: "); 1225 \u0275\u0275elementStart(11, "ul")(12, "li"); 1226 \u0275\u0275text(13, "Extra Small (2rem)"); 1227 \u0275\u0275elementEnd(); 1228 \u0275\u0275elementStart(14, "li"); 1229 \u0275\u0275text(15, "Small (3rem)"); 1230 \u0275\u0275elementEnd(); 1231 \u0275\u0275elementStart(16, "li"); 1232 \u0275\u0275text(17, "Medium (4rem)"); 1233 \u0275\u0275elementEnd(); 1234 \u0275\u0275elementStart(18, "li"); 1235 \u0275\u0275text(19, "Large (5rem)"); 1236 \u0275\u0275elementEnd(); 1237 \u0275\u0275elementStart(20, "li"); 1238 \u0275\u0275text(21, "Extra Large (7rem)"); 1239 \u0275\u0275elementEnd()()(); 1240 \u0275\u0275element(22, "import", 0)(23, "fd-header-tabs"); 1241 \u0275\u0275elementEnd(); 1242 } 1243 }, dependencies: [DocPageComponent, HeaderComponent, DescriptionComponent, ImportComponent, HeaderTabsComponent], encapsulation: 2 }); 1244 } 1245}; 1246(() => { 1247 (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(AvatarHeaderComponent, [{ 1248 type: Component, 1249 args: [{ selector: "fd-avatar-header", imports: [DocPageComponent, HeaderComponent, DescriptionComponent, ImportComponent, HeaderTabsComponent], template: '<fd-doc-page>\n <header>Avatar</header>\n <description>\n <p>\n The Avatar is used for displaying images. These can be user profiles, user initials, placeholder\n images,icons, product images, etc. <br />\n Use the Avatar only in case you need to display an image, initials, placeholder for a user, icons,\n placeholder images or images with transparent background.<br />\n Do not use the Avatar to include an image for any other case.\n </p>\n Size variations:\n <ul>\n <li>Extra Small (2rem)</li>\n <li>Small (3rem)</li>\n <li>Medium (4rem)</li>\n <li>Large (5rem)</li>\n <li>Extra Large (7rem)</li>\n </ul>\n </description>\n <import module="AvatarComponent" subPackage="avatar"></import>\n\n <fd-header-tabs></fd-header-tabs>\n</fd-doc-page>\n' }] 1250 }], null, null); 1251})(); 1252(() => { 1253 (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(AvatarHeaderComponent, { className: "AvatarHeaderComponent", filePath: "libs/docs/core/avatar/avatar-header/avatar-header.component.ts", lineNumber: 15 }); 1254})(); 1255
1256// libs/docs/core/avatar/index.ts 1257var ROUTES = [ 1258 { 1259 path: "", 1260 component: AvatarHeaderComponent, 1261 children: [ 1262 { 1263 path: "", 1264 component: AvatarDocsComponent 1265 } 1266 ], 1267 data: { 1268 primary: true 1269 } 1270 } 1271]; 1272var LIBRARY_NAME = "avatar"; 1273var API_FILE_KEY = "avatar"; 1274export { 1275 API_FILE_KEY, 1276 LIBRARY_NAME, 1277 ROUTES 1278};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.