@flywheel-io/vision 0.16.0 → 0.16.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/components/app-icon/app-icon.component.mjs +3 -3
- package/esm2020/components/avatar/avatar.component.mjs +2 -2
- package/esm2020/components/chip/chip.component.mjs +2 -2
- package/esm2020/components/dialog/dialog-confirm.component.mjs +3 -3
- package/esm2020/components/dialog/dialog-simple.component.mjs +3 -3
- package/esm2020/components/dialog/dialog.component.mjs +2 -2
- package/esm2020/components/snackbar/snackbar/snackbar.component.mjs +1 -1
- package/esm2020/components/stepper/step.component.mjs +2 -2
- package/fesm2015/flywheel-io-vision.mjs +14 -14
- package/fesm2015/flywheel-io-vision.mjs.map +1 -1
- package/fesm2020/flywheel-io-vision.mjs +14 -14
- package/fesm2020/flywheel-io-vision.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -17,10 +17,10 @@ export class FwAppIconComponent {
|
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
FwAppIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwAppIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20
|
-
FwAppIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwAppIconComponent, selector: "fw-app-icon", inputs: { label: "label", icon: "icon", color: "color", size: "size", variant: "variant", badge: "badge", tabindex: "tabindex", locked: "locked", animated: "animated" }, host: { properties: { "tabindex": "this.tabindex", "class.locked": "this.locked", "class.animated": "this.animated", "role": "this.role", "class": "this.cssClass" } }, ngImport: i0, template: "<div class=\"icon-highlight\"></div>\n<div class=\"icon-wrapper\">\n <div class=\"app-badge\" *ngIf=\"badge\">{{ badge }}</div>\n <div class=\"app-locked\" *ngIf=\"locked\">\n <fw-icon>lock</fw-icon>\n </div>\n <fw-icon *ngIf=\"icon\">{{ icon }}</fw-icon>\n</div>\n<p class=\"vision-p3\" *ngIf=\"label\">{{ label }}</p>\n", styles: [":host{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;outline:none}:host .icon-highlight{box-sizing:content-box;display:inline-flex;border:4px solid transparent;padding:2px;position:absolute;top:0}:host .icon-wrapper{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;margin:6px}:host p{margin:0;line-height:16.8px;-webkit-user-select:none;user-select:none;display:inline-block;color:var(--typography-muted);text-align:center}:host .app-badge{width:18px;height:18px;border-radius:64px;background:var(--red-base);font-size:10px;font-weight:500;line-height:
|
|
20
|
+
FwAppIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwAppIconComponent, selector: "fw-app-icon", inputs: { label: "label", icon: "icon", color: "color", size: "size", variant: "variant", badge: "badge", tabindex: "tabindex", locked: "locked", animated: "animated" }, host: { properties: { "tabindex": "this.tabindex", "class.locked": "this.locked", "class.animated": "this.animated", "role": "this.role", "class": "this.cssClass" } }, ngImport: i0, template: "<div class=\"icon-highlight\"></div>\n<div class=\"icon-wrapper\">\n <div class=\"app-badge\" *ngIf=\"badge\"><span>{{ badge }}</span></div>\n <div class=\"app-locked\" *ngIf=\"locked\">\n <fw-icon>lock</fw-icon>\n </div>\n <fw-icon *ngIf=\"icon\">{{ icon }}</fw-icon>\n</div>\n<p class=\"vision-p3\" *ngIf=\"label\">{{ label }}</p>\n", styles: [":host{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;outline:none}:host .icon-highlight{box-sizing:content-box;display:inline-flex;border:4px solid transparent;padding:2px;position:absolute;top:0}:host .icon-wrapper{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;margin:6px}:host p{margin:0;line-height:16.8px;-webkit-user-select:none;user-select:none;display:inline-block;color:var(--typography-muted);text-align:center}:host .app-badge{min-width:18px;height:18px;border-radius:64px;background:var(--red-base);font-family:Inter,sans-serif;font-size:10px;font-weight:500;line-height:180%;letter-spacing:0;text-align:center;color:var(--typography-contrast);display:inline-flex;align-items:flex-start;justify-content:center;position:absolute;top:-8px;right:-8px;padding:0 6px;box-sizing:border-box;overflow:hidden;white-space:nowrap;box-shadow:0 1px 2px #0000000d}:host .app-locked{width:21px;height:21px;border-radius:64px;background:var(--slate-base);font-size:15px;color:var(--typography-contrast);display:inline-flex;align-items:center;justify-content:center;position:absolute;top:-6px;right:-6px;overflow:hidden;white-space:nowrap;box-shadow:0 2px 5px #0000001a}:host.primary .icon-wrapper{background-color:var(--primary-base)}:host.primary .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.dark .icon-wrapper{background-color:var(--primary-dark)}:host.dark .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.gradient .icon-wrapper{background:linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%)}:host.gradient .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.light .icon-wrapper{background-color:var(--page-light);outline:1px solid #e3e6ea}:host.light .icon-wrapper>fw-icon{background:-webkit-linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host.small .icon-highlight{border-radius:12px;width:24px;height:24px}:host.small .icon-wrapper{display:inline-flex;width:24px;height:24px;border-radius:6px;align-items:center;justify-content:center}:host.small .icon-wrapper>fw-icon{font-size:16px}:host.small .app-badge{min-width:8px;padding:0;width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px;box-shadow:-1px 1px #00000040}:host.medium .icon-highlight{border-radius:14px;width:32px;height:32px}:host.medium .icon-wrapper{display:inline-flex;width:32px;height:32px;border-radius:8px;align-items:center;justify-content:center}:host.medium .icon-wrapper>fw-icon{font-size:20px}:host.medium .app-badge{min-width:8px;padding:0;width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px;box-shadow:-1px 1px #00000040}:host.large .icon-highlight{border-radius:18px;width:48px;height:48px}:host.large .icon-wrapper{display:inline-flex;width:48px;height:48px;border-radius:12px;align-items:center;justify-content:center}:host.large .icon-wrapper>fw-icon{font-size:32px}:host.extra-large .icon-highlight{border-radius:22px;width:64px;height:64px}:host.extra-large .icon-wrapper{display:inline-flex;width:64px;height:64px;border-radius:16px;align-items:center;justify-content:center}:host.extra-large .icon-wrapper>fw-icon{font-size:48px}:host.extra-large p{max-width:64px}:host.interactive .icon-highlight{border:4px solid transparent}:host.hover .icon-highlight,:host:hover .icon-highlight{border:4px solid var(--primary-border)}@keyframes rubber-band{0%{transform:scale(.95)}20%{transform:scale(1.05)}32%{transform:scale(.95)}48%{transform:scale(1)}}:host.animated.hover .icon-highlight,:host.animated:hover .icon-highlight{animation:rubber-band .5s linear forwards;border:4px solid var(--primary-border)}:host.focused .icon-highlight,:host:focus .icon-highlight,:host.animated:focus .icon-highlight{border:4px solid var(--primary-base)}:host.focused p,:host:focus p,:host.animated:focus p{color:var(--typography-base)}:host.static .icon-highlight,:host.static:hover .icon-highlight,:host.static.animated:hover .icon-highlight{border:4px solid transparent}:host.locked{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FwIconComponent, selector: "fw-icon" }] });
|
|
21
21
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwAppIconComponent, decorators: [{
|
|
22
22
|
type: Component,
|
|
23
|
-
args: [{ selector: 'fw-app-icon', template: "<div class=\"icon-highlight\"></div>\n<div class=\"icon-wrapper\">\n <div class=\"app-badge\" *ngIf=\"badge\">{{ badge }}</div>\n <div class=\"app-locked\" *ngIf=\"locked\">\n <fw-icon>lock</fw-icon>\n </div>\n <fw-icon *ngIf=\"icon\">{{ icon }}</fw-icon>\n</div>\n<p class=\"vision-p3\" *ngIf=\"label\">{{ label }}</p>\n", styles: [":host{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;outline:none}:host .icon-highlight{box-sizing:content-box;display:inline-flex;border:4px solid transparent;padding:2px;position:absolute;top:0}:host .icon-wrapper{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;margin:6px}:host p{margin:0;line-height:16.8px;-webkit-user-select:none;user-select:none;display:inline-block;color:var(--typography-muted);text-align:center}:host .app-badge{width:18px;height:18px;border-radius:64px;background:var(--red-base);font-size:10px;font-weight:500;line-height:
|
|
23
|
+
args: [{ selector: 'fw-app-icon', template: "<div class=\"icon-highlight\"></div>\n<div class=\"icon-wrapper\">\n <div class=\"app-badge\" *ngIf=\"badge\"><span>{{ badge }}</span></div>\n <div class=\"app-locked\" *ngIf=\"locked\">\n <fw-icon>lock</fw-icon>\n </div>\n <fw-icon *ngIf=\"icon\">{{ icon }}</fw-icon>\n</div>\n<p class=\"vision-p3\" *ngIf=\"label\">{{ label }}</p>\n", styles: [":host{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;outline:none}:host .icon-highlight{box-sizing:content-box;display:inline-flex;border:4px solid transparent;padding:2px;position:absolute;top:0}:host .icon-wrapper{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;margin:6px}:host p{margin:0;line-height:16.8px;-webkit-user-select:none;user-select:none;display:inline-block;color:var(--typography-muted);text-align:center}:host .app-badge{min-width:18px;height:18px;border-radius:64px;background:var(--red-base);font-family:Inter,sans-serif;font-size:10px;font-weight:500;line-height:180%;letter-spacing:0;text-align:center;color:var(--typography-contrast);display:inline-flex;align-items:flex-start;justify-content:center;position:absolute;top:-8px;right:-8px;padding:0 6px;box-sizing:border-box;overflow:hidden;white-space:nowrap;box-shadow:0 1px 2px #0000000d}:host .app-locked{width:21px;height:21px;border-radius:64px;background:var(--slate-base);font-size:15px;color:var(--typography-contrast);display:inline-flex;align-items:center;justify-content:center;position:absolute;top:-6px;right:-6px;overflow:hidden;white-space:nowrap;box-shadow:0 2px 5px #0000001a}:host.primary .icon-wrapper{background-color:var(--primary-base)}:host.primary .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.dark .icon-wrapper{background-color:var(--primary-dark)}:host.dark .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.gradient .icon-wrapper{background:linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%)}:host.gradient .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.light .icon-wrapper{background-color:var(--page-light);outline:1px solid #e3e6ea}:host.light .icon-wrapper>fw-icon{background:-webkit-linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host.small .icon-highlight{border-radius:12px;width:24px;height:24px}:host.small .icon-wrapper{display:inline-flex;width:24px;height:24px;border-radius:6px;align-items:center;justify-content:center}:host.small .icon-wrapper>fw-icon{font-size:16px}:host.small .app-badge{min-width:8px;padding:0;width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px;box-shadow:-1px 1px #00000040}:host.medium .icon-highlight{border-radius:14px;width:32px;height:32px}:host.medium .icon-wrapper{display:inline-flex;width:32px;height:32px;border-radius:8px;align-items:center;justify-content:center}:host.medium .icon-wrapper>fw-icon{font-size:20px}:host.medium .app-badge{min-width:8px;padding:0;width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px;box-shadow:-1px 1px #00000040}:host.large .icon-highlight{border-radius:18px;width:48px;height:48px}:host.large .icon-wrapper{display:inline-flex;width:48px;height:48px;border-radius:12px;align-items:center;justify-content:center}:host.large .icon-wrapper>fw-icon{font-size:32px}:host.extra-large .icon-highlight{border-radius:22px;width:64px;height:64px}:host.extra-large .icon-wrapper{display:inline-flex;width:64px;height:64px;border-radius:16px;align-items:center;justify-content:center}:host.extra-large .icon-wrapper>fw-icon{font-size:48px}:host.extra-large p{max-width:64px}:host.interactive .icon-highlight{border:4px solid transparent}:host.hover .icon-highlight,:host:hover .icon-highlight{border:4px solid var(--primary-border)}@keyframes rubber-band{0%{transform:scale(.95)}20%{transform:scale(1.05)}32%{transform:scale(.95)}48%{transform:scale(1)}}:host.animated.hover .icon-highlight,:host.animated:hover .icon-highlight{animation:rubber-band .5s linear forwards;border:4px solid var(--primary-border)}:host.focused .icon-highlight,:host:focus .icon-highlight,:host.animated:focus .icon-highlight{border:4px solid var(--primary-base)}:host.focused p,:host:focus p,:host.animated:focus p{color:var(--typography-base)}:host.static .icon-highlight,:host.static:hover .icon-highlight,:host.static.animated:hover .icon-highlight{border:4px solid transparent}:host.locked{pointer-events:none}\n"] }]
|
|
24
24
|
}], propDecorators: { label: [{
|
|
25
25
|
type: Input
|
|
26
26
|
}], icon: [{
|
|
@@ -55,4 +55,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
55
55
|
type: HostBinding,
|
|
56
56
|
args: ['class']
|
|
57
57
|
}] } });
|
|
58
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
58
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLWljb24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYXBwLWljb24vYXBwLWljb24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYXBwLWljb24vYXBwLWljb24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBTzlELE1BQU0sT0FBTyxrQkFBa0I7SUFML0I7UUFRVyxVQUFLLEdBQStDLFNBQVMsQ0FBQztRQUM5RCxTQUFJLEdBQWtELFFBQVEsQ0FBQztRQUMvRCxZQUFPLEdBQW9ELGFBQWEsQ0FBQztRQUVoRCxhQUFRLEdBQUcsRUFBRSxDQUFDO1FBQ1YsV0FBTSxHQUFhLEtBQUssQ0FBQztRQUN2QixhQUFRLEdBQWEsS0FBSyxDQUFDO1FBQzlDLFNBQUksR0FBRyxRQUFRLENBQUM7S0FLdEM7SUFIQyxJQUEwQixRQUFRO1FBQ2hDLE9BQU8sQ0FBQyxhQUFhLEVBQUUsSUFBSSxDQUFDLElBQUksRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDeEUsQ0FBQzs7K0dBZFUsa0JBQWtCO21HQUFsQixrQkFBa0IscVlDUC9CLHVWQVNBOzJGREZhLGtCQUFrQjtrQkFMOUIsU0FBUzsrQkFDRSxhQUFhOzhCQUtkLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUM0QixRQUFRO3NCQUF6QyxXQUFXO3VCQUFDLFVBQVU7O3NCQUFHLEtBQUs7Z0JBQ08sTUFBTTtzQkFBM0MsV0FBVzt1QkFBQyxjQUFjOztzQkFBRyxLQUFLO2dCQUNLLFFBQVE7c0JBQS9DLFdBQVc7dUJBQUMsZ0JBQWdCOztzQkFBRyxLQUFLO2dCQUNoQixJQUFJO3NCQUF4QixXQUFXO3VCQUFDLE1BQU07Z0JBRU8sUUFBUTtzQkFBakMsV0FBVzt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBIb3N0QmluZGluZywgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZnctYXBwLWljb24nLFxuICB0ZW1wbGF0ZVVybDogJy4vYXBwLWljb24uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9hcHAtaWNvbi5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBGd0FwcEljb25Db21wb25lbnQge1xuICBASW5wdXQoKSBsYWJlbD86IHN0cmluZztcbiAgQElucHV0KCkgaWNvbj86IHN0cmluZztcbiAgQElucHV0KCkgY29sb3I/OiAncHJpbWFyeScgfCAnZGFyaycgfCAnbGlnaHQnIHwgJ2dyYWRpZW50JyA9ICdwcmltYXJ5JztcbiAgQElucHV0KCkgc2l6ZT86ICdzbWFsbCcgfCAnbWVkaXVtJyB8ICdsYXJnZScgfCAnZXh0cmEtbGFyZ2UnID0gJ21lZGl1bSc7XG4gIEBJbnB1dCgpIHZhcmlhbnQ/OiAnaW50ZXJhY3RpdmUnIHwgJ2hvdmVyJyB8ICdmb2N1c2VkJyB8ICdzdGF0aWMnID0gJ2ludGVyYWN0aXZlJztcbiAgQElucHV0KCkgYmFkZ2U/OiBzdHJpbmc7XG4gIEBIb3N0QmluZGluZygndGFiaW5kZXgnKSBASW5wdXQoKSB0YWJpbmRleCA9ICcnO1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmxvY2tlZCcpIEBJbnB1dCgpIGxvY2tlZD86IGJvb2xlYW4gPSBmYWxzZTtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5hbmltYXRlZCcpIEBJbnB1dCgpIGFuaW1hdGVkPzogYm9vbGVhbiA9IGZhbHNlO1xuICBASG9zdEJpbmRpbmcoJ3JvbGUnKSByb2xlID0gJ2J1dHRvbic7XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpIGdldCBjc3NDbGFzcygpOiBzdHJpbmcge1xuICAgIHJldHVybiBbJ2Z3LWFwcC1pY29uJywgdGhpcy5zaXplLCB0aGlzLmNvbG9yLCB0aGlzLnZhcmlhbnRdLmpvaW4oJyAnKTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImljb24taGlnaGxpZ2h0XCI+PC9kaXY+XG48ZGl2IGNsYXNzPVwiaWNvbi13cmFwcGVyXCI+XG4gIDxkaXYgY2xhc3M9XCJhcHAtYmFkZ2VcIiAqbmdJZj1cImJhZGdlXCI+PHNwYW4+e3sgYmFkZ2UgfX08L3NwYW4+PC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJhcHAtbG9ja2VkXCIgKm5nSWY9XCJsb2NrZWRcIj5cbiAgICA8ZnctaWNvbj5sb2NrPC9mdy1pY29uPlxuICA8L2Rpdj5cbiAgPGZ3LWljb24gKm5nSWY9XCJpY29uXCI+e3sgaWNvbiB9fTwvZnctaWNvbj5cbjwvZGl2PlxuPHAgY2xhc3M9XCJ2aXNpb24tcDNcIiAqbmdJZj1cImxhYmVsXCI+e3sgbGFiZWwgfX08L3A+XG4iXX0=
|
|
@@ -26,10 +26,10 @@ export class FwAvatarComponent {
|
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
FwAvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
29
|
-
FwAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwAvatarComponent, selector: "fw-avatar", inputs: { color: "color", variant: "variant", content: "content", size: "size", initial: "initial", imageUrl: "imageUrl", imageAltText: "imageAltText", icon: "icon" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"content\">\n <div *ngSwitchCase=\"'image'\" [ngClass]=\"['avatar', 'avatar-' + color]\">\n <img\n *ngIf=\"!isImageBroken else displayInitial\"\n [src]=\"imageUrl\"\n [alt]=\"imageAltText\"\n (load)=\"loadImage()\"\n (error)=\"errorImage()\">\n </div>\n <div *ngSwitchCase=\"'icon'\" [ngClass]=\"['avatar', 'avatar-' +color]\">\n <ng-container *ngTemplateOutlet=\"displayIcon\"></ng-container>\n </div>\n <div *ngSwitchCase=\"'initial'\" [ngClass]=\"['avatar','avatar-' + color]\">\n <ng-container *ngTemplateOutlet=\"displayInitial\"></ng-container>\n </div>\n</ng-container>\n\n<ng-template #displayInitial>\n <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\n\n<ng-template #displayIcon>\n <fw-icon>{{ icon }}</fw-icon>\n</ng-template>\n", styles: [".white{color:#fff!important}.fill-white{background-color:#fff!important}.border-white{border-color:#fff!important}.border-top-white{border-top:1px solid;border-color:#fff!important}.border-right-white{border-right:1px solid;border-color:#fff!important}.border-bottom-white{border-bottom:1px solid;border-color:#fff!important}.border-left-white{border-left:1px solid;border-color:#fff!important}.black{color:#000!important}.fill-black{background-color:#000!important}.border-black{border-color:#000!important}.border-top-black{border-top:1px solid;border-color:#000!important}.border-right-black{border-right:1px solid;border-color:#000!important}.border-bottom-black{border-bottom:1px solid;border-color:#000!important}.border-left-black{border-left:1px solid;border-color:#000!important}.green{color:#59b96b!important}.fill-green{background-color:#59b96b!important}.border-green{border-color:#59b96b!important}.border-top-green{border-top:1px solid;border-color:#59b96b!important}.border-right-green{border-right:1px solid;border-color:#59b96b!important}.border-bottom-green{border-bottom:1px solid;border-color:#59b96b!important}.border-left-green{border-left:1px solid;border-color:#59b96b!important}.orange{color:#f7941d!important}.fill-orange{background-color:#f7941d!important}.border-orange{border-color:#f7941d!important}.border-top-orange{border-top:1px solid;border-color:#f7941d!important}.border-right-orange{border-right:1px solid;border-color:#f7941d!important}.border-bottom-orange{border-bottom:1px solid;border-color:#f7941d!important}.border-left-orange{border-left:1px solid;border-color:#f7941d!important}.red{color:#de584c!important}.fill-red{background-color:#de584c!important}.border-red{border-color:#de584c!important}.border-top-red{border-top:1px solid;border-color:#de584c!important}.border-right-red{border-right:1px solid;border-color:#de584c!important}.border-bottom-red{border-bottom:1px solid;border-color:#de584c!important}.border-left-red{border-left:1px solid;border-color:#de584c!important}.light-red{color:#f8e5e4!important}.fill-light-red{background-color:#f8e5e4!important}.border-light-red{border-color:#f8e5e4!important}.border-top-light-red{border-top:1px solid;border-color:#f8e5e4!important}.border-right-light-red{border-right:1px solid;border-color:#f8e5e4!important}.border-bottom-light-red{border-bottom:1px solid;border-color:#f8e5e4!important}.border-left-light-red{border-left:1px solid;border-color:#f8e5e4!important}.blue{color:#5871a2!important}.fill-blue{background-color:#5871a2!important}.border-blue{border-color:#5871a2!important}.border-top-blue{border-top:1px solid;border-color:#5871a2!important}.border-right-blue{border-right:1px solid;border-color:#5871a2!important}.border-bottom-blue{border-bottom:1px solid;border-color:#5871a2!important}.border-left-blue{border-left:1px solid;border-color:#5871a2!important}.focus-blue{color:#23527c!important}.fill-focus-blue{background-color:#23527c!important}.border-focus-blue{border-color:#23527c!important}.border-top-focus-blue{border-top:1px solid;border-color:#23527c!important}.border-right-focus-blue{border-right:1px solid;border-color:#23527c!important}.border-bottom-focus-blue{border-bottom:1px solid;border-color:#23527c!important}.border-left-focus-blue{border-left:1px solid;border-color:#23527c!important}.dark-blue{color:#394256!important}.fill-dark-blue{background-color:#394256!important}.border-dark-blue{border-color:#394256!important}.border-top-dark-blue{border-top:1px solid;border-color:#394256!important}.border-right-dark-blue{border-right:1px solid;border-color:#394256!important}.border-bottom-dark-blue{border-bottom:1px solid;border-color:#394256!important}.border-left-dark-blue{border-left:1px solid;border-color:#394256!important}.light-blue{color:#e7effe!important}.fill-light-blue{background-color:#e7effe!important}.border-light-blue{border-color:#e7effe!important}.border-top-light-blue{border-top:1px solid;border-color:#e7effe!important}.border-right-light-blue{border-right:1px solid;border-color:#e7effe!important}.border-bottom-light-blue{border-bottom:1px solid;border-color:#e7effe!important}.border-left-light-blue{border-left:1px solid;border-color:#e7effe!important}.bright-blue{color:#1b68fa!important}.fill-bright-blue{background-color:#1b68fa!important}.border-bright-blue{border-color:#1b68fa!important}.border-top-bright-blue{border-top:1px solid;border-color:#1b68fa!important}.border-right-bright-blue{border-right:1px solid;border-color:#1b68fa!important}.border-bottom-bright-blue{border-bottom:1px solid;border-color:#1b68fa!important}.border-left-bright-blue{border-left:1px solid;border-color:#1b68fa!important}.admin-black{color:#01010a!important}.fill-admin-black{background-color:#01010a!important}.border-admin-black{border-color:#01010a!important}.border-top-admin-black{border-top:1px solid;border-color:#01010a!important}.border-right-admin-black{border-right:1px solid;border-color:#01010a!important}.border-bottom-admin-black{border-bottom:1px solid;border-color:#01010a!important}.border-left-admin-black{border-left:1px solid;border-color:#01010a!important}.accent-purple{color:#b080fc!important}.fill-accent-purple{background-color:#b080fc!important}.border-accent-purple{border-color:#b080fc!important}.border-top-accent-purple{border-top:1px solid;border-color:#b080fc!important}.border-right-accent-purple{border-right:1px solid;border-color:#b080fc!important}.border-bottom-accent-purple{border-bottom:1px solid;border-color:#b080fc!important}.border-left-accent-purple{border-left:1px solid;border-color:#b080fc!important}.grey{color:#58595b!important}.fill-grey{background-color:#58595b!important}.border-grey{border-color:#58595b!important}.border-top-grey{border-top:1px solid;border-color:#58595b!important}.border-right-grey{border-right:1px solid;border-color:#58595b!important}.border-bottom-grey{border-bottom:1px solid;border-color:#58595b!important}.border-left-grey{border-left:1px solid;border-color:#58595b!important}.soft-grey{color:#dddede!important}.fill-soft-grey{background-color:#dddede!important}.border-soft-grey{border-color:#dddede!important}.border-top-soft-grey{border-top:1px solid;border-color:#dddede!important}.border-right-soft-grey{border-right:1px solid;border-color:#dddede!important}.border-bottom-soft-grey{border-bottom:1px solid;border-color:#dddede!important}.border-left-soft-grey{border-left:1px solid;border-color:#dddede!important}.light-grey{color:#eee!important}.fill-light-grey{background-color:#eee!important}.border-light-grey{border-color:#eee!important}.border-top-light-grey{border-top:1px solid;border-color:#eee!important}.border-right-light-grey{border-right:1px solid;border-color:#eee!important}.border-bottom-light-grey{border-bottom:1px solid;border-color:#eee!important}.border-left-light-grey{border-left:1px solid;border-color:#eee!important}.medium-grey{color:#ccc!important}.fill-medium-grey{background-color:#ccc!important}.border-medium-grey{border-color:#ccc!important}.border-top-medium-grey{border-top:1px solid;border-color:#ccc!important}.border-right-medium-grey{border-right:1px solid;border-color:#ccc!important}.border-bottom-medium-grey{border-bottom:1px solid;border-color:#ccc!important}.border-left-medium-grey{border-left:1px solid;border-color:#ccc!important}.medium-dark-grey{color:#999!important}.fill-medium-dark-grey{background-color:#999!important}.border-medium-dark-grey{border-color:#999!important}.border-top-medium-dark-grey{border-top:1px solid;border-color:#999!important}.border-right-medium-dark-grey{border-right:1px solid;border-color:#999!important}.border-bottom-medium-dark-grey{border-bottom:1px solid;border-color:#999!important}.border-left-medium-dark-grey{border-left:1px solid;border-color:#999!important}.dark-grey{color:#222!important}.fill-dark-grey{background-color:#222!important}.border-dark-grey{border-color:#222!important}.border-top-dark-grey{border-top:1px solid;border-color:#222!important}.border-right-dark-grey{border-right:1px solid;border-color:#222!important}.border-bottom-dark-grey{border-bottom:1px solid;border-color:#222!important}.border-left-dark-grey{border-left:1px solid;border-color:#222!important}.shuttle-gray{color:#5d6877!important}.fill-shuttle-gray{background-color:#5d6877!important}.border-shuttle-gray{border-color:#5d6877!important}.border-top-shuttle-gray{border-top:1px solid;border-color:#5d6877!important}.border-right-shuttle-gray{border-right:1px solid;border-color:#5d6877!important}.border-bottom-shuttle-gray{border-bottom:1px solid;border-color:#5d6877!important}.border-left-shuttle-gray{border-left:1px solid;border-color:#5d6877!important}.gull-gray{color:#9ea8b5!important}.fill-gull-gray{background-color:#9ea8b5!important}.border-gull-gray{border-color:#9ea8b5!important}.border-top-gull-gray{border-top:1px solid;border-color:#9ea8b5!important}.border-right-gull-gray{border-right:1px solid;border-color:#9ea8b5!important}.border-bottom-gull-gray{border-bottom:1px solid;border-color:#9ea8b5!important}.border-left-gull-gray{border-left:1px solid;border-color:#9ea8b5!important}.soft-blue{color:#eff1f5!important}.fill-soft-blue{background-color:#eff1f5!important}.border-soft-blue{border-color:#eff1f5!important}.border-top-soft-blue{border-top:1px solid;border-color:#eff1f5!important}.border-right-soft-blue{border-right:1px solid;border-color:#eff1f5!important}.border-bottom-soft-blue{border-bottom:1px solid;border-color:#eff1f5!important}.border-left-soft-blue{border-left:1px solid;border-color:#eff1f5!important}.dark-soft-blue{color:#e9ecf1!important}.fill-dark-soft-blue{background-color:#e9ecf1!important}.border-dark-soft-blue{border-color:#e9ecf1!important}.border-top-dark-soft-blue{border-top:1px solid;border-color:#e9ecf1!important}.border-right-dark-soft-blue{border-right:1px solid;border-color:#e9ecf1!important}.border-bottom-dark-soft-blue{border-bottom:1px solid;border-color:#e9ecf1!important}.border-left-dark-soft-blue{border-left:1px solid;border-color:#e9ecf1!important}.darker-soft-blue{color:#e6e9ef!important}.fill-darker-soft-blue{background-color:#e6e9ef!important}.border-darker-soft-blue{border-color:#e6e9ef!important}.border-top-darker-soft-blue{border-top:1px solid;border-color:#e6e9ef!important}.border-right-darker-soft-blue{border-right:1px solid;border-color:#e6e9ef!important}.border-bottom-darker-soft-blue{border-bottom:1px solid;border-color:#e6e9ef!important}.border-left-darker-soft-blue{border-left:1px solid;border-color:#e6e9ef!important}.light-soft-blue{color:#e9ecf1!important}.fill-light-soft-blue{background-color:#e9ecf1!important}.border-light-soft-blue{border-color:#e9ecf1!important}.border-top-light-soft-blue{border-top:1px solid;border-color:#e9ecf1!important}.border-right-light-soft-blue{border-right:1px solid;border-color:#e9ecf1!important}.border-bottom-light-soft-blue{border-bottom:1px solid;border-color:#e9ecf1!important}.border-left-light-soft-blue{border-left:1px solid;border-color:#e9ecf1!important}.lighter-soft-blue{color:#e6e9ef!important}.fill-lighter-soft-blue{background-color:#e6e9ef!important}.border-lighter-soft-blue{border-color:#e6e9ef!important}.border-top-lighter-soft-blue{border-top:1px solid;border-color:#e6e9ef!important}.border-right-lighter-soft-blue{border-right:1px solid;border-color:#e6e9ef!important}.border-bottom-lighter-soft-blue{border-bottom:1px solid;border-color:#e6e9ef!important}.border-left-lighter-soft-blue{border-left:1px solid;border-color:#e6e9ef!important}.eucalyptus{color:#1b9e4b!important}.fill-eucalyptus{background-color:#1b9e4b!important}.border-eucalyptus{border-color:#1b9e4b!important}.border-top-eucalyptus{border-top:1px solid;border-color:#1b9e4b!important}.border-right-eucalyptus{border-right:1px solid;border-color:#1b9e4b!important}.border-bottom-eucalyptus{border-bottom:1px solid;border-color:#1b9e4b!important}.border-left-eucalyptus{border-left:1px solid;border-color:#1b9e4b!important}.gamboge{color:#dd8e0a!important}.fill-gamboge{background-color:#dd8e0a!important}.border-gamboge{border-color:#dd8e0a!important}.border-top-gamboge{border-top:1px solid;border-color:#dd8e0a!important}.border-right-gamboge{border-right:1px solid;border-color:#dd8e0a!important}.border-bottom-gamboge{border-bottom:1px solid;border-color:#dd8e0a!important}.border-left-gamboge{border-left:1px solid;border-color:#dd8e0a!important}.valencia{color:#d73d3d!important}.fill-valencia{background-color:#d73d3d!important}.border-valencia{border-color:#d73d3d!important}.border-top-valencia{border-top:1px solid;border-color:#d73d3d!important}.border-right-valencia{border-right:1px solid;border-color:#d73d3d!important}.border-bottom-valencia{border-bottom:1px solid;border-color:#d73d3d!important}.border-left-valencia{border-left:1px solid;border-color:#d73d3d!important}:host{display:block}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit}:host .avatar fw-icon{color:#fff;font-size:inherit}:host .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}:host .avatar .initial{font-family:Inter;font-style:normal;font-weight:500;color:#fff;font-size:inherit}:host.small{width:16px;height:16px;font-size:8px}:host.small .avatar fw-icon{font-size:12px}:host.medium{width:32px;height:32px;font-size:14px}:host.medium .avatar fw-icon{font-size:18px}:host.large{width:40px;height:40px;font-size:14px}:host.large .avatar fw-icon{font-size:24px}:host.x-large{width:108px;height:108px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded{border-radius:4px}:host.circular{border-radius:64px}.avatar-primary{background:#1b68fa}.avatar-slate{background:#5d6877}.avatar-red{background:#de584c}.avatar-light-slate{background:#9ea8b5}.avatar-secondary{background:#b080fc}.avatar-warning{background:#dd8e0a}.avatar-success{background:#1b9e4b}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.FwIconComponent, selector: "fw-icon" }] });
|
|
29
|
+
FwAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwAvatarComponent, selector: "fw-avatar", inputs: { color: "color", variant: "variant", content: "content", size: "size", initial: "initial", imageUrl: "imageUrl", imageAltText: "imageAltText", icon: "icon" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"content\">\n <div *ngSwitchCase=\"'image'\" [ngClass]=\"['avatar', 'avatar-' + color]\">\n <img\n *ngIf=\"!isImageBroken else displayInitial\"\n [src]=\"imageUrl\"\n [alt]=\"imageAltText\"\n (load)=\"loadImage()\"\n (error)=\"errorImage()\">\n </div>\n <div *ngSwitchCase=\"'icon'\" [ngClass]=\"['avatar', 'avatar-' +color]\">\n <ng-container *ngTemplateOutlet=\"displayIcon\"></ng-container>\n </div>\n <div *ngSwitchCase=\"'initial'\" [ngClass]=\"['avatar','avatar-' + color]\">\n <ng-container *ngTemplateOutlet=\"displayInitial\"></ng-container>\n </div>\n</ng-container>\n\n<ng-template #displayInitial>\n <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\n\n<ng-template #displayIcon>\n <fw-icon>{{ icon }}</fw-icon>\n</ng-template>\n", styles: [":host{display:block}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit}:host .avatar fw-icon{color:var(--typography-contrast);font-size:inherit}:host .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}:host .avatar .initial{font-family:Inter,sans-serif;font-style:normal;font-weight:500;color:var(--typography-contrast);font-size:inherit}:host.small{width:16px;height:16px;font-size:8px}:host.small .avatar fw-icon{font-size:12px}:host.medium{width:32px;height:32px;font-size:14px}:host.medium .avatar fw-icon{font-size:18px}:host.large{width:40px;height:40px;font-size:14px}:host.large .avatar fw-icon{font-size:24px}:host.x-large{width:108px;height:108px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded{border-radius:4px}:host.circular{border-radius:64px}.avatar-primary{background:var(--primary-base)}.avatar-slate{background:var(--slate-medium)}.avatar-red{background:var(--red-base)}.avatar-light-slate{background:var(--slate-light)}.avatar-secondary{background:var(--secondary-base)}.avatar-warning{background:var(--orange-base)}.avatar-success{background:var(--green-base)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.FwIconComponent, selector: "fw-icon" }] });
|
|
30
30
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwAvatarComponent, decorators: [{
|
|
31
31
|
type: Component,
|
|
32
|
-
args: [{ selector: 'fw-avatar', template: "<ng-container [ngSwitch]=\"content\">\n <div *ngSwitchCase=\"'image'\" [ngClass]=\"['avatar', 'avatar-' + color]\">\n <img\n *ngIf=\"!isImageBroken else displayInitial\"\n [src]=\"imageUrl\"\n [alt]=\"imageAltText\"\n (load)=\"loadImage()\"\n (error)=\"errorImage()\">\n </div>\n <div *ngSwitchCase=\"'icon'\" [ngClass]=\"['avatar', 'avatar-' +color]\">\n <ng-container *ngTemplateOutlet=\"displayIcon\"></ng-container>\n </div>\n <div *ngSwitchCase=\"'initial'\" [ngClass]=\"['avatar','avatar-' + color]\">\n <ng-container *ngTemplateOutlet=\"displayInitial\"></ng-container>\n </div>\n</ng-container>\n\n<ng-template #displayInitial>\n <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\n\n<ng-template #displayIcon>\n <fw-icon>{{ icon }}</fw-icon>\n</ng-template>\n", styles: [".white{color:#fff!important}.fill-white{background-color:#fff!important}.border-white{border-color:#fff!important}.border-top-white{border-top:1px solid;border-color:#fff!important}.border-right-white{border-right:1px solid;border-color:#fff!important}.border-bottom-white{border-bottom:1px solid;border-color:#fff!important}.border-left-white{border-left:1px solid;border-color:#fff!important}.black{color:#000!important}.fill-black{background-color:#000!important}.border-black{border-color:#000!important}.border-top-black{border-top:1px solid;border-color:#000!important}.border-right-black{border-right:1px solid;border-color:#000!important}.border-bottom-black{border-bottom:1px solid;border-color:#000!important}.border-left-black{border-left:1px solid;border-color:#000!important}.green{color:#59b96b!important}.fill-green{background-color:#59b96b!important}.border-green{border-color:#59b96b!important}.border-top-green{border-top:1px solid;border-color:#59b96b!important}.border-right-green{border-right:1px solid;border-color:#59b96b!important}.border-bottom-green{border-bottom:1px solid;border-color:#59b96b!important}.border-left-green{border-left:1px solid;border-color:#59b96b!important}.orange{color:#f7941d!important}.fill-orange{background-color:#f7941d!important}.border-orange{border-color:#f7941d!important}.border-top-orange{border-top:1px solid;border-color:#f7941d!important}.border-right-orange{border-right:1px solid;border-color:#f7941d!important}.border-bottom-orange{border-bottom:1px solid;border-color:#f7941d!important}.border-left-orange{border-left:1px solid;border-color:#f7941d!important}.red{color:#de584c!important}.fill-red{background-color:#de584c!important}.border-red{border-color:#de584c!important}.border-top-red{border-top:1px solid;border-color:#de584c!important}.border-right-red{border-right:1px solid;border-color:#de584c!important}.border-bottom-red{border-bottom:1px solid;border-color:#de584c!important}.border-left-red{border-left:1px solid;border-color:#de584c!important}.light-red{color:#f8e5e4!important}.fill-light-red{background-color:#f8e5e4!important}.border-light-red{border-color:#f8e5e4!important}.border-top-light-red{border-top:1px solid;border-color:#f8e5e4!important}.border-right-light-red{border-right:1px solid;border-color:#f8e5e4!important}.border-bottom-light-red{border-bottom:1px solid;border-color:#f8e5e4!important}.border-left-light-red{border-left:1px solid;border-color:#f8e5e4!important}.blue{color:#5871a2!important}.fill-blue{background-color:#5871a2!important}.border-blue{border-color:#5871a2!important}.border-top-blue{border-top:1px solid;border-color:#5871a2!important}.border-right-blue{border-right:1px solid;border-color:#5871a2!important}.border-bottom-blue{border-bottom:1px solid;border-color:#5871a2!important}.border-left-blue{border-left:1px solid;border-color:#5871a2!important}.focus-blue{color:#23527c!important}.fill-focus-blue{background-color:#23527c!important}.border-focus-blue{border-color:#23527c!important}.border-top-focus-blue{border-top:1px solid;border-color:#23527c!important}.border-right-focus-blue{border-right:1px solid;border-color:#23527c!important}.border-bottom-focus-blue{border-bottom:1px solid;border-color:#23527c!important}.border-left-focus-blue{border-left:1px solid;border-color:#23527c!important}.dark-blue{color:#394256!important}.fill-dark-blue{background-color:#394256!important}.border-dark-blue{border-color:#394256!important}.border-top-dark-blue{border-top:1px solid;border-color:#394256!important}.border-right-dark-blue{border-right:1px solid;border-color:#394256!important}.border-bottom-dark-blue{border-bottom:1px solid;border-color:#394256!important}.border-left-dark-blue{border-left:1px solid;border-color:#394256!important}.light-blue{color:#e7effe!important}.fill-light-blue{background-color:#e7effe!important}.border-light-blue{border-color:#e7effe!important}.border-top-light-blue{border-top:1px solid;border-color:#e7effe!important}.border-right-light-blue{border-right:1px solid;border-color:#e7effe!important}.border-bottom-light-blue{border-bottom:1px solid;border-color:#e7effe!important}.border-left-light-blue{border-left:1px solid;border-color:#e7effe!important}.bright-blue{color:#1b68fa!important}.fill-bright-blue{background-color:#1b68fa!important}.border-bright-blue{border-color:#1b68fa!important}.border-top-bright-blue{border-top:1px solid;border-color:#1b68fa!important}.border-right-bright-blue{border-right:1px solid;border-color:#1b68fa!important}.border-bottom-bright-blue{border-bottom:1px solid;border-color:#1b68fa!important}.border-left-bright-blue{border-left:1px solid;border-color:#1b68fa!important}.admin-black{color:#01010a!important}.fill-admin-black{background-color:#01010a!important}.border-admin-black{border-color:#01010a!important}.border-top-admin-black{border-top:1px solid;border-color:#01010a!important}.border-right-admin-black{border-right:1px solid;border-color:#01010a!important}.border-bottom-admin-black{border-bottom:1px solid;border-color:#01010a!important}.border-left-admin-black{border-left:1px solid;border-color:#01010a!important}.accent-purple{color:#b080fc!important}.fill-accent-purple{background-color:#b080fc!important}.border-accent-purple{border-color:#b080fc!important}.border-top-accent-purple{border-top:1px solid;border-color:#b080fc!important}.border-right-accent-purple{border-right:1px solid;border-color:#b080fc!important}.border-bottom-accent-purple{border-bottom:1px solid;border-color:#b080fc!important}.border-left-accent-purple{border-left:1px solid;border-color:#b080fc!important}.grey{color:#58595b!important}.fill-grey{background-color:#58595b!important}.border-grey{border-color:#58595b!important}.border-top-grey{border-top:1px solid;border-color:#58595b!important}.border-right-grey{border-right:1px solid;border-color:#58595b!important}.border-bottom-grey{border-bottom:1px solid;border-color:#58595b!important}.border-left-grey{border-left:1px solid;border-color:#58595b!important}.soft-grey{color:#dddede!important}.fill-soft-grey{background-color:#dddede!important}.border-soft-grey{border-color:#dddede!important}.border-top-soft-grey{border-top:1px solid;border-color:#dddede!important}.border-right-soft-grey{border-right:1px solid;border-color:#dddede!important}.border-bottom-soft-grey{border-bottom:1px solid;border-color:#dddede!important}.border-left-soft-grey{border-left:1px solid;border-color:#dddede!important}.light-grey{color:#eee!important}.fill-light-grey{background-color:#eee!important}.border-light-grey{border-color:#eee!important}.border-top-light-grey{border-top:1px solid;border-color:#eee!important}.border-right-light-grey{border-right:1px solid;border-color:#eee!important}.border-bottom-light-grey{border-bottom:1px solid;border-color:#eee!important}.border-left-light-grey{border-left:1px solid;border-color:#eee!important}.medium-grey{color:#ccc!important}.fill-medium-grey{background-color:#ccc!important}.border-medium-grey{border-color:#ccc!important}.border-top-medium-grey{border-top:1px solid;border-color:#ccc!important}.border-right-medium-grey{border-right:1px solid;border-color:#ccc!important}.border-bottom-medium-grey{border-bottom:1px solid;border-color:#ccc!important}.border-left-medium-grey{border-left:1px solid;border-color:#ccc!important}.medium-dark-grey{color:#999!important}.fill-medium-dark-grey{background-color:#999!important}.border-medium-dark-grey{border-color:#999!important}.border-top-medium-dark-grey{border-top:1px solid;border-color:#999!important}.border-right-medium-dark-grey{border-right:1px solid;border-color:#999!important}.border-bottom-medium-dark-grey{border-bottom:1px solid;border-color:#999!important}.border-left-medium-dark-grey{border-left:1px solid;border-color:#999!important}.dark-grey{color:#222!important}.fill-dark-grey{background-color:#222!important}.border-dark-grey{border-color:#222!important}.border-top-dark-grey{border-top:1px solid;border-color:#222!important}.border-right-dark-grey{border-right:1px solid;border-color:#222!important}.border-bottom-dark-grey{border-bottom:1px solid;border-color:#222!important}.border-left-dark-grey{border-left:1px solid;border-color:#222!important}.shuttle-gray{color:#5d6877!important}.fill-shuttle-gray{background-color:#5d6877!important}.border-shuttle-gray{border-color:#5d6877!important}.border-top-shuttle-gray{border-top:1px solid;border-color:#5d6877!important}.border-right-shuttle-gray{border-right:1px solid;border-color:#5d6877!important}.border-bottom-shuttle-gray{border-bottom:1px solid;border-color:#5d6877!important}.border-left-shuttle-gray{border-left:1px solid;border-color:#5d6877!important}.gull-gray{color:#9ea8b5!important}.fill-gull-gray{background-color:#9ea8b5!important}.border-gull-gray{border-color:#9ea8b5!important}.border-top-gull-gray{border-top:1px solid;border-color:#9ea8b5!important}.border-right-gull-gray{border-right:1px solid;border-color:#9ea8b5!important}.border-bottom-gull-gray{border-bottom:1px solid;border-color:#9ea8b5!important}.border-left-gull-gray{border-left:1px solid;border-color:#9ea8b5!important}.soft-blue{color:#eff1f5!important}.fill-soft-blue{background-color:#eff1f5!important}.border-soft-blue{border-color:#eff1f5!important}.border-top-soft-blue{border-top:1px solid;border-color:#eff1f5!important}.border-right-soft-blue{border-right:1px solid;border-color:#eff1f5!important}.border-bottom-soft-blue{border-bottom:1px solid;border-color:#eff1f5!important}.border-left-soft-blue{border-left:1px solid;border-color:#eff1f5!important}.dark-soft-blue{color:#e9ecf1!important}.fill-dark-soft-blue{background-color:#e9ecf1!important}.border-dark-soft-blue{border-color:#e9ecf1!important}.border-top-dark-soft-blue{border-top:1px solid;border-color:#e9ecf1!important}.border-right-dark-soft-blue{border-right:1px solid;border-color:#e9ecf1!important}.border-bottom-dark-soft-blue{border-bottom:1px solid;border-color:#e9ecf1!important}.border-left-dark-soft-blue{border-left:1px solid;border-color:#e9ecf1!important}.darker-soft-blue{color:#e6e9ef!important}.fill-darker-soft-blue{background-color:#e6e9ef!important}.border-darker-soft-blue{border-color:#e6e9ef!important}.border-top-darker-soft-blue{border-top:1px solid;border-color:#e6e9ef!important}.border-right-darker-soft-blue{border-right:1px solid;border-color:#e6e9ef!important}.border-bottom-darker-soft-blue{border-bottom:1px solid;border-color:#e6e9ef!important}.border-left-darker-soft-blue{border-left:1px solid;border-color:#e6e9ef!important}.light-soft-blue{color:#e9ecf1!important}.fill-light-soft-blue{background-color:#e9ecf1!important}.border-light-soft-blue{border-color:#e9ecf1!important}.border-top-light-soft-blue{border-top:1px solid;border-color:#e9ecf1!important}.border-right-light-soft-blue{border-right:1px solid;border-color:#e9ecf1!important}.border-bottom-light-soft-blue{border-bottom:1px solid;border-color:#e9ecf1!important}.border-left-light-soft-blue{border-left:1px solid;border-color:#e9ecf1!important}.lighter-soft-blue{color:#e6e9ef!important}.fill-lighter-soft-blue{background-color:#e6e9ef!important}.border-lighter-soft-blue{border-color:#e6e9ef!important}.border-top-lighter-soft-blue{border-top:1px solid;border-color:#e6e9ef!important}.border-right-lighter-soft-blue{border-right:1px solid;border-color:#e6e9ef!important}.border-bottom-lighter-soft-blue{border-bottom:1px solid;border-color:#e6e9ef!important}.border-left-lighter-soft-blue{border-left:1px solid;border-color:#e6e9ef!important}.eucalyptus{color:#1b9e4b!important}.fill-eucalyptus{background-color:#1b9e4b!important}.border-eucalyptus{border-color:#1b9e4b!important}.border-top-eucalyptus{border-top:1px solid;border-color:#1b9e4b!important}.border-right-eucalyptus{border-right:1px solid;border-color:#1b9e4b!important}.border-bottom-eucalyptus{border-bottom:1px solid;border-color:#1b9e4b!important}.border-left-eucalyptus{border-left:1px solid;border-color:#1b9e4b!important}.gamboge{color:#dd8e0a!important}.fill-gamboge{background-color:#dd8e0a!important}.border-gamboge{border-color:#dd8e0a!important}.border-top-gamboge{border-top:1px solid;border-color:#dd8e0a!important}.border-right-gamboge{border-right:1px solid;border-color:#dd8e0a!important}.border-bottom-gamboge{border-bottom:1px solid;border-color:#dd8e0a!important}.border-left-gamboge{border-left:1px solid;border-color:#dd8e0a!important}.valencia{color:#d73d3d!important}.fill-valencia{background-color:#d73d3d!important}.border-valencia{border-color:#d73d3d!important}.border-top-valencia{border-top:1px solid;border-color:#d73d3d!important}.border-right-valencia{border-right:1px solid;border-color:#d73d3d!important}.border-bottom-valencia{border-bottom:1px solid;border-color:#d73d3d!important}.border-left-valencia{border-left:1px solid;border-color:#d73d3d!important}:host{display:block}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit}:host .avatar fw-icon{color:#fff;font-size:inherit}:host .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}:host .avatar .initial{font-family:Inter;font-style:normal;font-weight:500;color:#fff;font-size:inherit}:host.small{width:16px;height:16px;font-size:8px}:host.small .avatar fw-icon{font-size:12px}:host.medium{width:32px;height:32px;font-size:14px}:host.medium .avatar fw-icon{font-size:18px}:host.large{width:40px;height:40px;font-size:14px}:host.large .avatar fw-icon{font-size:24px}:host.x-large{width:108px;height:108px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded{border-radius:4px}:host.circular{border-radius:64px}.avatar-primary{background:#1b68fa}.avatar-slate{background:#5d6877}.avatar-red{background:#de584c}.avatar-light-slate{background:#9ea8b5}.avatar-secondary{background:#b080fc}.avatar-warning{background:#dd8e0a}.avatar-success{background:#1b9e4b}\n"] }]
|
|
32
|
+
args: [{ selector: 'fw-avatar', template: "<ng-container [ngSwitch]=\"content\">\n <div *ngSwitchCase=\"'image'\" [ngClass]=\"['avatar', 'avatar-' + color]\">\n <img\n *ngIf=\"!isImageBroken else displayInitial\"\n [src]=\"imageUrl\"\n [alt]=\"imageAltText\"\n (load)=\"loadImage()\"\n (error)=\"errorImage()\">\n </div>\n <div *ngSwitchCase=\"'icon'\" [ngClass]=\"['avatar', 'avatar-' +color]\">\n <ng-container *ngTemplateOutlet=\"displayIcon\"></ng-container>\n </div>\n <div *ngSwitchCase=\"'initial'\" [ngClass]=\"['avatar','avatar-' + color]\">\n <ng-container *ngTemplateOutlet=\"displayInitial\"></ng-container>\n </div>\n</ng-container>\n\n<ng-template #displayInitial>\n <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\n\n<ng-template #displayIcon>\n <fw-icon>{{ icon }}</fw-icon>\n</ng-template>\n", styles: [":host{display:block}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit}:host .avatar fw-icon{color:var(--typography-contrast);font-size:inherit}:host .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}:host .avatar .initial{font-family:Inter,sans-serif;font-style:normal;font-weight:500;color:var(--typography-contrast);font-size:inherit}:host.small{width:16px;height:16px;font-size:8px}:host.small .avatar fw-icon{font-size:12px}:host.medium{width:32px;height:32px;font-size:14px}:host.medium .avatar fw-icon{font-size:18px}:host.large{width:40px;height:40px;font-size:14px}:host.large .avatar fw-icon{font-size:24px}:host.x-large{width:108px;height:108px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded{border-radius:4px}:host.circular{border-radius:64px}.avatar-primary{background:var(--primary-base)}.avatar-slate{background:var(--slate-medium)}.avatar-red{background:var(--red-base)}.avatar-light-slate{background:var(--slate-light)}.avatar-secondary{background:var(--secondary-base)}.avatar-warning{background:var(--orange-base)}.avatar-success{background:var(--green-base)}\n"] }]
|
|
33
33
|
}], propDecorators: { classes: [{
|
|
34
34
|
type: HostBinding,
|
|
35
35
|
args: ['attr.class']
|