@flywheel-io/vision 2.8.0 → 2.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/button-toggle/button-toggle-item/button-toggle-item.component.d.ts +1 -1
- package/components/chip-list/chip-list.component.d.ts +2 -1
- package/components/radio/radio-group.component.d.ts +9 -11
- package/components/radio/radio.component.d.ts +3 -3
- package/components/typeahead/typeahead.component.d.ts +3 -1
- package/esm2022/components/button-toggle/button-toggle-item/button-toggle-item.component.mjs +6 -4
- package/esm2022/components/chip/chip.component.mjs +2 -2
- package/esm2022/components/chip-list/chip-list.component.mjs +14 -6
- package/esm2022/components/icon/icon.component.mjs +2 -2
- package/esm2022/components/menu/menu-item/menu-item.component.mjs +1 -1
- package/esm2022/components/radio/radio-group.component.mjs +50 -50
- package/esm2022/components/radio/radio.component.mjs +7 -10
- package/esm2022/components/typeahead/typeahead.component.mjs +6 -4
- package/fesm2022/flywheel-io-vision.mjs +81 -72
- package/fesm2022/flywheel-io-vision.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { HostBinding, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, NgModule, input, model, computed, ViewEncapsulation, HostListener, signal, effect, inject, ElementRef, ViewContainerRef, Directive, contentChildren, viewChild, ChangeDetectorRef, ContentChildren, ViewChild, forwardRef, Optional, Inject, SkipSelf, Injectable, Pipe, ContentChild, output, Host, ViewChildren, Self, TemplateRef, viewChildren } from '@angular/core';
|
|
2
|
+
import { HostBinding, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, NgModule, input, model, computed, ViewEncapsulation, HostListener, signal, effect, inject, ElementRef, ViewContainerRef, Directive, contentChildren, viewChild, ChangeDetectorRef, ContentChildren, ViewChild, forwardRef, Optional, Inject, SkipSelf, Injectable, Pipe, ContentChild, DestroyRef, output, Host, ViewChildren, Self, TemplateRef, viewChildren } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule, NgClass } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/platform-browser';
|
|
6
|
+
import { DomSanitizer } from '@angular/platform-browser';
|
|
6
7
|
import { BehaviorSubject, debounce, timer, distinctUntilChanged, of, Subscription, min, combineLatest, tap, switchMap, map } from 'rxjs';
|
|
7
8
|
import * as i1$2 from '@angular/cdk/overlay';
|
|
8
9
|
import { OverlayModule, Overlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
|
|
@@ -19,11 +20,11 @@ import { parseISO, isBefore, isSameDay, isAfter } from 'date-fns';
|
|
|
19
20
|
import { isValidPhoneNumber, getExampleNumber, parsePhoneNumberFromString, AsYouType } from 'libphonenumber-js';
|
|
20
21
|
import * as i1$4 from '@angular/cdk/menu';
|
|
21
22
|
import { CdkMenuTrigger, CdkMenuModule } from '@angular/cdk/menu';
|
|
23
|
+
import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
|
|
22
24
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
23
25
|
import { _DisposeViewRepeaterStrategy, _VIEW_REPEATER_STRATEGY } from '@angular/cdk/collections';
|
|
24
26
|
import * as i2 from '@angular/cdk/text-field';
|
|
25
27
|
import { CdkTextareaAutosize, TextFieldModule } from '@angular/cdk/text-field';
|
|
26
|
-
import { toObservable, toSignal } from '@angular/core/rxjs-interop';
|
|
27
28
|
|
|
28
29
|
const namedSizeToPxMap = {
|
|
29
30
|
large: 28,
|
|
@@ -76,7 +77,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
76
77
|
return namedSizeToPxMap[input] || parseInt(input) || 24;
|
|
77
78
|
}
|
|
78
79
|
return input;
|
|
79
|
-
}
|
|
80
|
+
},
|
|
80
81
|
}]
|
|
81
82
|
}], color: [{
|
|
82
83
|
type: Input
|
|
@@ -1928,14 +1929,16 @@ class FwButtonToggleItemComponent {
|
|
|
1928
1929
|
this.click = new EventEmitter();
|
|
1929
1930
|
}
|
|
1930
1931
|
handleClick() {
|
|
1931
|
-
|
|
1932
|
+
if (this.value) {
|
|
1933
|
+
this.click.emit(this.value);
|
|
1934
|
+
}
|
|
1932
1935
|
}
|
|
1933
1936
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwButtonToggleItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1934
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwButtonToggleItemComponent, selector: "fw-button-toggle-item", inputs: { title: "title", icon: "icon", selectedIcon: "selectedIcon", value: "value", selected: "selected", disabled: "disabled", size: "size", color: "color", selectedColor: "selectedColor", selectedStyle: "selectedStyle" }, outputs: { click: "click" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<fw-button\n [
|
|
1937
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwButtonToggleItemComponent, selector: "fw-button-toggle-item", inputs: { title: "title", icon: "icon", selectedIcon: "selectedIcon", value: "value", selected: "selected", disabled: "disabled", size: "size", color: "color", selectedColor: "selectedColor", selectedStyle: "selectedStyle" }, outputs: { click: "click" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<fw-button\n [leftIcon]=\"(selected && selectedIcon) ? selectedIcon : icon\"\n [variant]=\"(selected && selectedStyle==='background') ? 'solid':'outline'\"\n [color]=\"selected ? selectedColor:color\"\n [size]=\"size\"\n [disabled]=\"disabled\"\n (click)=\"handleClick()\">\n {{ title }}\n</fw-button>\n", dependencies: [{ kind: "component", type: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "type", "disabled", "fullWidth", "leftIcon", "rightIcon"] }] }); }
|
|
1935
1938
|
}
|
|
1936
1939
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwButtonToggleItemComponent, decorators: [{
|
|
1937
1940
|
type: Component,
|
|
1938
|
-
args: [{ selector: 'fw-button-toggle-item', template: "<fw-button\n [
|
|
1941
|
+
args: [{ selector: 'fw-button-toggle-item', template: "<fw-button\n [leftIcon]=\"(selected && selectedIcon) ? selectedIcon : icon\"\n [variant]=\"(selected && selectedStyle==='background') ? 'solid':'outline'\"\n [color]=\"selected ? selectedColor:color\"\n [size]=\"size\"\n [disabled]=\"disabled\"\n (click)=\"handleClick()\">\n {{ title }}\n</fw-button>\n" }]
|
|
1939
1942
|
}], ctorParameters: () => [], propDecorators: { title: [{
|
|
1940
1943
|
type: Input
|
|
1941
1944
|
}], icon: [{
|
|
@@ -2547,11 +2550,11 @@ class FwChipComponent {
|
|
|
2547
2550
|
}
|
|
2548
2551
|
}
|
|
2549
2552
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2550
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FwChipComponent, selector: "fw-chip", inputs: { value: "value", variant: "variant", color: "color", icon: "icon", title: "title", description: "description", showClose: "showClose", disabled: "disabled", selected: "selected", textWrap: "textWrap", selectable: "selectable" }, outputs: { close: "close", select: "select" }, ngImport: i0, template: "<div\n [ngClass]=\"['chip', variant, 'chip-'+color]\" [class.disabled]=\"disabled\" [class.focused]=\"selected\"\n [class.selectable]=\"selectable\" (click)=\"selectable ? select.emit(value) : undefined\">\n\n @if (icon) {\n <fw-icon class=\"chip-icon\">{{ icon }}</fw-icon>\n }\n\n <ng-content select=\"fw-avatar\"></ng-content>\n <ng-content select=\"fw-progress-spinner\"></ng-content>\n @if (title) {\n <div class=\"chip-text-container\">\n <span [class.text-wrap]=\"!textWrap\" class=\"chip-text\">{{ title }}</span>\n\n @if (description) {\n <span class=\"description\">{{ description }}</span>\n }\n </div>\n }\n\n @if (showClose) {\n <div class=\"close-icon\" (click)=\"handleClose($event)\">\n <fw-icon>close</fw-icon>\n </div>\n }\n</div>\n", styles: [":host{min-height:24px;display:inline-flex}.chip{box-sizing:border-box;border-radius:16px;padding:2px 4px;display:inline-flex;min-height:24px;align-items:center;font-family:Inter,sans-serif;font-size:12px;font-style:normal;font-weight:600;line-height:16px;width:100
|
|
2553
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FwChipComponent, selector: "fw-chip", inputs: { value: "value", variant: "variant", color: "color", icon: "icon", title: "title", description: "description", showClose: "showClose", disabled: "disabled", selected: "selected", textWrap: "textWrap", selectable: "selectable" }, outputs: { close: "close", select: "select" }, ngImport: i0, template: "<div\n [ngClass]=\"['chip', variant, 'chip-'+color]\" [class.disabled]=\"disabled\" [class.focused]=\"selected\"\n [class.selectable]=\"selectable\" (click)=\"selectable ? select.emit(value) : undefined\">\n\n @if (icon) {\n <fw-icon class=\"chip-icon\">{{ icon }}</fw-icon>\n }\n\n <ng-content select=\"fw-avatar\"></ng-content>\n <ng-content select=\"fw-progress-spinner\"></ng-content>\n @if (title) {\n <div class=\"chip-text-container\">\n <span [class.text-wrap]=\"!textWrap\" class=\"chip-text\">{{ title }}</span>\n\n @if (description) {\n <span class=\"description\">{{ description }}</span>\n }\n </div>\n }\n\n @if (showClose) {\n <div class=\"close-icon\" (click)=\"handleClose($event)\">\n <fw-icon>close</fw-icon>\n </div>\n }\n</div>\n", styles: [":host{min-height:24px;display:inline-flex}.chip{box-sizing:border-box;border-radius:16px;padding:2px 4px;display:inline-flex;min-height:24px;align-items:center;font-family:Inter,sans-serif;font-size:12px;font-style:normal;font-weight:600;line-height:16px;width:100%;max-width:180px}.chip .chip-icon{align-items:flex-start;font-size:16px;min-width:16px;width:16px}.chip-text{overflow:hidden;text-overflow:ellipsis}.chip-text.text-wrap{white-space:nowrap}.chip-text-container{display:flex;align-items:center;margin:0 6px;min-height:16px;white-space:wrap;width:100%;overflow:hidden}.chip-text-container .description{margin-left:4px;font-weight:400;color:var(--typography-light)}.chip .close-icon{font-size:12px;font-weight:700;cursor:pointer;border-width:1px;border-style:solid;border-radius:16px;min-width:12px;width:12px;height:12px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}.chip .close-icon:hover{color:var(--typography-contrast);border-radius:16px}.chip .close-icon>fw-icon{font-size:12px;min-width:12px;width:12px;height:12px}.chip:not(.selectable){cursor:default}.chip.selectable{cursor:pointer}.chip.enabled.chip-slate{color:var(--slate-base);border:1px solid var(--slate-border)}.chip.enabled.chip-slate .close-icon:hover{background-color:var(--slate-base)}.chip.enabled.chip-primary{color:var(--primary-base);border:1px solid var(--primary-border)}.chip.enabled.chip-primary .close-icon{border-color:var(--primary-base)}.chip.enabled.chip-primary .close-icon:hover{background-color:var(--primary-base)}.chip.enabled.chip-secondary{color:var(--secondary-base);border:1px solid var(--secondary-border)}.chip.enabled.chip-secondary .close-icon{border-color:var(--secondary-base)}.chip.enabled.chip-secondary .close-icon:hover{background-color:var(--secondary-base)}.chip.enabled.chip-orange{color:var(--orange-base);border:1px solid var(--orange-border)}.chip.enabled.chip-orange .close-icon{border-color:var(--orange-base)}.chip.enabled.chip-orange .close-icon:hover{background-color:var(--orange-base)}.chip.enabled.chip-green{color:var(--green-base);border:1px solid var(--green-border)}.chip.enabled.chip-green .close-icon{border-color:var(--green-base)}.chip.enabled.chip-green .close-icon:hover{background-color:var(--green-base)}.chip.enabled.chip-red{color:var(--red-base);border:1px solid var(--red-border)}.chip.enabled.chip-red .close-icon{border-color:var(--red-base)}.chip.enabled.chip-red .close-icon:hover{background-color:var(--red-base)}.chip.hovered.chip-slate,.chip.selectable:not(.focused):hover.chip-slate{color:var(--slate-base)!important;background-color:var(--slate-hover);border:1px solid var(--slate-border)}.chip.hovered.chip-slate .close-icon:hover,.chip.selectable:not(.focused):hover.chip-slate .close-icon:hover{background-color:var(--slate-base)}.chip.hovered.chip-primary,.chip.selectable:not(.focused):hover.chip-primary{color:var(--primary-base)!important;background-color:var(--primary-hover);border:1px solid var(--primary-border)}.chip.hovered.chip-primary .close-icon,.chip.selectable:not(.focused):hover.chip-primary .close-icon{border-color:var(--primary-base)}.chip.hovered.chip-primary .close-icon:hover,.chip.selectable:not(.focused):hover.chip-primary .close-icon:hover{background-color:var(--primary-base)}.chip.hovered.chip-secondary,.chip.selectable:not(.focused):hover.chip-secondary{color:var(--secondary-base)!important;background-color:var(--secondary-hover);border:1px solid var(--secondary-border)}.chip.hovered.chip-secondary .close-icon,.chip.selectable:not(.focused):hover.chip-secondary .close-icon{border-color:var(--secondary-base)}.chip.hovered.chip-secondary .close-icon:hover,.chip.selectable:not(.focused):hover.chip-secondary .close-icon:hover{background-color:var(--secondary-base)}.chip.hovered.chip-orange,.chip.selectable:not(.focused):hover.chip-orange{color:var(--orange-base)!important;background-color:var(--orange-hover);border:1px solid var(--orange-border)}.chip.hovered.chip-orange .close-icon,.chip.selectable:not(.focused):hover.chip-orange .close-icon{border-color:var(--orange-base)}.chip.hovered.chip-orange .close-icon:hover,.chip.selectable:not(.focused):hover.chip-orange .close-icon:hover{background-color:var(--orange-base)}.chip.hovered.chip-green,.chip.selectable:not(.focused):hover.chip-green{color:var(--green-base)!important;background-color:var(--green-hover);border:1px solid var(--green-border)}.chip.hovered.chip-green .close-icon,.chip.selectable:not(.focused):hover.chip-green .close-icon{border-color:var(--green-base)}.chip.hovered.chip-green .close-icon:hover,.chip.selectable:not(.focused):hover.chip-green .close-icon:hover{background-color:var(--green-base)}.chip.hovered.chip-red,.chip.selectable:not(.focused):hover.chip-red{color:var(--red-base)!important;background-color:var(--red-hover);border:1px solid var(--red-border)}.chip.hovered.chip-red .close-icon,.chip.selectable:not(.focused):hover.chip-red .close-icon{border-color:var(--red-base)}.chip.hovered.chip-red .close-icon:hover,.chip.selectable:not(.focused):hover.chip-red .close-icon:hover{background-color:var(--red-base)}.chip.focused{color:var(--typography-contrast)!important}.chip.focused .close-icon{border-color:var(--typography-contrast)}.chip.focused .close-icon:hover{background-color:var(--typography-contrast);border-radius:16px}.chip.focused.chip-slate{background-color:var(--slate-focus);color:var(--typography-base)!important}.chip.focused.chip-slate .close-icon{border-color:var(--typography-base)}.chip.focused.chip-slate .close-icon:hover{color:var(--slate-base)}.chip.focused.chip-primary{background-color:var(--primary-base)}.chip.focused.chip-primary .close-icon:hover{color:var(--primary-base)}.chip.focused.chip-secondary{background-color:var(--secondary-base)}.chip.focused.chip-secondary .close-icon:hover{color:var(--secondary-base)}.chip.focused.chip-orange{background-color:var(--orange-base)}.chip.focused.chip-orange .close-icon:hover{color:var(--orange-base)}.chip.focused.chip-green{background-color:var(--green-base)}.chip.focused.chip-green .close-icon:hover{color:var(--green-base)}.chip.focused.chip-red{background-color:var(--red-base)}.chip.focused.chip-red .close-icon:hover{color:var(--red-base)}.chip.disabled{opacity:38%}.chip.disabled .close-icon{cursor:not-allowed;color:inherit}.chip.disabled .close-icon:hover{background-color:transparent!important}.chip.disabled.chip-slate{color:var(--slate-base);background-color:var(--slate-hover);border:1px solid var(--slate-border)}.chip.disabled.chip-primary{color:var(--primary-base);background-color:var(--primary-hover);border:1px solid var(--primary-border)}.chip.disabled.chip-secondary{color:var(--secondary-base);background-color:var(--secondary-hover);border:1px solid var(--secondary-border)}.chip.disabled.chip-orange{color:var(--orange-base);background-color:var(--orange-hover);border:1px solid var(--orange-border)}.chip.disabled.chip-green{color:var(--green-base);background-color:var(--green-hover);border:1px solid var(--green-border)}.chip.disabled.chip-red{color:var(--red-base);background-color:var(--red-hover);border:1px solid var(--red-border)}:host::ng-deep fw-progress-spinner{width:16px!important;height:16px!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] }); }
|
|
2551
2554
|
}
|
|
2552
2555
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwChipComponent, decorators: [{
|
|
2553
2556
|
type: Component,
|
|
2554
|
-
args: [{ selector: 'fw-chip', template: "<div\n [ngClass]=\"['chip', variant, 'chip-'+color]\" [class.disabled]=\"disabled\" [class.focused]=\"selected\"\n [class.selectable]=\"selectable\" (click)=\"selectable ? select.emit(value) : undefined\">\n\n @if (icon) {\n <fw-icon class=\"chip-icon\">{{ icon }}</fw-icon>\n }\n\n <ng-content select=\"fw-avatar\"></ng-content>\n <ng-content select=\"fw-progress-spinner\"></ng-content>\n @if (title) {\n <div class=\"chip-text-container\">\n <span [class.text-wrap]=\"!textWrap\" class=\"chip-text\">{{ title }}</span>\n\n @if (description) {\n <span class=\"description\">{{ description }}</span>\n }\n </div>\n }\n\n @if (showClose) {\n <div class=\"close-icon\" (click)=\"handleClose($event)\">\n <fw-icon>close</fw-icon>\n </div>\n }\n</div>\n", styles: [":host{min-height:24px;display:inline-flex}.chip{box-sizing:border-box;border-radius:16px;padding:2px 4px;display:inline-flex;min-height:24px;align-items:center;font-family:Inter,sans-serif;font-size:12px;font-style:normal;font-weight:600;line-height:16px;width:100
|
|
2557
|
+
args: [{ selector: 'fw-chip', template: "<div\n [ngClass]=\"['chip', variant, 'chip-'+color]\" [class.disabled]=\"disabled\" [class.focused]=\"selected\"\n [class.selectable]=\"selectable\" (click)=\"selectable ? select.emit(value) : undefined\">\n\n @if (icon) {\n <fw-icon class=\"chip-icon\">{{ icon }}</fw-icon>\n }\n\n <ng-content select=\"fw-avatar\"></ng-content>\n <ng-content select=\"fw-progress-spinner\"></ng-content>\n @if (title) {\n <div class=\"chip-text-container\">\n <span [class.text-wrap]=\"!textWrap\" class=\"chip-text\">{{ title }}</span>\n\n @if (description) {\n <span class=\"description\">{{ description }}</span>\n }\n </div>\n }\n\n @if (showClose) {\n <div class=\"close-icon\" (click)=\"handleClose($event)\">\n <fw-icon>close</fw-icon>\n </div>\n }\n</div>\n", styles: [":host{min-height:24px;display:inline-flex}.chip{box-sizing:border-box;border-radius:16px;padding:2px 4px;display:inline-flex;min-height:24px;align-items:center;font-family:Inter,sans-serif;font-size:12px;font-style:normal;font-weight:600;line-height:16px;width:100%;max-width:180px}.chip .chip-icon{align-items:flex-start;font-size:16px;min-width:16px;width:16px}.chip-text{overflow:hidden;text-overflow:ellipsis}.chip-text.text-wrap{white-space:nowrap}.chip-text-container{display:flex;align-items:center;margin:0 6px;min-height:16px;white-space:wrap;width:100%;overflow:hidden}.chip-text-container .description{margin-left:4px;font-weight:400;color:var(--typography-light)}.chip .close-icon{font-size:12px;font-weight:700;cursor:pointer;border-width:1px;border-style:solid;border-radius:16px;min-width:12px;width:12px;height:12px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}.chip .close-icon:hover{color:var(--typography-contrast);border-radius:16px}.chip .close-icon>fw-icon{font-size:12px;min-width:12px;width:12px;height:12px}.chip:not(.selectable){cursor:default}.chip.selectable{cursor:pointer}.chip.enabled.chip-slate{color:var(--slate-base);border:1px solid var(--slate-border)}.chip.enabled.chip-slate .close-icon:hover{background-color:var(--slate-base)}.chip.enabled.chip-primary{color:var(--primary-base);border:1px solid var(--primary-border)}.chip.enabled.chip-primary .close-icon{border-color:var(--primary-base)}.chip.enabled.chip-primary .close-icon:hover{background-color:var(--primary-base)}.chip.enabled.chip-secondary{color:var(--secondary-base);border:1px solid var(--secondary-border)}.chip.enabled.chip-secondary .close-icon{border-color:var(--secondary-base)}.chip.enabled.chip-secondary .close-icon:hover{background-color:var(--secondary-base)}.chip.enabled.chip-orange{color:var(--orange-base);border:1px solid var(--orange-border)}.chip.enabled.chip-orange .close-icon{border-color:var(--orange-base)}.chip.enabled.chip-orange .close-icon:hover{background-color:var(--orange-base)}.chip.enabled.chip-green{color:var(--green-base);border:1px solid var(--green-border)}.chip.enabled.chip-green .close-icon{border-color:var(--green-base)}.chip.enabled.chip-green .close-icon:hover{background-color:var(--green-base)}.chip.enabled.chip-red{color:var(--red-base);border:1px solid var(--red-border)}.chip.enabled.chip-red .close-icon{border-color:var(--red-base)}.chip.enabled.chip-red .close-icon:hover{background-color:var(--red-base)}.chip.hovered.chip-slate,.chip.selectable:not(.focused):hover.chip-slate{color:var(--slate-base)!important;background-color:var(--slate-hover);border:1px solid var(--slate-border)}.chip.hovered.chip-slate .close-icon:hover,.chip.selectable:not(.focused):hover.chip-slate .close-icon:hover{background-color:var(--slate-base)}.chip.hovered.chip-primary,.chip.selectable:not(.focused):hover.chip-primary{color:var(--primary-base)!important;background-color:var(--primary-hover);border:1px solid var(--primary-border)}.chip.hovered.chip-primary .close-icon,.chip.selectable:not(.focused):hover.chip-primary .close-icon{border-color:var(--primary-base)}.chip.hovered.chip-primary .close-icon:hover,.chip.selectable:not(.focused):hover.chip-primary .close-icon:hover{background-color:var(--primary-base)}.chip.hovered.chip-secondary,.chip.selectable:not(.focused):hover.chip-secondary{color:var(--secondary-base)!important;background-color:var(--secondary-hover);border:1px solid var(--secondary-border)}.chip.hovered.chip-secondary .close-icon,.chip.selectable:not(.focused):hover.chip-secondary .close-icon{border-color:var(--secondary-base)}.chip.hovered.chip-secondary .close-icon:hover,.chip.selectable:not(.focused):hover.chip-secondary .close-icon:hover{background-color:var(--secondary-base)}.chip.hovered.chip-orange,.chip.selectable:not(.focused):hover.chip-orange{color:var(--orange-base)!important;background-color:var(--orange-hover);border:1px solid var(--orange-border)}.chip.hovered.chip-orange .close-icon,.chip.selectable:not(.focused):hover.chip-orange .close-icon{border-color:var(--orange-base)}.chip.hovered.chip-orange .close-icon:hover,.chip.selectable:not(.focused):hover.chip-orange .close-icon:hover{background-color:var(--orange-base)}.chip.hovered.chip-green,.chip.selectable:not(.focused):hover.chip-green{color:var(--green-base)!important;background-color:var(--green-hover);border:1px solid var(--green-border)}.chip.hovered.chip-green .close-icon,.chip.selectable:not(.focused):hover.chip-green .close-icon{border-color:var(--green-base)}.chip.hovered.chip-green .close-icon:hover,.chip.selectable:not(.focused):hover.chip-green .close-icon:hover{background-color:var(--green-base)}.chip.hovered.chip-red,.chip.selectable:not(.focused):hover.chip-red{color:var(--red-base)!important;background-color:var(--red-hover);border:1px solid var(--red-border)}.chip.hovered.chip-red .close-icon,.chip.selectable:not(.focused):hover.chip-red .close-icon{border-color:var(--red-base)}.chip.hovered.chip-red .close-icon:hover,.chip.selectable:not(.focused):hover.chip-red .close-icon:hover{background-color:var(--red-base)}.chip.focused{color:var(--typography-contrast)!important}.chip.focused .close-icon{border-color:var(--typography-contrast)}.chip.focused .close-icon:hover{background-color:var(--typography-contrast);border-radius:16px}.chip.focused.chip-slate{background-color:var(--slate-focus);color:var(--typography-base)!important}.chip.focused.chip-slate .close-icon{border-color:var(--typography-base)}.chip.focused.chip-slate .close-icon:hover{color:var(--slate-base)}.chip.focused.chip-primary{background-color:var(--primary-base)}.chip.focused.chip-primary .close-icon:hover{color:var(--primary-base)}.chip.focused.chip-secondary{background-color:var(--secondary-base)}.chip.focused.chip-secondary .close-icon:hover{color:var(--secondary-base)}.chip.focused.chip-orange{background-color:var(--orange-base)}.chip.focused.chip-orange .close-icon:hover{color:var(--orange-base)}.chip.focused.chip-green{background-color:var(--green-base)}.chip.focused.chip-green .close-icon:hover{color:var(--green-base)}.chip.focused.chip-red{background-color:var(--red-base)}.chip.focused.chip-red .close-icon:hover{color:var(--red-base)}.chip.disabled{opacity:38%}.chip.disabled .close-icon{cursor:not-allowed;color:inherit}.chip.disabled .close-icon:hover{background-color:transparent!important}.chip.disabled.chip-slate{color:var(--slate-base);background-color:var(--slate-hover);border:1px solid var(--slate-border)}.chip.disabled.chip-primary{color:var(--primary-base);background-color:var(--primary-hover);border:1px solid var(--primary-border)}.chip.disabled.chip-secondary{color:var(--secondary-base);background-color:var(--secondary-hover);border:1px solid var(--secondary-border)}.chip.disabled.chip-orange{color:var(--orange-base);background-color:var(--orange-hover);border:1px solid var(--orange-border)}.chip.disabled.chip-green{color:var(--green-base);background-color:var(--green-hover);border:1px solid var(--green-border)}.chip.disabled.chip-red{color:var(--red-base);background-color:var(--red-hover);border:1px solid var(--red-border)}:host::ng-deep fw-progress-spinner{width:16px!important;height:16px!important}\n"] }]
|
|
2555
2558
|
}], propDecorators: { value: [{
|
|
2556
2559
|
type: Input
|
|
2557
2560
|
}], variant: [{
|
|
@@ -4249,7 +4252,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4249
4252
|
|
|
4250
4253
|
class FwRadioComponent {
|
|
4251
4254
|
constructor() {
|
|
4252
|
-
this.
|
|
4255
|
+
this.value = input();
|
|
4256
|
+
this.checked = model(false);
|
|
4253
4257
|
this.disabled = false;
|
|
4254
4258
|
this.size = 'medium';
|
|
4255
4259
|
this.color = 'default';
|
|
@@ -4270,16 +4274,12 @@ class FwRadioComponent {
|
|
|
4270
4274
|
this.change.emit(event.target.value);
|
|
4271
4275
|
}
|
|
4272
4276
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4273
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
4277
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FwRadioComponent, selector: "fw-radio-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", 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" }, ngImport: i0, template: "<div [ngClass]=\"['fw-radio-wrapper', disabled?'disabled':'']\">\n <div [ngClass]=\"radioStyles\">\n <input\n type=\"radio\"\n class=\"fw-radio\"\n [id]=\"group+value()\"\n [value]=\"value()\"\n [checked]=\"checked()\"\n [name]=\"group\"\n [disabled]=\"disabled\"\n (change)=\"handleChange($event)\"\n (focusout)=\"focused=false\"\n (focusin)=\"focused=true\"\n />\n </div>\n\n @if (title) {\n <label [htmlFor]=\"group+value()\" class=\"vision-h4\">{{ title }}\n <ng-content></ng-content>\n </label>\n }\n</div>\n", styles: [":host .fw-radio-wrapper{display:flex;align-items:center;width:fit-content;cursor:pointer}:host .fw-radio-wrapper label{margin:0 6px 0 0;color:var(--typography-base)}:host .fw-radio-wrapper label:empty{display:none}:host .fw-radio-wrapper .fw-radio{height:36px;width:36px;display:flex;align-items:center;justify-content:center;border-radius:50%}:host .fw-radio-wrapper .fw-radio:hover{background-color:var(--slate-hover)}:host .fw-radio-wrapper .fw-radio.focused{background-color:var(--slate-focus)}:host .fw-radio-wrapper .fw-radio input[type=radio]{appearance:none;display:inline-block;width:20px;height:20px;margin:6px;background-clip:content-box;border:2px solid var(--typography-light);background-color:transparent;border-radius:50%;cursor:pointer}:host .fw-radio-wrapper .fw-radio input[type=radio]:checked{width:16px;height:16px;background-color:var(--typography-light);outline:2px solid var(--typography-light);border:2px solid white;margin:8px}:host .fw-radio-wrapper .fw-radio.primary.focused{background-color:var(--primary-focus)}:host .fw-radio-wrapper .fw-radio.primary.focused input[type=radio]{border:2px solid var(--primary-base)}:host .fw-radio-wrapper .fw-radio.primary input[type=radio]:checked{border:2px solid white;background-color:var(--primary-base);outline:2px solid var(--primary-base)}:host .fw-radio-wrapper .fw-radio.secondary.focused{background-color:var(--secondary-focus)}:host .fw-radio-wrapper .fw-radio.secondary.focused input[type=radio]{border:2px solid var(--secondary-base)}:host .fw-radio-wrapper .fw-radio.secondary input[type=radio]:checked{border:2px solid white;background-color:var(--secondary-base);outline:2px solid var(--secondary-base)}:host .fw-radio-wrapper .fw-radio.disabled{cursor:not-allowed}:host .fw-radio-wrapper .fw-radio.disabled input[type=radio]:checked{border:2px solid white;background-color:var(--typography-light);outline:2px solid var(--typography-light)}:host .fw-radio-wrapper .fw-radio.compact{width:30px;height:30px}:host .fw-radio-wrapper .fw-radio.compact input[type=radio]{width:18px;height:18px;margin:5px}:host .fw-radio-wrapper .fw-radio.compact input[type=radio]:checked{width:14px;height:14px;margin:7px}:host .fw-radio-wrapper.disabled{cursor:not-allowed;opacity:.4}:host .fw-radio-wrapper.disabled label{color:var(--typography-light)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
4274
4278
|
}
|
|
4275
4279
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwRadioComponent, decorators: [{
|
|
4276
4280
|
type: Component,
|
|
4277
|
-
args: [{ selector: 'fw-radio-button', template: "<div [ngClass]=\"['fw-radio-wrapper', disabled?'disabled':'']\">\n <div [ngClass]=\"radioStyles\">\n <input\n type=\"radio\"\n class=\"fw-radio\"\n [id]=\"group+value\"\n [value]=\"value\"\n [checked]=\"checked\"\n [name]=\"group\"\n [disabled]=\"disabled\"\n (change)=\"handleChange($event)\"\n (focusout)=\"focused=false\"\n (focusin)=\"focused=true\"\n />\n </div>\n
|
|
4278
|
-
}], propDecorators: {
|
|
4279
|
-
type: Input
|
|
4280
|
-
}], value: [{
|
|
4281
|
-
type: Input
|
|
4282
|
-
}], group: [{
|
|
4281
|
+
args: [{ selector: 'fw-radio-button', template: "<div [ngClass]=\"['fw-radio-wrapper', disabled?'disabled':'']\">\n <div [ngClass]=\"radioStyles\">\n <input\n type=\"radio\"\n class=\"fw-radio\"\n [id]=\"group+value()\"\n [value]=\"value()\"\n [checked]=\"checked()\"\n [name]=\"group\"\n [disabled]=\"disabled\"\n (change)=\"handleChange($event)\"\n (focusout)=\"focused=false\"\n (focusin)=\"focused=true\"\n />\n </div>\n\n @if (title) {\n <label [htmlFor]=\"group+value()\" class=\"vision-h4\">{{ title }}\n <ng-content></ng-content>\n </label>\n }\n</div>\n", styles: [":host .fw-radio-wrapper{display:flex;align-items:center;width:fit-content;cursor:pointer}:host .fw-radio-wrapper label{margin:0 6px 0 0;color:var(--typography-base)}:host .fw-radio-wrapper label:empty{display:none}:host .fw-radio-wrapper .fw-radio{height:36px;width:36px;display:flex;align-items:center;justify-content:center;border-radius:50%}:host .fw-radio-wrapper .fw-radio:hover{background-color:var(--slate-hover)}:host .fw-radio-wrapper .fw-radio.focused{background-color:var(--slate-focus)}:host .fw-radio-wrapper .fw-radio input[type=radio]{appearance:none;display:inline-block;width:20px;height:20px;margin:6px;background-clip:content-box;border:2px solid var(--typography-light);background-color:transparent;border-radius:50%;cursor:pointer}:host .fw-radio-wrapper .fw-radio input[type=radio]:checked{width:16px;height:16px;background-color:var(--typography-light);outline:2px solid var(--typography-light);border:2px solid white;margin:8px}:host .fw-radio-wrapper .fw-radio.primary.focused{background-color:var(--primary-focus)}:host .fw-radio-wrapper .fw-radio.primary.focused input[type=radio]{border:2px solid var(--primary-base)}:host .fw-radio-wrapper .fw-radio.primary input[type=radio]:checked{border:2px solid white;background-color:var(--primary-base);outline:2px solid var(--primary-base)}:host .fw-radio-wrapper .fw-radio.secondary.focused{background-color:var(--secondary-focus)}:host .fw-radio-wrapper .fw-radio.secondary.focused input[type=radio]{border:2px solid var(--secondary-base)}:host .fw-radio-wrapper .fw-radio.secondary input[type=radio]:checked{border:2px solid white;background-color:var(--secondary-base);outline:2px solid var(--secondary-base)}:host .fw-radio-wrapper .fw-radio.disabled{cursor:not-allowed}:host .fw-radio-wrapper .fw-radio.disabled input[type=radio]:checked{border:2px solid white;background-color:var(--typography-light);outline:2px solid var(--typography-light)}:host .fw-radio-wrapper .fw-radio.compact{width:30px;height:30px}:host .fw-radio-wrapper .fw-radio.compact input[type=radio]{width:18px;height:18px;margin:5px}:host .fw-radio-wrapper .fw-radio.compact input[type=radio]:checked{width:14px;height:14px;margin:7px}:host .fw-radio-wrapper.disabled{cursor:not-allowed;opacity:.4}:host .fw-radio-wrapper.disabled label{color:var(--typography-light)}\n"] }]
|
|
4282
|
+
}], propDecorators: { group: [{
|
|
4283
4283
|
type: Input
|
|
4284
4284
|
}], disabled: [{
|
|
4285
4285
|
type: Input
|
|
@@ -4378,7 +4378,7 @@ class FwMenuItemComponent {
|
|
|
4378
4378
|
}
|
|
4379
4379
|
;
|
|
4380
4380
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwMenuItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4381
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: FwMenuItemComponent, 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: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { mouseEnterHandler: "mouseEnterHandlerChange", click: "click" }, host: { listeners: { "mouseenter": "onMouseEnter($event)" }, properties: { "class.collapsed": "this.collapsed", "class.focused": "this.focused", "class.selected": "this.selected", "attr.title": "this.attrTitle" } }, queries: [{ propertyName: "subItems", predicate: FwMenuSubItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div (click)=\"handleClick($event)\" *ngIf=\"!hidden\">\n <div\n [ngClass]=\"['menu-item', 'size-'+size, disabled?'disabled':'']\"\n [class.disabled]=\"disabled\">\n <div class=\"item-checkbox\" *ngIf=\"showCheckbox && multiSelect\">\n <fw-checkbox\n [disabled]=\"disabled\"\n [color]=\"checkboxColor\"\n [checked]=\"selected\">\n </fw-checkbox>\n </div>\n <div class=\"item-radiobutton\" *ngIf=\"showCheckbox && !multiSelect\">\n <fw-radio-button\n [value]=\"value\"\n [color]=\"checkboxColor\"\n [disabled]=\"disabled\"\n [checked]=\"selected\">\n </fw-radio-button>\n </div>\n <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"menu-icon {{iconColor}}\">{{ icon }}</fw-icon>\n <ng-content select=\"fw-avatar\"></ng-content>\n <div class=\"menu-text\" *ngIf=\"title\">\n <h4 class=\"vision-h4\">{{ title }}</h4>\n <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n </div>\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 <fw-icon-button\n [size]=\"'small'\"\n [icon]=\"subItemsOpen?'chevron-up':'chevron-down'\"\n *ngIf=\"subItems.length>0\"\n (click)=\"toggleSubItemsView()\">\n </fw-icon-button>\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{position:relative;display:flex;flex-direction:column}: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;margin:1px 4px;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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwCheckboxComponent, selector: "fw-checkbox", inputs: ["name", "disabled", "size", "color", "title", "focused", "checked"], outputs: ["change"] }, { kind: "component", type: FwRadioComponent, selector: "fw-radio-button", inputs: ["
|
|
4381
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: FwMenuItemComponent, 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: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { mouseEnterHandler: "mouseEnterHandlerChange", click: "click" }, host: { listeners: { "mouseenter": "onMouseEnter($event)" }, properties: { "class.collapsed": "this.collapsed", "class.focused": "this.focused", "class.selected": "this.selected", "attr.title": "this.attrTitle" } }, queries: [{ propertyName: "subItems", predicate: FwMenuSubItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div (click)=\"handleClick($event)\" *ngIf=\"!hidden\">\n <div\n [ngClass]=\"['menu-item', 'size-'+size, disabled?'disabled':'']\"\n [class.disabled]=\"disabled\">\n <div class=\"item-checkbox\" *ngIf=\"showCheckbox && multiSelect\">\n <fw-checkbox\n [disabled]=\"disabled\"\n [color]=\"checkboxColor\"\n [checked]=\"selected\">\n </fw-checkbox>\n </div>\n <div class=\"item-radiobutton\" *ngIf=\"showCheckbox && !multiSelect\">\n <fw-radio-button\n [value]=\"value\"\n [color]=\"checkboxColor\"\n [disabled]=\"disabled\"\n [checked]=\"selected\">\n </fw-radio-button>\n </div>\n <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"menu-icon {{iconColor}}\">{{ icon }}</fw-icon>\n <ng-content select=\"fw-avatar\"></ng-content>\n <div class=\"menu-text\" *ngIf=\"title\">\n <h4 class=\"vision-h4\">{{ title }}</h4>\n <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n </div>\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 <fw-icon-button\n [size]=\"'small'\"\n [icon]=\"subItemsOpen?'chevron-up':'chevron-down'\"\n *ngIf=\"subItems.length>0\"\n (click)=\"toggleSubItemsView()\">\n </fw-icon-button>\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{position:relative;display:flex;flex-direction:column}: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;margin:1px 4px;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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwCheckboxComponent, selector: "fw-checkbox", inputs: ["name", "disabled", "size", "color", "title", "focused", "checked"], outputs: ["change"] }, { kind: "component", type: FwRadioComponent, selector: "fw-radio-button", inputs: ["value", "checked", "group", "disabled", "size", "color", "title", "focused"], outputs: ["checkedChange", "change"] }] }); }
|
|
4382
4382
|
}
|
|
4383
4383
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwMenuItemComponent, decorators: [{
|
|
4384
4384
|
type: Component,
|
|
@@ -4569,63 +4569,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4569
4569
|
|
|
4570
4570
|
class FwRadioGroupComponent {
|
|
4571
4571
|
get style() {
|
|
4572
|
-
|
|
4573
|
-
if (this.direction === 'vertical') {
|
|
4574
|
-
direction = 'column';
|
|
4575
|
-
}
|
|
4572
|
+
const dir = this.direction === 'vertical' ? 'column' : 'row';
|
|
4576
4573
|
return this.sanitizer.bypassSecurityTrustStyle(`
|
|
4577
|
-
|
|
4578
|
-
|
|
4579
|
-
|
|
4574
|
+
display: flex;
|
|
4575
|
+
flex-direction: ${dir};
|
|
4576
|
+
`);
|
|
4580
4577
|
}
|
|
4581
|
-
constructor(
|
|
4582
|
-
this.sanitizer = sanitizer;
|
|
4578
|
+
constructor() {
|
|
4583
4579
|
this.direction = 'horizontal';
|
|
4584
4580
|
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
4585
4581
|
this.change = new EventEmitter();
|
|
4586
|
-
this.
|
|
4582
|
+
this.sanitizer = inject(DomSanitizer);
|
|
4583
|
+
this.dr = inject(DestroyRef);
|
|
4584
|
+
this.radioButtons = contentChildren(FwRadioComponent);
|
|
4585
|
+
this._value = signal(null);
|
|
4586
|
+
this.radioSubs = new Map();
|
|
4587
4587
|
this.onTouch = () => {
|
|
4588
4588
|
};
|
|
4589
4589
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
4590
4590
|
this.onChange = (value) => {
|
|
4591
4591
|
};
|
|
4592
|
-
|
|
4593
|
-
|
|
4594
|
-
|
|
4595
|
-
|
|
4596
|
-
|
|
4597
|
-
|
|
4598
|
-
|
|
4599
|
-
|
|
4600
|
-
|
|
4601
|
-
|
|
4602
|
-
|
|
4603
|
-
|
|
4604
|
-
|
|
4605
|
-
this.subscriptions.push(sub);
|
|
4606
|
-
});
|
|
4607
|
-
}
|
|
4608
|
-
this.updateLayout();
|
|
4609
|
-
}
|
|
4610
|
-
updateLayout() {
|
|
4611
|
-
if (this.radioButtons) {
|
|
4612
|
-
this.radioButtons.forEach(rb => {
|
|
4613
|
-
rb.group = this.group;
|
|
4614
|
-
rb.checked = rb.value === this.value;
|
|
4615
|
-
if (this.color) {
|
|
4616
|
-
rb.color = this.color;
|
|
4592
|
+
effect(() => {
|
|
4593
|
+
const radios = this.radioButtons();
|
|
4594
|
+
const value = this._value();
|
|
4595
|
+
const disabled = this.disabled;
|
|
4596
|
+
const group = this.group;
|
|
4597
|
+
const color = this.color;
|
|
4598
|
+
const size = this.size;
|
|
4599
|
+
radios.forEach(rb => {
|
|
4600
|
+
rb.group = group;
|
|
4601
|
+
rb.checked.set(rb.value() === value);
|
|
4602
|
+
rb.disabled = Boolean(disabled);
|
|
4603
|
+
if (color) {
|
|
4604
|
+
rb.color = color;
|
|
4617
4605
|
}
|
|
4618
|
-
if (
|
|
4619
|
-
rb.size =
|
|
4606
|
+
if (size) {
|
|
4607
|
+
rb.size = size;
|
|
4620
4608
|
}
|
|
4621
|
-
|
|
4622
|
-
|
|
4609
|
+
});
|
|
4610
|
+
});
|
|
4611
|
+
effect(() => {
|
|
4612
|
+
const radios = this.radioButtons();
|
|
4613
|
+
this.radioSubs.forEach((sub, rb) => {
|
|
4614
|
+
if (!radios.includes(rb)) {
|
|
4615
|
+
sub.unsubscribe();
|
|
4616
|
+
this.radioSubs.delete(rb);
|
|
4623
4617
|
}
|
|
4624
4618
|
});
|
|
4625
|
-
|
|
4619
|
+
radios.forEach(rb => {
|
|
4620
|
+
if (!this.radioSubs.has(rb)) {
|
|
4621
|
+
const sub = rb.change.pipe(takeUntilDestroyed(this.dr)).subscribe(value => this.handleChange(value));
|
|
4622
|
+
this.radioSubs.set(rb, sub);
|
|
4623
|
+
}
|
|
4624
|
+
});
|
|
4625
|
+
});
|
|
4626
4626
|
}
|
|
4627
4627
|
writeValue(value) {
|
|
4628
4628
|
this.value = value;
|
|
4629
|
+
this._value.set(value);
|
|
4629
4630
|
}
|
|
4630
4631
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
4631
4632
|
registerOnChange(fn) {
|
|
@@ -4640,15 +4641,16 @@ class FwRadioGroupComponent {
|
|
|
4640
4641
|
}
|
|
4641
4642
|
handleChange(value) {
|
|
4642
4643
|
this.value = value;
|
|
4644
|
+
this._value.set(value);
|
|
4643
4645
|
this.onChange(value);
|
|
4644
4646
|
this.change.emit(this.value);
|
|
4645
4647
|
}
|
|
4646
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwRadioGroupComponent, deps: [
|
|
4647
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
4648
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4649
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.12", type: FwRadioGroupComponent, selector: "fw-radio-group", inputs: { value: "value", group: "group", color: "color", size: "size", disabled: "disabled", direction: "direction" }, outputs: { change: "change" }, host: { properties: { "style": "this.style" } }, providers: [{
|
|
4648
4650
|
provide: NG_VALUE_ACCESSOR,
|
|
4649
4651
|
useExisting: FwRadioGroupComponent,
|
|
4650
4652
|
multi: true,
|
|
4651
|
-
}], queries: [{ propertyName: "radioButtons", predicate: FwRadioComponent
|
|
4653
|
+
}], queries: [{ propertyName: "radioButtons", predicate: FwRadioComponent, isSignal: true }], ngImport: i0, template: '<ng-content select="fw-radio-button"></ng-content>', isInline: true }); }
|
|
4652
4654
|
}
|
|
4653
4655
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwRadioGroupComponent, decorators: [{
|
|
4654
4656
|
type: Component,
|
|
@@ -4657,7 +4659,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4657
4659
|
useExisting: FwRadioGroupComponent,
|
|
4658
4660
|
multi: true,
|
|
4659
4661
|
}] }]
|
|
4660
|
-
}], ctorParameters: () => [
|
|
4662
|
+
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
4661
4663
|
type: Input
|
|
4662
4664
|
}], group: [{
|
|
4663
4665
|
type: Input
|
|
@@ -4671,9 +4673,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4671
4673
|
type: Input
|
|
4672
4674
|
}], change: [{
|
|
4673
4675
|
type: Output
|
|
4674
|
-
}], radioButtons: [{
|
|
4675
|
-
type: ContentChildren,
|
|
4676
|
-
args: [FwRadioComponent]
|
|
4677
4676
|
}], style: [{
|
|
4678
4677
|
type: HostBinding,
|
|
4679
4678
|
args: ['style']
|
|
@@ -8789,7 +8788,7 @@ class FwChipListComponent {
|
|
|
8789
8788
|
this.changeDetector = inject(ChangeDetectorRef);
|
|
8790
8789
|
this.hostElement = inject(ElementRef);
|
|
8791
8790
|
this.childChipElementRefs = contentChildren(FwChipComponent, { read: ElementRef });
|
|
8792
|
-
this.moreText = viewChild
|
|
8791
|
+
this.moreText = viewChild('moreText');
|
|
8793
8792
|
this.subscriptions = [];
|
|
8794
8793
|
this.hiddenElementCount = signal(0);
|
|
8795
8794
|
this.hiddenChips = signal([]);
|
|
@@ -8801,6 +8800,7 @@ class FwChipListComponent {
|
|
|
8801
8800
|
}).join(', ');
|
|
8802
8801
|
});
|
|
8803
8802
|
this.resizeDebounceMs = input(100);
|
|
8803
|
+
this.disableOverflow = input(false);
|
|
8804
8804
|
this.childrenChanged = effect(() => {
|
|
8805
8805
|
this.childChipElementRefs();
|
|
8806
8806
|
this.calcChipOverflow();
|
|
@@ -8822,9 +8822,16 @@ class FwChipListComponent {
|
|
|
8822
8822
|
this.subscriptions.push(sub);
|
|
8823
8823
|
}
|
|
8824
8824
|
calcChipOverflow() {
|
|
8825
|
+
if (this.disableOverflow()) {
|
|
8826
|
+
return;
|
|
8827
|
+
}
|
|
8828
|
+
const moreTextRef = this.moreText();
|
|
8829
|
+
if (!moreTextRef) {
|
|
8830
|
+
return;
|
|
8831
|
+
}
|
|
8825
8832
|
const hostRect = this.hostElement.nativeElement.getBoundingClientRect();
|
|
8826
8833
|
const chipElements = this.childChipElementRefs().map(ref => ref.nativeElement);
|
|
8827
|
-
const moreTextElement =
|
|
8834
|
+
const moreTextElement = moreTextRef.nativeElement;
|
|
8828
8835
|
chipElements.forEach(chip => chip.classList.remove('hidden'));
|
|
8829
8836
|
moreTextElement.classList.remove('hidden');
|
|
8830
8837
|
const visibleChips = chipElements.filter(chip => {
|
|
@@ -8844,7 +8851,7 @@ class FwChipListComponent {
|
|
|
8844
8851
|
});
|
|
8845
8852
|
}
|
|
8846
8853
|
else {
|
|
8847
|
-
|
|
8854
|
+
moreTextElement.classList.add('hidden');
|
|
8848
8855
|
}
|
|
8849
8856
|
// eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
|
|
8850
8857
|
this.changeDetector.detectChanges();
|
|
@@ -8853,14 +8860,14 @@ class FwChipListComponent {
|
|
|
8853
8860
|
this.subscriptions.forEach(sub => sub.unsubscribe());
|
|
8854
8861
|
}
|
|
8855
8862
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwChipListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8856
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
8863
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FwChipListComponent, isStandalone: true, selector: "fw-chip-list", inputs: { resizeDebounceMs: { classPropertyName: "resizeDebounceMs", publicName: "resizeDebounceMs", isSignal: true, isRequired: false, transformFunction: null }, disableOverflow: { classPropertyName: "disableOverflow", publicName: "disableOverflow", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "childChipElementRefs", predicate: FwChipComponent, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "moreText", first: true, predicate: ["moreText"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n@if(!disableOverflow()) {\n <fw-tooltip [title]=\"hiddenLabels()\">\n <p #moreText> +{{hiddenChips().length}} more </p>\n </fw-tooltip>\n}\n", styles: [":host{flex-basis:max-content;display:flex;flex-flow:row wrap;gap:8px;align-items:flex-start;justify-content:flex-start}:host p{line-height:24px;cursor:default;margin:0 8px 0 0;text-wrap:nowrap;color:var(--typography-muted)}:host::ng-deep .hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: FwChipModule }, { kind: "ngmodule", type: FwTooltipModule }, { kind: "component", type: FwTooltipComponent, selector: "fw-tooltip", inputs: ["title", "color", "position", "maxWidth", "fullWidth", "isOpen", "trigger", "delay"] }] }); }
|
|
8857
8864
|
}
|
|
8858
8865
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwChipListComponent, decorators: [{
|
|
8859
8866
|
type: Component,
|
|
8860
8867
|
args: [{ selector: 'fw-chip-list', standalone: true, imports: [
|
|
8861
8868
|
FwChipModule,
|
|
8862
8869
|
FwTooltipModule,
|
|
8863
|
-
], template: "<ng-content></ng-content>\n<fw-tooltip [title]=\"hiddenLabels()\">\n
|
|
8870
|
+
], template: "<ng-content></ng-content>\n@if(!disableOverflow()) {\n <fw-tooltip [title]=\"hiddenLabels()\">\n <p #moreText> +{{hiddenChips().length}} more </p>\n </fw-tooltip>\n}\n", styles: [":host{flex-basis:max-content;display:flex;flex-flow:row wrap;gap:8px;align-items:flex-start;justify-content:flex-start}:host p{line-height:24px;cursor:default;margin:0 8px 0 0;text-wrap:nowrap;color:var(--typography-muted)}:host::ng-deep .hidden{display:none}\n"] }]
|
|
8864
8871
|
}] });
|
|
8865
8872
|
|
|
8866
8873
|
/**
|
|
@@ -8884,6 +8891,7 @@ class FwTypeaheadComponent {
|
|
|
8884
8891
|
this.maxOptionsHeight = input('400px');
|
|
8885
8892
|
this.minOptionsHeight = input('0px');
|
|
8886
8893
|
this.optionsWidth = input('');
|
|
8894
|
+
this.maxHeight = input('');
|
|
8887
8895
|
this.notifyOnValueChanges = effect(() => {
|
|
8888
8896
|
this.onChange(this.value());
|
|
8889
8897
|
});
|
|
@@ -8891,6 +8899,7 @@ class FwTypeaheadComponent {
|
|
|
8891
8899
|
this.searchValueChanges$ = toObservable(this.searchValue);
|
|
8892
8900
|
this.allowNew = input(true);
|
|
8893
8901
|
this.placeholder = input('Enter tags...');
|
|
8902
|
+
this.showPlaceholder = computed(() => this.value().length === 0);
|
|
8894
8903
|
/**
|
|
8895
8904
|
* Options after they've been both filtered for matching the search and already selected
|
|
8896
8905
|
*/
|
|
@@ -9070,13 +9079,13 @@ class FwTypeaheadComponent {
|
|
|
9070
9079
|
newlyFocused.scrollIntoView();
|
|
9071
9080
|
}
|
|
9072
9081
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTypeaheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9073
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FwTypeaheadComponent, isStandalone: true, selector: "fw-typeahead", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, optionsInput: { classPropertyName: "optionsInput", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, maxOptionsHeight: { classPropertyName: "maxOptionsHeight", publicName: "maxOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, minOptionsHeight: { classPropertyName: "minOptionsHeight", publicName: "minOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, optionsWidth: { classPropertyName: "optionsWidth", publicName: "optionsWidth", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, allowNew: { classPropertyName: "allowNew", publicName: "allowNew", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loading: "loadingChange", disabled: "disabledChange", value: "valueChange", searchValue: "searchValueChange" }, host: { listeners: { "document:click": "outsideClick()", "click": "onClick($event)" } }, providers: [
|
|
9082
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FwTypeaheadComponent, isStandalone: true, selector: "fw-typeahead", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, optionsInput: { classPropertyName: "optionsInput", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, maxOptionsHeight: { classPropertyName: "maxOptionsHeight", publicName: "maxOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, minOptionsHeight: { classPropertyName: "minOptionsHeight", publicName: "minOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, optionsWidth: { classPropertyName: "optionsWidth", publicName: "optionsWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, allowNew: { classPropertyName: "allowNew", publicName: "allowNew", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loading: "loadingChange", disabled: "disabledChange", value: "valueChange", searchValue: "searchValueChange" }, host: { listeners: { "document:click": "outsideClick()", "click": "onClick($event)" } }, providers: [
|
|
9074
9083
|
{
|
|
9075
9084
|
provide: NG_VALUE_ACCESSOR,
|
|
9076
9085
|
useExisting: forwardRef(() => FwTypeaheadComponent),
|
|
9077
9086
|
multi: true,
|
|
9078
9087
|
},
|
|
9079
|
-
], 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\n (click)=\"focusInput($event)\"\n class=\"input-container\"\n [ngClass]=\"{ 'disabled': disabled() }\"\n [cdkMenuTriggerFor]=\"menuContent\"\n fwMenuRegister\n #inputContainer>\n <fw-chip-list class=\"chips\">\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 <input\n test-id=\"typeahead-input\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [value]=\"searchValue()\"\n (keyup)=\"handleSearchChange($event)\"\n (keydown)=\"handleKey($event)\"\n (focusout)=\"onFocusLoss($event)\"\n #input\n type=\"text\"\n />\n @if(loading()) {\n <fw-progress-spinner size=\"small\"/>\n }\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>\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($event)\"\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($event)\"\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{display:flex;flex-direction:column;width:100%;line-height:21px}:host.disabled{cursor:not-allowed}:host.disabled fw-icon{cursor:not-allowed!important}:host .chips,:host fw-progress-spinner{margin:-4px 0}:host .input-container{width:100%;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}: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: ["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", "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"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i1$4.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"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9088
|
+
], 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\n (click)=\"focusInput($event)\"\n class=\"input-container\"\n [ngClass]=\"{ 'disabled': disabled() }\"\n [style.max-height]=\"maxHeight()\"\n [cdkMenuTriggerFor]=\"menuContent\"\n fwMenuRegister\n #inputContainer>\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 <input\n test-id=\"typeahead-input\"\n [placeholder]=\"showPlaceholder() ? placeholder() : ''\"\n [disabled]=\"disabled()\"\n [value]=\"searchValue()\"\n (keyup)=\"handleSearchChange($event)\"\n (keydown)=\"handleKey($event)\"\n (focusout)=\"onFocusLoss($event)\"\n #input\n type=\"text\"\n />\n @if(loading()) {\n <fw-progress-spinner size=\"small\"/>\n }\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>\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($event)\"\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($event)\"\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{display:flex;flex-direction:column;width:100%;line-height:21px}:host.disabled{cursor:not-allowed}:host.disabled fw-icon{cursor:not-allowed!important}:host .chips,:host fw-progress-spinner{margin:-4px 0}: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: ["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", "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"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i1$4.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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9080
9089
|
}
|
|
9081
9090
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTypeaheadComponent, decorators: [{
|
|
9082
9091
|
type: Component,
|
|
@@ -9096,7 +9105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
9096
9105
|
useExisting: forwardRef(() => FwTypeaheadComponent),
|
|
9097
9106
|
multi: true,
|
|
9098
9107
|
},
|
|
9099
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n (click)=\"focusInput($event)\"\n class=\"input-container\"\n [ngClass]=\"{ 'disabled': disabled() }\"\n [cdkMenuTriggerFor]=\"menuContent\"\n fwMenuRegister\n #inputContainer>\n <fw-chip-list class=\"chips\">\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 <input\n test-id=\"typeahead-input\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [value]=\"searchValue()\"\n (keyup)=\"handleSearchChange($event)\"\n (keydown)=\"handleKey($event)\"\n (focusout)=\"onFocusLoss($event)\"\n #input\n type=\"text\"\n />\n @if(loading()) {\n <fw-progress-spinner size=\"small\"/>\n }\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>\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($event)\"\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($event)\"\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{display:flex;flex-direction:column;width:100%;line-height:21px}:host.disabled{cursor:not-allowed}:host.disabled fw-icon{cursor:not-allowed!important}:host .chips,:host fw-progress-spinner{margin:-4px 0}:host .input-container{width:100%;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}: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"] }]
|
|
9108
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n (click)=\"focusInput($event)\"\n class=\"input-container\"\n [ngClass]=\"{ 'disabled': disabled() }\"\n [style.max-height]=\"maxHeight()\"\n [cdkMenuTriggerFor]=\"menuContent\"\n fwMenuRegister\n #inputContainer>\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 <input\n test-id=\"typeahead-input\"\n [placeholder]=\"showPlaceholder() ? placeholder() : ''\"\n [disabled]=\"disabled()\"\n [value]=\"searchValue()\"\n (keyup)=\"handleSearchChange($event)\"\n (keydown)=\"handleKey($event)\"\n (focusout)=\"onFocusLoss($event)\"\n #input\n type=\"text\"\n />\n @if(loading()) {\n <fw-progress-spinner size=\"small\"/>\n }\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>\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($event)\"\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($event)\"\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{display:flex;flex-direction:column;width:100%;line-height:21px}:host.disabled{cursor:not-allowed}:host.disabled fw-icon{cursor:not-allowed!important}:host .chips,:host fw-progress-spinner{margin:-4px 0}: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"] }]
|
|
9100
9109
|
}], propDecorators: { outsideClick: [{
|
|
9101
9110
|
type: HostListener,
|
|
9102
9111
|
args: ['document:click']
|