@flywheel-io/vision 21.1.1 → 21.1.3

package/fesm2022/flywheel-io-vision.mjs

@@ -1,6 +1,6 @@
 import { NgClass, CommonModule, NgStyle, NgTemplateOutlet, SlicePipe, Location } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, input, HostBinding, ChangeDetectionStrategy, Component, output, computed, NgModule, model, signal, effect, HostListener, ViewEncapsulation, EventEmitter, Output, ElementRef, ViewContainerRef, Directive, contentChildren, viewChild, ChangeDetectorRef, ContentChildren, Input, ViewChild, forwardRef, DestroyRef, Injectable, ContentChild, contentChild, NgZone, untracked, ViewChildren, viewChildren, linkedSignal, TemplateRef } from '@angular/core';
+import { inject, input, HostBinding, ChangeDetectionStrategy, Component, output, computed, NgModule, model, signal, effect, HostListener, ViewEncapsulation, EventEmitter, Output, ElementRef, ViewContainerRef, Directive, contentChildren, viewChild, ChangeDetectorRef, ContentChildren, Input, ViewChild, forwardRef, DestroyRef, Injectable, ContentChild, contentChild, NgZone, untracked, DOCUMENT, ViewChildren, viewChildren, linkedSignal, TemplateRef } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { BehaviorSubject, debounce, timer, distinctUntilChanged, of, Subscription, min, combineLatest, tap, switchMap, map } from 'rxjs';
 import { CdkConnectedOverlay, OverlayModule, Overlay, CdkOverlayOrigin, OverlayContainer } from '@angular/cdk/overlay';
@@ -3177,10 +3177,26 @@ class FwDialogComponent {
         return classes;
     }
     ngOnInit() {
-        this.dialogRef?.containerInstance?._addAriaLabelledBy(this.headerId);
+        // `<fw-dialog>` is usable outside an overlay, so there may be no dialogRef at all.
+        const container = this.dialogRef?.containerInstance;
+        if (container) {
+            // Deferred by one microtask on purpose: `_addAriaLabelledBy` mutates the container's
+            // `_ariaLabelledByQueue`, which `CdkDialogContainer` exposes as a host binding. A component's
+            // host bindings are evaluated in its parent view *before* Angular descends into child
+            // components, so mutating the queue synchronously here changes a value the container already
+            // read in the same change-detection pass, which throws NG0100 in dev builds. Same approach as
+            // Angular Material's `MatDialogLayoutSection`.
+            Promise.resolve().then(() => container._addAriaLabelledBy(this.headerId));
+        }
     }
     ngOnDestroy() {
-        this.dialogRef?.containerInstance?._removeAriaLabelledBy(this.headerId);
+        const container = this.dialogRef?.containerInstance;
+        if (container) {
+            // Deferred to stay ordered behind the deferred add in `ngOnInit` — otherwise a dialog created
+            // and destroyed within the same task would remove the id before it was ever added and leave
+            // it orphaned in the queue.
+            Promise.resolve().then(() => container._removeAriaLabelledBy(this.headerId));
+        }
     }
     handleCloseButton() {
         this.closeWithAnimation();
@@ -4324,6 +4340,16 @@ class FwMenuItemComponent {
         this.focused = model(false, ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
         this.selected = model(false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
         this.subscriptions = [];
+        this.isDestroyed = false;
+    }
+    /**
+     * Whether this item's view has been torn down. Owners that iterate their items (`fw-menu`) have to
+     * check this before writing to the item's `model()`s: neither `QueryList` nor a signal query is
+     * emptied by view destruction, so an item can still be reachable from a query after the menu it
+     * lives in was destroyed - writing to it then logs NG0953.
+     */
+    get destroyed() {
+        return this.isDestroyed;
     }
     scrollIntoView(options = { behavior: 'smooth', block: 'nearest' }) {
         // eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
@@ -4341,6 +4367,7 @@ class FwMenuItemComponent {
         this.updateLayout();
     }
     ngOnDestroy() {
+        this.isDestroyed = true;
         for (const subscription of this.subscriptions) {
             subscription.unsubscribe();
         }
@@ -4487,9 +4514,15 @@ class FwMenuComponent {
     }
     writeValue(value) {
         this.value.set(value);
+        // Lay the items out BEFORE calling out to any listener. `change` is wired to `fw-select`'s
+        // `handleClick`, which closes the options panel and so synchronously destroys every
+        // `fw-menu-item` rendered in it. View teardown does not empty a `QueryList`, so laying out
+        // afterwards writes to `model()`s on already-destroyed nodes, which logs NG0953 once per item
+        // whose `selected` flag changed. Everything `updateLayout()` reads derives from `this.value()`,
+        // set on the line above, so the resulting layout is identical either way.
+        this.updateLayout();
         this.onChange(value);
         this.change.emit(value);
-        this.updateLayout();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -4528,6 +4561,12 @@ class FwMenuComponent {
         if (this.menuItems) {
             const itemRole = this.computeItemRole();
             this.menuItems.forEach((item) => {
+                // A destroyed item is still reachable through the QueryList; writing to its models would
+                // emit on a dead OutputRef (NG0953). Belt and braces for any other listener that tears the
+                // menu down from underneath a layout pass.
+                if (item.destroyed) {
+                    return;
+                }
                 item.itemRole.set(itemRole);
                 const size = this.size();
                 if (size !== undefined) {
@@ -4884,7 +4923,7 @@ class FwTextInputComponent {
                 useExisting: FwTextInputComponent,
                 multi: true,
             },
-        ], queries: [{ propertyName: "contentChildInputElement", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"full-container\" [ngClass]=\"{ disabled: disabled() }\">\n  <div class=\"input-container\" [class]=\"size()\">\n    @if (!!leftIcon()) {\n      @if (useActionableIcons()) {\n        <div fwClickableDiv (click)=\"onLeftIconClick()\" class=\"actionable\" [attr.aria-label]=\"leftIconLabel()\">\n          <fw-icon>{{ leftIcon() }}</fw-icon>\n        </div>\n      } @else {\n        <fw-icon>{{ leftIcon() }}</fw-icon>\n      }\n    }\n    @if (!!prefix()) {\n      <p class=\"vision-p2 context\">{{ prefix() }}</p>\n    }\n\n    @if (!contentChildInputElement()) {\n      <input\n        #input\n        [type]=\"type()\"\n        (input)=\"changeHandler($event)\"\n        (blur)=\"blurHandler()\"\n        [attr.maxlength]=\"maxLength()\"\n        [placeholder]=\"placeholder() || ''\"\n        [readOnly]=\"readOnly()\"\n        [disabled]=\"disabled()\"\n        [autofocus]=\"autofocus()\"\n        [autocomplete]=\"autocomplete()\"\n        [required]=\"required()\"\n        [attr.aria-required]=\"required()\"\n        [attr.aria-invalid]=\"error() ? true : null\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-describedby]=\"computedDescribedBy()\"\n        [attr.role]=\"role() || null\"\n        [attr.aria-expanded]=\"ariaExpanded() === undefined ? null : ariaExpanded()\"\n        [attr.aria-controls]=\"ariaControls() || null\"\n        [attr.aria-autocomplete]=\"ariaAutocomplete() || null\"\n        [attr.aria-activedescendant]=\"ariaActiveDescendant() || null\"\n      />\n    }\n    <ng-content select=\"input\"></ng-content>\n    @if (!!context()) {\n      <p class=\"vision-p2 context\">{{ context() }}</p>\n    }\n\n    <fw-icon class=\"error-icon\" [fwTooltip]=\"errorInIconTooltip() ? errorText() || '' : ''\">warning-circle</fw-icon>\n    @if (!!rightIcon()) {\n      @if (useActionableIcons()) {\n        <div fwClickableDiv (click)=\"onRightIconClick()\" class=\"actionable\" [attr.aria-label]=\"rightIconLabel()\">\n          <fw-icon>{{ rightIcon() }}</fw-icon>\n        </div>\n      } @else {\n        <fw-icon>{{ rightIcon() }}</fw-icon>\n      }\n    }\n    <ng-content></ng-content>\n  </div>\n  @if (!!helperText()) {\n    <p class=\"vision-p4 helper-text\" [id]=\"helperTextId\">{{ helperText() }}</p>\n  }\n  @if (!!errorText() && !errorInIconTooltip()) {\n    <p class=\"vision-p4 error-text\" [id]=\"errorTextId\">{{ errorText() }}</p>\n  }\n</div>\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}.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,.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)}.full-container.disabled{cursor:not-allowed}.full-container.disabled fw-icon{cursor:not-allowed!important}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}.full-container .error-text{text-align:left;color:var(--red-base);display:none}.actionable{cursor:pointer}.actionable:hover{color:var(--primary-base);background-color:var(--primary-hover);border-radius:50%}.small{height:30px}.small fw-icon{font-size:18px;min-width:18px;width:18px}.medium{height:36px}.medium fw-icon{font-size:20px;min-width:20px;width:20px}.large{height:40px}.large fw-icon{font-size:24px;min-width:24px;width:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}.disabled .actionable:hover{color:var(--typography-light);background-color:transparent}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["ariaLabel", "size", "color"] }, { kind: "directive", type: FwTooltipDirective, selector: "[fwTooltip]", inputs: ["fwTooltip", "fwTooltipPosition", "fwTooltipMaxWidthPx", "fwTooltipClass", "fwTooltipDelay", "fwTooltipCaret", "fwTooltipEnabled"], outputs: ["fwTooltipChange", "fwTooltipPositionChange", "fwTooltipMaxWidthPxChange", "fwTooltipClassChange", "fwTooltipEnabledChange"] }, { kind: "directive", type: FwClickableDivDirective, selector: "[fwClickableDiv]", inputs: ["fwClickableDivDisabled", "fwClickableDivRole"] }] }); }
+        ], queries: [{ propertyName: "contentChildInputElement", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"full-container\" [ngClass]=\"{ disabled: disabled() }\">\n  <div class=\"input-container\" [class]=\"size()\">\n    @if (!!leftIcon()) {\n      @if (useActionableIcons()) {\n        <div fwClickableDiv (click)=\"onLeftIconClick()\" class=\"actionable\" [attr.aria-label]=\"leftIconLabel()\">\n          <fw-icon>{{ leftIcon() }}</fw-icon>\n        </div>\n      } @else {\n        <fw-icon>{{ leftIcon() }}</fw-icon>\n      }\n    }\n    @if (!!prefix()) {\n      <p class=\"vision-p2 context\">{{ prefix() }}</p>\n    }\n\n    @if (!contentChildInputElement()) {\n      <input\n        #input\n        [type]=\"type()\"\n        (input)=\"changeHandler($event)\"\n        (blur)=\"blurHandler()\"\n        [attr.maxlength]=\"maxLength()\"\n        [placeholder]=\"placeholder() || ''\"\n        [readOnly]=\"readOnly()\"\n        [disabled]=\"disabled()\"\n        [autofocus]=\"autofocus()\"\n        [autocomplete]=\"autocomplete()\"\n        [required]=\"required()\"\n        [attr.aria-required]=\"required()\"\n        [attr.aria-invalid]=\"error() ? true : null\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-describedby]=\"computedDescribedBy()\"\n        [attr.role]=\"role() || null\"\n        [attr.aria-expanded]=\"ariaExpanded() === undefined ? null : ariaExpanded()\"\n        [attr.aria-controls]=\"ariaControls() || null\"\n        [attr.aria-autocomplete]=\"ariaAutocomplete() || null\"\n        [attr.aria-activedescendant]=\"ariaActiveDescendant() || null\"\n      />\n    }\n    <ng-content select=\"input\"></ng-content>\n    @if (!!context()) {\n      <p class=\"vision-p2 context\">{{ context() }}</p>\n    }\n\n    <fw-icon class=\"error-icon\" [fwTooltip]=\"errorInIconTooltip() ? errorText() || '' : ''\">warning-circle</fw-icon>\n    @if (!!rightIcon()) {\n      @if (useActionableIcons()) {\n        <div fwClickableDiv (click)=\"onRightIconClick()\" class=\"actionable\" [attr.aria-label]=\"rightIconLabel()\">\n          <fw-icon>{{ rightIcon() }}</fw-icon>\n        </div>\n      } @else {\n        <fw-icon>{{ rightIcon() }}</fw-icon>\n      }\n    }\n    <ng-content></ng-content>\n  </div>\n  @if (!!helperText()) {\n    <p class=\"vision-p4 helper-text\" [id]=\"helperTextId\">{{ helperText() }}</p>\n  }\n  @if (!!errorText() && !errorInIconTooltip()) {\n    <p class=\"vision-p4 error-text\" [id]=\"errorTextId\">{{ errorText() }}</p>\n  }\n</div>\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}.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,.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)}.full-container.disabled{cursor:not-allowed}.full-container.disabled fw-icon{cursor:not-allowed!important}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}.full-container .error-text{text-align:left;color:var(--red-base);display:none}.actionable{cursor:pointer}.actionable:hover{color:var(--primary-base);background-color:var(--primary-hover);border-radius:50%}.small{height:30px}.small fw-icon{font-size:18px;min-width:18px;width:18px}.medium{height:36px}.medium fw-icon{font-size:20px;min-width:20px;width:20px}.large{height:40px}.large fw-icon{font-size:24px;min-width:24px;width:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .input-container:focus-within,:host.ng-touched.ng-invalid .input-container:focus-within{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}.disabled .actionable:hover{color:var(--typography-light);background-color:transparent}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["ariaLabel", "size", "color"] }, { kind: "directive", type: FwTooltipDirective, selector: "[fwTooltip]", inputs: ["fwTooltip", "fwTooltipPosition", "fwTooltipMaxWidthPx", "fwTooltipClass", "fwTooltipDelay", "fwTooltipCaret", "fwTooltipEnabled"], outputs: ["fwTooltipChange", "fwTooltipPositionChange", "fwTooltipMaxWidthPxChange", "fwTooltipClassChange", "fwTooltipEnabledChange"] }, { kind: "directive", type: FwClickableDivDirective, selector: "[fwClickableDiv]", inputs: ["fwClickableDivDisabled", "fwClickableDivRole"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwTextInputComponent, decorators: [{
             type: Component,
@@ -4897,7 +4936,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                     ], host: {
                         '[class.errored]': 'error()',
                         '[style.width]': 'width()',
-                    }, imports: [NgClass, FwIconComponent, FwTooltipDirective, FwClickableDivDirective], template: "<div class=\"full-container\" [ngClass]=\"{ disabled: disabled() }\">\n  <div class=\"input-container\" [class]=\"size()\">\n    @if (!!leftIcon()) {\n      @if (useActionableIcons()) {\n        <div fwClickableDiv (click)=\"onLeftIconClick()\" class=\"actionable\" [attr.aria-label]=\"leftIconLabel()\">\n          <fw-icon>{{ leftIcon() }}</fw-icon>\n        </div>\n      } @else {\n        <fw-icon>{{ leftIcon() }}</fw-icon>\n      }\n    }\n    @if (!!prefix()) {\n      <p class=\"vision-p2 context\">{{ prefix() }}</p>\n    }\n\n    @if (!contentChildInputElement()) {\n      <input\n        #input\n        [type]=\"type()\"\n        (input)=\"changeHandler($event)\"\n        (blur)=\"blurHandler()\"\n        [attr.maxlength]=\"maxLength()\"\n        [placeholder]=\"placeholder() || ''\"\n        [readOnly]=\"readOnly()\"\n        [disabled]=\"disabled()\"\n        [autofocus]=\"autofocus()\"\n        [autocomplete]=\"autocomplete()\"\n        [required]=\"required()\"\n        [attr.aria-required]=\"required()\"\n        [attr.aria-invalid]=\"error() ? true : null\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-describedby]=\"computedDescribedBy()\"\n        [attr.role]=\"role() || null\"\n        [attr.aria-expanded]=\"ariaExpanded() === undefined ? null : ariaExpanded()\"\n        [attr.aria-controls]=\"ariaControls() || null\"\n        [attr.aria-autocomplete]=\"ariaAutocomplete() || null\"\n        [attr.aria-activedescendant]=\"ariaActiveDescendant() || null\"\n      />\n    }\n    <ng-content select=\"input\"></ng-content>\n    @if (!!context()) {\n      <p class=\"vision-p2 context\">{{ context() }}</p>\n    }\n\n    <fw-icon class=\"error-icon\" [fwTooltip]=\"errorInIconTooltip() ? errorText() || '' : ''\">warning-circle</fw-icon>\n    @if (!!rightIcon()) {\n      @if (useActionableIcons()) {\n        <div fwClickableDiv (click)=\"onRightIconClick()\" class=\"actionable\" [attr.aria-label]=\"rightIconLabel()\">\n          <fw-icon>{{ rightIcon() }}</fw-icon>\n        </div>\n      } @else {\n        <fw-icon>{{ rightIcon() }}</fw-icon>\n      }\n    }\n    <ng-content></ng-content>\n  </div>\n  @if (!!helperText()) {\n    <p class=\"vision-p4 helper-text\" [id]=\"helperTextId\">{{ helperText() }}</p>\n  }\n  @if (!!errorText() && !errorInIconTooltip()) {\n    <p class=\"vision-p4 error-text\" [id]=\"errorTextId\">{{ errorText() }}</p>\n  }\n</div>\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}.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,.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)}.full-container.disabled{cursor:not-allowed}.full-container.disabled fw-icon{cursor:not-allowed!important}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}.full-container .error-text{text-align:left;color:var(--red-base);display:none}.actionable{cursor:pointer}.actionable:hover{color:var(--primary-base);background-color:var(--primary-hover);border-radius:50%}.small{height:30px}.small fw-icon{font-size:18px;min-width:18px;width:18px}.medium{height:36px}.medium fw-icon{font-size:20px;min-width:20px;width:20px}.large{height:40px}.large fw-icon{font-size:24px;min-width:24px;width:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}.disabled .actionable:hover{color:var(--typography-light);background-color:transparent}\n"] }]
+                    }, imports: [NgClass, FwIconComponent, FwTooltipDirective, FwClickableDivDirective], template: "<div class=\"full-container\" [ngClass]=\"{ disabled: disabled() }\">\n  <div class=\"input-container\" [class]=\"size()\">\n    @if (!!leftIcon()) {\n      @if (useActionableIcons()) {\n        <div fwClickableDiv (click)=\"onLeftIconClick()\" class=\"actionable\" [attr.aria-label]=\"leftIconLabel()\">\n          <fw-icon>{{ leftIcon() }}</fw-icon>\n        </div>\n      } @else {\n        <fw-icon>{{ leftIcon() }}</fw-icon>\n      }\n    }\n    @if (!!prefix()) {\n      <p class=\"vision-p2 context\">{{ prefix() }}</p>\n    }\n\n    @if (!contentChildInputElement()) {\n      <input\n        #input\n        [type]=\"type()\"\n        (input)=\"changeHandler($event)\"\n        (blur)=\"blurHandler()\"\n        [attr.maxlength]=\"maxLength()\"\n        [placeholder]=\"placeholder() || ''\"\n        [readOnly]=\"readOnly()\"\n        [disabled]=\"disabled()\"\n        [autofocus]=\"autofocus()\"\n        [autocomplete]=\"autocomplete()\"\n        [required]=\"required()\"\n        [attr.aria-required]=\"required()\"\n        [attr.aria-invalid]=\"error() ? true : null\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-describedby]=\"computedDescribedBy()\"\n        [attr.role]=\"role() || null\"\n        [attr.aria-expanded]=\"ariaExpanded() === undefined ? null : ariaExpanded()\"\n        [attr.aria-controls]=\"ariaControls() || null\"\n        [attr.aria-autocomplete]=\"ariaAutocomplete() || null\"\n        [attr.aria-activedescendant]=\"ariaActiveDescendant() || null\"\n      />\n    }\n    <ng-content select=\"input\"></ng-content>\n    @if (!!context()) {\n      <p class=\"vision-p2 context\">{{ context() }}</p>\n    }\n\n    <fw-icon class=\"error-icon\" [fwTooltip]=\"errorInIconTooltip() ? errorText() || '' : ''\">warning-circle</fw-icon>\n    @if (!!rightIcon()) {\n      @if (useActionableIcons()) {\n        <div fwClickableDiv (click)=\"onRightIconClick()\" class=\"actionable\" [attr.aria-label]=\"rightIconLabel()\">\n          <fw-icon>{{ rightIcon() }}</fw-icon>\n        </div>\n      } @else {\n        <fw-icon>{{ rightIcon() }}</fw-icon>\n      }\n    }\n    <ng-content></ng-content>\n  </div>\n  @if (!!helperText()) {\n    <p class=\"vision-p4 helper-text\" [id]=\"helperTextId\">{{ helperText() }}</p>\n  }\n  @if (!!errorText() && !errorInIconTooltip()) {\n    <p class=\"vision-p4 error-text\" [id]=\"errorTextId\">{{ errorText() }}</p>\n  }\n</div>\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}.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,.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)}.full-container.disabled{cursor:not-allowed}.full-container.disabled fw-icon{cursor:not-allowed!important}.full-container{display:flex;flex-direction:column;line-height:21px}.full-container .input-container{box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:8px;align-items:center;gap:5px;border-radius:6px;border:1px solid var(--separations-input);font-family:Inter,sans-serif}.full-container .input-container:focus-within{border:1px solid var(--primary-base)}.full-container .input-container input{min-width:0;font-size:14px;flex-grow:1;color:var(--typography-base);background:var(--page-light);border:none}.full-container .input-container input:focus{outline:none;border:none}.full-container .input-container input::placeholder{color:var(--typography-light)}.full-container .input-container .context{color:var(--typography-light)}.full-container .error-icon{display:none}.full-container .helper-text,.full-container .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0}.full-container .error-text{text-align:left;color:var(--red-base);display:none}.actionable{cursor:pointer}.actionable:hover{color:var(--primary-base);background-color:var(--primary-hover);border-radius:50%}.small{height:30px}.small fw-icon{font-size:18px;min-width:18px;width:18px}.medium{height:36px}.medium fw-icon{font-size:20px;min-width:20px;width:20px}.large{height:40px}.large fw-icon{font-size:24px;min-width:24px;width:24px}:host.errored .input-container,:host.ng-touched.ng-invalid .input-container{border:1px solid var(--red-base)}:host.errored .input-container:focus-within,:host.ng-touched.ng-invalid .input-container:focus-within{border:1px solid var(--red-base)}:host.errored .error-icon,:host.ng-touched.ng-invalid .error-icon{color:var(--red-base);display:inline!important}:host.errored .helper-text,:host.errored .full-container .error-text,:host.ng-touched.ng-invalid .helper-text,:host.ng-touched.ng-invalid .full-container .error-text{display:none}:host.errored .error-text,:host.ng-touched.ng-invalid .error-text{display:block!important}:disabled{opacity:.4;cursor:not-allowed}.disabled .actionable:hover{color:var(--typography-light);background-color:transparent}\n"] }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], useActionableIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "useActionableIcons", required: false }] }], leftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftIcon", required: false }] }], rightIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightIcon", required: false }] }], leftIconLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftIconLabel", required: false }] }], rightIconLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightIconLabel", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaExpanded", required: false }] }], ariaControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaControls", required: false }] }], ariaAutocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaAutocomplete", required: false }] }], ariaActiveDescendant: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaActiveDescendant", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], errorInIconTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorInIconTooltip", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], value: [{
                 type: Input
             }], inputRef: [{
@@ -5059,6 +5098,11 @@ class FwMenuContainerComponent {
     constructor() {
         this.sanitizer = inject(DomSanitizer);
         this.ngZone = inject(NgZone);
+        /**
+         * The container's own element. Exposed because this component is usually rendered into a cdk
+         * overlay, so a consumer holding the instance has no other way to reach the rendered panel.
+         */
+        this.hostElement = inject(ElementRef).nativeElement;
         this.menuWrapperRef = viewChild('menuWrapper', { ...(ngDevMode ? { debugName: "menuWrapperRef" } : /* istanbul ignore next */ {}), read: HTMLElement });
         this.canScrollUp = signal(false, ...(ngDevMode ? [{ debugName: "canScrollUp" }] : /* istanbul ignore next */ []));
         this.canScrollDown = signal(false, ...(ngDevMode ? [{ debugName: "canScrollDown" }] : /* istanbul ignore next */ []));
@@ -5831,6 +5875,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                 args: ['click']
             }] } });
 
+/**
+ * Whether an event originated on, or inside, any of the given elements.
+ *
+ * Shared by `fw-select` and `fw-multi-select` so that both decide "inside vs outside" identically -
+ * the trigger lives in the component's own view while the options panel is rendered into a cdk
+ * overlay somewhere else in the document, so containment has to be checked against both.
+ */
+function isEventInside(event, ...elements) {
+    const candidates = elements.filter((element) => Boolean(element));
+    if (candidates.length === 0) {
+        return false;
+    }
+    // The path is resolved at dispatch time, so it still holds up for targets that a handler earlier
+    // in the chain has already detached from the DOM
+    const path = typeof event.composedPath === 'function' ? event.composedPath() : [];
+    if (path.length > 0) {
+        return candidates.some((element) => path.includes(element));
+    }
+    const target = event.target;
+    if (!(target instanceof Node)) {
+        return false;
+    }
+    return candidates.some((element) => element.contains(target));
+}
+
 /* eslint-disable  @typescript-eslint/no-explicit-any */
 /**
  * Form control component for selecting multiple options from a dropdown, displaying selected values as chips
@@ -5839,7 +5908,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
 class FwMultiSelectMenuComponent {
     constructor() {
         this.elementRef = inject(ElementRef);
+        this.document = inject(DOCUMENT);
         this.listboxId = inject(_IdGenerator).getId('fw-multi-select-listbox-');
+        this.documentClickListener = (event) => this.outsideClick(event);
         // options
         this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
         this.valueProperty = input('value', ...(ngDevMode ? [{ debugName: "valueProperty" }] : /* istanbul ignore next */ []));
@@ -5864,6 +5935,12 @@ class FwMultiSelectMenuComponent {
         this.minOptionsHeight = input(...(ngDevMode ? [undefined, { debugName: "minOptionsHeight" }] : /* istanbul ignore next */ []));
         this.maxOptionsHeight = input('400px', ...(ngDevMode ? [{ debugName: "maxOptionsHeight" }] : /* istanbul ignore next */ []));
         this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * The control itself, which is only as wide as `width()`. The host element is a block element and
+         * so can be considerably wider, and a click in that gap is an outside click.
+         */
+        this.wrapper = viewChild('wrapper', { ...(ngDevMode ? { debugName: "wrapper" } : /* istanbul ignore next */ {}), read: ElementRef });
+        /** The options panel, `undefined` while it is closed since it only exists inside the cdk overlay */
         this.menuFilter = viewChild(FwMenuContainerComponent, ...(ngDevMode ? [{ debugName: "menuFilter" }] : /* istanbul ignore next */ []));
         // need this for the template
         this.createArray = (d) => Array.from(d);
@@ -5874,7 +5951,6 @@ class FwMultiSelectMenuComponent {
         this.focusedIndex = signal(0, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
         this.touched = false;
         this.subscriptions = [];
-        this._isOpen = false;
         // eslint-disable-next-line @angular-eslint/no-output-native
         this.change = new EventEmitter();
         this.defaultFilter = (filter, menuItems) => {
@@ -5935,7 +6011,7 @@ class FwMultiSelectMenuComponent {
         /* eslint-enable */
         // needs to be an arrow function to lock the scope
         this.handleKeyDown = (event) => {
-            const handler = this.trigger.isOpen()
+            const handler = this.isMenuOpen()
                 ? this.keyboardActionMap[event.key]
                 : this.closedTriggerKeyboardActionsMap[event.key];
             if (handler) {
@@ -5944,18 +6020,35 @@ class FwMultiSelectMenuComponent {
             }
         };
     }
+    /**
+     * Closes the options panel when a click lands outside of both the trigger and the panel.
+     *
+     * Registered by hand instead of through `@HostListener('document:click')` so that it runs in the
+     * capture phase: a number of components in the library (`fw-menu-item`, `fw-chip`, `fw-navbar-item`,
+     * the dialog backdrop, ...) call `stopPropagation()` on click, which would otherwise keep this
+     * listener from ever seeing the click and leave the panel open.
+     */
     outsideClick(event) {
-        if (this._isOpen) {
-            const clickedInside = this.elementRef.nativeElement.contains(event.target);
-            if (clickedInside) {
-                return;
-            }
-            this.trigger.close();
-            this._isOpen = false;
-        }
-        if (this.trigger && this.trigger.isOpen()) {
-            this._isOpen = true;
+        if (!this.isMenuOpen() || this.isEventInsideSelect(event)) {
+            return;
         }
+        this.onTouched();
+        this.trigger.close();
+    }
+    /**
+     * Whether the options panel is currently open. The single place this class asks that question -
+     * the trigger owns the state, so there is no local flag to keep in sync.
+     *
+     * ! Deliberately a plain method, not a `computed()` ! The trigger reports its state from the
+     * overlay ref rather than from a signal, so a computed would memoize the first answer and stop
+     * tracking, silently freezing `aria-expanded`.
+     */
+    isMenuOpen() {
+        return this.trigger?.isOpen() ?? false;
+    }
+    /** Whether an event originated on this select's control box or inside its rendered options panel */
+    isEventInsideSelect(event) {
+        return isEventInside(event, this.wrapper()?.nativeElement, this.menuFilter()?.hostElement);
     }
     get value() {
         return this._value;
@@ -5978,7 +6071,11 @@ class FwMultiSelectMenuComponent {
     writeValue(value) {
         this.value = value;
     }
+    ngOnInit() {
+        this.document.addEventListener('click', this.documentClickListener, true);
+    }
     ngOnDestroy() {
+        this.document.removeEventListener('click', this.documentClickListener, true);
         for (const subscription of this.subscriptions) {
             subscription.unsubscribe();
         }
@@ -6117,13 +6214,13 @@ class FwMultiSelectMenuComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwMultiSelectMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", 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: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", 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: { "keydown": "handleKeyDown($event)" }, properties: { "tabIndex": "this.tabIndex", "class.disabled": "this.disabledClass" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => FwMultiSelectMenuComponent),
                 multi: true,
             },
-        ], 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    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"trigger?.isOpen() || false\"\n    [attr.aria-controls]=\"listboxId\"\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        role=\"listbox\"\n        [id]=\"listboxId\"\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", "closeLabel", "disabled", "selected", "textWrap", "selectable"], outputs: ["close", "select"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["ariaLabel", "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", "focusInitial"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value", "role", "id"], outputs: ["disabledChange", "valueChange", "change"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["itemRole", "value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["itemRoleChange", "sizeChange", "disabledChange", "showCheckboxChange", "multiSelectChange", "hiddenChange", "subItemsOpenChange", "mouseEnterHandlerChange", "click", "focusedChange", "selectedChange"] }, { kind: "pipe", type: SlicePipe, name: "slice" }] }); }
+        ], queries: [{ propertyName: "customMenuItems", predicate: FwMenuItemComponent, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, read: ElementRef, isSignal: true }, { 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    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"trigger?.isOpen() || false\"\n    [attr.aria-controls]=\"listboxId\"\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        role=\"listbox\"\n        [id]=\"listboxId\"\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", "closeLabel", "disabled", "selected", "textWrap", "selectable"], outputs: ["close", "select"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["ariaLabel", "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", "focusInitial"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value", "role", "id"], outputs: ["disabledChange", "valueChange", "change"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["itemRole", "value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["itemRoleChange", "sizeChange", "disabledChange", "showCheckboxChange", "multiSelectChange", "hiddenChange", "subItemsOpenChange", "mouseEnterHandlerChange", "click", "focusedChange", "selectedChange"] }, { kind: "pipe", type: SlicePipe, name: "slice" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwMultiSelectMenuComponent, decorators: [{
             type: Component,
@@ -6146,16 +6243,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                         FwMenuItemComponent,
                         SlicePipe,
                     ], 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    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"trigger?.isOpen() || false\"\n    [attr.aria-controls]=\"listboxId\"\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        role=\"listbox\"\n        [id]=\"listboxId\"\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"] }]
-        }], propDecorators: { outsideClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], valueProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueProperty", required: false }] }], titleProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleProperty", required: false }] }], iconProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconProperty", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], useCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "useCheckbox", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], maxSelectedShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedShown", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], showFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFilter", required: false }] }], showSelectionInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectionInfo", required: false }] }], filterItemsOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterItemsOnSelect", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], optionsWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsWidth", required: false }] }], minOptionsHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minOptionsHeight", required: false }] }], maxOptionsHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxOptionsHeight", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], trigger: [{
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], valueProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueProperty", required: false }] }], titleProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleProperty", required: false }] }], iconProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconProperty", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], useCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "useCheckbox", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], maxSelectedShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedShown", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], showFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFilter", required: false }] }], showSelectionInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectionInfo", required: false }] }], filterItemsOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterItemsOnSelect", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], optionsWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsWidth", required: false }] }], minOptionsHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minOptionsHeight", required: false }] }], maxOptionsHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxOptionsHeight", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], trigger: [{
                 type: ViewChild,
                 args: [CdkMenuTrigger]
             }], menu: [{
                 type: ViewChild,
                 args: [FwMenuComponent]
-            }], menuFilter: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FwMenuContainerComponent), { isSignal: true }] }], renderedMenuItems: [{
+            }], wrapper: [{ type: i0.ViewChild, args: ['wrapper', { ...{ read: ElementRef }, isSignal: true }] }], menuFilter: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FwMenuContainerComponent), { isSignal: true }] }], renderedMenuItems: [{
                 type: ViewChildren,
                 args: [FwMenuItemComponent]
             }], customMenuItems: [{
@@ -6182,28 +6276,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
  * @see [Vision storybook](https://cdn.flywheel.io/docs/vision/master/?path=/docs/form-controls-select--docs)
  */
 class FwSelectMenuComponent {
-    outsideClick(evt) {
-        // Check if click is inside the overlay (menu items) but NOT on the input trigger
-        const clickedElement = evt.target;
-        const overlayPane = clickedElement.closest('.cdk-overlay-pane');
-        const clickedInsideOverlay = overlayPane && !clickedElement.closest('fw-text-input');
-        // Don't process outside clicks when clicking on menu items (but not the trigger input)
-        if (clickedInsideOverlay) {
+    /**
+     * Closes the options panel when a click lands outside of both the trigger and the panel.
+     *
+     * Registered by hand instead of through `@HostListener('document:click')` so that it runs in the
+     * capture phase: a number of components in the library (`fw-menu-item`, `fw-chip`, `fw-navbar-item`,
+     * the dialog backdrop, ...) call `stopPropagation()` on click, which would otherwise keep this
+     * listener from ever seeing the click and leave the panel open.
+     */
+    outsideClick(event) {
+        if (!this.isMenuOpen() || this.isEventInsideSelect(event)) {
             return;
         }
-        if (this._isOpen && evt.target.nodeName !== 'INPUT') {
-            this.onTouched();
-            this.close();
-            this._isOpen = false;
-        }
-        // Sync _isOpen state with actual trigger state
-        if (this.trigger && this.trigger.isOpen()) {
-            this._isOpen = true;
-        }
-        else {
-            this._isOpen = false;
+        // Typing moves `selectValue` onto the highlighted match without committing it, so a dismissed
+        // filter has to be rolled back or the input ends up displaying an option that was never picked
+        const hadUncommittedFilter = this.isTyping();
+        this.onTouched();
+        this.close();
+        this.inFocusOpen = false;
+        if (hadUncommittedFilter) {
+            this.selectValue.set(this.displayValueOnOpen);
+            this.selectTitle.set(this.displayTitleOnOpen);
+            this.updateHighlighting();
         }
     }
+    /** Whether an event originated on this select's control box or inside its rendered options panel */
+    isEventInsideSelect(event) {
+        return isEventInside(event, this.wrapper()?.nativeElement, this.panel()?.hostElement);
+    }
     get disabledClass() {
         return this.disabled();
     }
@@ -6218,7 +6318,9 @@ class FwSelectMenuComponent {
     }
     constructor() {
         this.ngControl = inject(NgControl, { optional: true, self: true });
+        this.document = inject(DOCUMENT);
         this.listboxId = inject(_IdGenerator).getId('fw-select-listbox-');
+        this.documentClickListener = (event) => this.outsideClick(event);
         this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
         this.valueProperty = input('value', ...(ngDevMode ? [{ debugName: "valueProperty" }] : /* istanbul ignore next */ []));
         this.useFullOptionAsValue = input(false, ...(ngDevMode ? [{ debugName: "useFullOptionAsValue" }] : /* istanbul ignore next */ []));
@@ -6237,6 +6339,13 @@ class FwSelectMenuComponent {
         this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.placeholder = input('Select something...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
         this.menu = viewChild(FwMenuComponent, ...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
+        /**
+         * The control itself, which is only as wide as `width()`. The host element is a block element and
+         * so can be considerably wider, and a click in that gap is an outside click.
+         */
+        this.wrapper = viewChild('wrapper', { ...(ngDevMode ? { debugName: "wrapper" } : /* istanbul ignore next */ {}), read: ElementRef });
+        /** The options panel, `undefined` while it is closed since it only exists inside the cdk overlay */
+        this.panel = viewChild(FwMenuContainerComponent, ...(ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []));
         this.menuItems = contentChildren(FwMenuItemComponent, { ...(ngDevMode ? { debugName: "menuItems" } : /* istanbul ignore next */ {}), descendants: true });
         this.viewMenuItems = viewChildren(FwMenuItemComponent, ...(ngDevMode ? [{ debugName: "viewMenuItems" }] : /* istanbul ignore next */ []));
         this.menuItemGroups = contentChildren(FwMenuItemGroupComponent, { ...(ngDevMode ? { debugName: "menuItemGroups" } : /* istanbul ignore next */ {}), descendants: true });
@@ -6248,9 +6357,11 @@ class FwSelectMenuComponent {
         this.filterValue = signal('', ...(ngDevMode ? [{ debugName: "filterValue" }] : /* istanbul ignore next */ []));
         this.menuItemClickSubscriptions = [];
         this.subscriptions = [];
-        this._isOpen = false;
         this.focused = 0;
         this.inFocusOpen = false;
+        /** Displayed value and title as of the last time the panel was opened, used to undo a dismissed filter */
+        this.displayValueOnOpen = '';
+        this.displayTitleOnOpen = '';
         this.isTyping = signal(false, ...(ngDevMode ? [{ debugName: "isTyping" }] : /* istanbul ignore next */ []));
         this.valueDisplayFn = input((menuItem) => menuItem.title() || '', ...(ngDevMode ? [{ debugName: "valueDisplayFn" }] : /* istanbul ignore next */ []));
         this.defaultFilterFn = (filter, items) => items.filter((item) => {
@@ -6289,7 +6400,9 @@ class FwSelectMenuComponent {
                 return displayFn(selectedMenuItem);
             }
             const selectedOption = options.find((opt) => opt[this.valueProperty()]?.toString() === currentValue);
-            return selectedOption?.[this.titleProperty()] || '';
+            // `||` would swallow a legitimate `0` title and leave the input showing its placeholder, and it
+            // would also let a non-string title through into this `linkedSignal<string>` untouched
+            return String(selectedOption?.[this.titleProperty()] ?? '');
         }, ...(ngDevMode ? [{ debugName: "selectTitle" }] : /* istanbul ignore next */ []));
         // Watch for menu items changes and re-subscribe
         this.menuItemsWatcher = effect(() => {
@@ -6331,11 +6444,14 @@ class FwSelectMenuComponent {
         }
     }
     ngOnInit() {
+        this.document.addEventListener('click', this.documentClickListener, true);
         const onOpenSub = this.trigger.opened.subscribe(() => {
             // Initialize navigation state synchronously so the first arrow key press
             // navigates relative to the selected item rather than being swallowed by setup
             this.inFocusOpen = true;
             this.preFocusValue = this.value;
+            this.displayValueOnOpen = this.selectValue();
+            this.displayTitleOnOpen = this.selectTitle();
             this.initializeFocusedIndex();
             const currentValue = this.selectValue();
             setTimeout(() => {
@@ -6371,6 +6487,7 @@ class FwSelectMenuComponent {
         }
     }
     ngOnDestroy() {
+        this.document.removeEventListener('click', this.documentClickListener, true);
         this.menuItemClickSubscriptions.forEach((sub) => sub.unsubscribe());
         this.subscriptions.forEach((sub) => sub.unsubscribe());
     }
@@ -6418,14 +6535,22 @@ class FwSelectMenuComponent {
         this.close();
         this.inFocusOpen = false;
     }
+    /**
+     * Whether the options panel is currently open. The single place this class asks that question -
+     * the trigger owns the state, so there is no local flag to keep in sync.
+     *
+     * ! Deliberately a plain method, not a `computed()` ! The trigger reports its state from the
+     * overlay ref rather than from a signal, so a computed would memoize the first answer and stop
+     * tracking, silently freezing `aria-expanded`.
+     */
     isMenuOpen() {
-        return this.trigger.isOpen();
+        return this.trigger?.isOpen() ?? false;
     }
     /**
      * The DOM id of the currently active/highlighted option, for aria-activedescendant on the combobox input.
      */
     getActiveDescendantId() {
-        if (!this.trigger.isOpen()) {
+        if (!this.isMenuOpen()) {
             return undefined;
         }
         const availableItems = this.getAvailableItems();
@@ -6446,7 +6571,7 @@ class FwSelectMenuComponent {
     getAvailableItems() {
         // If using options input, return filtered options excluding disabled ones
         if (this.options().length > 0) {
-            return this.filteredOptions().filter(opt => !opt['disabled']);
+            return this.filteredOptions().filter((opt) => !opt['disabled']);
         }
         // If using content projection, filter by typeahead text and exclude disabled items
         if (this.menuItems().length > 0) {
@@ -6589,7 +6714,6 @@ class FwSelectMenuComponent {
             if (hasSelection) {
                 this.isTyping.set(true);
                 this.trigger.open();
-                this._isOpen = true;
                 this.inFocusOpen = true;
                 this.preFocusValue = this.value;
                 this.initializeFocusedIndex();
@@ -6615,7 +6739,7 @@ class FwSelectMenuComponent {
             'PageDown',
             'Delete',
         ].includes(event.key);
-        if (!this.trigger.isOpen() &&
+        if (!this.isMenuOpen() &&
             !this.isTyping() &&
             this.selectTitle() &&
             event.key.length === 1 &&
@@ -6627,7 +6751,6 @@ class FwSelectMenuComponent {
             // Just switch to typing mode and the input event will update filterValue
             this.isTyping.set(true);
             this.trigger.open();
-            this._isOpen = true;
             this.inFocusOpen = true;
             this.preFocusValue = this.value;
             this.initializeFocusedIndex();
@@ -6640,7 +6763,7 @@ class FwSelectMenuComponent {
             // Let default behavior happen, onInputChange will handle it
             return;
         }
-        if (this.trigger.isOpen()) {
+        if (this.isMenuOpen()) {
             if (this.inFocusOpen) {
                 if (event.key === 'ArrowDown') {
                     event.preventDefault();
@@ -6752,7 +6875,7 @@ class FwSelectMenuComponent {
         }
     }
     handleKeyUp(event) {
-        if (this.trigger.isOpen()) {
+        if (this.isMenuOpen()) {
             if (event.key === 'Escape') {
                 this.isTyping.set(false);
                 this.close();
@@ -6824,7 +6947,6 @@ class FwSelectMenuComponent {
         this.trigger.close();
         this.filterValue.set('');
         this.filterChanged.emit(this.filterValue());
-        this._isOpen = false;
         this.isTyping.set(false);
     }
     onFilterChanged(value) {
@@ -6878,13 +7000,12 @@ class FwSelectMenuComponent {
         }, 0);
         this.filterChanged.emit(this.filterValue());
         // Auto-open dropdown when user starts typing
-        if (this.filterValue() && !this.trigger.isOpen()) {
+        if (this.filterValue() && !this.isMenuOpen()) {
             this.trigger.open();
-            this._isOpen = true;
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwSelectMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FwSelectMenuComponent, isStandalone: true, selector: "fw-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, valueProperty: { classPropertyName: "valueProperty", publicName: "valueProperty", isSignal: true, isRequired: false, transformFunction: null }, useFullOptionAsValue: { classPropertyName: "useFullOptionAsValue", publicName: "useFullOptionAsValue", 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 }, staticIcon: { classPropertyName: "staticIcon", publicName: "staticIcon", isSignal: true, isRequired: false, transformFunction: null }, descriptionProperty: { classPropertyName: "descriptionProperty", publicName: "descriptionProperty", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showReset: { classPropertyName: "showReset", publicName: "showReset", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errored: { classPropertyName: "errored", publicName: "errored", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, valueDisplayFn: { classPropertyName: "valueDisplayFn", publicName: "valueDisplayFn", 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", filterChanged: "filterChanged" }, host: { listeners: { "document:click": "outsideClick($event)" }, properties: { "class.disabled": "this.disabledClass" } }, queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "menuItemGroups", predicate: FwMenuItemGroupComponent, descendants: true, isSignal: true }, { propertyName: "menuSeparators", predicate: FwMenuSeparatorComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true, isSignal: true }, { propertyName: "viewMenuItems", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true, static: true }, { propertyName: "textInput", first: true, predicate: FwTextInputComponent, descendants: true }], ngImport: i0, template: "<div #wrapper [style.width]=\"width()\">\n  <fw-text-input\n    fwMenuRegister\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [value]=\"inputDisplayValue()\"\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    (input)=\"onInputChange($event)\"\n    (keyup)=\"handleKeyUp($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n    (focus)=\"handleFocus()\"\n    (click)=\"handleInputClick()\"\n    [readOnly]=\"false\"\n    role=\"combobox\"\n    [ariaExpanded]=\"isMenuOpen()\"\n    [ariaControls]=\"listboxId\"\n    ariaAutocomplete=\"list\"\n    [ariaActiveDescendant]=\"getActiveDescendantId()\">\n  </fw-text-input>\n  <ng-template #selectMenu>\n    @if (!disabled()) {\n      <fw-menu-container\n        [filterFn]=\"filterFn()\"\n        [filterText]=\"filterValue()\"\n        [additionalMenuItems]=\"menuItems()\"\n        [additionalGroups]=\"menuItemGroups()\"\n        [additionalSeparators]=\"menuSeparators()\"\n        [showFilter]=\"showFilter()\" [width]=\"optionsWidth() || wrapper.offsetWidth + 'px'\"\n        [maxHeight]=\"maxOptionsHeight()\" [minHeight]=\"minOptionsHeight()\" (filterChanged)=\"onFilterChanged($event)\">\n        <fw-menu\n          role=\"listbox\"\n          [id]=\"listboxId\"\n          [disabled]=\"disabled()\"\n          [value]=\"selectValue()\"\n          (change)=\"handleClick($any($event))\"\n        >\n          @if (menuItems().length === 0) {\n            @for (item of optionsWithValues(); track item.trackingId) {\n              <fw-menu-item\n                [title]=\"item.raw[titleProperty()]?.toString()\"\n                [description]=\"$any(item.raw[descriptionProperty()])\"\n                [value]=\"item.value\"\n                [icon]=\"$any(item.raw[iconProperty()])\"\n                [disabled]=\"$any(item.raw).disabled\"\n              />\n            }\n          }\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    }\n  </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box;max-width:100%}:host>div{cursor:pointer}:host.disabled{opacity:.4;cursor:not-allowed}:host.disabled>div{pointer-events:none}\n"], dependencies: [{ kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "rightIcon", "leftIconLabel", "rightIconLabel", "prefix", "context", "ariaLabel", "required", "role", "ariaExpanded", "ariaControls", "ariaAutocomplete", "ariaActiveDescendant", "helperText", "errorText", "errorInIconTooltip", "placeholder", "readOnly", "size", "type", "maxLength", "autofocus", "autocomplete", "value", "error", "width"], outputs: ["disabledChange", "leftIconAction", "rightIconAction"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { 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: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value", "role", "id"], outputs: ["disabledChange", "valueChange", "change"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["itemRole", "value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["itemRoleChange", "sizeChange", "disabledChange", "showCheckboxChange", "multiSelectChange", "hiddenChange", "subItemsOpenChange", "mouseEnterHandlerChange", "click", "focusedChange", "selectedChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FwSelectMenuComponent, isStandalone: true, selector: "fw-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, valueProperty: { classPropertyName: "valueProperty", publicName: "valueProperty", isSignal: true, isRequired: false, transformFunction: null }, useFullOptionAsValue: { classPropertyName: "useFullOptionAsValue", publicName: "useFullOptionAsValue", 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 }, staticIcon: { classPropertyName: "staticIcon", publicName: "staticIcon", isSignal: true, isRequired: false, transformFunction: null }, descriptionProperty: { classPropertyName: "descriptionProperty", publicName: "descriptionProperty", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showReset: { classPropertyName: "showReset", publicName: "showReset", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errored: { classPropertyName: "errored", publicName: "errored", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, valueDisplayFn: { classPropertyName: "valueDisplayFn", publicName: "valueDisplayFn", 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", filterChanged: "filterChanged" }, host: { properties: { "class.disabled": "this.disabledClass" } }, queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "menuItemGroups", predicate: FwMenuItemGroupComponent, descendants: true, isSignal: true }, { propertyName: "menuSeparators", predicate: FwMenuSeparatorComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true, isSignal: true }, { propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "panel", first: true, predicate: FwMenuContainerComponent, descendants: true, isSignal: true }, { propertyName: "viewMenuItems", predicate: FwMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true, static: true }, { propertyName: "textInput", first: true, predicate: FwTextInputComponent, descendants: true }], ngImport: i0, template: "<div #wrapper [style.width]=\"width()\">\n  <fw-text-input\n    fwMenuRegister\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [value]=\"inputDisplayValue()\"\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    (input)=\"onInputChange($event)\"\n    (keyup)=\"handleKeyUp($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n    (focus)=\"handleFocus()\"\n    (click)=\"handleInputClick()\"\n    [readOnly]=\"false\"\n    role=\"combobox\"\n    [ariaExpanded]=\"isMenuOpen()\"\n    [ariaControls]=\"listboxId\"\n    ariaAutocomplete=\"list\"\n    [ariaActiveDescendant]=\"getActiveDescendantId()\">\n  </fw-text-input>\n  <ng-template #selectMenu>\n    @if (!disabled()) {\n      <fw-menu-container\n        [filterFn]=\"filterFn()\"\n        [filterText]=\"filterValue()\"\n        [additionalMenuItems]=\"menuItems()\"\n        [additionalGroups]=\"menuItemGroups()\"\n        [additionalSeparators]=\"menuSeparators()\"\n        [showFilter]=\"showFilter()\" [width]=\"optionsWidth() || wrapper.offsetWidth + 'px'\"\n        [maxHeight]=\"maxOptionsHeight()\" [minHeight]=\"minOptionsHeight()\" (filterChanged)=\"onFilterChanged($event)\">\n        <fw-menu\n          role=\"listbox\"\n          [id]=\"listboxId\"\n          [disabled]=\"disabled()\"\n          [value]=\"selectValue()\"\n          (change)=\"handleClick($any($event))\"\n        >\n          @if (menuItems().length === 0) {\n            @for (item of optionsWithValues(); track item.trackingId) {\n              <fw-menu-item\n                [title]=\"item.raw[titleProperty()]?.toString()\"\n                [description]=\"$any(item.raw[descriptionProperty()])\"\n                [value]=\"item.value\"\n                [icon]=\"$any(item.raw[iconProperty()])\"\n                [disabled]=\"$any(item.raw).disabled\"\n              />\n            }\n          }\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    }\n  </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box;max-width:100%}:host>div{cursor:pointer}:host.disabled{opacity:.4;cursor:not-allowed}:host.disabled>div{pointer-events:none}\n"], dependencies: [{ kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "rightIcon", "leftIconLabel", "rightIconLabel", "prefix", "context", "ariaLabel", "required", "role", "ariaExpanded", "ariaControls", "ariaAutocomplete", "ariaActiveDescendant", "helperText", "errorText", "errorInIconTooltip", "placeholder", "readOnly", "size", "type", "maxLength", "autofocus", "autocomplete", "value", "error", "width"], outputs: ["disabledChange", "leftIconAction", "rightIconAction"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { 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: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value", "role", "id"], outputs: ["disabledChange", "valueChange", "change"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["itemRole", "value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["itemRoleChange", "sizeChange", "disabledChange", "showCheckboxChange", "multiSelectChange", "hiddenChange", "subItemsOpenChange", "mouseEnterHandlerChange", "click", "focusedChange", "selectedChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FwSelectMenuComponent, decorators: [{
             type: Component,
@@ -6896,10 +7017,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                         FwMenuComponent,
                         FwMenuItemComponent,
                     ], template: "<div #wrapper [style.width]=\"width()\">\n  <fw-text-input\n    fwMenuRegister\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [value]=\"inputDisplayValue()\"\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    (input)=\"onInputChange($event)\"\n    (keyup)=\"handleKeyUp($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n    (focus)=\"handleFocus()\"\n    (click)=\"handleInputClick()\"\n    [readOnly]=\"false\"\n    role=\"combobox\"\n    [ariaExpanded]=\"isMenuOpen()\"\n    [ariaControls]=\"listboxId\"\n    ariaAutocomplete=\"list\"\n    [ariaActiveDescendant]=\"getActiveDescendantId()\">\n  </fw-text-input>\n  <ng-template #selectMenu>\n    @if (!disabled()) {\n      <fw-menu-container\n        [filterFn]=\"filterFn()\"\n        [filterText]=\"filterValue()\"\n        [additionalMenuItems]=\"menuItems()\"\n        [additionalGroups]=\"menuItemGroups()\"\n        [additionalSeparators]=\"menuSeparators()\"\n        [showFilter]=\"showFilter()\" [width]=\"optionsWidth() || wrapper.offsetWidth + 'px'\"\n        [maxHeight]=\"maxOptionsHeight()\" [minHeight]=\"minOptionsHeight()\" (filterChanged)=\"onFilterChanged($event)\">\n        <fw-menu\n          role=\"listbox\"\n          [id]=\"listboxId\"\n          [disabled]=\"disabled()\"\n          [value]=\"selectValue()\"\n          (change)=\"handleClick($any($event))\"\n        >\n          @if (menuItems().length === 0) {\n            @for (item of optionsWithValues(); track item.trackingId) {\n              <fw-menu-item\n                [title]=\"item.raw[titleProperty()]?.toString()\"\n                [description]=\"$any(item.raw[descriptionProperty()])\"\n                [value]=\"item.value\"\n                [icon]=\"$any(item.raw[iconProperty()])\"\n                [disabled]=\"$any(item.raw).disabled\"\n              />\n            }\n          }\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    }\n  </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box;max-width:100%}:host>div{cursor:pointer}:host.disabled{opacity:.4;cursor:not-allowed}:host.disabled>div{pointer-events:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { outsideClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }], disabledClass: [{
+        }], ctorParameters: () => [], propDecorators: { disabledClass: [{
                 type: HostBinding,
                 args: ['class.disabled']
             }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], valueProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueProperty", required: false }] }], useFullOptionAsValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "useFullOptionAsValue", required: false }] }], titleProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleProperty", required: false }] }], iconProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconProperty", required: false }] }], staticIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "staticIcon", required: false }] }], descriptionProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptionProperty", required: false }] }], showFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFilter", required: false }] }], showReset: [{ type: i0.Input, args: [{ isSignal: true, alias: "showReset", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], errored: [{ type: i0.Input, args: [{ isSignal: true, alias: "errored", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], optionsWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsWidth", required: false }] }], minOptionsHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minOptionsHeight", required: false }] }], maxOptionsHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxOptionsHeight", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], trigger: [{
@@ -6908,7 +7026,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
             }], textInput: [{
                 type: ViewChild,
                 args: [FwTextInputComponent]
-            }], menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FwMenuComponent), { isSignal: true }] }], menuItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FwMenuItemComponent), { ...{ descendants: true }, isSignal: true }] }], viewMenuItems: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => FwMenuItemComponent), { isSignal: true }] }], menuItemGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FwMenuItemGroupComponent), { ...{ descendants: true }, isSignal: true }] }], menuSeparators: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FwMenuSeparatorComponent), { ...{ descendants: true }, isSignal: true }] }], change: [{
+            }], menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FwMenuComponent), { isSignal: true }] }], wrapper: [{ type: i0.ViewChild, args: ['wrapper', { ...{ read: ElementRef }, isSignal: true }] }], panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FwMenuContainerComponent), { isSignal: true }] }], menuItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FwMenuItemComponent), { ...{ descendants: true }, isSignal: true }] }], viewMenuItems: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => FwMenuItemComponent), { isSignal: true }] }], menuItemGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FwMenuItemGroupComponent), { ...{ descendants: true }, isSignal: true }] }], menuSeparators: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FwMenuSeparatorComponent), { ...{ descendants: true }, isSignal: true }] }], change: [{
                 type: Output
             }], filterChanged: [{
                 type: Output
@@ -8449,8 +8567,12 @@ class FwStepperComponent {
             return;
         }
         this.activeStep.set(step);
-        this.stepChange.emit(parseInt(step?.toString())); // weirdly passing out step directly fails the eqeqeq
+        // Same ordering rule as FwMenuComponent.writeValue: lay the steps out before calling out to a
+        // listener, so a handler that removes the stepper cannot leave `updateSteps()` writing to
+        // `model()`s on destroyed `fw-step`s (NG0953). `updateSteps()` only reads `activeStep()`, set
+        // on the line above, so the layout is unchanged.
         this.updateSteps();
+        this.stepChange.emit(parseInt(step?.toString())); // weirdly passing out step directly fails the eqeqeq
     }
     updateSteps() {
         if (this.steps && this.steps.length > 0) {