@eagami/ui 5.12.2 → 5.13.0

package/fesm2022/eagami-ui.mjs

@@ -551,6 +551,7 @@ const messages$e = {
         range: (start, end, total) => `${start}–${end} من ${total}`,
         previousPage: 'الصفحة السابقة',
         nextPage: 'الصفحة التالية',
+        page: page => `الانتقال إلى الصفحة ${page}`,
     },
     progressBar: {
         label: 'التقدم',
@@ -597,12 +598,13 @@ const messages$e = {
     transferList: {
         sourceLabel: 'المتاح',
         targetLabel: 'المحدد',
-        controlsLabel: 'عناصr التحكم بالنقل',
+        controlsLabel: 'عناصر التحكم بالنقل',
         moveSelectedToTarget: 'نقل المحدد إلى اليمين',
         moveAllToTarget: 'نقل الكل إلى اليمين',
         moveSelectedToSource: 'نقل المحدد إلى اليسار',
         moveAllToSource: 'نقل الكل إلى اليسار',
         empty: 'لا توجد عناصر',
+        moved: (count, listLabel) => `تم نقل ${count} إلى ${listLabel}`,
     },
     validation: {
         required: 'هذا الحقل مطلوب',
@@ -753,6 +755,7 @@ const messages$d = {
         range: (start, end, total) => `${start}–${end} von ${total}`,
         previousPage: 'Vorherige Seite',
         nextPage: 'Nächste Seite',
+        page: page => `Zu Seite ${page} wechseln`,
     },
     progressBar: {
         label: 'Fortschritt',
@@ -805,6 +808,7 @@ const messages$d = {
         moveSelectedToSource: 'Ausgewählte nach links verschieben',
         moveAllToSource: 'Alle nach links verschieben',
         empty: 'Keine Einträge',
+        moved: (count, listLabel) => `${count} nach ${listLabel} verschoben`,
     },
     validation: {
         required: 'Dieses Feld ist erforderlich',
@@ -955,6 +959,7 @@ const messages$c = {
         range: (start, end, total) => `${start}–${end} από ${total}`,
         previousPage: 'Προηγούμενη σελίδα',
         nextPage: 'Επόμενη σελίδα',
+        page: page => `Μετάβαση στη σελίδα ${page}`,
     },
     progressBar: {
         label: 'Πρόοδος',
@@ -1007,6 +1012,7 @@ const messages$c = {
         moveSelectedToSource: 'Μεταφορά επιλογής στην πηγή',
         moveAllToSource: 'Μεταφορά όλων στην πηγή',
         empty: 'Καμία εγγραφή',
+        moved: (count, listLabel) => `Μεταφορά σε ${listLabel}: ${count}`,
     },
     validation: {
         required: 'Αυτό το πεδίο είναι υποχρεωτικό',
@@ -1157,6 +1163,7 @@ const messages$b = {
         range: (start, end, total) => `${start}–${end} of ${total}`,
         previousPage: 'Previous page',
         nextPage: 'Next page',
+        page: page => `Go to page ${page}`,
     },
     progressBar: {
         label: 'Progress',
@@ -1209,6 +1216,7 @@ const messages$b = {
         moveSelectedToSource: 'Move selected to source',
         moveAllToSource: 'Move all to source',
         empty: 'No items',
+        moved: (count, listLabel) => `${count} moved to ${listLabel}`,
     },
     validation: {
         required: 'This field is required',
@@ -1359,6 +1367,7 @@ const messages$a = {
         range: (start, end, total) => `${start}–${end} de ${total}`,
         previousPage: 'Página anterior',
         nextPage: 'Página siguiente',
+        page: page => `Ir a la página ${page}`,
     },
     progressBar: {
         label: 'Progreso',
@@ -1411,6 +1420,7 @@ const messages$a = {
         moveSelectedToSource: 'Mover seleccionados al origen',
         moveAllToSource: 'Mover todos al origen',
         empty: 'Sin elementos',
+        moved: (count, listLabel) => `Movidos a ${listLabel}: ${count}`,
     },
     validation: {
         required: 'Este campo es obligatorio',
@@ -1561,6 +1571,7 @@ const messages$9 = {
         range: (start, end, total) => `${start}–${end} sur ${total}`,
         previousPage: 'Page précédente',
         nextPage: 'Page suivante',
+        page: page => `Aller à la page ${page}`,
     },
     progressBar: {
         label: 'Progression',
@@ -1613,6 +1624,7 @@ const messages$9 = {
         moveSelectedToSource: 'Déplacer la sélection vers la source',
         moveAllToSource: 'Tout déplacer vers la source',
         empty: 'Aucun élément',
+        moved: (count, listLabel) => `${count} déplacés vers ${listLabel}`,
     },
     validation: {
         required: 'Ce champ est obligatoire',
@@ -1763,6 +1775,7 @@ const messages$8 = {
         range: (start, end, total) => `${start}–${end} מתוך ${total}`,
         previousPage: 'עמוד קודם',
         nextPage: 'עמוד הבא',
+        page: page => `מעבר לעמוד ${page}`,
     },
     progressBar: {
         label: 'התקדמות',
@@ -1815,6 +1828,7 @@ const messages$8 = {
         moveSelectedToSource: 'העברת הנבחרים למקור',
         moveAllToSource: 'העברת הכול למקור',
         empty: 'אין פריטים',
+        moved: (count, listLabel) => `העברה אל ${listLabel}: ${count}`,
     },
     validation: {
         required: 'שדה זה הוא חובה',
@@ -1965,6 +1979,7 @@ const messages$7 = {
         range: (start, end, total) => `${total} में से ${start}–${end}`,
         previousPage: 'पिछला पृष्ठ',
         nextPage: 'अगला पृष्ठ',
+        page: page => `पृष्ठ ${page} पर जाएँ`,
     },
     progressBar: {
         label: 'प्रगति',
@@ -2017,6 +2032,7 @@ const messages$7 = {
         moveSelectedToSource: 'चयनित को स्रोत में ले जाएं',
         moveAllToSource: 'सभी को स्रोत में ले जाएं',
         empty: 'कोई आइटम नहीं',
+        moved: (count, listLabel) => `${count} को ${listLabel} में ले जाया गया`,
     },
     validation: {
         required: 'यह फ़ील्ड आवश्यक है',
@@ -2167,6 +2183,7 @@ const messages$6 = {
         range: (start, end, total) => `${start}–${end} af ${total}`,
         previousPage: 'Fyrri síða',
         nextPage: 'Næsta síða',
+        page: page => `Fara á síðu ${page}`,
     },
     progressBar: {
         label: 'Framvinda',
@@ -2219,6 +2236,7 @@ const messages$6 = {
         moveSelectedToSource: 'Færa valið til baka',
         moveAllToSource: 'Færa allt til baka',
         empty: 'Engin atriði',
+        moved: (count, listLabel) => `Flutt í ${listLabel}: ${count}`,
     },
     validation: {
         required: 'Þennan reit þarf að fylla út',
@@ -2369,6 +2387,7 @@ const messages$5 = {
         range: (start, end, total) => `${start}–${end} van ${total}`,
         previousPage: 'Vorige pagina',
         nextPage: 'Volgende pagina',
+        page: page => `Ga naar pagina ${page}`,
     },
     progressBar: {
         label: 'Voortgang',
@@ -2421,6 +2440,7 @@ const messages$5 = {
         moveSelectedToSource: 'Selectie naar links verplaatsen',
         moveAllToSource: 'Alles naar links verplaatsen',
         empty: 'Geen items',
+        moved: (count, listLabel) => `${count} verplaatst naar ${listLabel}`,
     },
     validation: {
         required: 'Dit veld is verplicht',
@@ -2571,6 +2591,7 @@ const messages$4 = {
         range: (start, end, total) => `${start}–${end} z ${total}`,
         previousPage: 'Poprzednia strona',
         nextPage: 'Następna strona',
+        page: page => `Przejdź do strony ${page}`,
     },
     progressBar: {
         label: 'Postęp',
@@ -2623,6 +2644,7 @@ const messages$4 = {
         moveSelectedToSource: 'Przenieś zaznaczone do źródła',
         moveAllToSource: 'Przenieś wszystko do źródła',
         empty: 'Brak elementów',
+        moved: (count, listLabel) => `Przeniesiono ${count} do listy „${listLabel}”`,
     },
     validation: {
         required: 'To pole jest wymagane',
@@ -2773,6 +2795,7 @@ const messages$3 = {
         range: (start, end, total) => `${start}–${end} de ${total}`,
         previousPage: 'Página anterior',
         nextPage: 'Próxima página',
+        page: page => `Ir para a página ${page}`,
     },
     progressBar: {
         label: 'Progresso',
@@ -2825,6 +2848,7 @@ const messages$3 = {
         moveSelectedToSource: 'Mover selecionados para a origem',
         moveAllToSource: 'Mover todos para a origem',
         empty: 'Nenhum item',
+        moved: (count, listLabel) => `Movidos para ${listLabel}: ${count}`,
     },
     validation: {
         required: 'Este campo é obrigatório',
@@ -2975,6 +2999,7 @@ const messages$2 = {
         range: (start, end, total) => `${start}–${end} из ${total}`,
         previousPage: 'Предыдущая страница',
         nextPage: 'Следующая страница',
+        page: page => `Перейти на страницу ${page}`,
     },
     progressBar: {
         label: 'Прогресс',
@@ -3027,6 +3052,7 @@ const messages$2 = {
         moveSelectedToSource: 'Переместить выбранное влево',
         moveAllToSource: 'Переместить все влево',
         empty: 'Нет элементов',
+        moved: (count, listLabel) => `Перемещено ${count} в список «${listLabel}»`,
     },
     validation: {
         required: 'Это поле обязательно для заполнения',
@@ -3177,6 +3203,7 @@ const messages$1 = {
         range: (start, end, total) => `${start}–${end} з ${total}`,
         previousPage: 'Попередня сторінка',
         nextPage: 'Наступна сторінка',
+        page: page => `Перейти на сторінку ${page}`,
     },
     progressBar: {
         label: 'Прогрес',
@@ -3229,6 +3256,7 @@ const messages$1 = {
         moveSelectedToSource: 'Перенести вибрані вліво',
         moveAllToSource: 'Перенести все вліво',
         empty: 'Немає елементів',
+        moved: (count, listLabel) => `Переміщено ${count} до списку «${listLabel}»`,
     },
     validation: {
         required: 'Це поле обов’язкове',
@@ -3379,6 +3407,7 @@ const messages = {
         range: (start, end, total) => `共 ${total} 项中的 ${start}–${end}`,
         previousPage: '上一页',
         nextPage: '下一页',
+        page: page => `转到第 ${page} 页`,
     },
     progressBar: {
         label: '进度',
@@ -3431,6 +3460,7 @@ const messages = {
         moveSelectedToSource: '将所选项移至左侧',
         moveAllToSource: '将全部移至左侧',
         empty: '无项目',
+        moved: (count, listLabel) => `已将 ${count} 项移至 ${listLabel}`,
     },
     validation: {
         required: '此字段为必填项',
@@ -5355,6 +5385,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
             args: [{ selector: 'ea-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ea-skeleton\"\n  [class.ea-skeleton--text]=\"variant() === 'text'\"\n  [class.ea-skeleton--circle]=\"variant() === 'circle'\"\n  [class.ea-skeleton--rect]=\"variant() === 'rect'\"\n  [class.ea-skeleton--animated]=\"animated()\"\n  [style]=\"hostStyles()\"\n  aria-hidden=\"true\">\n</div>\n", styles: [".ea-skeleton{display:block;background-color:var(--color-bg-muted);border-radius:var(--radius-md)}.ea-skeleton--text{width:100%;height:1rem;border-radius:var(--radius-sm)}.ea-skeleton--circle{width:2.5rem;height:2.5rem;border-radius:var(--radius-full)}.ea-skeleton--rect{width:100%;height:6rem}.ea-skeleton--animated{animation:ea-skeleton-pulse 1.5s ease-in-out infinite}@keyframes ea-skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}@media(prefers-reduced-motion:reduce){.ea-skeleton--animated{animation:none}}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }] } });
 
+// Elements that carry their own interactive semantics, so ARIA state applies
+// to them directly rather than to a wrapper around them.
+const INTERACTIVE_SELECTOR = 'button, a[href], input, select, textarea, summary, [role]:not([role="none"]):not([role="presentation"])';
+/**
+ * Resolves the element that should carry ARIA state a directive applies to its
+ * host. A component wrapper such as `<ea-button>` is a roleless custom element,
+ * so attributes left on it are never announced; they belong on the interactive
+ * element the component renders inside. Falls back to the host when it exposes
+ * no inner control.
+ */
+function resolveAriaTarget(host) {
+    if (host.matches(INTERACTIVE_SELECTOR)) {
+        return host;
+    }
+    return host.querySelector(INTERACTIVE_SELECTOR) ?? host;
+}
+
 /**
  * Attaches a positioned tooltip to its host element. Shows on hover and
  * focus, hides on leave/blur or Escape, and wires up `aria-describedby` so
@@ -5563,7 +5610,7 @@ class TooltipDirective {
         this.resizeObserver = null;
     }
     appendDescribedBy() {
-        const native = this.el.nativeElement;
+        const native = resolveAriaTarget(this.el.nativeElement);
         const existing = (native.getAttribute('aria-describedby') ?? '').trim();
         const tokens = existing ? existing.split(/\s+/) : [];
         if (!tokens.includes(this.tooltipId)) {
@@ -5572,7 +5619,7 @@ class TooltipDirective {
         this.renderer.setAttribute(native, 'aria-describedby', tokens.join(' '));
     }
     removeDescribedBy() {
-        const native = this.el.nativeElement;
+        const native = resolveAriaTarget(this.el.nativeElement);
         const existing = (native.getAttribute('aria-describedby') ?? '').trim();
         const tokens = existing.split(/\s+/).filter((t) => t && t !== this.tooltipId);
         if (tokens.length) {
@@ -6227,7 +6274,7 @@ class AvatarEditorComponent {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: AvatarEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: AvatarEditorComponent, isStandalone: true, selector: "ea-avatar-editor", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, canvasSize: { classPropertyName: "canvasSize", publicName: "canvasSize", isSignal: true, isRequired: false, transformFunction: null }, currentSrc: { classPropertyName: "currentSrc", publicName: "currentSrc", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, exportQuality: { classPropertyName: "exportQuality", publicName: "exportQuality", isSignal: true, isRequired: false, transformFunction: null }, exportType: { classPropertyName: "exportType", publicName: "exportType", isSignal: true, isRequired: false, transformFunction: null }, cropState: { classPropertyName: "cropState", publicName: "cropState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropped: "cropped", fileSelected: "fileSelected", removed: "removed", errored: "errored", cropStateChanged: "cropStateChanged" }, viewQueries: [{ propertyName: "canvasEl", first: true, predicate: ["canvasEl"], descendants: true, isSignal: true }, { propertyName: "fileInputEl", first: true, predicate: ["fileInputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-avatar-editor\"\n  [ngClass]=\"hostClasses()\">\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-avatar-editor__file-input\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    [accept]=\"accept()\"\n    (change)=\"onFileSelected($event)\" />\n\n  <span\n    class=\"ea-avatar-editor__visually-hidden\"\n    [id]=\"instructionsId\">\n    {{ i18n.messages().avatarEditor.canvasInstructions }}\n  </span>\n\n  <span\n    class=\"ea-avatar-editor__visually-hidden\"\n    role=\"alert\">\n    {{ lastError() }}\n  </span>\n\n  @if (!hasImage() && !isLoading()) {\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__dropzone\"\n      [style.width.px]=\"canvasSize()\"\n      [style.height.px]=\"canvasSize()\"\n      (click)=\"openFilePicker()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      <ea-icon-upload class=\"ea-avatar-editor__upload-icon\" />\n      <span class=\"ea-avatar-editor__dropzone-text\">\n        {{ i18n.messages().avatarEditor.dropzone }}\n      </span>\n    </button>\n  }\n\n  @if (hasImage() || isLoading()) {\n    <div\n      class=\"ea-avatar-editor__canvas-wrapper\"\n      [style.width.px]=\"canvasSize()\"\n      [style.height.px]=\"canvasSize()\"\n      [attr.aria-busy]=\"isLoading() || null\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      @if (isLoading()) {\n        <ea-skeleton\n          [variant]=\"shape() === 'circle' ? 'circle' : 'rect'\"\n          [width]=\"canvasSize() + 'px'\"\n          [height]=\"canvasSize() + 'px'\" />\n      }\n\n      @if (hasImage()) {\n        <canvas\n          #canvasEl\n          class=\"ea-avatar-editor__canvas\"\n          role=\"application\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"i18n.messages().avatarEditor.canvas\"\n          [attr.aria-describedby]=\"instructionsId\"\n          [style.display]=\"isLoading() ? 'none' : 'block'\"\n          [width]=\"canvasSize()\"\n          [height]=\"canvasSize()\"\n          (mousedown)=\"onMouseDown($event)\"\n          (touchstart)=\"onTouchStart($event)\"\n          (keydown)=\"onCanvasKeydown($event)\"></canvas>\n\n        @if (!isLoading()) {\n          <div\n            class=\"ea-avatar-editor__canvas-overlay\"\n            [class.ea-avatar-editor__canvas-overlay--on-light]=\"!isImageDark()\">\n            <ea-icon-camera class=\"ea-avatar-editor__overlay-icon\" />\n            <span>{{ i18n.messages().avatarEditor.change }}</span>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  <div class=\"ea-avatar-editor__controls\">\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"i18n.messages().avatarEditor.revert\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.revert\"\n      [disabled]=\"!canRevert() || isLoading()\"\n      (click)=\"revertImage()\">\n      <ea-icon-rotate-ccw />\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"i18n.messages().avatarEditor.zoomOut\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.zoomOut\"\n      [disabled]=\"!hasImage() || isLoading() || zoom() <= minZoom()\"\n      (click)=\"setZoom(zoom() - 0.1)\">\n      <ea-icon-minus />\n    </button>\n\n    <input\n      type=\"range\"\n      class=\"ea-avatar-editor__zoom-slider\"\n      [min]=\"minZoom()\"\n      [max]=\"maxZoom()\"\n      step=\"0.01\"\n      [value]=\"zoom()\"\n      [disabled]=\"!hasImage() || isLoading()\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.zoom\"\n      (input)=\"onZoomInput($event)\" />\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"i18n.messages().avatarEditor.zoomIn\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.zoomIn\"\n      [disabled]=\"!hasImage() || isLoading() || zoom() >= maxZoom()\"\n      (click)=\"setZoom(zoom() + 0.1)\">\n      <ea-icon-plus />\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn ea-avatar-editor__icon-btn--danger\"\n      [eaTooltip]=\"i18n.messages().avatarEditor.remove\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.remove\"\n      [disabled]=\"!hasImage() || isLoading()\"\n      (click)=\"removeImage()\">\n      <ea-icon-trash />\n    </button>\n  </div>\n</div>\n", styles: [".ea-avatar-editor{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-3);font-family:var(--font-family-sans)}.ea-avatar-editor__file-input,.ea-avatar-editor__visually-hidden{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-avatar-editor__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);font-family:inherit;font-size:var(--font-size-sm);line-height:var(--line-height-normal);border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-tertiary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__dropzone:hover{border-color:var(--color-border-focus);background-color:var(--color-state-hover);color:var(--color-text-secondary)}.ea-avatar-editor__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-avatar-editor__dropzone:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-avatar-editor--drag-over .ea-avatar-editor__dropzone{border-color:var(--color-primary-500);background-color:var(--color-primary-50);color:var(--color-primary-600)}.ea-avatar-editor--circle .ea-avatar-editor__dropzone{border-radius:var(--radius-full)}.ea-avatar-editor__upload-icon{width:32px;height:32px;opacity:.6}.ea-avatar-editor__dropzone-text{text-align:center}.ea-avatar-editor--compact .ea-avatar-editor__dropzone{gap:var(--space-1-5);padding:var(--space-3);font-size:.75rem;line-height:1.35}.ea-avatar-editor--compact .ea-avatar-editor__upload-icon{width:24px;height:24px}.ea-avatar-editor--ultra-compact .ea-avatar-editor__dropzone{gap:var(--space-1);padding:var(--space-2);font-size:.625rem;line-height:1.2}.ea-avatar-editor--ultra-compact .ea-avatar-editor__upload-icon{width:16px;height:16px}.ea-avatar-editor__canvas-wrapper{position:relative;overflow:hidden;border-radius:var(--radius-lg)}.ea-avatar-editor--circle .ea-avatar-editor__canvas-wrapper{border-radius:var(--radius-full)}.ea-avatar-editor__canvas{display:block;cursor:grab}.ea-avatar-editor__canvas:active{cursor:grabbing}.ea-avatar-editor__canvas-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-neutral-0);opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--easing-default),color var(--duration-fast) var(--easing-default)}.ea-avatar-editor__canvas-overlay--on-light{color:var(--color-neutral-950)}.ea-avatar-editor__overlay-icon{width:24px;height:24px}.ea-avatar-editor__canvas-wrapper:hover .ea-avatar-editor__canvas-overlay{opacity:1}.ea-avatar-editor__controls{display:flex;align-items:center;gap:var(--space-2)}.ea-avatar-editor__icon-btn{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-avatar-editor__icon-btn>*{font-size:1.25em}.ea-avatar-editor__icon-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-avatar-editor__icon-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-avatar-editor__icon-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-avatar-editor__icon-btn:disabled{cursor:not-allowed;opacity:.5}.ea-avatar-editor__icon-btn{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)}.ea-avatar-editor__icon-btn:hover:not(:disabled){border-color:var(--color-border-focus)}.ea-avatar-editor__icon-btn--danger{color:var(--color-error-default)}.ea-avatar-editor__icon-btn--danger:hover:not(:disabled){border-color:var(--color-error-default);color:var(--color-error-default)}.ea-avatar-editor__zoom-slider{width:7rem;height:4px;border-radius:var(--radius-full);background:var(--color-neutral-200);appearance:none;cursor:pointer}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);appearance:none;cursor:grab}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider::-moz-range-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);cursor:grab}.ea-avatar-editor__zoom-slider::-moz-range-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider:focus-visible{outline:none}.ea-avatar-editor__zoom-slider:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-avatar-editor__zoom-slider:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-avatar-editor__zoom-slider:disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: CameraIconComponent, selector: "ea-icon-camera" }, { kind: "component", type: MinusIconComponent, selector: "ea-icon-minus" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PlusIconComponent, selector: "ea-icon-plus" }, { kind: "component", type: RotateCcwIconComponent, selector: "ea-icon-rotate-ccw" }, { kind: "component", type: SkeletonComponent, selector: "ea-skeleton", inputs: ["variant", "width", "height", "animated"] }, { kind: "directive", type: TooltipDirective, selector: "[eaTooltip]", inputs: ["eaTooltip", "tooltipPosition", "maxWidth"] }, { kind: "component", type: TrashIconComponent, selector: "ea-icon-trash" }, { kind: "component", type: UploadIconComponent, selector: "ea-icon-upload" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: AvatarEditorComponent, isStandalone: true, selector: "ea-avatar-editor", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, canvasSize: { classPropertyName: "canvasSize", publicName: "canvasSize", isSignal: true, isRequired: false, transformFunction: null }, currentSrc: { classPropertyName: "currentSrc", publicName: "currentSrc", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, exportQuality: { classPropertyName: "exportQuality", publicName: "exportQuality", isSignal: true, isRequired: false, transformFunction: null }, exportType: { classPropertyName: "exportType", publicName: "exportType", isSignal: true, isRequired: false, transformFunction: null }, cropState: { classPropertyName: "cropState", publicName: "cropState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropped: "cropped", fileSelected: "fileSelected", removed: "removed", errored: "errored", cropStateChanged: "cropStateChanged" }, viewQueries: [{ propertyName: "canvasEl", first: true, predicate: ["canvasEl"], descendants: true, isSignal: true }, { propertyName: "fileInputEl", first: true, predicate: ["fileInputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-avatar-editor\"\n  [ngClass]=\"hostClasses()\">\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-avatar-editor__file-input\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    [accept]=\"accept()\"\n    (change)=\"onFileSelected($event)\" />\n\n  <span\n    class=\"ea-avatar-editor__visually-hidden\"\n    [id]=\"instructionsId\">\n    {{ i18n.messages().avatarEditor.canvasInstructions }}\n  </span>\n\n  <span\n    class=\"ea-avatar-editor__visually-hidden\"\n    role=\"alert\">\n    {{ lastError() }}\n  </span>\n\n  @if (!hasImage() && !isLoading()) {\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__dropzone\"\n      [style.width.px]=\"canvasSize()\"\n      [style.height.px]=\"canvasSize()\"\n      (click)=\"openFilePicker()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      <ea-icon-upload class=\"ea-avatar-editor__upload-icon\" />\n      <span class=\"ea-avatar-editor__dropzone-text\">\n        {{ i18n.messages().avatarEditor.dropzone }}\n      </span>\n    </button>\n  }\n\n  @if (hasImage() || isLoading()) {\n    <div\n      class=\"ea-avatar-editor__canvas-wrapper\"\n      [style.width.px]=\"canvasSize()\"\n      [style.height.px]=\"canvasSize()\"\n      [attr.aria-busy]=\"isLoading() || null\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      @if (isLoading()) {\n        <ea-skeleton\n          [variant]=\"shape() === 'circle' ? 'circle' : 'rect'\"\n          [width]=\"canvasSize() + 'px'\"\n          [height]=\"canvasSize() + 'px'\" />\n      }\n\n      @if (hasImage()) {\n        <canvas\n          #canvasEl\n          class=\"ea-avatar-editor__canvas\"\n          role=\"application\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"i18n.messages().avatarEditor.canvas\"\n          [attr.aria-describedby]=\"instructionsId\"\n          [style.display]=\"isLoading() ? 'none' : 'block'\"\n          [width]=\"canvasSize()\"\n          [height]=\"canvasSize()\"\n          (mousedown)=\"onMouseDown($event)\"\n          (touchstart)=\"onTouchStart($event)\"\n          (keydown)=\"onCanvasKeydown($event)\"></canvas>\n\n        @if (!isLoading()) {\n          <div\n            class=\"ea-avatar-editor__canvas-overlay\"\n            [class.ea-avatar-editor__canvas-overlay--on-light]=\"!isImageDark()\">\n            <ea-icon-camera class=\"ea-avatar-editor__overlay-icon\" />\n            <span>{{ i18n.messages().avatarEditor.change }}</span>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  <div class=\"ea-avatar-editor__controls\">\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"i18n.messages().avatarEditor.revert\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.revert\"\n      [disabled]=\"!canRevert() || isLoading()\"\n      (click)=\"revertImage()\">\n      <ea-icon-rotate-ccw />\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"i18n.messages().avatarEditor.zoomOut\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.zoomOut\"\n      [disabled]=\"!hasImage() || isLoading() || zoom() <= minZoom()\"\n      (click)=\"setZoom(zoom() - 0.1)\">\n      <ea-icon-minus />\n    </button>\n\n    <input\n      type=\"range\"\n      class=\"ea-avatar-editor__zoom-slider\"\n      [min]=\"minZoom()\"\n      [max]=\"maxZoom()\"\n      step=\"0.01\"\n      [value]=\"zoom()\"\n      [disabled]=\"!hasImage() || isLoading()\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.zoom\"\n      (input)=\"onZoomInput($event)\" />\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"i18n.messages().avatarEditor.zoomIn\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.zoomIn\"\n      [disabled]=\"!hasImage() || isLoading() || zoom() >= maxZoom()\"\n      (click)=\"setZoom(zoom() + 0.1)\">\n      <ea-icon-plus />\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn ea-avatar-editor__icon-btn--danger\"\n      [eaTooltip]=\"i18n.messages().avatarEditor.remove\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.remove\"\n      [disabled]=\"!hasImage() || isLoading()\"\n      (click)=\"removeImage()\">\n      <ea-icon-trash />\n    </button>\n  </div>\n</div>\n", styles: [".ea-avatar-editor{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-3);font-family:var(--font-family-sans)}.ea-avatar-editor__file-input,.ea-avatar-editor__visually-hidden{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-avatar-editor__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);font-family:inherit;font-size:var(--font-size-sm);line-height:var(--line-height-normal);border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-tertiary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__dropzone:hover{border-color:var(--color-border-focus);background-color:var(--color-state-hover);color:var(--color-text-secondary)}.ea-avatar-editor__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-avatar-editor__dropzone:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-avatar-editor--drag-over .ea-avatar-editor__dropzone{border-color:var(--color-border-focus);background-color:var(--color-brand-subtle);color:var(--color-brand-default)}.ea-avatar-editor--circle .ea-avatar-editor__dropzone{border-radius:var(--radius-full)}.ea-avatar-editor__upload-icon{width:32px;height:32px;opacity:.6}.ea-avatar-editor__dropzone-text{text-align:center}.ea-avatar-editor--compact .ea-avatar-editor__dropzone{gap:var(--space-1-5);padding:var(--space-3);font-size:.75rem;line-height:1.35}.ea-avatar-editor--compact .ea-avatar-editor__upload-icon{width:24px;height:24px}.ea-avatar-editor--ultra-compact .ea-avatar-editor__dropzone{gap:var(--space-1);padding:var(--space-2);font-size:.625rem;line-height:1.2}.ea-avatar-editor--ultra-compact .ea-avatar-editor__upload-icon{width:16px;height:16px}.ea-avatar-editor__canvas-wrapper{position:relative;overflow:hidden;border-radius:var(--radius-lg)}.ea-avatar-editor--circle .ea-avatar-editor__canvas-wrapper{border-radius:var(--radius-full)}.ea-avatar-editor__canvas{display:block;cursor:grab}.ea-avatar-editor__canvas:active{cursor:grabbing}.ea-avatar-editor__canvas-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-neutral-0);opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--easing-default),color var(--duration-fast) var(--easing-default)}.ea-avatar-editor__canvas-overlay--on-light{color:var(--color-neutral-950)}.ea-avatar-editor__overlay-icon{width:24px;height:24px}.ea-avatar-editor__canvas-wrapper:hover .ea-avatar-editor__canvas-overlay{opacity:1}.ea-avatar-editor__controls{display:flex;align-items:center;gap:var(--space-2)}.ea-avatar-editor__icon-btn{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-avatar-editor__icon-btn>*{font-size:1.25em}.ea-avatar-editor__icon-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-avatar-editor__icon-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-avatar-editor__icon-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-avatar-editor__icon-btn:disabled{cursor:not-allowed;opacity:.5}.ea-avatar-editor__icon-btn{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)}.ea-avatar-editor__icon-btn:hover:not(:disabled){border-color:var(--color-border-focus)}.ea-avatar-editor__icon-btn--danger{color:var(--color-error-default)}.ea-avatar-editor__icon-btn--danger:hover:not(:disabled){border-color:var(--color-error-default);color:var(--color-error-default)}.ea-avatar-editor__zoom-slider{width:7rem;height:4px;border-radius:var(--radius-full);background:var(--color-neutral-200);appearance:none;cursor:pointer}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb{width:1rem;height:1rem;border:2px solid var(--color-brand-default);border-radius:var(--radius-full);background:var(--color-bg-base);appearance:none;cursor:grab}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider::-moz-range-thumb{width:1rem;height:1rem;border:2px solid var(--color-brand-default);border-radius:var(--radius-full);background:var(--color-bg-base);cursor:grab}.ea-avatar-editor__zoom-slider::-moz-range-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider:focus-visible{outline:none}.ea-avatar-editor__zoom-slider:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-avatar-editor__zoom-slider:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-avatar-editor__zoom-slider:disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: CameraIconComponent, selector: "ea-icon-camera" }, { kind: "component", type: MinusIconComponent, selector: "ea-icon-minus" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PlusIconComponent, selector: "ea-icon-plus" }, { kind: "component", type: RotateCcwIconComponent, selector: "ea-icon-rotate-ccw" }, { kind: "component", type: SkeletonComponent, selector: "ea-skeleton", inputs: ["variant", "width", "height", "animated"] }, { kind: "directive", type: TooltipDirective, selector: "[eaTooltip]", inputs: ["eaTooltip", "tooltipPosition", "maxWidth"] }, { kind: "component", type: TrashIconComponent, selector: "ea-icon-trash" }, { kind: "component", type: UploadIconComponent, selector: "ea-icon-upload" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: AvatarEditorComponent, decorators: [{
             type: Component,
@@ -6241,7 +6288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                         TooltipDirective,
                         TrashIconComponent,
                         UploadIconComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-avatar-editor\"\n  [ngClass]=\"hostClasses()\">\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-avatar-editor__file-input\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    [accept]=\"accept()\"\n    (change)=\"onFileSelected($event)\" />\n\n  <span\n    class=\"ea-avatar-editor__visually-hidden\"\n    [id]=\"instructionsId\">\n    {{ i18n.messages().avatarEditor.canvasInstructions }}\n  </span>\n\n  <span\n    class=\"ea-avatar-editor__visually-hidden\"\n    role=\"alert\">\n    {{ lastError() }}\n  </span>\n\n  @if (!hasImage() && !isLoading()) {\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__dropzone\"\n      [style.width.px]=\"canvasSize()\"\n      [style.height.px]=\"canvasSize()\"\n      (click)=\"openFilePicker()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      <ea-icon-upload class=\"ea-avatar-editor__upload-icon\" />\n      <span class=\"ea-avatar-editor__dropzone-text\">\n        {{ i18n.messages().avatarEditor.dropzone }}\n      </span>\n    </button>\n  }\n\n  @if (hasImage() || isLoading()) {\n    <div\n      class=\"ea-avatar-editor__canvas-wrapper\"\n      [style.width.px]=\"canvasSize()\"\n      [style.height.px]=\"canvasSize()\"\n      [attr.aria-busy]=\"isLoading() || null\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      @if (isLoading()) {\n        <ea-skeleton\n          [variant]=\"shape() === 'circle' ? 'circle' : 'rect'\"\n          [width]=\"canvasSize() + 'px'\"\n          [height]=\"canvasSize() + 'px'\" />\n      }\n\n      @if (hasImage()) {\n        <canvas\n          #canvasEl\n          class=\"ea-avatar-editor__canvas\"\n          role=\"application\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"i18n.messages().avatarEditor.canvas\"\n          [attr.aria-describedby]=\"instructionsId\"\n          [style.display]=\"isLoading() ? 'none' : 'block'\"\n          [width]=\"canvasSize()\"\n          [height]=\"canvasSize()\"\n          (mousedown)=\"onMouseDown($event)\"\n          (touchstart)=\"onTouchStart($event)\"\n          (keydown)=\"onCanvasKeydown($event)\"></canvas>\n\n        @if (!isLoading()) {\n          <div\n            class=\"ea-avatar-editor__canvas-overlay\"\n            [class.ea-avatar-editor__canvas-overlay--on-light]=\"!isImageDark()\">\n            <ea-icon-camera class=\"ea-avatar-editor__overlay-icon\" />\n            <span>{{ i18n.messages().avatarEditor.change }}</span>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  <div class=\"ea-avatar-editor__controls\">\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"i18n.messages().avatarEditor.revert\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.revert\"\n      [disabled]=\"!canRevert() || isLoading()\"\n      (click)=\"revertImage()\">\n      <ea-icon-rotate-ccw />\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"i18n.messages().avatarEditor.zoomOut\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.zoomOut\"\n      [disabled]=\"!hasImage() || isLoading() || zoom() <= minZoom()\"\n      (click)=\"setZoom(zoom() - 0.1)\">\n      <ea-icon-minus />\n    </button>\n\n    <input\n      type=\"range\"\n      class=\"ea-avatar-editor__zoom-slider\"\n      [min]=\"minZoom()\"\n      [max]=\"maxZoom()\"\n      step=\"0.01\"\n      [value]=\"zoom()\"\n      [disabled]=\"!hasImage() || isLoading()\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.zoom\"\n      (input)=\"onZoomInput($event)\" />\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"i18n.messages().avatarEditor.zoomIn\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.zoomIn\"\n      [disabled]=\"!hasImage() || isLoading() || zoom() >= maxZoom()\"\n      (click)=\"setZoom(zoom() + 0.1)\">\n      <ea-icon-plus />\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn ea-avatar-editor__icon-btn--danger\"\n      [eaTooltip]=\"i18n.messages().avatarEditor.remove\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.remove\"\n      [disabled]=\"!hasImage() || isLoading()\"\n      (click)=\"removeImage()\">\n      <ea-icon-trash />\n    </button>\n  </div>\n</div>\n", styles: [".ea-avatar-editor{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-3);font-family:var(--font-family-sans)}.ea-avatar-editor__file-input,.ea-avatar-editor__visually-hidden{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-avatar-editor__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);font-family:inherit;font-size:var(--font-size-sm);line-height:var(--line-height-normal);border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-tertiary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__dropzone:hover{border-color:var(--color-border-focus);background-color:var(--color-state-hover);color:var(--color-text-secondary)}.ea-avatar-editor__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-avatar-editor__dropzone:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-avatar-editor--drag-over .ea-avatar-editor__dropzone{border-color:var(--color-primary-500);background-color:var(--color-primary-50);color:var(--color-primary-600)}.ea-avatar-editor--circle .ea-avatar-editor__dropzone{border-radius:var(--radius-full)}.ea-avatar-editor__upload-icon{width:32px;height:32px;opacity:.6}.ea-avatar-editor__dropzone-text{text-align:center}.ea-avatar-editor--compact .ea-avatar-editor__dropzone{gap:var(--space-1-5);padding:var(--space-3);font-size:.75rem;line-height:1.35}.ea-avatar-editor--compact .ea-avatar-editor__upload-icon{width:24px;height:24px}.ea-avatar-editor--ultra-compact .ea-avatar-editor__dropzone{gap:var(--space-1);padding:var(--space-2);font-size:.625rem;line-height:1.2}.ea-avatar-editor--ultra-compact .ea-avatar-editor__upload-icon{width:16px;height:16px}.ea-avatar-editor__canvas-wrapper{position:relative;overflow:hidden;border-radius:var(--radius-lg)}.ea-avatar-editor--circle .ea-avatar-editor__canvas-wrapper{border-radius:var(--radius-full)}.ea-avatar-editor__canvas{display:block;cursor:grab}.ea-avatar-editor__canvas:active{cursor:grabbing}.ea-avatar-editor__canvas-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-neutral-0);opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--easing-default),color var(--duration-fast) var(--easing-default)}.ea-avatar-editor__canvas-overlay--on-light{color:var(--color-neutral-950)}.ea-avatar-editor__overlay-icon{width:24px;height:24px}.ea-avatar-editor__canvas-wrapper:hover .ea-avatar-editor__canvas-overlay{opacity:1}.ea-avatar-editor__controls{display:flex;align-items:center;gap:var(--space-2)}.ea-avatar-editor__icon-btn{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-avatar-editor__icon-btn>*{font-size:1.25em}.ea-avatar-editor__icon-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-avatar-editor__icon-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-avatar-editor__icon-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-avatar-editor__icon-btn:disabled{cursor:not-allowed;opacity:.5}.ea-avatar-editor__icon-btn{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)}.ea-avatar-editor__icon-btn:hover:not(:disabled){border-color:var(--color-border-focus)}.ea-avatar-editor__icon-btn--danger{color:var(--color-error-default)}.ea-avatar-editor__icon-btn--danger:hover:not(:disabled){border-color:var(--color-error-default);color:var(--color-error-default)}.ea-avatar-editor__zoom-slider{width:7rem;height:4px;border-radius:var(--radius-full);background:var(--color-neutral-200);appearance:none;cursor:pointer}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);appearance:none;cursor:grab}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider::-moz-range-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);cursor:grab}.ea-avatar-editor__zoom-slider::-moz-range-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider:focus-visible{outline:none}.ea-avatar-editor__zoom-slider:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-avatar-editor__zoom-slider:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-avatar-editor__zoom-slider:disabled{opacity:.4;cursor:not-allowed}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-avatar-editor\"\n  [ngClass]=\"hostClasses()\">\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-avatar-editor__file-input\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    [accept]=\"accept()\"\n    (change)=\"onFileSelected($event)\" />\n\n  <span\n    class=\"ea-avatar-editor__visually-hidden\"\n    [id]=\"instructionsId\">\n    {{ i18n.messages().avatarEditor.canvasInstructions }}\n  </span>\n\n  <span\n    class=\"ea-avatar-editor__visually-hidden\"\n    role=\"alert\">\n    {{ lastError() }}\n  </span>\n\n  @if (!hasImage() && !isLoading()) {\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__dropzone\"\n      [style.width.px]=\"canvasSize()\"\n      [style.height.px]=\"canvasSize()\"\n      (click)=\"openFilePicker()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      <ea-icon-upload class=\"ea-avatar-editor__upload-icon\" />\n      <span class=\"ea-avatar-editor__dropzone-text\">\n        {{ i18n.messages().avatarEditor.dropzone }}\n      </span>\n    </button>\n  }\n\n  @if (hasImage() || isLoading()) {\n    <div\n      class=\"ea-avatar-editor__canvas-wrapper\"\n      [style.width.px]=\"canvasSize()\"\n      [style.height.px]=\"canvasSize()\"\n      [attr.aria-busy]=\"isLoading() || null\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      @if (isLoading()) {\n        <ea-skeleton\n          [variant]=\"shape() === 'circle' ? 'circle' : 'rect'\"\n          [width]=\"canvasSize() + 'px'\"\n          [height]=\"canvasSize() + 'px'\" />\n      }\n\n      @if (hasImage()) {\n        <canvas\n          #canvasEl\n          class=\"ea-avatar-editor__canvas\"\n          role=\"application\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"i18n.messages().avatarEditor.canvas\"\n          [attr.aria-describedby]=\"instructionsId\"\n          [style.display]=\"isLoading() ? 'none' : 'block'\"\n          [width]=\"canvasSize()\"\n          [height]=\"canvasSize()\"\n          (mousedown)=\"onMouseDown($event)\"\n          (touchstart)=\"onTouchStart($event)\"\n          (keydown)=\"onCanvasKeydown($event)\"></canvas>\n\n        @if (!isLoading()) {\n          <div\n            class=\"ea-avatar-editor__canvas-overlay\"\n            [class.ea-avatar-editor__canvas-overlay--on-light]=\"!isImageDark()\">\n            <ea-icon-camera class=\"ea-avatar-editor__overlay-icon\" />\n            <span>{{ i18n.messages().avatarEditor.change }}</span>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  <div class=\"ea-avatar-editor__controls\">\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"i18n.messages().avatarEditor.revert\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.revert\"\n      [disabled]=\"!canRevert() || isLoading()\"\n      (click)=\"revertImage()\">\n      <ea-icon-rotate-ccw />\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"i18n.messages().avatarEditor.zoomOut\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.zoomOut\"\n      [disabled]=\"!hasImage() || isLoading() || zoom() <= minZoom()\"\n      (click)=\"setZoom(zoom() - 0.1)\">\n      <ea-icon-minus />\n    </button>\n\n    <input\n      type=\"range\"\n      class=\"ea-avatar-editor__zoom-slider\"\n      [min]=\"minZoom()\"\n      [max]=\"maxZoom()\"\n      step=\"0.01\"\n      [value]=\"zoom()\"\n      [disabled]=\"!hasImage() || isLoading()\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.zoom\"\n      (input)=\"onZoomInput($event)\" />\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn\"\n      [eaTooltip]=\"i18n.messages().avatarEditor.zoomIn\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.zoomIn\"\n      [disabled]=\"!hasImage() || isLoading() || zoom() >= maxZoom()\"\n      (click)=\"setZoom(zoom() + 0.1)\">\n      <ea-icon-plus />\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__icon-btn ea-avatar-editor__icon-btn--danger\"\n      [eaTooltip]=\"i18n.messages().avatarEditor.remove\"\n      [attr.aria-label]=\"i18n.messages().avatarEditor.remove\"\n      [disabled]=\"!hasImage() || isLoading()\"\n      (click)=\"removeImage()\">\n      <ea-icon-trash />\n    </button>\n  </div>\n</div>\n", styles: [".ea-avatar-editor{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-3);font-family:var(--font-family-sans)}.ea-avatar-editor__file-input,.ea-avatar-editor__visually-hidden{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-avatar-editor__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);font-family:inherit;font-size:var(--font-size-sm);line-height:var(--line-height-normal);border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-tertiary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__dropzone:hover{border-color:var(--color-border-focus);background-color:var(--color-state-hover);color:var(--color-text-secondary)}.ea-avatar-editor__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-avatar-editor__dropzone:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-avatar-editor--drag-over .ea-avatar-editor__dropzone{border-color:var(--color-border-focus);background-color:var(--color-brand-subtle);color:var(--color-brand-default)}.ea-avatar-editor--circle .ea-avatar-editor__dropzone{border-radius:var(--radius-full)}.ea-avatar-editor__upload-icon{width:32px;height:32px;opacity:.6}.ea-avatar-editor__dropzone-text{text-align:center}.ea-avatar-editor--compact .ea-avatar-editor__dropzone{gap:var(--space-1-5);padding:var(--space-3);font-size:.75rem;line-height:1.35}.ea-avatar-editor--compact .ea-avatar-editor__upload-icon{width:24px;height:24px}.ea-avatar-editor--ultra-compact .ea-avatar-editor__dropzone{gap:var(--space-1);padding:var(--space-2);font-size:.625rem;line-height:1.2}.ea-avatar-editor--ultra-compact .ea-avatar-editor__upload-icon{width:16px;height:16px}.ea-avatar-editor__canvas-wrapper{position:relative;overflow:hidden;border-radius:var(--radius-lg)}.ea-avatar-editor--circle .ea-avatar-editor__canvas-wrapper{border-radius:var(--radius-full)}.ea-avatar-editor__canvas{display:block;cursor:grab}.ea-avatar-editor__canvas:active{cursor:grabbing}.ea-avatar-editor__canvas-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-neutral-0);opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--easing-default),color var(--duration-fast) var(--easing-default)}.ea-avatar-editor__canvas-overlay--on-light{color:var(--color-neutral-950)}.ea-avatar-editor__overlay-icon{width:24px;height:24px}.ea-avatar-editor__canvas-wrapper:hover .ea-avatar-editor__canvas-overlay{opacity:1}.ea-avatar-editor__controls{display:flex;align-items:center;gap:var(--space-2)}.ea-avatar-editor__icon-btn{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-avatar-editor__icon-btn>*{font-size:1.25em}.ea-avatar-editor__icon-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-avatar-editor__icon-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-avatar-editor__icon-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-avatar-editor__icon-btn:disabled{cursor:not-allowed;opacity:.5}.ea-avatar-editor__icon-btn{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)}.ea-avatar-editor__icon-btn:hover:not(:disabled){border-color:var(--color-border-focus)}.ea-avatar-editor__icon-btn--danger{color:var(--color-error-default)}.ea-avatar-editor__icon-btn--danger:hover:not(:disabled){border-color:var(--color-error-default);color:var(--color-error-default)}.ea-avatar-editor__zoom-slider{width:7rem;height:4px;border-radius:var(--radius-full);background:var(--color-neutral-200);appearance:none;cursor:pointer}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb{width:1rem;height:1rem;border:2px solid var(--color-brand-default);border-radius:var(--radius-full);background:var(--color-bg-base);appearance:none;cursor:grab}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider::-moz-range-thumb{width:1rem;height:1rem;border:2px solid var(--color-brand-default);border-radius:var(--radius-full);background:var(--color-bg-base);cursor:grab}.ea-avatar-editor__zoom-slider::-moz-range-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider:focus-visible{outline:none}.ea-avatar-editor__zoom-slider:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-avatar-editor__zoom-slider:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-avatar-editor__zoom-slider:disabled{opacity:.4;cursor:not-allowed}\n"] }]
         }], ctorParameters: () => [], propDecorators: { canvasEl: [{ type: i0.ViewChild, args: ['canvasEl', { isSignal: true }] }], fileInputEl: [{ type: i0.ViewChild, args: ['fileInputEl', { isSignal: true }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], canvasSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasSize", required: false }] }], currentSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSrc", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], minZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "minZoom", required: false }] }], maxZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxZoom", required: false }] }], exportQuality: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportQuality", required: false }] }], exportType: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportType", required: false }] }], cropState: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropState", required: false }] }], cropped: [{ type: i0.Output, args: ["cropped"] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }], removed: [{ type: i0.Output, args: ["removed"] }], errored: [{ type: i0.Output, args: ["errored"] }], cropStateChanged: [{ type: i0.Output, args: ["cropStateChanged"] }] } });
 
 class UserIconComponent extends IconComponentBase {
@@ -8086,6 +8133,10 @@ class DataTableComponent {
     static PAGE_JUMP = 10;
     columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
     data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the table, announced when it takes focus as a grid. */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    /** Visible caption rendered above the table; also names it for assistive technology. */
+    caption = input(undefined, ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
     trackBy = input(undefined, ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
     density = input('comfortable', ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
     /** Visual size of the table; density paddings and icons scale with it. */
@@ -8299,7 +8350,7 @@ class DataTableComponent {
             ?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DataTableComponent, isStandalone: true, selector: "ea-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, noDataText: { classPropertyName: "noDataText", publicName: "noDataText", isSignal: true, isRequired: false, transformFunction: null }, navigable: { classPropertyName: "navigable", publicName: "navigable", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", sorted: "sorted", rowActivate: "rowActivate" }, queries: [{ propertyName: "noDataTemplate", first: true, predicate: ["noData"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-data-table\"\n  [ngClass]=\"hostClasses()\">\n  <div class=\"ea-data-table__scroll\">\n    <table\n      class=\"ea-data-table__table\"\n      [attr.role]=\"navigable() ? 'grid' : null\"\n      (keydown)=\"onGridKeydown($event)\">\n      <thead class=\"ea-data-table__head\">\n        <tr\n          class=\"ea-data-table__row ea-data-table__row--header\"\n          [attr.role]=\"navigable() ? 'row' : null\">\n          @for (col of columns(); track col.key; let colIndex = $index) {\n            <th\n              scope=\"col\"\n              class=\"ea-data-table__cell ea-data-table__cell--header\"\n              [attr.role]=\"navigable() ? 'columnheader' : null\"\n              [attr.data-ea-cell]=\"navigable() ? '0-' + colIndex : null\"\n              [class.ea-data-table__cell--sortable]=\"col.sortable\"\n              [class.ea-data-table__cell--sorted]=\"\n                sort().column === col.key && sort().direction\n              \"\n              [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n              [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n              [style.width]=\"col.width ?? null\"\n              [attr.aria-sort]=\"\n                sort().column === col.key && sort().direction === 'asc'\n                  ? 'ascending'\n                  : sort().column === col.key && sort().direction === 'desc'\n                    ? 'descending'\n                    : col.sortable\n                      ? 'none'\n                      : null\n              \"\n              (keydown.enter)=\"onHeaderKeydown($event, col)\"\n              (keydown.space)=\"onHeaderKeydown($event, col)\"\n              (focus)=\"onCellFocus(0, colIndex)\"\n              [attr.tabindex]=\"headerTabindex(colIndex)\">\n              @if (col.sortable) {\n                <button\n                  type=\"button\"\n                  class=\"ea-data-table__sort-button\"\n                  [attr.tabindex]=\"navigable() ? -1 : null\"\n                  (click)=\"onHeaderClick(col)\"\n                  (focus)=\"onCellFocus(0, colIndex)\">\n                  @if (col.headerTemplate) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"col.headerTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n                  } @else {\n                    <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n                  }\n                  <span class=\"ea-data-table__sort-icon\">\n                    @if (sort().column === col.key && sort().direction === 'asc') {\n                      <ea-icon-arrow-up />\n                    } @else if (\n                      sort().column === col.key && sort().direction === 'desc'\n                    ) {\n                      <ea-icon-arrow-down />\n                    } @else {\n                      <ea-icon-chevrons-up-down />\n                    }\n                  </span>\n                </button>\n              } @else if (col.headerTemplate) {\n                <ng-container\n                  [ngTemplateOutlet]=\"col.headerTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n              } @else {\n                <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody class=\"ea-data-table__body\">\n        @if (sortedData().length === 0) {\n          <tr\n            class=\"ea-data-table__row ea-data-table__row--empty\"\n            [attr.role]=\"navigable() ? 'row' : null\">\n            <td\n              class=\"ea-data-table__cell ea-data-table__cell--empty\"\n              [attr.role]=\"navigable() ? 'gridcell' : null\"\n              [attr.colspan]=\"columns().length\">\n              <div role=\"status\">\n                @if (noDataTemplate()) {\n                  <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n                } @else {\n                  {{ resolvedNoDataText() }}\n                }\n              </div>\n            </td>\n          </tr>\n        } @else {\n          @for (\n            row of sortedData();\n            track trackByFn($index, row);\n            let rowIndex = $index\n          ) {\n            <tr\n              class=\"ea-data-table__row\"\n              [attr.role]=\"navigable() ? 'row' : null\"\n              [attr.tabindex]=\"rowTabindex()\"\n              (click)=\"onRowActivate(row)\"\n              (keydown.enter)=\"onRowActivate(row, $event)\"\n              (keydown.space)=\"onRowActivate(row, $event)\">\n              @for (col of columns(); track col.key; let colIndex = $index) {\n                <td\n                  class=\"ea-data-table__cell\"\n                  [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n                  [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n                  [style.width]=\"col.width ?? null\"\n                  [attr.role]=\"navigable() ? 'gridcell' : null\"\n                  [attr.data-ea-cell]=\"navigable() ? rowIndex + 1 + '-' + colIndex : null\"\n                  [attr.tabindex]=\"bodyCellTabindex(rowIndex + 1, colIndex)\"\n                  (focus)=\"onCellFocus(rowIndex + 1, colIndex)\">\n                  @if (col.cellTemplate) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"col.cellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: row,\n                        value: getCellValue(row, col.key),\n                      }\" />\n                  } @else if (col.format) {\n                    {{ col.format(getCellValue(row, col.key)) }}\n                  } @else {\n                    {{ getCellValue(row, col.key) }}\n                  }\n                </td>\n              }\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n  <ng-content select=\"ea-paginator\" />\n</div>\n", styles: [".ea-data-table{--ea-data-table-font-size: var(--font-size-md);overflow:hidden;width:100%;border:var(--border-width-thin) solid var(--color-border-subtle);border-radius:var(--radius-lg);background-color:var(--ea-data-table-background-color, var(--color-bg-base))}.ea-data-table__scroll{overflow-x:auto}.ea-data-table--xs{--ea-data-table-font-size: var(--font-size-xs)}.ea-data-table--sm{--ea-data-table-font-size: var(--font-size-sm)}.ea-data-table--md{--ea-data-table-font-size: var(--font-size-md)}.ea-data-table--lg{--ea-data-table-font-size: var(--font-size-lg)}.ea-data-table--xl{--ea-data-table-font-size: var(--font-size-xl)}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--ea-data-table-font-size);color:var(--color-text-primary);table-layout:auto}.ea-data-table__head{background-color:var(--color-bg-stripe)}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:calc(var(--ea-data-table-font-size) * .75);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-align:start;white-space:nowrap;color:var(--color-text-secondary);border-bottom:var(--border-width-thin) solid var(--color-border-subtle);-webkit-user-select:none;user-select:none}.ea-data-table__cell--sortable{cursor:pointer;transition:var(--transition-colors)}.ea-data-table__cell--sortable:hover{color:var(--color-text-primary);background-color:var(--color-state-hover)}.ea-data-table__cell--sorted{color:var(--color-brand-text)}.ea-data-table__sort-button{display:inline-flex;align-items:center;width:100%;padding:0;margin:0;font:inherit;text-transform:inherit;letter-spacing:inherit;border:none;background:none;color:inherit;cursor:pointer}.ea-data-table__sort-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-data-table__sort-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-data-table__cell--align-center .ea-data-table__sort-button{justify-content:center}.ea-data-table__cell--align-right .ea-data-table__sort-button{justify-content:flex-end}.ea-data-table__header-text{display:inline;vertical-align:middle}.ea-data-table__sort-icon{display:inline-flex;vertical-align:middle;width:1em;height:1em;margin-inline-start:calc(var(--ea-data-table-font-size) * .25);opacity:.5;transition:var(--transition-opacity)}.ea-data-table__cell--sortable:hover .ea-data-table__sort-icon,.ea-data-table__cell--sorted .ea-data-table__sort-icon{opacity:1}.ea-data-table__row{border-bottom:var(--border-width-thin) solid var(--ea-data-table-row-border-color, var(--color-border-subtle));transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom:none}.ea-data-table__cell{text-align:start;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:end}.ea-data-table__cell--empty{text-align:center;color:var(--color-text-tertiary);font-style:italic}.ea-data-table--compact .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .375) calc(var(--ea-data-table-font-size) * .75)}.ea-data-table--comfortable .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .625) var(--ea-data-table-font-size)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--ea-data-table-font-size) calc(var(--ea-data-table-font-size) * 1.5)}.ea-data-table--sticky,.ea-data-table--sticky .ea-data-table__scroll{max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__table{display:flex;flex-direction:column;min-width:calc(var(--ea-data-table-font-size) * 32);max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__head{display:block;flex-shrink:0}.ea-data-table--sticky .ea-data-table__head .ea-data-table__row--header{display:table;width:100%;table-layout:fixed}.ea-data-table--sticky .ea-data-table__body{display:block;overflow-y:auto;flex:1 1 auto;min-height:0}.ea-data-table--sticky .ea-data-table__body .ea-data-table__row{display:table;width:100%;table-layout:fixed}.ea-data-table--striped .ea-data-table__body .ea-data-table__row:nth-child(2n){background-color:var(--ea-data-table-row-stripe-background-color, var(--color-bg-stripe-subtle))}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:var(--ea-data-table-row-hover-background-color, var(--color-state-hover))}@media(forced-colors:active){.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:Highlight;color:HighlightText}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover .ea-data-table__cell--sorted{color:HighlightText}}.ea-data-table--clickable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty){cursor:var(--ea-data-table-row-cursor, pointer)}.ea-data-table--bordered .ea-data-table__cell{border-inline-end:var(--border-width-thin) solid var(--color-border-subtle)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-inline-end:none}.ea-data-table--navigable .ea-data-table__cell:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:calc(-1 * var(--border-width-medium));box-shadow:none}\n"], dependencies: [{ kind: "component", type: ArrowDownIconComponent, selector: "ea-icon-arrow-down" }, { kind: "component", type: ArrowUpIconComponent, selector: "ea-icon-arrow-up" }, { kind: "component", type: ChevronsUpDownIconComponent, selector: "ea-icon-chevrons-up-down" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DataTableComponent, isStandalone: true, selector: "ea-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, noDataText: { classPropertyName: "noDataText", publicName: "noDataText", isSignal: true, isRequired: false, transformFunction: null }, navigable: { classPropertyName: "navigable", publicName: "navigable", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", sorted: "sorted", rowActivate: "rowActivate" }, queries: [{ propertyName: "noDataTemplate", first: true, predicate: ["noData"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-data-table\"\n  [ngClass]=\"hostClasses()\">\n  <div class=\"ea-data-table__scroll\">\n    <table\n      class=\"ea-data-table__table\"\n      [attr.role]=\"navigable() ? 'grid' : null\"\n      [attr.aria-label]=\"caption() ? null : (ariaLabel() ?? null)\"\n      (keydown)=\"onGridKeydown($event)\">\n      @if (caption(); as captionText) {\n        <caption class=\"ea-data-table__caption\">\n          {{ captionText }}\n        </caption>\n      }\n      <thead class=\"ea-data-table__head\">\n        <tr\n          class=\"ea-data-table__row ea-data-table__row--header\"\n          [attr.role]=\"navigable() ? 'row' : null\">\n          @for (col of columns(); track col.key; let colIndex = $index) {\n            <th\n              scope=\"col\"\n              class=\"ea-data-table__cell ea-data-table__cell--header\"\n              [attr.role]=\"navigable() ? 'columnheader' : null\"\n              [attr.data-ea-cell]=\"navigable() ? '0-' + colIndex : null\"\n              [class.ea-data-table__cell--sortable]=\"col.sortable\"\n              [class.ea-data-table__cell--sorted]=\"\n                sort().column === col.key && sort().direction\n              \"\n              [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n              [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n              [style.width]=\"col.width ?? null\"\n              [attr.aria-sort]=\"\n                sort().column === col.key && sort().direction === 'asc'\n                  ? 'ascending'\n                  : sort().column === col.key && sort().direction === 'desc'\n                    ? 'descending'\n                    : col.sortable\n                      ? 'none'\n                      : null\n              \"\n              (keydown.enter)=\"onHeaderKeydown($event, col)\"\n              (keydown.space)=\"onHeaderKeydown($event, col)\"\n              (focus)=\"onCellFocus(0, colIndex)\"\n              [attr.tabindex]=\"headerTabindex(colIndex)\">\n              @if (col.sortable) {\n                <button\n                  type=\"button\"\n                  class=\"ea-data-table__sort-button\"\n                  [attr.tabindex]=\"navigable() ? -1 : null\"\n                  (click)=\"onHeaderClick(col)\"\n                  (focus)=\"onCellFocus(0, colIndex)\">\n                  @if (col.headerTemplate) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"col.headerTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n                  } @else {\n                    <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n                  }\n                  <span class=\"ea-data-table__sort-icon\">\n                    @if (sort().column === col.key && sort().direction === 'asc') {\n                      <ea-icon-arrow-up />\n                    } @else if (\n                      sort().column === col.key && sort().direction === 'desc'\n                    ) {\n                      <ea-icon-arrow-down />\n                    } @else {\n                      <ea-icon-chevrons-up-down />\n                    }\n                  </span>\n                </button>\n              } @else if (col.headerTemplate) {\n                <ng-container\n                  [ngTemplateOutlet]=\"col.headerTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n              } @else {\n                <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody class=\"ea-data-table__body\">\n        @if (sortedData().length === 0) {\n          <tr\n            class=\"ea-data-table__row ea-data-table__row--empty\"\n            [attr.role]=\"navigable() ? 'row' : null\">\n            <td\n              class=\"ea-data-table__cell ea-data-table__cell--empty\"\n              [attr.role]=\"navigable() ? 'gridcell' : null\"\n              [attr.colspan]=\"columns().length\">\n              <div role=\"status\">\n                @if (noDataTemplate()) {\n                  <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n                } @else {\n                  {{ resolvedNoDataText() }}\n                }\n              </div>\n            </td>\n          </tr>\n        } @else {\n          @for (\n            row of sortedData();\n            track trackByFn($index, row);\n            let rowIndex = $index\n          ) {\n            <tr\n              class=\"ea-data-table__row\"\n              [attr.role]=\"navigable() ? 'row' : null\"\n              [attr.tabindex]=\"rowTabindex()\"\n              (click)=\"onRowActivate(row)\"\n              (keydown.enter)=\"onRowActivate(row, $event)\"\n              (keydown.space)=\"onRowActivate(row, $event)\">\n              @for (col of columns(); track col.key; let colIndex = $index) {\n                <td\n                  class=\"ea-data-table__cell\"\n                  [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n                  [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n                  [style.width]=\"col.width ?? null\"\n                  [attr.role]=\"navigable() ? 'gridcell' : null\"\n                  [attr.data-ea-cell]=\"navigable() ? rowIndex + 1 + '-' + colIndex : null\"\n                  [attr.tabindex]=\"bodyCellTabindex(rowIndex + 1, colIndex)\"\n                  (focus)=\"onCellFocus(rowIndex + 1, colIndex)\">\n                  @if (col.cellTemplate) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"col.cellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: row,\n                        value: getCellValue(row, col.key),\n                      }\" />\n                  } @else if (col.format) {\n                    {{ col.format(getCellValue(row, col.key)) }}\n                  } @else {\n                    {{ getCellValue(row, col.key) }}\n                  }\n                </td>\n              }\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n  <ng-content select=\"ea-paginator\" />\n</div>\n", styles: [".ea-data-table{--ea-data-table-font-size: var(--font-size-md);overflow:hidden;width:100%;border:var(--border-width-thin) solid var(--color-border-subtle);border-radius:var(--radius-lg);background-color:var(--ea-data-table-background-color, var(--color-bg-base))}.ea-data-table__scroll{overflow-x:auto}.ea-data-table--xs{--ea-data-table-font-size: var(--font-size-xs)}.ea-data-table--sm{--ea-data-table-font-size: var(--font-size-sm)}.ea-data-table--md{--ea-data-table-font-size: var(--font-size-md)}.ea-data-table--lg{--ea-data-table-font-size: var(--font-size-lg)}.ea-data-table--xl{--ea-data-table-font-size: var(--font-size-xl)}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--ea-data-table-font-size);color:var(--color-text-primary);table-layout:auto}.ea-data-table__caption{padding:var(--space-2) var(--space-3);text-align:start;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);caption-side:top}.ea-data-table__head{background-color:var(--color-bg-stripe)}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:calc(var(--ea-data-table-font-size) * .75);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-align:start;white-space:nowrap;color:var(--color-text-secondary);border-bottom:var(--border-width-thin) solid var(--color-border-subtle);-webkit-user-select:none;user-select:none}.ea-data-table__cell--sortable{cursor:pointer;transition:var(--transition-colors)}.ea-data-table__cell--sortable:hover{color:var(--color-text-primary);background-color:var(--color-state-hover)}.ea-data-table__cell--sorted{color:var(--color-brand-text)}.ea-data-table__sort-button{display:inline-flex;align-items:center;width:100%;padding:0;margin:0;font:inherit;text-transform:inherit;letter-spacing:inherit;border:none;background:none;color:inherit;cursor:pointer}.ea-data-table__sort-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-data-table__sort-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-data-table__cell--align-center .ea-data-table__sort-button{justify-content:center}.ea-data-table__cell--align-right .ea-data-table__sort-button{justify-content:flex-end}.ea-data-table__header-text{display:inline;vertical-align:middle}.ea-data-table__sort-icon{display:inline-flex;vertical-align:middle;width:1em;height:1em;margin-inline-start:calc(var(--ea-data-table-font-size) * .25);opacity:.5;transition:var(--transition-opacity)}.ea-data-table__cell--sortable:hover .ea-data-table__sort-icon,.ea-data-table__cell--sorted .ea-data-table__sort-icon{opacity:1}.ea-data-table__row{border-bottom:var(--border-width-thin) solid var(--ea-data-table-row-border-color, var(--color-border-subtle));transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom:none}.ea-data-table__cell{text-align:start;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:end}.ea-data-table__cell--empty{text-align:center;color:var(--color-text-tertiary);font-style:italic}.ea-data-table--compact .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .375) calc(var(--ea-data-table-font-size) * .75)}.ea-data-table--comfortable .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .625) var(--ea-data-table-font-size)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--ea-data-table-font-size) calc(var(--ea-data-table-font-size) * 1.5)}.ea-data-table--sticky,.ea-data-table--sticky .ea-data-table__scroll{max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__table{display:flex;flex-direction:column;min-width:calc(var(--ea-data-table-font-size) * 32);max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__head{display:block;flex-shrink:0}.ea-data-table--sticky .ea-data-table__head .ea-data-table__row--header{display:table;width:100%;table-layout:fixed}.ea-data-table--sticky .ea-data-table__body{display:block;overflow-y:auto;flex:1 1 auto;min-height:0}.ea-data-table--sticky .ea-data-table__body .ea-data-table__row{display:table;width:100%;table-layout:fixed}.ea-data-table--striped .ea-data-table__body .ea-data-table__row:nth-child(2n){background-color:var(--ea-data-table-row-stripe-background-color, var(--color-bg-stripe-subtle))}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:var(--ea-data-table-row-hover-background-color, var(--color-state-hover))}@media(forced-colors:active){.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:Highlight;color:HighlightText}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover .ea-data-table__cell--sorted{color:HighlightText}}.ea-data-table--clickable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty){cursor:var(--ea-data-table-row-cursor, pointer)}.ea-data-table--bordered .ea-data-table__cell{border-inline-end:var(--border-width-thin) solid var(--color-border-subtle)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-inline-end:none}.ea-data-table--navigable .ea-data-table__cell:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:calc(-1 * var(--border-width-medium));box-shadow:none}\n"], dependencies: [{ kind: "component", type: ArrowDownIconComponent, selector: "ea-icon-arrow-down" }, { kind: "component", type: ArrowUpIconComponent, selector: "ea-icon-arrow-up" }, { kind: "component", type: ChevronsUpDownIconComponent, selector: "ea-icon-chevrons-up-down" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
@@ -8309,8 +8360,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                         ChevronsUpDownIconComponent,
                         NgClass,
                         NgTemplateOutlet,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-data-table\"\n  [ngClass]=\"hostClasses()\">\n  <div class=\"ea-data-table__scroll\">\n    <table\n      class=\"ea-data-table__table\"\n      [attr.role]=\"navigable() ? 'grid' : null\"\n      (keydown)=\"onGridKeydown($event)\">\n      <thead class=\"ea-data-table__head\">\n        <tr\n          class=\"ea-data-table__row ea-data-table__row--header\"\n          [attr.role]=\"navigable() ? 'row' : null\">\n          @for (col of columns(); track col.key; let colIndex = $index) {\n            <th\n              scope=\"col\"\n              class=\"ea-data-table__cell ea-data-table__cell--header\"\n              [attr.role]=\"navigable() ? 'columnheader' : null\"\n              [attr.data-ea-cell]=\"navigable() ? '0-' + colIndex : null\"\n              [class.ea-data-table__cell--sortable]=\"col.sortable\"\n              [class.ea-data-table__cell--sorted]=\"\n                sort().column === col.key && sort().direction\n              \"\n              [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n              [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n              [style.width]=\"col.width ?? null\"\n              [attr.aria-sort]=\"\n                sort().column === col.key && sort().direction === 'asc'\n                  ? 'ascending'\n                  : sort().column === col.key && sort().direction === 'desc'\n                    ? 'descending'\n                    : col.sortable\n                      ? 'none'\n                      : null\n              \"\n              (keydown.enter)=\"onHeaderKeydown($event, col)\"\n              (keydown.space)=\"onHeaderKeydown($event, col)\"\n              (focus)=\"onCellFocus(0, colIndex)\"\n              [attr.tabindex]=\"headerTabindex(colIndex)\">\n              @if (col.sortable) {\n                <button\n                  type=\"button\"\n                  class=\"ea-data-table__sort-button\"\n                  [attr.tabindex]=\"navigable() ? -1 : null\"\n                  (click)=\"onHeaderClick(col)\"\n                  (focus)=\"onCellFocus(0, colIndex)\">\n                  @if (col.headerTemplate) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"col.headerTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n                  } @else {\n                    <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n                  }\n                  <span class=\"ea-data-table__sort-icon\">\n                    @if (sort().column === col.key && sort().direction === 'asc') {\n                      <ea-icon-arrow-up />\n                    } @else if (\n                      sort().column === col.key && sort().direction === 'desc'\n                    ) {\n                      <ea-icon-arrow-down />\n                    } @else {\n                      <ea-icon-chevrons-up-down />\n                    }\n                  </span>\n                </button>\n              } @else if (col.headerTemplate) {\n                <ng-container\n                  [ngTemplateOutlet]=\"col.headerTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n              } @else {\n                <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody class=\"ea-data-table__body\">\n        @if (sortedData().length === 0) {\n          <tr\n            class=\"ea-data-table__row ea-data-table__row--empty\"\n            [attr.role]=\"navigable() ? 'row' : null\">\n            <td\n              class=\"ea-data-table__cell ea-data-table__cell--empty\"\n              [attr.role]=\"navigable() ? 'gridcell' : null\"\n              [attr.colspan]=\"columns().length\">\n              <div role=\"status\">\n                @if (noDataTemplate()) {\n                  <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n                } @else {\n                  {{ resolvedNoDataText() }}\n                }\n              </div>\n            </td>\n          </tr>\n        } @else {\n          @for (\n            row of sortedData();\n            track trackByFn($index, row);\n            let rowIndex = $index\n          ) {\n            <tr\n              class=\"ea-data-table__row\"\n              [attr.role]=\"navigable() ? 'row' : null\"\n              [attr.tabindex]=\"rowTabindex()\"\n              (click)=\"onRowActivate(row)\"\n              (keydown.enter)=\"onRowActivate(row, $event)\"\n              (keydown.space)=\"onRowActivate(row, $event)\">\n              @for (col of columns(); track col.key; let colIndex = $index) {\n                <td\n                  class=\"ea-data-table__cell\"\n                  [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n                  [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n                  [style.width]=\"col.width ?? null\"\n                  [attr.role]=\"navigable() ? 'gridcell' : null\"\n                  [attr.data-ea-cell]=\"navigable() ? rowIndex + 1 + '-' + colIndex : null\"\n                  [attr.tabindex]=\"bodyCellTabindex(rowIndex + 1, colIndex)\"\n                  (focus)=\"onCellFocus(rowIndex + 1, colIndex)\">\n                  @if (col.cellTemplate) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"col.cellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: row,\n                        value: getCellValue(row, col.key),\n                      }\" />\n                  } @else if (col.format) {\n                    {{ col.format(getCellValue(row, col.key)) }}\n                  } @else {\n                    {{ getCellValue(row, col.key) }}\n                  }\n                </td>\n              }\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n  <ng-content select=\"ea-paginator\" />\n</div>\n", styles: [".ea-data-table{--ea-data-table-font-size: var(--font-size-md);overflow:hidden;width:100%;border:var(--border-width-thin) solid var(--color-border-subtle);border-radius:var(--radius-lg);background-color:var(--ea-data-table-background-color, var(--color-bg-base))}.ea-data-table__scroll{overflow-x:auto}.ea-data-table--xs{--ea-data-table-font-size: var(--font-size-xs)}.ea-data-table--sm{--ea-data-table-font-size: var(--font-size-sm)}.ea-data-table--md{--ea-data-table-font-size: var(--font-size-md)}.ea-data-table--lg{--ea-data-table-font-size: var(--font-size-lg)}.ea-data-table--xl{--ea-data-table-font-size: var(--font-size-xl)}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--ea-data-table-font-size);color:var(--color-text-primary);table-layout:auto}.ea-data-table__head{background-color:var(--color-bg-stripe)}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:calc(var(--ea-data-table-font-size) * .75);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-align:start;white-space:nowrap;color:var(--color-text-secondary);border-bottom:var(--border-width-thin) solid var(--color-border-subtle);-webkit-user-select:none;user-select:none}.ea-data-table__cell--sortable{cursor:pointer;transition:var(--transition-colors)}.ea-data-table__cell--sortable:hover{color:var(--color-text-primary);background-color:var(--color-state-hover)}.ea-data-table__cell--sorted{color:var(--color-brand-text)}.ea-data-table__sort-button{display:inline-flex;align-items:center;width:100%;padding:0;margin:0;font:inherit;text-transform:inherit;letter-spacing:inherit;border:none;background:none;color:inherit;cursor:pointer}.ea-data-table__sort-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-data-table__sort-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-data-table__cell--align-center .ea-data-table__sort-button{justify-content:center}.ea-data-table__cell--align-right .ea-data-table__sort-button{justify-content:flex-end}.ea-data-table__header-text{display:inline;vertical-align:middle}.ea-data-table__sort-icon{display:inline-flex;vertical-align:middle;width:1em;height:1em;margin-inline-start:calc(var(--ea-data-table-font-size) * .25);opacity:.5;transition:var(--transition-opacity)}.ea-data-table__cell--sortable:hover .ea-data-table__sort-icon,.ea-data-table__cell--sorted .ea-data-table__sort-icon{opacity:1}.ea-data-table__row{border-bottom:var(--border-width-thin) solid var(--ea-data-table-row-border-color, var(--color-border-subtle));transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom:none}.ea-data-table__cell{text-align:start;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:end}.ea-data-table__cell--empty{text-align:center;color:var(--color-text-tertiary);font-style:italic}.ea-data-table--compact .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .375) calc(var(--ea-data-table-font-size) * .75)}.ea-data-table--comfortable .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .625) var(--ea-data-table-font-size)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--ea-data-table-font-size) calc(var(--ea-data-table-font-size) * 1.5)}.ea-data-table--sticky,.ea-data-table--sticky .ea-data-table__scroll{max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__table{display:flex;flex-direction:column;min-width:calc(var(--ea-data-table-font-size) * 32);max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__head{display:block;flex-shrink:0}.ea-data-table--sticky .ea-data-table__head .ea-data-table__row--header{display:table;width:100%;table-layout:fixed}.ea-data-table--sticky .ea-data-table__body{display:block;overflow-y:auto;flex:1 1 auto;min-height:0}.ea-data-table--sticky .ea-data-table__body .ea-data-table__row{display:table;width:100%;table-layout:fixed}.ea-data-table--striped .ea-data-table__body .ea-data-table__row:nth-child(2n){background-color:var(--ea-data-table-row-stripe-background-color, var(--color-bg-stripe-subtle))}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:var(--ea-data-table-row-hover-background-color, var(--color-state-hover))}@media(forced-colors:active){.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:Highlight;color:HighlightText}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover .ea-data-table__cell--sorted{color:HighlightText}}.ea-data-table--clickable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty){cursor:var(--ea-data-table-row-cursor, pointer)}.ea-data-table--bordered .ea-data-table__cell{border-inline-end:var(--border-width-thin) solid var(--color-border-subtle)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-inline-end:none}.ea-data-table--navigable .ea-data-table__cell:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:calc(-1 * var(--border-width-medium));box-shadow:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], noDataText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataText", required: false }] }], navigable: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigable", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], sorted: [{ type: i0.Output, args: ["sorted"] }], rowActivate: [{ type: i0.Output, args: ["rowActivate"] }], noDataTemplate: [{ type: i0.ContentChild, args: ['noData', { isSignal: true }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-data-table\"\n  [ngClass]=\"hostClasses()\">\n  <div class=\"ea-data-table__scroll\">\n    <table\n      class=\"ea-data-table__table\"\n      [attr.role]=\"navigable() ? 'grid' : null\"\n      [attr.aria-label]=\"caption() ? null : (ariaLabel() ?? null)\"\n      (keydown)=\"onGridKeydown($event)\">\n      @if (caption(); as captionText) {\n        <caption class=\"ea-data-table__caption\">\n          {{ captionText }}\n        </caption>\n      }\n      <thead class=\"ea-data-table__head\">\n        <tr\n          class=\"ea-data-table__row ea-data-table__row--header\"\n          [attr.role]=\"navigable() ? 'row' : null\">\n          @for (col of columns(); track col.key; let colIndex = $index) {\n            <th\n              scope=\"col\"\n              class=\"ea-data-table__cell ea-data-table__cell--header\"\n              [attr.role]=\"navigable() ? 'columnheader' : null\"\n              [attr.data-ea-cell]=\"navigable() ? '0-' + colIndex : null\"\n              [class.ea-data-table__cell--sortable]=\"col.sortable\"\n              [class.ea-data-table__cell--sorted]=\"\n                sort().column === col.key && sort().direction\n              \"\n              [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n              [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n              [style.width]=\"col.width ?? null\"\n              [attr.aria-sort]=\"\n                sort().column === col.key && sort().direction === 'asc'\n                  ? 'ascending'\n                  : sort().column === col.key && sort().direction === 'desc'\n                    ? 'descending'\n                    : col.sortable\n                      ? 'none'\n                      : null\n              \"\n              (keydown.enter)=\"onHeaderKeydown($event, col)\"\n              (keydown.space)=\"onHeaderKeydown($event, col)\"\n              (focus)=\"onCellFocus(0, colIndex)\"\n              [attr.tabindex]=\"headerTabindex(colIndex)\">\n              @if (col.sortable) {\n                <button\n                  type=\"button\"\n                  class=\"ea-data-table__sort-button\"\n                  [attr.tabindex]=\"navigable() ? -1 : null\"\n                  (click)=\"onHeaderClick(col)\"\n                  (focus)=\"onCellFocus(0, colIndex)\">\n                  @if (col.headerTemplate) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"col.headerTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n                  } @else {\n                    <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n                  }\n                  <span class=\"ea-data-table__sort-icon\">\n                    @if (sort().column === col.key && sort().direction === 'asc') {\n                      <ea-icon-arrow-up />\n                    } @else if (\n                      sort().column === col.key && sort().direction === 'desc'\n                    ) {\n                      <ea-icon-arrow-down />\n                    } @else {\n                      <ea-icon-chevrons-up-down />\n                    }\n                  </span>\n                </button>\n              } @else if (col.headerTemplate) {\n                <ng-container\n                  [ngTemplateOutlet]=\"col.headerTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n              } @else {\n                <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody class=\"ea-data-table__body\">\n        @if (sortedData().length === 0) {\n          <tr\n            class=\"ea-data-table__row ea-data-table__row--empty\"\n            [attr.role]=\"navigable() ? 'row' : null\">\n            <td\n              class=\"ea-data-table__cell ea-data-table__cell--empty\"\n              [attr.role]=\"navigable() ? 'gridcell' : null\"\n              [attr.colspan]=\"columns().length\">\n              <div role=\"status\">\n                @if (noDataTemplate()) {\n                  <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n                } @else {\n                  {{ resolvedNoDataText() }}\n                }\n              </div>\n            </td>\n          </tr>\n        } @else {\n          @for (\n            row of sortedData();\n            track trackByFn($index, row);\n            let rowIndex = $index\n          ) {\n            <tr\n              class=\"ea-data-table__row\"\n              [attr.role]=\"navigable() ? 'row' : null\"\n              [attr.tabindex]=\"rowTabindex()\"\n              (click)=\"onRowActivate(row)\"\n              (keydown.enter)=\"onRowActivate(row, $event)\"\n              (keydown.space)=\"onRowActivate(row, $event)\">\n              @for (col of columns(); track col.key; let colIndex = $index) {\n                <td\n                  class=\"ea-data-table__cell\"\n                  [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n                  [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n                  [style.width]=\"col.width ?? null\"\n                  [attr.role]=\"navigable() ? 'gridcell' : null\"\n                  [attr.data-ea-cell]=\"navigable() ? rowIndex + 1 + '-' + colIndex : null\"\n                  [attr.tabindex]=\"bodyCellTabindex(rowIndex + 1, colIndex)\"\n                  (focus)=\"onCellFocus(rowIndex + 1, colIndex)\">\n                  @if (col.cellTemplate) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"col.cellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: row,\n                        value: getCellValue(row, col.key),\n                      }\" />\n                  } @else if (col.format) {\n                    {{ col.format(getCellValue(row, col.key)) }}\n                  } @else {\n                    {{ getCellValue(row, col.key) }}\n                  }\n                </td>\n              }\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n  <ng-content select=\"ea-paginator\" />\n</div>\n", styles: [".ea-data-table{--ea-data-table-font-size: var(--font-size-md);overflow:hidden;width:100%;border:var(--border-width-thin) solid var(--color-border-subtle);border-radius:var(--radius-lg);background-color:var(--ea-data-table-background-color, var(--color-bg-base))}.ea-data-table__scroll{overflow-x:auto}.ea-data-table--xs{--ea-data-table-font-size: var(--font-size-xs)}.ea-data-table--sm{--ea-data-table-font-size: var(--font-size-sm)}.ea-data-table--md{--ea-data-table-font-size: var(--font-size-md)}.ea-data-table--lg{--ea-data-table-font-size: var(--font-size-lg)}.ea-data-table--xl{--ea-data-table-font-size: var(--font-size-xl)}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--ea-data-table-font-size);color:var(--color-text-primary);table-layout:auto}.ea-data-table__caption{padding:var(--space-2) var(--space-3);text-align:start;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);caption-side:top}.ea-data-table__head{background-color:var(--color-bg-stripe)}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:calc(var(--ea-data-table-font-size) * .75);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-align:start;white-space:nowrap;color:var(--color-text-secondary);border-bottom:var(--border-width-thin) solid var(--color-border-subtle);-webkit-user-select:none;user-select:none}.ea-data-table__cell--sortable{cursor:pointer;transition:var(--transition-colors)}.ea-data-table__cell--sortable:hover{color:var(--color-text-primary);background-color:var(--color-state-hover)}.ea-data-table__cell--sorted{color:var(--color-brand-text)}.ea-data-table__sort-button{display:inline-flex;align-items:center;width:100%;padding:0;margin:0;font:inherit;text-transform:inherit;letter-spacing:inherit;border:none;background:none;color:inherit;cursor:pointer}.ea-data-table__sort-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-data-table__sort-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-data-table__cell--align-center .ea-data-table__sort-button{justify-content:center}.ea-data-table__cell--align-right .ea-data-table__sort-button{justify-content:flex-end}.ea-data-table__header-text{display:inline;vertical-align:middle}.ea-data-table__sort-icon{display:inline-flex;vertical-align:middle;width:1em;height:1em;margin-inline-start:calc(var(--ea-data-table-font-size) * .25);opacity:.5;transition:var(--transition-opacity)}.ea-data-table__cell--sortable:hover .ea-data-table__sort-icon,.ea-data-table__cell--sorted .ea-data-table__sort-icon{opacity:1}.ea-data-table__row{border-bottom:var(--border-width-thin) solid var(--ea-data-table-row-border-color, var(--color-border-subtle));transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom:none}.ea-data-table__cell{text-align:start;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:end}.ea-data-table__cell--empty{text-align:center;color:var(--color-text-tertiary);font-style:italic}.ea-data-table--compact .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .375) calc(var(--ea-data-table-font-size) * .75)}.ea-data-table--comfortable .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .625) var(--ea-data-table-font-size)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--ea-data-table-font-size) calc(var(--ea-data-table-font-size) * 1.5)}.ea-data-table--sticky,.ea-data-table--sticky .ea-data-table__scroll{max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__table{display:flex;flex-direction:column;min-width:calc(var(--ea-data-table-font-size) * 32);max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__head{display:block;flex-shrink:0}.ea-data-table--sticky .ea-data-table__head .ea-data-table__row--header{display:table;width:100%;table-layout:fixed}.ea-data-table--sticky .ea-data-table__body{display:block;overflow-y:auto;flex:1 1 auto;min-height:0}.ea-data-table--sticky .ea-data-table__body .ea-data-table__row{display:table;width:100%;table-layout:fixed}.ea-data-table--striped .ea-data-table__body .ea-data-table__row:nth-child(2n){background-color:var(--ea-data-table-row-stripe-background-color, var(--color-bg-stripe-subtle))}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:var(--ea-data-table-row-hover-background-color, var(--color-state-hover))}@media(forced-colors:active){.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:Highlight;color:HighlightText}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover .ea-data-table__cell--sorted{color:HighlightText}}.ea-data-table--clickable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty){cursor:var(--ea-data-table-row-cursor, pointer)}.ea-data-table--bordered .ea-data-table__cell{border-inline-end:var(--border-width-thin) solid var(--color-border-subtle)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-inline-end:none}.ea-data-table--navigable .ea-data-table__cell:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:calc(-1 * var(--border-width-medium));box-shadow:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], noDataText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataText", required: false }] }], navigable: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigable", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], sorted: [{ type: i0.Output, args: ["sorted"] }], rowActivate: [{ type: i0.Output, args: ["rowActivate"] }], noDataTemplate: [{ type: i0.ContentChild, args: ['noData', { isSignal: true }] }] } });
 
 /**
  * Verification code entry made up of one input per digit. Auto-advances on
@@ -11227,7 +11278,7 @@ class FileUploaderComponent {
                 useExisting: forwardRef(() => FileUploaderComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "fileInputEl", first: true, predicate: ["fileInputEl"], descendants: true, isSignal: true }, { propertyName: "dropzoneEl", first: true, predicate: ["dropzoneEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-file-uploader-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-file-uploader-field__file-input\"\n    [id]=\"id()\"\n    [multiple]=\"multiple()\"\n    [attr.accept]=\"accept() ?? null\"\n    [disabled]=\"isDisabled()\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    (change)=\"onFileSelected($event)\" />\n\n  <button\n    #dropzoneEl\n    type=\"button\"\n    class=\"ea-file-uploader-field__dropzone\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-label]=\"label() ?? promptText()\"\n    [attr.aria-required]=\"required() || null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"openFilePicker()\"\n    (keydown)=\"onDropzoneKeydown($event)\"\n    (focus)=\"onDropzoneFocus()\"\n    (blur)=\"onDropzoneBlur()\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (drop)=\"onDrop($event)\">\n    <span\n      class=\"ea-file-uploader-field__upload-icon\"\n      aria-hidden=\"true\">\n      <ng-content select=\"[icon]\">\n        <ea-icon-upload-cloud />\n      </ng-content>\n    </span>\n    <span class=\"ea-file-uploader-field__prompt\">{{ promptText() }}</span>\n    @if (constraintsText(); as c) {\n      <span\n        class=\"ea-file-uploader-field__constraints\"\n        [id]=\"constraintsId()\">\n        {{ c }}\n      </span>\n    }\n  </button>\n\n  @if (showFileList() && value().length) {\n    <ul\n      class=\"ea-file-uploader-field__list\"\n      aria-live=\"polite\"\n      aria-relevant=\"additions removals\"\n      [attr.aria-label]=\"i18n.messages().fileUploader.fileListLabel\">\n      @for (file of value(); track trackFile($index, file)) {\n        <li class=\"ea-file-uploader-field__item\">\n          <span\n            class=\"ea-file-uploader-field__type-icon\"\n            aria-hidden=\"true\">\n            @switch (iconKey(file)) {\n              @case ('image') {\n                <ea-icon-image />\n              }\n              @case ('film') {\n                <ea-icon-film />\n              }\n              @case ('music') {\n                <ea-icon-music />\n              }\n              @case ('archive') {\n                <ea-icon-archive />\n              }\n              @case ('text') {\n                <ea-icon-file-text />\n              }\n              @default {\n                <ea-icon-file />\n              }\n            }\n          </span>\n          <div class=\"ea-file-uploader-field__meta\">\n            <span\n              class=\"ea-file-uploader-field__name\"\n              [id]=\"id() + '-file-' + $index\"\n              [title]=\"file.name\">\n              <bdi>{{ file.name }}</bdi>\n            </span>\n            <span class=\"ea-file-uploader-field__size\">\n              <bdi>{{ formatBytes(file.size) }}</bdi>\n            </span>\n            @if (progressFor(file); as p) {\n              <div\n                class=\"ea-file-uploader-field__progress\"\n                role=\"progressbar\"\n                [attr.aria-labelledby]=\"id() + '-file-' + $index\"\n                [attr.aria-valuenow]=\"p\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\">\n                <div\n                  class=\"ea-file-uploader-field__progress-bar\"\n                  [style.width.%]=\"p\">\n                </div>\n              </div>\n            }\n          </div>\n          <button\n            type=\"button\"\n            class=\"ea-file-uploader-field__remove\"\n            [attr.aria-label]=\"i18n.messages().fileUploader.removeFile(file.name)\"\n            [disabled]=\"isDisabled()\"\n            (click)=\"removeFile(file)\">\n            <ea-icon-x />\n          </button>\n        </li>\n      }\n    </ul>\n  }\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:block}.ea-file-uploader-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-file-uploader-field--xs{font-size:var(--font-size-xs)}.ea-file-uploader-field--sm{font-size:var(--font-size-sm)}.ea-file-uploader-field--md{font-size:var(--font-size-md)}.ea-file-uploader-field--lg{font-size:var(--font-size-lg)}.ea-file-uploader-field--xl{font-size:var(--font-size-xl)}.ea-file-uploader-field__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.ea-file-uploader-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;width:100%;padding:1.5em;font-family:inherit;font-size:.875em;line-height:var(--line-height-normal);color:var(--color-text-tertiary);text-align:center;border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);cursor:pointer;transition:var(--transition-colors);appearance:none}.ea-file-uploader-field__dropzone:hover:not(:disabled){border-color:var(--color-border-focus);background-color:var(--color-state-hover);color:var(--color-text-secondary)}.ea-file-uploader-field__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-file-uploader-field__dropzone:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__dropzone:disabled{cursor:not-allowed;opacity:.6}.ea-file-uploader-field__upload-icon{display:inline-flex;font-size:2.5em;opacity:.7}.ea-file-uploader-field__prompt{font-weight:var(--font-weight-medium)}.ea-file-uploader-field__constraints{font-size:var(--text-helper-size);line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:var(--color-primary-500);background-color:var(--color-primary-50);color:var(--color-primary-600)}@media(forced-colors:active){.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:Highlight}}.ea-file-uploader-field--error .ea-file-uploader-field__dropzone{border-color:var(--color-error-default)}.ea-file-uploader-field__list{display:flex;flex-direction:column;gap:.25em;padding:0;margin:0;list-style:none}.ea-file-uploader-field__item{display:flex;align-items:center;gap:.75em;padding:.5em .75em;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background-color:var(--color-bg-base)}.ea-file-uploader-field__type-icon{display:inline-flex;flex-shrink:0;width:1.25em;height:1.25em;color:var(--color-text-secondary)}.ea-file-uploader-field__type-icon>*{width:100%;height:100%}.ea-file-uploader-field__meta{display:flex;flex-direction:column;gap:.125em;flex:1 1 auto;min-width:0}.ea-file-uploader-field__name{overflow:hidden;font-size:.875em;text-overflow:ellipsis;color:var(--color-text-primary);white-space:nowrap}.ea-file-uploader-field__size{font-size:var(--text-helper-size);line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field__progress{overflow:hidden;width:100%;height:.25em;margin-top:var(--space-1);border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-file-uploader-field__progress-bar{height:100%;border-radius:inherit;background-color:var(--color-primary-500);transition:width var(--duration-normal) var(--ease-out)}.ea-file-uploader-field__remove{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-file-uploader-field__remove>*{font-size:1.25em}.ea-file-uploader-field__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-file-uploader-field__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-file-uploader-field__remove:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__remove:disabled{cursor:not-allowed;opacity:.5}.ea-file-uploader-field__remove ea-icon-x{width:1em;height:1em}\n"], dependencies: [{ kind: "component", type: ArchiveIconComponent, selector: "ea-icon-archive" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "component", type: FileIconComponent, selector: "ea-icon-file" }, { kind: "component", type: FileTextIconComponent, selector: "ea-icon-file-text" }, { kind: "component", type: FilmIconComponent, selector: "ea-icon-film" }, { kind: "component", type: ImageIconComponent, selector: "ea-icon-image" }, { kind: "component", type: MusicIconComponent, selector: "ea-icon-music" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UploadCloudIconComponent, selector: "ea-icon-upload-cloud" }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "fileInputEl", first: true, predicate: ["fileInputEl"], descendants: true, isSignal: true }, { propertyName: "dropzoneEl", first: true, predicate: ["dropzoneEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-file-uploader-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-file-uploader-field__file-input\"\n    [id]=\"id()\"\n    [multiple]=\"multiple()\"\n    [attr.accept]=\"accept() ?? null\"\n    [disabled]=\"isDisabled()\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    (change)=\"onFileSelected($event)\" />\n\n  <button\n    #dropzoneEl\n    type=\"button\"\n    class=\"ea-file-uploader-field__dropzone\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-label]=\"label() ?? promptText()\"\n    [attr.aria-required]=\"required() || null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"openFilePicker()\"\n    (keydown)=\"onDropzoneKeydown($event)\"\n    (focus)=\"onDropzoneFocus()\"\n    (blur)=\"onDropzoneBlur()\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (drop)=\"onDrop($event)\">\n    <span\n      class=\"ea-file-uploader-field__upload-icon\"\n      aria-hidden=\"true\">\n      <ng-content select=\"[icon]\">\n        <ea-icon-upload-cloud />\n      </ng-content>\n    </span>\n    <span class=\"ea-file-uploader-field__prompt\">{{ promptText() }}</span>\n    @if (constraintsText(); as c) {\n      <span\n        class=\"ea-file-uploader-field__constraints\"\n        [id]=\"constraintsId()\">\n        {{ c }}\n      </span>\n    }\n  </button>\n\n  @if (showFileList() && value().length) {\n    <ul\n      class=\"ea-file-uploader-field__list\"\n      aria-live=\"polite\"\n      aria-relevant=\"additions removals\"\n      [attr.aria-label]=\"i18n.messages().fileUploader.fileListLabel\">\n      @for (file of value(); track trackFile($index, file)) {\n        <li class=\"ea-file-uploader-field__item\">\n          <span\n            class=\"ea-file-uploader-field__type-icon\"\n            aria-hidden=\"true\">\n            @switch (iconKey(file)) {\n              @case ('image') {\n                <ea-icon-image />\n              }\n              @case ('film') {\n                <ea-icon-film />\n              }\n              @case ('music') {\n                <ea-icon-music />\n              }\n              @case ('archive') {\n                <ea-icon-archive />\n              }\n              @case ('text') {\n                <ea-icon-file-text />\n              }\n              @default {\n                <ea-icon-file />\n              }\n            }\n          </span>\n          <div class=\"ea-file-uploader-field__meta\">\n            <span\n              class=\"ea-file-uploader-field__name\"\n              [id]=\"id() + '-file-' + $index\"\n              [title]=\"file.name\">\n              <bdi>{{ file.name }}</bdi>\n            </span>\n            <span class=\"ea-file-uploader-field__size\">\n              <bdi>{{ formatBytes(file.size) }}</bdi>\n            </span>\n            @if (progressFor(file); as p) {\n              <div\n                class=\"ea-file-uploader-field__progress\"\n                role=\"progressbar\"\n                [attr.aria-labelledby]=\"id() + '-file-' + $index\"\n                [attr.aria-valuenow]=\"p\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\">\n                <div\n                  class=\"ea-file-uploader-field__progress-bar\"\n                  [style.width.%]=\"p\">\n                </div>\n              </div>\n            }\n          </div>\n          <button\n            type=\"button\"\n            class=\"ea-file-uploader-field__remove\"\n            [attr.aria-label]=\"i18n.messages().fileUploader.removeFile(file.name)\"\n            [disabled]=\"isDisabled()\"\n            (click)=\"removeFile(file)\">\n            <ea-icon-x />\n          </button>\n        </li>\n      }\n    </ul>\n  }\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:block}.ea-file-uploader-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-file-uploader-field--xs{font-size:var(--font-size-xs)}.ea-file-uploader-field--sm{font-size:var(--font-size-sm)}.ea-file-uploader-field--md{font-size:var(--font-size-md)}.ea-file-uploader-field--lg{font-size:var(--font-size-lg)}.ea-file-uploader-field--xl{font-size:var(--font-size-xl)}.ea-file-uploader-field__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.ea-file-uploader-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;width:100%;padding:1.5em;font-family:inherit;font-size:.875em;line-height:var(--line-height-normal);color:var(--color-text-tertiary);text-align:center;border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);cursor:pointer;transition:var(--transition-colors);appearance:none}.ea-file-uploader-field__dropzone:hover:not(:disabled){border-color:var(--color-border-focus);background-color:var(--color-state-hover);color:var(--color-text-secondary)}.ea-file-uploader-field__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-file-uploader-field__dropzone:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__dropzone:disabled{cursor:not-allowed;opacity:.6}.ea-file-uploader-field__upload-icon{display:inline-flex;font-size:2.5em;opacity:.7}.ea-file-uploader-field__prompt{font-weight:var(--font-weight-medium)}.ea-file-uploader-field__constraints{font-size:var(--text-helper-size);line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:var(--color-border-focus);background-color:var(--color-brand-subtle);color:var(--color-brand-default)}@media(forced-colors:active){.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:Highlight}}.ea-file-uploader-field--error .ea-file-uploader-field__dropzone{border-color:var(--color-error-default)}.ea-file-uploader-field__list{display:flex;flex-direction:column;gap:.25em;padding:0;margin:0;list-style:none}.ea-file-uploader-field__item{display:flex;align-items:center;gap:.75em;padding:.5em .75em;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background-color:var(--color-bg-base)}.ea-file-uploader-field__type-icon{display:inline-flex;flex-shrink:0;width:1.25em;height:1.25em;color:var(--color-text-secondary)}.ea-file-uploader-field__type-icon>*{width:100%;height:100%}.ea-file-uploader-field__meta{display:flex;flex-direction:column;gap:.125em;flex:1 1 auto;min-width:0}.ea-file-uploader-field__name{overflow:hidden;font-size:.875em;text-overflow:ellipsis;color:var(--color-text-primary);white-space:nowrap}.ea-file-uploader-field__size{font-size:var(--text-helper-size);line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field__progress{overflow:hidden;width:100%;height:.25em;margin-top:var(--space-1);border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-file-uploader-field__progress-bar{height:100%;border-radius:inherit;background-color:var(--color-brand-default);transition:width var(--duration-normal) var(--ease-out)}.ea-file-uploader-field__remove{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-file-uploader-field__remove>*{font-size:1.25em}.ea-file-uploader-field__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-file-uploader-field__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-file-uploader-field__remove:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__remove:disabled{cursor:not-allowed;opacity:.5}.ea-file-uploader-field__remove ea-icon-x{width:1em;height:1em}\n"], dependencies: [{ kind: "component", type: ArchiveIconComponent, selector: "ea-icon-archive" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "component", type: FileIconComponent, selector: "ea-icon-file" }, { kind: "component", type: FileTextIconComponent, selector: "ea-icon-file-text" }, { kind: "component", type: FilmIconComponent, selector: "ea-icon-film" }, { kind: "component", type: ImageIconComponent, selector: "ea-icon-image" }, { kind: "component", type: MusicIconComponent, selector: "ea-icon-music" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UploadCloudIconComponent, selector: "ea-icon-upload-cloud" }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FileUploaderComponent, decorators: [{
             type: Component,
@@ -11249,7 +11300,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                             useExisting: forwardRef(() => FileUploaderComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"ea-file-uploader-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-file-uploader-field__file-input\"\n    [id]=\"id()\"\n    [multiple]=\"multiple()\"\n    [attr.accept]=\"accept() ?? null\"\n    [disabled]=\"isDisabled()\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    (change)=\"onFileSelected($event)\" />\n\n  <button\n    #dropzoneEl\n    type=\"button\"\n    class=\"ea-file-uploader-field__dropzone\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-label]=\"label() ?? promptText()\"\n    [attr.aria-required]=\"required() || null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"openFilePicker()\"\n    (keydown)=\"onDropzoneKeydown($event)\"\n    (focus)=\"onDropzoneFocus()\"\n    (blur)=\"onDropzoneBlur()\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (drop)=\"onDrop($event)\">\n    <span\n      class=\"ea-file-uploader-field__upload-icon\"\n      aria-hidden=\"true\">\n      <ng-content select=\"[icon]\">\n        <ea-icon-upload-cloud />\n      </ng-content>\n    </span>\n    <span class=\"ea-file-uploader-field__prompt\">{{ promptText() }}</span>\n    @if (constraintsText(); as c) {\n      <span\n        class=\"ea-file-uploader-field__constraints\"\n        [id]=\"constraintsId()\">\n        {{ c }}\n      </span>\n    }\n  </button>\n\n  @if (showFileList() && value().length) {\n    <ul\n      class=\"ea-file-uploader-field__list\"\n      aria-live=\"polite\"\n      aria-relevant=\"additions removals\"\n      [attr.aria-label]=\"i18n.messages().fileUploader.fileListLabel\">\n      @for (file of value(); track trackFile($index, file)) {\n        <li class=\"ea-file-uploader-field__item\">\n          <span\n            class=\"ea-file-uploader-field__type-icon\"\n            aria-hidden=\"true\">\n            @switch (iconKey(file)) {\n              @case ('image') {\n                <ea-icon-image />\n              }\n              @case ('film') {\n                <ea-icon-film />\n              }\n              @case ('music') {\n                <ea-icon-music />\n              }\n              @case ('archive') {\n                <ea-icon-archive />\n              }\n              @case ('text') {\n                <ea-icon-file-text />\n              }\n              @default {\n                <ea-icon-file />\n              }\n            }\n          </span>\n          <div class=\"ea-file-uploader-field__meta\">\n            <span\n              class=\"ea-file-uploader-field__name\"\n              [id]=\"id() + '-file-' + $index\"\n              [title]=\"file.name\">\n              <bdi>{{ file.name }}</bdi>\n            </span>\n            <span class=\"ea-file-uploader-field__size\">\n              <bdi>{{ formatBytes(file.size) }}</bdi>\n            </span>\n            @if (progressFor(file); as p) {\n              <div\n                class=\"ea-file-uploader-field__progress\"\n                role=\"progressbar\"\n                [attr.aria-labelledby]=\"id() + '-file-' + $index\"\n                [attr.aria-valuenow]=\"p\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\">\n                <div\n                  class=\"ea-file-uploader-field__progress-bar\"\n                  [style.width.%]=\"p\">\n                </div>\n              </div>\n            }\n          </div>\n          <button\n            type=\"button\"\n            class=\"ea-file-uploader-field__remove\"\n            [attr.aria-label]=\"i18n.messages().fileUploader.removeFile(file.name)\"\n            [disabled]=\"isDisabled()\"\n            (click)=\"removeFile(file)\">\n            <ea-icon-x />\n          </button>\n        </li>\n      }\n    </ul>\n  }\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:block}.ea-file-uploader-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-file-uploader-field--xs{font-size:var(--font-size-xs)}.ea-file-uploader-field--sm{font-size:var(--font-size-sm)}.ea-file-uploader-field--md{font-size:var(--font-size-md)}.ea-file-uploader-field--lg{font-size:var(--font-size-lg)}.ea-file-uploader-field--xl{font-size:var(--font-size-xl)}.ea-file-uploader-field__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.ea-file-uploader-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;width:100%;padding:1.5em;font-family:inherit;font-size:.875em;line-height:var(--line-height-normal);color:var(--color-text-tertiary);text-align:center;border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);cursor:pointer;transition:var(--transition-colors);appearance:none}.ea-file-uploader-field__dropzone:hover:not(:disabled){border-color:var(--color-border-focus);background-color:var(--color-state-hover);color:var(--color-text-secondary)}.ea-file-uploader-field__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-file-uploader-field__dropzone:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__dropzone:disabled{cursor:not-allowed;opacity:.6}.ea-file-uploader-field__upload-icon{display:inline-flex;font-size:2.5em;opacity:.7}.ea-file-uploader-field__prompt{font-weight:var(--font-weight-medium)}.ea-file-uploader-field__constraints{font-size:var(--text-helper-size);line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:var(--color-primary-500);background-color:var(--color-primary-50);color:var(--color-primary-600)}@media(forced-colors:active){.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:Highlight}}.ea-file-uploader-field--error .ea-file-uploader-field__dropzone{border-color:var(--color-error-default)}.ea-file-uploader-field__list{display:flex;flex-direction:column;gap:.25em;padding:0;margin:0;list-style:none}.ea-file-uploader-field__item{display:flex;align-items:center;gap:.75em;padding:.5em .75em;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background-color:var(--color-bg-base)}.ea-file-uploader-field__type-icon{display:inline-flex;flex-shrink:0;width:1.25em;height:1.25em;color:var(--color-text-secondary)}.ea-file-uploader-field__type-icon>*{width:100%;height:100%}.ea-file-uploader-field__meta{display:flex;flex-direction:column;gap:.125em;flex:1 1 auto;min-width:0}.ea-file-uploader-field__name{overflow:hidden;font-size:.875em;text-overflow:ellipsis;color:var(--color-text-primary);white-space:nowrap}.ea-file-uploader-field__size{font-size:var(--text-helper-size);line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field__progress{overflow:hidden;width:100%;height:.25em;margin-top:var(--space-1);border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-file-uploader-field__progress-bar{height:100%;border-radius:inherit;background-color:var(--color-primary-500);transition:width var(--duration-normal) var(--ease-out)}.ea-file-uploader-field__remove{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-file-uploader-field__remove>*{font-size:1.25em}.ea-file-uploader-field__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-file-uploader-field__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-file-uploader-field__remove:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__remove:disabled{cursor:not-allowed;opacity:.5}.ea-file-uploader-field__remove ea-icon-x{width:1em;height:1em}\n"] }]
+                    ], template: "<div\n  class=\"ea-file-uploader-field\"\n  [ngClass]=\"hostClasses()\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-file-uploader-field__file-input\"\n    [id]=\"id()\"\n    [multiple]=\"multiple()\"\n    [attr.accept]=\"accept() ?? null\"\n    [disabled]=\"isDisabled()\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    (change)=\"onFileSelected($event)\" />\n\n  <button\n    #dropzoneEl\n    type=\"button\"\n    class=\"ea-file-uploader-field__dropzone\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-label]=\"label() ?? promptText()\"\n    [attr.aria-required]=\"required() || null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"openFilePicker()\"\n    (keydown)=\"onDropzoneKeydown($event)\"\n    (focus)=\"onDropzoneFocus()\"\n    (blur)=\"onDropzoneBlur()\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (drop)=\"onDrop($event)\">\n    <span\n      class=\"ea-file-uploader-field__upload-icon\"\n      aria-hidden=\"true\">\n      <ng-content select=\"[icon]\">\n        <ea-icon-upload-cloud />\n      </ng-content>\n    </span>\n    <span class=\"ea-file-uploader-field__prompt\">{{ promptText() }}</span>\n    @if (constraintsText(); as c) {\n      <span\n        class=\"ea-file-uploader-field__constraints\"\n        [id]=\"constraintsId()\">\n        {{ c }}\n      </span>\n    }\n  </button>\n\n  @if (showFileList() && value().length) {\n    <ul\n      class=\"ea-file-uploader-field__list\"\n      aria-live=\"polite\"\n      aria-relevant=\"additions removals\"\n      [attr.aria-label]=\"i18n.messages().fileUploader.fileListLabel\">\n      @for (file of value(); track trackFile($index, file)) {\n        <li class=\"ea-file-uploader-field__item\">\n          <span\n            class=\"ea-file-uploader-field__type-icon\"\n            aria-hidden=\"true\">\n            @switch (iconKey(file)) {\n              @case ('image') {\n                <ea-icon-image />\n              }\n              @case ('film') {\n                <ea-icon-film />\n              }\n              @case ('music') {\n                <ea-icon-music />\n              }\n              @case ('archive') {\n                <ea-icon-archive />\n              }\n              @case ('text') {\n                <ea-icon-file-text />\n              }\n              @default {\n                <ea-icon-file />\n              }\n            }\n          </span>\n          <div class=\"ea-file-uploader-field__meta\">\n            <span\n              class=\"ea-file-uploader-field__name\"\n              [id]=\"id() + '-file-' + $index\"\n              [title]=\"file.name\">\n              <bdi>{{ file.name }}</bdi>\n            </span>\n            <span class=\"ea-file-uploader-field__size\">\n              <bdi>{{ formatBytes(file.size) }}</bdi>\n            </span>\n            @if (progressFor(file); as p) {\n              <div\n                class=\"ea-file-uploader-field__progress\"\n                role=\"progressbar\"\n                [attr.aria-labelledby]=\"id() + '-file-' + $index\"\n                [attr.aria-valuenow]=\"p\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\">\n                <div\n                  class=\"ea-file-uploader-field__progress-bar\"\n                  [style.width.%]=\"p\">\n                </div>\n              </div>\n            }\n          </div>\n          <button\n            type=\"button\"\n            class=\"ea-file-uploader-field__remove\"\n            [attr.aria-label]=\"i18n.messages().fileUploader.removeFile(file.name)\"\n            [disabled]=\"isDisabled()\"\n            (click)=\"removeFile(file)\">\n            <ea-icon-x />\n          </button>\n        </li>\n      }\n    </ul>\n  }\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:block}.ea-file-uploader-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-file-uploader-field--xs{font-size:var(--font-size-xs)}.ea-file-uploader-field--sm{font-size:var(--font-size-sm)}.ea-file-uploader-field--md{font-size:var(--font-size-md)}.ea-file-uploader-field--lg{font-size:var(--font-size-lg)}.ea-file-uploader-field--xl{font-size:var(--font-size-xl)}.ea-file-uploader-field__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.ea-file-uploader-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;width:100%;padding:1.5em;font-family:inherit;font-size:.875em;line-height:var(--line-height-normal);color:var(--color-text-tertiary);text-align:center;border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);cursor:pointer;transition:var(--transition-colors);appearance:none}.ea-file-uploader-field__dropzone:hover:not(:disabled){border-color:var(--color-border-focus);background-color:var(--color-state-hover);color:var(--color-text-secondary)}.ea-file-uploader-field__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-file-uploader-field__dropzone:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__dropzone:disabled{cursor:not-allowed;opacity:.6}.ea-file-uploader-field__upload-icon{display:inline-flex;font-size:2.5em;opacity:.7}.ea-file-uploader-field__prompt{font-weight:var(--font-weight-medium)}.ea-file-uploader-field__constraints{font-size:var(--text-helper-size);line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:var(--color-border-focus);background-color:var(--color-brand-subtle);color:var(--color-brand-default)}@media(forced-colors:active){.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:Highlight}}.ea-file-uploader-field--error .ea-file-uploader-field__dropzone{border-color:var(--color-error-default)}.ea-file-uploader-field__list{display:flex;flex-direction:column;gap:.25em;padding:0;margin:0;list-style:none}.ea-file-uploader-field__item{display:flex;align-items:center;gap:.75em;padding:.5em .75em;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background-color:var(--color-bg-base)}.ea-file-uploader-field__type-icon{display:inline-flex;flex-shrink:0;width:1.25em;height:1.25em;color:var(--color-text-secondary)}.ea-file-uploader-field__type-icon>*{width:100%;height:100%}.ea-file-uploader-field__meta{display:flex;flex-direction:column;gap:.125em;flex:1 1 auto;min-width:0}.ea-file-uploader-field__name{overflow:hidden;font-size:.875em;text-overflow:ellipsis;color:var(--color-text-primary);white-space:nowrap}.ea-file-uploader-field__size{font-size:var(--text-helper-size);line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field__progress{overflow:hidden;width:100%;height:.25em;margin-top:var(--space-1);border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-file-uploader-field__progress-bar{height:100%;border-radius:inherit;background-color:var(--color-brand-default);transition:width var(--duration-normal) var(--ease-out)}.ea-file-uploader-field__remove{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-file-uploader-field__remove>*{font-size:1.25em}.ea-file-uploader-field__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-file-uploader-field__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-file-uploader-field__remove:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-file-uploader-field__remove:disabled{cursor:not-allowed;opacity:.5}.ea-file-uploader-field__remove ea-icon-x{width:1em;height:1em}\n"] }]
         }], propDecorators: { fileInputEl: [{ type: i0.ViewChild, args: ['fileInputEl', { isSignal: true }] }], dropzoneEl: [{ type: i0.ViewChild, args: ['dropzoneEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], showFileList: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFileList", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], rejected: [{ type: i0.Output, args: ["rejected"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }] } });
 const ARCHIVE_MIMES = new Set([
     'application/zip',
@@ -11461,6 +11512,8 @@ class InputComponent {
     i18n = inject(EagamiI18nService);
     /** Text label rendered above the field. */
     label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the control when no visible `label` is set. */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     /** Native input type; `password` adds a built-in show/hide toggle. */
     type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
     /** Placeholder shown while the field is empty. */
@@ -11664,13 +11717,13 @@ class InputComponent {
         this.inputEl()?.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: InputComponent, isStandalone: true, selector: "ea-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, showPasswordToggle: { classPropertyName: "showPasswordToggle", publicName: "showPasswordToggle", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", focused: "focused", blurred: "blurred" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: InputComponent, isStandalone: true, selector: "ea-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, showPasswordToggle: { classPropertyName: "showPasswordToggle", publicName: "showPasswordToggle", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", focused: "focused", blurred: "blurred" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-input-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\"\n    [style.max-width]=\"numberWidth()\">\n    @if (!value() && icon(); as leadingIcon) {\n      <span\n        class=\"ea-input-wrapper__icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"leadingIcon\" />\n      </span>\n    }\n\n    <span class=\"ea-input-wrapper__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-input\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.autocomplete]=\"autocomplete() ?? null\"\n      [attr.list]=\"list() ?? null\"\n      [attr.min]=\"type() === 'number' ? (min() ?? null) : null\"\n      [attr.max]=\"type() === 'number' ? (max() ?? null) : null\"\n      [attr.step]=\"type() === 'number' ? (step() ?? null) : null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (keydown)=\"handleKeydown($event)\"\n      (wheel)=\"handleWheel($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__clear\"\n        [attr.aria-label]=\"i18n.messages().input.clear\"\n        (mousedown)=\"onClearMousedown($event)\"\n        (click)=\"clear()\">\n        <ea-icon-x class=\"ea-input-wrapper__clear-icon\" />\n      </button>\n    }\n\n    @if (type() === 'password' && showPasswordToggle()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__password-toggle\"\n        [attr.aria-label]=\"\n          passwordVisible()\n            ? i18n.messages().input.hidePassword\n            : i18n.messages().input.showPassword\n        \"\n        [attr.aria-pressed]=\"passwordVisible()\"\n        (click)=\"togglePasswordVisibility()\">\n        @if (passwordVisible()) {\n          <ea-icon-eye-off />\n        } @else {\n          <ea-icon-eye />\n        }\n      </button>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-input-wrapper{display:flex;align-items:center;gap:.5em;min-height:2.5em;padding:0 .75em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-text-secondary);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-input-wrapper--xs{font-size:var(--font-size-xs)}.ea-input-wrapper--sm{font-size:var(--font-size-sm)}.ea-input-wrapper--md{font-size:var(--font-size-md)}.ea-input-wrapper--lg{font-size:var(--font-size-lg)}.ea-input-wrapper--xl{font-size:var(--font-size-xl)}.ea-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-input-wrapper--error.ea-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:inherit}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input-wrapper__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:var(--icon-inline-size);color:var(--color-text-secondary)}.ea-input-wrapper__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-input-wrapper__clear>*{font-size:1.25em}.ea-input-wrapper__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-input-wrapper__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__clear:disabled{cursor:not-allowed;opacity:.5}.ea-input-wrapper__password-toggle{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-input-wrapper__password-toggle>*{font-size:1.25em}.ea-input-wrapper__password-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__password-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-input-wrapper__password-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__password-toggle:disabled{cursor:not-allowed;opacity:.5}.ea-input-wrapper__password-toggle{color:var(--ea-input-toggle-color, var(--color-text-secondary))}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1em;height:1em;pointer-events:none}.ea-input{flex:1;width:100%;min-width:0;padding:.5em 0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-input:-webkit-autofill,.ea-input:autofill{-webkit-text-fill-color:var(--color-text-primary);-webkit-box-shadow:0 0 0 1000px var(--color-bg-base) inset;transition:background-color 5000s ease-in-out 0s}.ea-input:disabled{cursor:not-allowed}.ea-input::-webkit-calendar-picker-indicator,.ea-input::-webkit-credentials-auto-fill-button,.ea-input::-webkit-contacts-auto-fill-button,.ea-input::-webkit-strong-password-auto-fill-button,.ea-input::-webkit-caps-lock-indicator{display:none!important;visibility:hidden;pointer-events:none;width:0;height:0}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"], dependencies: [{ kind: "component", type: EyeIconComponent, selector: "ea-icon-eye" }, { kind: "component", type: EyeOffIconComponent, selector: "ea-icon-eye-off" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-input-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\"\n    [style.max-width]=\"numberWidth()\">\n    @if (!value() && icon(); as leadingIcon) {\n      <span\n        class=\"ea-input-wrapper__icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"leadingIcon\" />\n      </span>\n    }\n\n    <span class=\"ea-input-wrapper__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-input\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.autocomplete]=\"autocomplete() ?? null\"\n      [attr.list]=\"list() ?? null\"\n      [attr.min]=\"type() === 'number' ? (min() ?? null) : null\"\n      [attr.max]=\"type() === 'number' ? (max() ?? null) : null\"\n      [attr.step]=\"type() === 'number' ? (step() ?? null) : null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (keydown)=\"handleKeydown($event)\"\n      (wheel)=\"handleWheel($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__clear\"\n        [attr.aria-label]=\"i18n.messages().input.clear\"\n        (mousedown)=\"onClearMousedown($event)\"\n        (click)=\"clear()\">\n        <ea-icon-x class=\"ea-input-wrapper__clear-icon\" />\n      </button>\n    }\n\n    @if (type() === 'password' && showPasswordToggle()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__password-toggle\"\n        [attr.aria-label]=\"\n          passwordVisible()\n            ? i18n.messages().input.hidePassword\n            : i18n.messages().input.showPassword\n        \"\n        [attr.aria-pressed]=\"passwordVisible()\"\n        (click)=\"togglePasswordVisibility()\">\n        @if (passwordVisible()) {\n          <ea-icon-eye-off />\n        } @else {\n          <ea-icon-eye />\n        }\n      </button>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-input-wrapper{display:flex;align-items:center;gap:.5em;min-height:2.5em;padding:0 .75em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-text-secondary);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-input-wrapper--xs{font-size:var(--font-size-xs)}.ea-input-wrapper--sm{font-size:var(--font-size-sm)}.ea-input-wrapper--md{font-size:var(--font-size-md)}.ea-input-wrapper--lg{font-size:var(--font-size-lg)}.ea-input-wrapper--xl{font-size:var(--font-size-xl)}.ea-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-input-wrapper--error.ea-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:inherit}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input-wrapper__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:var(--icon-inline-size);color:var(--color-text-secondary)}.ea-input-wrapper__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-input-wrapper__clear>*{font-size:1.25em}.ea-input-wrapper__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-input-wrapper__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__clear:disabled{cursor:not-allowed;opacity:.5}.ea-input-wrapper__password-toggle{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-input-wrapper__password-toggle>*{font-size:1.25em}.ea-input-wrapper__password-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__password-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-input-wrapper__password-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__password-toggle:disabled{cursor:not-allowed;opacity:.5}.ea-input-wrapper__password-toggle{color:var(--ea-input-toggle-color, var(--color-text-secondary))}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1em;height:1em;pointer-events:none}.ea-input{flex:1;width:100%;min-width:0;padding:.5em 0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-input:-webkit-autofill,.ea-input:autofill{-webkit-text-fill-color:var(--color-text-primary);-webkit-box-shadow:0 0 0 1000px var(--color-bg-base) inset;transition:background-color 5000s ease-in-out 0s}.ea-input:disabled{cursor:not-allowed}.ea-input::-webkit-calendar-picker-indicator,.ea-input::-webkit-credentials-auto-fill-button,.ea-input::-webkit-contacts-auto-fill-button,.ea-input::-webkit-strong-password-auto-fill-button,.ea-input::-webkit-caps-lock-indicator{display:none!important;visibility:hidden;pointer-events:none;width:0;height:0}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"], dependencies: [{ kind: "component", type: EyeIconComponent, selector: "ea-icon-eye" }, { kind: "component", type: EyeOffIconComponent, selector: "ea-icon-eye-off" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
@@ -11688,8 +11741,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                             useExisting: forwardRef(() => InputComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-input-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\"\n    [style.max-width]=\"numberWidth()\">\n    @if (!value() && icon(); as leadingIcon) {\n      <span\n        class=\"ea-input-wrapper__icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"leadingIcon\" />\n      </span>\n    }\n\n    <span class=\"ea-input-wrapper__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-input\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.autocomplete]=\"autocomplete() ?? null\"\n      [attr.list]=\"list() ?? null\"\n      [attr.min]=\"type() === 'number' ? (min() ?? null) : null\"\n      [attr.max]=\"type() === 'number' ? (max() ?? null) : null\"\n      [attr.step]=\"type() === 'number' ? (step() ?? null) : null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (keydown)=\"handleKeydown($event)\"\n      (wheel)=\"handleWheel($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__clear\"\n        [attr.aria-label]=\"i18n.messages().input.clear\"\n        (mousedown)=\"onClearMousedown($event)\"\n        (click)=\"clear()\">\n        <ea-icon-x class=\"ea-input-wrapper__clear-icon\" />\n      </button>\n    }\n\n    @if (type() === 'password' && showPasswordToggle()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__password-toggle\"\n        [attr.aria-label]=\"\n          passwordVisible()\n            ? i18n.messages().input.hidePassword\n            : i18n.messages().input.showPassword\n        \"\n        [attr.aria-pressed]=\"passwordVisible()\"\n        (click)=\"togglePasswordVisibility()\">\n        @if (passwordVisible()) {\n          <ea-icon-eye-off />\n        } @else {\n          <ea-icon-eye />\n        }\n      </button>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-input-wrapper{display:flex;align-items:center;gap:.5em;min-height:2.5em;padding:0 .75em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-text-secondary);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-input-wrapper--xs{font-size:var(--font-size-xs)}.ea-input-wrapper--sm{font-size:var(--font-size-sm)}.ea-input-wrapper--md{font-size:var(--font-size-md)}.ea-input-wrapper--lg{font-size:var(--font-size-lg)}.ea-input-wrapper--xl{font-size:var(--font-size-xl)}.ea-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-input-wrapper--error.ea-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:inherit}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input-wrapper__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:var(--icon-inline-size);color:var(--color-text-secondary)}.ea-input-wrapper__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-input-wrapper__clear>*{font-size:1.25em}.ea-input-wrapper__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-input-wrapper__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__clear:disabled{cursor:not-allowed;opacity:.5}.ea-input-wrapper__password-toggle{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-input-wrapper__password-toggle>*{font-size:1.25em}.ea-input-wrapper__password-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__password-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-input-wrapper__password-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__password-toggle:disabled{cursor:not-allowed;opacity:.5}.ea-input-wrapper__password-toggle{color:var(--ea-input-toggle-color, var(--color-text-secondary))}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1em;height:1em;pointer-events:none}.ea-input{flex:1;width:100%;min-width:0;padding:.5em 0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-input:-webkit-autofill,.ea-input:autofill{-webkit-text-fill-color:var(--color-text-primary);-webkit-box-shadow:0 0 0 1000px var(--color-bg-base) inset;transition:background-color 5000s ease-in-out 0s}.ea-input:disabled{cursor:not-allowed}.ea-input::-webkit-calendar-picker-indicator,.ea-input::-webkit-credentials-auto-fill-button,.ea-input::-webkit-contacts-auto-fill-button,.ea-input::-webkit-strong-password-auto-fill-button,.ea-input::-webkit-caps-lock-indicator{display:none!important;visibility:hidden;pointer-events:none;width:0;height:0}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], showPasswordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordToggle", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
+                    ], template: "<div class=\"ea-input-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\"\n    [style.max-width]=\"numberWidth()\">\n    @if (!value() && icon(); as leadingIcon) {\n      <span\n        class=\"ea-input-wrapper__icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"leadingIcon\" />\n      </span>\n    }\n\n    <span class=\"ea-input-wrapper__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-input\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.autocomplete]=\"autocomplete() ?? null\"\n      [attr.list]=\"list() ?? null\"\n      [attr.min]=\"type() === 'number' ? (min() ?? null) : null\"\n      [attr.max]=\"type() === 'number' ? (max() ?? null) : null\"\n      [attr.step]=\"type() === 'number' ? (step() ?? null) : null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (keydown)=\"handleKeydown($event)\"\n      (wheel)=\"handleWheel($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__clear\"\n        [attr.aria-label]=\"i18n.messages().input.clear\"\n        (mousedown)=\"onClearMousedown($event)\"\n        (click)=\"clear()\">\n        <ea-icon-x class=\"ea-input-wrapper__clear-icon\" />\n      </button>\n    }\n\n    @if (type() === 'password' && showPasswordToggle()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__password-toggle\"\n        [attr.aria-label]=\"\n          passwordVisible()\n            ? i18n.messages().input.hidePassword\n            : i18n.messages().input.showPassword\n        \"\n        [attr.aria-pressed]=\"passwordVisible()\"\n        (click)=\"togglePasswordVisibility()\">\n        @if (passwordVisible()) {\n          <ea-icon-eye-off />\n        } @else {\n          <ea-icon-eye />\n        }\n      </button>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-input-wrapper{display:flex;align-items:center;gap:.5em;min-height:2.5em;padding:0 .75em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-text-secondary);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-input-wrapper--xs{font-size:var(--font-size-xs)}.ea-input-wrapper--sm{font-size:var(--font-size-sm)}.ea-input-wrapper--md{font-size:var(--font-size-md)}.ea-input-wrapper--lg{font-size:var(--font-size-lg)}.ea-input-wrapper--xl{font-size:var(--font-size-xl)}.ea-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-input-wrapper--error.ea-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:inherit}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input-wrapper__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:var(--icon-inline-size);color:var(--color-text-secondary)}.ea-input-wrapper__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-input-wrapper__clear>*{font-size:1.25em}.ea-input-wrapper__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-input-wrapper__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__clear:disabled{cursor:not-allowed;opacity:.5}.ea-input-wrapper__password-toggle{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-input-wrapper__password-toggle>*{font-size:1.25em}.ea-input-wrapper__password-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__password-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-input-wrapper__password-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__password-toggle:disabled{cursor:not-allowed;opacity:.5}.ea-input-wrapper__password-toggle{color:var(--ea-input-toggle-color, var(--color-text-secondary))}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1em;height:1em;pointer-events:none}.ea-input{flex:1;width:100%;min-width:0;padding:.5em 0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-input:-webkit-autofill,.ea-input:autofill{-webkit-text-fill-color:var(--color-text-primary);-webkit-box-shadow:0 0 0 1000px var(--color-bg-base) inset;transition:background-color 5000s ease-in-out 0s}.ea-input:disabled{cursor:not-allowed}.ea-input::-webkit-calendar-picker-indicator,.ea-input::-webkit-credentials-auto-fill-button,.ea-input::-webkit-contacts-auto-fill-button,.ea-input::-webkit-strong-password-auto-fill-button,.ea-input::-webkit-caps-lock-indicator{display:none!important;visibility:hidden;pointer-events:none;width:0;height:0}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], showPasswordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordToggle", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
 
 /**
  * Popup action menu attached to any focusable element via the
@@ -11902,7 +11955,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
  */
 class MenuTriggerDirective {
     el = inject((ElementRef));
+    renderer = inject(Renderer2);
     menu = input.required({ ...(ngDevMode ? { debugName: "menu" } : /* istanbul ignore next */ {}), alias: 'eaMenuTrigger' });
+    constructor() {
+        effect(() => {
+            const menu = this.menu();
+            const open = menu?.open() ?? false;
+            const controls = menu?.id() ?? null;
+            const target = resolveAriaTarget(this.el.nativeElement);
+            this.renderer.setAttribute(target, 'aria-haspopup', 'menu');
+            this.renderer.setAttribute(target, 'aria-expanded', String(open));
+            if (controls) {
+                this.renderer.setAttribute(target, 'aria-controls', controls);
+            }
+            else {
+                this.renderer.removeAttribute(target, 'aria-controls');
+            }
+        });
+    }
     handleClick() {
         const m = this.menu();
         if (m.disabled()) {
@@ -11927,21 +11997,18 @@ class MenuTriggerDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.18", type: MenuTriggerDirective, isStandalone: true, selector: "[eaMenuTrigger]", inputs: { menu: { classPropertyName: "menu", publicName: "eaMenuTrigger", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "handleClick()", "keydown": "handleKeydown($event)" }, properties: { "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "menu()?.open() ?? false", "attr.aria-controls": "menu()?.id() ?? null" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.18", type: MenuTriggerDirective, isStandalone: true, selector: "[eaMenuTrigger]", inputs: { menu: { classPropertyName: "menu", publicName: "eaMenuTrigger", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "handleClick()", "keydown": "handleKeydown($event)" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MenuTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eaMenuTrigger]',
                     host: {
-                        '[attr.aria-haspopup]': '"menu"',
-                        '[attr.aria-expanded]': 'menu()?.open() ?? false',
-                        '[attr.aria-controls]': 'menu()?.id() ?? null',
                         '(click)': 'handleClick()',
                         '(keydown)': 'handleKeydown($event)',
                     },
                 }]
-        }], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "eaMenuTrigger", required: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "eaMenuTrigger", required: true }] }] } });
 
 /**
  * Inline label commonly used to represent filters, categories, or selected
@@ -11956,6 +12023,12 @@ class TagComponent {
     removable = input(false, ...(ngDevMode ? [{ debugName: "removable" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     removeLabel = input(undefined, ...(ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the remove button is a tab stop. Set `false` inside a composite
+     * widget (a combobox trigger, a grid cell) whose own keyboard model owns
+     * navigation, since roles like `combobox` forbid focusable descendants.
+     */
+    removeTabbable = input(true, ...(ngDevMode ? [{ debugName: "removeTabbable" }] : /* istanbul ignore next */ []));
     /** Fires when the user activates the remove button on a `removable` tag. */
     removed = output();
     /** Accessible label for the remove button, falling back to the active locale. */
@@ -11970,12 +12043,12 @@ class TagComponent {
         this.removed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TagComponent, isStandalone: true, selector: "ea-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, ngImport: i0, template: "<span\n  class=\"ea-tag\"\n  [ngClass]=\"hostClasses()\">\n  <ng-content />\n  @if (removable()) {\n    <button\n      type=\"button\"\n      class=\"ea-tag__remove\"\n      [disabled]=\"disabled() || null\"\n      [attr.aria-label]=\"resolvedRemoveLabel()\"\n      (click)=\"onRemove($event)\">\n      <ea-icon-x />\n    </button>\n  }\n</span>\n", styles: ["ea-tag{display:inline-flex;vertical-align:middle;line-height:1}.ea-tag{display:inline-flex;align-items:center;gap:.25em;padding:.25em .5em;font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-secondary);forced-color-adjust:none}.ea-tag--xs{font-size:var(--font-size-xs)}.ea-tag--sm{font-size:var(--font-size-sm)}.ea-tag--md{font-size:var(--font-size-md)}.ea-tag--lg{font-size:var(--font-size-lg)}.ea-tag--xl{font-size:var(--font-size-xl)}.ea-tag--success{border-color:var(--color-success-muted);background-color:var(--color-success-subtle);color:var(--color-success-text)}.ea-tag--warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-subtle);color:var(--color-warning-text)}.ea-tag--error{border-color:var(--color-error-muted);background-color:var(--color-error-subtle);color:var(--color-error-text)}.ea-tag--info{border-color:var(--color-info-muted);background-color:var(--color-info-subtle);color:var(--color-info-text)}.ea-tag--disabled{opacity:.6;cursor:not-allowed}.ea-tag__remove{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-tag__remove>*{font-size:1.25em}.ea-tag__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-tag__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-tag__remove:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-tag__remove:disabled{cursor:not-allowed;opacity:.5}.ea-tag__remove,.ea-tag__remove:hover{color:inherit}.ea-tag__remove ea-icon-x{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.18", type: TagComponent, isStandalone: true, selector: "ea-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, removeTabbable: { classPropertyName: "removeTabbable", publicName: "removeTabbable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, ngImport: i0, template: "<span\n  class=\"ea-tag\"\n  [ngClass]=\"hostClasses()\">\n  <ng-content />\n  @if (removable()) {\n    <button\n      type=\"button\"\n      class=\"ea-tag__remove\"\n      [disabled]=\"disabled() || null\"\n      [attr.tabindex]=\"removeTabbable() ? null : -1\"\n      [attr.aria-label]=\"resolvedRemoveLabel()\"\n      (click)=\"onRemove($event)\">\n      <ea-icon-x />\n    </button>\n  }\n</span>\n", styles: ["ea-tag{display:inline-flex;vertical-align:middle;line-height:1}.ea-tag{display:inline-flex;align-items:center;gap:.25em;padding:.25em .5em;font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-secondary);forced-color-adjust:none}.ea-tag--xs{font-size:var(--font-size-xs)}.ea-tag--sm{font-size:var(--font-size-sm)}.ea-tag--md{font-size:var(--font-size-md)}.ea-tag--lg{font-size:var(--font-size-lg)}.ea-tag--xl{font-size:var(--font-size-xl)}.ea-tag--success{border-color:var(--color-success-muted);background-color:var(--color-success-subtle);color:var(--color-success-text)}.ea-tag--warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-subtle);color:var(--color-warning-text)}.ea-tag--error{border-color:var(--color-error-muted);background-color:var(--color-error-subtle);color:var(--color-error-text)}.ea-tag--info{border-color:var(--color-info-muted);background-color:var(--color-info-subtle);color:var(--color-info-text)}.ea-tag--disabled{opacity:.6;cursor:not-allowed}.ea-tag__remove{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-tag__remove>*{font-size:1.25em}.ea-tag__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-tag__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-tag__remove:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-tag__remove:disabled{cursor:not-allowed;opacity:.5}.ea-tag__remove,.ea-tag__remove:hover{color:inherit}.ea-tag__remove ea-icon-x{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.18", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-tag', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span\n  class=\"ea-tag\"\n  [ngClass]=\"hostClasses()\">\n  <ng-content />\n  @if (removable()) {\n    <button\n      type=\"button\"\n      class=\"ea-tag__remove\"\n      [disabled]=\"disabled() || null\"\n      [attr.aria-label]=\"resolvedRemoveLabel()\"\n      (click)=\"onRemove($event)\">\n      <ea-icon-x />\n    </button>\n  }\n</span>\n", styles: ["ea-tag{display:inline-flex;vertical-align:middle;line-height:1}.ea-tag{display:inline-flex;align-items:center;gap:.25em;padding:.25em .5em;font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-secondary);forced-color-adjust:none}.ea-tag--xs{font-size:var(--font-size-xs)}.ea-tag--sm{font-size:var(--font-size-sm)}.ea-tag--md{font-size:var(--font-size-md)}.ea-tag--lg{font-size:var(--font-size-lg)}.ea-tag--xl{font-size:var(--font-size-xl)}.ea-tag--success{border-color:var(--color-success-muted);background-color:var(--color-success-subtle);color:var(--color-success-text)}.ea-tag--warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-subtle);color:var(--color-warning-text)}.ea-tag--error{border-color:var(--color-error-muted);background-color:var(--color-error-subtle);color:var(--color-error-text)}.ea-tag--info{border-color:var(--color-info-muted);background-color:var(--color-info-subtle);color:var(--color-info-text)}.ea-tag--disabled{opacity:.6;cursor:not-allowed}.ea-tag__remove{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-tag__remove>*{font-size:1.25em}.ea-tag__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-tag__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-tag__remove:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-tag__remove:disabled{cursor:not-allowed;opacity:.5}.ea-tag__remove,.ea-tag__remove:hover{color:inherit}.ea-tag__remove ea-icon-x{pointer-events:none}\n"] }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
+            args: [{ selector: 'ea-tag', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span\n  class=\"ea-tag\"\n  [ngClass]=\"hostClasses()\">\n  <ng-content />\n  @if (removable()) {\n    <button\n      type=\"button\"\n      class=\"ea-tag__remove\"\n      [disabled]=\"disabled() || null\"\n      [attr.tabindex]=\"removeTabbable() ? null : -1\"\n      [attr.aria-label]=\"resolvedRemoveLabel()\"\n      (click)=\"onRemove($event)\">\n      <ea-icon-x />\n    </button>\n  }\n</span>\n", styles: ["ea-tag{display:inline-flex;vertical-align:middle;line-height:1}.ea-tag{display:inline-flex;align-items:center;gap:.25em;padding:.25em .5em;font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-secondary);forced-color-adjust:none}.ea-tag--xs{font-size:var(--font-size-xs)}.ea-tag--sm{font-size:var(--font-size-sm)}.ea-tag--md{font-size:var(--font-size-md)}.ea-tag--lg{font-size:var(--font-size-lg)}.ea-tag--xl{font-size:var(--font-size-xl)}.ea-tag--success{border-color:var(--color-success-muted);background-color:var(--color-success-subtle);color:var(--color-success-text)}.ea-tag--warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-subtle);color:var(--color-warning-text)}.ea-tag--error{border-color:var(--color-error-muted);background-color:var(--color-error-subtle);color:var(--color-error-text)}.ea-tag--info{border-color:var(--color-info-muted);background-color:var(--color-info-subtle);color:var(--color-info-text)}.ea-tag--disabled{opacity:.6;cursor:not-allowed}.ea-tag__remove{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-tag__remove>*{font-size:1.25em}.ea-tag__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-tag__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-tag__remove:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-tag__remove:disabled{cursor:not-allowed;opacity:.5}.ea-tag__remove,.ea-tag__remove:hover{color:inherit}.ea-tag__remove ea-icon-x{pointer-events:none}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], removeTabbable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeTabbable", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
 
 /**
  * Multi-select dropdown. Renders selections as removable `<ea-tag>` chips
@@ -12366,7 +12439,7 @@ class MultiSelectComponent {
                 useExisting: forwardRef(() => MultiSelectComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "searchEl", first: true, predicate: ["searchEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-multi-select-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-multi-select\">\n    <div\n      class=\"ea-multi-select__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\"\n      (click)=\"onTriggerAreaClick()\">\n      <div\n        #triggerEl\n        class=\"ea-multi-select__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        role=\"combobox\"\n        [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n        [attr.aria-activedescendant]=\"isOpen() && !searchable() ? activeOptionId() : null\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <span class=\"ea-multi-select__trigger-content\">\n          @if (!hasValue()) {\n            <span class=\"ea-multi-select__trigger-placeholder\">\n              <bdi>{{ resolvedPlaceholder() }}</bdi>\n            </span>\n          } @else {\n            @for (opt of visibleChips(); track opt.value) {\n              <ea-tag\n                [size]=\"size()\"\n                variant=\"default\"\n                [removable]=\"!isDisabled() && !readonly()\"\n                [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n                (removed)=\"removeChip(opt)\">\n                <span>{{ opt.label }}</span>\n              </ea-tag>\n            }\n            @if (hiddenChipCount() > 0) {\n              <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n            }\n          }\n        </span>\n      </div>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-multi-select__clear\"\n          [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-multi-select__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n      <ea-icon-chevron-down\n        class=\"ea-multi-select__trigger-icon\"\n        aria-hidden=\"true\" />\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"reposition\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-multi-select__popover\"\n        [ngClass]=\"menuClasses()\">\n        @if (searchable()) {\n          <div class=\"ea-multi-select__search\">\n            <ea-icon-search\n              class=\"ea-multi-select__search-icon\"\n              aria-hidden=\"true\" />\n            <input\n              #searchEl\n              type=\"text\"\n              dir=\"auto\"\n              class=\"ea-multi-select__search-input\"\n              autocomplete=\"off\"\n              [placeholder]=\"resolvedSearchPlaceholder()\"\n              [value]=\"searchTerm()\"\n              [attr.aria-controls]=\"listboxId()\"\n              [attr.aria-activedescendant]=\"activeOptionId()\"\n              (input)=\"onSearchInput($event)\"\n              (keydown)=\"handlePopoverKeydown($event)\" />\n          </div>\n        }\n\n        <ul\n          class=\"ea-multi-select__list\"\n          role=\"listbox\"\n          aria-multiselectable=\"true\"\n          [id]=\"listboxId()\"\n          [attr.aria-label]=\"label() ?? ariaLabel() ?? null\">\n          @if (selectAllVisible()) {\n            <li\n              class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n              [class.ea-multi-select__option--focused]=\"focusedIndex() === 0\"\n              [id]=\"id() + '-opt-0'\"\n              role=\"option\"\n              [attr.aria-selected]=\"selectAllState() === 'all'\"\n              [attr.aria-checked]=\"selectAllAriaChecked()\"\n              (click)=\"onSelectAllClick()\">\n              <ea-checkbox\n                size=\"sm\"\n                inert\n                aria-hidden=\"true\"\n                [checked]=\"selectAllState() === 'all'\"\n                [indeterminate]=\"selectAllState() === 'some'\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ i18n.messages().multiSelect.selectAll }}\n              </span>\n            </li>\n          }\n          @for (opt of filteredOptions(); track opt.value; let i = $index) {\n            <li\n              class=\"ea-multi-select__option\"\n              [class.ea-multi-select__option--focused]=\"\n                focusedIndex() === i + selectAllOffset()\n              \"\n              [class.ea-multi-select__option--disabled]=\"opt.disabled\"\n              [id]=\"id() + '-opt-' + (i + selectAllOffset())\"\n              role=\"option\"\n              [attr.aria-selected]=\"selectedSet().has(opt.value)\"\n              [attr.aria-disabled]=\"opt.disabled || null\"\n              (click)=\"onOptionClick(opt, i)\">\n              <ea-checkbox\n                size=\"sm\"\n                inert\n                aria-hidden=\"true\"\n                [checked]=\"selectedSet().has(opt.value)\"\n                [disabled]=\"!!opt.disabled\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ opt.label }}\n              </span>\n            </li>\n          }\n        </ul>\n        @if (filteredOptions().length === 0) {\n          <div\n            class=\"ea-multi-select__empty\"\n            role=\"status\">\n            {{ i18n.messages().multiSelect.searchEmpty }}\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-multi-select{position:relative}.ea-multi-select__trigger-wrapper{position:relative;display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.375em .75em;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;transition:var(--transition-colors),var(--transition-shadow)}.ea-multi-select__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-multi-select__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-multi-select__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-multi-select__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-multi-select__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error){border-color:var(--color-error-default)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--disabled){background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-multi-select__trigger{display:flex;align-items:center;flex:1;min-width:0;text-align:start;font-family:var(--font-family-sans);cursor:pointer}.ea-multi-select__trigger:focus-visible{outline:none}.ea-multi-select__trigger--disabled{cursor:not-allowed}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-1);flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}.ea-multi-select__trigger-content ea-tag{flex-shrink:0}.ea-multi-select__trigger-placeholder{color:var(--color-text-tertiary)}.ea-multi-select__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open) .ea-multi-select__trigger-icon{transform:rotate(180deg)}.ea-multi-select__more{display:inline-flex;flex-shrink:0;align-items:center;padding:0 var(--space-1-5);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);font-size:.85em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-multi-select__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-multi-select__clear>*{font-size:1.25em}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-multi-select__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__clear:disabled{cursor:not-allowed;opacity:.5}.ea-multi-select__clear{flex-shrink:0}.ea-multi-select__popover{display:flex;flex-direction:column;overflow:hidden;max-height:20rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-multi-select-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-multi-select__popover{border:1px solid CanvasText}}.ea-multi-select__popover--xs{font-size:var(--font-size-xs)}.ea-multi-select__popover--sm{font-size:var(--font-size-sm)}.ea-multi-select__popover--md{font-size:var(--font-size-md)}.ea-multi-select__popover--lg{font-size:var(--font-size-lg)}.ea-multi-select__popover--xl{font-size:var(--font-size-xl)}.ea-multi-select__search{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:var(--space-2) var(--space-3);border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-multi-select__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-multi-select__search-input{flex:1;min-width:0;padding:0;border:none;background:none;font-family:var(--font-family-sans);font-size:inherit;color:var(--color-text-primary)}.ea-multi-select__search-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-multi-select__search-input:focus{outline:none}.ea-multi-select__list{overflow-y:auto;overscroll-behavior:none;flex:1;margin:0;padding:var(--space-1) 0;list-style:none}.ea-multi-select__option{display:flex;align-items:center;gap:.5em;padding:.375em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option--focused{background-color:Highlight;color:HighlightText}}.ea-multi-select__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}@media(forced-colors:active){.ea-multi-select__option--disabled{color:GrayText}}.ea-multi-select__option--select-all{border-bottom:var(--border-width-thin) solid var(--color-border-default);font-weight:var(--font-weight-medium)}.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:Highlight;color:HighlightText}}.ea-multi-select__option ea-checkbox{pointer-events:none;display:inline-flex;align-items:center;line-height:1}.ea-multi-select__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);list-style:none}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "ea-checkbox", inputs: ["label", "count", "hint", "errorMsg", "errorMessages", "size", "disabled", "required", "indeterminate", "aria-label", "id", "checked"], outputs: ["checkedChange", "changed"] }, { kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: SearchIconComponent, selector: "ea-icon-search" }, { kind: "component", type: TagComponent, selector: "ea-tag", inputs: ["variant", "size", "removable", "disabled", "removeLabel"], outputs: ["removed"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "searchEl", first: true, predicate: ["searchEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-multi-select-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-multi-select\">\n    <div\n      class=\"ea-multi-select__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\"\n      (click)=\"onTriggerAreaClick()\">\n      <div\n        #triggerEl\n        class=\"ea-multi-select__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        role=\"combobox\"\n        [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n        [attr.aria-activedescendant]=\"isOpen() && !searchable() ? activeOptionId() : null\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <span class=\"ea-multi-select__trigger-content\">\n          @if (!hasValue()) {\n            <span class=\"ea-multi-select__trigger-placeholder\">\n              <bdi>{{ resolvedPlaceholder() }}</bdi>\n            </span>\n          } @else {\n            @for (opt of visibleChips(); track opt.value) {\n              <ea-tag\n                [size]=\"size()\"\n                variant=\"default\"\n                [removable]=\"!isDisabled() && !readonly()\"\n                [removeTabbable]=\"false\"\n                [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n                (removed)=\"removeChip(opt)\">\n                <span>{{ opt.label }}</span>\n              </ea-tag>\n            }\n            @if (hiddenChipCount() > 0) {\n              <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n            }\n          }\n        </span>\n      </div>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-multi-select__clear\"\n          [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-multi-select__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n      <ea-icon-chevron-down\n        class=\"ea-multi-select__trigger-icon\"\n        aria-hidden=\"true\" />\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"reposition\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-multi-select__popover\"\n        [ngClass]=\"menuClasses()\">\n        @if (searchable()) {\n          <div class=\"ea-multi-select__search\">\n            <ea-icon-search\n              class=\"ea-multi-select__search-icon\"\n              aria-hidden=\"true\" />\n            <input\n              #searchEl\n              type=\"text\"\n              dir=\"auto\"\n              class=\"ea-multi-select__search-input\"\n              autocomplete=\"off\"\n              [placeholder]=\"resolvedSearchPlaceholder()\"\n              [value]=\"searchTerm()\"\n              [attr.aria-controls]=\"listboxId()\"\n              [attr.aria-activedescendant]=\"activeOptionId()\"\n              (input)=\"onSearchInput($event)\"\n              (keydown)=\"handlePopoverKeydown($event)\" />\n          </div>\n        }\n\n        <ul\n          class=\"ea-multi-select__list\"\n          role=\"listbox\"\n          aria-multiselectable=\"true\"\n          [id]=\"listboxId()\"\n          [attr.aria-label]=\"label() ?? ariaLabel() ?? null\">\n          @if (selectAllVisible()) {\n            <li\n              class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n              [class.ea-multi-select__option--focused]=\"focusedIndex() === 0\"\n              [id]=\"id() + '-opt-0'\"\n              role=\"option\"\n              [attr.aria-selected]=\"selectAllState() === 'all'\"\n              [attr.aria-checked]=\"selectAllAriaChecked()\"\n              (click)=\"onSelectAllClick()\">\n              <ea-checkbox\n                size=\"sm\"\n                inert\n                aria-hidden=\"true\"\n                [checked]=\"selectAllState() === 'all'\"\n                [indeterminate]=\"selectAllState() === 'some'\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ i18n.messages().multiSelect.selectAll }}\n              </span>\n            </li>\n          }\n          @for (opt of filteredOptions(); track opt.value; let i = $index) {\n            <li\n              class=\"ea-multi-select__option\"\n              [class.ea-multi-select__option--focused]=\"\n                focusedIndex() === i + selectAllOffset()\n              \"\n              [class.ea-multi-select__option--disabled]=\"opt.disabled\"\n              [id]=\"id() + '-opt-' + (i + selectAllOffset())\"\n              role=\"option\"\n              [attr.aria-selected]=\"selectedSet().has(opt.value)\"\n              [attr.aria-disabled]=\"opt.disabled || null\"\n              (click)=\"onOptionClick(opt, i)\">\n              <ea-checkbox\n                size=\"sm\"\n                inert\n                aria-hidden=\"true\"\n                [checked]=\"selectedSet().has(opt.value)\"\n                [disabled]=\"!!opt.disabled\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ opt.label }}\n              </span>\n            </li>\n          }\n        </ul>\n        @if (filteredOptions().length === 0) {\n          <div\n            class=\"ea-multi-select__empty\"\n            role=\"status\">\n            {{ i18n.messages().multiSelect.searchEmpty }}\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-multi-select{position:relative}.ea-multi-select__trigger-wrapper{position:relative;display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.375em .75em;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;transition:var(--transition-colors),var(--transition-shadow)}.ea-multi-select__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-multi-select__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-multi-select__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-multi-select__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-multi-select__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error){border-color:var(--color-error-default)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--disabled){background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-multi-select__trigger{display:flex;align-items:center;flex:1;min-width:0;text-align:start;font-family:var(--font-family-sans);cursor:pointer}.ea-multi-select__trigger:focus-visible{outline:none}.ea-multi-select__trigger--disabled{cursor:not-allowed}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-1);flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}.ea-multi-select__trigger-content ea-tag{flex-shrink:0}.ea-multi-select__trigger-placeholder{color:var(--color-text-tertiary)}.ea-multi-select__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open) .ea-multi-select__trigger-icon{transform:rotate(180deg)}.ea-multi-select__more{display:inline-flex;flex-shrink:0;align-items:center;padding:0 var(--space-1-5);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);font-size:.85em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-multi-select__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-multi-select__clear>*{font-size:1.25em}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-multi-select__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__clear:disabled{cursor:not-allowed;opacity:.5}.ea-multi-select__clear{flex-shrink:0}.ea-multi-select__popover{display:flex;flex-direction:column;overflow:hidden;max-height:20rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-multi-select-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-multi-select__popover{border:1px solid CanvasText}}.ea-multi-select__popover--xs{font-size:var(--font-size-xs)}.ea-multi-select__popover--sm{font-size:var(--font-size-sm)}.ea-multi-select__popover--md{font-size:var(--font-size-md)}.ea-multi-select__popover--lg{font-size:var(--font-size-lg)}.ea-multi-select__popover--xl{font-size:var(--font-size-xl)}.ea-multi-select__search{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:var(--space-2) var(--space-3);border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-multi-select__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-multi-select__search-input{flex:1;min-width:0;padding:0;border:none;background:none;font-family:var(--font-family-sans);font-size:inherit;color:var(--color-text-primary)}.ea-multi-select__search-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-multi-select__search-input:focus{outline:none}.ea-multi-select__list{overflow-y:auto;overscroll-behavior:none;flex:1;margin:0;padding:var(--space-1) 0;list-style:none}.ea-multi-select__option{display:flex;align-items:center;gap:.5em;padding:.375em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option--focused{background-color:Highlight;color:HighlightText}}.ea-multi-select__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}@media(forced-colors:active){.ea-multi-select__option--disabled{color:GrayText}}.ea-multi-select__option--select-all{border-bottom:var(--border-width-thin) solid var(--color-border-default);font-weight:var(--font-weight-medium)}.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:Highlight;color:HighlightText}}.ea-multi-select__option ea-checkbox{pointer-events:none;display:inline-flex;align-items:center;line-height:1}.ea-multi-select__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);list-style:none}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "ea-checkbox", inputs: ["label", "count", "hint", "errorMsg", "errorMessages", "size", "disabled", "required", "indeterminate", "aria-label", "id", "checked"], outputs: ["checkedChange", "changed"] }, { kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: SearchIconComponent, selector: "ea-icon-search" }, { kind: "component", type: TagComponent, selector: "ea-tag", inputs: ["variant", "size", "removable", "disabled", "removeLabel", "removeTabbable"], outputs: ["removed"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -12386,7 +12459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                             useExisting: forwardRef(() => MultiSelectComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-multi-select-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-multi-select\">\n    <div\n      class=\"ea-multi-select__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\"\n      (click)=\"onTriggerAreaClick()\">\n      <div\n        #triggerEl\n        class=\"ea-multi-select__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        role=\"combobox\"\n        [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n        [attr.aria-activedescendant]=\"isOpen() && !searchable() ? activeOptionId() : null\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <span class=\"ea-multi-select__trigger-content\">\n          @if (!hasValue()) {\n            <span class=\"ea-multi-select__trigger-placeholder\">\n              <bdi>{{ resolvedPlaceholder() }}</bdi>\n            </span>\n          } @else {\n            @for (opt of visibleChips(); track opt.value) {\n              <ea-tag\n                [size]=\"size()\"\n                variant=\"default\"\n                [removable]=\"!isDisabled() && !readonly()\"\n                [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n                (removed)=\"removeChip(opt)\">\n                <span>{{ opt.label }}</span>\n              </ea-tag>\n            }\n            @if (hiddenChipCount() > 0) {\n              <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n            }\n          }\n        </span>\n      </div>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-multi-select__clear\"\n          [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-multi-select__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n      <ea-icon-chevron-down\n        class=\"ea-multi-select__trigger-icon\"\n        aria-hidden=\"true\" />\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"reposition\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-multi-select__popover\"\n        [ngClass]=\"menuClasses()\">\n        @if (searchable()) {\n          <div class=\"ea-multi-select__search\">\n            <ea-icon-search\n              class=\"ea-multi-select__search-icon\"\n              aria-hidden=\"true\" />\n            <input\n              #searchEl\n              type=\"text\"\n              dir=\"auto\"\n              class=\"ea-multi-select__search-input\"\n              autocomplete=\"off\"\n              [placeholder]=\"resolvedSearchPlaceholder()\"\n              [value]=\"searchTerm()\"\n              [attr.aria-controls]=\"listboxId()\"\n              [attr.aria-activedescendant]=\"activeOptionId()\"\n              (input)=\"onSearchInput($event)\"\n              (keydown)=\"handlePopoverKeydown($event)\" />\n          </div>\n        }\n\n        <ul\n          class=\"ea-multi-select__list\"\n          role=\"listbox\"\n          aria-multiselectable=\"true\"\n          [id]=\"listboxId()\"\n          [attr.aria-label]=\"label() ?? ariaLabel() ?? null\">\n          @if (selectAllVisible()) {\n            <li\n              class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n              [class.ea-multi-select__option--focused]=\"focusedIndex() === 0\"\n              [id]=\"id() + '-opt-0'\"\n              role=\"option\"\n              [attr.aria-selected]=\"selectAllState() === 'all'\"\n              [attr.aria-checked]=\"selectAllAriaChecked()\"\n              (click)=\"onSelectAllClick()\">\n              <ea-checkbox\n                size=\"sm\"\n                inert\n                aria-hidden=\"true\"\n                [checked]=\"selectAllState() === 'all'\"\n                [indeterminate]=\"selectAllState() === 'some'\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ i18n.messages().multiSelect.selectAll }}\n              </span>\n            </li>\n          }\n          @for (opt of filteredOptions(); track opt.value; let i = $index) {\n            <li\n              class=\"ea-multi-select__option\"\n              [class.ea-multi-select__option--focused]=\"\n                focusedIndex() === i + selectAllOffset()\n              \"\n              [class.ea-multi-select__option--disabled]=\"opt.disabled\"\n              [id]=\"id() + '-opt-' + (i + selectAllOffset())\"\n              role=\"option\"\n              [attr.aria-selected]=\"selectedSet().has(opt.value)\"\n              [attr.aria-disabled]=\"opt.disabled || null\"\n              (click)=\"onOptionClick(opt, i)\">\n              <ea-checkbox\n                size=\"sm\"\n                inert\n                aria-hidden=\"true\"\n                [checked]=\"selectedSet().has(opt.value)\"\n                [disabled]=\"!!opt.disabled\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ opt.label }}\n              </span>\n            </li>\n          }\n        </ul>\n        @if (filteredOptions().length === 0) {\n          <div\n            class=\"ea-multi-select__empty\"\n            role=\"status\">\n            {{ i18n.messages().multiSelect.searchEmpty }}\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-multi-select{position:relative}.ea-multi-select__trigger-wrapper{position:relative;display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.375em .75em;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;transition:var(--transition-colors),var(--transition-shadow)}.ea-multi-select__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-multi-select__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-multi-select__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-multi-select__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-multi-select__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error){border-color:var(--color-error-default)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--disabled){background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-multi-select__trigger{display:flex;align-items:center;flex:1;min-width:0;text-align:start;font-family:var(--font-family-sans);cursor:pointer}.ea-multi-select__trigger:focus-visible{outline:none}.ea-multi-select__trigger--disabled{cursor:not-allowed}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-1);flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}.ea-multi-select__trigger-content ea-tag{flex-shrink:0}.ea-multi-select__trigger-placeholder{color:var(--color-text-tertiary)}.ea-multi-select__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open) .ea-multi-select__trigger-icon{transform:rotate(180deg)}.ea-multi-select__more{display:inline-flex;flex-shrink:0;align-items:center;padding:0 var(--space-1-5);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);font-size:.85em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-multi-select__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-multi-select__clear>*{font-size:1.25em}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-multi-select__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__clear:disabled{cursor:not-allowed;opacity:.5}.ea-multi-select__clear{flex-shrink:0}.ea-multi-select__popover{display:flex;flex-direction:column;overflow:hidden;max-height:20rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-multi-select-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-multi-select__popover{border:1px solid CanvasText}}.ea-multi-select__popover--xs{font-size:var(--font-size-xs)}.ea-multi-select__popover--sm{font-size:var(--font-size-sm)}.ea-multi-select__popover--md{font-size:var(--font-size-md)}.ea-multi-select__popover--lg{font-size:var(--font-size-lg)}.ea-multi-select__popover--xl{font-size:var(--font-size-xl)}.ea-multi-select__search{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:var(--space-2) var(--space-3);border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-multi-select__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-multi-select__search-input{flex:1;min-width:0;padding:0;border:none;background:none;font-family:var(--font-family-sans);font-size:inherit;color:var(--color-text-primary)}.ea-multi-select__search-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-multi-select__search-input:focus{outline:none}.ea-multi-select__list{overflow-y:auto;overscroll-behavior:none;flex:1;margin:0;padding:var(--space-1) 0;list-style:none}.ea-multi-select__option{display:flex;align-items:center;gap:.5em;padding:.375em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option--focused{background-color:Highlight;color:HighlightText}}.ea-multi-select__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}@media(forced-colors:active){.ea-multi-select__option--disabled{color:GrayText}}.ea-multi-select__option--select-all{border-bottom:var(--border-width-thin) solid var(--color-border-default);font-weight:var(--font-weight-medium)}.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:Highlight;color:HighlightText}}.ea-multi-select__option ea-checkbox{pointer-events:none;display:inline-flex;align-items:center;line-height:1}.ea-multi-select__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);list-style:none}\n"] }]
+                    ], template: "<div class=\"ea-multi-select-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [labelId]=\"id() + '-label'\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-multi-select\">\n    <div\n      class=\"ea-multi-select__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\"\n      (click)=\"onTriggerAreaClick()\">\n      <div\n        #triggerEl\n        class=\"ea-multi-select__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        role=\"combobox\"\n        [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n        [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n        [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n        [attr.aria-activedescendant]=\"isOpen() && !searchable() ? activeOptionId() : null\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <span class=\"ea-multi-select__trigger-content\">\n          @if (!hasValue()) {\n            <span class=\"ea-multi-select__trigger-placeholder\">\n              <bdi>{{ resolvedPlaceholder() }}</bdi>\n            </span>\n          } @else {\n            @for (opt of visibleChips(); track opt.value) {\n              <ea-tag\n                [size]=\"size()\"\n                variant=\"default\"\n                [removable]=\"!isDisabled() && !readonly()\"\n                [removeTabbable]=\"false\"\n                [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n                (removed)=\"removeChip(opt)\">\n                <span>{{ opt.label }}</span>\n              </ea-tag>\n            }\n            @if (hiddenChipCount() > 0) {\n              <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n            }\n          }\n        </span>\n      </div>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-multi-select__clear\"\n          [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-multi-select__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n      <ea-icon-chevron-down\n        class=\"ea-multi-select__trigger-icon\"\n        aria-hidden=\"true\" />\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      [matchAnchorWidth]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"reposition\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-multi-select__popover\"\n        [ngClass]=\"menuClasses()\">\n        @if (searchable()) {\n          <div class=\"ea-multi-select__search\">\n            <ea-icon-search\n              class=\"ea-multi-select__search-icon\"\n              aria-hidden=\"true\" />\n            <input\n              #searchEl\n              type=\"text\"\n              dir=\"auto\"\n              class=\"ea-multi-select__search-input\"\n              autocomplete=\"off\"\n              [placeholder]=\"resolvedSearchPlaceholder()\"\n              [value]=\"searchTerm()\"\n              [attr.aria-controls]=\"listboxId()\"\n              [attr.aria-activedescendant]=\"activeOptionId()\"\n              (input)=\"onSearchInput($event)\"\n              (keydown)=\"handlePopoverKeydown($event)\" />\n          </div>\n        }\n\n        <ul\n          class=\"ea-multi-select__list\"\n          role=\"listbox\"\n          aria-multiselectable=\"true\"\n          [id]=\"listboxId()\"\n          [attr.aria-label]=\"label() ?? ariaLabel() ?? null\">\n          @if (selectAllVisible()) {\n            <li\n              class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n              [class.ea-multi-select__option--focused]=\"focusedIndex() === 0\"\n              [id]=\"id() + '-opt-0'\"\n              role=\"option\"\n              [attr.aria-selected]=\"selectAllState() === 'all'\"\n              [attr.aria-checked]=\"selectAllAriaChecked()\"\n              (click)=\"onSelectAllClick()\">\n              <ea-checkbox\n                size=\"sm\"\n                inert\n                aria-hidden=\"true\"\n                [checked]=\"selectAllState() === 'all'\"\n                [indeterminate]=\"selectAllState() === 'some'\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ i18n.messages().multiSelect.selectAll }}\n              </span>\n            </li>\n          }\n          @for (opt of filteredOptions(); track opt.value; let i = $index) {\n            <li\n              class=\"ea-multi-select__option\"\n              [class.ea-multi-select__option--focused]=\"\n                focusedIndex() === i + selectAllOffset()\n              \"\n              [class.ea-multi-select__option--disabled]=\"opt.disabled\"\n              [id]=\"id() + '-opt-' + (i + selectAllOffset())\"\n              role=\"option\"\n              [attr.aria-selected]=\"selectedSet().has(opt.value)\"\n              [attr.aria-disabled]=\"opt.disabled || null\"\n              (click)=\"onOptionClick(opt, i)\">\n              <ea-checkbox\n                size=\"sm\"\n                inert\n                aria-hidden=\"true\"\n                [checked]=\"selectedSet().has(opt.value)\"\n                [disabled]=\"!!opt.disabled\" />\n              <span class=\"ea-multi-select__option-label\">\n                {{ opt.label }}\n              </span>\n            </li>\n          }\n        </ul>\n        @if (filteredOptions().length === 0) {\n          <div\n            class=\"ea-multi-select__empty\"\n            role=\"status\">\n            {{ i18n.messages().multiSelect.searchEmpty }}\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-multi-select{position:relative}.ea-multi-select__trigger-wrapper{position:relative;display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.375em .75em;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;transition:var(--transition-colors),var(--transition-shadow)}.ea-multi-select__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-multi-select__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-multi-select__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-multi-select__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-multi-select__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error){border-color:var(--color-error-default)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--disabled){background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-multi-select__trigger{display:flex;align-items:center;flex:1;min-width:0;text-align:start;font-family:var(--font-family-sans);cursor:pointer}.ea-multi-select__trigger:focus-visible{outline:none}.ea-multi-select__trigger--disabled{cursor:not-allowed}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-1);flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}.ea-multi-select__trigger-content ea-tag{flex-shrink:0}.ea-multi-select__trigger-placeholder{color:var(--color-text-tertiary)}.ea-multi-select__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open) .ea-multi-select__trigger-icon{transform:rotate(180deg)}.ea-multi-select__more{display:inline-flex;flex-shrink:0;align-items:center;padding:0 var(--space-1-5);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);font-size:.85em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-multi-select__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-multi-select__clear>*{font-size:1.25em}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-multi-select__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__clear:disabled{cursor:not-allowed;opacity:.5}.ea-multi-select__clear{flex-shrink:0}.ea-multi-select__popover{display:flex;flex-direction:column;overflow:hidden;max-height:20rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-multi-select-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-multi-select__popover{border:1px solid CanvasText}}.ea-multi-select__popover--xs{font-size:var(--font-size-xs)}.ea-multi-select__popover--sm{font-size:var(--font-size-sm)}.ea-multi-select__popover--md{font-size:var(--font-size-md)}.ea-multi-select__popover--lg{font-size:var(--font-size-lg)}.ea-multi-select__popover--xl{font-size:var(--font-size-xl)}.ea-multi-select__search{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:var(--space-2) var(--space-3);border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-multi-select__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-multi-select__search-input{flex:1;min-width:0;padding:0;border:none;background:none;font-family:var(--font-family-sans);font-size:inherit;color:var(--color-text-primary)}.ea-multi-select__search-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-multi-select__search-input:focus{outline:none}.ea-multi-select__list{overflow-y:auto;overscroll-behavior:none;flex:1;margin:0;padding:var(--space-1) 0;list-style:none}.ea-multi-select__option{display:flex;align-items:center;gap:.5em;padding:.375em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option--focused{background-color:Highlight;color:HighlightText}}.ea-multi-select__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}@media(forced-colors:active){.ea-multi-select__option--disabled{color:GrayText}}.ea-multi-select__option--select-all{border-bottom:var(--border-width-thin) solid var(--color-border-default);font-weight:var(--font-weight-medium)}.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:Highlight;color:HighlightText}}.ea-multi-select__option ea-checkbox{pointer-events:none;display:inline-flex;align-items:center;line-height:1}.ea-multi-select__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);list-style:none}\n"] }]
         }], propDecorators: { triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], searchEl: [{ type: i0.ViewChild, args: ['searchEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], maxVisibleChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleChips", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 class ChevronUpIconComponent extends IconComponentBase {
@@ -12659,7 +12732,7 @@ class NumberInputComponent {
                 useExisting: forwardRef(() => NumberInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-number-input-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-number-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <input\n      #inputEl\n      type=\"number\"\n      class=\"ea-number-input\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [attr.min]=\"effectiveMin() ?? null\"\n      [attr.max]=\"max() ?? null\"\n      [attr.step]=\"step()\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput()\"\n      (keydown)=\"handleKeydown($event)\"\n      (wheel)=\"handleWheel($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <div class=\"ea-number-input-wrapper__steppers\">\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        class=\"ea-number-input-wrapper__step\"\n        [disabled]=\"!canIncrement()\"\n        [attr.aria-label]=\"i18n.messages().numberInput.increment\"\n        (mousedown)=\"onStepMousedown($event)\"\n        (click)=\"increment()\">\n        <ea-icon-chevron-up class=\"ea-number-input-wrapper__step-icon\" />\n      </button>\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        class=\"ea-number-input-wrapper__step\"\n        [disabled]=\"!canDecrement()\"\n        [attr.aria-label]=\"i18n.messages().numberInput.decrement\"\n        (mousedown)=\"onStepMousedown($event)\"\n        (click)=\"decrement()\">\n        <ea-icon-chevron-down class=\"ea-number-input-wrapper__step-icon\" />\n      </button>\n    </div>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-number-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-number-input-wrapper{overflow:hidden;display:flex;align-items:center;gap:.25em;min-height:2.5em;padding-block:0;padding-inline:.75em .5em;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-secondary);transition:var(--transition-colors),var(--transition-shadow)}.ea-number-input-wrapper--xs{font-size:var(--font-size-xs)}.ea-number-input-wrapper--sm{font-size:var(--font-size-sm)}.ea-number-input-wrapper--md{font-size:var(--font-size-md)}.ea-number-input-wrapper--lg{font-size:var(--font-size-lg)}.ea-number-input-wrapper--xl{font-size:var(--font-size-xl)}.ea-number-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-number-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--error{border-color:var(--color-error-default)}.ea-number-input-wrapper--error.ea-number-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-number-input-wrapper--error.ea-number-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--disabled{border-color:var(--color-border-default);background-color:var(--color-bg-muted);cursor:not-allowed;opacity:.6}.ea-number-input-wrapper--disabled .ea-number-input{cursor:not-allowed}.ea-number-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-number-input-wrapper__steppers{display:flex;flex-direction:column;flex-shrink:0}.ea-number-input-wrapper__step{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-number-input-wrapper__step>*{font-size:1.25em}.ea-number-input-wrapper__step:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-number-input-wrapper__step:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-number-input-wrapper__step:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper__step:disabled{cursor:not-allowed;opacity:.5}.ea-number-input-wrapper__step{width:1.5em;height:1.1em;border-radius:var(--radius-xs)}.ea-number-input-wrapper__step>*{font-size:1em}.ea-number-input-wrapper__step-icon{pointer-events:none}.ea-number-input{flex:1;width:100%;min-width:0;padding:.5em 0;font-family:var(--font-family-sans);line-height:var(--line-height-normal);border:none;outline:none;background:transparent;color:var(--color-text-primary);appearance:textfield;-moz-appearance:textfield}.ea-number-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-number-input:disabled{cursor:not-allowed}.ea-number-input::-webkit-inner-spin-button,.ea-number-input::-webkit-outer-spin-button{margin:0;appearance:none;-webkit-appearance:none}\n"], dependencies: [{ kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: ChevronUpIconComponent, selector: "ea-icon-chevron-up" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-number-input-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-number-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <input\n      #inputEl\n      type=\"number\"\n      class=\"ea-number-input\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [attr.min]=\"effectiveMin() ?? null\"\n      [attr.max]=\"max() ?? null\"\n      [attr.step]=\"step()\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput()\"\n      (keydown)=\"handleKeydown($event)\"\n      (wheel)=\"handleWheel($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <div class=\"ea-number-input-wrapper__steppers\">\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        class=\"ea-number-input-wrapper__step\"\n        [disabled]=\"!canIncrement()\"\n        [attr.aria-label]=\"i18n.messages().numberInput.increment\"\n        (mousedown)=\"onStepMousedown($event)\"\n        (click)=\"increment()\">\n        <ea-icon-chevron-up class=\"ea-number-input-wrapper__step-icon\" />\n      </button>\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        class=\"ea-number-input-wrapper__step\"\n        [disabled]=\"!canDecrement()\"\n        [attr.aria-label]=\"i18n.messages().numberInput.decrement\"\n        (mousedown)=\"onStepMousedown($event)\"\n        (click)=\"decrement()\">\n        <ea-icon-chevron-down class=\"ea-number-input-wrapper__step-icon\" />\n      </button>\n    </div>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-number-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-number-input-wrapper{overflow:hidden;display:flex;align-items:center;gap:.25em;min-height:2.5em;padding-block:0;padding-inline:.75em .5em;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-secondary);transition:var(--transition-colors),var(--transition-shadow)}.ea-number-input-wrapper--xs{font-size:var(--font-size-xs)}.ea-number-input-wrapper--sm{font-size:var(--font-size-sm)}.ea-number-input-wrapper--md{font-size:var(--font-size-md)}.ea-number-input-wrapper--lg{font-size:var(--font-size-lg)}.ea-number-input-wrapper--xl{font-size:var(--font-size-xl)}.ea-number-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-number-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--error{border-color:var(--color-error-default)}.ea-number-input-wrapper--error.ea-number-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-number-input-wrapper--error.ea-number-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--disabled{border-color:var(--color-border-default);background-color:var(--color-bg-muted);cursor:not-allowed;opacity:.6}.ea-number-input-wrapper--disabled .ea-number-input{cursor:not-allowed}.ea-number-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-number-input-wrapper__steppers{display:flex;flex-direction:column;flex-shrink:0}.ea-number-input-wrapper__step{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-number-input-wrapper__step>*{font-size:1.25em}.ea-number-input-wrapper__step:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-number-input-wrapper__step:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-number-input-wrapper__step:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper__step:disabled{cursor:not-allowed;opacity:.5}.ea-number-input-wrapper__step{--ea-icon-button-size: 1.1em;width:1.5em;border-radius:var(--radius-xs)}.ea-number-input-wrapper__step>*{font-size:1em}.ea-number-input-wrapper__step-icon{pointer-events:none}.ea-number-input{flex:1;width:100%;min-width:0;padding:.5em 0;font-family:var(--font-family-sans);line-height:var(--line-height-normal);border:none;outline:none;background:transparent;color:var(--color-text-primary);appearance:textfield;-moz-appearance:textfield}.ea-number-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-number-input:disabled{cursor:not-allowed}.ea-number-input::-webkit-inner-spin-button,.ea-number-input::-webkit-outer-spin-button{margin:0;appearance:none;-webkit-appearance:none}\n"], dependencies: [{ kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: ChevronUpIconComponent, selector: "ea-icon-chevron-up" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: NumberInputComponent, decorators: [{
             type: Component,
@@ -12675,7 +12748,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                             useExisting: forwardRef(() => NumberInputComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-number-input-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-number-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <input\n      #inputEl\n      type=\"number\"\n      class=\"ea-number-input\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [attr.min]=\"effectiveMin() ?? null\"\n      [attr.max]=\"max() ?? null\"\n      [attr.step]=\"step()\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput()\"\n      (keydown)=\"handleKeydown($event)\"\n      (wheel)=\"handleWheel($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <div class=\"ea-number-input-wrapper__steppers\">\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        class=\"ea-number-input-wrapper__step\"\n        [disabled]=\"!canIncrement()\"\n        [attr.aria-label]=\"i18n.messages().numberInput.increment\"\n        (mousedown)=\"onStepMousedown($event)\"\n        (click)=\"increment()\">\n        <ea-icon-chevron-up class=\"ea-number-input-wrapper__step-icon\" />\n      </button>\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        class=\"ea-number-input-wrapper__step\"\n        [disabled]=\"!canDecrement()\"\n        [attr.aria-label]=\"i18n.messages().numberInput.decrement\"\n        (mousedown)=\"onStepMousedown($event)\"\n        (click)=\"decrement()\">\n        <ea-icon-chevron-down class=\"ea-number-input-wrapper__step-icon\" />\n      </button>\n    </div>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-number-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-number-input-wrapper{overflow:hidden;display:flex;align-items:center;gap:.25em;min-height:2.5em;padding-block:0;padding-inline:.75em .5em;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-secondary);transition:var(--transition-colors),var(--transition-shadow)}.ea-number-input-wrapper--xs{font-size:var(--font-size-xs)}.ea-number-input-wrapper--sm{font-size:var(--font-size-sm)}.ea-number-input-wrapper--md{font-size:var(--font-size-md)}.ea-number-input-wrapper--lg{font-size:var(--font-size-lg)}.ea-number-input-wrapper--xl{font-size:var(--font-size-xl)}.ea-number-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-number-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--error{border-color:var(--color-error-default)}.ea-number-input-wrapper--error.ea-number-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-number-input-wrapper--error.ea-number-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--disabled{border-color:var(--color-border-default);background-color:var(--color-bg-muted);cursor:not-allowed;opacity:.6}.ea-number-input-wrapper--disabled .ea-number-input{cursor:not-allowed}.ea-number-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-number-input-wrapper__steppers{display:flex;flex-direction:column;flex-shrink:0}.ea-number-input-wrapper__step{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-number-input-wrapper__step>*{font-size:1.25em}.ea-number-input-wrapper__step:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-number-input-wrapper__step:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-number-input-wrapper__step:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper__step:disabled{cursor:not-allowed;opacity:.5}.ea-number-input-wrapper__step{width:1.5em;height:1.1em;border-radius:var(--radius-xs)}.ea-number-input-wrapper__step>*{font-size:1em}.ea-number-input-wrapper__step-icon{pointer-events:none}.ea-number-input{flex:1;width:100%;min-width:0;padding:.5em 0;font-family:var(--font-family-sans);line-height:var(--line-height-normal);border:none;outline:none;background:transparent;color:var(--color-text-primary);appearance:textfield;-moz-appearance:textfield}.ea-number-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-number-input:disabled{cursor:not-allowed}.ea-number-input::-webkit-inner-spin-button,.ea-number-input::-webkit-outer-spin-button{margin:0;appearance:none;-webkit-appearance:none}\n"] }]
+                    ], template: "<div class=\"ea-number-input-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-number-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <input\n      #inputEl\n      type=\"number\"\n      class=\"ea-number-input\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [attr.min]=\"effectiveMin() ?? null\"\n      [attr.max]=\"max() ?? null\"\n      [attr.step]=\"step()\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput()\"\n      (keydown)=\"handleKeydown($event)\"\n      (wheel)=\"handleWheel($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <div class=\"ea-number-input-wrapper__steppers\">\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        class=\"ea-number-input-wrapper__step\"\n        [disabled]=\"!canIncrement()\"\n        [attr.aria-label]=\"i18n.messages().numberInput.increment\"\n        (mousedown)=\"onStepMousedown($event)\"\n        (click)=\"increment()\">\n        <ea-icon-chevron-up class=\"ea-number-input-wrapper__step-icon\" />\n      </button>\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        class=\"ea-number-input-wrapper__step\"\n        [disabled]=\"!canDecrement()\"\n        [attr.aria-label]=\"i18n.messages().numberInput.decrement\"\n        (mousedown)=\"onStepMousedown($event)\"\n        (click)=\"decrement()\">\n        <ea-icon-chevron-down class=\"ea-number-input-wrapper__step-icon\" />\n      </button>\n    </div>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-number-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-number-input-wrapper{overflow:hidden;display:flex;align-items:center;gap:.25em;min-height:2.5em;padding-block:0;padding-inline:.75em .5em;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-secondary);transition:var(--transition-colors),var(--transition-shadow)}.ea-number-input-wrapper--xs{font-size:var(--font-size-xs)}.ea-number-input-wrapper--sm{font-size:var(--font-size-sm)}.ea-number-input-wrapper--md{font-size:var(--font-size-md)}.ea-number-input-wrapper--lg{font-size:var(--font-size-lg)}.ea-number-input-wrapper--xl{font-size:var(--font-size-xl)}.ea-number-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-number-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--error{border-color:var(--color-error-default)}.ea-number-input-wrapper--error.ea-number-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-number-input-wrapper--error.ea-number-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--disabled{border-color:var(--color-border-default);background-color:var(--color-bg-muted);cursor:not-allowed;opacity:.6}.ea-number-input-wrapper--disabled .ea-number-input{cursor:not-allowed}.ea-number-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-number-input-wrapper__steppers{display:flex;flex-direction:column;flex-shrink:0}.ea-number-input-wrapper__step{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-number-input-wrapper__step>*{font-size:1.25em}.ea-number-input-wrapper__step:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-number-input-wrapper__step:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-number-input-wrapper__step:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper__step:disabled{cursor:not-allowed;opacity:.5}.ea-number-input-wrapper__step{--ea-icon-button-size: 1.1em;width:1.5em;border-radius:var(--radius-xs)}.ea-number-input-wrapper__step>*{font-size:1em}.ea-number-input-wrapper__step-icon{pointer-events:none}.ea-number-input{flex:1;width:100%;min-width:0;padding:.5em 0;font-family:var(--font-family-sans);line-height:var(--line-height-normal);border:none;outline:none;background:transparent;color:var(--color-text-primary);appearance:textfield;-moz-appearance:textfield}.ea-number-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-number-input:disabled{cursor:not-allowed}.ea-number-input::-webkit-inner-spin-button,.ea-number-input::-webkit-outer-spin-button{margin:0;appearance:none;-webkit-appearance:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], allowNegative: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowNegative", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
 
 /** Whether the runtime's `Intl` actually has number data for `locale` rather
@@ -12823,7 +12896,7 @@ class PaginatorComponent {
         this.changed.emit({ page: 1, pageSize: newSize });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", 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-label]=\"i18n.messages().paginator.page(formatNumber(p))\"\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.18", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
@@ -12833,7 +12906,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                         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      <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"] }]
+                    ], 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-label]=\"i18n.messages().paginator.page(formatNumber(p))\"\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"] }] } });
 
 /**
@@ -14427,6 +14500,8 @@ const DEFAULT_ROWS = 3;
 class TextareaComponent {
     textareaEl = viewChild('textareaEl', ...(ngDevMode ? [{ debugName: "textareaEl" }] : /* istanbul ignore next */ []));
     label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the control when no visible `label` is set. */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
@@ -14509,13 +14584,13 @@ class TextareaComponent {
         this.textareaEl()?.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TextareaComponent, isStandalone: true, selector: "ea-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", focused: "focused", blurred: "blurred" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TextareaComponent, isStandalone: true, selector: "ea-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", focused: "focused", blurred: "blurred" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TextareaComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "textareaEl", first: true, predicate: ["textareaEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-textarea-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-textarea-wrapper\"\n    [ngClass]=\"wrapperClasses()\"\n    [style.resize]=\"resize()\"\n    [style.min-height]=\"minHeightStyle()\"\n    [style.max-height.px]=\"maxHeight() ?? null\">\n    <textarea\n      #textareaEl\n      class=\"ea-textarea\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.maxlength]=\"maxlength() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"></textarea>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-textarea-wrapper{display:flex;min-width:12em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-textarea-wrapper--xs{font-size:var(--font-size-xs)}.ea-textarea-wrapper--sm{font-size:var(--font-size-sm)}.ea-textarea-wrapper--md{font-size:var(--font-size-md)}.ea-textarea-wrapper--lg{font-size:var(--font-size-lg)}.ea-textarea-wrapper--xl{font-size:var(--font-size-xl)}.ea-textarea-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:not-allowed}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea{flex:1;width:100%;min-width:0;padding:.75em;background:transparent;border:none;outline:none;resize:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-textarea::placeholder{color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "textareaEl", first: true, predicate: ["textareaEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-textarea-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-textarea-wrapper\"\n    [ngClass]=\"wrapperClasses()\"\n    [style.resize]=\"resize()\"\n    [style.min-height]=\"minHeightStyle()\"\n    [style.max-height.px]=\"maxHeight() ?? null\">\n    <textarea\n      #textareaEl\n      class=\"ea-textarea\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.maxlength]=\"maxlength() ?? null\"\n      [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"></textarea>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-textarea-wrapper{display:flex;min-width:12em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-textarea-wrapper--xs{font-size:var(--font-size-xs)}.ea-textarea-wrapper--sm{font-size:var(--font-size-sm)}.ea-textarea-wrapper--md{font-size:var(--font-size-md)}.ea-textarea-wrapper--lg{font-size:var(--font-size-lg)}.ea-textarea-wrapper--xl{font-size:var(--font-size-xl)}.ea-textarea-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:not-allowed}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea{flex:1;width:100%;min-width:0;padding:.75em;background:transparent;border:none;outline:none;resize:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-textarea::placeholder{color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
@@ -14525,8 +14600,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                             useExisting: forwardRef(() => TextareaComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-textarea-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-textarea-wrapper\"\n    [ngClass]=\"wrapperClasses()\"\n    [style.resize]=\"resize()\"\n    [style.min-height]=\"minHeightStyle()\"\n    [style.max-height.px]=\"maxHeight() ?? null\">\n    <textarea\n      #textareaEl\n      class=\"ea-textarea\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.maxlength]=\"maxlength() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"></textarea>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-textarea-wrapper{display:flex;min-width:12em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-textarea-wrapper--xs{font-size:var(--font-size-xs)}.ea-textarea-wrapper--sm{font-size:var(--font-size-sm)}.ea-textarea-wrapper--md{font-size:var(--font-size-md)}.ea-textarea-wrapper--lg{font-size:var(--font-size-lg)}.ea-textarea-wrapper--xl{font-size:var(--font-size-xl)}.ea-textarea-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:not-allowed}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea{flex:1;width:100%;min-width:0;padding:.75em;background:transparent;border:none;outline:none;resize:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-textarea::placeholder{color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:not-allowed}\n"] }]
-        }], propDecorators: { textareaEl: [{ type: i0.ViewChild, args: ['textareaEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
+                    ], template: "<div class=\"ea-textarea-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div\n    class=\"ea-textarea-wrapper\"\n    [ngClass]=\"wrapperClasses()\"\n    [style.resize]=\"resize()\"\n    [style.min-height]=\"minHeightStyle()\"\n    [style.max-height.px]=\"maxHeight() ?? null\">\n    <textarea\n      #textareaEl\n      class=\"ea-textarea\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.maxlength]=\"maxlength() ?? null\"\n      [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"></textarea>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-textarea-wrapper{display:flex;min-width:12em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-textarea-wrapper--xs{font-size:var(--font-size-xs)}.ea-textarea-wrapper--sm{font-size:var(--font-size-sm)}.ea-textarea-wrapper--md{font-size:var(--font-size-md)}.ea-textarea-wrapper--lg{font-size:var(--font-size-lg)}.ea-textarea-wrapper--xl{font-size:var(--font-size-xl)}.ea-textarea-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:not-allowed}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea{flex:1;width:100%;min-width:0;padding:.75em;background:transparent;border:none;outline:none;resize:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-textarea::placeholder{color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:not-allowed}\n"] }]
+        }], propDecorators: { textareaEl: [{ type: i0.ViewChild, args: ['textareaEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
 
 class ClockIconComponent extends IconComponentBase {
     static slug = 'clock';
@@ -15065,7 +15140,7 @@ class TimePickerComponent {
                 useExisting: forwardRef(() => TimePickerComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "hoursEl", first: true, predicate: ["hoursEl"], descendants: true, isSignal: true }, { propertyName: "minutesEl", first: true, predicate: ["minutesEl"], descendants: true, isSignal: true }, { propertyName: "secondsEl", first: true, predicate: ["secondsEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-time-picker-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-time-picker\">\n    <div\n      class=\"ea-time-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-time-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <ea-icon-clock\n          class=\"ea-time-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <span class=\"ea-time-picker__trigger-value\">\n          <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n        </span>\n      </button>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-time-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().timePicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-time-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [aria-label]=\"i18n.messages().timePicker.dialogLabel\"\n      [surfaceId]=\"popoverId()\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-time-picker__popover\"\n        [ngClass]=\"popoverClasses()\"\n        (keydown.escape)=\"onPopoverEscape($event)\">\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementHours\"\n            (click)=\"onStepClick('hours', 1, $event)\"\n            (mousedown)=\"startHold('hours', 1, $event)\"\n            (touchstart)=\"startHold('hours', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #hoursEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.hoursLabel\"\n            [attr.aria-valuemin]=\"format() === '24h' ? 0 : 1\"\n            [attr.aria-valuemax]=\"format() === '24h' ? 23 : 12\"\n            [attr.aria-valuenow]=\"displayHours()\"\n            [value]=\"hoursText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('hours', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'hours')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementHours\"\n            (click)=\"onStepClick('hours', -1, $event)\"\n            (mousedown)=\"startHold('hours', -1, $event)\"\n            (touchstart)=\"startHold('hours', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <span\n          class=\"ea-time-picker__separator\"\n          aria-hidden=\"true\">\n          :\n        </span>\n\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementMinutes\"\n            (click)=\"onStepClick('minutes', 1, $event)\"\n            (mousedown)=\"startHold('minutes', 1, $event)\"\n            (touchstart)=\"startHold('minutes', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #minutesEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.minutesLabel\"\n            [attr.aria-valuemin]=\"0\"\n            [attr.aria-valuemax]=\"59\"\n            [attr.aria-valuenow]=\"parsed().minutes\"\n            [value]=\"minutesText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('minutes', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'minutes')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementMinutes\"\n            (click)=\"onStepClick('minutes', -1, $event)\"\n            (mousedown)=\"startHold('minutes', -1, $event)\"\n            (touchstart)=\"startHold('minutes', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        @if (includeSeconds()) {\n          <span\n            class=\"ea-time-picker__separator\"\n            aria-hidden=\"true\">\n            :\n          </span>\n          <div class=\"ea-time-picker__column\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.incrementSeconds\"\n              (click)=\"onStepClick('seconds', 1, $event)\"\n              (mousedown)=\"startHold('seconds', 1, $event)\"\n              (touchstart)=\"startHold('seconds', 1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-up aria-hidden=\"true\" />\n            </button>\n            <input\n              #secondsEl\n              type=\"text\"\n              class=\"ea-time-picker__value\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              maxlength=\"2\"\n              role=\"spinbutton\"\n              [attr.aria-label]=\"i18n.messages().timePicker.secondsLabel\"\n              [attr.aria-valuemin]=\"0\"\n              [attr.aria-valuemax]=\"59\"\n              [attr.aria-valuenow]=\"parsed().seconds\"\n              [value]=\"secondsText()\"\n              (focus)=\"onSpinnerFocus($event)\"\n              (input)=\"onSpinnerInput('seconds', $event)\"\n              (keydown)=\"handlePopoverKeydown($event, 'seconds')\"\n              (blur)=\"onSpinnerBlur()\" />\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.decrementSeconds\"\n              (click)=\"onStepClick('seconds', -1, $event)\"\n              (mousedown)=\"startHold('seconds', -1, $event)\"\n              (touchstart)=\"startHold('seconds', -1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-down aria-hidden=\"true\" />\n            </button>\n          </div>\n        }\n\n        @if (format() === '12h') {\n          <div class=\"ea-time-picker__period\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'AM'\"\n              [attr.aria-pressed]=\"period() === 'AM'\"\n              (click)=\"period() === 'PM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.amLabel }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'PM'\"\n              [attr.aria-pressed]=\"period() === 'PM'\"\n              (click)=\"period() === 'AM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.pmLabel }}\n            </button>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-time-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-time-picker,.ea-time-picker__trigger-wrapper{position:relative}.ea-time-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-time-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-time-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-time-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-time-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-time-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);text-align:start;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-time-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--error{border-color:var(--color-error-default)}.ea-time-picker__trigger--error.ea-time-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-time-picker__trigger--error.ea-time-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-time-picker__trigger--placeholder .ea-time-picker__trigger-value{color:var(--color-text-tertiary)}.ea-time-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-time-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}.ea-time-picker__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-time-picker__clear>*{font-size:1.25em}.ea-time-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-time-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-time-picker__popover{display:flex;align-items:center;gap:.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-time-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-time-picker__popover{border:1px solid CanvasText}}.ea-time-picker__popover--xs{font-size:var(--font-size-xs)}.ea-time-picker__popover--sm{font-size:var(--font-size-sm)}.ea-time-picker__popover--md{font-size:var(--font-size-md)}.ea-time-picker__popover--lg{font-size:var(--font-size-lg)}.ea-time-picker__popover--xl{font-size:var(--font-size-xl)}.ea-time-picker__column{display:flex;flex-direction:column;align-items:stretch;gap:.25em}.ea-time-picker__step{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-time-picker__step>*{font-size:1.25em}.ea-time-picker__step:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__step:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__step:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__step:disabled{cursor:not-allowed;opacity:.5}.ea-time-picker__step{width:2.25em;height:1.75em}.ea-time-picker__step ea-icon-chevron-up,.ea-time-picker__step ea-icon-chevron-down{width:1em;height:1em}.ea-time-picker__value{width:2.25em;height:2.25em;padding:0;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);background-color:var(--color-bg-muted);font-family:var(--font-family-mono);font-size:1em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary);font-variant-numeric:tabular-nums;appearance:none;cursor:text}.ea-time-picker__value::selection{background-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__value:hover{border-color:var(--color-border-default)}.ea-time-picker__value:focus{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__value:focus{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__value:focus{background-color:var(--color-bg-base)}.ea-time-picker__separator{font-family:var(--font-family-mono);font-size:1em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);-webkit-user-select:none;user-select:none}.ea-time-picker__period{display:flex;flex-direction:column;gap:.25em;margin-inline-start:.25em}.ea-time-picker__period-option{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:3.33em;padding:.33em .66em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:.75em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__period-option:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__period-option:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__period-option:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__period-option--active{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__period-option--active:hover{background-color:var(--color-brand-hover);border-color:var(--color-brand-hover);color:var(--color-text-inverse)}@media(forced-colors:active){.ea-time-picker__period-option--active{background-color:Highlight;border-color:Highlight;color:HighlightText}}\n"], dependencies: [{ kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: ChevronUpIconComponent, selector: "ea-icon-chevron-up" }, { kind: "component", type: ClockIconComponent, selector: "ea-icon-clock" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "hoursEl", first: true, predicate: ["hoursEl"], descendants: true, isSignal: true }, { propertyName: "minutesEl", first: true, predicate: ["minutesEl"], descendants: true, isSignal: true }, { propertyName: "secondsEl", first: true, predicate: ["secondsEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-time-picker-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-time-picker\">\n    <div\n      class=\"ea-time-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-time-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <ea-icon-clock\n          class=\"ea-time-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <span class=\"ea-time-picker__trigger-value\">\n          <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n        </span>\n      </button>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-time-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().timePicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-time-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [aria-label]=\"i18n.messages().timePicker.dialogLabel\"\n      [surfaceId]=\"popoverId()\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-time-picker__popover\"\n        [ngClass]=\"popoverClasses()\"\n        (keydown.escape)=\"onPopoverEscape($event)\">\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementHours\"\n            (click)=\"onStepClick('hours', 1, $event)\"\n            (mousedown)=\"startHold('hours', 1, $event)\"\n            (touchstart)=\"startHold('hours', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #hoursEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.hoursLabel\"\n            [attr.aria-valuemin]=\"format() === '24h' ? 0 : 1\"\n            [attr.aria-valuemax]=\"format() === '24h' ? 23 : 12\"\n            [attr.aria-valuenow]=\"displayHours()\"\n            [value]=\"hoursText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('hours', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'hours')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementHours\"\n            (click)=\"onStepClick('hours', -1, $event)\"\n            (mousedown)=\"startHold('hours', -1, $event)\"\n            (touchstart)=\"startHold('hours', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <span\n          class=\"ea-time-picker__separator\"\n          aria-hidden=\"true\">\n          :\n        </span>\n\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementMinutes\"\n            (click)=\"onStepClick('minutes', 1, $event)\"\n            (mousedown)=\"startHold('minutes', 1, $event)\"\n            (touchstart)=\"startHold('minutes', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #minutesEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.minutesLabel\"\n            [attr.aria-valuemin]=\"0\"\n            [attr.aria-valuemax]=\"59\"\n            [attr.aria-valuenow]=\"parsed().minutes\"\n            [value]=\"minutesText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('minutes', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'minutes')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementMinutes\"\n            (click)=\"onStepClick('minutes', -1, $event)\"\n            (mousedown)=\"startHold('minutes', -1, $event)\"\n            (touchstart)=\"startHold('minutes', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        @if (includeSeconds()) {\n          <span\n            class=\"ea-time-picker__separator\"\n            aria-hidden=\"true\">\n            :\n          </span>\n          <div class=\"ea-time-picker__column\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.incrementSeconds\"\n              (click)=\"onStepClick('seconds', 1, $event)\"\n              (mousedown)=\"startHold('seconds', 1, $event)\"\n              (touchstart)=\"startHold('seconds', 1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-up aria-hidden=\"true\" />\n            </button>\n            <input\n              #secondsEl\n              type=\"text\"\n              class=\"ea-time-picker__value\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              maxlength=\"2\"\n              role=\"spinbutton\"\n              [attr.aria-label]=\"i18n.messages().timePicker.secondsLabel\"\n              [attr.aria-valuemin]=\"0\"\n              [attr.aria-valuemax]=\"59\"\n              [attr.aria-valuenow]=\"parsed().seconds\"\n              [value]=\"secondsText()\"\n              (focus)=\"onSpinnerFocus($event)\"\n              (input)=\"onSpinnerInput('seconds', $event)\"\n              (keydown)=\"handlePopoverKeydown($event, 'seconds')\"\n              (blur)=\"onSpinnerBlur()\" />\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.decrementSeconds\"\n              (click)=\"onStepClick('seconds', -1, $event)\"\n              (mousedown)=\"startHold('seconds', -1, $event)\"\n              (touchstart)=\"startHold('seconds', -1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-down aria-hidden=\"true\" />\n            </button>\n          </div>\n        }\n\n        @if (format() === '12h') {\n          <div class=\"ea-time-picker__period\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'AM'\"\n              [attr.aria-pressed]=\"period() === 'AM'\"\n              (click)=\"period() === 'PM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.amLabel }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'PM'\"\n              [attr.aria-pressed]=\"period() === 'PM'\"\n              (click)=\"period() === 'AM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.pmLabel }}\n            </button>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-time-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-time-picker,.ea-time-picker__trigger-wrapper{position:relative}.ea-time-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-time-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-time-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-time-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-time-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-time-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);text-align:start;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-time-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--error{border-color:var(--color-error-default)}.ea-time-picker__trigger--error.ea-time-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-time-picker__trigger--error.ea-time-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-time-picker__trigger--placeholder .ea-time-picker__trigger-value{color:var(--color-text-tertiary)}.ea-time-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-time-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}.ea-time-picker__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-time-picker__clear>*{font-size:1.25em}.ea-time-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-time-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-time-picker__popover{display:flex;align-items:center;gap:.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-time-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-time-picker__popover{border:1px solid CanvasText}}.ea-time-picker__popover--xs{font-size:var(--font-size-xs)}.ea-time-picker__popover--sm{font-size:var(--font-size-sm)}.ea-time-picker__popover--md{font-size:var(--font-size-md)}.ea-time-picker__popover--lg{font-size:var(--font-size-lg)}.ea-time-picker__popover--xl{font-size:var(--font-size-xl)}.ea-time-picker__column{display:flex;flex-direction:column;align-items:stretch;gap:.25em}.ea-time-picker__step{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-time-picker__step>*{font-size:1.25em}.ea-time-picker__step:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__step:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__step:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__step:disabled{cursor:not-allowed;opacity:.5}.ea-time-picker__step{width:2.25em}.ea-time-picker__step ea-icon-chevron-up,.ea-time-picker__step ea-icon-chevron-down{width:1em;height:1em}.ea-time-picker__value{width:2.25em;height:2.25em;padding:0;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);background-color:var(--color-bg-muted);font-family:var(--font-family-mono);font-size:1em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary);font-variant-numeric:tabular-nums;appearance:none;cursor:text}.ea-time-picker__value::selection{background-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__value:hover{border-color:var(--color-border-default)}.ea-time-picker__value:focus{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__value:focus{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__value:focus{background-color:var(--color-bg-base)}.ea-time-picker__separator{font-family:var(--font-family-mono);font-size:1em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);-webkit-user-select:none;user-select:none}.ea-time-picker__period{display:flex;flex-direction:column;gap:.25em;margin-inline-start:.25em}.ea-time-picker__period-option{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:3.33em;padding:.33em .66em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:.75em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__period-option:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__period-option:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__period-option:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__period-option--active{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__period-option--active:hover{background-color:var(--color-brand-hover);border-color:var(--color-brand-hover);color:var(--color-text-inverse)}@media(forced-colors:active){.ea-time-picker__period-option--active{background-color:Highlight;border-color:Highlight;color:HighlightText}}\n"], dependencies: [{ kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: ChevronUpIconComponent, selector: "ea-icon-chevron-up" }, { kind: "component", type: ClockIconComponent, selector: "ea-icon-clock" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
@@ -15084,7 +15159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                             useExisting: forwardRef(() => TimePickerComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-time-picker-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-time-picker\">\n    <div\n      class=\"ea-time-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-time-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <ea-icon-clock\n          class=\"ea-time-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <span class=\"ea-time-picker__trigger-value\">\n          <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n        </span>\n      </button>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-time-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().timePicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-time-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [aria-label]=\"i18n.messages().timePicker.dialogLabel\"\n      [surfaceId]=\"popoverId()\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-time-picker__popover\"\n        [ngClass]=\"popoverClasses()\"\n        (keydown.escape)=\"onPopoverEscape($event)\">\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementHours\"\n            (click)=\"onStepClick('hours', 1, $event)\"\n            (mousedown)=\"startHold('hours', 1, $event)\"\n            (touchstart)=\"startHold('hours', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #hoursEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.hoursLabel\"\n            [attr.aria-valuemin]=\"format() === '24h' ? 0 : 1\"\n            [attr.aria-valuemax]=\"format() === '24h' ? 23 : 12\"\n            [attr.aria-valuenow]=\"displayHours()\"\n            [value]=\"hoursText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('hours', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'hours')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementHours\"\n            (click)=\"onStepClick('hours', -1, $event)\"\n            (mousedown)=\"startHold('hours', -1, $event)\"\n            (touchstart)=\"startHold('hours', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <span\n          class=\"ea-time-picker__separator\"\n          aria-hidden=\"true\">\n          :\n        </span>\n\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementMinutes\"\n            (click)=\"onStepClick('minutes', 1, $event)\"\n            (mousedown)=\"startHold('minutes', 1, $event)\"\n            (touchstart)=\"startHold('minutes', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #minutesEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.minutesLabel\"\n            [attr.aria-valuemin]=\"0\"\n            [attr.aria-valuemax]=\"59\"\n            [attr.aria-valuenow]=\"parsed().minutes\"\n            [value]=\"minutesText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('minutes', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'minutes')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementMinutes\"\n            (click)=\"onStepClick('minutes', -1, $event)\"\n            (mousedown)=\"startHold('minutes', -1, $event)\"\n            (touchstart)=\"startHold('minutes', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        @if (includeSeconds()) {\n          <span\n            class=\"ea-time-picker__separator\"\n            aria-hidden=\"true\">\n            :\n          </span>\n          <div class=\"ea-time-picker__column\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.incrementSeconds\"\n              (click)=\"onStepClick('seconds', 1, $event)\"\n              (mousedown)=\"startHold('seconds', 1, $event)\"\n              (touchstart)=\"startHold('seconds', 1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-up aria-hidden=\"true\" />\n            </button>\n            <input\n              #secondsEl\n              type=\"text\"\n              class=\"ea-time-picker__value\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              maxlength=\"2\"\n              role=\"spinbutton\"\n              [attr.aria-label]=\"i18n.messages().timePicker.secondsLabel\"\n              [attr.aria-valuemin]=\"0\"\n              [attr.aria-valuemax]=\"59\"\n              [attr.aria-valuenow]=\"parsed().seconds\"\n              [value]=\"secondsText()\"\n              (focus)=\"onSpinnerFocus($event)\"\n              (input)=\"onSpinnerInput('seconds', $event)\"\n              (keydown)=\"handlePopoverKeydown($event, 'seconds')\"\n              (blur)=\"onSpinnerBlur()\" />\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.decrementSeconds\"\n              (click)=\"onStepClick('seconds', -1, $event)\"\n              (mousedown)=\"startHold('seconds', -1, $event)\"\n              (touchstart)=\"startHold('seconds', -1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-down aria-hidden=\"true\" />\n            </button>\n          </div>\n        }\n\n        @if (format() === '12h') {\n          <div class=\"ea-time-picker__period\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'AM'\"\n              [attr.aria-pressed]=\"period() === 'AM'\"\n              (click)=\"period() === 'PM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.amLabel }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'PM'\"\n              [attr.aria-pressed]=\"period() === 'PM'\"\n              (click)=\"period() === 'AM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.pmLabel }}\n            </button>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-time-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-time-picker,.ea-time-picker__trigger-wrapper{position:relative}.ea-time-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-time-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-time-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-time-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-time-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-time-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);text-align:start;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-time-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--error{border-color:var(--color-error-default)}.ea-time-picker__trigger--error.ea-time-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-time-picker__trigger--error.ea-time-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-time-picker__trigger--placeholder .ea-time-picker__trigger-value{color:var(--color-text-tertiary)}.ea-time-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-time-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}.ea-time-picker__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-time-picker__clear>*{font-size:1.25em}.ea-time-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-time-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-time-picker__popover{display:flex;align-items:center;gap:.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-time-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-time-picker__popover{border:1px solid CanvasText}}.ea-time-picker__popover--xs{font-size:var(--font-size-xs)}.ea-time-picker__popover--sm{font-size:var(--font-size-sm)}.ea-time-picker__popover--md{font-size:var(--font-size-md)}.ea-time-picker__popover--lg{font-size:var(--font-size-lg)}.ea-time-picker__popover--xl{font-size:var(--font-size-xl)}.ea-time-picker__column{display:flex;flex-direction:column;align-items:stretch;gap:.25em}.ea-time-picker__step{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-time-picker__step>*{font-size:1.25em}.ea-time-picker__step:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__step:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__step:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__step:disabled{cursor:not-allowed;opacity:.5}.ea-time-picker__step{width:2.25em;height:1.75em}.ea-time-picker__step ea-icon-chevron-up,.ea-time-picker__step ea-icon-chevron-down{width:1em;height:1em}.ea-time-picker__value{width:2.25em;height:2.25em;padding:0;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);background-color:var(--color-bg-muted);font-family:var(--font-family-mono);font-size:1em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary);font-variant-numeric:tabular-nums;appearance:none;cursor:text}.ea-time-picker__value::selection{background-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__value:hover{border-color:var(--color-border-default)}.ea-time-picker__value:focus{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__value:focus{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__value:focus{background-color:var(--color-bg-base)}.ea-time-picker__separator{font-family:var(--font-family-mono);font-size:1em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);-webkit-user-select:none;user-select:none}.ea-time-picker__period{display:flex;flex-direction:column;gap:.25em;margin-inline-start:.25em}.ea-time-picker__period-option{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:3.33em;padding:.33em .66em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:.75em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__period-option:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__period-option:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__period-option:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__period-option--active{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__period-option--active:hover{background-color:var(--color-brand-hover);border-color:var(--color-brand-hover);color:var(--color-text-inverse)}@media(forced-colors:active){.ea-time-picker__period-option--active{background-color:Highlight;border-color:Highlight;color:HighlightText}}\n"] }]
+                    ], template: "<div class=\"ea-time-picker-field\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [forId]=\"id()\"\n      [required]=\"required()\" />\n  }\n\n  <div class=\"ea-time-picker\">\n    <div\n      class=\"ea-time-picker__trigger-wrapper\"\n      [ngClass]=\"wrapperClasses()\">\n      <button\n        #triggerEl\n        type=\"button\"\n        class=\"ea-time-picker__trigger\"\n        [ngClass]=\"triggerClasses()\"\n        [id]=\"id()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-controls]=\"isOpen() ? popoverId() : null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (click)=\"toggle()\"\n        (keydown)=\"handleTriggerKeydown($event)\">\n        <ea-icon-clock\n          class=\"ea-time-picker__trigger-icon\"\n          aria-hidden=\"true\" />\n        <span class=\"ea-time-picker__trigger-value\">\n          <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n        </span>\n      </button>\n      @if (hasValue() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"ea-time-picker__clear\"\n          [attr.aria-label]=\"i18n.messages().timePicker.clear\"\n          (click)=\"clear($event)\">\n          <ea-icon-x\n            class=\"ea-time-picker__clear-icon\"\n            aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <ea-popover\n      [anchor]=\"triggerEl\"\n      [open]=\"isOpen()\"\n      placement=\"bottom-start\"\n      role=\"dialog\"\n      [aria-label]=\"i18n.messages().timePicker.dialogLabel\"\n      [surfaceId]=\"popoverId()\"\n      [trapFocus]=\"true\"\n      [closeOnEscape]=\"false\"\n      scrollBehavior=\"close\"\n      (closeRequested)=\"onPopoverCloseRequested()\">\n      <div\n        class=\"ea-time-picker__popover\"\n        [ngClass]=\"popoverClasses()\"\n        (keydown.escape)=\"onPopoverEscape($event)\">\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementHours\"\n            (click)=\"onStepClick('hours', 1, $event)\"\n            (mousedown)=\"startHold('hours', 1, $event)\"\n            (touchstart)=\"startHold('hours', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #hoursEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.hoursLabel\"\n            [attr.aria-valuemin]=\"format() === '24h' ? 0 : 1\"\n            [attr.aria-valuemax]=\"format() === '24h' ? 23 : 12\"\n            [attr.aria-valuenow]=\"displayHours()\"\n            [value]=\"hoursText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('hours', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'hours')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementHours\"\n            (click)=\"onStepClick('hours', -1, $event)\"\n            (mousedown)=\"startHold('hours', -1, $event)\"\n            (touchstart)=\"startHold('hours', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <span\n          class=\"ea-time-picker__separator\"\n          aria-hidden=\"true\">\n          :\n        </span>\n\n        <div class=\"ea-time-picker__column\">\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.incrementMinutes\"\n            (click)=\"onStepClick('minutes', 1, $event)\"\n            (mousedown)=\"startHold('minutes', 1, $event)\"\n            (touchstart)=\"startHold('minutes', 1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-up aria-hidden=\"true\" />\n          </button>\n          <input\n            #minutesEl\n            type=\"text\"\n            class=\"ea-time-picker__value\"\n            inputmode=\"numeric\"\n            autocomplete=\"off\"\n            maxlength=\"2\"\n            role=\"spinbutton\"\n            [attr.aria-label]=\"i18n.messages().timePicker.minutesLabel\"\n            [attr.aria-valuemin]=\"0\"\n            [attr.aria-valuemax]=\"59\"\n            [attr.aria-valuenow]=\"parsed().minutes\"\n            [value]=\"minutesText()\"\n            (focus)=\"onSpinnerFocus($event)\"\n            (input)=\"onSpinnerInput('minutes', $event)\"\n            (keydown)=\"handlePopoverKeydown($event, 'minutes')\"\n            (blur)=\"onSpinnerBlur()\" />\n          <button\n            type=\"button\"\n            class=\"ea-time-picker__step\"\n            [attr.aria-label]=\"i18n.messages().timePicker.decrementMinutes\"\n            (click)=\"onStepClick('minutes', -1, $event)\"\n            (mousedown)=\"startHold('minutes', -1, $event)\"\n            (touchstart)=\"startHold('minutes', -1, $event)\"\n            (mouseup)=\"stopHold()\"\n            (mouseleave)=\"stopHold()\"\n            (touchend)=\"stopHold()\"\n            (touchcancel)=\"stopHold()\">\n            <ea-icon-chevron-down aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        @if (includeSeconds()) {\n          <span\n            class=\"ea-time-picker__separator\"\n            aria-hidden=\"true\">\n            :\n          </span>\n          <div class=\"ea-time-picker__column\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.incrementSeconds\"\n              (click)=\"onStepClick('seconds', 1, $event)\"\n              (mousedown)=\"startHold('seconds', 1, $event)\"\n              (touchstart)=\"startHold('seconds', 1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-up aria-hidden=\"true\" />\n            </button>\n            <input\n              #secondsEl\n              type=\"text\"\n              class=\"ea-time-picker__value\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              maxlength=\"2\"\n              role=\"spinbutton\"\n              [attr.aria-label]=\"i18n.messages().timePicker.secondsLabel\"\n              [attr.aria-valuemin]=\"0\"\n              [attr.aria-valuemax]=\"59\"\n              [attr.aria-valuenow]=\"parsed().seconds\"\n              [value]=\"secondsText()\"\n              (focus)=\"onSpinnerFocus($event)\"\n              (input)=\"onSpinnerInput('seconds', $event)\"\n              (keydown)=\"handlePopoverKeydown($event, 'seconds')\"\n              (blur)=\"onSpinnerBlur()\" />\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__step\"\n              [attr.aria-label]=\"i18n.messages().timePicker.decrementSeconds\"\n              (click)=\"onStepClick('seconds', -1, $event)\"\n              (mousedown)=\"startHold('seconds', -1, $event)\"\n              (touchstart)=\"startHold('seconds', -1, $event)\"\n              (mouseup)=\"stopHold()\"\n              (mouseleave)=\"stopHold()\"\n              (touchend)=\"stopHold()\"\n              (touchcancel)=\"stopHold()\">\n              <ea-icon-chevron-down aria-hidden=\"true\" />\n            </button>\n          </div>\n        }\n\n        @if (format() === '12h') {\n          <div class=\"ea-time-picker__period\">\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'AM'\"\n              [attr.aria-pressed]=\"period() === 'AM'\"\n              (click)=\"period() === 'PM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.amLabel }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"ea-time-picker__period-option\"\n              [class.ea-time-picker__period-option--active]=\"period() === 'PM'\"\n              [attr.aria-pressed]=\"period() === 'PM'\"\n              (click)=\"period() === 'AM' && togglePeriod()\">\n              {{ i18n.messages().timePicker.pmLabel }}\n            </button>\n          </div>\n        }\n      </div>\n    </ea-popover>\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-time-picker-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-time-picker,.ea-time-picker__trigger-wrapper{position:relative}.ea-time-picker__trigger-wrapper--xs{font-size:var(--font-size-xs)}.ea-time-picker__trigger-wrapper--sm{font-size:var(--font-size-sm)}.ea-time-picker__trigger-wrapper--md{font-size:var(--font-size-md)}.ea-time-picker__trigger-wrapper--lg{font-size:var(--font-size-lg)}.ea-time-picker__trigger-wrapper--xl{font-size:var(--font-size-xl)}.ea-time-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);text-align:start;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-time-picker__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--error{border-color:var(--color-error-default)}.ea-time-picker__trigger--error.ea-time-picker__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-time-picker__trigger--error.ea-time-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-time-picker__trigger--placeholder .ea-time-picker__trigger-value{color:var(--color-text-tertiary)}.ea-time-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-time-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}.ea-time-picker__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-time-picker__clear>*{font-size:1.25em}.ea-time-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__clear:disabled{cursor:not-allowed;opacity:.5}.ea-time-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-time-picker__popover{display:flex;align-items:center;gap:.5em;padding:.75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-time-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-time-picker__popover{border:1px solid CanvasText}}.ea-time-picker__popover--xs{font-size:var(--font-size-xs)}.ea-time-picker__popover--sm{font-size:var(--font-size-sm)}.ea-time-picker__popover--md{font-size:var(--font-size-md)}.ea-time-picker__popover--lg{font-size:var(--font-size-lg)}.ea-time-picker__popover--xl{font-size:var(--font-size-xl)}.ea-time-picker__column{display:flex;flex-direction:column;align-items:stretch;gap:.25em}.ea-time-picker__step{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-time-picker__step>*{font-size:1.25em}.ea-time-picker__step:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__step:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__step:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__step:disabled{cursor:not-allowed;opacity:.5}.ea-time-picker__step{width:2.25em}.ea-time-picker__step ea-icon-chevron-up,.ea-time-picker__step ea-icon-chevron-down{width:1em;height:1em}.ea-time-picker__value{width:2.25em;height:2.25em;padding:0;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-sm);background-color:var(--color-bg-muted);font-family:var(--font-family-mono);font-size:1em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary);font-variant-numeric:tabular-nums;appearance:none;cursor:text}.ea-time-picker__value::selection{background-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__value:hover{border-color:var(--color-border-default)}.ea-time-picker__value:focus{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__value:focus{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__value:focus{background-color:var(--color-bg-base)}.ea-time-picker__separator{font-family:var(--font-family-mono);font-size:1em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);-webkit-user-select:none;user-select:none}.ea-time-picker__period{display:flex;flex-direction:column;gap:.25em;margin-inline-start:.25em}.ea-time-picker__period-option{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:3.33em;padding:.33em .66em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);font-family:var(--font-family-sans);font-size:.75em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-time-picker__period-option:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__period-option:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-time-picker__period-option:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__period-option--active{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-time-picker__period-option--active:hover{background-color:var(--color-brand-hover);border-color:var(--color-brand-hover);color:var(--color-text-inverse)}@media(forced-colors:active){.ea-time-picker__period-option--active{background-color:Highlight;border-color:Highlight;color:HighlightText}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], hoursEl: [{ type: i0.ViewChild, args: ['hoursEl', { isSignal: true }] }], minutesEl: [{ type: i0.ViewChild, args: ['minutesEl', { isSignal: true }] }], secondsEl: [{ type: i0.ViewChild, args: ['secondsEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], includeSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "includeSeconds", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], secondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 /** Delay before a held chevron button starts repeating, in ms. */
 const HOLD_INITIAL_DELAY = 400;
@@ -15676,6 +15751,9 @@ class TransferListComponent {
     }, ...(ngDevMode ? [{ debugName: "canMoveAllLeft" }] : /* istanbul ignore next */ []));
     resolvedSourceLabel = computed(() => this.sourceLabel() ?? this.messages().transferList.sourceLabel, ...(ngDevMode ? [{ debugName: "resolvedSourceLabel" }] : /* istanbul ignore next */ []));
     resolvedTargetLabel = computed(() => this.targetLabel() ?? this.messages().transferList.targetLabel, ...(ngDevMode ? [{ debugName: "resolvedTargetLabel" }] : /* istanbul ignore next */ []));
+    // Moves rearrange both panes at once, which a screen reader has no way to
+    // report on its own, so each transfer is summarized in a live region.
+    announcement = signal('', ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => [
         'ea-transfer-list',
         `ea-transfer-list--${this.size()}`,
@@ -15812,6 +15890,7 @@ class TransferListComponent {
         const toMove = Array.from(highlighted).filter(id => sourceIds.has(id));
         this.selectedIds.set([...this.selectedIds(), ...toMove]);
         this.leftHighlighted.set(new Set());
+        this.announceMove(toMove.length, this.resolvedTargetLabel());
     }
     moveAllRight() {
         if (!this.canMoveAllRight()) {
@@ -15822,6 +15901,7 @@ class TransferListComponent {
             .map(i => i.id);
         this.selectedIds.set([...this.selectedIds(), ...moveable]);
         this.leftHighlighted.set(new Set());
+        this.announceMove(moveable.length, this.resolvedTargetLabel());
     }
     moveSelectedLeft() {
         if (!this.canMoveLeft()) {
@@ -15834,6 +15914,7 @@ class TransferListComponent {
         const toRemove = new Set(Array.from(highlighted).filter(id => targetIds.has(id)));
         this.selectedIds.set(this.selectedIds().filter(id => !toRemove.has(id)));
         this.rightHighlighted.set(new Set());
+        this.announceMove(toRemove.size, this.resolvedSourceLabel());
     }
     moveAllLeft() {
         if (!this.canMoveAllLeft()) {
@@ -15842,11 +15923,18 @@ class TransferListComponent {
         const stickyIds = new Set(this.targetItems()
             .filter(i => i.disabled)
             .map(i => i.id));
+        const movedCount = this.targetItems().filter(i => !i.disabled).length;
         this.selectedIds.set(this.selectedIds().filter(id => stickyIds.has(id)));
         this.rightHighlighted.set(new Set());
+        this.announceMove(movedCount, this.resolvedSourceLabel());
+    }
+    announceMove(count, listLabel) {
+        if (count > 0) {
+            this.announcement.set(this.messages().transferList.moved(`${count}`, listLabel));
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TransferListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TransferListComponent, isStandalone: true, selector: "ea-transfer-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, sourceLabel: { classPropertyName: "sourceLabel", publicName: "sourceLabel", isSignal: true, isRequired: false, transformFunction: null }, targetLabel: { classPropertyName: "targetLabel", publicName: "targetLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIds: "selectedIdsChange" }, ngImport: i0, template: "<div [class]=\"hostClasses()\">\n  <div class=\"ea-transfer-list__pane\">\n    @if (resolvedSourceLabel()) {\n      <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedSourceLabel() }}</h3>\n    }\n    <ul\n      class=\"ea-transfer-list__list\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-label]=\"resolvedSourceLabel() || messages().transferList.sourceLabel\"\n      [attr.aria-disabled]=\"disabled() || null\">\n      @for (item of sourceItems(); track item.id) {\n        <li\n          class=\"ea-transfer-list__item\"\n          role=\"option\"\n          [attr.aria-selected]=\"isHighlighted('source', item.id)\"\n          [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n          [class.ea-transfer-list__item--highlighted]=\"isHighlighted('source', item.id)\"\n          [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n          [attr.tabindex]=\"itemTabindex('source', $index, item)\"\n          (click)=\"onItemClick('source', item, $event)\"\n          (keydown)=\"onItemKeydown($event, 'source', item)\">\n          {{ item.label }}\n        </li>\n      } @empty {\n        <li\n          class=\"ea-transfer-list__empty\"\n          aria-hidden=\"true\">\n          {{ messages().transferList.empty }}\n        </li>\n      }\n    </ul>\n  </div>\n\n  <div\n    class=\"ea-transfer-list__buttons\"\n    role=\"group\"\n    [attr.aria-label]=\"messages().transferList.controlsLabel\">\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveAllToTarget\"\n      [disabled]=\"!canMoveAllRight()\"\n      (click)=\"moveAllRight()\">\n      <ea-icon-chevrons-right class=\"ea-rtl-flip\" />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveSelectedToTarget\"\n      [disabled]=\"!canMoveRight()\"\n      (click)=\"moveSelectedRight()\">\n      <ea-icon-chevron-right class=\"ea-rtl-flip\" />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveSelectedToSource\"\n      [disabled]=\"!canMoveLeft()\"\n      (click)=\"moveSelectedLeft()\">\n      <ea-icon-chevron-left class=\"ea-rtl-flip\" />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveAllToSource\"\n      [disabled]=\"!canMoveAllLeft()\"\n      (click)=\"moveAllLeft()\">\n      <ea-icon-chevrons-left class=\"ea-rtl-flip\" />\n    </button>\n  </div>\n\n  <div class=\"ea-transfer-list__pane\">\n    @if (resolvedTargetLabel()) {\n      <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedTargetLabel() }}</h3>\n    }\n    <ul\n      class=\"ea-transfer-list__list\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-label]=\"resolvedTargetLabel() || messages().transferList.targetLabel\"\n      [attr.aria-disabled]=\"disabled() || null\">\n      @for (item of targetItems(); track item.id) {\n        <li\n          class=\"ea-transfer-list__item\"\n          role=\"option\"\n          [attr.aria-selected]=\"isHighlighted('target', item.id)\"\n          [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n          [class.ea-transfer-list__item--highlighted]=\"isHighlighted('target', item.id)\"\n          [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n          [attr.tabindex]=\"itemTabindex('target', $index, item)\"\n          (click)=\"onItemClick('target', item, $event)\"\n          (keydown)=\"onItemKeydown($event, 'target', item)\">\n          {{ item.label }}\n        </li>\n      } @empty {\n        <li\n          class=\"ea-transfer-list__empty\"\n          aria-hidden=\"true\">\n          {{ messages().transferList.empty }}\n        </li>\n      }\n    </ul>\n  </div>\n</div>\n", styles: [":host{display:block}.ea-transfer-list{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-3);color:var(--color-text-primary)}.ea-transfer-list__pane{display:flex;flex-direction:column;min-width:0;gap:var(--space-2)}.ea-transfer-list__pane-label{margin:0;font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-transfer-list__list{display:flex;flex:1;flex-direction:column;gap:2px;min-height:10em;padding:var(--space-1);margin:0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);list-style:none}.ea-transfer-list__list:focus-visible{outline:none}.ea-transfer-list__item{padding:.5em .75em;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-colors);-webkit-user-select:none;user-select:none}.ea-transfer-list__item:hover:not(.ea-transfer-list__item--disabled){background-color:var(--color-state-hover)}.ea-transfer-list__item:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-transfer-list__item:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-transfer-list__item--highlighted{background-color:var(--color-brand-subtle, var(--color-state-hover));color:var(--color-text-primary)}@media(forced-colors:active){.ea-transfer-list__item--highlighted{background-color:Highlight;color:HighlightText}}.ea-transfer-list__item--disabled{opacity:.5;cursor:not-allowed}.ea-transfer-list__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-transfer-list__buttons{display:flex;flex-direction:column;align-self:center;gap:var(--space-2)}.ea-transfer-list__button{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-transfer-list__button>*{font-size:1.25em}.ea-transfer-list__button:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-transfer-list__button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-transfer-list__button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-transfer-list__button:disabled{cursor:not-allowed;opacity:.5}.ea-transfer-list__button{--ea-icon-button-size: 2em;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)}.ea-transfer-list__button:hover:not(:disabled){border-color:var(--color-border-strong)}.ea-transfer-list--xs{font-size:var(--font-size-xs)}.ea-transfer-list--sm{font-size:var(--font-size-sm)}.ea-transfer-list--md{font-size:var(--font-size-md)}.ea-transfer-list--lg{font-size:var(--font-size-lg)}.ea-transfer-list--xl{font-size:var(--font-size-xl)}.ea-transfer-list--disabled{pointer-events:none;opacity:.6}\n"], dependencies: [{ kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }, { kind: "component", type: ChevronsLeftIconComponent, selector: "ea-icon-chevrons-left" }, { kind: "component", type: ChevronsRightIconComponent, selector: "ea-icon-chevrons-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TransferListComponent, isStandalone: true, selector: "ea-transfer-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, sourceLabel: { classPropertyName: "sourceLabel", publicName: "sourceLabel", isSignal: true, isRequired: false, transformFunction: null }, targetLabel: { classPropertyName: "targetLabel", publicName: "targetLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIds: "selectedIdsChange" }, ngImport: i0, template: "<div [class]=\"hostClasses()\">\n  <div class=\"ea-transfer-list__pane\">\n    @if (resolvedSourceLabel()) {\n      <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedSourceLabel() }}</h3>\n    }\n    <ul\n      class=\"ea-transfer-list__list\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-label]=\"resolvedSourceLabel() || messages().transferList.sourceLabel\"\n      [attr.aria-disabled]=\"disabled() || null\">\n      @for (item of sourceItems(); track item.id) {\n        <li\n          class=\"ea-transfer-list__item\"\n          role=\"option\"\n          [attr.aria-selected]=\"isHighlighted('source', item.id)\"\n          [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n          [class.ea-transfer-list__item--highlighted]=\"isHighlighted('source', item.id)\"\n          [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n          [attr.tabindex]=\"itemTabindex('source', $index, item)\"\n          (click)=\"onItemClick('source', item, $event)\"\n          (keydown)=\"onItemKeydown($event, 'source', item)\">\n          {{ item.label }}\n        </li>\n      } @empty {\n        <li\n          class=\"ea-transfer-list__empty\"\n          aria-hidden=\"true\">\n          {{ messages().transferList.empty }}\n        </li>\n      }\n    </ul>\n  </div>\n\n  <div\n    class=\"ea-transfer-list__buttons\"\n    role=\"group\"\n    [attr.aria-label]=\"messages().transferList.controlsLabel\">\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveAllToTarget\"\n      [disabled]=\"!canMoveAllRight()\"\n      (click)=\"moveAllRight()\">\n      <ea-icon-chevrons-right class=\"ea-rtl-flip\" />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveSelectedToTarget\"\n      [disabled]=\"!canMoveRight()\"\n      (click)=\"moveSelectedRight()\">\n      <ea-icon-chevron-right class=\"ea-rtl-flip\" />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveSelectedToSource\"\n      [disabled]=\"!canMoveLeft()\"\n      (click)=\"moveSelectedLeft()\">\n      <ea-icon-chevron-left class=\"ea-rtl-flip\" />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveAllToSource\"\n      [disabled]=\"!canMoveAllLeft()\"\n      (click)=\"moveAllLeft()\">\n      <ea-icon-chevrons-left class=\"ea-rtl-flip\" />\n    </button>\n  </div>\n\n  <div class=\"ea-transfer-list__pane\">\n    @if (resolvedTargetLabel()) {\n      <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedTargetLabel() }}</h3>\n    }\n    <ul\n      class=\"ea-transfer-list__list\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-label]=\"resolvedTargetLabel() || messages().transferList.targetLabel\"\n      [attr.aria-disabled]=\"disabled() || null\">\n      @for (item of targetItems(); track item.id) {\n        <li\n          class=\"ea-transfer-list__item\"\n          role=\"option\"\n          [attr.aria-selected]=\"isHighlighted('target', item.id)\"\n          [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n          [class.ea-transfer-list__item--highlighted]=\"isHighlighted('target', item.id)\"\n          [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n          [attr.tabindex]=\"itemTabindex('target', $index, item)\"\n          (click)=\"onItemClick('target', item, $event)\"\n          (keydown)=\"onItemKeydown($event, 'target', item)\">\n          {{ item.label }}\n        </li>\n      } @empty {\n        <li\n          class=\"ea-transfer-list__empty\"\n          aria-hidden=\"true\">\n          {{ messages().transferList.empty }}\n        </li>\n      }\n    </ul>\n  </div>\n\n  <p\n    class=\"ea-transfer-list__announcement\"\n    role=\"status\">\n    {{ announcement() }}\n  </p>\n</div>\n", styles: [":host{display:block}.ea-transfer-list{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-3);color:var(--color-text-primary)}.ea-transfer-list__pane{display:flex;flex-direction:column;min-width:0;gap:var(--space-2)}.ea-transfer-list__pane-label{margin:0;font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-transfer-list__list{display:flex;flex:1;flex-direction:column;gap:2px;min-height:10em;padding:var(--space-1);margin:0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);list-style:none}.ea-transfer-list__list:focus-visible{outline:none}.ea-transfer-list__item{padding:.5em .75em;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-colors);-webkit-user-select:none;user-select:none}.ea-transfer-list__item:hover:not(.ea-transfer-list__item--disabled){background-color:var(--color-state-hover)}.ea-transfer-list__item:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-transfer-list__item:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-transfer-list__item--highlighted{background-color:var(--color-brand-subtle, var(--color-state-hover));color:var(--color-text-primary)}@media(forced-colors:active){.ea-transfer-list__item--highlighted{background-color:Highlight;color:HighlightText}}.ea-transfer-list__item--disabled{opacity:.5;cursor:not-allowed}.ea-transfer-list__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-transfer-list__buttons{display:flex;flex-direction:column;align-self:center;gap:var(--space-2)}.ea-transfer-list__button{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-transfer-list__button>*{font-size:1.25em}.ea-transfer-list__button:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-transfer-list__button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-transfer-list__button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-transfer-list__button:disabled{cursor:not-allowed;opacity:.5}.ea-transfer-list__button{--ea-icon-button-size: 2em;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)}.ea-transfer-list__button:hover:not(:disabled){border-color:var(--color-border-strong)}.ea-transfer-list--xs{font-size:var(--font-size-xs)}.ea-transfer-list--sm{font-size:var(--font-size-sm)}.ea-transfer-list--md{font-size:var(--font-size-md)}.ea-transfer-list--lg{font-size:var(--font-size-lg)}.ea-transfer-list--xl{font-size:var(--font-size-xl)}.ea-transfer-list--disabled{pointer-events:none;opacity:.6}.ea-transfer-list__announcement{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }, { kind: "component", type: ChevronsLeftIconComponent, selector: "ea-icon-chevrons-left" }, { kind: "component", type: ChevronsRightIconComponent, selector: "ea-icon-chevrons-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TransferListComponent, decorators: [{
             type: Component,
@@ -15855,7 +15943,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                         ChevronRightIconComponent,
                         ChevronsLeftIconComponent,
                         ChevronsRightIconComponent,
-                    ], template: "<div [class]=\"hostClasses()\">\n  <div class=\"ea-transfer-list__pane\">\n    @if (resolvedSourceLabel()) {\n      <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedSourceLabel() }}</h3>\n    }\n    <ul\n      class=\"ea-transfer-list__list\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-label]=\"resolvedSourceLabel() || messages().transferList.sourceLabel\"\n      [attr.aria-disabled]=\"disabled() || null\">\n      @for (item of sourceItems(); track item.id) {\n        <li\n          class=\"ea-transfer-list__item\"\n          role=\"option\"\n          [attr.aria-selected]=\"isHighlighted('source', item.id)\"\n          [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n          [class.ea-transfer-list__item--highlighted]=\"isHighlighted('source', item.id)\"\n          [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n          [attr.tabindex]=\"itemTabindex('source', $index, item)\"\n          (click)=\"onItemClick('source', item, $event)\"\n          (keydown)=\"onItemKeydown($event, 'source', item)\">\n          {{ item.label }}\n        </li>\n      } @empty {\n        <li\n          class=\"ea-transfer-list__empty\"\n          aria-hidden=\"true\">\n          {{ messages().transferList.empty }}\n        </li>\n      }\n    </ul>\n  </div>\n\n  <div\n    class=\"ea-transfer-list__buttons\"\n    role=\"group\"\n    [attr.aria-label]=\"messages().transferList.controlsLabel\">\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveAllToTarget\"\n      [disabled]=\"!canMoveAllRight()\"\n      (click)=\"moveAllRight()\">\n      <ea-icon-chevrons-right class=\"ea-rtl-flip\" />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveSelectedToTarget\"\n      [disabled]=\"!canMoveRight()\"\n      (click)=\"moveSelectedRight()\">\n      <ea-icon-chevron-right class=\"ea-rtl-flip\" />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveSelectedToSource\"\n      [disabled]=\"!canMoveLeft()\"\n      (click)=\"moveSelectedLeft()\">\n      <ea-icon-chevron-left class=\"ea-rtl-flip\" />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveAllToSource\"\n      [disabled]=\"!canMoveAllLeft()\"\n      (click)=\"moveAllLeft()\">\n      <ea-icon-chevrons-left class=\"ea-rtl-flip\" />\n    </button>\n  </div>\n\n  <div class=\"ea-transfer-list__pane\">\n    @if (resolvedTargetLabel()) {\n      <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedTargetLabel() }}</h3>\n    }\n    <ul\n      class=\"ea-transfer-list__list\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-label]=\"resolvedTargetLabel() || messages().transferList.targetLabel\"\n      [attr.aria-disabled]=\"disabled() || null\">\n      @for (item of targetItems(); track item.id) {\n        <li\n          class=\"ea-transfer-list__item\"\n          role=\"option\"\n          [attr.aria-selected]=\"isHighlighted('target', item.id)\"\n          [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n          [class.ea-transfer-list__item--highlighted]=\"isHighlighted('target', item.id)\"\n          [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n          [attr.tabindex]=\"itemTabindex('target', $index, item)\"\n          (click)=\"onItemClick('target', item, $event)\"\n          (keydown)=\"onItemKeydown($event, 'target', item)\">\n          {{ item.label }}\n        </li>\n      } @empty {\n        <li\n          class=\"ea-transfer-list__empty\"\n          aria-hidden=\"true\">\n          {{ messages().transferList.empty }}\n        </li>\n      }\n    </ul>\n  </div>\n</div>\n", styles: [":host{display:block}.ea-transfer-list{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-3);color:var(--color-text-primary)}.ea-transfer-list__pane{display:flex;flex-direction:column;min-width:0;gap:var(--space-2)}.ea-transfer-list__pane-label{margin:0;font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-transfer-list__list{display:flex;flex:1;flex-direction:column;gap:2px;min-height:10em;padding:var(--space-1);margin:0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);list-style:none}.ea-transfer-list__list:focus-visible{outline:none}.ea-transfer-list__item{padding:.5em .75em;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-colors);-webkit-user-select:none;user-select:none}.ea-transfer-list__item:hover:not(.ea-transfer-list__item--disabled){background-color:var(--color-state-hover)}.ea-transfer-list__item:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-transfer-list__item:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-transfer-list__item--highlighted{background-color:var(--color-brand-subtle, var(--color-state-hover));color:var(--color-text-primary)}@media(forced-colors:active){.ea-transfer-list__item--highlighted{background-color:Highlight;color:HighlightText}}.ea-transfer-list__item--disabled{opacity:.5;cursor:not-allowed}.ea-transfer-list__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-transfer-list__buttons{display:flex;flex-direction:column;align-self:center;gap:var(--space-2)}.ea-transfer-list__button{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-transfer-list__button>*{font-size:1.25em}.ea-transfer-list__button:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-transfer-list__button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-transfer-list__button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-transfer-list__button:disabled{cursor:not-allowed;opacity:.5}.ea-transfer-list__button{--ea-icon-button-size: 2em;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)}.ea-transfer-list__button:hover:not(:disabled){border-color:var(--color-border-strong)}.ea-transfer-list--xs{font-size:var(--font-size-xs)}.ea-transfer-list--sm{font-size:var(--font-size-sm)}.ea-transfer-list--md{font-size:var(--font-size-md)}.ea-transfer-list--lg{font-size:var(--font-size-lg)}.ea-transfer-list--xl{font-size:var(--font-size-xl)}.ea-transfer-list--disabled{pointer-events:none;opacity:.6}\n"] }]
+                    ], template: "<div [class]=\"hostClasses()\">\n  <div class=\"ea-transfer-list__pane\">\n    @if (resolvedSourceLabel()) {\n      <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedSourceLabel() }}</h3>\n    }\n    <ul\n      class=\"ea-transfer-list__list\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-label]=\"resolvedSourceLabel() || messages().transferList.sourceLabel\"\n      [attr.aria-disabled]=\"disabled() || null\">\n      @for (item of sourceItems(); track item.id) {\n        <li\n          class=\"ea-transfer-list__item\"\n          role=\"option\"\n          [attr.aria-selected]=\"isHighlighted('source', item.id)\"\n          [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n          [class.ea-transfer-list__item--highlighted]=\"isHighlighted('source', item.id)\"\n          [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n          [attr.tabindex]=\"itemTabindex('source', $index, item)\"\n          (click)=\"onItemClick('source', item, $event)\"\n          (keydown)=\"onItemKeydown($event, 'source', item)\">\n          {{ item.label }}\n        </li>\n      } @empty {\n        <li\n          class=\"ea-transfer-list__empty\"\n          aria-hidden=\"true\">\n          {{ messages().transferList.empty }}\n        </li>\n      }\n    </ul>\n  </div>\n\n  <div\n    class=\"ea-transfer-list__buttons\"\n    role=\"group\"\n    [attr.aria-label]=\"messages().transferList.controlsLabel\">\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveAllToTarget\"\n      [disabled]=\"!canMoveAllRight()\"\n      (click)=\"moveAllRight()\">\n      <ea-icon-chevrons-right class=\"ea-rtl-flip\" />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveSelectedToTarget\"\n      [disabled]=\"!canMoveRight()\"\n      (click)=\"moveSelectedRight()\">\n      <ea-icon-chevron-right class=\"ea-rtl-flip\" />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveSelectedToSource\"\n      [disabled]=\"!canMoveLeft()\"\n      (click)=\"moveSelectedLeft()\">\n      <ea-icon-chevron-left class=\"ea-rtl-flip\" />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ea-transfer-list__button\"\n      [attr.aria-label]=\"messages().transferList.moveAllToSource\"\n      [disabled]=\"!canMoveAllLeft()\"\n      (click)=\"moveAllLeft()\">\n      <ea-icon-chevrons-left class=\"ea-rtl-flip\" />\n    </button>\n  </div>\n\n  <div class=\"ea-transfer-list__pane\">\n    @if (resolvedTargetLabel()) {\n      <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedTargetLabel() }}</h3>\n    }\n    <ul\n      class=\"ea-transfer-list__list\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-label]=\"resolvedTargetLabel() || messages().transferList.targetLabel\"\n      [attr.aria-disabled]=\"disabled() || null\">\n      @for (item of targetItems(); track item.id) {\n        <li\n          class=\"ea-transfer-list__item\"\n          role=\"option\"\n          [attr.aria-selected]=\"isHighlighted('target', item.id)\"\n          [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n          [class.ea-transfer-list__item--highlighted]=\"isHighlighted('target', item.id)\"\n          [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n          [attr.tabindex]=\"itemTabindex('target', $index, item)\"\n          (click)=\"onItemClick('target', item, $event)\"\n          (keydown)=\"onItemKeydown($event, 'target', item)\">\n          {{ item.label }}\n        </li>\n      } @empty {\n        <li\n          class=\"ea-transfer-list__empty\"\n          aria-hidden=\"true\">\n          {{ messages().transferList.empty }}\n        </li>\n      }\n    </ul>\n  </div>\n\n  <p\n    class=\"ea-transfer-list__announcement\"\n    role=\"status\">\n    {{ announcement() }}\n  </p>\n</div>\n", styles: [":host{display:block}.ea-transfer-list{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-3);color:var(--color-text-primary)}.ea-transfer-list__pane{display:flex;flex-direction:column;min-width:0;gap:var(--space-2)}.ea-transfer-list__pane-label{margin:0;font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-transfer-list__list{display:flex;flex:1;flex-direction:column;gap:2px;min-height:10em;padding:var(--space-1);margin:0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);list-style:none}.ea-transfer-list__list:focus-visible{outline:none}.ea-transfer-list__item{padding:.5em .75em;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-colors);-webkit-user-select:none;user-select:none}.ea-transfer-list__item:hover:not(.ea-transfer-list__item--disabled){background-color:var(--color-state-hover)}.ea-transfer-list__item:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-transfer-list__item:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-transfer-list__item--highlighted{background-color:var(--color-brand-subtle, var(--color-state-hover));color:var(--color-text-primary)}@media(forced-colors:active){.ea-transfer-list__item--highlighted{background-color:Highlight;color:HighlightText}}.ea-transfer-list__item--disabled{opacity:.5;cursor:not-allowed}.ea-transfer-list__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-transfer-list__buttons{display:flex;flex-direction:column;align-self:center;gap:var(--space-2)}.ea-transfer-list__button{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-transfer-list__button>*{font-size:1.25em}.ea-transfer-list__button:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-transfer-list__button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-transfer-list__button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-transfer-list__button:disabled{cursor:not-allowed;opacity:.5}.ea-transfer-list__button{--ea-icon-button-size: 2em;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)}.ea-transfer-list__button:hover:not(:disabled){border-color:var(--color-border-strong)}.ea-transfer-list--xs{font-size:var(--font-size-xs)}.ea-transfer-list--sm{font-size:var(--font-size-sm)}.ea-transfer-list--md{font-size:var(--font-size-md)}.ea-transfer-list--lg{font-size:var(--font-size-lg)}.ea-transfer-list--xl{font-size:var(--font-size-xl)}.ea-transfer-list--disabled{pointer-events:none;opacity:.6}.ea-transfer-list__announcement{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIds", required: false }] }, { type: i0.Output, args: ["selectedIdsChange"] }], sourceLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceLabel", required: false }] }], targetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /**