@flywheel-io/vision 20.0.0 → 20.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/flywheel-io-vision.mjs +150 -25
- package/fesm2022/flywheel-io-vision.mjs.map +1 -1
- package/index.d.ts +35 -5
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { NgClass, CommonModule, NgIf, NgStyle, NgTemplateOutlet, NgFor, SlicePipe, Location } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { inject, HostBinding, Input, ChangeDetectionStrategy, Component, input, output, NgModule, model, computed, signal, HostListener, ViewEncapsulation, EventEmitter, Output, effect, ElementRef, ViewContainerRef, Directive, contentChildren, viewChild, ChangeDetectorRef, ContentChildren, ViewChild, forwardRef, Injectable, ContentChild,
|
|
3
|
+
import { inject, HostBinding, Input, ChangeDetectionStrategy, Component, input, output, NgModule, model, computed, signal, HostListener, ViewEncapsulation, EventEmitter, Output, effect, ElementRef, ViewContainerRef, Directive, contentChildren, viewChild, ChangeDetectorRef, ContentChildren, ViewChild, forwardRef, DestroyRef, Injectable, ContentChild, NgZone, untracked, ViewChildren, viewChildren, linkedSignal, TemplateRef } from '@angular/core';
|
|
4
4
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
5
5
|
import { BehaviorSubject, debounce, timer, distinctUntilChanged, of, Subscription, min, combineLatest, tap, switchMap, map } from 'rxjs';
|
|
6
6
|
import { CdkConnectedOverlay, OverlayModule, Overlay, CdkOverlayOrigin, OverlayContainer } from '@angular/cdk/overlay';
|
|
@@ -10,12 +10,12 @@ import { trigger, transition, style, animate, state } from '@angular/animations'
|
|
|
10
10
|
import { ComponentPortal } from '@angular/cdk/portal';
|
|
11
11
|
import * as i1 from '@angular/forms';
|
|
12
12
|
import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, NgControl, FormControl } from '@angular/forms';
|
|
13
|
+
import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
|
|
13
14
|
import { DialogRef, Dialog, DialogModule } from '@angular/cdk/dialog';
|
|
14
15
|
import { parseISO, isBefore, isSameDay, isAfter } from 'date-fns';
|
|
15
16
|
import { isValidPhoneNumber, getExampleNumber, parsePhoneNumberFromString, AsYouType } from 'libphonenumber-js';
|
|
16
17
|
import * as i5 from '@angular/cdk/menu';
|
|
17
18
|
import { CdkMenuTrigger, CdkMenuBar, CdkMenuModule } from '@angular/cdk/menu';
|
|
18
|
-
import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
|
|
19
19
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
20
20
|
import { _DisposeViewRepeaterStrategy, _VIEW_REPEATER_STRATEGY } from '@angular/cdk/collections';
|
|
21
21
|
import { CdkTextareaAutosize, TextFieldModule } from '@angular/cdk/text-field';
|
|
@@ -2588,6 +2588,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
|
|
|
2588
2588
|
*/
|
|
2589
2589
|
class FwCheckboxComponent {
|
|
2590
2590
|
constructor() {
|
|
2591
|
+
this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
2592
|
+
this.checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
|
|
2591
2593
|
this.disabled = false;
|
|
2592
2594
|
this.size = 'medium';
|
|
2593
2595
|
this.color = 'primary';
|
|
@@ -2603,7 +2605,7 @@ class FwCheckboxComponent {
|
|
|
2603
2605
|
this.color,
|
|
2604
2606
|
this.size,
|
|
2605
2607
|
this.focused ? 'focused' : '',
|
|
2606
|
-
this.checked === undefined ? 'indeterminate' : '',
|
|
2608
|
+
this.checked() === undefined ? 'indeterminate' : '',
|
|
2607
2609
|
this.disabled ? 'disabled' : '',
|
|
2608
2610
|
];
|
|
2609
2611
|
}
|
|
@@ -2617,24 +2619,24 @@ class FwCheckboxComponent {
|
|
|
2617
2619
|
this.disabled = isDisabled;
|
|
2618
2620
|
}
|
|
2619
2621
|
writeValue(checked) {
|
|
2620
|
-
this.checked
|
|
2622
|
+
this.checked.set(checked);
|
|
2621
2623
|
}
|
|
2622
2624
|
handleClick() {
|
|
2623
2625
|
this.onTouched();
|
|
2624
2626
|
if (!this.disabled) {
|
|
2625
|
-
this.checked
|
|
2627
|
+
this.checked.set(!this.checked());
|
|
2626
2628
|
if (this.onChange) {
|
|
2627
|
-
this.onChange(this.checked);
|
|
2629
|
+
this.onChange(this.checked());
|
|
2628
2630
|
}
|
|
2629
|
-
this.change.emit(this.checked);
|
|
2631
|
+
this.change.emit(this.checked());
|
|
2630
2632
|
}
|
|
2631
2633
|
}
|
|
2632
2634
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FwCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2633
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2635
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.19", type: FwCheckboxComponent, isStandalone: true, selector: "fw-checkbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", change: "change" }, providers: [{
|
|
2634
2636
|
provide: NG_VALUE_ACCESSOR,
|
|
2635
2637
|
useExisting: FwCheckboxComponent,
|
|
2636
2638
|
multi: true,
|
|
2637
|
-
}], ngImport: i0, template: "<div class=\"checkbox-wrapper\" (click)=\"handleClick()\" [ngClass]=\"disabled?'disabled':''\">\n <div [ngClass]=\"checkboxStyles\">\n <input\n type=\"checkbox\"\n class=\"checkbox\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n (focusout)=\"focused=false\"\n (focusin)=\"focused=true\"\n />\n </div>\n <p class=\"vision-p2\">{{ title }}\n <ng-content></ng-content>\n </p>\n</div>\n", styles: [".checkbox-wrapper{display:flex;align-items:center;width:fit-content;cursor:pointer}.checkbox-wrapper p{margin:0 0 0 2px}.checkbox-wrapper p:empty{display:none}.checkbox-wrapper .compact{width:30px;height:30px}.checkbox-wrapper .compact .checkbox{height:15px;width:15px}.checkbox-wrapper .medium{width:36px;height:36px}.checkbox-wrapper .medium .checkbox{height:18px;width:18px}.checkbox-wrapper .medium .checkbox:after{font-size:18px}.checkbox-wrapper .fw-checkbox{display:flex;align-items:center;justify-content:center;border-radius:21px}.checkbox-wrapper .fw-checkbox .checkbox{position:relative;display:flex;align-items:center;justify-content:center;appearance:none;border:2px solid var(--typography-light);border-radius:1.5px;cursor:pointer;margin:0}.checkbox-wrapper .fw-checkbox .checkbox:after{position:absolute;top:0;left:0;width:100%;height:100%;background-size:contain;background-position:center;background-repeat:no-repeat;content:\" \";display:none}.checkbox-wrapper .fw-checkbox .checkbox:checked:after{background-image:url(\"data:image/svg+xml,%3Csvg width='14' height='11' viewBox='0 0 14 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 11L0 5.99996L1.41 4.58996L5 8.16996L12.59 0.579956L14 1.99996L5 11Z' fill='white' style='fill:white;fill-opacity:1;'/%3E%3C/svg%3E%0A\");display:block}.checkbox-wrapper .fw-checkbox.primary:hover{background:var(--primary-hover)}.checkbox-wrapper .fw-checkbox.primary .checkbox:checked{background-color:var(--primary-base);border-color:var(--primary-base)}.checkbox-wrapper .fw-checkbox.primary .checkbox:focus{outline:none;border:2px solid var(--primary-base)}.checkbox-wrapper .fw-checkbox.primary.indeterminate .checkbox{background-color:var(--primary-base);border-color:var(--primary-base)}.checkbox-wrapper .fw-checkbox.primary.focused{background:var(--primary-focus)}.checkbox-wrapper .fw-checkbox.primary.focused .checkbox{border:2px solid var(--primary-base)}.checkbox-wrapper .fw-checkbox.secondary:hover{background:var(--secondary-hover)}.checkbox-wrapper .fw-checkbox.secondary .checkbox:checked{background-color:var(--secondary-base);border-color:var(--secondary-base)}.checkbox-wrapper .fw-checkbox.secondary .checkbox:focus{outline:none;border:2px solid var(--secondary-base)}.checkbox-wrapper .fw-checkbox.secondary.indeterminate .checkbox{background-color:var(--secondary-base);border-color:var(--secondary-base)}.checkbox-wrapper .fw-checkbox.secondary.focused{background:var(--secondary-focus)}.checkbox-wrapper .fw-checkbox.secondary.focused .checkbox{border:2px solid var(--secondary-base)}.checkbox-wrapper .fw-checkbox.indeterminate .checkbox:after{background-image:url(\"data:image/svg+xml,%3Csvg class='svg-icon' style='width: 1em; height: 1em;vertical-align: middle;fill: white;overflow: hidden;' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M984.615385 541.538462c0 15.753846-13.784615 29.538462-29.538462 29.538461h-886.153846c-15.753846 0-29.538462-13.784615-29.538462-29.538461v-59.076924c0-15.753846 13.784615-29.538462 29.538462-29.538461h886.153846c15.753846 0 29.538462 13.784615 29.538462 29.538461v59.076924z' /%3E%3C/svg%3E\");display:block}.checkbox-wrapper .fw-checkbox.indeterminate .compact .checkbox:after{font-size:17px}.checkbox-wrapper .fw-checkbox.indeterminate .medium .checkbox:after{font-size:22px}.checkbox-wrapper.disabled{cursor:not-allowed;opacity:.4}.checkbox-wrapper.disabled .fw-checkbox:hover{background:none}.checkbox-wrapper.disabled .fw-checkbox .checkbox{border:2px solid var(--typography-light)}.checkbox-wrapper.disabled .fw-checkbox .checkbox:checked{background-color:var(--typography-light);border:2px solid var(--typography-light)}.checkbox-wrapper.disabled .fw-checkbox.indeterminate .checkbox{background-color:var(--typography-light);border-color:var(--typography-light)}.checkbox-wrapper.disabled p{color:var(--typography-light)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
2639
|
+
}], ngImport: i0, template: "<div class=\"checkbox-wrapper\" (click)=\"handleClick()\" [ngClass]=\"disabled?'disabled':''\">\n <div [ngClass]=\"checkboxStyles\">\n <input\n type=\"checkbox\"\n class=\"checkbox\"\n [checked]=\"checked()\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n (focusout)=\"focused=false\"\n (focusin)=\"focused=true\"\n />\n </div>\n <p class=\"vision-p2\">{{ title }}\n <ng-content></ng-content>\n </p>\n</div>\n", styles: [".checkbox-wrapper{display:flex;align-items:center;width:fit-content;cursor:pointer}.checkbox-wrapper p{margin:0 0 0 2px}.checkbox-wrapper p:empty{display:none}.checkbox-wrapper .compact{width:30px;height:30px}.checkbox-wrapper .compact .checkbox{height:15px;width:15px}.checkbox-wrapper .medium{width:36px;height:36px}.checkbox-wrapper .medium .checkbox{height:18px;width:18px}.checkbox-wrapper .medium .checkbox:after{font-size:18px}.checkbox-wrapper .fw-checkbox{display:flex;align-items:center;justify-content:center;border-radius:21px}.checkbox-wrapper .fw-checkbox .checkbox{position:relative;display:flex;align-items:center;justify-content:center;appearance:none;border:2px solid var(--typography-light);border-radius:1.5px;cursor:pointer;margin:0}.checkbox-wrapper .fw-checkbox .checkbox:after{position:absolute;top:0;left:0;width:100%;height:100%;background-size:contain;background-position:center;background-repeat:no-repeat;content:\" \";display:none}.checkbox-wrapper .fw-checkbox .checkbox:checked:after{background-image:url(\"data:image/svg+xml,%3Csvg width='14' height='11' viewBox='0 0 14 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 11L0 5.99996L1.41 4.58996L5 8.16996L12.59 0.579956L14 1.99996L5 11Z' fill='white' style='fill:white;fill-opacity:1;'/%3E%3C/svg%3E%0A\");display:block}.checkbox-wrapper .fw-checkbox.primary:hover{background:var(--primary-hover)}.checkbox-wrapper .fw-checkbox.primary .checkbox:checked{background-color:var(--primary-base);border-color:var(--primary-base)}.checkbox-wrapper .fw-checkbox.primary .checkbox:focus{outline:none;border:2px solid var(--primary-base)}.checkbox-wrapper .fw-checkbox.primary.indeterminate .checkbox{background-color:var(--primary-base);border-color:var(--primary-base)}.checkbox-wrapper .fw-checkbox.primary.focused{background:var(--primary-focus)}.checkbox-wrapper .fw-checkbox.primary.focused .checkbox{border:2px solid var(--primary-base)}.checkbox-wrapper .fw-checkbox.secondary:hover{background:var(--secondary-hover)}.checkbox-wrapper .fw-checkbox.secondary .checkbox:checked{background-color:var(--secondary-base);border-color:var(--secondary-base)}.checkbox-wrapper .fw-checkbox.secondary .checkbox:focus{outline:none;border:2px solid var(--secondary-base)}.checkbox-wrapper .fw-checkbox.secondary.indeterminate .checkbox{background-color:var(--secondary-base);border-color:var(--secondary-base)}.checkbox-wrapper .fw-checkbox.secondary.focused{background:var(--secondary-focus)}.checkbox-wrapper .fw-checkbox.secondary.focused .checkbox{border:2px solid var(--secondary-base)}.checkbox-wrapper .fw-checkbox.indeterminate .checkbox:after{background-image:url(\"data:image/svg+xml,%3Csvg class='svg-icon' style='width: 1em; height: 1em;vertical-align: middle;fill: white;overflow: hidden;' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M984.615385 541.538462c0 15.753846-13.784615 29.538462-29.538462 29.538461h-886.153846c-15.753846 0-29.538462-13.784615-29.538462-29.538461v-59.076924c0-15.753846 13.784615-29.538462 29.538462-29.538461h886.153846c15.753846 0 29.538462 13.784615 29.538462 29.538461v59.076924z' /%3E%3C/svg%3E\");display:block}.checkbox-wrapper .fw-checkbox.indeterminate .compact .checkbox:after{font-size:17px}.checkbox-wrapper .fw-checkbox.indeterminate .medium .checkbox:after{font-size:22px}.checkbox-wrapper.disabled{cursor:not-allowed;opacity:.4}.checkbox-wrapper.disabled .fw-checkbox:hover{background:none}.checkbox-wrapper.disabled .fw-checkbox .checkbox{border:2px solid var(--typography-light)}.checkbox-wrapper.disabled .fw-checkbox .checkbox:checked{background-color:var(--typography-light);border:2px solid var(--typography-light)}.checkbox-wrapper.disabled .fw-checkbox.indeterminate .checkbox{background-color:var(--typography-light);border-color:var(--typography-light)}.checkbox-wrapper.disabled p{color:var(--typography-light)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
2638
2640
|
}
|
|
2639
2641
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FwCheckboxComponent, decorators: [{
|
|
2640
2642
|
type: Component,
|
|
@@ -2642,8 +2644,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
|
|
|
2642
2644
|
provide: NG_VALUE_ACCESSOR,
|
|
2643
2645
|
useExisting: FwCheckboxComponent,
|
|
2644
2646
|
multi: true,
|
|
2645
|
-
}], imports: [NgClass], template: "<div class=\"checkbox-wrapper\" (click)=\"handleClick()\" [ngClass]=\"disabled?'disabled':''\">\n <div [ngClass]=\"checkboxStyles\">\n <input\n type=\"checkbox\"\n class=\"checkbox\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n (focusout)=\"focused=false\"\n (focusin)=\"focused=true\"\n />\n </div>\n <p class=\"vision-p2\">{{ title }}\n <ng-content></ng-content>\n </p>\n</div>\n", styles: [".checkbox-wrapper{display:flex;align-items:center;width:fit-content;cursor:pointer}.checkbox-wrapper p{margin:0 0 0 2px}.checkbox-wrapper p:empty{display:none}.checkbox-wrapper .compact{width:30px;height:30px}.checkbox-wrapper .compact .checkbox{height:15px;width:15px}.checkbox-wrapper .medium{width:36px;height:36px}.checkbox-wrapper .medium .checkbox{height:18px;width:18px}.checkbox-wrapper .medium .checkbox:after{font-size:18px}.checkbox-wrapper .fw-checkbox{display:flex;align-items:center;justify-content:center;border-radius:21px}.checkbox-wrapper .fw-checkbox .checkbox{position:relative;display:flex;align-items:center;justify-content:center;appearance:none;border:2px solid var(--typography-light);border-radius:1.5px;cursor:pointer;margin:0}.checkbox-wrapper .fw-checkbox .checkbox:after{position:absolute;top:0;left:0;width:100%;height:100%;background-size:contain;background-position:center;background-repeat:no-repeat;content:\" \";display:none}.checkbox-wrapper .fw-checkbox .checkbox:checked:after{background-image:url(\"data:image/svg+xml,%3Csvg width='14' height='11' viewBox='0 0 14 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 11L0 5.99996L1.41 4.58996L5 8.16996L12.59 0.579956L14 1.99996L5 11Z' fill='white' style='fill:white;fill-opacity:1;'/%3E%3C/svg%3E%0A\");display:block}.checkbox-wrapper .fw-checkbox.primary:hover{background:var(--primary-hover)}.checkbox-wrapper .fw-checkbox.primary .checkbox:checked{background-color:var(--primary-base);border-color:var(--primary-base)}.checkbox-wrapper .fw-checkbox.primary .checkbox:focus{outline:none;border:2px solid var(--primary-base)}.checkbox-wrapper .fw-checkbox.primary.indeterminate .checkbox{background-color:var(--primary-base);border-color:var(--primary-base)}.checkbox-wrapper .fw-checkbox.primary.focused{background:var(--primary-focus)}.checkbox-wrapper .fw-checkbox.primary.focused .checkbox{border:2px solid var(--primary-base)}.checkbox-wrapper .fw-checkbox.secondary:hover{background:var(--secondary-hover)}.checkbox-wrapper .fw-checkbox.secondary .checkbox:checked{background-color:var(--secondary-base);border-color:var(--secondary-base)}.checkbox-wrapper .fw-checkbox.secondary .checkbox:focus{outline:none;border:2px solid var(--secondary-base)}.checkbox-wrapper .fw-checkbox.secondary.indeterminate .checkbox{background-color:var(--secondary-base);border-color:var(--secondary-base)}.checkbox-wrapper .fw-checkbox.secondary.focused{background:var(--secondary-focus)}.checkbox-wrapper .fw-checkbox.secondary.focused .checkbox{border:2px solid var(--secondary-base)}.checkbox-wrapper .fw-checkbox.indeterminate .checkbox:after{background-image:url(\"data:image/svg+xml,%3Csvg class='svg-icon' style='width: 1em; height: 1em;vertical-align: middle;fill: white;overflow: hidden;' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M984.615385 541.538462c0 15.753846-13.784615 29.538462-29.538462 29.538461h-886.153846c-15.753846 0-29.538462-13.784615-29.538462-29.538461v-59.076924c0-15.753846 13.784615-29.538462 29.538462-29.538461h886.153846c15.753846 0 29.538462 13.784615 29.538462 29.538461v59.076924z' /%3E%3C/svg%3E\");display:block}.checkbox-wrapper .fw-checkbox.indeterminate .compact .checkbox:after{font-size:17px}.checkbox-wrapper .fw-checkbox.indeterminate .medium .checkbox:after{font-size:22px}.checkbox-wrapper.disabled{cursor:not-allowed;opacity:.4}.checkbox-wrapper.disabled .fw-checkbox:hover{background:none}.checkbox-wrapper.disabled .fw-checkbox .checkbox{border:2px solid var(--typography-light)}.checkbox-wrapper.disabled .fw-checkbox .checkbox:checked{background-color:var(--typography-light);border:2px solid var(--typography-light)}.checkbox-wrapper.disabled .fw-checkbox.indeterminate .checkbox{background-color:var(--typography-light);border-color:var(--typography-light)}.checkbox-wrapper.disabled p{color:var(--typography-light)}\n"] }]
|
|
2646
|
-
}], propDecorators: { name: [{
|
|
2647
|
+
}], imports: [NgClass], template: "<div class=\"checkbox-wrapper\" (click)=\"handleClick()\" [ngClass]=\"disabled?'disabled':''\">\n <div [ngClass]=\"checkboxStyles\">\n <input\n type=\"checkbox\"\n class=\"checkbox\"\n [checked]=\"checked()\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n (focusout)=\"focused=false\"\n (focusin)=\"focused=true\"\n />\n </div>\n <p class=\"vision-p2\">{{ title }}\n <ng-content></ng-content>\n </p>\n</div>\n", styles: [".checkbox-wrapper{display:flex;align-items:center;width:fit-content;cursor:pointer}.checkbox-wrapper p{margin:0 0 0 2px}.checkbox-wrapper p:empty{display:none}.checkbox-wrapper .compact{width:30px;height:30px}.checkbox-wrapper .compact .checkbox{height:15px;width:15px}.checkbox-wrapper .medium{width:36px;height:36px}.checkbox-wrapper .medium .checkbox{height:18px;width:18px}.checkbox-wrapper .medium .checkbox:after{font-size:18px}.checkbox-wrapper .fw-checkbox{display:flex;align-items:center;justify-content:center;border-radius:21px}.checkbox-wrapper .fw-checkbox .checkbox{position:relative;display:flex;align-items:center;justify-content:center;appearance:none;border:2px solid var(--typography-light);border-radius:1.5px;cursor:pointer;margin:0}.checkbox-wrapper .fw-checkbox .checkbox:after{position:absolute;top:0;left:0;width:100%;height:100%;background-size:contain;background-position:center;background-repeat:no-repeat;content:\" \";display:none}.checkbox-wrapper .fw-checkbox .checkbox:checked:after{background-image:url(\"data:image/svg+xml,%3Csvg width='14' height='11' viewBox='0 0 14 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 11L0 5.99996L1.41 4.58996L5 8.16996L12.59 0.579956L14 1.99996L5 11Z' fill='white' style='fill:white;fill-opacity:1;'/%3E%3C/svg%3E%0A\");display:block}.checkbox-wrapper .fw-checkbox.primary:hover{background:var(--primary-hover)}.checkbox-wrapper .fw-checkbox.primary .checkbox:checked{background-color:var(--primary-base);border-color:var(--primary-base)}.checkbox-wrapper .fw-checkbox.primary .checkbox:focus{outline:none;border:2px solid var(--primary-base)}.checkbox-wrapper .fw-checkbox.primary.indeterminate .checkbox{background-color:var(--primary-base);border-color:var(--primary-base)}.checkbox-wrapper .fw-checkbox.primary.focused{background:var(--primary-focus)}.checkbox-wrapper .fw-checkbox.primary.focused .checkbox{border:2px solid var(--primary-base)}.checkbox-wrapper .fw-checkbox.secondary:hover{background:var(--secondary-hover)}.checkbox-wrapper .fw-checkbox.secondary .checkbox:checked{background-color:var(--secondary-base);border-color:var(--secondary-base)}.checkbox-wrapper .fw-checkbox.secondary .checkbox:focus{outline:none;border:2px solid var(--secondary-base)}.checkbox-wrapper .fw-checkbox.secondary.indeterminate .checkbox{background-color:var(--secondary-base);border-color:var(--secondary-base)}.checkbox-wrapper .fw-checkbox.secondary.focused{background:var(--secondary-focus)}.checkbox-wrapper .fw-checkbox.secondary.focused .checkbox{border:2px solid var(--secondary-base)}.checkbox-wrapper .fw-checkbox.indeterminate .checkbox:after{background-image:url(\"data:image/svg+xml,%3Csvg class='svg-icon' style='width: 1em; height: 1em;vertical-align: middle;fill: white;overflow: hidden;' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M984.615385 541.538462c0 15.753846-13.784615 29.538462-29.538462 29.538461h-886.153846c-15.753846 0-29.538462-13.784615-29.538462-29.538461v-59.076924c0-15.753846 13.784615-29.538462 29.538462-29.538461h886.153846c15.753846 0 29.538462 13.784615 29.538462 29.538461v59.076924z' /%3E%3C/svg%3E\");display:block}.checkbox-wrapper .fw-checkbox.indeterminate .compact .checkbox:after{font-size:17px}.checkbox-wrapper .fw-checkbox.indeterminate .medium .checkbox:after{font-size:22px}.checkbox-wrapper.disabled{cursor:not-allowed;opacity:.4}.checkbox-wrapper.disabled .fw-checkbox:hover{background:none}.checkbox-wrapper.disabled .fw-checkbox .checkbox{border:2px solid var(--typography-light)}.checkbox-wrapper.disabled .fw-checkbox .checkbox:checked{background-color:var(--typography-light);border:2px solid var(--typography-light)}.checkbox-wrapper.disabled .fw-checkbox.indeterminate .checkbox{background-color:var(--typography-light);border-color:var(--typography-light)}.checkbox-wrapper.disabled p{color:var(--typography-light)}\n"] }]
|
|
2648
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], name: [{
|
|
2647
2649
|
type: Input
|
|
2648
2650
|
}], disabled: [{
|
|
2649
2651
|
type: Input
|
|
@@ -2655,10 +2657,129 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
|
|
|
2655
2657
|
type: Input
|
|
2656
2658
|
}], focused: [{
|
|
2657
2659
|
type: Input
|
|
2658
|
-
}],
|
|
2660
|
+
}], change: [{
|
|
2661
|
+
type: Output
|
|
2662
|
+
}] } });
|
|
2663
|
+
|
|
2664
|
+
/**
|
|
2665
|
+
* Container component for grouping checkboxes, managing shared multi-selection state and Angular forms integration
|
|
2666
|
+
* @see [Vision storybook](https://cdn.flywheel.io/docs/vision/master/?path=/docs/form-controls-checkbox-group--docs)
|
|
2667
|
+
*/
|
|
2668
|
+
class FwCheckboxGroupComponent {
|
|
2669
|
+
get style() {
|
|
2670
|
+
const dir = this.direction === 'vertical' ? 'column' : 'row';
|
|
2671
|
+
return this.sanitizer.bypassSecurityTrustStyle(`
|
|
2672
|
+
display: flex;
|
|
2673
|
+
flex-direction: ${dir};
|
|
2674
|
+
`);
|
|
2675
|
+
}
|
|
2676
|
+
constructor() {
|
|
2677
|
+
this.value = [];
|
|
2678
|
+
this.direction = 'horizontal';
|
|
2679
|
+
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
2680
|
+
this.change = new EventEmitter();
|
|
2681
|
+
this.sanitizer = inject(DomSanitizer);
|
|
2682
|
+
this.dr = inject(DestroyRef);
|
|
2683
|
+
this.checkboxes = contentChildren(FwCheckboxComponent, ...(ngDevMode ? [{ debugName: "checkboxes" }] : []));
|
|
2684
|
+
this._value = signal([], ...(ngDevMode ? [{ debugName: "_value" }] : []));
|
|
2685
|
+
this.checkboxSubs = new Map();
|
|
2686
|
+
this.onTouch = () => {
|
|
2687
|
+
};
|
|
2688
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
2689
|
+
this.onChange = (value) => {
|
|
2690
|
+
};
|
|
2691
|
+
effect(() => {
|
|
2692
|
+
const checkboxes = this.checkboxes();
|
|
2693
|
+
const values = this._value();
|
|
2694
|
+
const disabled = this.disabled;
|
|
2695
|
+
const color = this.color;
|
|
2696
|
+
const size = this.size;
|
|
2697
|
+
checkboxes.forEach(cb => {
|
|
2698
|
+
cb.checked.set(values.includes(cb.value()));
|
|
2699
|
+
cb.disabled = Boolean(disabled);
|
|
2700
|
+
if (color) {
|
|
2701
|
+
cb.color = color;
|
|
2702
|
+
}
|
|
2703
|
+
if (size) {
|
|
2704
|
+
cb.size = size;
|
|
2705
|
+
}
|
|
2706
|
+
});
|
|
2707
|
+
});
|
|
2708
|
+
effect(() => {
|
|
2709
|
+
const checkboxes = this.checkboxes();
|
|
2710
|
+
this.checkboxSubs.forEach((sub, cb) => {
|
|
2711
|
+
if (!checkboxes.includes(cb)) {
|
|
2712
|
+
sub.unsubscribe();
|
|
2713
|
+
this.checkboxSubs.delete(cb);
|
|
2714
|
+
}
|
|
2715
|
+
});
|
|
2716
|
+
checkboxes.forEach(cb => {
|
|
2717
|
+
if (!this.checkboxSubs.has(cb)) {
|
|
2718
|
+
const sub = cb.change.pipe(takeUntilDestroyed(this.dr)).subscribe(checked => {
|
|
2719
|
+
const cbValue = cb.value();
|
|
2720
|
+
if (cbValue !== undefined) {
|
|
2721
|
+
this.handleChange(cbValue, checked);
|
|
2722
|
+
}
|
|
2723
|
+
});
|
|
2724
|
+
this.checkboxSubs.set(cb, sub);
|
|
2725
|
+
}
|
|
2726
|
+
});
|
|
2727
|
+
});
|
|
2728
|
+
}
|
|
2729
|
+
writeValue(value) {
|
|
2730
|
+
this.value = value ?? [];
|
|
2731
|
+
this._value.set(this.value);
|
|
2732
|
+
}
|
|
2733
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2734
|
+
registerOnChange(fn) {
|
|
2735
|
+
this.onChange = fn;
|
|
2736
|
+
}
|
|
2737
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2738
|
+
registerOnTouched(fn) {
|
|
2739
|
+
this.onTouch = fn;
|
|
2740
|
+
}
|
|
2741
|
+
setDisabledState(isDisabled) {
|
|
2742
|
+
this.disabled = isDisabled;
|
|
2743
|
+
}
|
|
2744
|
+
handleChange(value, checked) {
|
|
2745
|
+
const current = this._value();
|
|
2746
|
+
const updated = checked
|
|
2747
|
+
? [...current, value]
|
|
2748
|
+
: current.filter(v => v !== value);
|
|
2749
|
+
this._value.set(updated);
|
|
2750
|
+
this.value = updated;
|
|
2751
|
+
this.onChange(updated);
|
|
2752
|
+
this.change.emit(updated);
|
|
2753
|
+
}
|
|
2754
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FwCheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2755
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.19", type: FwCheckboxGroupComponent, isStandalone: true, selector: "fw-checkbox-group", inputs: { value: "value", color: "color", size: "size", disabled: "disabled", direction: "direction" }, outputs: { change: "change" }, host: { properties: { "style": "this.style" } }, providers: [{
|
|
2756
|
+
provide: NG_VALUE_ACCESSOR,
|
|
2757
|
+
useExisting: FwCheckboxGroupComponent,
|
|
2758
|
+
multi: true,
|
|
2759
|
+
}], queries: [{ propertyName: "checkboxes", predicate: FwCheckboxComponent, isSignal: true }], ngImport: i0, template: '<ng-content select="fw-checkbox"></ng-content>', isInline: true }); }
|
|
2760
|
+
}
|
|
2761
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FwCheckboxGroupComponent, decorators: [{
|
|
2762
|
+
type: Component,
|
|
2763
|
+
args: [{ selector: 'fw-checkbox-group', template: '<ng-content select="fw-checkbox"></ng-content>', providers: [{
|
|
2764
|
+
provide: NG_VALUE_ACCESSOR,
|
|
2765
|
+
useExisting: FwCheckboxGroupComponent,
|
|
2766
|
+
multi: true,
|
|
2767
|
+
}] }]
|
|
2768
|
+
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
2769
|
+
type: Input
|
|
2770
|
+
}], color: [{
|
|
2771
|
+
type: Input
|
|
2772
|
+
}], size: [{
|
|
2773
|
+
type: Input
|
|
2774
|
+
}], disabled: [{
|
|
2775
|
+
type: Input
|
|
2776
|
+
}], direction: [{
|
|
2659
2777
|
type: Input
|
|
2660
2778
|
}], change: [{
|
|
2661
2779
|
type: Output
|
|
2780
|
+
}], checkboxes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FwCheckboxComponent), { isSignal: true }] }], style: [{
|
|
2781
|
+
type: HostBinding,
|
|
2782
|
+
args: ['style']
|
|
2662
2783
|
}] } });
|
|
2663
2784
|
|
|
2664
2785
|
/**
|
|
@@ -2669,7 +2790,9 @@ class FwCheckboxModule {
|
|
|
2669
2790
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: FwCheckboxModule, imports: [CommonModule,
|
|
2670
2791
|
ReactiveFormsModule,
|
|
2671
2792
|
FormsModule,
|
|
2672
|
-
FwCheckboxComponent
|
|
2793
|
+
FwCheckboxComponent,
|
|
2794
|
+
FwCheckboxGroupComponent], exports: [FwCheckboxComponent,
|
|
2795
|
+
FwCheckboxGroupComponent] }); }
|
|
2673
2796
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FwCheckboxModule, imports: [CommonModule,
|
|
2674
2797
|
ReactiveFormsModule,
|
|
2675
2798
|
FormsModule] }); }
|
|
@@ -2682,9 +2805,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
|
|
|
2682
2805
|
ReactiveFormsModule,
|
|
2683
2806
|
FormsModule,
|
|
2684
2807
|
FwCheckboxComponent,
|
|
2808
|
+
FwCheckboxGroupComponent,
|
|
2685
2809
|
],
|
|
2686
2810
|
exports: [
|
|
2687
2811
|
FwCheckboxComponent,
|
|
2812
|
+
FwCheckboxGroupComponent,
|
|
2688
2813
|
],
|
|
2689
2814
|
}]
|
|
2690
2815
|
}] });
|
|
@@ -2897,7 +3022,7 @@ class FwContainedInputComponent {
|
|
|
2897
3022
|
provide: NG_VALUE_ACCESSOR,
|
|
2898
3023
|
useExisting: FwContainedInputComponent,
|
|
2899
3024
|
multi: true,
|
|
2900
|
-
}], ngImport: i0, template: "<div class=\"heading-area\">\n <ng-content select=\"fw-avatar\"></ng-content>\n <div>\n <h4 class=\"vision-h4 section-heading\">{{ title }}\n <span *ngIf=\"status\" class=\"status\">{{ status.toUpperCase() }}</span>\n <ng-content select=\"fw-icon\"></ng-content>\n </h4>\n <p class=\"vision-p3\" *ngIf=\"description\">{{ description }}</p>\n </div>\n</div>\n<div class=\"input-content\">\n <fw-switch *ngIf=\"inputVariant==='switch'\" [checked]=\"checked\" [disabled]=\"disabled\" color=\"primary\"></fw-switch>\n <fw-checkbox\n *ngIf=\"inputVariant==='checkbox'\" [checked]=\"checked\" [disabled]=\"disabled\" color=\"primary\"></fw-checkbox>\n</div>\n", styles: [":host{display:flex;flex:1;justify-content:space-between;align-items:center;gap:16px;border:1px var(--separations-base) solid;padding:16px;border-radius:8px;cursor:pointer}:host:hover{border:1px solid var(--primary-border);background:var(--primary-hover)}:host.checked{border:1px solid var(--primary-border);background:var(--primary-focus)}:host.position-start{flex-direction:row-reverse}:host .heading-area{display:flex;align-items:center;gap:16px;flex:1}:host .heading-area h4{color:var(--typography-base);margin:0;display:flex;align-items:center;gap:5px}:host .heading-area h4 .status{color:var(--primary-base)}:host .heading-area p{color:var(--typography-muted);margin:0;line-height:140%;display:flex;align-items:center;gap:3px}:host .heading-area p a{color:var(--typography-muted)}:host .heading-area fw-icon.heading-icon{box-sizing:border-box;color:var(--primary-base);width:44px;height:44px;font-size:32px;text-align:center;justify-content:center;padding:6px}:host .input-content fw-switch{margin:0 8px 0 -8px;width:36px;display:block}:host .input-content fw-checkbox{margin:0}:host.disabled{border:1px solid var(--separations-base);background:none;opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwSwitchComponent, selector: "fw-switch", inputs: ["name", "title", "titlePosition", "size", "color", "disabled", "checked"], outputs: ["change"] }, { kind: "component", type: FwCheckboxComponent, selector: "fw-checkbox", inputs: ["name", "disabled", "size", "color", "title", "focused"
|
|
3025
|
+
}], ngImport: i0, template: "<div class=\"heading-area\">\n <ng-content select=\"fw-avatar\"></ng-content>\n <div>\n <h4 class=\"vision-h4 section-heading\">{{ title }}\n <span *ngIf=\"status\" class=\"status\">{{ status.toUpperCase() }}</span>\n <ng-content select=\"fw-icon\"></ng-content>\n </h4>\n <p class=\"vision-p3\" *ngIf=\"description\">{{ description }}</p>\n </div>\n</div>\n<div class=\"input-content\">\n <fw-switch *ngIf=\"inputVariant==='switch'\" [checked]=\"checked\" [disabled]=\"disabled\" color=\"primary\"></fw-switch>\n <fw-checkbox\n *ngIf=\"inputVariant==='checkbox'\" [checked]=\"checked\" [disabled]=\"disabled\" color=\"primary\"></fw-checkbox>\n</div>\n", styles: [":host{display:flex;flex:1;justify-content:space-between;align-items:center;gap:16px;border:1px var(--separations-base) solid;padding:16px;border-radius:8px;cursor:pointer}:host:hover{border:1px solid var(--primary-border);background:var(--primary-hover)}:host.checked{border:1px solid var(--primary-border);background:var(--primary-focus)}:host.position-start{flex-direction:row-reverse}:host .heading-area{display:flex;align-items:center;gap:16px;flex:1}:host .heading-area h4{color:var(--typography-base);margin:0;display:flex;align-items:center;gap:5px}:host .heading-area h4 .status{color:var(--primary-base)}:host .heading-area p{color:var(--typography-muted);margin:0;line-height:140%;display:flex;align-items:center;gap:3px}:host .heading-area p a{color:var(--typography-muted)}:host .heading-area fw-icon.heading-icon{box-sizing:border-box;color:var(--primary-base);width:44px;height:44px;font-size:32px;text-align:center;justify-content:center;padding:6px}:host .input-content fw-switch{margin:0 8px 0 -8px;width:36px;display:block}:host .input-content fw-checkbox{margin:0}:host.disabled{border:1px solid var(--separations-base);background:none;opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwSwitchComponent, selector: "fw-switch", inputs: ["name", "title", "titlePosition", "size", "color", "disabled", "checked"], outputs: ["change"] }, { kind: "component", type: FwCheckboxComponent, selector: "fw-checkbox", inputs: ["value", "checked", "name", "disabled", "size", "color", "title", "focused"], outputs: ["checkedChange", "change"] }] }); }
|
|
2901
3026
|
}
|
|
2902
3027
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FwContainedInputComponent, decorators: [{
|
|
2903
3028
|
type: Component,
|
|
@@ -4506,7 +4631,7 @@ class FwMenuItemComponent {
|
|
|
4506
4631
|
}
|
|
4507
4632
|
;
|
|
4508
4633
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FwMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4509
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: FwMenuItemComponent, isStandalone: true, selector: "fw-menu-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: false, isRequired: false, transformFunction: null }, checkboxColor: { classPropertyName: "checkboxColor", publicName: "checkboxColor", isSignal: false, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: false, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: false, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: false, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: false, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: false, isRequired: false, transformFunction: null }, subItemsOpen: { classPropertyName: "subItemsOpen", publicName: "subItemsOpen", isSignal: false, isRequired: false, transformFunction: null }, mouseEnterHandler: { classPropertyName: "mouseEnterHandler", publicName: "mouseEnterHandler", isSignal: true, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { mouseEnterHandler: "mouseEnterHandlerChange", click: "click", focused: "focusedChange" }, host: { listeners: { "mouseenter": "onMouseEnter($event)" }, properties: { "class.focused": "focused()", "hidden": "this.hidden", "class.collapsed": "this.collapsed", "class.selected": "this.selected", "attr.title": "this.attrTitle" } }, queries: [{ propertyName: "subItems", predicate: FwMenuSubItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div (click)=\"handleClick($event)\">\n <div\n [ngClass]=\"['menu-item', 'size-'+size, disabled?'disabled':'']\"\n [class.disabled]=\"disabled\">\n @if (showCheckbox && multiSelect) {\n <div class=\"item-checkbox\">\n <fw-checkbox\n [disabled]=\"disabled\"\n [color]=\"checkboxColor\"\n [checked]=\"selected\">\n </fw-checkbox>\n </div>\n }\n @if (showCheckbox && !multiSelect) {\n <div class=\"item-radiobutton\">\n <fw-radio-button\n [value]=\"value\"\n [color]=\"checkboxColor\"\n [disabled]=\"disabled\"\n [checked]=\"selected\">\n </fw-radio-button>\n </div>\n }\n @if (icon) {\n <fw-icon [color]=\"iconColor\" class=\"menu-icon {{iconColor}}\">{{ icon }}</fw-icon>\n }\n <ng-content select=\"fw-avatar\"></ng-content>\n @if (title) {\n <div class=\"menu-text\">\n <h4 class=\"vision-h4\">{{ title }}</h4>\n @if (description) {\n <p class=\"vision-p4 description\">{{ description }}</p>\n }\n </div>\n }\n <div class=\"key-text vision-p2\">\n <ng-content select=\"p\"></ng-content>\n <ng-content select=\"fw-badge\"></ng-content>\n <ng-content select=\"fw-icon\"></ng-content>\n <ng-content select=\"fw-icon-button\"></ng-content>\n @if (subItems.length > 0) {\n <fw-icon-button\n [size]=\"'small'\"\n [icon]=\"subItemsOpen?'chevron-up':'chevron-down'\"\n (click)=\"toggleSubItemsView()\">\n </fw-icon-button>\n }\n </div>\n </div>\n</div>\n<div class=\"item-subitems\">\n <ng-content select=\"fw-menu-sub-item\"></ng-content>\n</div>\n", styles: [":host-context(fw-menu-item-group) div.menu-item{padding-left:16px}:host{position:relative;display:flex;flex-direction:column;scroll-margin:4px}:host[hidden]{display:none}:host>div{display:flex;flex:1;text-decoration:none;max-width:100%}:host h4{text-overflow:ellipsis}:host:hover:not(.selected) .menu-item:not(.disabled),:host.focused .menu-item:not(.disabled){background-color:var(--slate-hover);cursor:pointer}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-icon,:host.focused .menu-item:not(.disabled) .menu-icon{color:var(--primary-base)}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-text h4,:host.focused .menu-item:not(.disabled) .menu-text h4{color:var(--typography-base)}:host.selected .menu-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .menu-item .menu-icon{color:var(--primary-base)}:host.selected .menu-item .menu-text h4{color:var(--typography-base)}:host.collapsed .menu-item{container-name:menuitem;container-type:size}:host .menu-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px;border-radius:4px;color:var(--typography-muted);min-height:40px;width:stretch}:host .menu-item .item-checkbox:empty{display:none}:host .menu-item .item-radiobutton{padding:0}:host .menu-item .item-radiobutton:empty{display:none}:host .menu-item .menu-icon{font-size:18px;min-width:18px;width:18px;white-space:nowrap}:host .menu-item .menu-text{flex:1;overflow:hidden;padding:2px 0}:host .menu-item .menu-text h4{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .menu-item .menu-text p{margin:0}:host .menu-item .menu-text p.description{color:var(--typography-light)}:host .menu-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .menu-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important;width:22px!important}:host .menu-item.size-compact{min-height:32px}:host .menu-item.size-compact .menu-text .description{display:none}:host .menu-item.disabled{opacity:.4;cursor:not-allowed}:host .item-subitems{display:flex;flex-direction:column}@container menuitem (max-width: 60px){.menu-item{gap:0}.menu-item .menu-text{opacity:0}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FwCheckboxComponent, selector: "fw-checkbox", inputs: ["name", "disabled", "size", "color", "title", "focused"
|
|
4634
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: FwMenuItemComponent, isStandalone: true, selector: "fw-menu-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: false, isRequired: false, transformFunction: null }, checkboxColor: { classPropertyName: "checkboxColor", publicName: "checkboxColor", isSignal: false, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: false, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: false, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: false, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: false, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: false, isRequired: false, transformFunction: null }, subItemsOpen: { classPropertyName: "subItemsOpen", publicName: "subItemsOpen", isSignal: false, isRequired: false, transformFunction: null }, mouseEnterHandler: { classPropertyName: "mouseEnterHandler", publicName: "mouseEnterHandler", isSignal: true, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { mouseEnterHandler: "mouseEnterHandlerChange", click: "click", focused: "focusedChange" }, host: { listeners: { "mouseenter": "onMouseEnter($event)" }, properties: { "class.focused": "focused()", "hidden": "this.hidden", "class.collapsed": "this.collapsed", "class.selected": "this.selected", "attr.title": "this.attrTitle" } }, queries: [{ propertyName: "subItems", predicate: FwMenuSubItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div (click)=\"handleClick($event)\">\n <div\n [ngClass]=\"['menu-item', 'size-'+size, disabled?'disabled':'']\"\n [class.disabled]=\"disabled\">\n @if (showCheckbox && multiSelect) {\n <div class=\"item-checkbox\">\n <fw-checkbox\n [disabled]=\"disabled\"\n [color]=\"checkboxColor\"\n [checked]=\"selected\">\n </fw-checkbox>\n </div>\n }\n @if (showCheckbox && !multiSelect) {\n <div class=\"item-radiobutton\">\n <fw-radio-button\n [value]=\"value\"\n [color]=\"checkboxColor\"\n [disabled]=\"disabled\"\n [checked]=\"selected\">\n </fw-radio-button>\n </div>\n }\n @if (icon) {\n <fw-icon [color]=\"iconColor\" class=\"menu-icon {{iconColor}}\">{{ icon }}</fw-icon>\n }\n <ng-content select=\"fw-avatar\"></ng-content>\n @if (title) {\n <div class=\"menu-text\">\n <h4 class=\"vision-h4\">{{ title }}</h4>\n @if (description) {\n <p class=\"vision-p4 description\">{{ description }}</p>\n }\n </div>\n }\n <div class=\"key-text vision-p2\">\n <ng-content select=\"p\"></ng-content>\n <ng-content select=\"fw-badge\"></ng-content>\n <ng-content select=\"fw-icon\"></ng-content>\n <ng-content select=\"fw-icon-button\"></ng-content>\n @if (subItems.length > 0) {\n <fw-icon-button\n [size]=\"'small'\"\n [icon]=\"subItemsOpen?'chevron-up':'chevron-down'\"\n (click)=\"toggleSubItemsView()\">\n </fw-icon-button>\n }\n </div>\n </div>\n</div>\n<div class=\"item-subitems\">\n <ng-content select=\"fw-menu-sub-item\"></ng-content>\n</div>\n", styles: [":host-context(fw-menu-item-group) div.menu-item{padding-left:16px}:host{position:relative;display:flex;flex-direction:column;scroll-margin:4px}:host[hidden]{display:none}:host>div{display:flex;flex:1;text-decoration:none;max-width:100%}:host h4{text-overflow:ellipsis}:host:hover:not(.selected) .menu-item:not(.disabled),:host.focused .menu-item:not(.disabled){background-color:var(--slate-hover);cursor:pointer}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-icon,:host.focused .menu-item:not(.disabled) .menu-icon{color:var(--primary-base)}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-text h4,:host.focused .menu-item:not(.disabled) .menu-text h4{color:var(--typography-base)}:host.selected .menu-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .menu-item .menu-icon{color:var(--primary-base)}:host.selected .menu-item .menu-text h4{color:var(--typography-base)}:host.collapsed .menu-item{container-name:menuitem;container-type:size}:host .menu-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px;border-radius:4px;color:var(--typography-muted);min-height:40px;width:stretch}:host .menu-item .item-checkbox:empty{display:none}:host .menu-item .item-radiobutton{padding:0}:host .menu-item .item-radiobutton:empty{display:none}:host .menu-item .menu-icon{font-size:18px;min-width:18px;width:18px;white-space:nowrap}:host .menu-item .menu-text{flex:1;overflow:hidden;padding:2px 0}:host .menu-item .menu-text h4{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .menu-item .menu-text p{margin:0}:host .menu-item .menu-text p.description{color:var(--typography-light)}:host .menu-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .menu-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important;width:22px!important}:host .menu-item.size-compact{min-height:32px}:host .menu-item.size-compact .menu-text .description{display:none}:host .menu-item.disabled{opacity:.4;cursor:not-allowed}:host .item-subitems{display:flex;flex-direction:column}@container menuitem (max-width: 60px){.menu-item{gap:0}.menu-item .menu-text{opacity:0}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FwCheckboxComponent, selector: "fw-checkbox", inputs: ["value", "checked", "name", "disabled", "size", "color", "title", "focused"], outputs: ["checkedChange", "change"] }, { kind: "component", type: FwRadioComponent, selector: "fw-radio-button", inputs: ["value", "checked", "group", "disabled", "size", "color", "title", "focused"], outputs: ["checkedChange", "change"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected", "border"] }] }); }
|
|
4510
4635
|
}
|
|
4511
4636
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FwMenuItemComponent, decorators: [{
|
|
4512
4637
|
type: Component,
|
|
@@ -4930,8 +5055,11 @@ class FwTextInputComponent {
|
|
|
4930
5055
|
this.rightIconAction.emit();
|
|
4931
5056
|
}
|
|
4932
5057
|
focus() {
|
|
4933
|
-
//
|
|
4934
|
-
|
|
5058
|
+
// the timeout smooths over some angular timing difficulties
|
|
5059
|
+
setTimeout(() => {
|
|
5060
|
+
// eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
|
|
5061
|
+
this._inputRef?.nativeElement?.focus();
|
|
5062
|
+
});
|
|
4935
5063
|
}
|
|
4936
5064
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FwTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4937
5065
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: FwTextInputComponent, isStandalone: true, selector: "fw-text-input", inputs: { disabled: "disabled", useActionableIcons: "useActionableIcons", leftIcon: "leftIcon", rightIcon: "rightIcon", prefix: "prefix", context: "context", helperText: "helperText", errorText: "errorText", errorInIconTooltip: "errorInIconTooltip", placeholder: "placeholder", readOnly: "readOnly", size: "size", type: "type", maxLength: "maxLength", autofocus: "autofocus", autocomplete: "autocomplete", value: "value", error: "error", width: "width" }, outputs: { leftIconAction: "leftIconAction", rightIconAction: "rightIconAction" }, host: { properties: { "class.errored": "this.error", "style.width": "this.width" } }, providers: [{
|
|
@@ -10138,7 +10266,7 @@ class FwTypeaheadComponent {
|
|
|
10138
10266
|
handleInput(event) {
|
|
10139
10267
|
const rawInputValue = event.target.value;
|
|
10140
10268
|
this.searchValue.set(rawInputValue);
|
|
10141
|
-
if (this.trigger().
|
|
10269
|
+
if (!this.trigger().isOpen() && rawInputValue) {
|
|
10142
10270
|
this.trigger().open();
|
|
10143
10271
|
}
|
|
10144
10272
|
}
|
|
@@ -10150,10 +10278,7 @@ class FwTypeaheadComponent {
|
|
|
10150
10278
|
// eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
|
|
10151
10279
|
this.changeDetector.detectChanges();
|
|
10152
10280
|
}
|
|
10153
|
-
focusInput(
|
|
10154
|
-
e?.preventDefault();
|
|
10155
|
-
e?.stopPropagation();
|
|
10156
|
-
e?.stopImmediatePropagation();
|
|
10281
|
+
focusInput() {
|
|
10157
10282
|
// eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
|
|
10158
10283
|
this.inputRef().nativeElement.focus();
|
|
10159
10284
|
}
|
|
@@ -10209,7 +10334,7 @@ class FwTypeaheadComponent {
|
|
|
10209
10334
|
useExisting: forwardRef(() => FwTypeaheadComponent),
|
|
10210
10335
|
multi: true,
|
|
10211
10336
|
},
|
|
10212
|
-
], 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
|
|
10337
|
+
], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true, isSignal: true }, { propertyName: "displayedOptions", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"full-container\">\n <div\n class=\"input-container\"\n [class.disabled]=\"disabled()\"\n [style.max-height]=\"maxHeight()\"\n [cdkMenuTriggerFor]=\"menuContent\"\n fwMenuRegister\n #inputContainer>\n @if (selectType() === 'multiple') {\n <fw-chip-list class=\"chips\" [disableOverflow]=\"!!maxHeight()\">\n @for(val of value(); track val) {\n <fw-chip\n color=\"primary\"\n [showClose]=\"true\"\n [title]=\"val\"\n [selectable]=\"false\"\n (close)=\"closeChip(val)\"\n />\n }\n </fw-chip-list>\n }\n <input\n data-testid=\"typeahead-input\"\n [class.highlight-placeholder]=\"highlightPlaceholder()\"\n [placeholder]=\"displayedPlaceholder()\"\n [disabled]=\"disabled()\"\n (input)=\"handleInput($event)\"\n (keydown)=\"handleKey($event)\"\n (blur)=\"onFocusLoss($event)\"\n #input\n type=\"text\"\n />\n @if(loading()) {\n <fw-progress-spinner size=\"small\"/>\n }\n @if(selectType() === 'single' && value().length === 1) {\n <fw-icon class=\"clear-icon\" (click)=\"clearValue()\">close</fw-icon>\n }\n </div>\n</div>\n<ng-template #menuContent>\n <fw-menu-container\n [maxHeight]=\"maxOptionsHeight()\"\n [minHeight]=\"minOptionsHeight()\"\n [width]=\"optionsWidth() || inputContainer.offsetWidth - 2 + 'px'\"\n >\n <fw-menu (mousedown)=\"$event.preventDefault()\">\n @if(loading() && !displayNewOption()) {\n <fw-menu-item title=\"Searching...\" [disabled]=\"true\"/>\n } @else if(!loading()) {\n @for (option of filteredOptions(); track option) {\n <fw-menu-item\n (click)=\"handleOptionClick(option)\"\n (mouseenter)=\"setFocusByValue(option)\"\n [title]=\"option\"\n [focused]=\"focusedOption() === option\"\n [value]=\"option\"\n />\n }\n @empty {\n @if (!displayNewOption()) {\n <fw-menu-item title=\"No tag suggestions\" [disabled]=\"true\"/>\n }\n }\n }\n @if(displayNewOption()) {\n <fw-menu-item\n (click)=\"handleOptionClick(searchValue())\"\n (mouseenter)=\"setFocusByValue(searchValue())\"\n [title]=\"searchValue()\"\n [value]=\"searchValue()\"\n [focused]=\"focusedOption() === searchValue()\">\n <p class=\"new-tag\">New</p>\n </fw-menu-item>\n }\n </fw-menu>\n </fw-menu-container>\n</ng-template>\n", styles: [".new-tag{margin:0;color:var(--typography-light)}:host.disabled{cursor:not-allowed}:host.disabled fw-icon{cursor:not-allowed!important}:host{display:flex;flex-direction:column;width:100%;line-height:21px}:host .chips,:host fw-progress-spinner{margin:-4px 0}:host .full-container{display:flex;flex-direction:column;width:100%}:host .highlight-placeholder::placeholder{color:var(--typography-base)!important}:host .clear-icon{cursor:pointer}:host .input-container{width:100%;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;row-gap:8px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif;flex-wrap:wrap;overflow-y:auto}:host .input-container:focus-within{border:1px solid var(--primary-base)}:host .input-container input{min-width:80px;font-size:14px;flex:1 1 80px;color:var(--typography-base);background:var(--page-light);border:none}:host .input-container input:focus{outline:none;border:none}:host .input-container input::placeholder{color:var(--typography-light)}:host .input-container .context{color:var(--typography-light)}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}.disabled{opacity:.4;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: FwTextInputModule }, { kind: "ngmodule", type: FwChipModule }, { kind: "component", type: FwChipComponent, selector: "fw-chip", inputs: ["maxWidth", "value", "variant", "color", "icon", "title", "description", "showClose", "disabled", "selected", "textWrap", "selectable"], outputs: ["close", "select"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FwMenuModule }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value"], outputs: ["change"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container, fw-menu-filter", inputs: ["width", "maxHeight", "minHeight", "border", "shadow", "showFilter", "filterText", "focusFilterOnMount", "offset", "emptyText", "filterFn", "additionalMenuItems", "additionalGroups", "additionalSeparators", "keyHandler"], outputs: ["filteredMenuItemChange", "filterChanged"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["mouseEnterHandlerChange", "click", "focusedChange"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i5.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }, { kind: "ngmodule", type: FwProgressModule }, { kind: "component", type: FwProgressSpinnerComponent, selector: "fw-progress-spinner", inputs: ["mode", "size", "color", "showValue", "value"] }, { kind: "component", type: FwChipListComponent, selector: "fw-chip-list", inputs: ["resizeDebounceMs", "disableOverflow"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10213
10338
|
}
|
|
10214
10339
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FwTypeaheadComponent, decorators: [{
|
|
10215
10340
|
type: Component,
|
|
@@ -10231,7 +10356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
|
|
|
10231
10356
|
},
|
|
10232
10357
|
], host: {
|
|
10233
10358
|
'[class.fw-touched]': 'touched()',
|
|
10234
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"full-container\">\n <div\n
|
|
10359
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"full-container\">\n <div\n class=\"input-container\"\n [class.disabled]=\"disabled()\"\n [style.max-height]=\"maxHeight()\"\n [cdkMenuTriggerFor]=\"menuContent\"\n fwMenuRegister\n #inputContainer>\n @if (selectType() === 'multiple') {\n <fw-chip-list class=\"chips\" [disableOverflow]=\"!!maxHeight()\">\n @for(val of value(); track val) {\n <fw-chip\n color=\"primary\"\n [showClose]=\"true\"\n [title]=\"val\"\n [selectable]=\"false\"\n (close)=\"closeChip(val)\"\n />\n }\n </fw-chip-list>\n }\n <input\n data-testid=\"typeahead-input\"\n [class.highlight-placeholder]=\"highlightPlaceholder()\"\n [placeholder]=\"displayedPlaceholder()\"\n [disabled]=\"disabled()\"\n (input)=\"handleInput($event)\"\n (keydown)=\"handleKey($event)\"\n (blur)=\"onFocusLoss($event)\"\n #input\n type=\"text\"\n />\n @if(loading()) {\n <fw-progress-spinner size=\"small\"/>\n }\n @if(selectType() === 'single' && value().length === 1) {\n <fw-icon class=\"clear-icon\" (click)=\"clearValue()\">close</fw-icon>\n }\n </div>\n</div>\n<ng-template #menuContent>\n <fw-menu-container\n [maxHeight]=\"maxOptionsHeight()\"\n [minHeight]=\"minOptionsHeight()\"\n [width]=\"optionsWidth() || inputContainer.offsetWidth - 2 + 'px'\"\n >\n <fw-menu (mousedown)=\"$event.preventDefault()\">\n @if(loading() && !displayNewOption()) {\n <fw-menu-item title=\"Searching...\" [disabled]=\"true\"/>\n } @else if(!loading()) {\n @for (option of filteredOptions(); track option) {\n <fw-menu-item\n (click)=\"handleOptionClick(option)\"\n (mouseenter)=\"setFocusByValue(option)\"\n [title]=\"option\"\n [focused]=\"focusedOption() === option\"\n [value]=\"option\"\n />\n }\n @empty {\n @if (!displayNewOption()) {\n <fw-menu-item title=\"No tag suggestions\" [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"] }]
|
|
10235
10360
|
}], propDecorators: { outsideClick: [{
|
|
10236
10361
|
type: HostListener,
|
|
10237
10362
|
args: ['document:click']
|
|
@@ -10307,5 +10432,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
|
|
|
10307
10432
|
* Generated bundle index. Do not edit.
|
|
10308
10433
|
*/
|
|
10309
10434
|
|
|
10310
|
-
export { DialogWidth, FwAlertComponent, FwAlertModule, FwAppIconComponent, FwAppIconModule, FwAvatarComponent, FwAvatarListComponent, FwAvatarModule, FwBackButtonComponent, FwBadgeComponent, FwBadgeModule, FwBreadcrumbsComponent, FwBreadcrumbsModule, FwButtonComponent, FwButtonDangerDirective, FwButtonDirective, FwButtonGroupComponent, FwButtonGroupModule, FwButtonModule, FwButtonPrimaryDirective, FwButtonSecondaryDirective, FwButtonSuccessDirective, FwButtonToggleComponent, FwButtonToggleItemComponent, FwButtonToggleModule, FwCardAttributeComponent, FwCardAuthorComponent, FwCardComponent, FwCardContentComponent, FwCardFooterComponent, FwCardHeaderComponent, FwCardModule, FwCell, FwCellDef, FwCheckboxComponent, FwCheckboxModule, FwChipComponent, FwChipModule, FwColumnDef, FwContainedInputComponent, FwContainedInputModule, FwCrumbComponent, FwDateInputComponent, FwDateInputModule, FwDialogActionsComponent, FwDialogComponent, FwDialogConfirmComponent, FwDialogContentComponent, FwDialogHeaderComponent, FwDialogService, FwDialogSimpleComponent, FwDialogsModule, FwFooterCell, FwFooterCellDef, FwFooterRow, FwFooterRowDef, FwFormHeadingComponent, FwFormHeadingModule, FwGridComponent, FwGridItemComponent, FwHeaderCell, FwHeaderCellDef, FwHeaderRow, FwHeaderRowDef, FwIconButtonComponent, FwIconButtonModule, FwIconComponent, FwIconModule, FwLayoutContextComponent, FwLayoutGroupComponent, FwLayoutPanelComponent, FwLayoutSidebarComponent, FwLayoutToolbarComponent, FwLayoutsModule, FwMenuCloseTriggersDirective, FwMenuComponent, FwMenuContainerComponent, FwMenuHeaderComponent, FwMenuItemComponent, FwMenuItemGroupComponent, FwMenuModule, FwMenuSeparatorComponent, FwMenuSubItemComponent, FwMultiSelectMenuComponent, FwNavbarComponent, FwNavbarHeaderComponent, FwNavbarItemComponent, FwNavbarModule, FwNavbarSubItemComponent, FwNoDataRow, FwNumberInputComponent, FwNumberInputModule, FwPaginatorAdvancedComponent, FwPaginatorComponent, FwPaginatorModule, FwPhoneInputComponent, FwPhoneInputModule, FwPopoverComponent, FwPopoverModule, FwPopoverPanelComponent, FwProgressBarComponent, FwProgressModule, FwProgressSpinnerComponent, FwRadioComponent, FwRadioGroupComponent, FwRadioModule, FwRow, FwRowDef, FwSectionHeadingComponent, FwSectionHeadingModule, FwSelectMenuComponent, FwSelectMenuModule, FwSnackbarComponent, FwSnackbarContainerComponent, FwSnackbarModule, FwSnackbarService, FwStepComponent, FwStepDecoratorComponent, FwStepperComponent, FwStepperModule, FwSubsectionHeadingComponent, FwSwitchComponent, FwSwitchModule, FwTabComponent, FwTabPanelComponent, FwTableComponent, FwTableDenseComponent, FwTableModule, FwTabsComponent, FwTabsModule, FwTagComponent, FwTagModule, FwTextAreaInputComponent, FwTextAreaInputModule, FwTextComponent, FwTextInputComponent, FwTextInputModule, FwTimeZoneSelectComponent, FwTooltipComponent, FwTooltipDirective, FwTooltipModule, FwTooltipPanelComponent, FwTypeaheadComponent, FwValidators, FwWrappedInputComponent, FwWrappedInputModule, LayoutWidth, MenuManagerService, MenuRegisterDirective, MinimalTranslationService, NoopValueAccessorDirective, TranslationService, allIcons, genMessageId, notBeforeDate, notFutureDate };
|
|
10435
|
+
export { DialogWidth, FwAlertComponent, FwAlertModule, FwAppIconComponent, FwAppIconModule, FwAvatarComponent, FwAvatarListComponent, FwAvatarModule, FwBackButtonComponent, FwBadgeComponent, FwBadgeModule, FwBreadcrumbsComponent, FwBreadcrumbsModule, FwButtonComponent, FwButtonDangerDirective, FwButtonDirective, FwButtonGroupComponent, FwButtonGroupModule, FwButtonModule, FwButtonPrimaryDirective, FwButtonSecondaryDirective, FwButtonSuccessDirective, FwButtonToggleComponent, FwButtonToggleItemComponent, FwButtonToggleModule, FwCardAttributeComponent, FwCardAuthorComponent, FwCardComponent, FwCardContentComponent, FwCardFooterComponent, FwCardHeaderComponent, FwCardModule, FwCell, FwCellDef, FwCheckboxComponent, FwCheckboxGroupComponent, FwCheckboxModule, FwChipComponent, FwChipModule, FwColumnDef, FwContainedInputComponent, FwContainedInputModule, FwCrumbComponent, FwDateInputComponent, FwDateInputModule, FwDialogActionsComponent, FwDialogComponent, FwDialogConfirmComponent, FwDialogContentComponent, FwDialogHeaderComponent, FwDialogService, FwDialogSimpleComponent, FwDialogsModule, FwFooterCell, FwFooterCellDef, FwFooterRow, FwFooterRowDef, FwFormHeadingComponent, FwFormHeadingModule, FwGridComponent, FwGridItemComponent, FwHeaderCell, FwHeaderCellDef, FwHeaderRow, FwHeaderRowDef, FwIconButtonComponent, FwIconButtonModule, FwIconComponent, FwIconModule, FwLayoutContextComponent, FwLayoutGroupComponent, FwLayoutPanelComponent, FwLayoutSidebarComponent, FwLayoutToolbarComponent, FwLayoutsModule, FwMenuCloseTriggersDirective, FwMenuComponent, FwMenuContainerComponent, FwMenuHeaderComponent, FwMenuItemComponent, FwMenuItemGroupComponent, FwMenuModule, FwMenuSeparatorComponent, FwMenuSubItemComponent, FwMultiSelectMenuComponent, FwNavbarComponent, FwNavbarHeaderComponent, FwNavbarItemComponent, FwNavbarModule, FwNavbarSubItemComponent, FwNoDataRow, FwNumberInputComponent, FwNumberInputModule, FwPaginatorAdvancedComponent, FwPaginatorComponent, FwPaginatorModule, FwPhoneInputComponent, FwPhoneInputModule, FwPopoverComponent, FwPopoverModule, FwPopoverPanelComponent, FwProgressBarComponent, FwProgressModule, FwProgressSpinnerComponent, FwRadioComponent, FwRadioGroupComponent, FwRadioModule, FwRow, FwRowDef, FwSectionHeadingComponent, FwSectionHeadingModule, FwSelectMenuComponent, FwSelectMenuModule, FwSnackbarComponent, FwSnackbarContainerComponent, FwSnackbarModule, FwSnackbarService, FwStepComponent, FwStepDecoratorComponent, FwStepperComponent, FwStepperModule, FwSubsectionHeadingComponent, FwSwitchComponent, FwSwitchModule, FwTabComponent, FwTabPanelComponent, FwTableComponent, FwTableDenseComponent, FwTableModule, FwTabsComponent, FwTabsModule, FwTagComponent, FwTagModule, FwTextAreaInputComponent, FwTextAreaInputModule, FwTextComponent, FwTextInputComponent, FwTextInputModule, FwTimeZoneSelectComponent, FwTooltipComponent, FwTooltipDirective, FwTooltipModule, FwTooltipPanelComponent, FwTypeaheadComponent, FwValidators, FwWrappedInputComponent, FwWrappedInputModule, LayoutWidth, MenuManagerService, MenuRegisterDirective, MinimalTranslationService, NoopValueAccessorDirective, TranslationService, allIcons, genMessageId, notBeforeDate, notFutureDate };
|
|
10311
10436
|
//# sourceMappingURL=flywheel-io-vision.mjs.map
|