@flywheel-io/vision 21.0.0-beta.3 → 21.0.0-beta.4
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.
|
@@ -2748,8 +2748,6 @@ class FwContainedInputComponent {
|
|
|
2748
2748
|
if (!this.disabled()) {
|
|
2749
2749
|
const checked = this.checked();
|
|
2750
2750
|
this.writeValue(!checked);
|
|
2751
|
-
this.onChange(checked);
|
|
2752
|
-
this.change.emit(checked);
|
|
2753
2751
|
}
|
|
2754
2752
|
}
|
|
2755
2753
|
get classes() {
|
|
@@ -2760,8 +2758,10 @@ class FwContainedInputComponent {
|
|
|
2760
2758
|
[this.disabled() ? 'disabled' : ''],
|
|
2761
2759
|
].join(' ');
|
|
2762
2760
|
}
|
|
2763
|
-
writeValue(
|
|
2764
|
-
this.checked.set(
|
|
2761
|
+
writeValue(newValue) {
|
|
2762
|
+
this.checked.set(newValue);
|
|
2763
|
+
this.onChange(newValue);
|
|
2764
|
+
this.change.emit(newValue);
|
|
2765
2765
|
}
|
|
2766
2766
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2767
2767
|
registerOnChange(fn) {
|
|
@@ -5653,19 +5653,23 @@ class FwMultiSelectMenuComponent {
|
|
|
5653
5653
|
this._isOpen = false;
|
|
5654
5654
|
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
5655
5655
|
this.change = new EventEmitter();
|
|
5656
|
-
this.
|
|
5657
|
-
this.tabIndex = 0;
|
|
5658
|
-
this.onChange = () => { };
|
|
5659
|
-
this.onTouched = () => { };
|
|
5660
|
-
// custom filter for handling filterOnSelect
|
|
5661
|
-
this.customFilter = (filter, menuItems) => {
|
|
5656
|
+
this.defaultFilter = (filter, menuItems) => {
|
|
5662
5657
|
return menuItems.filter((menuItem) => {
|
|
5663
|
-
const filterMatches = menuItem.title()
|
|
5658
|
+
const filterMatches = menuItem.title()?.toLowerCase().includes(filter.toLowerCase());
|
|
5664
5659
|
const isSelected = this.value.includes(menuItem.value());
|
|
5665
5660
|
const filterBecauseSelected = isSelected && this.filterItemsOnSelect();
|
|
5666
5661
|
return filterMatches && !filterBecauseSelected;
|
|
5667
5662
|
});
|
|
5668
5663
|
};
|
|
5664
|
+
/**
|
|
5665
|
+
* function for customizing the filter behavior of the select
|
|
5666
|
+
* ! WARNING ! only works with content-projected menu items, does not work with the `options` input
|
|
5667
|
+
*/
|
|
5668
|
+
this.filterFn = input(this.defaultFilter, ...(ngDevMode ? [{ debugName: "filterFn" }] : /* istanbul ignore next */ []));
|
|
5669
|
+
this._value = [];
|
|
5670
|
+
this.tabIndex = 0;
|
|
5671
|
+
this.onChange = () => { };
|
|
5672
|
+
this.onTouched = () => { };
|
|
5669
5673
|
this.displayFocusIndicator = effect(() => {
|
|
5670
5674
|
this.displayedOptions().forEach((item, index) => {
|
|
5671
5675
|
item.focused.set(index === this.focusedIndex());
|
|
@@ -5889,13 +5893,13 @@ class FwMultiSelectMenuComponent {
|
|
|
5889
5893
|
}
|
|
5890
5894
|
}
|
|
5891
5895
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwMultiSelectMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5892
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwMultiSelectMenuComponent, isStandalone: true, selector: "fw-multi-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, valueProperty: { classPropertyName: "valueProperty", publicName: "valueProperty", isSignal: true, isRequired: false, transformFunction: null }, titleProperty: { classPropertyName: "titleProperty", publicName: "titleProperty", isSignal: true, isRequired: false, transformFunction: null }, iconProperty: { classPropertyName: "iconProperty", publicName: "iconProperty", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, useCheckbox: { classPropertyName: "useCheckbox", publicName: "useCheckbox", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedShown: { classPropertyName: "maxSelectedShown", publicName: "maxSelectedShown", isSignal: true, 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: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, optionsWidth: { classPropertyName: "optionsWidth", publicName: "optionsWidth", isSignal: true, isRequired: false, transformFunction: null }, minOptionsHeight: { classPropertyName: "minOptionsHeight", publicName: "minOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, maxOptionsHeight: { classPropertyName: "maxOptionsHeight", publicName: "maxOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", change: "change" }, host: { listeners: { "document:click": "outsideClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "tabIndex": "this.tabIndex", "class.disabled": "this.disabledClass" } }, providers: [
|
|
5896
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwMultiSelectMenuComponent, isStandalone: true, selector: "fw-multi-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, valueProperty: { classPropertyName: "valueProperty", publicName: "valueProperty", isSignal: true, isRequired: false, transformFunction: null }, titleProperty: { classPropertyName: "titleProperty", publicName: "titleProperty", isSignal: true, isRequired: false, transformFunction: null }, iconProperty: { classPropertyName: "iconProperty", publicName: "iconProperty", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, useCheckbox: { classPropertyName: "useCheckbox", publicName: "useCheckbox", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedShown: { classPropertyName: "maxSelectedShown", publicName: "maxSelectedShown", isSignal: true, 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: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, optionsWidth: { classPropertyName: "optionsWidth", publicName: "optionsWidth", isSignal: true, isRequired: false, transformFunction: null }, minOptionsHeight: { classPropertyName: "minOptionsHeight", publicName: "minOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, maxOptionsHeight: { classPropertyName: "maxOptionsHeight", publicName: "maxOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", change: "change" }, host: { listeners: { "document:click": "outsideClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "tabIndex": "this.tabIndex", "class.disabled": "this.disabledClass" } }, providers: [
|
|
5893
5897
|
{
|
|
5894
5898
|
provide: NG_VALUE_ACCESSOR,
|
|
5895
5899
|
useExisting: forwardRef(() => FwMultiSelectMenuComponent),
|
|
5896
5900
|
multi: true,
|
|
5897
5901
|
},
|
|
5898
|
-
], 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 <div\n fwMenuRegister\n class=\"chip-grid\"\n [ngClass]=\"[size()]\"\n [ngStyle]=\"{ minHeight: minHeight(), maxHeight: maxHeight() }\"\n [cdkMenuTriggerFor]=\"selectMenu\"\n >\n @if (value.length === 0) {\n <span class=\"placeholder\">{{ placeholder() }}</span>\n }\n\n <!-- CHIPS -->\n @if (value && value.length > 0) {\n <div class=\"inner-chip-grid\">\n @for (chip of selectedOptions | slice: 0 : maxSelectedShown(); track chip) {\n <fw-chip\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 >\n </fw-chip>\n }\n @if (maxSelectedShown() === 0 && value.length > 0) {\n <span class=\"selected-text\"> {{ value.length }} selected </span>\n }\n @if (value.length > maxSelectedShown() && maxSelectedShown() > 0) {\n <span class=\"max-exceeded\"> +{{ value.length - maxSelectedShown() }} more </span>\n }\n </div>\n }\n\n @if (showClear() && value.length > 0) {\n <fw-icon (click)=\"updateValue([])\">close</fw-icon>\n }\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]=\"
|
|
5902
|
+
], 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 <div\n fwMenuRegister\n class=\"chip-grid\"\n [ngClass]=\"[size()]\"\n [ngStyle]=\"{ minHeight: minHeight(), maxHeight: maxHeight() }\"\n [cdkMenuTriggerFor]=\"selectMenu\"\n >\n @if (value.length === 0) {\n <span class=\"placeholder\">{{ placeholder() }}</span>\n }\n\n <!-- CHIPS -->\n @if (value && value.length > 0) {\n <div class=\"inner-chip-grid\">\n @for (chip of selectedOptions | slice: 0 : maxSelectedShown(); track chip) {\n <fw-chip\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 >\n </fw-chip>\n }\n @if (maxSelectedShown() === 0 && value.length > 0) {\n <span class=\"selected-text\"> {{ value.length }} selected </span>\n }\n @if (value.length > maxSelectedShown() && maxSelectedShown() > 0) {\n <span class=\"max-exceeded\"> +{{ value.length - maxSelectedShown() }} more </span>\n }\n </div>\n }\n\n @if (showClear() && value.length > 0) {\n <fw-icon (click)=\"updateValue([])\">close</fw-icon>\n }\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]=\"filterFn()\"\n (filteredMenuItemChange)=\"displayedOptions.set($event)\"\n >\n @if (showSelectionInfo()) {\n <div class=\"filter-content\">\n <p>{{ value.length }} selections</p>\n <fw-button variant=\"ghost\" (click)=\"updateValue([])\">Clear</fw-button>\n </div>\n }\n <fw-menu\n [multiSelect]=\"true\"\n [disabled]=\"disabled()\"\n [value]=\"createArray(selectedValues)\"\n (change)=\"handleMenuChange($event)\"\n >\n @if (customMenuItems.length === 0) {\n @for (item of options(); track item) {\n <fw-menu-item\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 }\n }\n <ng-content\n ngProjectAs=\"custom-menu-items\"\n select=\"[fw-menu-item, fw-menu-separator, fw-menu-item-group, fw-menu-header]\"\n ></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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: FwChipComponent, selector: "fw-chip", inputs: ["maxWidth", "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: FwMenuContainerComponent, selector: "fw-menu-container, fw-menu-filter", inputs: ["width", "maxHeight", "minHeight", "border", "shadow", "showFilter", "filterText", "focusFilterOnMount", "offset", "emptyText", "filterFn", "additionalMenuItems", "additionalGroups", "additionalSeparators", "keyHandler"], outputs: ["filteredMenuItemChange", "filterChanged"] }, { kind: "component", type: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "type", "disabled", "fullWidth", "leftIcon", "rightIcon"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value"], outputs: ["disabledChange", "valueChange", "change"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["sizeChange", "disabledChange", "showCheckboxChange", "multiSelectChange", "hiddenChange", "subItemsOpenChange", "mouseEnterHandlerChange", "click", "focusedChange", "selectedChange"] }, { kind: "pipe", type: SlicePipe, name: "slice" }] }); }
|
|
5899
5903
|
}
|
|
5900
5904
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwMultiSelectMenuComponent, decorators: [{
|
|
5901
5905
|
type: Component,
|
|
@@ -5917,7 +5921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
5917
5921
|
FwMenuComponent,
|
|
5918
5922
|
FwMenuItemComponent,
|
|
5919
5923
|
SlicePipe,
|
|
5920
|
-
], template: "<div [ngStyle]=\"{ width: width() }\" #wrapper>\n <div\n fwMenuRegister\n class=\"chip-grid\"\n [ngClass]=\"[size()]\"\n [ngStyle]=\"{ minHeight: minHeight(), maxHeight: maxHeight() }\"\n [cdkMenuTriggerFor]=\"selectMenu\"\n >\n @if (value.length === 0) {\n <span class=\"placeholder\">{{ placeholder() }}</span>\n }\n\n <!-- CHIPS -->\n @if (value && value.length > 0) {\n <div class=\"inner-chip-grid\">\n @for (chip of selectedOptions | slice: 0 : maxSelectedShown(); track chip) {\n <fw-chip\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 >\n </fw-chip>\n }\n @if (maxSelectedShown() === 0 && value.length > 0) {\n <span class=\"selected-text\"> {{ value.length }} selected </span>\n }\n @if (value.length > maxSelectedShown() && maxSelectedShown() > 0) {\n <span class=\"max-exceeded\"> +{{ value.length - maxSelectedShown() }} more </span>\n }\n </div>\n }\n\n @if (showClear() && value.length > 0) {\n <fw-icon (click)=\"updateValue([])\">close</fw-icon>\n }\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]=\"
|
|
5924
|
+
], template: "<div [ngStyle]=\"{ width: width() }\" #wrapper>\n <div\n fwMenuRegister\n class=\"chip-grid\"\n [ngClass]=\"[size()]\"\n [ngStyle]=\"{ minHeight: minHeight(), maxHeight: maxHeight() }\"\n [cdkMenuTriggerFor]=\"selectMenu\"\n >\n @if (value.length === 0) {\n <span class=\"placeholder\">{{ placeholder() }}</span>\n }\n\n <!-- CHIPS -->\n @if (value && value.length > 0) {\n <div class=\"inner-chip-grid\">\n @for (chip of selectedOptions | slice: 0 : maxSelectedShown(); track chip) {\n <fw-chip\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 >\n </fw-chip>\n }\n @if (maxSelectedShown() === 0 && value.length > 0) {\n <span class=\"selected-text\"> {{ value.length }} selected </span>\n }\n @if (value.length > maxSelectedShown() && maxSelectedShown() > 0) {\n <span class=\"max-exceeded\"> +{{ value.length - maxSelectedShown() }} more </span>\n }\n </div>\n }\n\n @if (showClear() && value.length > 0) {\n <fw-icon (click)=\"updateValue([])\">close</fw-icon>\n }\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]=\"filterFn()\"\n (filteredMenuItemChange)=\"displayedOptions.set($event)\"\n >\n @if (showSelectionInfo()) {\n <div class=\"filter-content\">\n <p>{{ value.length }} selections</p>\n <fw-button variant=\"ghost\" (click)=\"updateValue([])\">Clear</fw-button>\n </div>\n }\n <fw-menu\n [multiSelect]=\"true\"\n [disabled]=\"disabled()\"\n [value]=\"createArray(selectedValues)\"\n (change)=\"handleMenuChange($event)\"\n >\n @if (customMenuItems.length === 0) {\n @for (item of options(); track item) {\n <fw-menu-item\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 }\n }\n <ng-content\n ngProjectAs=\"custom-menu-items\"\n select=\"[fw-menu-item, fw-menu-separator, fw-menu-item-group, fw-menu-header]\"\n ></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"] }]
|
|
5921
5925
|
}], propDecorators: { outsideClick: [{
|
|
5922
5926
|
type: HostListener,
|
|
5923
5927
|
args: ['document:click', ['$event']]
|
|
@@ -5935,7 +5939,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
5935
5939
|
args: [FwMenuItemComponent, { descendants: true }]
|
|
5936
5940
|
}], change: [{
|
|
5937
5941
|
type: Output
|
|
5938
|
-
}], value: [{
|
|
5942
|
+
}], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], value: [{
|
|
5939
5943
|
type: Input
|
|
5940
5944
|
}], tabIndex: [{
|
|
5941
5945
|
type: HostBinding,
|