@eagami/ui 5.8.4 → 5.8.5

package/fesm2022/eagami-ui.mjs

@@ -6990,11 +6990,11 @@ class CommandPaletteComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: CommandPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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 } }, 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-icon-search\n        class=\"ea-command-palette__search-icon\"\n        aria-hidden=\"true\" />\n      <input\n        #searchEl\n        class=\"ea-command-palette__input\"\n        type=\"text\"\n        dir=\"auto\"\n        role=\"combobox\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        [attr.aria-label]=\"resolvedPlaceholder()\"\n        [attr.aria-controls]=\"filteredItems().length > 0 ? listboxId : null\"\n        [attr.aria-expanded]=\"filteredItems().length > 0\"\n        [attr.aria-autocomplete]=\"'list'\"\n        [attr.aria-activedescendant]=\"activeId()\"\n        [placeholder]=\"resolvedPlaceholder()\"\n        [value]=\"query()\"\n        (input)=\"onQueryInput($event)\"\n        (keydown)=\"onSearchKeydown($event)\" />\n      @if (query()) {\n        <button\n          type=\"button\"\n          class=\"ea-command-palette__clear\"\n          [attr.aria-label]=\"messages().commandPalette.clear\"\n          (click)=\"clearQuery()\">\n          <ea-icon-x />\n        </button>\n      }\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    [class.ea-command-palette__item--active]=\"showActiveHighlight(entry.flatIndex)\"\n    [class.ea-command-palette__item--disabled]=\"entry.item.disabled\"\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{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-command-palette__search-icon{display:inline-flex;align-items:center;width:1.125em;height:1.125em;color:var(--color-text-secondary)}.ea-command-palette__input{flex:1;min-width:0;font-size:var(--font-size-md);border:none;background:transparent;color:inherit;outline:none}.ea-command-palette__input::placeholder{color:var(--color-text-tertiary)}.ea-command-palette__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-command-palette__clear>*{font-size:1.25em}.ea-command-palette__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-command-palette__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-command-palette__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-command-palette__clear:disabled{cursor:not-allowed;opacity:.5}.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-border-default)}.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: SearchIconComponent, selector: "ea-icon-search" }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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 } }, 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-icon-search\n        class=\"ea-command-palette__search-icon\"\n        aria-hidden=\"true\" />\n      <input\n        #searchEl\n        class=\"ea-command-palette__input\"\n        type=\"text\"\n        dir=\"auto\"\n        role=\"combobox\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        [attr.aria-label]=\"resolvedPlaceholder()\"\n        [attr.aria-controls]=\"filteredItems().length > 0 ? listboxId : null\"\n        [attr.aria-expanded]=\"filteredItems().length > 0\"\n        [attr.aria-autocomplete]=\"'list'\"\n        [attr.aria-activedescendant]=\"activeId()\"\n        [placeholder]=\"resolvedPlaceholder()\"\n        [value]=\"query()\"\n        (input)=\"onQueryInput($event)\"\n        (keydown)=\"onSearchKeydown($event)\" />\n      @if (query()) {\n        <button\n          type=\"button\"\n          class=\"ea-command-palette__clear\"\n          [attr.aria-label]=\"messages().commandPalette.clear\"\n          (click)=\"clearQuery()\">\n          <ea-icon-x />\n        </button>\n      }\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    [class.ea-command-palette__item--active]=\"showActiveHighlight(entry.flatIndex)\"\n    [class.ea-command-palette__item--disabled]=\"entry.item.disabled\"\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{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-command-palette__search-icon{display:inline-flex;align-items:center;width:1.125em;height:1.125em;color:var(--color-text-secondary)}.ea-command-palette__input{flex:1;min-width:0;font-size:var(--font-size-md);border:none;background:transparent;color:inherit}.ea-command-palette__input:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-command-palette__input:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-command-palette__input::placeholder{color:var(--color-text-tertiary)}.ea-command-palette__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-command-palette__clear>*{font-size:1.25em}.ea-command-palette__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-command-palette__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-command-palette__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-command-palette__clear:disabled{cursor:not-allowed;opacity:.5}.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-border-default)}.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: SearchIconComponent, selector: "ea-icon-search" }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: CommandPaletteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-command-palette', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgComponentOutlet, NgTemplateOutlet, SearchIconComponent, XIconComponent], 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-icon-search\n        class=\"ea-command-palette__search-icon\"\n        aria-hidden=\"true\" />\n      <input\n        #searchEl\n        class=\"ea-command-palette__input\"\n        type=\"text\"\n        dir=\"auto\"\n        role=\"combobox\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        [attr.aria-label]=\"resolvedPlaceholder()\"\n        [attr.aria-controls]=\"filteredItems().length > 0 ? listboxId : null\"\n        [attr.aria-expanded]=\"filteredItems().length > 0\"\n        [attr.aria-autocomplete]=\"'list'\"\n        [attr.aria-activedescendant]=\"activeId()\"\n        [placeholder]=\"resolvedPlaceholder()\"\n        [value]=\"query()\"\n        (input)=\"onQueryInput($event)\"\n        (keydown)=\"onSearchKeydown($event)\" />\n      @if (query()) {\n        <button\n          type=\"button\"\n          class=\"ea-command-palette__clear\"\n          [attr.aria-label]=\"messages().commandPalette.clear\"\n          (click)=\"clearQuery()\">\n          <ea-icon-x />\n        </button>\n      }\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    [class.ea-command-palette__item--active]=\"showActiveHighlight(entry.flatIndex)\"\n    [class.ea-command-palette__item--disabled]=\"entry.item.disabled\"\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{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-command-palette__search-icon{display:inline-flex;align-items:center;width:1.125em;height:1.125em;color:var(--color-text-secondary)}.ea-command-palette__input{flex:1;min-width:0;font-size:var(--font-size-md);border:none;background:transparent;color:inherit;outline:none}.ea-command-palette__input::placeholder{color:var(--color-text-tertiary)}.ea-command-palette__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-command-palette__clear>*{font-size:1.25em}.ea-command-palette__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-command-palette__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-command-palette__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-command-palette__clear:disabled{cursor:not-allowed;opacity:.5}.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-border-default)}.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, SearchIconComponent, XIconComponent], 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-icon-search\n        class=\"ea-command-palette__search-icon\"\n        aria-hidden=\"true\" />\n      <input\n        #searchEl\n        class=\"ea-command-palette__input\"\n        type=\"text\"\n        dir=\"auto\"\n        role=\"combobox\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        [attr.aria-label]=\"resolvedPlaceholder()\"\n        [attr.aria-controls]=\"filteredItems().length > 0 ? listboxId : null\"\n        [attr.aria-expanded]=\"filteredItems().length > 0\"\n        [attr.aria-autocomplete]=\"'list'\"\n        [attr.aria-activedescendant]=\"activeId()\"\n        [placeholder]=\"resolvedPlaceholder()\"\n        [value]=\"query()\"\n        (input)=\"onQueryInput($event)\"\n        (keydown)=\"onSearchKeydown($event)\" />\n      @if (query()) {\n        <button\n          type=\"button\"\n          class=\"ea-command-palette__clear\"\n          [attr.aria-label]=\"messages().commandPalette.clear\"\n          (click)=\"clearQuery()\">\n          <ea-icon-x />\n        </button>\n      }\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    [class.ea-command-palette__item--active]=\"showActiveHighlight(entry.flatIndex)\"\n    [class.ea-command-palette__item--disabled]=\"entry.item.disabled\"\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{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-command-palette__search-icon{display:inline-flex;align-items:center;width:1.125em;height:1.125em;color:var(--color-text-secondary)}.ea-command-palette__input{flex:1;min-width:0;font-size:var(--font-size-md);border:none;background:transparent;color:inherit}.ea-command-palette__input:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-command-palette__input:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-command-palette__input::placeholder{color:var(--color-text-tertiary)}.ea-command-palette__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-command-palette__clear>*{font-size:1.25em}.ea-command-palette__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-command-palette__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-command-palette__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-command-palette__clear:disabled{cursor:not-allowed;opacity:.5}.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-border-default)}.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 }] }], 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 {
@@ -12785,16 +12785,17 @@ class PaginatorComponent {
         this.changed.emit({ page: 1, pageSize: newSize });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: PaginatorComponent, isStandalone: true, selector: "ea-paginator", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, showRangeLabel: { classPropertyName: "showRangeLabel", publicName: "showRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, groupThousands: { classPropertyName: "groupThousands", publicName: "groupThousands", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange", changed: "changed" }, ngImport: i0, template: "<div\n  class=\"ea-paginator\"\n  [ngClass]=\"'ea-paginator--' + size()\"\n  [class.ea-paginator--left]=\"align() === 'left'\"\n  [class.ea-paginator--center]=\"align() === 'center'\"\n  [class.ea-paginator--disabled]=\"disabled()\"\n  role=\"navigation\"\n  [attr.aria-label]=\"i18n.messages().paginator.label\">\n  @if (showPageSizeSelector()) {\n    <div class=\"ea-paginator__page-size\">\n      <label\n        class=\"ea-paginator__label\"\n        [for]=\"sizeSelectId\">\n        {{ i18n.messages().paginator.rowsPerPage }}\n      </label>\n      <select\n        class=\"ea-paginator__select\"\n        [id]=\"sizeSelectId\"\n        [disabled]=\"disabled()\"\n        (change)=\"onPageSizeChange($event)\">\n        @for (option of pageSizeOptions(); track option) {\n          <option\n            [value]=\"option\"\n            [selected]=\"option === pageSize()\">\n            {{ formatNumber(option) }}\n          </option>\n        }\n      </select>\n    </div>\n  }\n\n  @if (showRangeLabel()) {\n    <span\n      class=\"ea-paginator__range\"\n      aria-live=\"polite\">\n      <bdi>\n        {{\n          i18n\n            .messages()\n            .paginator.range(\n              formatNumber(rangeStart()),\n              formatNumber(rangeEnd()),\n              formatNumber(totalItems())\n            )\n        }}\n      </bdi>\n    </span>\n  }\n\n  <div class=\"ea-paginator__controls\">\n    <ea-button\n      variant=\"ghost\"\n      [size]=\"size()\"\n      [disabled]=\"disabled() || !canGoPrev()\"\n      [aria-label]=\"i18n.messages().paginator.previousPage\"\n      (clicked)=\"prevPage()\">\n      <ea-icon-chevron-left class=\"ea-rtl-flip\" />\n    </ea-button>\n\n    @for (p of visiblePages(); track $index) {\n      @if (p === 'ellipsis') {\n        <span\n          class=\"ea-paginator__ellipsis\"\n          aria-hidden=\"true\">\n          \u2026\n        </span>\n      } @else {\n        <ea-button\n          class=\"ea-paginator__page-btn\"\n          [class.ea-paginator__page-btn--active]=\"p === page()\"\n          variant=\"ghost\"\n          [size]=\"size()\"\n          [disabled]=\"disabled()\"\n          [aria-current]=\"p === page() ? 'page' : undefined\"\n          (clicked)=\"goToPage(p)\">\n          {{ formatNumber(p) }}\n        </ea-button>\n      }\n    }\n\n    <ea-button\n      variant=\"ghost\"\n      [size]=\"size()\"\n      [disabled]=\"disabled() || !canGoNext()\"\n      [aria-label]=\"i18n.messages().paginator.nextPage\"\n      (clicked)=\"nextPage()\">\n      <ea-icon-chevron-right class=\"ea-rtl-flip\" />\n    </ea-button>\n  </div>\n</div>\n", styles: [".ea-paginator{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:1em;width:100%;padding:.75em 1em;font-family:var(--font-family-sans);color:var(--color-text-secondary);border-top:var(--border-width-thin) solid var(--color-border-subtle)}.ea-paginator--xs{font-size:var(--font-size-xs)}.ea-paginator--sm{font-size:var(--font-size-sm)}.ea-paginator--md{font-size:var(--font-size-md)}.ea-paginator--lg{font-size:var(--font-size-lg)}.ea-paginator--xl{font-size:var(--font-size-xl)}.ea-paginator--left{justify-content:flex-start}.ea-paginator--center{justify-content:center}.ea-paginator__page-size{display:flex;align-items:center;gap:.5em}.ea-paginator__label{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__select{padding-block:.25em;padding-inline:.5em 1.5em;font-size:inherit;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 6px center;color:var(--color-text-primary);cursor:pointer;appearance:none;transition:var(--transition-colors),var(--transition-shadow)}.ea-paginator__select:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-paginator__select:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-paginator__select:disabled{opacity:.5;cursor:not-allowed}.ea-paginator__range{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__controls{display:flex;align-items:center;gap:.25em}.ea-paginator__controls ea-icon-chevron-left,.ea-paginator__controls ea-icon-chevron-right{width:1em;height:1em}.ea-paginator__page-btn--active .ea-button{font-weight:var(--font-weight-medium);border-color:var(--color-brand-text);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-paginator__page-btn--active .ea-button:hover:not(.ea-button--disabled){background-color:var(--color-brand-muted)}@media(forced-colors:active){.ea-paginator__page-btn--active .ea-button{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2em;height:2em;color:var(--color-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.ea-paginator--disabled{pointer-events:none}.ea-paginator--disabled .ea-paginator__range,.ea-paginator--disabled .ea-paginator__label{opacity:.5}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "ea-button", inputs: ["variant", "size", "type", "disabled", "loading", "fullWidth", "icon", "aria-label", "aria-current"], outputs: ["clicked"] }, { kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: PaginatorComponent, isStandalone: true, selector: "ea-paginator", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, showRangeLabel: { classPropertyName: "showRangeLabel", publicName: "showRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, groupThousands: { classPropertyName: "groupThousands", publicName: "groupThousands", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange", changed: "changed" }, ngImport: i0, template: "<div\n  class=\"ea-paginator\"\n  [ngClass]=\"'ea-paginator--' + size()\"\n  [class.ea-paginator--left]=\"align() === 'left'\"\n  [class.ea-paginator--center]=\"align() === 'center'\"\n  [class.ea-paginator--disabled]=\"disabled()\"\n  role=\"navigation\"\n  [attr.aria-label]=\"i18n.messages().paginator.label\">\n  @if (showPageSizeSelector()) {\n    <div class=\"ea-paginator__page-size\">\n      <label\n        class=\"ea-paginator__label\"\n        [for]=\"sizeSelectId\">\n        {{ i18n.messages().paginator.rowsPerPage }}\n      </label>\n      <span class=\"ea-paginator__select-wrapper\">\n        <select\n          class=\"ea-paginator__select\"\n          [id]=\"sizeSelectId\"\n          [disabled]=\"disabled()\"\n          (change)=\"onPageSizeChange($event)\">\n          @for (option of pageSizeOptions(); track option) {\n            <option\n              [value]=\"option\"\n              [selected]=\"option === pageSize()\">\n              {{ formatNumber(option) }}\n            </option>\n          }\n        </select>\n        <ea-icon-chevron-down\n          class=\"ea-paginator__select-chevron\"\n          aria-hidden=\"true\" />\n      </span>\n    </div>\n  }\n\n  @if (showRangeLabel()) {\n    <span\n      class=\"ea-paginator__range\"\n      aria-live=\"polite\">\n      <bdi>\n        {{\n          i18n\n            .messages()\n            .paginator.range(\n              formatNumber(rangeStart()),\n              formatNumber(rangeEnd()),\n              formatNumber(totalItems())\n            )\n        }}\n      </bdi>\n    </span>\n  }\n\n  <div class=\"ea-paginator__controls\">\n    <ea-button\n      variant=\"ghost\"\n      [size]=\"size()\"\n      [disabled]=\"disabled() || !canGoPrev()\"\n      [aria-label]=\"i18n.messages().paginator.previousPage\"\n      (clicked)=\"prevPage()\">\n      <ea-icon-chevron-left class=\"ea-rtl-flip\" />\n    </ea-button>\n\n    @for (p of visiblePages(); track $index) {\n      @if (p === 'ellipsis') {\n        <span\n          class=\"ea-paginator__ellipsis\"\n          aria-hidden=\"true\">\n          \u2026\n        </span>\n      } @else {\n        <ea-button\n          class=\"ea-paginator__page-btn\"\n          [class.ea-paginator__page-btn--active]=\"p === page()\"\n          variant=\"ghost\"\n          [size]=\"size()\"\n          [disabled]=\"disabled()\"\n          [aria-current]=\"p === page() ? 'page' : undefined\"\n          (clicked)=\"goToPage(p)\">\n          {{ formatNumber(p) }}\n        </ea-button>\n      }\n    }\n\n    <ea-button\n      variant=\"ghost\"\n      [size]=\"size()\"\n      [disabled]=\"disabled() || !canGoNext()\"\n      [aria-label]=\"i18n.messages().paginator.nextPage\"\n      (clicked)=\"nextPage()\">\n      <ea-icon-chevron-right class=\"ea-rtl-flip\" />\n    </ea-button>\n  </div>\n</div>\n", styles: [".ea-paginator{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:1em;width:100%;padding:.75em 1em;font-family:var(--font-family-sans);color:var(--color-text-secondary);border-top:var(--border-width-thin) solid var(--color-border-subtle)}.ea-paginator--xs{font-size:var(--font-size-xs)}.ea-paginator--sm{font-size:var(--font-size-sm)}.ea-paginator--md{font-size:var(--font-size-md)}.ea-paginator--lg{font-size:var(--font-size-lg)}.ea-paginator--xl{font-size:var(--font-size-xl)}.ea-paginator--left{justify-content:flex-start}.ea-paginator--center{justify-content:center}.ea-paginator__page-size{display:flex;align-items:center;gap:.5em}.ea-paginator__label{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__select-wrapper{position:relative;display:inline-flex}.ea-paginator__select-chevron{position:absolute;top:50%;inset-inline-end:.5em;font-size:.75em;color:var(--color-text-secondary);pointer-events:none;transform:translateY(-50%)}.ea-paginator__select{padding-block:.25em;padding-inline:.5em 1.5em;font-size:inherit;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;appearance:none;transition:var(--transition-colors),var(--transition-shadow)}.ea-paginator__select:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-paginator__select:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-paginator__select:disabled{opacity:.5;cursor:not-allowed}.ea-paginator__range{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__controls{display:flex;align-items:center;gap:.25em}.ea-paginator__controls ea-icon-chevron-left,.ea-paginator__controls ea-icon-chevron-right{width:1em;height:1em}.ea-paginator__page-btn--active .ea-button{font-weight:var(--font-weight-medium);border-color:var(--color-brand-text);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-paginator__page-btn--active .ea-button:hover:not(.ea-button--disabled){background-color:var(--color-brand-muted)}@media(forced-colors:active){.ea-paginator__page-btn--active .ea-button{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2em;height:2em;color:var(--color-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.ea-paginator--disabled{pointer-events:none}.ea-paginator--disabled .ea-paginator__range,.ea-paginator--disabled .ea-paginator__label{opacity:.5}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "ea-button", inputs: ["variant", "size", "type", "disabled", "loading", "fullWidth", "icon", "aria-label", "aria-current"], outputs: ["clicked"] }, { kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ea-paginator', imports: [
                         NgClass,
                         ButtonComponent,
+                        ChevronDownIconComponent,
                         ChevronLeftIconComponent,
                         ChevronRightIconComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-paginator\"\n  [ngClass]=\"'ea-paginator--' + size()\"\n  [class.ea-paginator--left]=\"align() === 'left'\"\n  [class.ea-paginator--center]=\"align() === 'center'\"\n  [class.ea-paginator--disabled]=\"disabled()\"\n  role=\"navigation\"\n  [attr.aria-label]=\"i18n.messages().paginator.label\">\n  @if (showPageSizeSelector()) {\n    <div class=\"ea-paginator__page-size\">\n      <label\n        class=\"ea-paginator__label\"\n        [for]=\"sizeSelectId\">\n        {{ i18n.messages().paginator.rowsPerPage }}\n      </label>\n      <select\n        class=\"ea-paginator__select\"\n        [id]=\"sizeSelectId\"\n        [disabled]=\"disabled()\"\n        (change)=\"onPageSizeChange($event)\">\n        @for (option of pageSizeOptions(); track option) {\n          <option\n            [value]=\"option\"\n            [selected]=\"option === pageSize()\">\n            {{ formatNumber(option) }}\n          </option>\n        }\n      </select>\n    </div>\n  }\n\n  @if (showRangeLabel()) {\n    <span\n      class=\"ea-paginator__range\"\n      aria-live=\"polite\">\n      <bdi>\n        {{\n          i18n\n            .messages()\n            .paginator.range(\n              formatNumber(rangeStart()),\n              formatNumber(rangeEnd()),\n              formatNumber(totalItems())\n            )\n        }}\n      </bdi>\n    </span>\n  }\n\n  <div class=\"ea-paginator__controls\">\n    <ea-button\n      variant=\"ghost\"\n      [size]=\"size()\"\n      [disabled]=\"disabled() || !canGoPrev()\"\n      [aria-label]=\"i18n.messages().paginator.previousPage\"\n      (clicked)=\"prevPage()\">\n      <ea-icon-chevron-left class=\"ea-rtl-flip\" />\n    </ea-button>\n\n    @for (p of visiblePages(); track $index) {\n      @if (p === 'ellipsis') {\n        <span\n          class=\"ea-paginator__ellipsis\"\n          aria-hidden=\"true\">\n          \u2026\n        </span>\n      } @else {\n        <ea-button\n          class=\"ea-paginator__page-btn\"\n          [class.ea-paginator__page-btn--active]=\"p === page()\"\n          variant=\"ghost\"\n          [size]=\"size()\"\n          [disabled]=\"disabled()\"\n          [aria-current]=\"p === page() ? 'page' : undefined\"\n          (clicked)=\"goToPage(p)\">\n          {{ formatNumber(p) }}\n        </ea-button>\n      }\n    }\n\n    <ea-button\n      variant=\"ghost\"\n      [size]=\"size()\"\n      [disabled]=\"disabled() || !canGoNext()\"\n      [aria-label]=\"i18n.messages().paginator.nextPage\"\n      (clicked)=\"nextPage()\">\n      <ea-icon-chevron-right class=\"ea-rtl-flip\" />\n    </ea-button>\n  </div>\n</div>\n", styles: [".ea-paginator{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:1em;width:100%;padding:.75em 1em;font-family:var(--font-family-sans);color:var(--color-text-secondary);border-top:var(--border-width-thin) solid var(--color-border-subtle)}.ea-paginator--xs{font-size:var(--font-size-xs)}.ea-paginator--sm{font-size:var(--font-size-sm)}.ea-paginator--md{font-size:var(--font-size-md)}.ea-paginator--lg{font-size:var(--font-size-lg)}.ea-paginator--xl{font-size:var(--font-size-xl)}.ea-paginator--left{justify-content:flex-start}.ea-paginator--center{justify-content:center}.ea-paginator__page-size{display:flex;align-items:center;gap:.5em}.ea-paginator__label{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__select{padding-block:.25em;padding-inline:.5em 1.5em;font-size:inherit;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 6px center;color:var(--color-text-primary);cursor:pointer;appearance:none;transition:var(--transition-colors),var(--transition-shadow)}.ea-paginator__select:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-paginator__select:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-paginator__select:disabled{opacity:.5;cursor:not-allowed}.ea-paginator__range{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__controls{display:flex;align-items:center;gap:.25em}.ea-paginator__controls ea-icon-chevron-left,.ea-paginator__controls ea-icon-chevron-right{width:1em;height:1em}.ea-paginator__page-btn--active .ea-button{font-weight:var(--font-weight-medium);border-color:var(--color-brand-text);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-paginator__page-btn--active .ea-button:hover:not(.ea-button--disabled){background-color:var(--color-brand-muted)}@media(forced-colors:active){.ea-paginator__page-btn--active .ea-button{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2em;height:2em;color:var(--color-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.ea-paginator--disabled{pointer-events:none}.ea-paginator--disabled .ea-paginator__range,.ea-paginator--disabled .ea-paginator__label{opacity:.5}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-paginator\"\n  [ngClass]=\"'ea-paginator--' + size()\"\n  [class.ea-paginator--left]=\"align() === 'left'\"\n  [class.ea-paginator--center]=\"align() === 'center'\"\n  [class.ea-paginator--disabled]=\"disabled()\"\n  role=\"navigation\"\n  [attr.aria-label]=\"i18n.messages().paginator.label\">\n  @if (showPageSizeSelector()) {\n    <div class=\"ea-paginator__page-size\">\n      <label\n        class=\"ea-paginator__label\"\n        [for]=\"sizeSelectId\">\n        {{ i18n.messages().paginator.rowsPerPage }}\n      </label>\n      <span class=\"ea-paginator__select-wrapper\">\n        <select\n          class=\"ea-paginator__select\"\n          [id]=\"sizeSelectId\"\n          [disabled]=\"disabled()\"\n          (change)=\"onPageSizeChange($event)\">\n          @for (option of pageSizeOptions(); track option) {\n            <option\n              [value]=\"option\"\n              [selected]=\"option === pageSize()\">\n              {{ formatNumber(option) }}\n            </option>\n          }\n        </select>\n        <ea-icon-chevron-down\n          class=\"ea-paginator__select-chevron\"\n          aria-hidden=\"true\" />\n      </span>\n    </div>\n  }\n\n  @if (showRangeLabel()) {\n    <span\n      class=\"ea-paginator__range\"\n      aria-live=\"polite\">\n      <bdi>\n        {{\n          i18n\n            .messages()\n            .paginator.range(\n              formatNumber(rangeStart()),\n              formatNumber(rangeEnd()),\n              formatNumber(totalItems())\n            )\n        }}\n      </bdi>\n    </span>\n  }\n\n  <div class=\"ea-paginator__controls\">\n    <ea-button\n      variant=\"ghost\"\n      [size]=\"size()\"\n      [disabled]=\"disabled() || !canGoPrev()\"\n      [aria-label]=\"i18n.messages().paginator.previousPage\"\n      (clicked)=\"prevPage()\">\n      <ea-icon-chevron-left class=\"ea-rtl-flip\" />\n    </ea-button>\n\n    @for (p of visiblePages(); track $index) {\n      @if (p === 'ellipsis') {\n        <span\n          class=\"ea-paginator__ellipsis\"\n          aria-hidden=\"true\">\n          \u2026\n        </span>\n      } @else {\n        <ea-button\n          class=\"ea-paginator__page-btn\"\n          [class.ea-paginator__page-btn--active]=\"p === page()\"\n          variant=\"ghost\"\n          [size]=\"size()\"\n          [disabled]=\"disabled()\"\n          [aria-current]=\"p === page() ? 'page' : undefined\"\n          (clicked)=\"goToPage(p)\">\n          {{ formatNumber(p) }}\n        </ea-button>\n      }\n    }\n\n    <ea-button\n      variant=\"ghost\"\n      [size]=\"size()\"\n      [disabled]=\"disabled() || !canGoNext()\"\n      [aria-label]=\"i18n.messages().paginator.nextPage\"\n      (clicked)=\"nextPage()\">\n      <ea-icon-chevron-right class=\"ea-rtl-flip\" />\n    </ea-button>\n  </div>\n</div>\n", styles: [".ea-paginator{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:1em;width:100%;padding:.75em 1em;font-family:var(--font-family-sans);color:var(--color-text-secondary);border-top:var(--border-width-thin) solid var(--color-border-subtle)}.ea-paginator--xs{font-size:var(--font-size-xs)}.ea-paginator--sm{font-size:var(--font-size-sm)}.ea-paginator--md{font-size:var(--font-size-md)}.ea-paginator--lg{font-size:var(--font-size-lg)}.ea-paginator--xl{font-size:var(--font-size-xl)}.ea-paginator--left{justify-content:flex-start}.ea-paginator--center{justify-content:center}.ea-paginator__page-size{display:flex;align-items:center;gap:.5em}.ea-paginator__label{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__select-wrapper{position:relative;display:inline-flex}.ea-paginator__select-chevron{position:absolute;top:50%;inset-inline-end:.5em;font-size:.75em;color:var(--color-text-secondary);pointer-events:none;transform:translateY(-50%)}.ea-paginator__select{padding-block:.25em;padding-inline:.5em 1.5em;font-size:inherit;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;appearance:none;transition:var(--transition-colors),var(--transition-shadow)}.ea-paginator__select:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-paginator__select:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-paginator__select:disabled{opacity:.5;cursor:not-allowed}.ea-paginator__range{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__controls{display:flex;align-items:center;gap:.25em}.ea-paginator__controls ea-icon-chevron-left,.ea-paginator__controls ea-icon-chevron-right{width:1em;height:1em}.ea-paginator__page-btn--active .ea-button{font-weight:var(--font-weight-medium);border-color:var(--color-brand-text);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-paginator__page-btn--active .ea-button:hover:not(.ea-button--disabled){background-color:var(--color-brand-muted)}@media(forced-colors:active){.ea-paginator__page-btn--active .ea-button{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2em;height:2em;color:var(--color-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.ea-paginator--disabled{pointer-events:none}.ea-paginator--disabled .ea-paginator__range,.ea-paginator--disabled .ea-paginator__label{opacity:.5}\n"] }]
         }], propDecorators: { totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: true }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], showPageSizeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSizeSelector", required: false }] }], showRangeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRangeLabel", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], groupThousands: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupThousands", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 /**