@flywheel-io/vision 21.1.0 → 21.1.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.
|
@@ -367,7 +367,7 @@ class FwAvatarComponent {
|
|
|
367
367
|
this.isImageBroken.set(true);
|
|
368
368
|
}
|
|
369
369
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
370
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FwAvatarComponent, isStandalone: true, selector: "fw-avatar", inputs: { bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, colorSeed: { classPropertyName: "colorSeed", publicName: "colorSeed", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, imageAltText: { classPropertyName: "imageAltText", publicName: "imageAltText", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, initial: { classPropertyName: "initial", publicName: "initial", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorSeed: "colorSeedChange", selected: "selectedChange" }, host: { listeners: { "click": "onClick()" }, properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div class=\"avatar\" [style.background]=\"colorToDisplay()\">\n @switch (content()) {\n @case ('image') {\n @if (!isImageBroken()) {\n <img\n [alt]=\"imageAltText()\"\n [src]=\"imageUrl()\"\n (load)=\"loadImage()\"\n (error)=\"errorImage()\">\n } @else {\n @if (initial()) {\n <span class=\"initial\">{{ initial() }}</span>\n } @else {\n <fw-icon>{{ icon() }}</fw-icon>\n }\n }\n }\n @case ('icon') {\n <fw-icon>{{ icon() }}</fw-icon>\n }\n @case ('initial') {\n @if (initial()) {\n <span class=\"initial\">{{ initial() }}</span>\n } @else {\n <fw-icon>{{ icon() }}</fw-icon>\n }\n }\n }\n</div>\n", styles: [":host:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;pointer-events:none}:host-context(.selected):after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.bordered:after{box-shadow:0 0 0 1px var(--separations-base)}:host{display:block;position:relative;box-sizing:border-box}:host.selectable{cursor:pointer}:host:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.small:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.small.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.medium:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.medium.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.large:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.large.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.x-large:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.x-large.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem 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: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["ariaLabel", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
370
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FwAvatarComponent, isStandalone: true, selector: "fw-avatar", inputs: { bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, colorSeed: { classPropertyName: "colorSeed", publicName: "colorSeed", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, imageAltText: { classPropertyName: "imageAltText", publicName: "imageAltText", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, initial: { classPropertyName: "initial", publicName: "initial", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorSeed: "colorSeedChange", selected: "selectedChange" }, host: { listeners: { "click": "onClick()" }, properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div class=\"avatar\" [style.background]=\"colorToDisplay()\">\n @switch (content()) {\n @case ('image') {\n @if (!isImageBroken()) {\n <img\n [alt]=\"imageAltText()\"\n [src]=\"imageUrl()\"\n (load)=\"loadImage()\"\n (error)=\"errorImage()\">\n } @else {\n @if (initial()) {\n <span class=\"initial\">{{ initial() }}</span>\n } @else {\n <fw-icon>{{ icon() }}</fw-icon>\n }\n }\n }\n @case ('icon') {\n <fw-icon>{{ icon() }}</fw-icon>\n }\n @case ('initial') {\n @if (initial()) {\n <span class=\"initial\">{{ initial() }}</span>\n } @else {\n <fw-icon>{{ icon() }}</fw-icon>\n }\n }\n }\n</div>\n", styles: [":host:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;pointer-events:none}:host-context(.selected):after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.bordered:after{box-shadow:0 0 0 1px var(--separations-base)}:host{display:block;position:relative;box-sizing:border-box}:host.selectable{cursor:pointer}:host:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.small:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.small.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.compact:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.compact.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.medium:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.medium.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.large:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.large.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.x-large:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.x-large.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem 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.compact{width:24px;height:24px;font-size:11px}:host.compact .avatar fw-icon{font-size:18px}: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.compact{border-radius:6px}: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: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["ariaLabel", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
371
371
|
}
|
|
372
372
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwAvatarComponent, decorators: [{
|
|
373
373
|
type: Component,
|
|
@@ -375,7 +375,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
375
375
|
FwIconComponent,
|
|
376
376
|
], host: {
|
|
377
377
|
'[class]': 'hostClasses()',
|
|
378
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"avatar\" [style.background]=\"colorToDisplay()\">\n @switch (content()) {\n @case ('image') {\n @if (!isImageBroken()) {\n <img\n [alt]=\"imageAltText()\"\n [src]=\"imageUrl()\"\n (load)=\"loadImage()\"\n (error)=\"errorImage()\">\n } @else {\n @if (initial()) {\n <span class=\"initial\">{{ initial() }}</span>\n } @else {\n <fw-icon>{{ icon() }}</fw-icon>\n }\n }\n }\n @case ('icon') {\n <fw-icon>{{ icon() }}</fw-icon>\n }\n @case ('initial') {\n @if (initial()) {\n <span class=\"initial\">{{ initial() }}</span>\n } @else {\n <fw-icon>{{ icon() }}</fw-icon>\n }\n }\n }\n</div>\n", styles: [":host:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;pointer-events:none}:host-context(.selected):after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.bordered:after{box-shadow:0 0 0 1px var(--separations-base)}:host{display:block;position:relative;box-sizing:border-box}:host.selectable{cursor:pointer}:host:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.small:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.small.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.medium:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.medium.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.large:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.large.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.x-large:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.x-large.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem 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"] }]
|
|
378
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"avatar\" [style.background]=\"colorToDisplay()\">\n @switch (content()) {\n @case ('image') {\n @if (!isImageBroken()) {\n <img\n [alt]=\"imageAltText()\"\n [src]=\"imageUrl()\"\n (load)=\"loadImage()\"\n (error)=\"errorImage()\">\n } @else {\n @if (initial()) {\n <span class=\"initial\">{{ initial() }}</span>\n } @else {\n <fw-icon>{{ icon() }}</fw-icon>\n }\n }\n }\n @case ('icon') {\n <fw-icon>{{ icon() }}</fw-icon>\n }\n @case ('initial') {\n @if (initial()) {\n <span class=\"initial\">{{ initial() }}</span>\n } @else {\n <fw-icon>{{ icon() }}</fw-icon>\n }\n }\n }\n</div>\n", styles: [":host:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;pointer-events:none}:host-context(.selected):after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.bordered:after{box-shadow:0 0 0 1px var(--separations-base)}:host{display:block;position:relative;box-sizing:border-box}:host.selectable{cursor:pointer}:host:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.small:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.small.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.compact:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.compact.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.medium:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.medium.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.large:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.large.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.x-large:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.x-large.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem 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.compact{width:24px;height:24px;font-size:11px}:host.compact .avatar fw-icon{font-size:18px}: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.compact{border-radius:6px}: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"] }]
|
|
379
379
|
}], propDecorators: { bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], colorSeed: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorSeed", required: false }] }, { type: i0.Output, args: ["colorSeedChange"] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], imageAltText: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageAltText", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], initial: [{ type: i0.Input, args: [{ isSignal: true, alias: "initial", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], onClick: [{
|
|
380
380
|
type: HostListener,
|
|
381
381
|
args: ['click']
|