@flywheel-io/vision 21.0.0-beta.5 → 21.0.0-beta.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/fonts/Flywheel-Vision-Icons.svg +14 -2
- package/assets/fonts/Flywheel-Vision-Icons.ttf +0 -0
- package/assets/fonts/Flywheel-Vision-Icons.woff +0 -0
- package/assets/svg/arrow-3d-rotate.svg +4 -0
- package/assets/svg/maps-protection-target.svg +4 -0
- package/assets/svg/orientation-3d-axial-acquisition.svg +5 -0
- package/assets/svg/orientation-3d-coronal.svg +5 -0
- package/assets/svg/orientation-3d-reformat.svg +5 -0
- package/assets/svg/orientation-3d-sagittal.svg +5 -0
- package/assets/svg/pen-edit-compose-New-Chat.svg +4 -0
- package/assets/svg/user.svg +1 -1
- package/fesm2022/flywheel-io-vision.mjs +50 -32
- package/fesm2022/flywheel-io-vision.mjs.map +1 -1
- package/flywheel-io-vision-21.0.0-beta.6.tgz +0 -0
- package/package.json +1 -1
- package/scss/icons/_icon-variables.scss +10 -2
- package/types/flywheel-io-vision.d.ts +45 -36
- package/flywheel-io-vision-21.0.0-beta.5.tgz +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { NgClass, CommonModule, NgStyle, NgTemplateOutlet, SlicePipe, Location } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { inject, input, HostBinding, ChangeDetectionStrategy, Component, output, NgModule, model, computed, signal, HostListener, ViewEncapsulation, EventEmitter, Output,
|
|
3
|
+
import { inject, input, HostBinding, ChangeDetectionStrategy, Component, output, NgModule, model, computed, signal, effect, HostListener, ViewEncapsulation, EventEmitter, Output, ElementRef, ViewContainerRef, Directive, contentChildren, viewChild, ChangeDetectorRef, ContentChildren, Input, ViewChild, forwardRef, DestroyRef, Injectable, ContentChild, 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';
|
|
@@ -310,6 +310,9 @@ class FwAvatarComponent {
|
|
|
310
310
|
constructor() {
|
|
311
311
|
this.bordered = input(false, ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
|
|
312
312
|
this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
313
|
+
/**
|
|
314
|
+
* A seed that will be hashed to choose a color, overrides the `color` prop if set
|
|
315
|
+
*/
|
|
313
316
|
this.colorSeed = model(...(ngDevMode ? [undefined, { debugName: "colorSeed" }] : /* istanbul ignore next */ []));
|
|
314
317
|
this.content = input('icon', ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
|
|
315
318
|
this.icon = input('user', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
@@ -317,6 +320,9 @@ class FwAvatarComponent {
|
|
|
317
320
|
this.imageUrl = input('', ...(ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []));
|
|
318
321
|
this.initial = input('', ...(ngDevMode ? [{ debugName: "initial" }] : /* istanbul ignore next */ []));
|
|
319
322
|
this.selectable = input(false, ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
|
|
323
|
+
/**
|
|
324
|
+
* Applies selected styling, they can also be applied by host-context
|
|
325
|
+
*/
|
|
320
326
|
this.selected = model(false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
|
|
321
327
|
this.size = input('small', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
322
328
|
this.variant = input('circular', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
@@ -331,9 +337,13 @@ class FwAvatarComponent {
|
|
|
331
337
|
];
|
|
332
338
|
return classes.filter(Boolean).join(' ');
|
|
333
339
|
}, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
334
|
-
this.
|
|
335
|
-
this.colorToDisplay = computed(() => this.colorSeed() ? this.
|
|
340
|
+
this.hashedColor = computed(() => pickColorViaHash(this.colorSeed()), ...(ngDevMode ? [{ debugName: "hashedColor" }] : /* istanbul ignore next */ []));
|
|
341
|
+
this.colorToDisplay = computed(() => this.colorSeed() ? this.hashedColor() : namedColorMap[this.color()], ...(ngDevMode ? [{ debugName: "colorToDisplay" }] : /* istanbul ignore next */ []));
|
|
336
342
|
this.isImageBroken = signal(false, ...(ngDevMode ? [{ debugName: "isImageBroken" }] : /* istanbul ignore next */ []));
|
|
343
|
+
this.reloadImageOnUrlChange = effect(() => {
|
|
344
|
+
this.imageUrl(); // establish dependency
|
|
345
|
+
this.isImageBroken.set(false);
|
|
346
|
+
}, ...(ngDevMode ? [{ debugName: "reloadImageOnUrlChange" }] : /* istanbul ignore next */ []));
|
|
337
347
|
}
|
|
338
348
|
onClick() {
|
|
339
349
|
if (this.selectable()) {
|
|
@@ -347,7 +357,7 @@ class FwAvatarComponent {
|
|
|
347
357
|
this.isImageBroken.set(true);
|
|
348
358
|
}
|
|
349
359
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
350
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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"] }] }); }
|
|
360
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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 }); }
|
|
351
361
|
}
|
|
352
362
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwAvatarComponent, decorators: [{
|
|
353
363
|
type: Component,
|
|
@@ -355,7 +365,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
355
365
|
FwIconComponent,
|
|
356
366
|
], host: {
|
|
357
367
|
'[class]': 'hostClasses()',
|
|
358
|
-
}, 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"] }]
|
|
368
|
+
}, 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"] }]
|
|
359
369
|
}], 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: [{
|
|
360
370
|
type: HostListener,
|
|
361
371
|
args: ['click']
|
|
@@ -637,7 +647,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
637
647
|
*/
|
|
638
648
|
class FwPopoverPanelComponent {
|
|
639
649
|
constructor() {
|
|
640
|
-
this.position = input(
|
|
650
|
+
this.position = input('above', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
|
|
641
651
|
this.mouseLeave = new EventEmitter();
|
|
642
652
|
this.showCaret = input(true, ...(ngDevMode ? [{ debugName: "showCaret" }] : /* istanbul ignore next */ []));
|
|
643
653
|
}
|
|
@@ -648,11 +658,11 @@ class FwPopoverPanelComponent {
|
|
|
648
658
|
this.mouseLeave.emit(e);
|
|
649
659
|
}
|
|
650
660
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwPopoverPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
651
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwPopoverPanelComponent, isStandalone: true, selector: "fw-popover-panel", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, showCaret: { classPropertyName: "showCaret", publicName: "showCaret", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mouseLeave: "mouseLeave" }, host: { listeners: { "mouseleave": "hidePopover($event)" }, properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<div class=\"fw-popover-content-wrapper\">\n <ng-content></ng-content>\n @if (showCaret()) {\n <div class=\"fw-popover-caret\"></div>\n }\n</div>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large,:host .fw-popover-content-wrapper{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium{box-shadow:0 2px 5px #0000001a}.vision-shadow-small{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}:host{opacity:1}:host .fw-popover-content-wrapper{position:relative;background:var(--card-background);border-radius:8px;border:1px solid var(--separations-border);min-width:60px;box-sizing:border-box}:host .fw-popover-content-wrapper .fw-popover-caret{position:absolute;overflow:hidden;width:25px;height:25px}:host .fw-popover-content-wrapper .fw-popover-caret:after{display:block;content:\"\";width:16px;height:16px;background:var(--card-background);border:1px solid var(--separations-border);transform:rotate(45deg);position:relative}:host.fw-popover-above{padding-bottom:16px}:host.fw-popover-above .fw-popover-caret{left:calc(50% - 12.5px);bottom:-16px;height:16px!important}:host.fw-popover-above .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-above-left{padding-bottom:16px}:host.fw-popover-above-left .fw-popover-caret{right:25px;bottom:-16px;height:16px!important}:host.fw-popover-above-left .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-above-right{padding-bottom:16px}:host.fw-popover-above-right .fw-popover-caret{left:25px;bottom:-16px;height:16px!important}:host.fw-popover-above-right .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-below{margin-top:16px}:host.fw-popover-below .fw-popover-caret{left:calc(50% - 12.5px);top:-16px;height:16px!important}:host.fw-popover-below .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-below-left{margin-top:16px}:host.fw-popover-below-left .fw-popover-caret{right:25px;top:-16px;height:16px!important}:host.fw-popover-below-left .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-below-right{margin-top:16px}:host.fw-popover-below-right .fw-popover-caret{left:25px;top:-16px;height:16px!important}:host.fw-popover-below-right .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-left{margin-right:16px}:host.fw-popover-left .fw-popover-caret{right:-16px;top:calc(50% - 12.5px);width:16px!important}:host.fw-popover-left .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-left-above{margin-right:16px}:host.fw-popover-left-above .fw-popover-caret{right:-16px;bottom:25px;width:16px!important}:host.fw-popover-left-above .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-left-below{margin-right:16px}:host.fw-popover-left-below .fw-popover-caret{right:-16px;top:25px;width:16px!important}:host.fw-popover-left-below .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-right{margin-left:16px}:host.fw-popover-right .fw-popover-caret{left:-16px;top:calc(50% - 12.5px);width:16px!important}:host.fw-popover-right .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}:host.fw-popover-right-above{margin-left:16px}:host.fw-popover-right-above .fw-popover-caret{left:-16px;bottom:25px;width:16px!important}:host.fw-popover-right-above .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}:host.fw-popover-right-below{margin-left:16px}:host.fw-popover-right-below .fw-popover-caret{left:-16px;top:25px;width:16px!important}:host.fw-popover-right-below .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}\n"] }); }
|
|
661
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwPopoverPanelComponent, isStandalone: true, selector: "fw-popover-panel", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, showCaret: { classPropertyName: "showCaret", publicName: "showCaret", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mouseLeave: "mouseLeave" }, host: { listeners: { "mouseleave": "hidePopover($event)" }, properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<div class=\"fw-popover-content-wrapper\">\n <ng-content></ng-content>\n @if (showCaret()) {\n <div class=\"fw-popover-caret\"></div>\n }\n</div>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large,:host .fw-popover-content-wrapper{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium{box-shadow:0 2px 5px #0000001a}.vision-shadow-small{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}:host{opacity:1}:host .fw-popover-content-wrapper{position:relative;background:var(--card-background);border-radius:8px;border:1px solid var(--separations-border);min-width:60px;box-sizing:border-box}:host .fw-popover-content-wrapper .fw-popover-caret{pointer-events:none;position:absolute;overflow:hidden;width:25px;height:25px}:host .fw-popover-content-wrapper .fw-popover-caret:after{display:block;content:\"\";width:16px;height:16px;background:var(--card-background);border:1px solid var(--separations-border);transform:rotate(45deg);position:relative}:host.fw-popover-above{padding-bottom:16px}:host.fw-popover-above .fw-popover-caret{left:calc(50% - 12.5px);bottom:-16px;height:16px!important}:host.fw-popover-above .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-above-left{padding-bottom:16px}:host.fw-popover-above-left .fw-popover-caret{right:25px;bottom:-16px;height:16px!important}:host.fw-popover-above-left .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-above-right{padding-bottom:16px}:host.fw-popover-above-right .fw-popover-caret{left:25px;bottom:-16px;height:16px!important}:host.fw-popover-above-right .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-below{margin-top:16px}:host.fw-popover-below .fw-popover-caret{left:calc(50% - 12.5px);top:-16px;height:16px!important}:host.fw-popover-below .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-below-left{margin-top:16px}:host.fw-popover-below-left .fw-popover-caret{right:25px;top:-16px;height:16px!important}:host.fw-popover-below-left .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-below-right{margin-top:16px}:host.fw-popover-below-right .fw-popover-caret{left:25px;top:-16px;height:16px!important}:host.fw-popover-below-right .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-left{margin-right:16px}:host.fw-popover-left .fw-popover-caret{right:-16px;top:calc(50% - 12.5px);width:16px!important}:host.fw-popover-left .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-left-above{margin-right:16px}:host.fw-popover-left-above .fw-popover-caret{right:-16px;bottom:25px;width:16px!important}:host.fw-popover-left-above .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-left-below{margin-right:16px}:host.fw-popover-left-below .fw-popover-caret{right:-16px;top:25px;width:16px!important}:host.fw-popover-left-below .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-right{margin-left:16px}:host.fw-popover-right .fw-popover-caret{left:-16px;top:calc(50% - 12.5px);width:16px!important}:host.fw-popover-right .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}:host.fw-popover-right-above{margin-left:16px}:host.fw-popover-right-above .fw-popover-caret{left:-16px;bottom:25px;width:16px!important}:host.fw-popover-right-above .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}:host.fw-popover-right-below{margin-left:16px}:host.fw-popover-right-below .fw-popover-caret{left:-16px;top:25px;width:16px!important}:host.fw-popover-right-below .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}\n"] }); }
|
|
652
662
|
}
|
|
653
663
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwPopoverPanelComponent, decorators: [{
|
|
654
664
|
type: Component,
|
|
655
|
-
args: [{ selector: 'fw-popover-panel', imports: [], template: "<div class=\"fw-popover-content-wrapper\">\n <ng-content></ng-content>\n @if (showCaret()) {\n <div class=\"fw-popover-caret\"></div>\n }\n</div>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large,:host .fw-popover-content-wrapper{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium{box-shadow:0 2px 5px #0000001a}.vision-shadow-small{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}:host{opacity:1}:host .fw-popover-content-wrapper{position:relative;background:var(--card-background);border-radius:8px;border:1px solid var(--separations-border);min-width:60px;box-sizing:border-box}:host .fw-popover-content-wrapper .fw-popover-caret{position:absolute;overflow:hidden;width:25px;height:25px}:host .fw-popover-content-wrapper .fw-popover-caret:after{display:block;content:\"\";width:16px;height:16px;background:var(--card-background);border:1px solid var(--separations-border);transform:rotate(45deg);position:relative}:host.fw-popover-above{padding-bottom:16px}:host.fw-popover-above .fw-popover-caret{left:calc(50% - 12.5px);bottom:-16px;height:16px!important}:host.fw-popover-above .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-above-left{padding-bottom:16px}:host.fw-popover-above-left .fw-popover-caret{right:25px;bottom:-16px;height:16px!important}:host.fw-popover-above-left .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-above-right{padding-bottom:16px}:host.fw-popover-above-right .fw-popover-caret{left:25px;bottom:-16px;height:16px!important}:host.fw-popover-above-right .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-below{margin-top:16px}:host.fw-popover-below .fw-popover-caret{left:calc(50% - 12.5px);top:-16px;height:16px!important}:host.fw-popover-below .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-below-left{margin-top:16px}:host.fw-popover-below-left .fw-popover-caret{right:25px;top:-16px;height:16px!important}:host.fw-popover-below-left .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-below-right{margin-top:16px}:host.fw-popover-below-right .fw-popover-caret{left:25px;top:-16px;height:16px!important}:host.fw-popover-below-right .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-left{margin-right:16px}:host.fw-popover-left .fw-popover-caret{right:-16px;top:calc(50% - 12.5px);width:16px!important}:host.fw-popover-left .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-left-above{margin-right:16px}:host.fw-popover-left-above .fw-popover-caret{right:-16px;bottom:25px;width:16px!important}:host.fw-popover-left-above .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-left-below{margin-right:16px}:host.fw-popover-left-below .fw-popover-caret{right:-16px;top:25px;width:16px!important}:host.fw-popover-left-below .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-right{margin-left:16px}:host.fw-popover-right .fw-popover-caret{left:-16px;top:calc(50% - 12.5px);width:16px!important}:host.fw-popover-right .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}:host.fw-popover-right-above{margin-left:16px}:host.fw-popover-right-above .fw-popover-caret{left:-16px;bottom:25px;width:16px!important}:host.fw-popover-right-above .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}:host.fw-popover-right-below{margin-left:16px}:host.fw-popover-right-below .fw-popover-caret{left:-16px;top:25px;width:16px!important}:host.fw-popover-right-below .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}\n"] }]
|
|
665
|
+
args: [{ selector: 'fw-popover-panel', imports: [], template: "<div class=\"fw-popover-content-wrapper\">\n <ng-content></ng-content>\n @if (showCaret()) {\n <div class=\"fw-popover-caret\"></div>\n }\n</div>\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large,:host .fw-popover-content-wrapper{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium{box-shadow:0 2px 5px #0000001a}.vision-shadow-small{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}:host{opacity:1}:host .fw-popover-content-wrapper{position:relative;background:var(--card-background);border-radius:8px;border:1px solid var(--separations-border);min-width:60px;box-sizing:border-box}:host .fw-popover-content-wrapper .fw-popover-caret{pointer-events:none;position:absolute;overflow:hidden;width:25px;height:25px}:host .fw-popover-content-wrapper .fw-popover-caret:after{display:block;content:\"\";width:16px;height:16px;background:var(--card-background);border:1px solid var(--separations-border);transform:rotate(45deg);position:relative}:host.fw-popover-above{padding-bottom:16px}:host.fw-popover-above .fw-popover-caret{left:calc(50% - 12.5px);bottom:-16px;height:16px!important}:host.fw-popover-above .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-above-left{padding-bottom:16px}:host.fw-popover-above-left .fw-popover-caret{right:25px;bottom:-16px;height:16px!important}:host.fw-popover-above-left .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-above-right{padding-bottom:16px}:host.fw-popover-above-right .fw-popover-caret{left:25px;bottom:-16px;height:16px!important}:host.fw-popover-above-right .fw-popover-caret:after{margin:-9px auto;width:16px}:host.fw-popover-below{margin-top:16px}:host.fw-popover-below .fw-popover-caret{left:calc(50% - 12.5px);top:-16px;height:16px!important}:host.fw-popover-below .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-below-left{margin-top:16px}:host.fw-popover-below-left .fw-popover-caret{right:25px;top:-16px;height:16px!important}:host.fw-popover-below-left .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-below-right{margin-top:16px}:host.fw-popover-below-right .fw-popover-caret{left:25px;top:-16px;height:16px!important}:host.fw-popover-below-right .fw-popover-caret:after{top:16px;margin:-9px auto;width:16px}:host.fw-popover-left{margin-right:16px}:host.fw-popover-left .fw-popover-caret{right:-16px;top:calc(50% - 12.5px);width:16px!important}:host.fw-popover-left .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-left-above{margin-right:16px}:host.fw-popover-left-above .fw-popover-caret{right:-16px;bottom:25px;width:16px!important}:host.fw-popover-left-above .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-left-below{margin-right:16px}:host.fw-popover-left-below .fw-popover-caret{right:-16px;top:25px;width:16px!important}:host.fw-popover-left-below .fw-popover-caret:after{top:calc(50% - 8px);left:-9px;width:16px}:host.fw-popover-right{margin-left:16px}:host.fw-popover-right .fw-popover-caret{left:-16px;top:calc(50% - 12.5px);width:16px!important}:host.fw-popover-right .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}:host.fw-popover-right-above{margin-left:16px}:host.fw-popover-right-above .fw-popover-caret{left:-16px;bottom:25px;width:16px!important}:host.fw-popover-right-above .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}:host.fw-popover-right-below{margin-left:16px}:host.fw-popover-right-below .fw-popover-caret{left:-16px;top:25px;width:16px!important}:host.fw-popover-right-below .fw-popover-caret:after{top:calc(50% - 8px);right:-9px;width:16px}\n"] }]
|
|
656
666
|
}], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], mouseLeave: [{
|
|
657
667
|
type: Output
|
|
658
668
|
}], showCaret: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCaret", required: false }] }], classes: [{
|
|
@@ -1037,9 +1047,10 @@ class FwTooltipDirective {
|
|
|
1037
1047
|
const tagsToCloseFor = ['mat-option', 'mat-select', 'fw-menu-item'];
|
|
1038
1048
|
const tagName = nativeElement.tagName.toLowerCase();
|
|
1039
1049
|
if (tagsToCloseFor.includes(tagName)) {
|
|
1050
|
+
// capture: true so stopPropagation() inside fw-menu-item's handleClick doesn't block this
|
|
1040
1051
|
nativeElement.addEventListener('click', () => {
|
|
1041
1052
|
this.hideTooltip();
|
|
1042
|
-
});
|
|
1053
|
+
}, { capture: true });
|
|
1043
1054
|
}
|
|
1044
1055
|
}, ...(ngDevMode ? [{ debugName: "addMouseEventListeners" }] : /* istanbul ignore next */ []));
|
|
1045
1056
|
this.openDelayTimer = 0;
|
|
@@ -1484,7 +1495,7 @@ class FwProgressSpinnerComponent {
|
|
|
1484
1495
|
return (this._strokeWidth / this.diameter) * 100;
|
|
1485
1496
|
}
|
|
1486
1497
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwProgressSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1487
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwProgressSpinnerComponent, isStandalone: true, selector: "fw-progress-spinner", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar", "tabindex": "-1" }, properties: { "class.progress-indeterminate": "mode() === \"indeterminate\"", "class.progress-small": "size() === \"small\"", "class.progress-show-value": "this.showValue", "style.width.px": "diameter", "style.height.px": "diameter", "attr.aria-valuemin": "0", "attr.aria-valuemax": "100", "attr.aria-valuenow": "mode() === \"determinate\" ? value : null", "attr.mode": "mode()" }, classAttribute: "fw-progress-spinner" }, viewQueries: [{ propertyName: "_determinateCircle", first: true, predicate: ["determinateSpinner"], descendants: true }], ngImport: i0, template: "<ng-template #circle>\n <svg\n [attr.viewBox]=\"_viewBox()\"\n [ngClass]=\"['progress-indeterminate-circle-graphic', color()]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-indeterminate-track\"\n cx=\"50%\"\n cy=\"50%\"\n />\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeCircumference() / 2\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n cx=\"50%\"\n cy=\"50%\"\n />\n </svg>\n</ng-template>\n\n<div class=\"progress-determinate-container\" aria-hidden=\"true\" #determinateSpinner>\n <svg\n [attr.viewBox]=\"_viewBox()\"\n [ngClass]=\"['progress-determinate-circle-graphic', color()]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-determinate-track\"\n cx=\"50%\"\n cy=\"50%\"\n />\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-determinate-circle\"\n cx=\"50%\"\n cy=\"50%\"\n />\n </svg>\n</div>\n<div class=\"progress-indeterminate-container\" aria-hidden=\"true\">\n <div class=\"progress-spinner-layer\">\n <div class=\"progress-circle-clipper progress-circle-left\">\n <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n </div>\n <div class=\"progress-circle-clipper progress-circle-right\">\n <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n </div>\n </div>\n</div>\n@if (showValue()) {\n <p [ngClass]=\"['progress-label', 'size-' + size(), 'mode-' + mode()]\">{{ value }}%</p>\n}\n", styles: [".fw-progress-spinner{display:block;overflow:
|
|
1498
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwProgressSpinnerComponent, isStandalone: true, selector: "fw-progress-spinner", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar", "tabindex": "-1" }, properties: { "class.progress-indeterminate": "mode() === \"indeterminate\"", "class.progress-small": "size() === \"small\"", "class.progress-show-value": "this.showValue()", "style.width.px": "diameter", "style.height.px": "diameter", "style.--progress-size": "diameter + \"px\"", "style.--progress-active-indicator-width": "diameter + \"px\"", "attr.aria-valuemin": "0", "attr.aria-valuemax": "100", "attr.aria-valuenow": "mode() === \"determinate\" ? value : null", "attr.mode": "mode()" }, classAttribute: "fw-progress-spinner" }, viewQueries: [{ propertyName: "_determinateCircle", first: true, predicate: ["determinateSpinner"], descendants: true }], ngImport: i0, template: "<ng-template #circle>\n <svg\n [attr.viewBox]=\"_viewBox()\"\n [ngClass]=\"['progress-indeterminate-circle-graphic', color()]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-indeterminate-track\"\n cx=\"50%\"\n cy=\"50%\"\n />\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeCircumference() / 2\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n cx=\"50%\"\n cy=\"50%\"\n />\n </svg>\n</ng-template>\n\n<div class=\"progress-determinate-container\" aria-hidden=\"true\" #determinateSpinner>\n <svg\n [attr.viewBox]=\"_viewBox()\"\n [ngClass]=\"['progress-determinate-circle-graphic', color()]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-determinate-track\"\n cx=\"50%\"\n cy=\"50%\"\n />\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-determinate-circle\"\n cx=\"50%\"\n cy=\"50%\"\n />\n </svg>\n</div>\n<div class=\"progress-indeterminate-container\" aria-hidden=\"true\">\n <div class=\"progress-spinner-layer\">\n <div class=\"progress-circle-clipper progress-circle-left\">\n <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n </div>\n <div class=\"progress-circle-clipper progress-circle-right\">\n <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n </div>\n </div>\n</div>\n@if (showValue()) {\n <p [ngClass]=\"['progress-label', 'size-' + size(), 'mode-' + mode()]\">{{ value }}%</p>\n}\n", styles: [".fw-progress-spinner{display:block;overflow:clip;line-height:0;position:relative;direction:ltr;transition:opacity .25s cubic-bezier(.4,0,.6,1)}.fw-progress-spinner.progress-small.progress-show-value{overflow:visible}.progress-determinate-container,.progress-indeterminate-circle-graphic,.progress-indeterminate-container,.progress-spinner-layer{position:absolute;width:100%;height:100%}.progress-determinate-container{transform:rotate(-90deg)}.progress-indeterminate .progress-determinate-container{opacity:0}.progress-indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;opacity:0}.progress-indeterminate .progress-indeterminate-container{opacity:1;animation:progress-container-rotate 1.5682353s linear infinite}.progress-determinate-circle-graphic,.progress-indeterminate-circle-graphic{fill:transparent;stroke:var(--primary-base);stroke-linecap:round}.progress-determinate-circle-graphic.secondary,.progress-indeterminate-circle-graphic.secondary{stroke:var(--secondary-base)}.progress-determinate-circle-graphic.red,.progress-indeterminate-circle-graphic.red{stroke:var(--red-base)}.progress-determinate-circle-graphic.slate,.progress-indeterminate-circle-graphic.slate{stroke:var(--slate-base)}.progress-determinate-circle-graphic.orange,.progress-indeterminate-circle-graphic.orange{stroke:var(--orange-base)}.progress-determinate-circle-graphic.green,.progress-indeterminate-circle-graphic.green{stroke:var(--green-base)}.progress-determinate-circle{transition:stroke-dashoffset .5s cubic-bezier(0,0,.2,1)}.progress-determinate-track,.progress-indeterminate-track{fill:transparent;stroke:var(--separations-divider);stroke-dasharray:100px!important;stroke-dashoffset:0!important;transition:none}.progress-gap-patch .progress-indeterminate-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.progress-circle-clipper .progress-indeterminate-circle-graphic{width:200%}.progress-circle-right .progress-indeterminate-circle-graphic{left:-100%}.progress-indeterminate .progress-circle-left .progress-indeterminate-circle-graphic{animation:progress-left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.progress-indeterminate .progress-circle-right .progress-indeterminate-circle-graphic{animation:progress-right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.progress-circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.progress-indeterminate .progress-spinner-layer{animation:progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both}.progress-label{margin:0;font-size:8px;line-height:120%;font-weight:500;width:24px;color:var(--typography-muted);position:absolute;top:calc(50% - 4px);right:calc(50% - 12px);text-align:center}.progress-label.size-small{right:-24px}.progress-label.size-large{font-size:12px;top:calc(50% - 6px)}.progress-label.size-extra-large{font-size:16px;width:40px;top:calc(50% - 8px);right:calc(50% - 20px)}@keyframes progress-container-rotate{to{transform:rotate(360deg)}}@keyframes progress-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes progress-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes progress-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1488
1499
|
}
|
|
1489
1500
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwProgressSpinnerComponent, decorators: [{
|
|
1490
1501
|
type: Component,
|
|
@@ -1494,16 +1505,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
1494
1505
|
tabindex: '-1',
|
|
1495
1506
|
'[class.progress-indeterminate]': 'mode() === "indeterminate"',
|
|
1496
1507
|
'[class.progress-small]': 'size() === "small"',
|
|
1497
|
-
'[class.progress-show-value]': 'this.showValue',
|
|
1508
|
+
'[class.progress-show-value]': 'this.showValue()',
|
|
1498
1509
|
'[style.width.px]': 'diameter',
|
|
1499
1510
|
'[style.height.px]': 'diameter',
|
|
1500
|
-
|
|
1501
|
-
|
|
1511
|
+
'[style.--progress-size]': 'diameter + "px"',
|
|
1512
|
+
'[style.--progress-active-indicator-width]': 'diameter + "px"',
|
|
1502
1513
|
'[attr.aria-valuemin]': '0',
|
|
1503
1514
|
'[attr.aria-valuemax]': '100',
|
|
1504
1515
|
'[attr.aria-valuenow]': 'mode() === "determinate" ? value : null',
|
|
1505
1516
|
'[attr.mode]': 'mode()',
|
|
1506
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgClass, NgTemplateOutlet], template: "<ng-template #circle>\n <svg\n [attr.viewBox]=\"_viewBox()\"\n [ngClass]=\"['progress-indeterminate-circle-graphic', color()]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-indeterminate-track\"\n cx=\"50%\"\n cy=\"50%\"\n />\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeCircumference() / 2\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n cx=\"50%\"\n cy=\"50%\"\n />\n </svg>\n</ng-template>\n\n<div class=\"progress-determinate-container\" aria-hidden=\"true\" #determinateSpinner>\n <svg\n [attr.viewBox]=\"_viewBox()\"\n [ngClass]=\"['progress-determinate-circle-graphic', color()]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-determinate-track\"\n cx=\"50%\"\n cy=\"50%\"\n />\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-determinate-circle\"\n cx=\"50%\"\n cy=\"50%\"\n />\n </svg>\n</div>\n<div class=\"progress-indeterminate-container\" aria-hidden=\"true\">\n <div class=\"progress-spinner-layer\">\n <div class=\"progress-circle-clipper progress-circle-left\">\n <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n </div>\n <div class=\"progress-circle-clipper progress-circle-right\">\n <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n </div>\n </div>\n</div>\n@if (showValue()) {\n <p [ngClass]=\"['progress-label', 'size-' + size(), 'mode-' + mode()]\">{{ value }}%</p>\n}\n", styles: [".fw-progress-spinner{display:block;overflow:
|
|
1517
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgClass, NgTemplateOutlet], template: "<ng-template #circle>\n <svg\n [attr.viewBox]=\"_viewBox()\"\n [ngClass]=\"['progress-indeterminate-circle-graphic', color()]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-indeterminate-track\"\n cx=\"50%\"\n cy=\"50%\"\n />\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeCircumference() / 2\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n cx=\"50%\"\n cy=\"50%\"\n />\n </svg>\n</ng-template>\n\n<div class=\"progress-determinate-container\" aria-hidden=\"true\" #determinateSpinner>\n <svg\n [attr.viewBox]=\"_viewBox()\"\n [ngClass]=\"['progress-determinate-circle-graphic', color()]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-determinate-track\"\n cx=\"50%\"\n cy=\"50%\"\n />\n <circle\n [attr.r]=\"_circleRadius()\"\n [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n [style.stroke-width.%]=\"_circleStrokeWidth()\"\n class=\"progress-determinate-circle\"\n cx=\"50%\"\n cy=\"50%\"\n />\n </svg>\n</div>\n<div class=\"progress-indeterminate-container\" aria-hidden=\"true\">\n <div class=\"progress-spinner-layer\">\n <div class=\"progress-circle-clipper progress-circle-left\">\n <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n </div>\n <div class=\"progress-circle-clipper progress-circle-right\">\n <ng-container [ngTemplateOutlet]=\"circle\"></ng-container>\n </div>\n </div>\n</div>\n@if (showValue()) {\n <p [ngClass]=\"['progress-label', 'size-' + size(), 'mode-' + mode()]\">{{ value }}%</p>\n}\n", styles: [".fw-progress-spinner{display:block;overflow:clip;line-height:0;position:relative;direction:ltr;transition:opacity .25s cubic-bezier(.4,0,.6,1)}.fw-progress-spinner.progress-small.progress-show-value{overflow:visible}.progress-determinate-container,.progress-indeterminate-circle-graphic,.progress-indeterminate-container,.progress-spinner-layer{position:absolute;width:100%;height:100%}.progress-determinate-container{transform:rotate(-90deg)}.progress-indeterminate .progress-determinate-container{opacity:0}.progress-indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;opacity:0}.progress-indeterminate .progress-indeterminate-container{opacity:1;animation:progress-container-rotate 1.5682353s linear infinite}.progress-determinate-circle-graphic,.progress-indeterminate-circle-graphic{fill:transparent;stroke:var(--primary-base);stroke-linecap:round}.progress-determinate-circle-graphic.secondary,.progress-indeterminate-circle-graphic.secondary{stroke:var(--secondary-base)}.progress-determinate-circle-graphic.red,.progress-indeterminate-circle-graphic.red{stroke:var(--red-base)}.progress-determinate-circle-graphic.slate,.progress-indeterminate-circle-graphic.slate{stroke:var(--slate-base)}.progress-determinate-circle-graphic.orange,.progress-indeterminate-circle-graphic.orange{stroke:var(--orange-base)}.progress-determinate-circle-graphic.green,.progress-indeterminate-circle-graphic.green{stroke:var(--green-base)}.progress-determinate-circle{transition:stroke-dashoffset .5s cubic-bezier(0,0,.2,1)}.progress-determinate-track,.progress-indeterminate-track{fill:transparent;stroke:var(--separations-divider);stroke-dasharray:100px!important;stroke-dashoffset:0!important;transition:none}.progress-gap-patch .progress-indeterminate-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.progress-circle-clipper .progress-indeterminate-circle-graphic{width:200%}.progress-circle-right .progress-indeterminate-circle-graphic{left:-100%}.progress-indeterminate .progress-circle-left .progress-indeterminate-circle-graphic{animation:progress-left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.progress-indeterminate .progress-circle-right .progress-indeterminate-circle-graphic{animation:progress-right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.progress-circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.progress-indeterminate .progress-spinner-layer{animation:progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both}.progress-label{margin:0;font-size:8px;line-height:120%;font-weight:500;width:24px;color:var(--typography-muted);position:absolute;top:calc(50% - 4px);right:calc(50% - 12px);text-align:center}.progress-label.size-small{right:-24px}.progress-label.size-large{font-size:12px;top:calc(50% - 6px)}.progress-label.size-extra-large{font-size:16px;width:40px;top:calc(50% - 8px);right:calc(50% - 20px)}@keyframes progress-container-rotate{to{transform:rotate(360deg)}}@keyframes progress-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes progress-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes progress-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}\n"] }]
|
|
1507
1518
|
}], propDecorators: { _determinateCircle: [{
|
|
1508
1519
|
type: ViewChild,
|
|
1509
1520
|
args: ['determinateSpinner']
|
|
@@ -3081,11 +3092,11 @@ class FwDialogComponent {
|
|
|
3081
3092
|
}, 300);
|
|
3082
3093
|
}
|
|
3083
3094
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3084
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwDialogComponent, isStandalone: true, selector: "fw-dialog", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, externalClasses: { classPropertyName: "externalClasses", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, host: { properties: { "attr.title": "this.hostTitle", "class": "this.classes" } }, ngImport: i0, template: "<div class=\"fw-dialog\">\n @if (showClose()) {\n <fw-icon-button tabindex=\"-1\" icon=\"close\" color=\"slate\" (click)=\"handleCloseButton()\"> </fw-icon-button>\n }\n <div class=\"dialog-header\">\n <ng-content select=\"fw-dialog-header\"></ng-content>\n @if (title()) {\n <div class=\"dialog-title\">\n
|
|
3095
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwDialogComponent, isStandalone: true, selector: "fw-dialog", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, externalClasses: { classPropertyName: "externalClasses", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, host: { properties: { "attr.title": "this.hostTitle", "class": "this.classes" } }, ngImport: i0, template: "<div class=\"fw-dialog\">\n @if (showClose()) {\n <fw-icon-button tabindex=\"-1\" icon=\"close\" color=\"slate\" (click)=\"handleCloseButton()\"> </fw-icon-button>\n }\n <div class=\"dialog-header\">\n <ng-content select=\"fw-dialog-header\"></ng-content>\n @if (title()) {\n <div class=\"dialog-title\">\n <h3 class=\"vision-h3\">{{ title() }}</h3>\n </div>\n }\n </div>\n <div class=\"dialog-body\">\n <ng-content select=\"fw-dialog-content\"></ng-content>\n </div>\n <div class=\"dialog-actions\">\n <ng-content select=\"fw-dialog-actions\"></ng-content>\n </div>\n</div>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;background-color:var(--card-background);border:1px solid var(--separations-border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;animation:slide-in-from-bottom .15s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .15s ease-in forwards}:host.dialog-width-extra-small{width:444px}:host.dialog-width-small{width:600px}:host.dialog-width-medium{width:900px}:host.dialog-width-large{width:1200px}:host.dialog-width-extra-large{width:1536px}:host.dialog-width-responsive{max-width:100vw;margin:0 12px}@media only screen and (width<=575px){:host.dialog-width-responsive{max-height:92vh;margin-top:4vh;margin-bottom:4vh}:host.dialog-width-responsive .fw-dialog{border-radius:12px}:host.dialog-width-responsive .fw-dialog .dialog-body{max-height:65vh;overflow-y:auto;-webkit-overflow-scrolling:touch}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar{width:4px}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar-track{background:var(--separations-base)}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar-thumb{background:var(--slate-base);border-radius:2px}}@media only screen and (width>=576px){:host.dialog-width-responsive{width:90vw;max-width:600px;margin:0}}@media only screen and (width>=768px){:host.dialog-width-responsive{width:80vw;max-width:900px}:host.dialog-width-responsive .fw-dialog .dialog-body{max-height:70vh;overflow-y:auto}}@media only screen and (width>=992px){:host.dialog-width-responsive{width:60vw;max-width:1200px}}@media only screen and (width>=1200px){:host.dialog-width-responsive{width:50vw;max-width:1536px}}:host .fw-dialog{position:relative}:host .fw-dialog fw-icon-button{position:absolute;top:4px;right:4px}:host .fw-dialog .dialog-header{background-color:var(--card-header)}:host .fw-dialog .dialog-header .dialog-title{display:flex;box-sizing:border-box;border-bottom:1px solid var(--separations-base);padding:12px 16px;height:44px;overflow:hidden;align-items:center}:host .fw-dialog .dialog-header .dialog-title h3{overflow:clip visible;min-width:0;white-space:nowrap;text-overflow:ellipsis;margin-right:30px;flex:1}:host .fw-dialog .dialog-header h3{margin:0}:host .fw-dialog .dialog-header:empty{display:none}:host .fw-dialog .dialog-body{background-color:var(--card-background);border-bottom:1px solid var(--separations-base)}:host .fw-dialog .dialog-body:empty{display:none}:host .fw-dialog .dialog-actions{padding:16px}:host .fw-dialog .dialog-actions:empty{display:none}\n"], dependencies: [{ kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected", "border"] }] }); }
|
|
3085
3096
|
}
|
|
3086
3097
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwDialogComponent, decorators: [{
|
|
3087
3098
|
type: Component,
|
|
3088
|
-
args: [{ selector: 'fw-dialog', imports: [FwIconButtonComponent, FwIconComponent], template: "<div class=\"fw-dialog\">\n @if (showClose()) {\n <fw-icon-button tabindex=\"-1\" icon=\"close\" color=\"slate\" (click)=\"handleCloseButton()\"> </fw-icon-button>\n }\n <div class=\"dialog-header\">\n <ng-content select=\"fw-dialog-header\"></ng-content>\n @if (title()) {\n <div class=\"dialog-title\">\n
|
|
3099
|
+
args: [{ selector: 'fw-dialog', imports: [FwIconButtonComponent, FwIconComponent], template: "<div class=\"fw-dialog\">\n @if (showClose()) {\n <fw-icon-button tabindex=\"-1\" icon=\"close\" color=\"slate\" (click)=\"handleCloseButton()\"> </fw-icon-button>\n }\n <div class=\"dialog-header\">\n <ng-content select=\"fw-dialog-header\"></ng-content>\n @if (title()) {\n <div class=\"dialog-title\">\n <h3 class=\"vision-h3\">{{ title() }}</h3>\n </div>\n }\n </div>\n <div class=\"dialog-body\">\n <ng-content select=\"fw-dialog-content\"></ng-content>\n </div>\n <div class=\"dialog-actions\">\n <ng-content select=\"fw-dialog-actions\"></ng-content>\n </div>\n</div>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;background-color:var(--card-background);border:1px solid var(--separations-border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;animation:slide-in-from-bottom .15s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .15s ease-in forwards}:host.dialog-width-extra-small{width:444px}:host.dialog-width-small{width:600px}:host.dialog-width-medium{width:900px}:host.dialog-width-large{width:1200px}:host.dialog-width-extra-large{width:1536px}:host.dialog-width-responsive{max-width:100vw;margin:0 12px}@media only screen and (width<=575px){:host.dialog-width-responsive{max-height:92vh;margin-top:4vh;margin-bottom:4vh}:host.dialog-width-responsive .fw-dialog{border-radius:12px}:host.dialog-width-responsive .fw-dialog .dialog-body{max-height:65vh;overflow-y:auto;-webkit-overflow-scrolling:touch}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar{width:4px}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar-track{background:var(--separations-base)}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar-thumb{background:var(--slate-base);border-radius:2px}}@media only screen and (width>=576px){:host.dialog-width-responsive{width:90vw;max-width:600px;margin:0}}@media only screen and (width>=768px){:host.dialog-width-responsive{width:80vw;max-width:900px}:host.dialog-width-responsive .fw-dialog .dialog-body{max-height:70vh;overflow-y:auto}}@media only screen and (width>=992px){:host.dialog-width-responsive{width:60vw;max-width:1200px}}@media only screen and (width>=1200px){:host.dialog-width-responsive{width:50vw;max-width:1536px}}:host .fw-dialog{position:relative}:host .fw-dialog fw-icon-button{position:absolute;top:4px;right:4px}:host .fw-dialog .dialog-header{background-color:var(--card-header)}:host .fw-dialog .dialog-header .dialog-title{display:flex;box-sizing:border-box;border-bottom:1px solid var(--separations-base);padding:12px 16px;height:44px;overflow:hidden;align-items:center}:host .fw-dialog .dialog-header .dialog-title h3{overflow:clip visible;min-width:0;white-space:nowrap;text-overflow:ellipsis;margin-right:30px;flex:1}:host .fw-dialog .dialog-header h3{margin:0}:host .fw-dialog .dialog-header:empty{display:none}:host .fw-dialog .dialog-body{background-color:var(--card-background);border-bottom:1px solid var(--separations-base)}:host .fw-dialog .dialog-body:empty{display:none}:host .fw-dialog .dialog-actions{padding:16px}:host .fw-dialog .dialog-actions:empty{display:none}\n"] }]
|
|
3089
3100
|
}], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], externalClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], close: [{
|
|
3090
3101
|
type: Output
|
|
3091
3102
|
}], hostTitle: [{
|
|
@@ -3266,6 +3277,7 @@ class FwDialogConfirmComponent {
|
|
|
3266
3277
|
this.contentIcon = input('', ...(ngDevMode ? [{ debugName: "contentIcon" }] : /* istanbul ignore next */ []));
|
|
3267
3278
|
this.contentTitle = input('Are you sure?', ...(ngDevMode ? [{ debugName: "contentTitle" }] : /* istanbul ignore next */ []));
|
|
3268
3279
|
this.contentText = input('', ...(ngDevMode ? [{ debugName: "contentText" }] : /* istanbul ignore next */ []));
|
|
3280
|
+
this.contentTextAlignment = input('start', ...(ngDevMode ? [{ debugName: "contentTextAlignment" }] : /* istanbul ignore next */ []));
|
|
3269
3281
|
this.showConfirmButtonIcon = input(true, ...(ngDevMode ? [{ debugName: "showConfirmButtonIcon" }] : /* istanbul ignore next */ []));
|
|
3270
3282
|
this.showClose = input(false, ...(ngDevMode ? [{ debugName: "showClose" }] : /* istanbul ignore next */ []));
|
|
3271
3283
|
this.width = input('extra-small', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
@@ -3307,7 +3319,7 @@ class FwDialogConfirmComponent {
|
|
|
3307
3319
|
this.closeWithAnimation();
|
|
3308
3320
|
}
|
|
3309
3321
|
handleConfirm() {
|
|
3310
|
-
this.dialogRef
|
|
3322
|
+
this.dialogRef?.close(true);
|
|
3311
3323
|
this.confirm.emit();
|
|
3312
3324
|
}
|
|
3313
3325
|
closeWithAnimation() {
|
|
@@ -3316,12 +3328,12 @@ class FwDialogConfirmComponent {
|
|
|
3316
3328
|
}
|
|
3317
3329
|
this.isClosing = true;
|
|
3318
3330
|
setTimeout(() => {
|
|
3319
|
-
this.dialogRef
|
|
3331
|
+
this.dialogRef?.close();
|
|
3320
3332
|
this.close.emit();
|
|
3321
3333
|
}, 300);
|
|
3322
3334
|
}
|
|
3323
3335
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwDialogConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3324
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwDialogConfirmComponent, isStandalone: true, selector: "fw-dialog-confirm", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, confirmColor: { classPropertyName: "confirmColor", publicName: "confirmColor", isSignal: true, isRequired: false, transformFunction: null }, cancelColor: { classPropertyName: "cancelColor", publicName: "cancelColor", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonText: { classPropertyName: "confirmButtonText", publicName: "confirmButtonText", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonIcon: { classPropertyName: "confirmButtonIcon", publicName: "confirmButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, contentIcon: { classPropertyName: "contentIcon", publicName: "contentIcon", isSignal: true, isRequired: false, transformFunction: null }, contentTitle: { classPropertyName: "contentTitle", publicName: "contentTitle", isSignal: true, isRequired: false, transformFunction: null }, contentText: { classPropertyName: "contentText", publicName: "contentText", isSignal: true, isRequired: false, transformFunction: null }, showConfirmButtonIcon: { classPropertyName: "showConfirmButtonIcon", publicName: "showConfirmButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, externalClasses: { classPropertyName: "externalClasses", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", confirm: "confirm" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<fw-dialog\n [width]=\"width()\"\n [title]=\"title()\"\n [icon]=\"icon()\"\n [iconColor]=\"iconColor()\"\n [showClose]=\"showClose()\"\n [ngClass]=\"dialogClasses\"\n>\n <fw-dialog-content>\n <div class=\"dialog-content-confirm\">\n @if (contentIcon()) {\n <fw-icon class=\"content-icon\" [ngClass]=\"confirmColor()\">\n {{ contentIcon() }}\n </fw-icon>\n }\n\n @if (contentTitle()) {\n <p class=\"vision-
|
|
3336
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwDialogConfirmComponent, isStandalone: true, selector: "fw-dialog-confirm", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, confirmColor: { classPropertyName: "confirmColor", publicName: "confirmColor", isSignal: true, isRequired: false, transformFunction: null }, cancelColor: { classPropertyName: "cancelColor", publicName: "cancelColor", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonText: { classPropertyName: "confirmButtonText", publicName: "confirmButtonText", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonIcon: { classPropertyName: "confirmButtonIcon", publicName: "confirmButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, contentIcon: { classPropertyName: "contentIcon", publicName: "contentIcon", isSignal: true, isRequired: false, transformFunction: null }, contentTitle: { classPropertyName: "contentTitle", publicName: "contentTitle", isSignal: true, isRequired: false, transformFunction: null }, contentText: { classPropertyName: "contentText", publicName: "contentText", isSignal: true, isRequired: false, transformFunction: null }, contentTextAlignment: { classPropertyName: "contentTextAlignment", publicName: "contentTextAlignment", isSignal: true, isRequired: false, transformFunction: null }, showConfirmButtonIcon: { classPropertyName: "showConfirmButtonIcon", publicName: "showConfirmButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, externalClasses: { classPropertyName: "externalClasses", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", confirm: "confirm" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<fw-dialog\n [width]=\"width()\"\n [title]=\"title()\"\n [icon]=\"icon()\"\n [iconColor]=\"iconColor()\"\n [showClose]=\"showClose()\"\n [ngClass]=\"dialogClasses\"\n>\n <fw-dialog-content>\n <div class=\"dialog-content-confirm\" [class.with-icon]=\"contentIcon()\">\n @if (contentIcon()) {\n <fw-icon class=\"content-icon\" [ngClass]=\"confirmColor()\">\n {{ contentIcon() }}\n </fw-icon>\n }\n\n @if (contentTitle()) {\n <p class=\"vision-h4 content-title\">\n {{ contentTitle() }}\n </p>\n }\n\n @if (contentText()) {\n <p class=\"vision-p3 content-text {{contentTextAlignment()}}\">\n {{ contentText() }}\n </p>\n }\n </div>\n </fw-dialog-content>\n <fw-dialog-actions>\n @if (cancelButtonText()) {\n <fw-button variant=\"outline\" [color]=\"cancelColor()\" (click)=\"handleCloseButton()\">\n {{ cancelButtonText() }}\n </fw-button>\n }\n\n @if (confirmButtonText()) {\n <fw-button\n variant=\"solid\"\n [color]=\"confirmColor()\"\n [leftIcon]=\"showConfirmButtonIcon() ? confirmButtonIcon() : null\"\n (click)=\"handleConfirm()\"\n >\n {{ confirmButtonText() }}\n </fw-button>\n }\n </fw-dialog-actions>\n</fw-dialog>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;animation:slide-in-from-bottom .3s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .3s ease-in forwards}:host .fw-dialog-confirm{position:relative}.dialog-content-confirm{display:flex;flex-direction:column;padding:24px;align-items:flex-start;justify-content:flex-start;text-align:left}.dialog-content-confirm.with-icon{padding:48px;align-items:center;justify-content:center;text-align:center}.dialog-content-confirm .content-title{margin-top:0;margin-bottom:4px}.dialog-content-confirm .content-text{margin:0;color:var(--typography-muted)}.dialog-content-confirm .content-text.start{text-align:start}.dialog-content-confirm .content-text.center{text-align:center}.dialog-content-confirm .content-text.end{text-align:end}.dialog-content-confirm .content-icon{font-size:50px}.dialog-content-confirm .content-icon.primary{color:var(--primary-base)}.dialog-content-confirm .content-icon.secondary{color:var(--secondary-base)}.dialog-content-confirm .content-icon.slate{color:var(--slate-base)}.dialog-content-confirm .content-icon.success{color:var(--green-base)}.dialog-content-confirm .content-icon.warning{color:var(--orange-base)}.dialog-content-confirm .content-icon.danger{color:var(--red-base)}\n"], dependencies: [{ kind: "component", type: FwDialogComponent, selector: "fw-dialog", inputs: ["width", "title", "icon", "iconColor", "showClose", "class"], outputs: ["close"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FwDialogContentComponent, selector: "fw-dialog-content", inputs: ["padded"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwDialogActionsComponent, selector: "fw-dialog-actions" }, { kind: "component", type: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "type", "disabled", "fullWidth", "leftIcon", "rightIcon"] }] }); }
|
|
3325
3337
|
}
|
|
3326
3338
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwDialogConfirmComponent, decorators: [{
|
|
3327
3339
|
type: Component,
|
|
@@ -3332,8 +3344,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
3332
3344
|
FwIconComponent,
|
|
3333
3345
|
FwDialogActionsComponent,
|
|
3334
3346
|
FwButtonComponent,
|
|
3335
|
-
], template: "<fw-dialog\n [width]=\"width()\"\n [title]=\"title()\"\n [icon]=\"icon()\"\n [iconColor]=\"iconColor()\"\n [showClose]=\"showClose()\"\n [ngClass]=\"dialogClasses\"\n>\n <fw-dialog-content>\n <div class=\"dialog-content-confirm\">\n @if (contentIcon()) {\n <fw-icon class=\"content-icon\" [ngClass]=\"confirmColor()\">\n {{ contentIcon() }}\n </fw-icon>\n }\n\n @if (contentTitle()) {\n <p class=\"vision-
|
|
3336
|
-
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], confirmColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmColor", required: false }] }], cancelColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelColor", required: false }] }], confirmButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmButtonText", required: false }] }], confirmButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmButtonIcon", required: false }] }], cancelButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonText", required: false }] }], contentIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentIcon", required: false }] }], contentTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTitle", required: false }] }], contentText: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentText", required: false }] }], showConfirmButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showConfirmButtonIcon", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], externalClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], close: [{
|
|
3347
|
+
], template: "<fw-dialog\n [width]=\"width()\"\n [title]=\"title()\"\n [icon]=\"icon()\"\n [iconColor]=\"iconColor()\"\n [showClose]=\"showClose()\"\n [ngClass]=\"dialogClasses\"\n>\n <fw-dialog-content>\n <div class=\"dialog-content-confirm\" [class.with-icon]=\"contentIcon()\">\n @if (contentIcon()) {\n <fw-icon class=\"content-icon\" [ngClass]=\"confirmColor()\">\n {{ contentIcon() }}\n </fw-icon>\n }\n\n @if (contentTitle()) {\n <p class=\"vision-h4 content-title\">\n {{ contentTitle() }}\n </p>\n }\n\n @if (contentText()) {\n <p class=\"vision-p3 content-text {{contentTextAlignment()}}\">\n {{ contentText() }}\n </p>\n }\n </div>\n </fw-dialog-content>\n <fw-dialog-actions>\n @if (cancelButtonText()) {\n <fw-button variant=\"outline\" [color]=\"cancelColor()\" (click)=\"handleCloseButton()\">\n {{ cancelButtonText() }}\n </fw-button>\n }\n\n @if (confirmButtonText()) {\n <fw-button\n variant=\"solid\"\n [color]=\"confirmColor()\"\n [leftIcon]=\"showConfirmButtonIcon() ? confirmButtonIcon() : null\"\n (click)=\"handleConfirm()\"\n >\n {{ confirmButtonText() }}\n </fw-button>\n }\n </fw-dialog-actions>\n</fw-dialog>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;animation:slide-in-from-bottom .3s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .3s ease-in forwards}:host .fw-dialog-confirm{position:relative}.dialog-content-confirm{display:flex;flex-direction:column;padding:24px;align-items:flex-start;justify-content:flex-start;text-align:left}.dialog-content-confirm.with-icon{padding:48px;align-items:center;justify-content:center;text-align:center}.dialog-content-confirm .content-title{margin-top:0;margin-bottom:4px}.dialog-content-confirm .content-text{margin:0;color:var(--typography-muted)}.dialog-content-confirm .content-text.start{text-align:start}.dialog-content-confirm .content-text.center{text-align:center}.dialog-content-confirm .content-text.end{text-align:end}.dialog-content-confirm .content-icon{font-size:50px}.dialog-content-confirm .content-icon.primary{color:var(--primary-base)}.dialog-content-confirm .content-icon.secondary{color:var(--secondary-base)}.dialog-content-confirm .content-icon.slate{color:var(--slate-base)}.dialog-content-confirm .content-icon.success{color:var(--green-base)}.dialog-content-confirm .content-icon.warning{color:var(--orange-base)}.dialog-content-confirm .content-icon.danger{color:var(--red-base)}\n"] }]
|
|
3348
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], confirmColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmColor", required: false }] }], cancelColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelColor", required: false }] }], confirmButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmButtonText", required: false }] }], confirmButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmButtonIcon", required: false }] }], cancelButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonText", required: false }] }], contentIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentIcon", required: false }] }], contentTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTitle", required: false }] }], contentText: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentText", required: false }] }], contentTextAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTextAlignment", required: false }] }], showConfirmButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showConfirmButtonIcon", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], externalClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], close: [{
|
|
3337
3349
|
type: Output
|
|
3338
3350
|
}], confirm: [{
|
|
3339
3351
|
type: Output
|
|
@@ -3446,11 +3458,11 @@ class FwDialogSimpleComponent {
|
|
|
3446
3458
|
}, 300);
|
|
3447
3459
|
}
|
|
3448
3460
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwDialogSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3449
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwDialogSimpleComponent, isStandalone: true, selector: "fw-dialog-simple", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, actionButtonText: { classPropertyName: "actionButtonText", publicName: "actionButtonText", isSignal: true, isRequired: false, transformFunction: null }, actionButtonIcon: { classPropertyName: "actionButtonIcon", publicName: "actionButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, alternateButtonText: { classPropertyName: "alternateButtonText", publicName: "alternateButtonText", isSignal: true, isRequired: false, transformFunction: null }, alternateButtonIcon: { classPropertyName: "alternateButtonIcon", publicName: "alternateButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, contentText: { classPropertyName: "contentText", publicName: "contentText", isSignal: true, isRequired: false, transformFunction: null }, externalClasses: { classPropertyName: "externalClasses", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", action: "action", alternateAction: "alternateAction" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<fw-dialog\n [width]=\"width()\"\n [title]=\"title()\"\n [icon]=\"icon()\"\n [iconColor]=\"iconColor()\"\n [showClose]=\"showClose()\"\n [ngClass]=\"dialogClasses\"\n>\n <fw-dialog-content>\n <ng-content select=\"fw-dialog-content\"></ng-content>\n @if (contentText()) {\n <p class=\"vision-
|
|
3461
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwDialogSimpleComponent, isStandalone: true, selector: "fw-dialog-simple", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, actionButtonText: { classPropertyName: "actionButtonText", publicName: "actionButtonText", isSignal: true, isRequired: false, transformFunction: null }, actionButtonIcon: { classPropertyName: "actionButtonIcon", publicName: "actionButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, alternateButtonText: { classPropertyName: "alternateButtonText", publicName: "alternateButtonText", isSignal: true, isRequired: false, transformFunction: null }, alternateButtonIcon: { classPropertyName: "alternateButtonIcon", publicName: "alternateButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, contentText: { classPropertyName: "contentText", publicName: "contentText", isSignal: true, isRequired: false, transformFunction: null }, externalClasses: { classPropertyName: "externalClasses", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", action: "action", alternateAction: "alternateAction" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<fw-dialog\n [width]=\"width()\"\n [title]=\"title()\"\n [icon]=\"icon()\"\n [iconColor]=\"iconColor()\"\n [showClose]=\"showClose()\"\n [ngClass]=\"dialogClasses\"\n>\n <fw-dialog-content>\n <ng-content select=\"fw-dialog-content\"></ng-content>\n @if (contentText()) {\n <p class=\"vision-p3 dialog-content-default\">{{ contentText() }}</p>\n }\n </fw-dialog-content>\n <fw-dialog-actions>\n @if (alternateButtonText()) {\n <fw-button variant=\"outline\" [leftIcon]=\"alternateButtonIcon()\" (click)=\"alternateAction.emit()\">\n {{ alternateButtonText() }}\n </fw-button>\n }\n <div class=\"flex\"></div>\n @if (cancelButtonText()) {\n <fw-button variant=\"outline\" (click)=\"handleCloseButton()\">\n {{ cancelButtonText() }}\n </fw-button>\n }\n @if (actionButtonText()) {\n <fw-button variant=\"solid\" (click)=\"action.emit()\">\n {{ actionButtonText() }}\n </fw-button>\n }\n </fw-dialog-actions>\n</fw-dialog>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;animation:slide-in-from-bottom .3s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .3s ease-in forwards}.dialog-content-default{padding:15px;margin:0;color:var(--typography-muted)}.flex{flex:1}\n"], dependencies: [{ kind: "component", type: FwDialogComponent, selector: "fw-dialog", inputs: ["width", "title", "icon", "iconColor", "showClose", "class"], outputs: ["close"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FwDialogContentComponent, selector: "fw-dialog-content", inputs: ["padded"] }, { kind: "component", type: FwDialogActionsComponent, selector: "fw-dialog-actions" }, { kind: "component", type: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "type", "disabled", "fullWidth", "leftIcon", "rightIcon"] }] }); }
|
|
3450
3462
|
}
|
|
3451
3463
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwDialogSimpleComponent, decorators: [{
|
|
3452
3464
|
type: Component,
|
|
3453
|
-
args: [{ selector: 'fw-dialog-simple', imports: [FwDialogComponent, NgClass, FwDialogContentComponent, FwDialogActionsComponent, FwButtonComponent], template: "<fw-dialog\n [width]=\"width()\"\n [title]=\"title()\"\n [icon]=\"icon()\"\n [iconColor]=\"iconColor()\"\n [showClose]=\"showClose()\"\n [ngClass]=\"dialogClasses\"\n>\n <fw-dialog-content>\n <ng-content select=\"fw-dialog-content\"></ng-content>\n @if (contentText()) {\n <p class=\"vision-
|
|
3465
|
+
args: [{ selector: 'fw-dialog-simple', imports: [FwDialogComponent, NgClass, FwDialogContentComponent, FwDialogActionsComponent, FwButtonComponent], template: "<fw-dialog\n [width]=\"width()\"\n [title]=\"title()\"\n [icon]=\"icon()\"\n [iconColor]=\"iconColor()\"\n [showClose]=\"showClose()\"\n [ngClass]=\"dialogClasses\"\n>\n <fw-dialog-content>\n <ng-content select=\"fw-dialog-content\"></ng-content>\n @if (contentText()) {\n <p class=\"vision-p3 dialog-content-default\">{{ contentText() }}</p>\n }\n </fw-dialog-content>\n <fw-dialog-actions>\n @if (alternateButtonText()) {\n <fw-button variant=\"outline\" [leftIcon]=\"alternateButtonIcon()\" (click)=\"alternateAction.emit()\">\n {{ alternateButtonText() }}\n </fw-button>\n }\n <div class=\"flex\"></div>\n @if (cancelButtonText()) {\n <fw-button variant=\"outline\" (click)=\"handleCloseButton()\">\n {{ cancelButtonText() }}\n </fw-button>\n }\n @if (actionButtonText()) {\n <fw-button variant=\"solid\" (click)=\"action.emit()\">\n {{ actionButtonText() }}\n </fw-button>\n }\n </fw-dialog-actions>\n</fw-dialog>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;animation:slide-in-from-bottom .3s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .3s ease-in forwards}.dialog-content-default{padding:15px;margin:0;color:var(--typography-muted)}.flex{flex:1}\n"] }]
|
|
3454
3466
|
}], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], actionButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionButtonText", required: false }] }], actionButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionButtonIcon", required: false }] }], cancelButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonText", required: false }] }], alternateButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternateButtonText", required: false }] }], alternateButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternateButtonIcon", required: false }] }], contentText: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentText", required: false }] }], externalClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], close: [{
|
|
3455
3467
|
type: Output
|
|
3456
3468
|
}], action: [{
|
|
@@ -3714,6 +3726,7 @@ const allIcons = [
|
|
|
3714
3726
|
'archive-documents-box-big',
|
|
3715
3727
|
'arrange-filter-sort',
|
|
3716
3728
|
'arrow',
|
|
3729
|
+
'arrow-3d-rotate',
|
|
3717
3730
|
'arrow-annotate',
|
|
3718
3731
|
'arrow-back',
|
|
3719
3732
|
'arrow-back-collapse',
|
|
@@ -3899,6 +3912,7 @@ const allIcons = [
|
|
|
3899
3912
|
'lock-unlock',
|
|
3900
3913
|
'logout',
|
|
3901
3914
|
'lungs',
|
|
3915
|
+
'maps-protection-target',
|
|
3902
3916
|
'markdown',
|
|
3903
3917
|
'measure-angle',
|
|
3904
3918
|
'measure-ruler-calibration',
|
|
@@ -3937,6 +3951,10 @@ const allIcons = [
|
|
|
3937
3951
|
'notes-pen',
|
|
3938
3952
|
'object-search-zoom-plus',
|
|
3939
3953
|
'open',
|
|
3954
|
+
'orientation-3d-axial-acquisition',
|
|
3955
|
+
'orientation-3d-coronal',
|
|
3956
|
+
'orientation-3d-reformat',
|
|
3957
|
+
'orientation-3d-sagittal',
|
|
3940
3958
|
'paint-roller',
|
|
3941
3959
|
'pause',
|
|
3942
3960
|
'pen-edit-circle',
|
|
@@ -5622,7 +5640,7 @@ class FwMultiSelectMenuComponent {
|
|
|
5622
5640
|
this.titleProperty = input('title', ...(ngDevMode ? [{ debugName: "titleProperty" }] : /* istanbul ignore next */ []));
|
|
5623
5641
|
this.iconProperty = input('icon', ...(ngDevMode ? [{ debugName: "iconProperty" }] : /* istanbul ignore next */ []));
|
|
5624
5642
|
// behaviour
|
|
5625
|
-
this.emptyText = input('No
|
|
5643
|
+
this.emptyText = input('No results found', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
|
|
5626
5644
|
this.placeholder = input('Select something...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
5627
5645
|
this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
5628
5646
|
this.useCheckbox = input(false, ...(ngDevMode ? [{ debugName: "useCheckbox" }] : /* istanbul ignore next */ []));
|
|
@@ -6197,9 +6215,9 @@ class FwSelectMenuComponent {
|
|
|
6197
6215
|
* Get all available items for navigation, either from options or menuItems
|
|
6198
6216
|
*/
|
|
6199
6217
|
getAvailableItems() {
|
|
6200
|
-
// If using options input, return filtered options
|
|
6218
|
+
// If using options input, return filtered options excluding disabled ones
|
|
6201
6219
|
if (this.options().length > 0) {
|
|
6202
|
-
return this.filteredOptions();
|
|
6220
|
+
return this.filteredOptions().filter(opt => !opt['disabled']);
|
|
6203
6221
|
}
|
|
6204
6222
|
// If using content projection, filter by typeahead text and exclude disabled items
|
|
6205
6223
|
if (this.menuItems().length > 0) {
|
|
@@ -6529,7 +6547,7 @@ class FwSelectMenuComponent {
|
|
|
6529
6547
|
const iProp = this.iconProperty();
|
|
6530
6548
|
const fullOption = this.useFullOptionAsValue();
|
|
6531
6549
|
// null guard
|
|
6532
|
-
if (
|
|
6550
|
+
if (newValue === null || newValue === undefined) {
|
|
6533
6551
|
this.selectValue.set('');
|
|
6534
6552
|
this.selectIcon = undefined;
|
|
6535
6553
|
return this.onChange(newValue);
|
|
@@ -7685,11 +7703,11 @@ class FwBackButtonComponent {
|
|
|
7685
7703
|
}
|
|
7686
7704
|
}
|
|
7687
7705
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwBackButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7688
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: FwBackButtonComponent, isStandalone: true, selector: "fw-back-button", inputs: { backFunction: { classPropertyName: "backFunction", publicName: "backFunction", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.class": "this.class" } }, ngImport: i0, template: "<button (click)=\"handleClick()\">\n <fw-icon>arrow-back</fw-icon>\n</button>\n", styles: [".fw-back-button button{color:var(--typography-light);background-color:transparent;border:1px solid var(--slate-border);width:44px;height:44px;border-radius:36px;display:flex;align-items:center;justify-content:center}.fw-back-button button fw-icon{line-height:42px;font-size:24px;color:var(--typography-light)}.fw-back-button button:hover{background-color:var(--primary-hover);border:1px solid var(--primary-hover)}.fw-back-button button:hover fw-icon{color:var(--primary-base)}.fw-back-button button:active{background-color:var(--primary-focus);border:1px solid var(--primary-focus)}.fw-back-button button:active fw-icon{color:var(--primary-base)}\n"], dependencies: [{ kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
7706
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: FwBackButtonComponent, isStandalone: true, selector: "fw-back-button", inputs: { backFunction: { classPropertyName: "backFunction", publicName: "backFunction", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.class": "this.class" } }, ngImport: i0, template: "<button (click)=\"handleClick()\">\n <fw-icon>arrow-back</fw-icon>\n</button>\n", styles: [".fw-back-button button{color:var(--typography-light);background-color:transparent;border:1px solid var(--slate-border);width:44px;height:44px;border-radius:36px;display:flex;align-items:center;justify-content:center;cursor:pointer}.fw-back-button button fw-icon{line-height:42px;font-size:24px;color:var(--typography-light)}.fw-back-button button:hover{background-color:var(--primary-hover);border:1px solid var(--primary-hover)}.fw-back-button button:hover fw-icon{color:var(--primary-base)}.fw-back-button button:active{background-color:var(--primary-focus);border:1px solid var(--primary-focus)}.fw-back-button button:active fw-icon{color:var(--primary-base)}\n"], dependencies: [{ kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
7689
7707
|
}
|
|
7690
7708
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwBackButtonComponent, decorators: [{
|
|
7691
7709
|
type: Component,
|
|
7692
|
-
args: [{ selector: 'fw-back-button', encapsulation: ViewEncapsulation.None, imports: [FwIconComponent], template: "<button (click)=\"handleClick()\">\n <fw-icon>arrow-back</fw-icon>\n</button>\n", styles: [".fw-back-button button{color:var(--typography-light);background-color:transparent;border:1px solid var(--slate-border);width:44px;height:44px;border-radius:36px;display:flex;align-items:center;justify-content:center}.fw-back-button button fw-icon{line-height:42px;font-size:24px;color:var(--typography-light)}.fw-back-button button:hover{background-color:var(--primary-hover);border:1px solid var(--primary-hover)}.fw-back-button button:hover fw-icon{color:var(--primary-base)}.fw-back-button button:active{background-color:var(--primary-focus);border:1px solid var(--primary-focus)}.fw-back-button button:active fw-icon{color:var(--primary-base)}\n"] }]
|
|
7710
|
+
args: [{ selector: 'fw-back-button', encapsulation: ViewEncapsulation.None, imports: [FwIconComponent], template: "<button (click)=\"handleClick()\">\n <fw-icon>arrow-back</fw-icon>\n</button>\n", styles: [".fw-back-button button{color:var(--typography-light);background-color:transparent;border:1px solid var(--slate-border);width:44px;height:44px;border-radius:36px;display:flex;align-items:center;justify-content:center;cursor:pointer}.fw-back-button button fw-icon{line-height:42px;font-size:24px;color:var(--typography-light)}.fw-back-button button:hover{background-color:var(--primary-hover);border:1px solid var(--primary-hover)}.fw-back-button button:hover fw-icon{color:var(--primary-base)}.fw-back-button button:active{background-color:var(--primary-focus);border:1px solid var(--primary-focus)}.fw-back-button button:active fw-icon{color:var(--primary-base)}\n"] }]
|
|
7693
7711
|
}], propDecorators: { backFunction: [{ type: i0.Input, args: [{ isSignal: true, alias: "backFunction", required: false }] }], class: [{
|
|
7694
7712
|
type: HostBinding,
|
|
7695
7713
|
args: ['attr.class']
|
|
@@ -9373,7 +9391,7 @@ class FwTypeaheadComponent {
|
|
|
9373
9391
|
}
|
|
9374
9392
|
}, ...(ngDevMode ? [{ debugName: "syncSearchValueToInput" }] : /* istanbul ignore next */ []));
|
|
9375
9393
|
this.allowNew = input(true, ...(ngDevMode ? [{ debugName: "allowNew" }] : /* istanbul ignore next */ []));
|
|
9376
|
-
this.placeholder = input('
|
|
9394
|
+
this.placeholder = input('Start typing...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
9377
9395
|
this.displayedPlaceholder = computed(() => {
|
|
9378
9396
|
if (this.selectType() === 'single') {
|
|
9379
9397
|
return this.value()[0] || this.placeholder();
|
|
@@ -9586,7 +9604,7 @@ class FwTypeaheadComponent {
|
|
|
9586
9604
|
useExisting: forwardRef(() => FwTypeaheadComponent),
|
|
9587
9605
|
multi: true,
|
|
9588
9606
|
},
|
|
9589
|
-
], 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
|
|
9607
|
+
], 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: ["disabledChange", "valueChange", "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: ["sizeChange", "disabledChange", "showCheckboxChange", "multiSelectChange", "hiddenChange", "subItemsOpenChange", "mouseEnterHandlerChange", "click", "focusedChange", "selectedChange"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i5.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], 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 }); }
|
|
9590
9608
|
}
|
|
9591
9609
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwTypeaheadComponent, decorators: [{
|
|
9592
9610
|
type: Component,
|
|
@@ -9608,7 +9626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
9608
9626
|
},
|
|
9609
9627
|
], host: {
|
|
9610
9628
|
'[class.fw-touched]': 'touched()',
|
|
9611
|
-
}, 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
|
|
9629
|
+
}, 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"] }]
|
|
9612
9630
|
}], propDecorators: { outsideClick: [{
|
|
9613
9631
|
type: HostListener,
|
|
9614
9632
|
args: ['document:click']
|