@flywheel-io/vision 20.1.1 → 20.1.3
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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { NgClass, CommonModule, NgIf, NgStyle, NgTemplateOutlet, NgFor, SlicePipe, Location } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { inject, HostBinding, Input, ChangeDetectionStrategy, Component, input, output, NgModule, model, computed, signal, HostListener, ViewEncapsulation, EventEmitter, Output,
|
|
3
|
+
import { inject, HostBinding, Input, ChangeDetectionStrategy, Component, input, output, NgModule, model, computed, signal, effect, HostListener, ViewEncapsulation, EventEmitter, Output, ElementRef, ViewContainerRef, Directive, contentChildren, viewChild, ChangeDetectorRef, ContentChildren, ViewChild, forwardRef, DestroyRef, Injectable, ContentChild, NgZone, untracked, ViewChildren, viewChildren, linkedSignal, TemplateRef } from '@angular/core';
|
|
4
4
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
5
5
|
import { BehaviorSubject, debounce, timer, distinctUntilChanged, of, Subscription, min, combineLatest, tap, switchMap, map } from 'rxjs';
|
|
6
6
|
import { CdkConnectedOverlay, OverlayModule, Overlay, CdkOverlayOrigin, OverlayContainer } from '@angular/cdk/overlay';
|
|
@@ -351,6 +351,9 @@ class FwAvatarComponent {
|
|
|
351
351
|
constructor() {
|
|
352
352
|
this.bordered = input(false, ...(ngDevMode ? [{ debugName: "bordered" }] : []));
|
|
353
353
|
this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
354
|
+
/**
|
|
355
|
+
* A seed that will be hashed to choose a color, overrides the `color` prop if set
|
|
356
|
+
*/
|
|
354
357
|
this.colorSeed = model(...(ngDevMode ? [undefined, { debugName: "colorSeed" }] : []));
|
|
355
358
|
this.content = input('icon', ...(ngDevMode ? [{ debugName: "content" }] : []));
|
|
356
359
|
this.icon = input('user', ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
@@ -358,6 +361,9 @@ class FwAvatarComponent {
|
|
|
358
361
|
this.imageUrl = input('', ...(ngDevMode ? [{ debugName: "imageUrl" }] : []));
|
|
359
362
|
this.initial = input('', ...(ngDevMode ? [{ debugName: "initial" }] : []));
|
|
360
363
|
this.selectable = input(false, ...(ngDevMode ? [{ debugName: "selectable" }] : []));
|
|
364
|
+
/**
|
|
365
|
+
* Applies selected styling, they can also be applied by host-context
|
|
366
|
+
*/
|
|
361
367
|
this.selected = model(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
|
|
362
368
|
this.size = input('small', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
363
369
|
this.variant = input('circular', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
@@ -372,9 +378,13 @@ class FwAvatarComponent {
|
|
|
372
378
|
];
|
|
373
379
|
return classes.filter(Boolean).join(' ');
|
|
374
380
|
}, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
|
|
375
|
-
this.
|
|
376
|
-
this.colorToDisplay = computed(() => this.colorSeed() ? this.
|
|
381
|
+
this.hashedColor = computed(() => pickColorViaHash(this.colorSeed()), ...(ngDevMode ? [{ debugName: "hashedColor" }] : []));
|
|
382
|
+
this.colorToDisplay = computed(() => this.colorSeed() ? this.hashedColor() : namedColorMap[this.color()], ...(ngDevMode ? [{ debugName: "colorToDisplay" }] : []));
|
|
377
383
|
this.isImageBroken = signal(false, ...(ngDevMode ? [{ debugName: "isImageBroken" }] : []));
|
|
384
|
+
this.reloadImageOnUrlChange = effect(() => {
|
|
385
|
+
this.imageUrl(); // establish dependency
|
|
386
|
+
this.isImageBroken.set(false);
|
|
387
|
+
}, ...(ngDevMode ? [{ debugName: "reloadImageOnUrlChange" }] : []));
|
|
378
388
|
}
|
|
379
389
|
onClick() {
|
|
380
390
|
if (this.selectable()) {
|
|
@@ -388,7 +398,7 @@ class FwAvatarComponent {
|
|
|
388
398
|
this.isImageBroken.set(true);
|
|
389
399
|
}
|
|
390
400
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FwAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
391
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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: ["size", "color"] }] }); }
|
|
401
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
392
402
|
}
|
|
393
403
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FwAvatarComponent, decorators: [{
|
|
394
404
|
type: Component,
|
|
@@ -396,7 +406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
|
|
|
396
406
|
FwIconComponent,
|
|
397
407
|
], host: {
|
|
398
408
|
'[class]': 'hostClasses()',
|
|
399
|
-
}, 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"] }]
|
|
409
|
+
}, 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"] }]
|
|
400
410
|
}], 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: [{
|
|
401
411
|
type: HostListener,
|
|
402
412
|
args: ['click']
|
|
@@ -1155,9 +1165,10 @@ class FwTooltipDirective {
|
|
|
1155
1165
|
const tagsToCloseFor = ['mat-option', 'mat-select', 'fw-menu-item'];
|
|
1156
1166
|
const tagName = nativeElement.tagName.toLowerCase();
|
|
1157
1167
|
if (tagsToCloseFor.includes(tagName)) {
|
|
1168
|
+
// capture: true so stopPropagation() inside fw-menu-item's handleClick doesn't block this
|
|
1158
1169
|
nativeElement.addEventListener('click', () => {
|
|
1159
1170
|
this.hideTooltip();
|
|
1160
|
-
});
|
|
1171
|
+
}, { capture: true });
|
|
1161
1172
|
}
|
|
1162
1173
|
}, ...(ngDevMode ? [{ debugName: "addMouseEventListeners" }] : []));
|
|
1163
1174
|
this.openDelayTimer = 0;
|
|
@@ -6231,7 +6242,7 @@ class FwMultiSelectMenuComponent {
|
|
|
6231
6242
|
this.titleProperty = 'title';
|
|
6232
6243
|
this.iconProperty = 'icon';
|
|
6233
6244
|
// behaviour
|
|
6234
|
-
this.emptyText = 'No
|
|
6245
|
+
this.emptyText = 'No results found';
|
|
6235
6246
|
this.placeholder = 'Select something...';
|
|
6236
6247
|
this.disabled = false;
|
|
6237
6248
|
this.useCheckbox = false;
|
|
@@ -10115,7 +10126,7 @@ class FwTypeaheadComponent {
|
|
|
10115
10126
|
}
|
|
10116
10127
|
}, ...(ngDevMode ? [{ debugName: "syncSearchValueToInput" }] : []));
|
|
10117
10128
|
this.allowNew = input(true, ...(ngDevMode ? [{ debugName: "allowNew" }] : []));
|
|
10118
|
-
this.placeholder = input('
|
|
10129
|
+
this.placeholder = input('Start typing...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
10119
10130
|
this.displayedPlaceholder = computed(() => {
|
|
10120
10131
|
if (this.selectType() === 'single') {
|
|
10121
10132
|
return this.value()[0] || this.placeholder();
|
|
@@ -10334,7 +10345,7 @@ class FwTypeaheadComponent {
|
|
|
10334
10345
|
useExisting: forwardRef(() => FwTypeaheadComponent),
|
|
10335
10346
|
multi: true,
|
|
10336
10347
|
},
|
|
10337
|
-
], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true, isSignal: true }, { propertyName: "displayedOptions", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"full-container\">\n <div\n class=\"input-container\"\n [class.disabled]=\"disabled()\"\n [style.max-height]=\"maxHeight()\"\n [cdkMenuTriggerFor]=\"menuContent\"\n fwMenuRegister\n #inputContainer>\n @if (selectType() === 'multiple') {\n <fw-chip-list class=\"chips\" [disableOverflow]=\"!!maxHeight()\">\n @for(val of value(); track val) {\n <fw-chip\n color=\"primary\"\n [showClose]=\"true\"\n [title]=\"val\"\n [selectable]=\"false\"\n (close)=\"closeChip(val)\"\n />\n }\n </fw-chip-list>\n }\n <input\n data-testid=\"typeahead-input\"\n [class.highlight-placeholder]=\"highlightPlaceholder()\"\n [placeholder]=\"displayedPlaceholder()\"\n [disabled]=\"disabled()\"\n (input)=\"handleInput($event)\"\n (keydown)=\"handleKey($event)\"\n (blur)=\"onFocusLoss($event)\"\n #input\n type=\"text\"\n />\n @if(loading()) {\n <fw-progress-spinner size=\"small\"/>\n }\n @if(selectType() === 'single' && value().length === 1) {\n <fw-icon class=\"clear-icon\" (click)=\"clearValue()\">close</fw-icon>\n }\n </div>\n</div>\n<ng-template #menuContent>\n <fw-menu-container\n [maxHeight]=\"maxOptionsHeight()\"\n [minHeight]=\"minOptionsHeight()\"\n [width]=\"optionsWidth() || inputContainer.offsetWidth - 2 + 'px'\"\n >\n <fw-menu (mousedown)=\"$event.preventDefault()\">\n @if(loading() && !displayNewOption()) {\n <fw-menu-item title=\"Searching...\" [disabled]=\"true\"/>\n } @else if(!loading()) {\n @for (option of filteredOptions(); track option) {\n <fw-menu-item\n (click)=\"handleOptionClick(option)\"\n (mouseenter)=\"setFocusByValue(option)\"\n [title]=\"option\"\n [focused]=\"focusedOption() === option\"\n [value]=\"option\"\n />\n }\n @empty {\n @if (!displayNewOption()) {\n <fw-menu-item title=\"No
|
|
10348
|
+
], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true, isSignal: true }, { propertyName: "displayedOptions", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"full-container\">\n <div\n class=\"input-container\"\n [class.disabled]=\"disabled()\"\n [style.max-height]=\"maxHeight()\"\n [cdkMenuTriggerFor]=\"menuContent\"\n fwMenuRegister\n #inputContainer>\n @if (selectType() === 'multiple') {\n <fw-chip-list class=\"chips\" [disableOverflow]=\"!!maxHeight()\">\n @for(val of value(); track val) {\n <fw-chip\n color=\"primary\"\n [showClose]=\"true\"\n [title]=\"val\"\n [selectable]=\"false\"\n (close)=\"closeChip(val)\"\n />\n }\n </fw-chip-list>\n }\n <input\n data-testid=\"typeahead-input\"\n [class.highlight-placeholder]=\"highlightPlaceholder()\"\n [placeholder]=\"displayedPlaceholder()\"\n [disabled]=\"disabled()\"\n (input)=\"handleInput($event)\"\n (keydown)=\"handleKey($event)\"\n (blur)=\"onFocusLoss($event)\"\n #input\n type=\"text\"\n />\n @if(loading()) {\n <fw-progress-spinner size=\"small\"/>\n }\n @if(selectType() === 'single' && value().length === 1) {\n <fw-icon class=\"clear-icon\" (click)=\"clearValue()\">close</fw-icon>\n }\n </div>\n</div>\n<ng-template #menuContent>\n <fw-menu-container\n [maxHeight]=\"maxOptionsHeight()\"\n [minHeight]=\"minOptionsHeight()\"\n [width]=\"optionsWidth() || inputContainer.offsetWidth - 2 + 'px'\"\n >\n <fw-menu (mousedown)=\"$event.preventDefault()\">\n @if(loading() && !displayNewOption()) {\n <fw-menu-item title=\"Searching...\" [disabled]=\"true\"/>\n } @else if(!loading()) {\n @for (option of filteredOptions(); track option) {\n <fw-menu-item\n (click)=\"handleOptionClick(option)\"\n (mouseenter)=\"setFocusByValue(option)\"\n [title]=\"option\"\n [focused]=\"focusedOption() === option\"\n [value]=\"option\"\n />\n }\n @empty {\n @if (!displayNewOption()) {\n <fw-menu-item title=\"No results found\" [disabled]=\"true\"/>\n }\n }\n }\n @if(displayNewOption()) {\n <fw-menu-item\n (click)=\"handleOptionClick(searchValue())\"\n (mouseenter)=\"setFocusByValue(searchValue())\"\n [title]=\"searchValue()\"\n [value]=\"searchValue()\"\n [focused]=\"focusedOption() === searchValue()\">\n <p class=\"new-tag\">New</p>\n </fw-menu-item>\n }\n </fw-menu>\n </fw-menu-container>\n</ng-template>\n", styles: [".new-tag{margin:0;color:var(--typography-light)}:host.disabled{cursor:not-allowed}:host.disabled fw-icon{cursor:not-allowed!important}:host{display:flex;flex-direction:column;width:100%;line-height:21px}:host .chips,:host fw-progress-spinner{margin:-4px 0}:host .full-container{display:flex;flex-direction:column;width:100%}:host .highlight-placeholder::placeholder{color:var(--typography-base)!important}:host .clear-icon{cursor:pointer}:host .input-container{width:100%;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;row-gap:8px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif;flex-wrap:wrap;overflow-y:auto}:host .input-container:focus-within{border:1px solid var(--primary-base)}:host .input-container input{min-width:80px;font-size:14px;flex:1 1 80px;color:var(--typography-base);background:var(--page-light);border:none}:host .input-container input:focus{outline:none;border:none}:host .input-container input::placeholder{color:var(--typography-light)}:host .input-container .context{color:var(--typography-light)}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}.disabled{opacity:.4;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: FwTextInputModule }, { kind: "ngmodule", type: FwChipModule }, { kind: "component", type: FwChipComponent, selector: "fw-chip", inputs: ["maxWidth", "value", "variant", "color", "icon", "title", "description", "showClose", "disabled", "selected", "textWrap", "selectable"], outputs: ["close", "select"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FwMenuModule }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value"], outputs: ["change"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container, fw-menu-filter", inputs: ["width", "maxHeight", "minHeight", "border", "shadow", "showFilter", "filterText", "focusFilterOnMount", "offset", "emptyText", "filterFn", "additionalMenuItems", "additionalGroups", "additionalSeparators", "keyHandler"], outputs: ["filteredMenuItemChange", "filterChanged"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["mouseEnterHandlerChange", "click", "focusedChange"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i5.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }, { kind: "ngmodule", type: FwProgressModule }, { kind: "component", type: FwProgressSpinnerComponent, selector: "fw-progress-spinner", inputs: ["mode", "size", "color", "showValue", "value"] }, { kind: "component", type: FwChipListComponent, selector: "fw-chip-list", inputs: ["resizeDebounceMs", "disableOverflow"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10338
10349
|
}
|
|
10339
10350
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FwTypeaheadComponent, decorators: [{
|
|
10340
10351
|
type: Component,
|
|
@@ -10356,7 +10367,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
|
|
|
10356
10367
|
},
|
|
10357
10368
|
], host: {
|
|
10358
10369
|
'[class.fw-touched]': 'touched()',
|
|
10359
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"full-container\">\n <div\n class=\"input-container\"\n [class.disabled]=\"disabled()\"\n [style.max-height]=\"maxHeight()\"\n [cdkMenuTriggerFor]=\"menuContent\"\n fwMenuRegister\n #inputContainer>\n @if (selectType() === 'multiple') {\n <fw-chip-list class=\"chips\" [disableOverflow]=\"!!maxHeight()\">\n @for(val of value(); track val) {\n <fw-chip\n color=\"primary\"\n [showClose]=\"true\"\n [title]=\"val\"\n [selectable]=\"false\"\n (close)=\"closeChip(val)\"\n />\n }\n </fw-chip-list>\n }\n <input\n data-testid=\"typeahead-input\"\n [class.highlight-placeholder]=\"highlightPlaceholder()\"\n [placeholder]=\"displayedPlaceholder()\"\n [disabled]=\"disabled()\"\n (input)=\"handleInput($event)\"\n (keydown)=\"handleKey($event)\"\n (blur)=\"onFocusLoss($event)\"\n #input\n type=\"text\"\n />\n @if(loading()) {\n <fw-progress-spinner size=\"small\"/>\n }\n @if(selectType() === 'single' && value().length === 1) {\n <fw-icon class=\"clear-icon\" (click)=\"clearValue()\">close</fw-icon>\n }\n </div>\n</div>\n<ng-template #menuContent>\n <fw-menu-container\n [maxHeight]=\"maxOptionsHeight()\"\n [minHeight]=\"minOptionsHeight()\"\n [width]=\"optionsWidth() || inputContainer.offsetWidth - 2 + 'px'\"\n >\n <fw-menu (mousedown)=\"$event.preventDefault()\">\n @if(loading() && !displayNewOption()) {\n <fw-menu-item title=\"Searching...\" [disabled]=\"true\"/>\n } @else if(!loading()) {\n @for (option of filteredOptions(); track option) {\n <fw-menu-item\n (click)=\"handleOptionClick(option)\"\n (mouseenter)=\"setFocusByValue(option)\"\n [title]=\"option\"\n [focused]=\"focusedOption() === option\"\n [value]=\"option\"\n />\n }\n @empty {\n @if (!displayNewOption()) {\n <fw-menu-item title=\"No
|
|
10370
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"full-container\">\n <div\n class=\"input-container\"\n [class.disabled]=\"disabled()\"\n [style.max-height]=\"maxHeight()\"\n [cdkMenuTriggerFor]=\"menuContent\"\n fwMenuRegister\n #inputContainer>\n @if (selectType() === 'multiple') {\n <fw-chip-list class=\"chips\" [disableOverflow]=\"!!maxHeight()\">\n @for(val of value(); track val) {\n <fw-chip\n color=\"primary\"\n [showClose]=\"true\"\n [title]=\"val\"\n [selectable]=\"false\"\n (close)=\"closeChip(val)\"\n />\n }\n </fw-chip-list>\n }\n <input\n data-testid=\"typeahead-input\"\n [class.highlight-placeholder]=\"highlightPlaceholder()\"\n [placeholder]=\"displayedPlaceholder()\"\n [disabled]=\"disabled()\"\n (input)=\"handleInput($event)\"\n (keydown)=\"handleKey($event)\"\n (blur)=\"onFocusLoss($event)\"\n #input\n type=\"text\"\n />\n @if(loading()) {\n <fw-progress-spinner size=\"small\"/>\n }\n @if(selectType() === 'single' && value().length === 1) {\n <fw-icon class=\"clear-icon\" (click)=\"clearValue()\">close</fw-icon>\n }\n </div>\n</div>\n<ng-template #menuContent>\n <fw-menu-container\n [maxHeight]=\"maxOptionsHeight()\"\n [minHeight]=\"minOptionsHeight()\"\n [width]=\"optionsWidth() || inputContainer.offsetWidth - 2 + 'px'\"\n >\n <fw-menu (mousedown)=\"$event.preventDefault()\">\n @if(loading() && !displayNewOption()) {\n <fw-menu-item title=\"Searching...\" [disabled]=\"true\"/>\n } @else if(!loading()) {\n @for (option of filteredOptions(); track option) {\n <fw-menu-item\n (click)=\"handleOptionClick(option)\"\n (mouseenter)=\"setFocusByValue(option)\"\n [title]=\"option\"\n [focused]=\"focusedOption() === option\"\n [value]=\"option\"\n />\n }\n @empty {\n @if (!displayNewOption()) {\n <fw-menu-item title=\"No results found\" [disabled]=\"true\"/>\n }\n }\n }\n @if(displayNewOption()) {\n <fw-menu-item\n (click)=\"handleOptionClick(searchValue())\"\n (mouseenter)=\"setFocusByValue(searchValue())\"\n [title]=\"searchValue()\"\n [value]=\"searchValue()\"\n [focused]=\"focusedOption() === searchValue()\">\n <p class=\"new-tag\">New</p>\n </fw-menu-item>\n }\n </fw-menu>\n </fw-menu-container>\n</ng-template>\n", styles: [".new-tag{margin:0;color:var(--typography-light)}:host.disabled{cursor:not-allowed}:host.disabled fw-icon{cursor:not-allowed!important}:host{display:flex;flex-direction:column;width:100%;line-height:21px}:host .chips,:host fw-progress-spinner{margin:-4px 0}:host .full-container{display:flex;flex-direction:column;width:100%}:host .highlight-placeholder::placeholder{color:var(--typography-base)!important}:host .clear-icon{cursor:pointer}:host .input-container{width:100%;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;row-gap:8px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif;flex-wrap:wrap;overflow-y:auto}:host .input-container:focus-within{border:1px solid var(--primary-base)}:host .input-container input{min-width:80px;font-size:14px;flex:1 1 80px;color:var(--typography-base);background:var(--page-light);border:none}:host .input-container input:focus{outline:none;border:none}:host .input-container input::placeholder{color:var(--typography-light)}:host .input-container .context{color:var(--typography-light)}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}.disabled{opacity:.4;pointer-events:none}\n"] }]
|
|
10360
10371
|
}], propDecorators: { outsideClick: [{
|
|
10361
10372
|
type: HostListener,
|
|
10362
10373
|
args: ['document:click']
|