@flywheel-io/vision 2.1.1 → 2.2.0
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.
|
@@ -11,13 +11,15 @@ export declare class FwAvatarComponent {
|
|
|
11
11
|
imageUrl?: string;
|
|
12
12
|
imageAltText?: string;
|
|
13
13
|
icon?: IconType;
|
|
14
|
+
selected: import("@angular/core").InputSignal<boolean>;
|
|
14
15
|
colorSeed: import("@angular/core").ModelSignal<string>;
|
|
16
|
+
get selectedClassApplied(): boolean;
|
|
15
17
|
hasedColor: import("@angular/core").Signal<string>;
|
|
16
18
|
colorToDisplay: import("@angular/core").Signal<string>;
|
|
17
19
|
isImageBroken: boolean;
|
|
18
20
|
loadImage(): void;
|
|
19
21
|
errorImage(): void;
|
|
20
22
|
static ɵfac: i0.ɵɵFactoryDeclaration<FwAvatarComponent, never>;
|
|
21
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<FwAvatarComponent, "fw-avatar", never, { "color": { "alias": "color"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "content": { "alias": "content"; "required": false; }; "size": { "alias": "size"; "required": false; }; "initial": { "alias": "initial"; "required": false; }; "imageUrl": { "alias": "imageUrl"; "required": false; }; "imageAltText": { "alias": "imageAltText"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "colorSeed": { "alias": "colorSeed"; "required": false; "isSignal": true; }; }, { "colorSeed": "colorSeedChange"; }, never, never, false, never>;
|
|
23
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<FwAvatarComponent, "fw-avatar", never, { "color": { "alias": "color"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "content": { "alias": "content"; "required": false; }; "size": { "alias": "size"; "required": false; }; "initial": { "alias": "initial"; "required": false; }; "imageUrl": { "alias": "imageUrl"; "required": false; }; "imageAltText": { "alias": "imageAltText"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "colorSeed": { "alias": "colorSeed"; "required": false; "isSignal": true; }; }, { "colorSeed": "colorSeedChange"; }, never, never, false, never>;
|
|
22
24
|
}
|
|
23
25
|
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, computed, HostBinding, Input, model } from '@angular/core';
|
|
1
|
+
import { Component, computed, HostBinding, Input, input, model } from '@angular/core';
|
|
2
2
|
import { pickColorViaHash } from '../../color.utils';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
import * as i1 from "@angular/common";
|
|
@@ -22,15 +22,17 @@ export class FwAvatarComponent {
|
|
|
22
22
|
this.imageUrl = '';
|
|
23
23
|
this.imageAltText = '';
|
|
24
24
|
this.icon = 'user';
|
|
25
|
+
this.selected = input(false);
|
|
25
26
|
this.colorSeed = model();
|
|
26
27
|
this.hasedColor = computed(() => pickColorViaHash(this.colorSeed()));
|
|
27
28
|
this.colorToDisplay = computed(() => this.colorSeed() ? this.hasedColor() : namedColorMap[this.color]);
|
|
28
29
|
this.isImageBroken = false;
|
|
29
30
|
}
|
|
30
31
|
get classes() {
|
|
31
|
-
return [this.size, this.variant, this.content].filter(Boolean).join(' ');
|
|
32
|
+
return [this.size, this.variant, this.content, 'selected'].filter(Boolean).join(' ');
|
|
32
33
|
}
|
|
33
34
|
;
|
|
35
|
+
get selectedClassApplied() { return this.selected(); }
|
|
34
36
|
loadImage() {
|
|
35
37
|
this.isImageBroken = false;
|
|
36
38
|
}
|
|
@@ -38,11 +40,11 @@ export class FwAvatarComponent {
|
|
|
38
40
|
this.isImageBroken = true;
|
|
39
41
|
}
|
|
40
42
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
41
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: FwAvatarComponent, selector: "fw-avatar", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: false, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, initial: { classPropertyName: "initial", publicName: "initial", isSignal: false, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: false, isRequired: false, transformFunction: null }, imageAltText: { classPropertyName: "imageAltText", publicName: "imageAltText", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, colorSeed: { classPropertyName: "colorSeed", publicName: "colorSeed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorSeed: "colorSeedChange" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"content\">\n <div [style.backgroundColor]=\"colorToDisplay()\" *ngSwitchCase=\"'image'\" class=\"avatar\">\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'\" [style.backgroundColor]=\"colorToDisplay()\" class=\"avatar\">\n <ng-container *ngTemplateOutlet=\"displayIcon\"></ng-container>\n </div>\n <div *ngSwitchCase=\"'initial'\" [style.backgroundColor]=\"colorToDisplay()\" class=\"avatar\">\n <ng-container *ngTemplateOutlet=\"displayInitial\"></ng-container>\n </div>\n</ng-container>\n<ng-template #displayInitial>\n <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\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:24px}:host.large{width:48px;height:48px;font-size:22px}:host.large .avatar fw-icon{font-size:32px}:host.x-large{width:96px;height:96px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded.small{border-radius:4px}:host.rounded.medium{border-radius:8px}:host.rounded.large{border-radius:12px}:host.rounded.x-large{border-radius:16px}:host.circular{border-radius:64px}\n"], dependencies: [{ 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", inputs: ["size", "color"] }] }); }
|
|
43
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: FwAvatarComponent, selector: "fw-avatar", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: false, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, initial: { classPropertyName: "initial", publicName: "initial", isSignal: false, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: false, isRequired: false, transformFunction: null }, imageAltText: { classPropertyName: "imageAltText", publicName: "imageAltText", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, colorSeed: { classPropertyName: "colorSeed", publicName: "colorSeed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorSeed: "colorSeedChange" }, host: { properties: { "attr.class": "this.classes", "class.selected": "this.selectedClassApplied" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"content\">\n <div [style.backgroundColor]=\"colorToDisplay()\" *ngSwitchCase=\"'image'\" class=\"avatar\">\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'\" [style.backgroundColor]=\"colorToDisplay()\" class=\"avatar\">\n <ng-container *ngTemplateOutlet=\"displayIcon\"></ng-container>\n </div>\n <div *ngSwitchCase=\"'initial'\" [style.backgroundColor]=\"colorToDisplay()\" class=\"avatar\">\n <ng-container *ngTemplateOutlet=\"displayInitial\"></ng-container>\n </div>\n</ng-container>\n<ng-template #displayInitial>\n <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\n<ng-template #displayIcon>\n <fw-icon>{{ icon }}</fw-icon>\n</ng-template>\n", styles: [":host-context(.selected):after{content:\"\";position:absolute;width:calc(100% + 6px);height:calc(100% + 6px);border-radius:inherit;top:-6px;left:-6px;border:3px solid var(--primary-base)}:host{display:block;position:relative;box-sizing:border-box}:host.selected:after{content:\"\";position:absolute;width:calc(100% + 6px);height:calc(100% + 6px);border-radius:inherit;top:-6px;left:-6px;border:3px solid var(--primary-base)}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit;overflow:clip}: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:24px}:host.large{width:48px;height:48px;font-size:22px}:host.large .avatar fw-icon{font-size:32px}:host.x-large{width:96px;height:96px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded.small{border-radius:4px}:host.rounded.medium{border-radius:8px}:host.rounded.large{border-radius:12px}:host.rounded.x-large{border-radius:16px}:host.circular{border-radius:64px}\n"], dependencies: [{ 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", inputs: ["size", "color"] }] }); }
|
|
42
44
|
}
|
|
43
45
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwAvatarComponent, decorators: [{
|
|
44
46
|
type: Component,
|
|
45
|
-
args: [{ selector: 'fw-avatar', template: "<ng-container [ngSwitch]=\"content\">\n <div [style.backgroundColor]=\"colorToDisplay()\" *ngSwitchCase=\"'image'\" class=\"avatar\">\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'\" [style.backgroundColor]=\"colorToDisplay()\" class=\"avatar\">\n <ng-container *ngTemplateOutlet=\"displayIcon\"></ng-container>\n </div>\n <div *ngSwitchCase=\"'initial'\" [style.backgroundColor]=\"colorToDisplay()\" class=\"avatar\">\n <ng-container *ngTemplateOutlet=\"displayInitial\"></ng-container>\n </div>\n</ng-container>\n<ng-template #displayInitial>\n <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\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:24px}:host.large{width:48px;height:48px;font-size:22px}:host.large .avatar fw-icon{font-size:32px}:host.x-large{width:96px;height:96px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded.small{border-radius:4px}:host.rounded.medium{border-radius:8px}:host.rounded.large{border-radius:12px}:host.rounded.x-large{border-radius:16px}:host.circular{border-radius:64px}\n"] }]
|
|
47
|
+
args: [{ selector: 'fw-avatar', template: "<ng-container [ngSwitch]=\"content\">\n <div [style.backgroundColor]=\"colorToDisplay()\" *ngSwitchCase=\"'image'\" class=\"avatar\">\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'\" [style.backgroundColor]=\"colorToDisplay()\" class=\"avatar\">\n <ng-container *ngTemplateOutlet=\"displayIcon\"></ng-container>\n </div>\n <div *ngSwitchCase=\"'initial'\" [style.backgroundColor]=\"colorToDisplay()\" class=\"avatar\">\n <ng-container *ngTemplateOutlet=\"displayInitial\"></ng-container>\n </div>\n</ng-container>\n<ng-template #displayInitial>\n <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\n<ng-template #displayIcon>\n <fw-icon>{{ icon }}</fw-icon>\n</ng-template>\n", styles: [":host-context(.selected):after{content:\"\";position:absolute;width:calc(100% + 6px);height:calc(100% + 6px);border-radius:inherit;top:-6px;left:-6px;border:3px solid var(--primary-base)}:host{display:block;position:relative;box-sizing:border-box}:host.selected:after{content:\"\";position:absolute;width:calc(100% + 6px);height:calc(100% + 6px);border-radius:inherit;top:-6px;left:-6px;border:3px solid var(--primary-base)}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit;overflow:clip}: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:24px}:host.large{width:48px;height:48px;font-size:22px}:host.large .avatar fw-icon{font-size:32px}:host.x-large{width:96px;height:96px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded.small{border-radius:4px}:host.rounded.medium{border-radius:8px}:host.rounded.large{border-radius:12px}:host.rounded.x-large{border-radius:16px}:host.circular{border-radius:64px}\n"] }]
|
|
46
48
|
}], propDecorators: { classes: [{
|
|
47
49
|
type: HostBinding,
|
|
48
50
|
args: ['attr.class']
|
|
@@ -62,5 +64,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
62
64
|
type: Input
|
|
63
65
|
}], icon: [{
|
|
64
66
|
type: Input
|
|
67
|
+
}], selectedClassApplied: [{
|
|
68
|
+
type: HostBinding,
|
|
69
|
+
args: ['class.selected']
|
|
65
70
|
}] } });
|
|
66
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
71
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2F2YXRhci9hdmF0YXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYXZhdGFyL2F2YXRhci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBQyxXQUFXLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFckYsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sbUJBQW1CLENBQUM7Ozs7QUFLckQsTUFBTSxhQUFhLEdBQXlDO0lBQzFELE9BQU8sRUFBRSxxQkFBcUI7SUFDOUIsU0FBUyxFQUFFLHVCQUF1QjtJQUNsQyxHQUFHLEVBQUUsaUJBQWlCO0lBQ3RCLGFBQWEsRUFBRSxvQkFBb0I7SUFDbkMsS0FBSyxFQUFFLG1CQUFtQjtJQUMxQixPQUFPLEVBQUUsb0JBQW9CO0lBQzdCLE9BQU8sRUFBRSxtQkFBbUI7Q0FDN0IsQ0FBQTtBQU1ELE1BQU0sT0FBTyxpQkFBaUI7SUFMOUI7UUFXVyxVQUFLLEdBQXVCLFNBQVMsQ0FBQztRQUN0QyxZQUFPLEdBQXVDLFVBQVUsQ0FBQztRQUN6RCxZQUFPLEdBQWtDLE1BQU0sQ0FBQztRQUNoRCxTQUFJLEdBQThDLE9BQU8sQ0FBQztRQUMxRCxZQUFPLEdBQVksRUFBRSxDQUFDO1FBQ3RCLGFBQVEsR0FBWSxFQUFFLENBQUM7UUFDdkIsaUJBQVksR0FBWSxFQUFFLENBQUM7UUFDM0IsU0FBSSxHQUFjLE1BQU0sQ0FBQztRQUNsQyxhQUFRLEdBQUcsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3hCLGNBQVMsR0FBRyxLQUFLLEVBQVUsQ0FBQztRQUk1QixlQUFVLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFFaEUsbUJBQWMsR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUMsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztRQUVsRyxrQkFBYSxHQUFZLEtBQUssQ0FBQztLQVNoQztJQS9CQyxJQUErQixPQUFPO1FBRXBDLE9BQU8sQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLE9BQU8sRUFBRSxVQUFVLENBQUMsQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQ3ZGLENBQUM7SUFBQSxDQUFDO0lBYUYsSUFBbUMsb0JBQW9CLEtBQUssT0FBTyxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBUXJGLFNBQVM7UUFDUCxJQUFJLENBQUMsYUFBYSxHQUFHLEtBQUssQ0FBQztJQUM3QixDQUFDO0lBRUQsVUFBVTtRQUNSLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDO0lBQzVCLENBQUM7K0dBL0JVLGlCQUFpQjttR0FBakIsaUJBQWlCLHM4Q0NyQjlCLDY0QkFzQkE7OzRGRERhLGlCQUFpQjtrQkFMN0IsU0FBUzsrQkFDRSxXQUFXOzhCQUtVLE9BQU87c0JBQXJDLFdBQVc7dUJBQUMsWUFBWTtnQkFLaEIsS0FBSztzQkFBYixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUk2QixvQkFBb0I7c0JBQXRELFdBQVc7dUJBQUMsZ0JBQWdCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBjb21wdXRlZCxIb3N0QmluZGluZywgSW5wdXQsIGlucHV0LCBtb2RlbCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBwaWNrQ29sb3JWaWFIYXNoIH0gZnJvbSAnLi4vLi4vY29sb3IudXRpbHMnO1xuaW1wb3J0IHsgSWNvblR5cGUgfSBmcm9tICcuLi9pY29uL2ljb24udHlwZXMnO1xuXG50eXBlIEF2YXRhckNvbG9yT3B0aW9uID0gJ3ByaW1hcnknIHwgJ3NlY29uZGFyeScgfCAncmVkJyB8ICdsaWdodC1zbGF0ZScgfCAnc2xhdGUnIHwgJ3dhcm5pbmcnIHwgJ3N1Y2Nlc3MnO1xuXG5jb25zdCBuYW1lZENvbG9yTWFwOiB7IFtLIGluIEF2YXRhckNvbG9yT3B0aW9uXTogc3RyaW5nIH0gPSB7XG4gIHByaW1hcnk6ICd2YXIoLS1wcmltYXJ5LWJhc2UpJyxcbiAgc2Vjb25kYXJ5OiAndmFyKC0tc2Vjb25kYXJ5LWJhc2UpJyxcbiAgcmVkOiAndmFyKC0tcmVkLWJhc2UpJyxcbiAgJ2xpZ2h0LXNsYXRlJzogJ3ZhcigtLXNsYXRlLWxpZ2h0KScsXG4gIHNsYXRlOiAndmFyKC0tc2xhdGUtYmFzZSknLFxuICB3YXJuaW5nOiAndmFyKC0tb3JhbmdlLWJhc2UpJyxcbiAgc3VjY2VzczogJ3ZhcigtLWdyZWVuLWJhc2UpJyxcbn1cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2Z3LWF2YXRhcicsXG4gIHN0eWxlVXJsczogWycuL2F2YXRhci5jb21wb25lbnQuc2NzcyddLFxuICB0ZW1wbGF0ZVVybDogJy4vYXZhdGFyLmNvbXBvbmVudC5odG1sJyxcbn0pXG5leHBvcnQgY2xhc3MgRndBdmF0YXJDb21wb25lbnQge1xuICBASG9zdEJpbmRpbmcoJ2F0dHIuY2xhc3MnKSBnZXQgY2xhc3NlcygpOiBzdHJpbmcge1xuXG4gICAgcmV0dXJuIFt0aGlzLnNpemUsIHRoaXMudmFyaWFudCwgdGhpcy5jb250ZW50LCAnc2VsZWN0ZWQnXS5maWx0ZXIoQm9vbGVhbikuam9pbignICcpO1xuICB9O1xuXG4gIEBJbnB1dCgpIGNvbG9yPzogQXZhdGFyQ29sb3JPcHRpb24gPSAncHJpbWFyeSc7XG4gIEBJbnB1dCgpIHZhcmlhbnQ/OiAnY2lyY3VsYXInIHwgJ3JvdW5kZWQnIHwgJ3NxdWFyZScgPSAnY2lyY3VsYXInO1xuICBASW5wdXQoKSBjb250ZW50PzogJ2ltYWdlJyB8ICdpY29uJyB8ICdpbml0aWFsJyA9ICdpY29uJztcbiAgQElucHV0KCkgc2l6ZT86ICdzbWFsbCcgfCAnbWVkaXVtJyB8ICdsYXJnZScgfCAneC1sYXJnZScgPSAnc21hbGwnO1xuICBASW5wdXQoKSBpbml0aWFsPzogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIGltYWdlVXJsPzogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIGltYWdlQWx0VGV4dD86IHN0cmluZyA9ICcnO1xuICBASW5wdXQoKSBpY29uPzogSWNvblR5cGUgPSAndXNlcic7XG4gIHNlbGVjdGVkID0gaW5wdXQoZmFsc2UpO1xuICBjb2xvclNlZWQgPSBtb2RlbDxzdHJpbmc+KCk7XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5zZWxlY3RlZCcpIGdldCBzZWxlY3RlZENsYXNzQXBwbGllZCgpIHsgcmV0dXJuIHRoaXMuc2VsZWN0ZWQoKTsgfVxuXG4gIGhhc2VkQ29sb3IgPSBjb21wdXRlZCgoKSA9PiBwaWNrQ29sb3JWaWFIYXNoKHRoaXMuY29sb3JTZWVkKCkpKTtcblxuICBjb2xvclRvRGlzcGxheSA9IGNvbXB1dGVkKCgpID0+IHRoaXMuY29sb3JTZWVkKCkgPyB0aGlzLmhhc2VkQ29sb3IoKSA6IG5hbWVkQ29sb3JNYXBbdGhpcy5jb2xvcl0pO1xuXG4gIGlzSW1hZ2VCcm9rZW46IGJvb2xlYW4gPSBmYWxzZTtcblxuICBsb2FkSW1hZ2UoKTogdm9pZCB7XG4gICAgdGhpcy5pc0ltYWdlQnJva2VuID0gZmFsc2U7XG4gIH1cblxuICBlcnJvckltYWdlKCk6IHZvaWQge1xuICAgIHRoaXMuaXNJbWFnZUJyb2tlbiA9IHRydWU7XG4gIH1cbn1cbiIsIjxuZy1jb250YWluZXIgW25nU3dpdGNoXT1cImNvbnRlbnRcIj5cbiAgPGRpdiBbc3R5bGUuYmFja2dyb3VuZENvbG9yXT1cImNvbG9yVG9EaXNwbGF5KClcIiAqbmdTd2l0Y2hDYXNlPVwiJ2ltYWdlJ1wiIGNsYXNzPVwiYXZhdGFyXCI+XG4gICAgPGltZ1xuICAgICAgKm5nSWY9XCIhaXNJbWFnZUJyb2tlbiBlbHNlIGRpc3BsYXlJbml0aWFsXCJcbiAgICAgIFtzcmNdPVwiaW1hZ2VVcmxcIlxuICAgICAgW2FsdF09XCJpbWFnZUFsdFRleHRcIlxuICAgICAgKGxvYWQpPVwibG9hZEltYWdlKClcIlxuICAgICAgKGVycm9yKT1cImVycm9ySW1hZ2UoKVwiPlxuICA8L2Rpdj5cbiAgPGRpdiAqbmdTd2l0Y2hDYXNlPVwiJ2ljb24nXCIgW3N0eWxlLmJhY2tncm91bmRDb2xvcl09XCJjb2xvclRvRGlzcGxheSgpXCIgY2xhc3M9XCJhdmF0YXJcIj5cbiAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiZGlzcGxheUljb25cIj48L25nLWNvbnRhaW5lcj5cbiAgPC9kaXY+XG4gIDxkaXYgKm5nU3dpdGNoQ2FzZT1cIidpbml0aWFsJ1wiIFtzdHlsZS5iYWNrZ3JvdW5kQ29sb3JdPVwiY29sb3JUb0Rpc3BsYXkoKVwiIGNsYXNzPVwiYXZhdGFyXCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImRpc3BsYXlJbml0aWFsXCI+PC9uZy1jb250YWluZXI+XG4gIDwvZGl2PlxuPC9uZy1jb250YWluZXI+XG48bmctdGVtcGxhdGUgI2Rpc3BsYXlJbml0aWFsPlxuICA8c3BhbiBjbGFzcz1cImluaXRpYWxcIiAqbmdJZj1cImluaXRpYWwgZWxzZSBkaXNwbGF5SWNvblwiPnt7IGluaXRpYWwgfX08L3NwYW4+XG48L25nLXRlbXBsYXRlPlxuPG5nLXRlbXBsYXRlICNkaXNwbGF5SWNvbj5cbiAgPGZ3LWljb24+e3sgaWNvbiB9fTwvZnctaWNvbj5cbjwvbmctdGVtcGxhdGU+XG4iXX0=
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { HostBinding, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, NgModule, model, computed, ContentChildren, ViewChild, ViewEncapsulation, Directive, forwardRef, HostListener, Optional, Inject, SkipSelf, Injectable, Pipe, ContentChild,
|
|
2
|
+
import { HostBinding, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, NgModule, input, model, computed, ContentChildren, ViewChild, ViewEncapsulation, Directive, forwardRef, HostListener, Optional, Inject, SkipSelf, Injectable, Pipe, ContentChild, output, contentChildren, signal, Host, viewChild, effect, ViewChildren, Self } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/platform-browser';
|
|
@@ -361,15 +361,17 @@ class FwAvatarComponent {
|
|
|
361
361
|
this.imageUrl = '';
|
|
362
362
|
this.imageAltText = '';
|
|
363
363
|
this.icon = 'user';
|
|
364
|
+
this.selected = input(false);
|
|
364
365
|
this.colorSeed = model();
|
|
365
366
|
this.hasedColor = computed(() => pickColorViaHash(this.colorSeed()));
|
|
366
367
|
this.colorToDisplay = computed(() => this.colorSeed() ? this.hasedColor() : namedColorMap[this.color]);
|
|
367
368
|
this.isImageBroken = false;
|
|
368
369
|
}
|
|
369
370
|
get classes() {
|
|
370
|
-
return [this.size, this.variant, this.content].filter(Boolean).join(' ');
|
|
371
|
+
return [this.size, this.variant, this.content, 'selected'].filter(Boolean).join(' ');
|
|
371
372
|
}
|
|
372
373
|
;
|
|
374
|
+
get selectedClassApplied() { return this.selected(); }
|
|
373
375
|
loadImage() {
|
|
374
376
|
this.isImageBroken = false;
|
|
375
377
|
}
|
|
@@ -377,11 +379,11 @@ class FwAvatarComponent {
|
|
|
377
379
|
this.isImageBroken = true;
|
|
378
380
|
}
|
|
379
381
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
380
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: FwAvatarComponent, selector: "fw-avatar", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: false, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, initial: { classPropertyName: "initial", publicName: "initial", isSignal: false, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: false, isRequired: false, transformFunction: null }, imageAltText: { classPropertyName: "imageAltText", publicName: "imageAltText", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, colorSeed: { classPropertyName: "colorSeed", publicName: "colorSeed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorSeed: "colorSeedChange" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"content\">\n <div [style.backgroundColor]=\"colorToDisplay()\" *ngSwitchCase=\"'image'\" class=\"avatar\">\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'\" [style.backgroundColor]=\"colorToDisplay()\" class=\"avatar\">\n <ng-container *ngTemplateOutlet=\"displayIcon\"></ng-container>\n </div>\n <div *ngSwitchCase=\"'initial'\" [style.backgroundColor]=\"colorToDisplay()\" class=\"avatar\">\n <ng-container *ngTemplateOutlet=\"displayInitial\"></ng-container>\n </div>\n</ng-container>\n<ng-template #displayInitial>\n <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\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:24px}:host.large{width:48px;height:48px;font-size:22px}:host.large .avatar fw-icon{font-size:32px}:host.x-large{width:96px;height:96px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded.small{border-radius:4px}:host.rounded.medium{border-radius:8px}:host.rounded.large{border-radius:12px}:host.rounded.x-large{border-radius:16px}:host.circular{border-radius:64px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] }); }
|
|
382
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: FwAvatarComponent, selector: "fw-avatar", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: false, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, initial: { classPropertyName: "initial", publicName: "initial", isSignal: false, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: false, isRequired: false, transformFunction: null }, imageAltText: { classPropertyName: "imageAltText", publicName: "imageAltText", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, colorSeed: { classPropertyName: "colorSeed", publicName: "colorSeed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorSeed: "colorSeedChange" }, host: { properties: { "attr.class": "this.classes", "class.selected": "this.selectedClassApplied" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"content\">\n <div [style.backgroundColor]=\"colorToDisplay()\" *ngSwitchCase=\"'image'\" class=\"avatar\">\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'\" [style.backgroundColor]=\"colorToDisplay()\" class=\"avatar\">\n <ng-container *ngTemplateOutlet=\"displayIcon\"></ng-container>\n </div>\n <div *ngSwitchCase=\"'initial'\" [style.backgroundColor]=\"colorToDisplay()\" class=\"avatar\">\n <ng-container *ngTemplateOutlet=\"displayInitial\"></ng-container>\n </div>\n</ng-container>\n<ng-template #displayInitial>\n <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\n<ng-template #displayIcon>\n <fw-icon>{{ icon }}</fw-icon>\n</ng-template>\n", styles: [":host-context(.selected):after{content:\"\";position:absolute;width:calc(100% + 6px);height:calc(100% + 6px);border-radius:inherit;top:-6px;left:-6px;border:3px solid var(--primary-base)}:host{display:block;position:relative;box-sizing:border-box}:host.selected:after{content:\"\";position:absolute;width:calc(100% + 6px);height:calc(100% + 6px);border-radius:inherit;top:-6px;left:-6px;border:3px solid var(--primary-base)}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit;overflow:clip}: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:24px}:host.large{width:48px;height:48px;font-size:22px}:host.large .avatar fw-icon{font-size:32px}:host.x-large{width:96px;height:96px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded.small{border-radius:4px}:host.rounded.medium{border-radius:8px}:host.rounded.large{border-radius:12px}:host.rounded.x-large{border-radius:16px}:host.circular{border-radius:64px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] }); }
|
|
381
383
|
}
|
|
382
384
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwAvatarComponent, decorators: [{
|
|
383
385
|
type: Component,
|
|
384
|
-
args: [{ selector: 'fw-avatar', template: "<ng-container [ngSwitch]=\"content\">\n <div [style.backgroundColor]=\"colorToDisplay()\" *ngSwitchCase=\"'image'\" class=\"avatar\">\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'\" [style.backgroundColor]=\"colorToDisplay()\" class=\"avatar\">\n <ng-container *ngTemplateOutlet=\"displayIcon\"></ng-container>\n </div>\n <div *ngSwitchCase=\"'initial'\" [style.backgroundColor]=\"colorToDisplay()\" class=\"avatar\">\n <ng-container *ngTemplateOutlet=\"displayInitial\"></ng-container>\n </div>\n</ng-container>\n<ng-template #displayInitial>\n <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\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:24px}:host.large{width:48px;height:48px;font-size:22px}:host.large .avatar fw-icon{font-size:32px}:host.x-large{width:96px;height:96px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded.small{border-radius:4px}:host.rounded.medium{border-radius:8px}:host.rounded.large{border-radius:12px}:host.rounded.x-large{border-radius:16px}:host.circular{border-radius:64px}\n"] }]
|
|
386
|
+
args: [{ selector: 'fw-avatar', template: "<ng-container [ngSwitch]=\"content\">\n <div [style.backgroundColor]=\"colorToDisplay()\" *ngSwitchCase=\"'image'\" class=\"avatar\">\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'\" [style.backgroundColor]=\"colorToDisplay()\" class=\"avatar\">\n <ng-container *ngTemplateOutlet=\"displayIcon\"></ng-container>\n </div>\n <div *ngSwitchCase=\"'initial'\" [style.backgroundColor]=\"colorToDisplay()\" class=\"avatar\">\n <ng-container *ngTemplateOutlet=\"displayInitial\"></ng-container>\n </div>\n</ng-container>\n<ng-template #displayInitial>\n <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\n<ng-template #displayIcon>\n <fw-icon>{{ icon }}</fw-icon>\n</ng-template>\n", styles: [":host-context(.selected):after{content:\"\";position:absolute;width:calc(100% + 6px);height:calc(100% + 6px);border-radius:inherit;top:-6px;left:-6px;border:3px solid var(--primary-base)}:host{display:block;position:relative;box-sizing:border-box}:host.selected:after{content:\"\";position:absolute;width:calc(100% + 6px);height:calc(100% + 6px);border-radius:inherit;top:-6px;left:-6px;border:3px solid var(--primary-base)}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit;overflow:clip}: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:24px}:host.large{width:48px;height:48px;font-size:22px}:host.large .avatar fw-icon{font-size:32px}:host.x-large{width:96px;height:96px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded.small{border-radius:4px}:host.rounded.medium{border-radius:8px}:host.rounded.large{border-radius:12px}:host.rounded.x-large{border-radius:16px}:host.circular{border-radius:64px}\n"] }]
|
|
385
387
|
}], propDecorators: { classes: [{
|
|
386
388
|
type: HostBinding,
|
|
387
389
|
args: ['attr.class']
|
|
@@ -401,6 +403,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
401
403
|
type: Input
|
|
402
404
|
}], icon: [{
|
|
403
405
|
type: Input
|
|
406
|
+
}], selectedClassApplied: [{
|
|
407
|
+
type: HostBinding,
|
|
408
|
+
args: ['class.selected']
|
|
404
409
|
}] } });
|
|
405
410
|
|
|
406
411
|
class FwAvatarModule {
|