@eagami/ui 5.26.0 → 5.26.1

package/fesm2022/eagami-ui.mjs

@@ -7670,11 +7670,14 @@ class CommandPaletteComponent {
     /**
      * Items bucketed by `group`, then flattened back into display order
      * (ungrouped items first, then each named group). The matching
-     * `filteredItems` array follows this same order so `flatIndex` lines up
-     * one-to-one with what the user sees.
+     * `filteredEntries` array follows this same order so `flatIndex` lines up
+     * one-to-one with what the user sees. Each entry resolves its disabled state
+     * once here, so a consumer's `disabledWhen` runs once per match rather than
+     * on every binding read.
      */
     groupedItems = computed(() => {
         const q = this.query().trim().toLowerCase();
+        const disabledWhen = this.disabledWhen();
         const candidates = this.items().filter(item => {
             if (!q) {
                 return true;
@@ -7701,7 +7704,11 @@ class CommandPaletteComponent {
         const pushGroup = (group, items) => {
             groups.push({
                 group,
-                items: items.map(item => ({ item, flatIndex: flatIndex++ })),
+                items: items.map(item => ({
+                    item,
+                    flatIndex: flatIndex++,
+                    disabled: !!item.disabled || !!disabledWhen?.(item),
+                })),
             });
         };
         const ungrouped = buckets.get('');
@@ -7720,8 +7727,8 @@ class CommandPaletteComponent {
      * Flat list of matches in display order. Drives keyboard navigation and
      * `aria-activedescendant`.
      */
-    filteredItems = computed(() => this.groupedItems().flatMap(group => group.items.map(entry => entry.item)), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
+    filteredEntries = computed(() => this.groupedItems().flatMap(group => group.items), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredEntries" }] : /* istanbul ignore next */ []));
     _activeIndex = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_activeIndex" }] : /* istanbul ignore next */ []));
     /**
@@ -7738,35 +7745,23 @@ class CommandPaletteComponent {
     interaction = signal('keyboard', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "interaction" }] : /* istanbul ignore next */ []));
     activeIndex = computed(() => {
-        const items = this.filteredItems();
-        if (items.length === 0) {
+        const entries = this.filteredEntries();
+        if (entries.length === 0) {
             return -1;
         }
         // Open/filter resets pin the index at 0, which may be a disabled row;
         // resolve to the nearest enabled one, preferring the next row down
-        const start = Math.min(this._activeIndex(), items.length - 1);
-        if (!this.isItemDisabled(items[start])) {
-            return start;
-        }
-        for (let idx = start + 1; idx < items.length; idx++) {
-            if (!this.isItemDisabled(items[idx])) {
-                return idx;
-            }
-        }
-        for (let idx = start - 1; idx >= 0; idx--) {
-            if (!this.isItemDisabled(items[idx])) {
-                return idx;
-            }
-        }
-        return -1;
+        const start = Math.min(this._activeIndex(), entries.length - 1);
+        const forward = this.firstEnabled(start, 1);
+        return forward >= 0 ? forward : this.firstEnabled(start - 1, -1);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
     activeId = computed(() => {
         const idx = this.activeIndex();
         if (idx < 0) {
-            return null;
+            return undefined;
         }
-        return `ea-command-palette-item-${this.filteredItems()[idx].id}`;
+        return `ea-command-palette-item-${this.filteredEntries()[idx].item.id}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
     constructor() {
@@ -7796,8 +7791,15 @@ class CommandPaletteComponent {
     itemDomId(item) {
         return `ea-command-palette-item-${item.id}`;
     }
-    isItemDisabled(item) {
-        return !!item.disabled || !!this.disabledWhen()?.(item);
+    /** Index of the first enabled entry from `start`, walking in `step`; -1 when none. */
+    firstEnabled(start, step) {
+        const entries = this.filteredEntries();
+        for (let idx = start; idx >= 0 && idx < entries.length; idx += step) {
+            if (!entries[idx].disabled) {
+                return idx;
+            }
+        }
+        return -1;
     }
     isActive(flatIndex) {
         return this.activeIndex() === flatIndex;
@@ -7819,7 +7821,12 @@ class CommandPaletteComponent {
         this.interaction.set('keyboard');
     }
     onSearchKeydown(event) {
-        if (this.filteredItems().length === 0) {
+        /* Bound on the field host, which also contains the clear button; keys
+           pressed there must reach the button rather than drive the list. */
+        if (event.target !== this.searchEl()?.inputEl()?.nativeElement) {
+            return;
+        }
+        if (this.filteredEntries().length === 0) {
             return;
         }
         switch (event.key) {
@@ -7845,9 +7852,9 @@ class CommandPaletteComponent {
             }
             case 'Enter': {
                 event.preventDefault();
-                const item = this.filteredItems()[this.activeIndex()];
-                if (item && !this.isItemDisabled(item)) {
-                    this.executeItem(item);
+                const entry = this.filteredEntries()[this.activeIndex()];
+                if (entry) {
+                    this.executeItem(entry);
                 }
                 break;
             }
@@ -7855,11 +7862,11 @@ class CommandPaletteComponent {
     }
     /** Wrapping arrow-key move that skips disabled items. */
     moveActive(delta) {
-        const items = this.filteredItems();
+        const entries = this.filteredEntries();
         let idx = this.activeIndex();
-        for (let i = 0; i < items.length; i++) {
-            idx = (idx + delta + items.length) % items.length;
-            if (!this.isItemDisabled(items[idx])) {
+        for (let i = 0; i < entries.length; i++) {
+            idx = (idx + delta + entries.length) % entries.length;
+            if (!entries[idx].disabled) {
                 this.setActiveByKeyboard(idx);
                 return;
             }
@@ -7867,12 +7874,9 @@ class CommandPaletteComponent {
     }
     /** Home/End move to the first enabled item from the given end. */
     edgeActive(direction) {
-        const items = this.filteredItems();
-        let idx = direction === 1 ? 0 : items.length - 1;
-        while (idx >= 0 && idx < items.length && this.isItemDisabled(items[idx])) {
-            idx += direction;
-        }
-        if (idx >= 0 && idx < items.length) {
+        const start = direction === 1 ? 0 : this.filteredEntries().length - 1;
+        const idx = this.firstEnabled(start, direction);
+        if (idx >= 0) {
             this.setActiveByKeyboard(idx);
         }
     }
@@ -7881,18 +7885,14 @@ class CommandPaletteComponent {
         this.interaction.set('keyboard');
         this.scrollActiveIntoView();
     }
-    onItemClick(item) {
-        if (this.isItemDisabled(item)) {
-            return;
-        }
-        this.executeItem(item);
+    onItemClick(entry) {
+        this.executeItem(entry);
     }
-    onItemMouseEnter(flatIndex) {
-        const item = this.filteredItems()[flatIndex];
-        if (!item || this.isItemDisabled(item)) {
+    onItemMouseEnter(entry) {
+        if (entry.disabled) {
             return;
         }
-        this._activeIndex.set(flatIndex);
+        this._activeIndex.set(entry.flatIndex);
         this.interaction.set('mouse');
     }
     onListMouseLeave() {
@@ -7917,11 +7917,11 @@ class CommandPaletteComponent {
             this.open.set(false);
         }
     }
-    executeItem(item) {
-        if (this.isItemDisabled(item)) {
+    executeItem(entry) {
+        if (entry.disabled) {
             return;
         }
-        this.execute.emit(item);
+        this.execute.emit(entry.item);
         this.open.set(false);
     }
     scrollActiveIntoView() {
@@ -7935,11 +7935,11 @@ class CommandPaletteComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CommandPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: CommandPaletteComponent, isStandalone: true, selector: "ea-command-palette", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, disabledWhen: { classPropertyName: "disabledWhen", publicName: "disabledWhen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", execute: "execute" }, viewQueries: [{ propertyName: "dialogEl", first: true, predicate: ["dialogEl"], descendants: true, isSignal: true }, { propertyName: "searchEl", first: true, predicate: ["searchEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n  #dialogEl\n  class=\"ea-command-palette\"\n  [attr.aria-label]=\"messages().commandPalette.dialogLabel\"\n  (close)=\"onDialogClose()\"\n  (click)=\"onBackdropClick($event)\">\n  <div class=\"ea-command-palette__panel\">\n    <div class=\"ea-command-palette__search\">\n      <ea-input\n        #searchEl\n        class=\"ea-command-palette__search-input\"\n        [icon]=\"searchIcon\"\n        [clearable]=\"true\"\n        [role]=\"'combobox'\"\n        [autocomplete]=\"'off'\"\n        [aria-label]=\"resolvedPlaceholder()\"\n        [aria-controls]=\"filteredItems().length > 0 ? listboxId : undefined\"\n        [aria-expanded]=\"filteredItems().length > 0\"\n        [aria-autocomplete]=\"'list'\"\n        [aria-activedescendant]=\"activeId()\"\n        [placeholder]=\"resolvedPlaceholder()\"\n        [value]=\"query()\"\n        (valueChange)=\"onQueryChange($event)\"\n        (keydown)=\"onSearchKeydown($event)\" />\n    </div>\n\n    @if (filteredItems().length === 0) {\n      <p\n        class=\"ea-command-palette__empty\"\n        role=\"status\">\n        {{ emptyMessage() || messages().commandPalette.empty }}\n      </p>\n    } @else {\n      <ul\n        class=\"ea-command-palette__list\"\n        role=\"listbox\"\n        [id]=\"listboxId\"\n        (mouseleave)=\"onListMouseLeave()\">\n        @for (group of groupedItems(); track group.group; let gi = $index) {\n          @if (group.group) {\n            <li\n              class=\"ea-command-palette__section\"\n              role=\"presentation\">\n              <div\n                class=\"ea-command-palette__group\"\n                [id]=\"listboxId + '-group-' + gi\">\n                {{ group.group }}\n              </div>\n              <ul\n                class=\"ea-command-palette__section-list\"\n                role=\"group\"\n                [attr.aria-labelledby]=\"listboxId + '-group-' + gi\">\n                @for (entry of group.items; track entry.item.id) {\n                  <ng-container\n                    *ngTemplateOutlet=\"optionTpl; context: { $implicit: entry }\" />\n                }\n              </ul>\n            </li>\n          } @else {\n            @for (entry of group.items; track entry.item.id) {\n              <ng-container\n                *ngTemplateOutlet=\"optionTpl; context: { $implicit: entry }\" />\n            }\n          }\n        }\n      </ul>\n    }\n  </div>\n</dialog>\n\n<ng-template\n  #optionTpl\n  let-entry>\n  <li\n    class=\"ea-command-palette__item\"\n    role=\"option\"\n    [id]=\"itemDomId(entry.item)\"\n    [attr.aria-selected]=\"isActive(entry.flatIndex)\"\n    [attr.aria-disabled]=\"isItemDisabled(entry.item) || null\"\n    [class.ea-command-palette__item--active]=\"showActiveHighlight(entry.flatIndex)\"\n    [class.ea-command-palette__item--disabled]=\"isItemDisabled(entry.item)\"\n    (click)=\"onItemClick(entry.item)\"\n    (mouseenter)=\"onItemMouseEnter(entry.flatIndex)\">\n    @if (entry.item.icon; as iconClass) {\n      <span\n        class=\"ea-command-palette__item-icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"iconClass\" />\n      </span>\n    }\n    <span class=\"ea-command-palette__item-text\">\n      <span class=\"ea-command-palette__item-label\">\n        {{ entry.item.label }}\n      </span>\n      @if (entry.item.description) {\n        <span class=\"ea-command-palette__item-description\">\n          {{ entry.item.description }}\n        </span>\n      }\n    </span>\n    @if (entry.item.shortcut) {\n      <kbd class=\"ea-command-palette__item-shortcut\">\n        {{ entry.item.shortcut }}\n      </kbd>\n    }\n  </li>\n</ng-template>\n", styles: [".ea-command-palette{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,100vw - var(--space-8));max-height:70vh;padding:0;border:none;border-radius:var(--radius-lg);background:transparent;color:var(--color-text-primary)}.ea-command-palette::backdrop{background-color:var(--color-bg-overlay)}.ea-command-palette__panel{display:flex;flex-direction:column;max-height:70vh;overflow:hidden;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);background-color:var(--ea-command-palette-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-command-palette__panel{border:1px solid CanvasText}}.ea-command-palette__search{position:relative;display:flex;align-items:center;padding:var(--space-3) var(--space-4)}.ea-command-palette__search:after{position:absolute;bottom:0;inset-inline-end:var(--space-1);inset-inline-start:var(--space-1);height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-command-palette__search-input{flex:1;min-width:0}.ea-command-palette__list{flex:1;padding:var(--space-1);margin:0;overflow-y:auto;list-style:none}.ea-command-palette__section{position:relative;margin-top:var(--space-3)}.ea-command-palette__section:before{content:\"\";position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider)}.ea-command-palette__section:first-child{margin-top:0}.ea-command-palette__section:first-child:before{display:none}.ea-command-palette__section-list{padding:0;margin:0;list-style:none}.ea-command-palette__group{padding:var(--space-2) var(--space-3) var(--space-1);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-command-palette__item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-colors);-webkit-user-select:none;user-select:none}.ea-command-palette__item:hover:not(.ea-command-palette__item--disabled){background-color:var(--color-state-hover)}.ea-command-palette__item--active{background-color:var(--color-state-active)}@media(forced-colors:active){.ea-command-palette__item--active{background-color:Highlight;color:HighlightText}.ea-command-palette__item--active .ea-command-palette__item-icon,.ea-command-palette__item--active .ea-command-palette__item-description{color:HighlightText}}.ea-command-palette__item--disabled{opacity:.5;cursor:not-allowed}.ea-command-palette__item-icon{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;flex-shrink:0;color:var(--color-text-secondary)}.ea-command-palette__item-text{display:flex;flex:1;flex-direction:column;min-width:0}.ea-command-palette__item-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ea-command-palette__item-description{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ea-command-palette__item-shortcut{flex-shrink:0;padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs);font-family:var(--font-family-mono);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--ea-command-palette-background-color, var(--color-bg-elevated));color:var(--color-text-secondary)}.ea-command-palette__empty{padding:var(--space-6) var(--space-4);margin:0;font-size:var(--font-size-sm);text-align:center;color:var(--color-text-tertiary)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputComponent, selector: "ea-input", inputs: ["label", "aria-label", "role", "aria-expanded", "aria-controls", "aria-activedescendant", "aria-autocomplete", "type", "placeholder", "icon", "keepIcon", "size", "hint", "errorMsg", "errorMessages", "disabled", "readonly", "required", "autocomplete", "list", "min", "max", "step", "maxLength", "minLength", "autofocus", "showPasswordToggle", "clearable", "id", "value"], outputs: ["valueChange", "focused", "blurred"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: CommandPaletteComponent, isStandalone: true, selector: "ea-command-palette", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, disabledWhen: { classPropertyName: "disabledWhen", publicName: "disabledWhen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", execute: "execute" }, viewQueries: [{ propertyName: "dialogEl", first: true, predicate: ["dialogEl"], descendants: true, isSignal: true }, { propertyName: "searchEl", first: true, predicate: ["searchEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n  #dialogEl\n  class=\"ea-command-palette\"\n  [attr.aria-label]=\"messages().commandPalette.dialogLabel\"\n  (close)=\"onDialogClose()\"\n  (click)=\"onBackdropClick($event)\">\n  <div class=\"ea-command-palette__panel\">\n    <div class=\"ea-command-palette__search\">\n      <ea-input\n        #searchEl\n        class=\"ea-command-palette__search-input\"\n        [icon]=\"searchIcon\"\n        [clearable]=\"true\"\n        [role]=\"'combobox'\"\n        [autocomplete]=\"'off'\"\n        [aria-label]=\"resolvedPlaceholder()\"\n        [aria-controls]=\"filteredEntries().length > 0 ? listboxId : undefined\"\n        [aria-expanded]=\"filteredEntries().length > 0\"\n        [aria-autocomplete]=\"'list'\"\n        [aria-activedescendant]=\"activeId()\"\n        [placeholder]=\"resolvedPlaceholder()\"\n        [value]=\"query()\"\n        (valueChange)=\"onQueryChange($event)\"\n        (keydown)=\"onSearchKeydown($event)\" />\n    </div>\n\n    @if (filteredEntries().length === 0) {\n      <p\n        class=\"ea-command-palette__empty\"\n        role=\"status\">\n        {{ emptyMessage() || messages().commandPalette.empty }}\n      </p>\n    } @else {\n      <ul\n        class=\"ea-command-palette__list\"\n        role=\"listbox\"\n        [id]=\"listboxId\"\n        (mouseleave)=\"onListMouseLeave()\">\n        @for (group of groupedItems(); track group.group; let gi = $index) {\n          @if (group.group) {\n            <li\n              class=\"ea-command-palette__section\"\n              role=\"presentation\">\n              <div\n                class=\"ea-command-palette__group\"\n                [id]=\"listboxId + '-group-' + gi\">\n                {{ group.group }}\n              </div>\n              <ul\n                class=\"ea-command-palette__section-list\"\n                role=\"group\"\n                [attr.aria-labelledby]=\"listboxId + '-group-' + gi\">\n                @for (entry of group.items; track entry.item.id) {\n                  <ng-container\n                    *ngTemplateOutlet=\"optionTpl; context: { $implicit: entry }\" />\n                }\n              </ul>\n            </li>\n          } @else {\n            @for (entry of group.items; track entry.item.id) {\n              <ng-container\n                *ngTemplateOutlet=\"optionTpl; context: { $implicit: entry }\" />\n            }\n          }\n        }\n      </ul>\n    }\n  </div>\n</dialog>\n\n<ng-template\n  #optionTpl\n  let-entry>\n  <li\n    class=\"ea-command-palette__item\"\n    role=\"option\"\n    [id]=\"itemDomId(entry.item)\"\n    [attr.aria-selected]=\"isActive(entry.flatIndex)\"\n    [attr.aria-disabled]=\"entry.disabled || null\"\n    [class.ea-command-palette__item--active]=\"showActiveHighlight(entry.flatIndex)\"\n    [class.ea-command-palette__item--disabled]=\"entry.disabled\"\n    (click)=\"onItemClick(entry)\"\n    (mouseenter)=\"onItemMouseEnter(entry)\">\n    @if (entry.item.icon; as iconClass) {\n      <span\n        class=\"ea-command-palette__item-icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"iconClass\" />\n      </span>\n    }\n    <span class=\"ea-command-palette__item-text\">\n      <span class=\"ea-command-palette__item-label\">\n        {{ entry.item.label }}\n      </span>\n      @if (entry.item.description) {\n        <span class=\"ea-command-palette__item-description\">\n          {{ entry.item.description }}\n        </span>\n      }\n    </span>\n    @if (entry.item.shortcut) {\n      <kbd class=\"ea-command-palette__item-shortcut\">\n        {{ entry.item.shortcut }}\n      </kbd>\n    }\n  </li>\n</ng-template>\n", styles: [".ea-command-palette{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,100vw - var(--space-8));max-height:70vh;padding:0;border:none;border-radius:var(--radius-lg);background:transparent;color:var(--color-text-primary)}.ea-command-palette::backdrop{background-color:var(--color-bg-overlay)}.ea-command-palette__panel{display:flex;flex-direction:column;max-height:70vh;overflow:hidden;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);background-color:var(--ea-command-palette-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-command-palette__panel{border:1px solid CanvasText}}.ea-command-palette__search{position:relative;padding:var(--space-3) var(--space-4)}.ea-command-palette__search:after{position:absolute;bottom:0;inset-inline-end:var(--space-1);inset-inline-start:var(--space-1);height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-command-palette__search-input{display:block}.ea-command-palette__list{flex:1;padding:var(--space-1);margin:0;overflow-y:auto;list-style:none}.ea-command-palette__section{position:relative;margin-top:var(--space-3)}.ea-command-palette__section:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-command-palette__section:first-child{margin-top:0}.ea-command-palette__section:first-child:before{display:none}.ea-command-palette__section-list{padding:0;margin:0;list-style:none}.ea-command-palette__group{padding:var(--space-2) var(--space-3) var(--space-1);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-command-palette__item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-colors);-webkit-user-select:none;user-select:none}.ea-command-palette__item:hover:not(.ea-command-palette__item--disabled){background-color:var(--color-state-hover)}.ea-command-palette__item--active{background-color:var(--color-state-active)}@media(forced-colors:active){.ea-command-palette__item--active{background-color:Highlight;color:HighlightText}.ea-command-palette__item--active .ea-command-palette__item-icon,.ea-command-palette__item--active .ea-command-palette__item-description{color:HighlightText}}.ea-command-palette__item--disabled{opacity:.5;cursor:not-allowed}.ea-command-palette__item-icon{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;flex-shrink:0;color:var(--color-text-secondary)}.ea-command-palette__item-text{display:flex;flex:1;flex-direction:column;min-width:0}.ea-command-palette__item-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ea-command-palette__item-description{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ea-command-palette__item-shortcut{flex-shrink:0;padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs);font-family:var(--font-family-mono);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--ea-command-palette-background-color, var(--color-bg-elevated));color:var(--color-text-secondary)}.ea-command-palette__empty{padding:var(--space-6) var(--space-4);margin:0;font-size:var(--font-size-sm);text-align:center;color:var(--color-text-tertiary)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputComponent, selector: "ea-input", inputs: ["label", "aria-label", "role", "aria-expanded", "aria-controls", "aria-activedescendant", "aria-autocomplete", "type", "placeholder", "icon", "keepIcon", "size", "hint", "errorMsg", "errorMessages", "disabled", "readonly", "required", "autocomplete", "list", "min", "max", "step", "maxLength", "minLength", "autofocus", "showPasswordToggle", "clearable", "id", "value"], outputs: ["valueChange", "focused", "blurred"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CommandPaletteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-command-palette', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgComponentOutlet, NgTemplateOutlet, InputComponent], template: "<dialog\n  #dialogEl\n  class=\"ea-command-palette\"\n  [attr.aria-label]=\"messages().commandPalette.dialogLabel\"\n  (close)=\"onDialogClose()\"\n  (click)=\"onBackdropClick($event)\">\n  <div class=\"ea-command-palette__panel\">\n    <div class=\"ea-command-palette__search\">\n      <ea-input\n        #searchEl\n        class=\"ea-command-palette__search-input\"\n        [icon]=\"searchIcon\"\n        [clearable]=\"true\"\n        [role]=\"'combobox'\"\n        [autocomplete]=\"'off'\"\n        [aria-label]=\"resolvedPlaceholder()\"\n        [aria-controls]=\"filteredItems().length > 0 ? listboxId : undefined\"\n        [aria-expanded]=\"filteredItems().length > 0\"\n        [aria-autocomplete]=\"'list'\"\n        [aria-activedescendant]=\"activeId()\"\n        [placeholder]=\"resolvedPlaceholder()\"\n        [value]=\"query()\"\n        (valueChange)=\"onQueryChange($event)\"\n        (keydown)=\"onSearchKeydown($event)\" />\n    </div>\n\n    @if (filteredItems().length === 0) {\n      <p\n        class=\"ea-command-palette__empty\"\n        role=\"status\">\n        {{ emptyMessage() || messages().commandPalette.empty }}\n      </p>\n    } @else {\n      <ul\n        class=\"ea-command-palette__list\"\n        role=\"listbox\"\n        [id]=\"listboxId\"\n        (mouseleave)=\"onListMouseLeave()\">\n        @for (group of groupedItems(); track group.group; let gi = $index) {\n          @if (group.group) {\n            <li\n              class=\"ea-command-palette__section\"\n              role=\"presentation\">\n              <div\n                class=\"ea-command-palette__group\"\n                [id]=\"listboxId + '-group-' + gi\">\n                {{ group.group }}\n              </div>\n              <ul\n                class=\"ea-command-palette__section-list\"\n                role=\"group\"\n                [attr.aria-labelledby]=\"listboxId + '-group-' + gi\">\n                @for (entry of group.items; track entry.item.id) {\n                  <ng-container\n                    *ngTemplateOutlet=\"optionTpl; context: { $implicit: entry }\" />\n                }\n              </ul>\n            </li>\n          } @else {\n            @for (entry of group.items; track entry.item.id) {\n              <ng-container\n                *ngTemplateOutlet=\"optionTpl; context: { $implicit: entry }\" />\n            }\n          }\n        }\n      </ul>\n    }\n  </div>\n</dialog>\n\n<ng-template\n  #optionTpl\n  let-entry>\n  <li\n    class=\"ea-command-palette__item\"\n    role=\"option\"\n    [id]=\"itemDomId(entry.item)\"\n    [attr.aria-selected]=\"isActive(entry.flatIndex)\"\n    [attr.aria-disabled]=\"isItemDisabled(entry.item) || null\"\n    [class.ea-command-palette__item--active]=\"showActiveHighlight(entry.flatIndex)\"\n    [class.ea-command-palette__item--disabled]=\"isItemDisabled(entry.item)\"\n    (click)=\"onItemClick(entry.item)\"\n    (mouseenter)=\"onItemMouseEnter(entry.flatIndex)\">\n    @if (entry.item.icon; as iconClass) {\n      <span\n        class=\"ea-command-palette__item-icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"iconClass\" />\n      </span>\n    }\n    <span class=\"ea-command-palette__item-text\">\n      <span class=\"ea-command-palette__item-label\">\n        {{ entry.item.label }}\n      </span>\n      @if (entry.item.description) {\n        <span class=\"ea-command-palette__item-description\">\n          {{ entry.item.description }}\n        </span>\n      }\n    </span>\n    @if (entry.item.shortcut) {\n      <kbd class=\"ea-command-palette__item-shortcut\">\n        {{ entry.item.shortcut }}\n      </kbd>\n    }\n  </li>\n</ng-template>\n", styles: [".ea-command-palette{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,100vw - var(--space-8));max-height:70vh;padding:0;border:none;border-radius:var(--radius-lg);background:transparent;color:var(--color-text-primary)}.ea-command-palette::backdrop{background-color:var(--color-bg-overlay)}.ea-command-palette__panel{display:flex;flex-direction:column;max-height:70vh;overflow:hidden;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);background-color:var(--ea-command-palette-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-command-palette__panel{border:1px solid CanvasText}}.ea-command-palette__search{position:relative;display:flex;align-items:center;padding:var(--space-3) var(--space-4)}.ea-command-palette__search:after{position:absolute;bottom:0;inset-inline-end:var(--space-1);inset-inline-start:var(--space-1);height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-command-palette__search-input{flex:1;min-width:0}.ea-command-palette__list{flex:1;padding:var(--space-1);margin:0;overflow-y:auto;list-style:none}.ea-command-palette__section{position:relative;margin-top:var(--space-3)}.ea-command-palette__section:before{content:\"\";position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider)}.ea-command-palette__section:first-child{margin-top:0}.ea-command-palette__section:first-child:before{display:none}.ea-command-palette__section-list{padding:0;margin:0;list-style:none}.ea-command-palette__group{padding:var(--space-2) var(--space-3) var(--space-1);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-command-palette__item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-colors);-webkit-user-select:none;user-select:none}.ea-command-palette__item:hover:not(.ea-command-palette__item--disabled){background-color:var(--color-state-hover)}.ea-command-palette__item--active{background-color:var(--color-state-active)}@media(forced-colors:active){.ea-command-palette__item--active{background-color:Highlight;color:HighlightText}.ea-command-palette__item--active .ea-command-palette__item-icon,.ea-command-palette__item--active .ea-command-palette__item-description{color:HighlightText}}.ea-command-palette__item--disabled{opacity:.5;cursor:not-allowed}.ea-command-palette__item-icon{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;flex-shrink:0;color:var(--color-text-secondary)}.ea-command-palette__item-text{display:flex;flex:1;flex-direction:column;min-width:0}.ea-command-palette__item-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ea-command-palette__item-description{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ea-command-palette__item-shortcut{flex-shrink:0;padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs);font-family:var(--font-family-mono);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--ea-command-palette-background-color, var(--color-bg-elevated));color:var(--color-text-secondary)}.ea-command-palette__empty{padding:var(--space-6) var(--space-4);margin:0;font-size:var(--font-size-sm);text-align:center;color:var(--color-text-tertiary)}\n"] }]
+            args: [{ selector: 'ea-command-palette', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgComponentOutlet, NgTemplateOutlet, InputComponent], template: "<dialog\n  #dialogEl\n  class=\"ea-command-palette\"\n  [attr.aria-label]=\"messages().commandPalette.dialogLabel\"\n  (close)=\"onDialogClose()\"\n  (click)=\"onBackdropClick($event)\">\n  <div class=\"ea-command-palette__panel\">\n    <div class=\"ea-command-palette__search\">\n      <ea-input\n        #searchEl\n        class=\"ea-command-palette__search-input\"\n        [icon]=\"searchIcon\"\n        [clearable]=\"true\"\n        [role]=\"'combobox'\"\n        [autocomplete]=\"'off'\"\n        [aria-label]=\"resolvedPlaceholder()\"\n        [aria-controls]=\"filteredEntries().length > 0 ? listboxId : undefined\"\n        [aria-expanded]=\"filteredEntries().length > 0\"\n        [aria-autocomplete]=\"'list'\"\n        [aria-activedescendant]=\"activeId()\"\n        [placeholder]=\"resolvedPlaceholder()\"\n        [value]=\"query()\"\n        (valueChange)=\"onQueryChange($event)\"\n        (keydown)=\"onSearchKeydown($event)\" />\n    </div>\n\n    @if (filteredEntries().length === 0) {\n      <p\n        class=\"ea-command-palette__empty\"\n        role=\"status\">\n        {{ emptyMessage() || messages().commandPalette.empty }}\n      </p>\n    } @else {\n      <ul\n        class=\"ea-command-palette__list\"\n        role=\"listbox\"\n        [id]=\"listboxId\"\n        (mouseleave)=\"onListMouseLeave()\">\n        @for (group of groupedItems(); track group.group; let gi = $index) {\n          @if (group.group) {\n            <li\n              class=\"ea-command-palette__section\"\n              role=\"presentation\">\n              <div\n                class=\"ea-command-palette__group\"\n                [id]=\"listboxId + '-group-' + gi\">\n                {{ group.group }}\n              </div>\n              <ul\n                class=\"ea-command-palette__section-list\"\n                role=\"group\"\n                [attr.aria-labelledby]=\"listboxId + '-group-' + gi\">\n                @for (entry of group.items; track entry.item.id) {\n                  <ng-container\n                    *ngTemplateOutlet=\"optionTpl; context: { $implicit: entry }\" />\n                }\n              </ul>\n            </li>\n          } @else {\n            @for (entry of group.items; track entry.item.id) {\n              <ng-container\n                *ngTemplateOutlet=\"optionTpl; context: { $implicit: entry }\" />\n            }\n          }\n        }\n      </ul>\n    }\n  </div>\n</dialog>\n\n<ng-template\n  #optionTpl\n  let-entry>\n  <li\n    class=\"ea-command-palette__item\"\n    role=\"option\"\n    [id]=\"itemDomId(entry.item)\"\n    [attr.aria-selected]=\"isActive(entry.flatIndex)\"\n    [attr.aria-disabled]=\"entry.disabled || null\"\n    [class.ea-command-palette__item--active]=\"showActiveHighlight(entry.flatIndex)\"\n    [class.ea-command-palette__item--disabled]=\"entry.disabled\"\n    (click)=\"onItemClick(entry)\"\n    (mouseenter)=\"onItemMouseEnter(entry)\">\n    @if (entry.item.icon; as iconClass) {\n      <span\n        class=\"ea-command-palette__item-icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"iconClass\" />\n      </span>\n    }\n    <span class=\"ea-command-palette__item-text\">\n      <span class=\"ea-command-palette__item-label\">\n        {{ entry.item.label }}\n      </span>\n      @if (entry.item.description) {\n        <span class=\"ea-command-palette__item-description\">\n          {{ entry.item.description }}\n        </span>\n      }\n    </span>\n    @if (entry.item.shortcut) {\n      <kbd class=\"ea-command-palette__item-shortcut\">\n        {{ entry.item.shortcut }}\n      </kbd>\n    }\n  </li>\n</ng-template>\n", styles: [".ea-command-palette{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,100vw - var(--space-8));max-height:70vh;padding:0;border:none;border-radius:var(--radius-lg);background:transparent;color:var(--color-text-primary)}.ea-command-palette::backdrop{background-color:var(--color-bg-overlay)}.ea-command-palette__panel{display:flex;flex-direction:column;max-height:70vh;overflow:hidden;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);background-color:var(--ea-command-palette-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-command-palette__panel{border:1px solid CanvasText}}.ea-command-palette__search{position:relative;padding:var(--space-3) var(--space-4)}.ea-command-palette__search:after{position:absolute;bottom:0;inset-inline-end:var(--space-1);inset-inline-start:var(--space-1);height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-command-palette__search-input{display:block}.ea-command-palette__list{flex:1;padding:var(--space-1);margin:0;overflow-y:auto;list-style:none}.ea-command-palette__section{position:relative;margin-top:var(--space-3)}.ea-command-palette__section:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-command-palette__section:first-child{margin-top:0}.ea-command-palette__section:first-child:before{display:none}.ea-command-palette__section-list{padding:0;margin:0;list-style:none}.ea-command-palette__group{padding:var(--space-2) var(--space-3) var(--space-1);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-command-palette__item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-colors);-webkit-user-select:none;user-select:none}.ea-command-palette__item:hover:not(.ea-command-palette__item--disabled){background-color:var(--color-state-hover)}.ea-command-palette__item--active{background-color:var(--color-state-active)}@media(forced-colors:active){.ea-command-palette__item--active{background-color:Highlight;color:HighlightText}.ea-command-palette__item--active .ea-command-palette__item-icon,.ea-command-palette__item--active .ea-command-palette__item-description{color:HighlightText}}.ea-command-palette__item--disabled{opacity:.5;cursor:not-allowed}.ea-command-palette__item-icon{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;flex-shrink:0;color:var(--color-text-secondary)}.ea-command-palette__item-text{display:flex;flex:1;flex-direction:column;min-width:0}.ea-command-palette__item-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ea-command-palette__item-description{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ea-command-palette__item-shortcut{flex-shrink:0;padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs);font-family:var(--font-family-mono);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--ea-command-palette-background-color, var(--color-bg-elevated));color:var(--color-text-secondary)}.ea-command-palette__empty{padding:var(--space-6) var(--space-4);margin:0;font-size:var(--font-size-sm);text-align:center;color:var(--color-text-tertiary)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], disabledWhen: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledWhen", required: false }] }], execute: [{ type: i0.Output, args: ["execute"] }], dialogEl: [{ type: i0.ViewChild, args: ['dialogEl', { isSignal: true }] }], searchEl: [{ type: i0.ViewChild, args: ['searchEl', { isSignal: true }] }] } });
 
 class DropletIconComponent extends IconComponentBase {