@flywheel-io/vision 2.0.0-beta.8 → 2.0.0-beta.9

package/fesm2020/flywheel-io-vision.mjs

@@ -3798,6 +3798,7 @@ class FwTextInputComponent {
         this.maxLength = 255;
         // we bind this to host because that's where angular form apis put the error classes
         this.error = false;
+        this.width = '100%';
         this.value = '';
         this.externalControl = null;
         this.onTouch = () => {
@@ -3836,7 +3837,7 @@ class FwTextInputComponent {
     }
 }
 FwTextInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FwTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FwTextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FwTextInputComponent, selector: "fw-text-input", inputs: { disabled: "disabled", useActionableIcons: "useActionableIcons", leftIcon: "leftIcon", rightIcon: "rightIcon", prefix: "prefix", context: "context", helperText: "helperText", errorText: "errorText", placeholder: "placeholder", readOnly: "readOnly", size: "size", type: "type", maxLength: "maxLength", autofocus: "autofocus", autocomplete: "autocomplete", error: "error", value: "value" }, outputs: { leftIconAction: "leftIconAction", rightIconAction: "rightIconAction" }, host: { properties: { "class.errored": "this.error" } }, providers: [{
+FwTextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FwTextInputComponent, selector: "fw-text-input", inputs: { disabled: "disabled", useActionableIcons: "useActionableIcons", leftIcon: "leftIcon", rightIcon: "rightIcon", prefix: "prefix", context: "context", helperText: "helperText", errorText: "errorText", placeholder: "placeholder", readOnly: "readOnly", size: "size", type: "type", maxLength: "maxLength", autofocus: "autofocus", autocomplete: "autocomplete", error: "error", width: "width", value: "value" }, outputs: { leftIconAction: "leftIconAction", rightIconAction: "rightIconAction" }, host: { properties: { "class.errored": "this.error", "style.width": "this.width" } }, providers: [{
             provide: NG_VALUE_ACCESSOR,
             useExisting: FwTextInputComponent,
             multi: true,
@@ -3890,6 +3891,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], textInput: [{
                 type: ContentChild,
                 args: ['textInput', { static: false }]
+            }], width: [{
+                type: HostBinding,
+                args: ['style.width']
+            }, {
+                type: Input
             }], value: [{
                 type: Input
             }] } });
@@ -4251,7 +4257,7 @@ class FwMenuContainerComponent {
     }
 }
 FwMenuContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FwMenuContainerComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-FwMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: { width: "width", maxHeight: "maxHeight", minHeight: "minHeight", border: "border", shadow: "shadow", showFilter: "showFilter", filterText: "filterText", offset: "offset", collapsed: "collapsed" }, outputs: { filterChanged: "filterChanged" }, host: { properties: { "attr.class": "this.classes", "style": "this.style" } }, queries: [{ propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], ngImport: i0, template: "<div *ngIf=\"showFilter\" class=\"filter-box\" cdkMenuBar>\n  <fw-text-input\n    placeholder=\"Search\" leftIcon=\"search\" autofocus\n    [value]=\"filterText\" (input)=\"filterTextChange($event)\">\n  </fw-text-input>\n</div>\n<div class=\"menu-wrapper\" [ngClass]=\"[showFilter?'filtered':'', collapsed?'collapsed':'']\">\n  <ng-content></ng-content>\n</div>\n", styles: [".fw-menu-container{display:flex;border-radius:8px;background:var(--card-background);position:relative}.fw-menu-container.border-default{border:1px solid var(--separations-border)}.fw-menu-container .filter-box{border-top-left-radius:8px;border-top-right-radius:8px;padding:8px;border-bottom:1px solid var(--separations-base);background-color:var(--card-background);position:absolute;left:0;right:0;z-index:1}.fw-menu-container .menu-wrapper{flex:1;padding:6px 4px;scroll-padding:17px;overflow:hidden auto}.fw-menu-container .menu-wrapper.collapsed{scrollbar-width:none}.fw-menu-container .menu-wrapper.filtered{margin-top:54px}.fw-menu-container fw-menu-separator{margin:6px -8px}\n"], dependencies: [{ kind: "directive", type: i1$4.CdkMenuBar, selector: "[cdkMenuBar]", exportAs: ["cdkMenuBar"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "rightIcon", "prefix", "context", "helperText", "errorText", "placeholder", "readOnly", "size", "type", "maxLength", "autofocus", "autocomplete", "error", "value"], outputs: ["leftIconAction", "rightIconAction"] }], encapsulation: i0.ViewEncapsulation.None });
+FwMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: { width: "width", maxHeight: "maxHeight", minHeight: "minHeight", border: "border", shadow: "shadow", showFilter: "showFilter", filterText: "filterText", offset: "offset", collapsed: "collapsed" }, outputs: { filterChanged: "filterChanged" }, host: { properties: { "attr.class": "this.classes", "style": "this.style" } }, queries: [{ propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], ngImport: i0, template: "<div *ngIf=\"showFilter\" class=\"filter-box\" cdkMenuBar>\n  <fw-text-input\n    placeholder=\"Search\" leftIcon=\"search\" autofocus\n    [value]=\"filterText\" (input)=\"filterTextChange($event)\">\n  </fw-text-input>\n</div>\n<div class=\"menu-wrapper\" [ngClass]=\"[showFilter?'filtered':'', collapsed?'collapsed':'']\">\n  <ng-content></ng-content>\n</div>\n", styles: [".fw-menu-container{display:flex;border-radius:8px;background:var(--card-background);position:relative}.fw-menu-container.border-default{border:1px solid var(--separations-border)}.fw-menu-container .filter-box{border-top-left-radius:8px;border-top-right-radius:8px;padding:8px;border-bottom:1px solid var(--separations-base);background-color:var(--card-background);position:absolute;left:0;right:0;z-index:1}.fw-menu-container .menu-wrapper{flex:1;padding:6px 4px;scroll-padding:17px;overflow:hidden auto}.fw-menu-container .menu-wrapper.collapsed{scrollbar-width:none}.fw-menu-container .menu-wrapper.filtered{margin-top:54px}.fw-menu-container fw-menu-separator{margin:6px -8px}\n"], dependencies: [{ kind: "directive", type: i1$4.CdkMenuBar, selector: "[cdkMenuBar]", exportAs: ["cdkMenuBar"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "rightIcon", "prefix", "context", "helperText", "errorText", "placeholder", "readOnly", "size", "type", "maxLength", "autofocus", "autocomplete", "error", "width", "value"], outputs: ["leftIconAction", "rightIconAction"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FwMenuContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fw-menu-container', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"showFilter\" class=\"filter-box\" cdkMenuBar>\n  <fw-text-input\n    placeholder=\"Search\" leftIcon=\"search\" autofocus\n    [value]=\"filterText\" (input)=\"filterTextChange($event)\">\n  </fw-text-input>\n</div>\n<div class=\"menu-wrapper\" [ngClass]=\"[showFilter?'filtered':'', collapsed?'collapsed':'']\">\n  <ng-content></ng-content>\n</div>\n", styles: [".fw-menu-container{display:flex;border-radius:8px;background:var(--card-background);position:relative}.fw-menu-container.border-default{border:1px solid var(--separations-border)}.fw-menu-container .filter-box{border-top-left-radius:8px;border-top-right-radius:8px;padding:8px;border-bottom:1px solid var(--separations-base);background-color:var(--card-background);position:absolute;left:0;right:0;z-index:1}.fw-menu-container .menu-wrapper{flex:1;padding:6px 4px;scroll-padding:17px;overflow:hidden auto}.fw-menu-container .menu-wrapper.collapsed{scrollbar-width:none}.fw-menu-container .menu-wrapper.filtered{margin-top:54px}.fw-menu-container fw-menu-separator{margin:6px -8px}\n"] }]
@@ -5100,32 +5106,37 @@ class FwMultiSelectMenuComponent {
         }
     }
     ngAfterContentInit() {
-        if (this.menuItems && this.menuItems.length > 0) {
-            if (this.options && this.options.length === 0) {
-                this.options = [];
-                this.menuItems.forEach(item => {
-                    const opt = {
-                        value: item.value,
-                        label: item.title,
-                        icon: item.icon,
-                    };
-                    this.options.push(opt);
-                    if (this.selectedValues.indexOf(item.value.toString()) >= 0) {
-                        this.selectedOptions.push(opt);
-                    }
-                    const sub = item.click.subscribe(value => this.menu.writeValue(value));
-                    this.subscriptions.push(sub);
-                });
-                this.updateFilteredItems();
-            }
-        }
+        this.registerCustomMenuItems();
+        this.customMenuItems.changes.subscribe(() => {
+            this.registerCustomMenuItems();
+        });
+    }
+    registerCustomMenuItems() {
+        // first filter any menuItems we've already registered as options
+        const newMenuItems = this.customMenuItems.filter(menuItem => !this.options.find(option => menuItem.value === option.value));
+        newMenuItems.forEach((newMenuItem) => {
+            const newOption = {
+                value: newMenuItem.value,
+                title: newMenuItem.title,
+                icon: newMenuItem.icon,
+            };
+            this.options.push(newOption);
+            const sub = newMenuItem.click.subscribe(value => {
+                this.updateValue([value], true);
+                if (this.closeOnSelect) {
+                    this.trigger.close();
+                }
+            });
+            this.subscriptions.push(sub);
+        });
+        this.updateFilteredItems();
     }
     handleTouched() {
         this.touched = true;
     }
     handleClose(chip) {
-        this.value.splice(this.value.indexOf(chip[this.valueProperty]), 1);
-        this.updateValue(this.value);
+        const newValues = this.value.filter(val => val !== chip[this.valueProperty]);
+        this.updateValue(newValues);
         this.trigger.close();
     }
     handleChange(e) {
@@ -5142,6 +5153,16 @@ class FwMultiSelectMenuComponent {
         if (this.filterItemsOnSelect && this.options && this.value) {
             this.filteredOptions = this.options.filter(i => !this.value.includes(i[this.valueProperty]));
         }
+        if (this.customMenuItems && this.filterItemsOnSelect) {
+            this.customMenuItems.forEach(item => {
+                if (this.value.includes(item.value)) {
+                    item.hidden = true;
+                }
+                else {
+                    item.hidden = false;
+                }
+            });
+        }
         if (this.value) {
             if (this.value.length === 0) {
                 setTimeout(() => {
@@ -5163,34 +5184,31 @@ class FwMultiSelectMenuComponent {
             }
         }
     }
-    updateValue(value) {
-        this.selectedValues = [];
-        this.selectedOptions = [];
-        if (value) {
-            value.forEach(val => {
-                if (typeof val === 'object') {
-                    this.selectedValues.push(val[this.valueProperty]);
-                    this.selectedOptions.push(val);
-                }
-                else {
-                    this.selectedValues.push(val);
-                    if (this.options && this.options.length) {
-                        this.selectedOptions = [];
-                        this.options.forEach(opt => {
-                            if (value.indexOf(opt[this.valueProperty]) >= 0) {
-                                this.selectedOptions.push(opt);
-                            }
-                        });
-                    }
-                }
-            });
+    updateValue(incomingValues, additive = false) {
+        if (!incomingValues) {
+            return;
+        }
+        if (!additive) {
+            this.selectedValues = [];
+            this.selectedOptions = [];
         }
+        incomingValues.forEach(incoming => {
+            if (typeof incoming === 'object') {
+                this.selectedValues.push(incoming[this.valueProperty]);
+                this.selectedOptions.push(incoming);
+            }
+            else {
+                this.selectedValues.push(incoming);
+                const incomingMappedToOption = this.options.find(opt => opt[this.valueProperty] === incoming);
+                this.selectedOptions.push(incomingMappedToOption);
+            }
+        });
         this._value = this.selectedValues;
         this.updateFilteredItems();
         if (this.onChange) {
-            this.onChange(value);
+            this.onChange(this._value);
         }
-        this.change.emit(value);
+        this.change.emit(this._value);
         if (this.textInput && this.textInput.nativeElement) {
             this.textInput.nativeElement.value = '';
         }
@@ -5271,24 +5289,31 @@ class FwMultiSelectMenuComponent {
             }
         }
     }
-    handleInput(event) {
-        if (event.target['value'].length > 0) {
-            this.filteredOptions = this.options.filter(option => {
-                if (option[this.titleProperty].toLowerCase().includes(event.target['value'].toLowerCase())) {
-                    return !this.value.includes(option);
-                }
-                else {
-                    return false;
-                }
-            });
+    handleFilterChange(event) {
+        if (!this.trigger.isOpen()) {
+            this.trigger.open();
         }
-        else {
+        const newFilterValue = event.target['value'];
+        // empty filter guard
+        if (!newFilterValue) {
             this.filteredOptions = this.options;
             this.updateFilteredItems();
+            return;
         }
-        if (!this.trigger.isOpen()) {
-            this.trigger.open();
+        // hide custom items
+        if (this.customMenuItems) {
+            const filteredCustomItems = this.customMenuItems.filter(item => !item.title.toLowerCase().includes(newFilterValue.toLowerCase()));
+            filteredCustomItems.forEach(item => item.hidden = true);
         }
+        // decide what to render if we're using options
+        this.filteredOptions = this.options.filter(option => {
+            if (option[this.titleProperty].toLowerCase().includes(event.target['value'].toLowerCase())) {
+                return !this.value.includes(option);
+            }
+            else {
+                return false;
+            }
+        });
         this.moveFocused('zero');
     }
 }
@@ -5299,7 +5324,7 @@ FwMultiSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
             useExisting: forwardRef(() => FwMultiSelectMenuComponent),
             multi: true,
         },
-    ], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }, { propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }, { propertyName: "textInitialInput", first: true, predicate: ["textInitialInput"], descendants: true }, { propertyName: "renderedMenuItems", predicate: FwMenuItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{width: width}\">\n  <div\n    fwMenuRegister\n    [ngClass]=\"['chip-grid', size]\"\n    [ngStyle]=\"{minHeight: minHeight, maxHeight: maxHeight}\"\n    [cdkMenuTriggerFor]=\"selectMenu\">\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)=\"handleClose(chip)\"\n        [selectable]=\"false\">\n      </fw-chip>\n      <span *ngIf=\"value.length>maxSelectedShown\" class=\"max-exceeded\">+{{ value.length - maxSelectedShown }}\n        more</span>\n      <input\n        type=\"text\" #textInput\n        class=\"placeholder\"\n        (keydown)=\"handleKeyDown($event)\" (input)=\"handleInput($event)\">\n    </div>\n    <input\n      type=\"text\" #textInitialInput\n      *ngIf=\"!value || value.length===0\"\n      class=\"placeholder\" [placeholder]=\"placeholder\"\n      (focus)=\"handleTouched()\"\n      (keydown)=\"handleKeyDown($event)\" (input)=\"handleInput($event)\">\n    <fw-icon>chevron-down</fw-icon>\n  </div>\n  <ng-template #selectMenu>\n    <fw-menu-container\n      [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\" [minHeight]=\"minOptionsHeight\"\n      *ngIf=\"emptyText.length > 0 || (filteredOptions && filteredOptions.length > 0)\">\n      <fw-menu\n        [multiSelect]=\"true\"\n        [disabled]=\"disabled || (filteredOptions && filteredOptions.length===0)\"\n        [value]=\"selectedValues\"\n        (change)=\"handleChange($event)\">\n        <ng-container *ngIf=\"menuItems && menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of filteredOptions; index as $index\"\n            [title]=\"item[titleProperty]\"\n            [value]=\"item[valueProperty]\"\n            [icon]=\"item[iconProperty]\"\n            [multiSelect]=\"true\"\n            [showCheckbox]=\"useCheckbox\"\n            [focused]=\"focused===$index\"\n            (mouseover)=\"focused=$index\"\n          >\n          </fw-menu-item>\n          <fw-menu-item\n            *ngIf=\"filteredOptions && filteredOptions.length===0 && emptyText\" [showCheckbox]=\"false\"\n            [disabled]=\"true\" [title]=\"emptyText\">\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host .chip-grid{min-height:36px;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:4px;align-items:center;border-radius:6px;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 .placeholder{padding:0 2px 0 4px;font-size:14px;color:var(--typography-base);background:var(--page-light);border:0;outline:0;display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder:focus{outline:none!important}:host .chip-grid .placeholder::placeholder{color:var(--typography-light)}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid fw-icon:hover{color:var(--primary-base)}:host .chip-grid .max-exceeded{font-size:12px}\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: FwChipComponent, selector: "fw-chip", inputs: ["value", "variant", "color", "icon", "title", "description", "showClose", "disabled", "selected", "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", "variant", "collapsed", "collapsedWidth", "openWidth"], outputs: ["change", "filteredItemsChange"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "minHeight", "border", "shadow", "showFilter", "filterText", "offset", "collapsed"], outputs: ["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", "focused", "selected", "variant"], outputs: ["click"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] });
+    ], queries: [{ propertyName: "customMenuItems", predicate: FwMenuItemComponent, descendants: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }, { propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }, { propertyName: "textInitialInput", first: true, predicate: ["textInitialInput"], descendants: true }, { propertyName: "renderedMenuItems", predicate: FwMenuItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{width: width}\" #wrapper>\n  <div\n    fwMenuRegister\n    [ngClass]=\"['chip-grid', size]\"\n    [ngStyle]=\"{minHeight: minHeight, maxHeight: maxHeight}\"\n    [cdkMenuTriggerFor]=\"selectMenu\">\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)=\"handleClose(chip)\"\n        [selectable]=\"false\">\n      </fw-chip>\n      <span *ngIf=\"value.length>maxSelectedShown\" class=\"max-exceeded\">+{{ value.length - maxSelectedShown }}\n        more</span>\n      <input\n        type=\"text\" #textInput\n        class=\"placeholder\"\n        (keydown)=\"handleKeyDown($event)\" (input)=\"handleFilterChange($event)\">\n    </div>\n    <input\n      type=\"text\" #textInitialInput\n      *ngIf=\"!value || value.length===0\"\n      class=\"placeholder\" [placeholder]=\"placeholder\"\n      (focus)=\"handleTouched()\"\n      (keydown)=\"handleKeyDown($event)\" (input)=\"handleFilterChange($event)\">\n    <fw-icon>chevron-down</fw-icon>\n  </div>\n  <ng-template #selectMenu>\n    <fw-menu-container\n      [width]=\"optionsWidth || wrapper.offsetWidth + 'px'\" [maxHeight]=\"maxOptionsHeight\" [minHeight]=\"minOptionsHeight\"\n      *ngIf=\"emptyText.length > 0 || (filteredOptions && filteredOptions.length > 0)\">\n      <fw-menu\n        [multiSelect]=\"true\"\n        [disabled]=\"disabled || (filteredOptions && filteredOptions.length===0)\"\n        [value]=\"selectedValues\"\n        (change)=\"handleChange($event)\">\n        <ng-container *ngIf=\"customMenuItems.length === 0\">\n          <fw-menu-item\n            *ngFor=\"let item of filteredOptions; index as $index\"\n            [title]=\"item[titleProperty]\"\n            [value]=\"item[valueProperty]\"\n            [icon]=\"item[iconProperty]\"\n            [multiSelect]=\"true\"\n            [showCheckbox]=\"useCheckbox\"\n            [focused]=\"focused===$index\"\n            (mouseover)=\"focused=$index\"\n          >\n          </fw-menu-item>\n        </ng-container>\n        <fw-menu-item\n          *ngIf=\"filteredOptions.length === 0 && emptyText\" [showCheckbox]=\"false\"\n          [disabled]=\"true\" [title]=\"emptyText\">\n        </fw-menu-item>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator, fw-menu-item-group, fw-menu-header]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host .chip-grid{min-height:36px;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:4px;align-items:center;border-radius:6px;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 .placeholder{padding:0 2px 0 4px;font-size:14px;color:var(--typography-base);background:var(--page-light);border:0;outline:0;display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder:focus{outline:none!important}:host .chip-grid .placeholder::placeholder{color:var(--typography-light)}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid fw-icon:hover{color:var(--primary-base)}:host .chip-grid .max-exceeded{font-size:12px}\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: FwChipComponent, selector: "fw-chip", inputs: ["value", "variant", "color", "icon", "title", "description", "showClose", "disabled", "selected", "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", "variant", "collapsed", "collapsedWidth", "openWidth"], outputs: ["change", "filteredItemsChange"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "minHeight", "border", "shadow", "showFilter", "filterText", "offset", "collapsed"], outputs: ["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", "focused", "selected", "variant"], outputs: ["click"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FwMultiSelectMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fw-multi-select', providers: [
@@ -5308,7 +5333,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             useExisting: forwardRef(() => FwMultiSelectMenuComponent),
                             multi: true,
                         },
-                    ], template: "<div [ngStyle]=\"{width: width}\">\n  <div\n    fwMenuRegister\n    [ngClass]=\"['chip-grid', size]\"\n    [ngStyle]=\"{minHeight: minHeight, maxHeight: maxHeight}\"\n    [cdkMenuTriggerFor]=\"selectMenu\">\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)=\"handleClose(chip)\"\n        [selectable]=\"false\">\n      </fw-chip>\n      <span *ngIf=\"value.length>maxSelectedShown\" class=\"max-exceeded\">+{{ value.length - maxSelectedShown }}\n        more</span>\n      <input\n        type=\"text\" #textInput\n        class=\"placeholder\"\n        (keydown)=\"handleKeyDown($event)\" (input)=\"handleInput($event)\">\n    </div>\n    <input\n      type=\"text\" #textInitialInput\n      *ngIf=\"!value || value.length===0\"\n      class=\"placeholder\" [placeholder]=\"placeholder\"\n      (focus)=\"handleTouched()\"\n      (keydown)=\"handleKeyDown($event)\" (input)=\"handleInput($event)\">\n    <fw-icon>chevron-down</fw-icon>\n  </div>\n  <ng-template #selectMenu>\n    <fw-menu-container\n      [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\" [minHeight]=\"minOptionsHeight\"\n      *ngIf=\"emptyText.length > 0 || (filteredOptions && filteredOptions.length > 0)\">\n      <fw-menu\n        [multiSelect]=\"true\"\n        [disabled]=\"disabled || (filteredOptions && filteredOptions.length===0)\"\n        [value]=\"selectedValues\"\n        (change)=\"handleChange($event)\">\n        <ng-container *ngIf=\"menuItems && menuItems.length===0\">\n          <fw-menu-item\n            *ngFor=\"let item of filteredOptions; index as $index\"\n            [title]=\"item[titleProperty]\"\n            [value]=\"item[valueProperty]\"\n            [icon]=\"item[iconProperty]\"\n            [multiSelect]=\"true\"\n            [showCheckbox]=\"useCheckbox\"\n            [focused]=\"focused===$index\"\n            (mouseover)=\"focused=$index\"\n          >\n          </fw-menu-item>\n          <fw-menu-item\n            *ngIf=\"filteredOptions && filteredOptions.length===0 && emptyText\" [showCheckbox]=\"false\"\n            [disabled]=\"true\" [title]=\"emptyText\">\n          </fw-menu-item>\n        </ng-container>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host .chip-grid{min-height:36px;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:4px;align-items:center;border-radius:6px;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 .placeholder{padding:0 2px 0 4px;font-size:14px;color:var(--typography-base);background:var(--page-light);border:0;outline:0;display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder:focus{outline:none!important}:host .chip-grid .placeholder::placeholder{color:var(--typography-light)}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid fw-icon:hover{color:var(--primary-base)}:host .chip-grid .max-exceeded{font-size:12px}\n"] }]
+                    ], template: "<div [ngStyle]=\"{width: width}\" #wrapper>\n  <div\n    fwMenuRegister\n    [ngClass]=\"['chip-grid', size]\"\n    [ngStyle]=\"{minHeight: minHeight, maxHeight: maxHeight}\"\n    [cdkMenuTriggerFor]=\"selectMenu\">\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)=\"handleClose(chip)\"\n        [selectable]=\"false\">\n      </fw-chip>\n      <span *ngIf=\"value.length>maxSelectedShown\" class=\"max-exceeded\">+{{ value.length - maxSelectedShown }}\n        more</span>\n      <input\n        type=\"text\" #textInput\n        class=\"placeholder\"\n        (keydown)=\"handleKeyDown($event)\" (input)=\"handleFilterChange($event)\">\n    </div>\n    <input\n      type=\"text\" #textInitialInput\n      *ngIf=\"!value || value.length===0\"\n      class=\"placeholder\" [placeholder]=\"placeholder\"\n      (focus)=\"handleTouched()\"\n      (keydown)=\"handleKeyDown($event)\" (input)=\"handleFilterChange($event)\">\n    <fw-icon>chevron-down</fw-icon>\n  </div>\n  <ng-template #selectMenu>\n    <fw-menu-container\n      [width]=\"optionsWidth || wrapper.offsetWidth + 'px'\" [maxHeight]=\"maxOptionsHeight\" [minHeight]=\"minOptionsHeight\"\n      *ngIf=\"emptyText.length > 0 || (filteredOptions && filteredOptions.length > 0)\">\n      <fw-menu\n        [multiSelect]=\"true\"\n        [disabled]=\"disabled || (filteredOptions && filteredOptions.length===0)\"\n        [value]=\"selectedValues\"\n        (change)=\"handleChange($event)\">\n        <ng-container *ngIf=\"customMenuItems.length === 0\">\n          <fw-menu-item\n            *ngFor=\"let item of filteredOptions; index as $index\"\n            [title]=\"item[titleProperty]\"\n            [value]=\"item[valueProperty]\"\n            [icon]=\"item[iconProperty]\"\n            [multiSelect]=\"true\"\n            [showCheckbox]=\"useCheckbox\"\n            [focused]=\"focused===$index\"\n            (mouseover)=\"focused=$index\"\n          >\n          </fw-menu-item>\n        </ng-container>\n        <fw-menu-item\n          *ngIf=\"filteredOptions.length === 0 && emptyText\" [showCheckbox]=\"false\"\n          [disabled]=\"true\" [title]=\"emptyText\">\n        </fw-menu-item>\n        <ng-content select=\"[fw-menu-item, fw-menu-separator, fw-menu-item-group, fw-menu-header]\"></ng-content>\n      </fw-menu>\n    </fw-menu-container>\n  </ng-template>\n</div>\n", styles: [":host .chip-grid{min-height:36px;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:4px;align-items:center;border-radius:6px;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 .placeholder{padding:0 2px 0 4px;font-size:14px;color:var(--typography-base);background:var(--page-light);border:0;outline:0;display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder:focus{outline:none!important}:host .chip-grid .placeholder::placeholder{color:var(--typography-light)}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid fw-icon:hover{color:var(--primary-base)}:host .chip-grid .max-exceeded{font-size:12px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { outsideClick: [{
                 type: HostListener,
                 args: ['document:click']
@@ -5357,9 +5382,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], renderedMenuItems: [{
                 type: ViewChildren,
                 args: [FwMenuItemComponent]
-            }], menuItems: [{
+            }], customMenuItems: [{
                 type: ContentChildren,
-                args: [FwMenuItemComponent]
+                args: [FwMenuItemComponent, { descendants: true }]
             }], textInput: [{
                 type: ViewChild,
                 args: ['textInput']
@@ -5629,7 +5654,7 @@ class FwSelectMenuComponent {
     }
 }
 FwSelectMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FwSelectMenuComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i8.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-FwSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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\"\n    [rightIcon]=\"(selectTitle&&showReset)?'close-circled':'chevron-down'\"\n    (rightIconAction)=\"handleReset()\"\n    [useActionableIcons]=\"true\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\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($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          >\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%}\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", "variant", "collapsed", "collapsedWidth", "openWidth"], outputs: ["change", "filteredItemsChange"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "minHeight", "border", "shadow", "showFilter", "filterText", "offset", "collapsed"], outputs: ["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", "focused", "selected", "variant"], outputs: ["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", "error", "value"], outputs: ["leftIconAction", "rightIconAction"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }] });
+FwSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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\"\n    [rightIcon]=\"(selectTitle&&showReset)?'close-circled':'chevron-down'\"\n    (rightIconAction)=\"handleReset()\"\n    [useActionableIcons]=\"true\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\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($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          >\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%}\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", "variant", "collapsed", "collapsedWidth", "openWidth"], outputs: ["change", "filteredItemsChange"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "minHeight", "border", "shadow", "showFilter", "filterText", "offset", "collapsed"], outputs: ["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", "focused", "selected", "variant"], outputs: ["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", "error", "width", "value"], outputs: ["leftIconAction", "rightIconAction"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FwSelectMenuComponent, decorators: [{
             type: Component,
             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\"\n    [rightIcon]=\"(selectTitle&&showReset)?'close-circled':'chevron-down'\"\n    (rightIconAction)=\"handleReset()\"\n    [useActionableIcons]=\"true\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\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($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          >\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%}\n"] }]