@flywheel-io/vision 2.7.5 → 2.7.7
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/chip-list/chip-list.component.d.ts +6 -3
- package/components/select-menu/multi-select-menu/multi-select-menu.component.d.ts +4 -5
- package/components/select-menu/select-menu.component.d.ts +1 -0
- package/components/tooltip/tooltip-panel/tooltip-panel.component.d.ts +1 -1
- package/components/typeahead/typeahead.component.d.ts +11 -2
- package/esm2022/components/chip-list/chip-list.component.mjs +19 -4
- package/esm2022/components/dialog/dialog.component.mjs +2 -2
- package/esm2022/components/select-menu/multi-select-menu/multi-select-menu.component.mjs +17 -14
- package/esm2022/components/select-menu/select-menu.component.mjs +10 -4
- package/esm2022/components/textarea-input/textarea-input.component.mjs +5 -10
- package/esm2022/components/typeahead/typeahead.component.mjs +42 -16
- package/fesm2022/flywheel-io-vision.mjs +86 -42
- package/fesm2022/flywheel-io-vision.mjs.map +1 -1
- package/package.json +1 -1
- package/scss/config/overlay.scss +2 -1
- package/styles.css +2 -1
|
@@ -3,7 +3,7 @@ import { HostBinding, Input, ChangeDetectionStrategy, Component, EventEmitter, O
|
|
|
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 { BehaviorSubject, debounce, timer, distinctUntilChanged, of, Subscription, min,
|
|
6
|
+
import { BehaviorSubject, debounce, timer, distinctUntilChanged, of, Subscription, min, combineLatest, tap, switchMap, map } from 'rxjs';
|
|
7
7
|
import * as i1$2 from '@angular/cdk/overlay';
|
|
8
8
|
import { OverlayModule, Overlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
|
|
9
9
|
import * as i1$5 from '@angular/cdk/table';
|
|
@@ -3027,11 +3027,11 @@ class FwDialogComponent {
|
|
|
3027
3027
|
}, 300);
|
|
3028
3028
|
}
|
|
3029
3029
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwDialogComponent, deps: [{ token: i1$3.DialogRef, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3030
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwDialogComponent, selector: "fw-dialog", inputs: { width: "width", title: "title", icon: "icon", iconColor: "iconColor", showClose: "showClose", externalClasses: ["class", "externalClasses"] }, outputs: { close: "close" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<div class=\"fw-dialog\">\n <fw-icon-button\n *ngIf=\"showClose\"\n tabindex=\"-1\" icon=\"close\" color=\"slate\"\n (click)=\"handleCloseButton()\">\n </fw-icon-button>\n <div class=\"dialog-header\">\n <ng-content select=\"fw-dialog-header\"></ng-content>\n <div class=\"dialog-title\" *ngIf=\"title\">\n <fw-icon *ngIf=\"icon\" [color]=\"iconColor\">{{ icon }}</fw-icon>\n <h3 class=\"vision-h3\">{{ title }}</h3>\n </div>\n </div>\n <div class=\"dialog-body\">\n <ng-content select=\"fw-dialog-content\"></ng-content>\n </div>\n <div class=\"dialog-actions\">\n <ng-content select=\"fw-dialog-actions\"></ng-content>\n </div>\n</div>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;background-color:var(--card-background);border:1px solid var(--separations-border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;animation:slide-in-from-bottom .
|
|
3030
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwDialogComponent, selector: "fw-dialog", inputs: { width: "width", title: "title", icon: "icon", iconColor: "iconColor", showClose: "showClose", externalClasses: ["class", "externalClasses"] }, outputs: { close: "close" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<div class=\"fw-dialog\">\n <fw-icon-button\n *ngIf=\"showClose\"\n tabindex=\"-1\" icon=\"close\" color=\"slate\"\n (click)=\"handleCloseButton()\">\n </fw-icon-button>\n <div class=\"dialog-header\">\n <ng-content select=\"fw-dialog-header\"></ng-content>\n <div class=\"dialog-title\" *ngIf=\"title\">\n <fw-icon *ngIf=\"icon\" [color]=\"iconColor\">{{ icon }}</fw-icon>\n <h3 class=\"vision-h3\">{{ title }}</h3>\n </div>\n </div>\n <div class=\"dialog-body\">\n <ng-content select=\"fw-dialog-content\"></ng-content>\n </div>\n <div class=\"dialog-actions\">\n <ng-content select=\"fw-dialog-actions\"></ng-content>\n </div>\n</div>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;background-color:var(--card-background);border:1px solid var(--separations-border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;animation:slide-in-from-bottom .15s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .15s ease-in forwards}:host.dialog-width-extra-small{width:444px}:host.dialog-width-small{width:600px}:host.dialog-width-medium{width:900px}:host.dialog-width-large{width:1200px}:host.dialog-width-extra-large{width:1536px}:host.dialog-width-responsive{max-width:100vw;margin:0 12px}@media only screen and (width <= 575px){:host.dialog-width-responsive{max-height:92vh;margin-top:4vh;margin-bottom:4vh}:host.dialog-width-responsive .fw-dialog{border-radius:12px}:host.dialog-width-responsive .fw-dialog .dialog-body{max-height:65vh;overflow-y:auto;-webkit-overflow-scrolling:touch}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar{width:4px}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar-track{background:var(--separations-base)}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar-thumb{background:var(--slate-base);border-radius:2px}}@media only screen and (width >= 576px){:host.dialog-width-responsive{width:90vw;max-width:600px;margin:0}}@media only screen and (width >= 768px){:host.dialog-width-responsive{width:80vw;max-width:900px}:host.dialog-width-responsive .fw-dialog .dialog-body{max-height:70vh;overflow-y:auto}}@media only screen and (width >= 992px){:host.dialog-width-responsive{width:60vw;max-width:1200px}}@media only screen and (width >= 1200px){:host.dialog-width-responsive{width:50vw;max-width:1536px}}:host .fw-dialog{position:relative}:host .fw-dialog fw-icon-button{position:absolute;top:4px;right:4px}:host .fw-dialog .dialog-header{background-color:var(--card-header)}:host .fw-dialog .dialog-header .dialog-title{display:flex;gap:8px;box-sizing:border-box;border-bottom:1px solid var(--separations-base);padding:12px 16px;height:44px;overflow:hidden;align-items:center}:host .fw-dialog .dialog-header .dialog-title fw-icon{font-size:22px}:host .fw-dialog .dialog-header .dialog-title h3{overflow:clip visible;min-width:0;white-space:nowrap;text-overflow:ellipsis;margin-right:30px;flex:1}:host .fw-dialog .dialog-header h3{margin:0}:host .fw-dialog .dialog-header:empty{display:none}:host .fw-dialog .dialog-body{background-color:var(--card-background);border-bottom:1px solid var(--separations-base)}:host .fw-dialog .dialog-body:empty{display:none}:host .fw-dialog .dialog-actions{padding:16px}:host .fw-dialog .dialog-actions:empty{display:none}\n"], dependencies: [{ kind: "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"] }] }); }
|
|
3031
3031
|
}
|
|
3032
3032
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwDialogComponent, decorators: [{
|
|
3033
3033
|
type: Component,
|
|
3034
|
-
args: [{ selector: 'fw-dialog', template: "<div class=\"fw-dialog\">\n <fw-icon-button\n *ngIf=\"showClose\"\n tabindex=\"-1\" icon=\"close\" color=\"slate\"\n (click)=\"handleCloseButton()\">\n </fw-icon-button>\n <div class=\"dialog-header\">\n <ng-content select=\"fw-dialog-header\"></ng-content>\n <div class=\"dialog-title\" *ngIf=\"title\">\n <fw-icon *ngIf=\"icon\" [color]=\"iconColor\">{{ icon }}</fw-icon>\n <h3 class=\"vision-h3\">{{ title }}</h3>\n </div>\n </div>\n <div class=\"dialog-body\">\n <ng-content select=\"fw-dialog-content\"></ng-content>\n </div>\n <div class=\"dialog-actions\">\n <ng-content select=\"fw-dialog-actions\"></ng-content>\n </div>\n</div>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;background-color:var(--card-background);border:1px solid var(--separations-border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;animation:slide-in-from-bottom .
|
|
3034
|
+
args: [{ selector: 'fw-dialog', template: "<div class=\"fw-dialog\">\n <fw-icon-button\n *ngIf=\"showClose\"\n tabindex=\"-1\" icon=\"close\" color=\"slate\"\n (click)=\"handleCloseButton()\">\n </fw-icon-button>\n <div class=\"dialog-header\">\n <ng-content select=\"fw-dialog-header\"></ng-content>\n <div class=\"dialog-title\" *ngIf=\"title\">\n <fw-icon *ngIf=\"icon\" [color]=\"iconColor\">{{ icon }}</fw-icon>\n <h3 class=\"vision-h3\">{{ title }}</h3>\n </div>\n </div>\n <div class=\"dialog-body\">\n <ng-content select=\"fw-dialog-content\"></ng-content>\n </div>\n <div class=\"dialog-actions\">\n <ng-content select=\"fw-dialog-actions\"></ng-content>\n </div>\n</div>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;background-color:var(--card-background);border:1px solid var(--separations-border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;animation:slide-in-from-bottom .15s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .15s ease-in forwards}:host.dialog-width-extra-small{width:444px}:host.dialog-width-small{width:600px}:host.dialog-width-medium{width:900px}:host.dialog-width-large{width:1200px}:host.dialog-width-extra-large{width:1536px}:host.dialog-width-responsive{max-width:100vw;margin:0 12px}@media only screen and (width <= 575px){:host.dialog-width-responsive{max-height:92vh;margin-top:4vh;margin-bottom:4vh}:host.dialog-width-responsive .fw-dialog{border-radius:12px}:host.dialog-width-responsive .fw-dialog .dialog-body{max-height:65vh;overflow-y:auto;-webkit-overflow-scrolling:touch}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar{width:4px}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar-track{background:var(--separations-base)}:host.dialog-width-responsive .fw-dialog .dialog-body::-webkit-scrollbar-thumb{background:var(--slate-base);border-radius:2px}}@media only screen and (width >= 576px){:host.dialog-width-responsive{width:90vw;max-width:600px;margin:0}}@media only screen and (width >= 768px){:host.dialog-width-responsive{width:80vw;max-width:900px}:host.dialog-width-responsive .fw-dialog .dialog-body{max-height:70vh;overflow-y:auto}}@media only screen and (width >= 992px){:host.dialog-width-responsive{width:60vw;max-width:1200px}}@media only screen and (width >= 1200px){:host.dialog-width-responsive{width:50vw;max-width:1536px}}:host .fw-dialog{position:relative}:host .fw-dialog fw-icon-button{position:absolute;top:4px;right:4px}:host .fw-dialog .dialog-header{background-color:var(--card-header)}:host .fw-dialog .dialog-header .dialog-title{display:flex;gap:8px;box-sizing:border-box;border-bottom:1px solid var(--separations-base);padding:12px 16px;height:44px;overflow:hidden;align-items:center}:host .fw-dialog .dialog-header .dialog-title fw-icon{font-size:22px}:host .fw-dialog .dialog-header .dialog-title h3{overflow:clip visible;min-width:0;white-space:nowrap;text-overflow:ellipsis;margin-right:30px;flex:1}:host .fw-dialog .dialog-header h3{margin:0}:host .fw-dialog .dialog-header:empty{display:none}:host .fw-dialog .dialog-body{background-color:var(--card-background);border-bottom:1px solid var(--separations-base)}:host .fw-dialog .dialog-body:empty{display:none}:host .fw-dialog .dialog-actions{padding:16px}:host .fw-dialog .dialog-actions:empty{display:none}\n"] }]
|
|
3035
3035
|
}], ctorParameters: () => [{ type: i1$3.DialogRef, decorators: [{
|
|
3036
3036
|
type: Optional
|
|
3037
3037
|
}] }, { type: i0.ElementRef }], propDecorators: { width: [{
|
|
@@ -5755,8 +5755,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
5755
5755
|
* @see [Storybook Docs](https://cdn.flywheel.io/docs/vision/master/?path=/docs/form-controls-multi-select--docs)
|
|
5756
5756
|
*/
|
|
5757
5757
|
class FwMultiSelectMenuComponent {
|
|
5758
|
-
outsideClick() {
|
|
5758
|
+
outsideClick(event) {
|
|
5759
5759
|
if (this._isOpen) {
|
|
5760
|
+
const clickedInside = this.elementRef.nativeElement.contains(event.target);
|
|
5761
|
+
if (clickedInside) {
|
|
5762
|
+
return;
|
|
5763
|
+
}
|
|
5760
5764
|
this.trigger.close();
|
|
5761
5765
|
this._isOpen = false;
|
|
5762
5766
|
}
|
|
@@ -5770,8 +5774,7 @@ class FwMultiSelectMenuComponent {
|
|
|
5770
5774
|
set value(newValue) {
|
|
5771
5775
|
this.updateValue(newValue);
|
|
5772
5776
|
}
|
|
5773
|
-
constructor(
|
|
5774
|
-
this._changeDetectorRef = _changeDetectorRef;
|
|
5777
|
+
constructor(elementRef) {
|
|
5775
5778
|
this.elementRef = elementRef;
|
|
5776
5779
|
// options
|
|
5777
5780
|
this.options = [];
|
|
@@ -5868,8 +5871,8 @@ class FwMultiSelectMenuComponent {
|
|
|
5868
5871
|
}
|
|
5869
5872
|
};
|
|
5870
5873
|
}
|
|
5871
|
-
get
|
|
5872
|
-
return this.disabled
|
|
5874
|
+
get disabledClass() {
|
|
5875
|
+
return this.disabled;
|
|
5873
5876
|
}
|
|
5874
5877
|
registerOnChange(fn) {
|
|
5875
5878
|
this.onChange = fn;
|
|
@@ -6021,14 +6024,14 @@ class FwMultiSelectMenuComponent {
|
|
|
6021
6024
|
}, 0);
|
|
6022
6025
|
}
|
|
6023
6026
|
}
|
|
6024
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwMultiSelectMenuComponent, deps: [{ token: i0.
|
|
6025
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.12", type: FwMultiSelectMenuComponent, selector: "fw-multi-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, valueProperty: { classPropertyName: "valueProperty", publicName: "valueProperty", isSignal: false, isRequired: false, transformFunction: null }, titleProperty: { classPropertyName: "titleProperty", publicName: "titleProperty", isSignal: false, isRequired: false, transformFunction: null }, iconProperty: { classPropertyName: "iconProperty", publicName: "iconProperty", isSignal: false, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, useCheckbox: { classPropertyName: "useCheckbox", publicName: "useCheckbox", isSignal: false, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: false, isRequired: false, transformFunction: null }, maxSelectedShown: { classPropertyName: "maxSelectedShown", publicName: "maxSelectedShown", isSignal: false, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showSelectionInfo: { classPropertyName: "showSelectionInfo", publicName: "showSelectionInfo", isSignal: true, isRequired: false, transformFunction: null }, filterItemsOnSelect: { classPropertyName: "filterItemsOnSelect", publicName: "filterItemsOnSelect", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: false, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: false, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: false, isRequired: false, transformFunction: null }, optionsWidth: { classPropertyName: "optionsWidth", publicName: "optionsWidth", isSignal: false, isRequired: false, transformFunction: null }, minOptionsHeight: { classPropertyName: "minOptionsHeight", publicName: "minOptionsHeight", isSignal: false, isRequired: false, transformFunction: null }, maxOptionsHeight: { classPropertyName: "maxOptionsHeight", publicName: "maxOptionsHeight", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { listeners: { "document:click": "outsideClick()", "keydown": "handleKeyDown($event)" }, properties: { "tabIndex": "this.tabIndex", "
|
|
6027
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwMultiSelectMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6028
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.12", type: FwMultiSelectMenuComponent, selector: "fw-multi-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, valueProperty: { classPropertyName: "valueProperty", publicName: "valueProperty", isSignal: false, isRequired: false, transformFunction: null }, titleProperty: { classPropertyName: "titleProperty", publicName: "titleProperty", isSignal: false, isRequired: false, transformFunction: null }, iconProperty: { classPropertyName: "iconProperty", publicName: "iconProperty", isSignal: false, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, useCheckbox: { classPropertyName: "useCheckbox", publicName: "useCheckbox", isSignal: false, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: false, isRequired: false, transformFunction: null }, maxSelectedShown: { classPropertyName: "maxSelectedShown", publicName: "maxSelectedShown", isSignal: false, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showSelectionInfo: { classPropertyName: "showSelectionInfo", publicName: "showSelectionInfo", isSignal: true, isRequired: false, transformFunction: null }, filterItemsOnSelect: { classPropertyName: "filterItemsOnSelect", publicName: "filterItemsOnSelect", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: false, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: false, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: false, isRequired: false, transformFunction: null }, optionsWidth: { classPropertyName: "optionsWidth", publicName: "optionsWidth", isSignal: false, isRequired: false, transformFunction: null }, minOptionsHeight: { classPropertyName: "minOptionsHeight", publicName: "minOptionsHeight", isSignal: false, isRequired: false, transformFunction: null }, maxOptionsHeight: { classPropertyName: "maxOptionsHeight", publicName: "maxOptionsHeight", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { listeners: { "document:click": "outsideClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "tabIndex": "this.tabIndex", "class.disabled": "this.disabledClass" } }, providers: [
|
|
6026
6029
|
{
|
|
6027
6030
|
provide: NG_VALUE_ACCESSOR,
|
|
6028
6031
|
useExisting: forwardRef(() => FwMultiSelectMenuComponent),
|
|
6029
6032
|
multi: true,
|
|
6030
6033
|
},
|
|
6031
|
-
], queries: [{ propertyName: "customMenuItems", predicate: FwMenuItemComponent, descendants: true }], viewQueries: [{ propertyName: "menuFilter", first: true, predicate: FwMenuContainerComponent, descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }, { propertyName: "renderedMenuItems", predicate: FwMenuItemComponent, descendants: true }], ngImport: i0, template: "<div [ngStyle]=\"{width: width}\" #wrapper>\n\n <div\n fwMenuRegister\n class=\"chip-grid\"\n [ngClass]=\"[size]\"\n [ngStyle]=\"{ minHeight: minHeight, maxHeight: maxHeight }\"\n [cdkMenuTriggerFor]=\"selectMenu\">\n <span *ngIf=\"value.length === 0\" class=\"placeholder\">{{placeholder}}</span>\n\n <!-- CHIPS -->\n <div class=\"inner-chip-grid\" *ngIf=\"value && value.length>0\">\n <fw-chip\n *ngFor=\"let chip of selectedOptions | slice:0:maxSelectedShown\"\n [title]=\"chip[titleProperty]\"\n [value]=\"chip[valueProperty]\"\n [icon]=\"chip[iconProperty]\"\n color=\"primary\"\n [showClose]=\"true\"\n (close)=\"handleChipClose(chip)\"\n [selectable]=\"false\">\n </fw-chip>\n <span *ngIf=\"maxSelectedShown === 0 && value.length > 0\" class=\"selected-text\">\n {{ value.length }} selected\n </span>\n <span *ngIf=\"value.length > maxSelectedShown && maxSelectedShown > 0\" class=\"max-exceeded\">\n +{{ value.length - maxSelectedShown }} more\n </span>\n </div>\n\n <fw-icon *ngIf=\"showClear() && value.length > 0\" (click)=\"updateValue([])\">close</fw-icon>\n <fw-icon>chevron-down</fw-icon>\n </div>\n\n <!-- MENU -->\n <ng-template #selectMenu>\n <fw-menu-filter\n [keyHandler]=\"handleKeyDown\"\n [showFilter]=\"showFilter()\"\n [focusFilterOnMount]=\"showFilter()\"\n [width]=\"optionsWidth || (wrapper.offsetWidth - 2) + 'px'\"\n [additionalMenuItems]=\"this.customMenuItems.toArray()\"\n [emptyText]=\"emptyText\"\n [maxHeight]=\"maxOptionsHeight\"\n [minHeight]=\"minOptionsHeight\"\n [filterFn]=\"customFilter\"\n (filteredMenuItemChange)=\"displayedOptions.set($event)\"\n
|
|
6034
|
+
], queries: [{ propertyName: "customMenuItems", predicate: FwMenuItemComponent, descendants: true }], viewQueries: [{ propertyName: "menuFilter", first: true, predicate: FwMenuContainerComponent, descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }, { propertyName: "renderedMenuItems", predicate: FwMenuItemComponent, descendants: true }], ngImport: i0, template: "<div [ngStyle]=\"{width: width}\" #wrapper>\n\n <div\n fwMenuRegister\n class=\"chip-grid\"\n [ngClass]=\"[size]\"\n [ngStyle]=\"{ minHeight: minHeight, maxHeight: maxHeight }\"\n [cdkMenuTriggerFor]=\"selectMenu\">\n <span *ngIf=\"value.length === 0\" class=\"placeholder\">{{placeholder}}</span>\n\n <!-- CHIPS -->\n <div class=\"inner-chip-grid\" *ngIf=\"value && value.length>0\">\n <fw-chip\n *ngFor=\"let chip of selectedOptions | slice:0:maxSelectedShown\"\n [title]=\"chip[titleProperty]\"\n [value]=\"chip[valueProperty]\"\n [icon]=\"chip[iconProperty]\"\n color=\"primary\"\n [showClose]=\"true\"\n (close)=\"handleChipClose(chip)\"\n [selectable]=\"false\">\n </fw-chip>\n <span *ngIf=\"maxSelectedShown === 0 && value.length > 0\" class=\"selected-text\">\n {{ value.length }} selected\n </span>\n <span *ngIf=\"value.length > maxSelectedShown && maxSelectedShown > 0\" class=\"max-exceeded\">\n +{{ value.length - maxSelectedShown }} more\n </span>\n </div>\n\n <fw-icon *ngIf=\"showClear() && value.length > 0\" (click)=\"updateValue([])\">close</fw-icon>\n <fw-icon>chevron-down</fw-icon>\n </div>\n\n <!-- MENU -->\n <ng-template #selectMenu>\n <fw-menu-filter\n [keyHandler]=\"handleKeyDown\"\n [showFilter]=\"showFilter()\"\n [focusFilterOnMount]=\"showFilter()\"\n [width]=\"optionsWidth || (wrapper.offsetWidth - 2) + 'px'\"\n [additionalMenuItems]=\"this.customMenuItems.toArray()\"\n [emptyText]=\"emptyText\"\n [maxHeight]=\"maxOptionsHeight\"\n [minHeight]=\"minOptionsHeight\"\n [filterFn]=\"customFilter\"\n (filteredMenuItemChange)=\"displayedOptions.set($event)\"\n >\n <div class=\"filter-content\" *ngIf=\"showSelectionInfo()\">\n <p>{{value.length}} selections</p>\n <fw-button variant=\"ghost\" (click)=\"updateValue([])\">Clear</fw-button>\n </div>\n <fw-menu\n [multiSelect]=\"true\"\n [disabled]=\"disabled\"\n [value]=\"createArray(selectedValues)\"\n (change)=\"handleMenuChange($event)\">\n <ng-container *ngIf=\"customMenuItems.length === 0\">\n <fw-menu-item\n *ngFor=\"let item of options; index as $index\"\n [title]=\"item[titleProperty]\"\n [value]=\"item[valueProperty]\"\n [icon]=\"item[iconProperty]\"\n [multiSelect]=\"true\"\n [selected]=\"value.includes(item[valueProperty])\"\n [showCheckbox]=\"useCheckbox\"\n (mouseenter)=\"setFocusedIndex(item)\"\n >\n </fw-menu-item>\n </ng-container>\n <ng-content ngProjectAs=\"custom-menu-items\" select=\"[fw-menu-item, fw-menu-separator, fw-menu-item-group, fw-menu-header]\"></ng-content>\n </fw-menu>\n </fw-menu-filter>\n </ng-template>\n</div>\n", styles: [":host{pointer-events:auto}:host.disabled{opacity:.4;cursor:not-allowed}:host.disabled>div{pointer-events:none}:host .placeholder{color:var(--typography-light);font-size:14px;padding-left:4px;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden}:host .chip-grid{min-height:36px;width:100%;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;justify-content:space-between;padding:4px;align-items:center;border-radius:6px;overflow:hidden;border:1px solid var(--separations-input);cursor:pointer;font-family:Inter,sans-serif}:host .chip-grid.small{min-height:30px;padding:2px}:host .chip-grid.large{min-height:40px;padding:6px}:host .chip-grid:focus-within{border-color:var(--primary-base)}:host .chip-grid .inner-chip-grid{display:flex;flex-wrap:wrap;gap:4px;overflow:hidden auto;align-items:center;flex:1}:host .chip-grid .inner-chip-grid input{display:inline-flex;width:10px;flex-grow:1}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid fw-icon:hover{color:var(--primary-base)}:host .chip-grid .selected-text{color:var(--typography-base);font-size:14px;padding:0 2px 0 4px;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden}:host .chip-grid .max-exceeded{font-size:12px}.filter-content{display:flex;align-items:center;justify-content:space-between;padding-left:4px;padding-top:4px}.filter-content p{color:var(--typography-muted);width:fit-content;margin:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$4.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "type", "disabled", "fullWidth", "leftIcon", "rightIcon"] }, { kind: "component", type: FwChipComponent, selector: "fw-chip", inputs: ["value", "variant", "color", "icon", "title", "description", "showClose", "disabled", "selected", "textWrap", "selectable"], outputs: ["close", "select"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { 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: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] }); }
|
|
6032
6035
|
}
|
|
6033
6036
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwMultiSelectMenuComponent, decorators: [{
|
|
6034
6037
|
type: Component,
|
|
@@ -6038,10 +6041,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
6038
6041
|
useExisting: forwardRef(() => FwMultiSelectMenuComponent),
|
|
6039
6042
|
multi: true,
|
|
6040
6043
|
},
|
|
6041
|
-
], template: "<div [ngStyle]=\"{width: width}\" #wrapper>\n\n <div\n fwMenuRegister\n class=\"chip-grid\"\n [ngClass]=\"[size]\"\n [ngStyle]=\"{ minHeight: minHeight, maxHeight: maxHeight }\"\n [cdkMenuTriggerFor]=\"selectMenu\">\n <span *ngIf=\"value.length === 0\" class=\"placeholder\">{{placeholder}}</span>\n\n <!-- CHIPS -->\n <div class=\"inner-chip-grid\" *ngIf=\"value && value.length>0\">\n <fw-chip\n *ngFor=\"let chip of selectedOptions | slice:0:maxSelectedShown\"\n [title]=\"chip[titleProperty]\"\n [value]=\"chip[valueProperty]\"\n [icon]=\"chip[iconProperty]\"\n color=\"primary\"\n [showClose]=\"true\"\n (close)=\"handleChipClose(chip)\"\n [selectable]=\"false\">\n </fw-chip>\n <span *ngIf=\"maxSelectedShown === 0 && value.length > 0\" class=\"selected-text\">\n {{ value.length }} selected\n </span>\n <span *ngIf=\"value.length > maxSelectedShown && maxSelectedShown > 0\" class=\"max-exceeded\">\n +{{ value.length - maxSelectedShown }} more\n </span>\n </div>\n\n <fw-icon *ngIf=\"showClear() && value.length > 0\" (click)=\"updateValue([])\">close</fw-icon>\n <fw-icon>chevron-down</fw-icon>\n </div>\n\n <!-- MENU -->\n <ng-template #selectMenu>\n <fw-menu-filter\n [keyHandler]=\"handleKeyDown\"\n [showFilter]=\"showFilter()\"\n [focusFilterOnMount]=\"showFilter()\"\n [width]=\"optionsWidth || (wrapper.offsetWidth - 2) + 'px'\"\n [additionalMenuItems]=\"this.customMenuItems.toArray()\"\n [emptyText]=\"emptyText\"\n [maxHeight]=\"maxOptionsHeight\"\n [minHeight]=\"minOptionsHeight\"\n [filterFn]=\"customFilter\"\n (filteredMenuItemChange)=\"displayedOptions.set($event)\"\n
|
|
6042
|
-
}], ctorParameters: () => [{ type: i0.
|
|
6044
|
+
], template: "<div [ngStyle]=\"{width: width}\" #wrapper>\n\n <div\n fwMenuRegister\n class=\"chip-grid\"\n [ngClass]=\"[size]\"\n [ngStyle]=\"{ minHeight: minHeight, maxHeight: maxHeight }\"\n [cdkMenuTriggerFor]=\"selectMenu\">\n <span *ngIf=\"value.length === 0\" class=\"placeholder\">{{placeholder}}</span>\n\n <!-- CHIPS -->\n <div class=\"inner-chip-grid\" *ngIf=\"value && value.length>0\">\n <fw-chip\n *ngFor=\"let chip of selectedOptions | slice:0:maxSelectedShown\"\n [title]=\"chip[titleProperty]\"\n [value]=\"chip[valueProperty]\"\n [icon]=\"chip[iconProperty]\"\n color=\"primary\"\n [showClose]=\"true\"\n (close)=\"handleChipClose(chip)\"\n [selectable]=\"false\">\n </fw-chip>\n <span *ngIf=\"maxSelectedShown === 0 && value.length > 0\" class=\"selected-text\">\n {{ value.length }} selected\n </span>\n <span *ngIf=\"value.length > maxSelectedShown && maxSelectedShown > 0\" class=\"max-exceeded\">\n +{{ value.length - maxSelectedShown }} more\n </span>\n </div>\n\n <fw-icon *ngIf=\"showClear() && value.length > 0\" (click)=\"updateValue([])\">close</fw-icon>\n <fw-icon>chevron-down</fw-icon>\n </div>\n\n <!-- MENU -->\n <ng-template #selectMenu>\n <fw-menu-filter\n [keyHandler]=\"handleKeyDown\"\n [showFilter]=\"showFilter()\"\n [focusFilterOnMount]=\"showFilter()\"\n [width]=\"optionsWidth || (wrapper.offsetWidth - 2) + 'px'\"\n [additionalMenuItems]=\"this.customMenuItems.toArray()\"\n [emptyText]=\"emptyText\"\n [maxHeight]=\"maxOptionsHeight\"\n [minHeight]=\"minOptionsHeight\"\n [filterFn]=\"customFilter\"\n (filteredMenuItemChange)=\"displayedOptions.set($event)\"\n >\n <div class=\"filter-content\" *ngIf=\"showSelectionInfo()\">\n <p>{{value.length}} selections</p>\n <fw-button variant=\"ghost\" (click)=\"updateValue([])\">Clear</fw-button>\n </div>\n <fw-menu\n [multiSelect]=\"true\"\n [disabled]=\"disabled\"\n [value]=\"createArray(selectedValues)\"\n (change)=\"handleMenuChange($event)\">\n <ng-container *ngIf=\"customMenuItems.length === 0\">\n <fw-menu-item\n *ngFor=\"let item of options; index as $index\"\n [title]=\"item[titleProperty]\"\n [value]=\"item[valueProperty]\"\n [icon]=\"item[iconProperty]\"\n [multiSelect]=\"true\"\n [selected]=\"value.includes(item[valueProperty])\"\n [showCheckbox]=\"useCheckbox\"\n (mouseenter)=\"setFocusedIndex(item)\"\n >\n </fw-menu-item>\n </ng-container>\n <ng-content ngProjectAs=\"custom-menu-items\" select=\"[fw-menu-item, fw-menu-separator, fw-menu-item-group, fw-menu-header]\"></ng-content>\n </fw-menu>\n </fw-menu-filter>\n </ng-template>\n</div>\n", styles: [":host{pointer-events:auto}:host.disabled{opacity:.4;cursor:not-allowed}:host.disabled>div{pointer-events:none}:host .placeholder{color:var(--typography-light);font-size:14px;padding-left:4px;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden}:host .chip-grid{min-height:36px;width:100%;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;justify-content:space-between;padding:4px;align-items:center;border-radius:6px;overflow:hidden;border:1px solid var(--separations-input);cursor:pointer;font-family:Inter,sans-serif}:host .chip-grid.small{min-height:30px;padding:2px}:host .chip-grid.large{min-height:40px;padding:6px}:host .chip-grid:focus-within{border-color:var(--primary-base)}:host .chip-grid .inner-chip-grid{display:flex;flex-wrap:wrap;gap:4px;overflow:hidden auto;align-items:center;flex:1}:host .chip-grid .inner-chip-grid input{display:inline-flex;width:10px;flex-grow:1}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid fw-icon:hover{color:var(--primary-base)}:host .chip-grid .selected-text{color:var(--typography-base);font-size:14px;padding:0 2px 0 4px;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden}:host .chip-grid .max-exceeded{font-size:12px}.filter-content{display:flex;align-items:center;justify-content:space-between;padding-left:4px;padding-top:4px}.filter-content p{color:var(--typography-muted);width:fit-content;margin:0}\n"] }]
|
|
6045
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { outsideClick: [{
|
|
6043
6046
|
type: HostListener,
|
|
6044
|
-
args: ['document:click']
|
|
6047
|
+
args: ['document:click', ['$event']]
|
|
6045
6048
|
}], options: [{
|
|
6046
6049
|
type: Input
|
|
6047
6050
|
}], valueProperty: [{
|
|
@@ -6095,9 +6098,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
6095
6098
|
}], tabIndex: [{
|
|
6096
6099
|
type: HostBinding,
|
|
6097
6100
|
args: ['tabIndex']
|
|
6098
|
-
}],
|
|
6101
|
+
}], disabledClass: [{
|
|
6099
6102
|
type: HostBinding,
|
|
6100
|
-
args: ['
|
|
6103
|
+
args: ['class.disabled']
|
|
6101
6104
|
}], handleKeyDown: [{
|
|
6102
6105
|
type: HostListener,
|
|
6103
6106
|
args: ['keydown', ['$event']]
|
|
@@ -6115,6 +6118,9 @@ class FwSelectMenuComponent {
|
|
|
6115
6118
|
this._isOpen = true;
|
|
6116
6119
|
}
|
|
6117
6120
|
}
|
|
6121
|
+
get disabledClass() {
|
|
6122
|
+
return this.disabled;
|
|
6123
|
+
}
|
|
6118
6124
|
get value() {
|
|
6119
6125
|
return this._value;
|
|
6120
6126
|
}
|
|
@@ -6364,11 +6370,11 @@ class FwSelectMenuComponent {
|
|
|
6364
6370
|
this.filterChanged.emit(value);
|
|
6365
6371
|
}
|
|
6366
6372
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwSelectMenuComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i8.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6367
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwSelectMenuComponent, selector: "fw-select", inputs: { options: "options", valueProperty: "valueProperty", useFullOptionAsValue: "useFullOptionAsValue", titleProperty: "titleProperty", iconProperty: "iconProperty", staticIcon: "staticIcon", descriptionProperty: "descriptionProperty", showFilter: "showFilter", showReset: "showReset", disabled: "disabled", errored: "errored", width: "width", optionsWidth: "optionsWidth", minOptionsHeight: "minOptionsHeight", maxOptionsHeight: "maxOptionsHeight", size: "size", placeholder: "placeholder", value: "value" }, outputs: { change: "change", filterChanged: "filterChanged" }, host: { listeners: { "document:click": "outsideClick($event.target)" } }, queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent, descendants: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #wrapper [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n <fw-text-input\n fwMenuRegister\n [cdkMenuTriggerFor]=\"selectMenu\"\n [value]=\"selectTitle\"\n [leftIcon]=\"staticIcon || selectIcon || null\"\n [rightIcon]=\"(selectTitle&&showReset)?'close-circled':'chevron-down'\"\n (rightIconAction)=\"handleReset()\"\n [useActionableIcons]=\"true\"\n [placeholder]=\"placeholder\"\n [
|
|
6373
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwSelectMenuComponent, selector: "fw-select", inputs: { options: "options", valueProperty: "valueProperty", useFullOptionAsValue: "useFullOptionAsValue", titleProperty: "titleProperty", iconProperty: "iconProperty", staticIcon: "staticIcon", descriptionProperty: "descriptionProperty", showFilter: "showFilter", showReset: "showReset", disabled: "disabled", errored: "errored", width: "width", optionsWidth: "optionsWidth", minOptionsHeight: "minOptionsHeight", maxOptionsHeight: "maxOptionsHeight", size: "size", placeholder: "placeholder", value: "value" }, outputs: { change: "change", filterChanged: "filterChanged" }, host: { listeners: { "document:click": "outsideClick($event.target)" }, properties: { "class.disabled": "this.disabledClass" } }, queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent, descendants: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #wrapper [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n <fw-text-input\n fwMenuRegister\n [cdkMenuTriggerFor]=\"selectMenu\"\n [value]=\"selectTitle\"\n [leftIcon]=\"staticIcon || selectIcon || null\"\n [rightIcon]=\"(selectTitle&&showReset)?'close-circled':'chevron-down'\"\n (rightIconAction)=\"handleReset()\"\n [useActionableIcons]=\"true\"\n [placeholder]=\"placeholder\"\n [size]=\"size\"\n [error]=\"errored || (invalid && touched)\"\n (keyup)=\"handleKeyUp($event)\"\n (keydown)=\"handleKeyDown($event)\"\n [readOnly]=\"true\">\n </fw-text-input>\n <ng-template #selectMenu>\n <fw-menu-container\n [filterText]=\"filterValue\"\n *ngIf=\"!disabled\" [showFilter]=\"showFilter\" [width]=\"optionsWidth || wrapper.offsetWidth + 'px'\"\n [maxHeight]=\"maxOptionsHeight\" [minHeight]=\"minOptionsHeight\" (filterChanged)=\"onFilterChanged($event)\">\n <fw-menu [disabled]=\"disabled\" [value]=\"selectValue\" (change)=\"handleClick($any($event))\">\n <ng-container *ngIf=\"menuItems.length===0\">\n <fw-menu-item\n *ngFor=\"let item of options\"\n [title]=\"item[titleProperty]?.toString()\"\n [description]=\"item[descriptionProperty]\"\n [value]=\"useFullOptionAsValue ? JSON.stringify(item) : item?.[valueProperty]?.toString()\"\n [icon]=\"item[iconProperty]\"\n [disabled]=\"$any(item).disabled\"\n >\n </fw-menu-item>\n </ng-container>\n <div #menuContentWrapper>\n <ng-content select=\"[fw-menu-item, fw-menu-separator, fw-menu-item-group]\"></ng-content>\n </div>\n </fw-menu>\n </fw-menu-container>\n </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box;max-width:100%}:host.disabled{opacity:.4;cursor:not-allowed}:host.disabled>div{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$4.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { 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: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "rightIcon", "prefix", "context", "helperText", "errorText", "placeholder", "readOnly", "size", "type", "maxLength", "autofocus", "autocomplete", "value", "error", "width"], outputs: ["leftIconAction", "rightIconAction"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }] }); }
|
|
6368
6374
|
}
|
|
6369
6375
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwSelectMenuComponent, decorators: [{
|
|
6370
6376
|
type: Component,
|
|
6371
|
-
args: [{ selector: 'fw-select', template: "<div #wrapper [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n <fw-text-input\n fwMenuRegister\n [cdkMenuTriggerFor]=\"selectMenu\"\n [value]=\"selectTitle\"\n [leftIcon]=\"staticIcon || selectIcon || null\"\n [rightIcon]=\"(selectTitle&&showReset)?'close-circled':'chevron-down'\"\n (rightIconAction)=\"handleReset()\"\n [useActionableIcons]=\"true\"\n [placeholder]=\"placeholder\"\n [
|
|
6377
|
+
args: [{ selector: 'fw-select', template: "<div #wrapper [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n <fw-text-input\n fwMenuRegister\n [cdkMenuTriggerFor]=\"selectMenu\"\n [value]=\"selectTitle\"\n [leftIcon]=\"staticIcon || selectIcon || null\"\n [rightIcon]=\"(selectTitle&&showReset)?'close-circled':'chevron-down'\"\n (rightIconAction)=\"handleReset()\"\n [useActionableIcons]=\"true\"\n [placeholder]=\"placeholder\"\n [size]=\"size\"\n [error]=\"errored || (invalid && touched)\"\n (keyup)=\"handleKeyUp($event)\"\n (keydown)=\"handleKeyDown($event)\"\n [readOnly]=\"true\">\n </fw-text-input>\n <ng-template #selectMenu>\n <fw-menu-container\n [filterText]=\"filterValue\"\n *ngIf=\"!disabled\" [showFilter]=\"showFilter\" [width]=\"optionsWidth || wrapper.offsetWidth + 'px'\"\n [maxHeight]=\"maxOptionsHeight\" [minHeight]=\"minOptionsHeight\" (filterChanged)=\"onFilterChanged($event)\">\n <fw-menu [disabled]=\"disabled\" [value]=\"selectValue\" (change)=\"handleClick($any($event))\">\n <ng-container *ngIf=\"menuItems.length===0\">\n <fw-menu-item\n *ngFor=\"let item of options\"\n [title]=\"item[titleProperty]?.toString()\"\n [description]=\"item[descriptionProperty]\"\n [value]=\"useFullOptionAsValue ? JSON.stringify(item) : item?.[valueProperty]?.toString()\"\n [icon]=\"item[iconProperty]\"\n [disabled]=\"$any(item).disabled\"\n >\n </fw-menu-item>\n </ng-container>\n <div #menuContentWrapper>\n <ng-content select=\"[fw-menu-item, fw-menu-separator, fw-menu-item-group]\"></ng-content>\n </div>\n </fw-menu>\n </fw-menu-container>\n </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box;max-width:100%}:host.disabled{opacity:.4;cursor:not-allowed}:host.disabled>div{pointer-events:none}\n"] }]
|
|
6372
6378
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i8.NgControl, decorators: [{
|
|
6373
6379
|
type: Optional
|
|
6374
6380
|
}, {
|
|
@@ -6376,6 +6382,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
6376
6382
|
}] }], propDecorators: { outsideClick: [{
|
|
6377
6383
|
type: HostListener,
|
|
6378
6384
|
args: ['document:click', ['$event.target']]
|
|
6385
|
+
}], disabledClass: [{
|
|
6386
|
+
type: HostBinding,
|
|
6387
|
+
args: ['class.disabled']
|
|
6379
6388
|
}], options: [{
|
|
6380
6389
|
type: Input
|
|
6381
6390
|
}], valueProperty: [{
|
|
@@ -8698,13 +8707,8 @@ class FwTextAreaInputComponent {
|
|
|
8698
8707
|
this.disabled = isDisabled;
|
|
8699
8708
|
}
|
|
8700
8709
|
changeHandler(event) {
|
|
8701
|
-
|
|
8702
|
-
|
|
8703
|
-
const isReactiveForms = this.onChange && this.onChange.toString() !== 'value => {\n }';
|
|
8704
|
-
if (!isReactiveForms) {
|
|
8705
|
-
this.value = event.target.value;
|
|
8706
|
-
}
|
|
8707
|
-
this.onChange(event.target.value);
|
|
8710
|
+
this.value = event.target.value;
|
|
8711
|
+
this.onChange(this.value);
|
|
8708
8712
|
this.onTouch();
|
|
8709
8713
|
setTimeout(() => {
|
|
8710
8714
|
if (this.autosize) {
|
|
@@ -8720,7 +8724,7 @@ class FwTextAreaInputComponent {
|
|
|
8720
8724
|
provide: NG_VALUE_ACCESSOR,
|
|
8721
8725
|
useExisting: FwTextAreaInputComponent,
|
|
8722
8726
|
multi: true,
|
|
8723
|
-
}], viewQueries: [{ propertyName: "autosize", first: true, predicate: CdkTextareaAutosize, descendants: true }], ngImport: i0, template: "<div class=\"textarea-wrapper\" [ngStyle]=\"{width: width}\">\n <textarea\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n [cdkAutosizeMinRows]=\"minRows\"\n [cdkAutosizeMaxRows]=\"maxRows\"\n (keyup)=\"changeHandler($event)\"\n (blur)=\"blurHandler()\"\n [placeholder]=\"placeholder || ''\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [readOnly]=\"readOnly\"\n [autofocus]=\"autofocus\">\n </textarea>\n <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n</div>\n<p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n<p class=\"vision-p4 error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer;color:inherit}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}:host{display:flex;flex-direction:column}:host .textarea-wrapper{border-radius:6px;overflow:hidden;border:1px solid var(--separations-input);display:flex;position:relative}:host .textarea-wrapper:focus-within{border:1px solid var(--primary-base)}:host .textarea-wrapper .error-icon{display:none}:host textarea{min-width:0;font-size:14px;flex:1;padding:8px;color:var(--typography-base);background:var(--page-light);border:none;font-family:Inter,sans-serif;overflow:auto;box-sizing:border-box}:host textarea:focus{outline:none;border:none}:host textarea:disabled{opacity:.4;cursor:not-allowed}:host textarea::placeholder{color:var(--typography-light)}:host .helper-text,:host .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}:host .error-text{text-align:left;color:var(--red-base);display:none}:host.errored .textarea-wrapper{border:1px solid var(--red-base)}:host.errored .textarea-wrapper .error-icon{position:absolute;right:6px;top:6px;font-size:18px;color:var(--red-base);display:inline!important}:host.errored .error-text{display:block}:host.ng-touched.ng-invalid .textarea-wrapper{border:1px solid red;border-radius:6px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] }); }
|
|
8727
|
+
}], viewQueries: [{ propertyName: "autosize", first: true, predicate: CdkTextareaAutosize, descendants: true }], ngImport: i0, template: "<div class=\"textarea-wrapper\" [ngStyle]=\"{width: width}\">\n <textarea\n test-id=\"textarea\"\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n [cdkAutosizeMinRows]=\"minRows\"\n [cdkAutosizeMaxRows]=\"maxRows\"\n (keyup)=\"changeHandler($event)\"\n (blur)=\"blurHandler()\"\n [placeholder]=\"placeholder || ''\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [readOnly]=\"readOnly\"\n [autofocus]=\"autofocus\">\n </textarea>\n <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n</div>\n<p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n<p class=\"vision-p4 error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer;color:inherit}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}:host{display:flex;flex-direction:column}:host .textarea-wrapper{border-radius:6px;overflow:hidden;border:1px solid var(--separations-input);display:flex;position:relative}:host .textarea-wrapper:focus-within{border:1px solid var(--primary-base)}:host .textarea-wrapper .error-icon{display:none}:host textarea{min-width:0;font-size:14px;flex:1;padding:8px;color:var(--typography-base);background:var(--page-light);border:none;font-family:Inter,sans-serif;overflow:auto;box-sizing:border-box}:host textarea:focus{outline:none;border:none}:host textarea:disabled{opacity:.4;cursor:not-allowed}:host textarea::placeholder{color:var(--typography-light)}:host .helper-text,:host .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}:host .error-text{text-align:left;color:var(--red-base);display:none}:host.errored .textarea-wrapper{border:1px solid var(--red-base)}:host.errored .textarea-wrapper .error-icon{position:absolute;right:6px;top:6px;font-size:18px;color:var(--red-base);display:inline!important}:host.errored .error-text{display:block}:host.ng-touched.ng-invalid .textarea-wrapper{border:1px solid red;border-radius:6px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] }); }
|
|
8724
8728
|
}
|
|
8725
8729
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTextAreaInputComponent, decorators: [{
|
|
8726
8730
|
type: Component,
|
|
@@ -8728,7 +8732,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
8728
8732
|
provide: NG_VALUE_ACCESSOR,
|
|
8729
8733
|
useExisting: FwTextAreaInputComponent,
|
|
8730
8734
|
multi: true,
|
|
8731
|
-
}], template: "<div class=\"textarea-wrapper\" [ngStyle]=\"{width: width}\">\n <textarea\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n [cdkAutosizeMinRows]=\"minRows\"\n [cdkAutosizeMaxRows]=\"maxRows\"\n (keyup)=\"changeHandler($event)\"\n (blur)=\"blurHandler()\"\n [placeholder]=\"placeholder || ''\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [readOnly]=\"readOnly\"\n [autofocus]=\"autofocus\">\n </textarea>\n <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n</div>\n<p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n<p class=\"vision-p4 error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer;color:inherit}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}:host{display:flex;flex-direction:column}:host .textarea-wrapper{border-radius:6px;overflow:hidden;border:1px solid var(--separations-input);display:flex;position:relative}:host .textarea-wrapper:focus-within{border:1px solid var(--primary-base)}:host .textarea-wrapper .error-icon{display:none}:host textarea{min-width:0;font-size:14px;flex:1;padding:8px;color:var(--typography-base);background:var(--page-light);border:none;font-family:Inter,sans-serif;overflow:auto;box-sizing:border-box}:host textarea:focus{outline:none;border:none}:host textarea:disabled{opacity:.4;cursor:not-allowed}:host textarea::placeholder{color:var(--typography-light)}:host .helper-text,:host .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}:host .error-text{text-align:left;color:var(--red-base);display:none}:host.errored .textarea-wrapper{border:1px solid var(--red-base)}:host.errored .textarea-wrapper .error-icon{position:absolute;right:6px;top:6px;font-size:18px;color:var(--red-base);display:inline!important}:host.errored .error-text{display:block}:host.ng-touched.ng-invalid .textarea-wrapper{border:1px solid red;border-radius:6px}\n"] }]
|
|
8735
|
+
}], template: "<div class=\"textarea-wrapper\" [ngStyle]=\"{width: width}\">\n <textarea\n test-id=\"textarea\"\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n [cdkAutosizeMinRows]=\"minRows\"\n [cdkAutosizeMaxRows]=\"maxRows\"\n (keyup)=\"changeHandler($event)\"\n (blur)=\"blurHandler()\"\n [placeholder]=\"placeholder || ''\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [readOnly]=\"readOnly\"\n [autofocus]=\"autofocus\">\n </textarea>\n <fw-icon class=\"error-icon\">warning-circle</fw-icon>\n</div>\n<p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText\">{{ helperText }}</p>\n<p class=\"vision-p4 error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer;color:inherit}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}:host{display:flex;flex-direction:column}:host .textarea-wrapper{border-radius:6px;overflow:hidden;border:1px solid var(--separations-input);display:flex;position:relative}:host .textarea-wrapper:focus-within{border:1px solid var(--primary-base)}:host .textarea-wrapper .error-icon{display:none}:host textarea{min-width:0;font-size:14px;flex:1;padding:8px;color:var(--typography-base);background:var(--page-light);border:none;font-family:Inter,sans-serif;overflow:auto;box-sizing:border-box}:host textarea:focus{outline:none;border:none}:host textarea:disabled{opacity:.4;cursor:not-allowed}:host textarea::placeholder{color:var(--typography-light)}:host .helper-text,:host .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}:host .error-text{text-align:left;color:var(--red-base);display:none}:host.errored .textarea-wrapper{border:1px solid var(--red-base)}:host.errored .textarea-wrapper .error-icon{position:absolute;right:6px;top:6px;font-size:18px;color:var(--red-base);display:inline!important}:host.errored .error-text{display:block}:host.ng-touched.ng-invalid .textarea-wrapper{border:1px solid red;border-radius:6px}\n"] }]
|
|
8732
8736
|
}], propDecorators: { minRows: [{
|
|
8733
8737
|
type: Input
|
|
8734
8738
|
}], maxRows: [{
|
|
@@ -8796,6 +8800,7 @@ class FwChipListComponent {
|
|
|
8796
8800
|
this.hostElement = inject(ElementRef);
|
|
8797
8801
|
this.childChipElementRefs = contentChildren(FwChipComponent, { read: ElementRef });
|
|
8798
8802
|
this.moreText = viewChild.required('moreText');
|
|
8803
|
+
this.subscriptions = [];
|
|
8799
8804
|
this.hiddenElementCount = signal(0);
|
|
8800
8805
|
this.hiddenChips = signal([]);
|
|
8801
8806
|
this.hiddenLabels = computed(() => {
|
|
@@ -8805,6 +8810,7 @@ class FwChipListComponent {
|
|
|
8805
8810
|
return contentSpan.innerText;
|
|
8806
8811
|
}).join(', ');
|
|
8807
8812
|
});
|
|
8813
|
+
this.resizeDebounceMs = input(100);
|
|
8808
8814
|
this.childrenChanged = effect(() => {
|
|
8809
8815
|
this.childChipElementRefs();
|
|
8810
8816
|
this.calcChipOverflow();
|
|
@@ -8814,7 +8820,16 @@ class FwChipListComponent {
|
|
|
8814
8820
|
});
|
|
8815
8821
|
}
|
|
8816
8822
|
ngOnInit() {
|
|
8817
|
-
|
|
8823
|
+
// wire up resize observer to rxjs and debouce
|
|
8824
|
+
const resize$ = new BehaviorSubject([]);
|
|
8825
|
+
const recalcOnResize$ = resize$.pipe(debounce(() => timer(this.resizeDebounceMs())), // debounce otherwise it can run EVERY frame
|
|
8826
|
+
distinctUntilChanged());
|
|
8827
|
+
const resizeObserver = new ResizeObserver((resizeEntries) => {
|
|
8828
|
+
resize$.next(resizeEntries);
|
|
8829
|
+
});
|
|
8830
|
+
resizeObserver.observe(this.hostElement.nativeElement, {});
|
|
8831
|
+
const sub = recalcOnResize$.subscribe(() => this.calcChipOverflow());
|
|
8832
|
+
this.subscriptions.push(sub);
|
|
8818
8833
|
}
|
|
8819
8834
|
calcChipOverflow() {
|
|
8820
8835
|
const hostRect = this.hostElement.nativeElement.getBoundingClientRect();
|
|
@@ -8844,8 +8859,11 @@ class FwChipListComponent {
|
|
|
8844
8859
|
// eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
|
|
8845
8860
|
this.changeDetector.detectChanges();
|
|
8846
8861
|
}
|
|
8862
|
+
ngOnDestroy() {
|
|
8863
|
+
this.subscriptions.forEach(sub => sub.unsubscribe());
|
|
8864
|
+
}
|
|
8847
8865
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwChipListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8848
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.12", type: FwChipListComponent, isStandalone: true, selector: "fw-chip-list", 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<fw-tooltip [title]=\"hiddenLabels()\">\n <p #moreText> +{{hiddenChips().length}} more </p>\n</fw-tooltip>\n", styles: [":host{flex-basis:max-content;display:flex;flex-flow:row wrap;gap:8px;align-items:flex-start;justify-content:flex-start;max-height:28px;overflow:hidden}: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"] }] }); }
|
|
8866
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.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 } }, 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<fw-tooltip [title]=\"hiddenLabels()\">\n <p #moreText> +{{hiddenChips().length}} more </p>\n</fw-tooltip>\n", styles: [":host{flex-basis:max-content;display:flex;flex-flow:row wrap;gap:8px;align-items:flex-start;justify-content:flex-start;max-height:28px;overflow:hidden}: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"] }] }); }
|
|
8849
8867
|
}
|
|
8850
8868
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwChipListComponent, decorators: [{
|
|
8851
8869
|
type: Component,
|
|
@@ -8870,7 +8888,9 @@ class FwTypeaheadComponent {
|
|
|
8870
8888
|
this.onTouched = () => {
|
|
8871
8889
|
};
|
|
8872
8890
|
this.value = model([]);
|
|
8891
|
+
this.value$ = toObservable(this.value);
|
|
8873
8892
|
this.optionsInput = input([], { alias: 'options' });
|
|
8893
|
+
this.optionsInput$ = toObservable(this.optionsInput);
|
|
8874
8894
|
this.maxOptionsHeight = input('400px');
|
|
8875
8895
|
this.minOptionsHeight = input('0px');
|
|
8876
8896
|
this.optionsWidth = input('');
|
|
@@ -8881,31 +8901,53 @@ class FwTypeaheadComponent {
|
|
|
8881
8901
|
this.searchValueChanges$ = toObservable(this.searchValue);
|
|
8882
8902
|
this.allowNew = input(true);
|
|
8883
8903
|
this.placeholder = input('Enter tags...');
|
|
8884
|
-
|
|
8885
|
-
|
|
8886
|
-
|
|
8904
|
+
/**
|
|
8905
|
+
* Options after they've been both filtered for matching the search and already selected
|
|
8906
|
+
*/
|
|
8907
|
+
this.filteredOptions$ = combineLatest([
|
|
8908
|
+
this.searchValueChanges$,
|
|
8909
|
+
this.optionsInput$,
|
|
8910
|
+
]).pipe(tap(() => this.loading.set(true)),
|
|
8911
|
+
// first determine if it's a function or static options
|
|
8912
|
+
switchMap(([searchString, optionInput]) => {
|
|
8913
|
+
if (typeof optionInput === 'function') {
|
|
8914
|
+
const fetchingFunction = optionInput;
|
|
8887
8915
|
return fetchingFunction(searchString);
|
|
8888
8916
|
}
|
|
8889
|
-
|
|
8890
|
-
|
|
8891
|
-
|
|
8892
|
-
|
|
8893
|
-
|
|
8917
|
+
else {
|
|
8918
|
+
// if they're static options we need to do the search filtering
|
|
8919
|
+
const filteredOptionInput = optionInput?.filter(opt => opt.toLowerCase().includes(searchString.toLowerCase()));
|
|
8920
|
+
return of(filteredOptionInput);
|
|
8921
|
+
}
|
|
8922
|
+
}),
|
|
8923
|
+
// next filter out already selected values
|
|
8924
|
+
switchMap(options => combineLatest([of(options), this.value$])), map(([options, currentValue]) => {
|
|
8925
|
+
return options?.filter(option => {
|
|
8926
|
+
const alreadySelected = currentValue.find(val => val.toLowerCase() === option.toLowerCase());
|
|
8894
8927
|
return !alreadySelected;
|
|
8895
8928
|
});
|
|
8896
8929
|
}), tap(() => this.loading.set(false)));
|
|
8897
|
-
|
|
8930
|
+
/**
|
|
8931
|
+
* Options after they've been both filtered for matching the search and already selected
|
|
8932
|
+
*/
|
|
8933
|
+
this.filteredOptions = toSignal(this.filteredOptions$);
|
|
8898
8934
|
this.displayNewOption = computed(() => {
|
|
8899
8935
|
const newValue = this.searchValue();
|
|
8900
8936
|
if (!newValue) {
|
|
8901
8937
|
return false;
|
|
8902
8938
|
}
|
|
8903
|
-
const directMatch = this.
|
|
8939
|
+
const directMatch = this.filteredOptions()?.includes?.(newValue);
|
|
8904
8940
|
const loading = this.loading();
|
|
8905
8941
|
const alreadySelected = Boolean(this.value().find(val => val.toLowerCase() === newValue.toLowerCase()));
|
|
8906
8942
|
return this.allowNew() && !alreadySelected && (!directMatch || loading);
|
|
8907
8943
|
});
|
|
8908
8944
|
this.addValue = (newValue) => {
|
|
8945
|
+
const isInOptions = this.filteredOptions().includes(newValue);
|
|
8946
|
+
const isNewWhileDisallowed = !this.allowNew() && !isInOptions;
|
|
8947
|
+
const isDuplicate = this.value().includes(newValue.toLowerCase());
|
|
8948
|
+
if (isNewWhileDisallowed || isDuplicate) {
|
|
8949
|
+
return;
|
|
8950
|
+
}
|
|
8909
8951
|
this.value.update(prevValue => [
|
|
8910
8952
|
...prevValue || [],
|
|
8911
8953
|
newValue,
|
|
@@ -8964,7 +9006,6 @@ class FwTypeaheadComponent {
|
|
|
8964
9006
|
};
|
|
8965
9007
|
}
|
|
8966
9008
|
outsideClick() {
|
|
8967
|
-
this.onTouched();
|
|
8968
9009
|
this.trigger().close();
|
|
8969
9010
|
}
|
|
8970
9011
|
setDisabledState(isDisabled) {
|
|
@@ -9005,6 +9046,9 @@ class FwTypeaheadComponent {
|
|
|
9005
9046
|
// eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
|
|
9006
9047
|
this.inputRef().nativeElement.focus();
|
|
9007
9048
|
}
|
|
9049
|
+
onFocusLoss(_) {
|
|
9050
|
+
this.onTouched();
|
|
9051
|
+
}
|
|
9008
9052
|
/* eslint-enable */
|
|
9009
9053
|
handleKey(e) {
|
|
9010
9054
|
const handler = this.keyHandlerMap[e.key];
|
|
@@ -9042,7 +9086,7 @@ class FwTypeaheadComponent {
|
|
|
9042
9086
|
useExisting: forwardRef(() => FwTypeaheadComponent),
|
|
9043
9087
|
multi: true,
|
|
9044
9088
|
},
|
|
9045
|
-
], 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 #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
|
|
9089
|
+
], 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 }); }
|
|
9046
9090
|
}
|
|
9047
9091
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwTypeaheadComponent, decorators: [{
|
|
9048
9092
|
type: Component,
|
|
@@ -9062,7 +9106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
9062
9106
|
useExisting: forwardRef(() => FwTypeaheadComponent),
|
|
9063
9107
|
multi: true,
|
|
9064
9108
|
},
|
|
9065
|
-
], 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 #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
|
|
9109
|
+
], 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"] }]
|
|
9066
9110
|
}], propDecorators: { outsideClick: [{
|
|
9067
9111
|
type: HostListener,
|
|
9068
9112
|
args: ['document:click']
|