@eagami/ui 5.65.0 → 5.67.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +2 -0
  2. package/fesm2022/eagami-ui.mjs +122 -36
  3. package/fesm2022/eagami-ui.mjs.map +1 -1
  4. package/package.json +1 -1
  5. package/src/styles/_form-field.scss +0 -1
  6. package/types/eagami-ui.d.ts +62 -30
package/fesm2022/eagami-ui.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as i0 from "@angular/core";
2
2
  import { ApplicationRef, CSP_NONCE, ChangeDetectionStrategy, Component, DOCUMENT, DestroyRef, Directive, ElementRef, EnvironmentInjector, HostAttributeToken, HostBinding, HostListener, Injectable, InjectionToken, Injector, PLATFORM_ID, Renderer2, RendererStyleFlags2, TemplateRef, ViewContainerRef, ViewEncapsulation, afterNextRender, afterRenderEffect, computed, contentChild, createComponent, effect, forwardRef, inject, input, linkedSignal, makeEnvironmentProviders, model, output, provideEnvironmentInitializer, signal, untracked, viewChild, viewChildren } from "@angular/core";
3
3
  import { NgClass, NgComponentOutlet, NgTemplateOutlet, isPlatformBrowser } from "@angular/common";
4
- import { NG_VALUE_ACCESSOR, NgControl, TouchedChangeEvent } from "@angular/forms";
4
+ import { FormResetEvent, FormSubmittedEvent, NG_VALUE_ACCESSOR, NgControl, TouchedChangeEvent } from "@angular/forms";
5
5
  const EAGAMI_I18N_CONFIG = new InjectionToken("EAGAMI_I18N_CONFIG");
6
6
  const STYLE_TAG_ID = "eagami-palette";
7
7
  function applyPalette(palette, nonce) {
@@ -203,6 +203,11 @@ function derivePalette(config) {
203
203
  ...DEFAULT_PALETTE_ROLES,
204
204
  ...config.secondary.roles
205
205
  }, light, dark);
206
+ if (config.focus) {
207
+ const scale = derivePaletteScale(config.focus);
208
+ light["--color-border-focus"] = scale["500"];
209
+ dark["--color-border-focus"] = scale["300"];
210
+ }
206
211
  return {
207
212
  light,
208
213
  dark
@@ -273,6 +278,7 @@ function validatePalette(palette, surfaces = DEFAULT_SURFACES) {
273
278
  check(mode, "--color-brand-text", canvas, WCAG_AA.text, "text");
274
279
  check(mode, "--color-brand-default", onBrandText, WCAG_AA.text, "text");
275
280
  check(mode, "--color-brand-default", canvas, WCAG_AA.nonText, "non-text");
281
+ check(mode, "--color-border-focus", canvas, WCAG_AA.nonText, "non-text");
276
282
  }
277
283
  return violations;
278
284
  }
@@ -5426,32 +5432,83 @@ i0.ɵɵngDeclareClassMetadata({
5426
5432
  function controlErrorStateFrom(control, config) {
5427
5433
  const i18n = inject(EagamiI18nService);
5428
5434
  const press = inject(PointerPressTracker);
5435
+ const injector = inject(Injector);
5436
+ const destroyRef = inject(DestroyRef);
5437
+ const host = inject(ElementRef, { optional: true });
5429
5438
  const revision = signal(0, ...ngDevMode ? [{ debugName: "revision" }] : /* istanbul ignore next */ []);
5439
+ const editing = signal(false, ...ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []);
5440
+ const revealedBySubmit = signal(false, ...ngDevMode ? [{ debugName: "revealedBySubmit" }] : /* istanbul ignore next */ []);
5441
+ const passedThrough = signal(false, ...ngDevMode ? [{ debugName: "passedThrough" }] : /* istanbul ignore next */ []);
5430
5442
  const revealPending = signal(false, ...ngDevMode ? [{ debugName: "revealPending" }] : /* istanbul ignore next */ []);
5443
+ let dropPendingReveal = null;
5444
+ const holdRevealForPress = () => {
5445
+ dropPendingReveal?.();
5446
+ revealPending.set(true);
5447
+ dropPendingReveal = press.whenPressEnds(() => revealPending.set(false));
5448
+ };
5449
+ destroyRef.onDestroy(() => dropPendingReveal?.());
5431
5450
  effect((onCleanup) => {
5432
5451
  const ctrl = control();
5433
5452
  if (!ctrl) return;
5434
- let dropPendingReveal = null;
5453
+ const onSubmit = () => {
5454
+ revealedBySubmit.set(true);
5455
+ passedThrough.set(false);
5456
+ };
5435
5457
  const sub = ctrl.events.subscribe((event) => {
5436
- if (event instanceof TouchedChangeEvent && event.touched) {
5437
- dropPendingReveal?.();
5438
- revealPending.set(true);
5439
- dropPendingReveal = press.whenPressEnds(() => revealPending.set(false));
5458
+ if (event instanceof TouchedChangeEvent) {
5459
+ if (event.touched) holdRevealForPress();
5460
+ passedThrough.set(event.touched && editing() && ctrl.pristine);
5440
5461
  }
5462
+ if (event instanceof FormSubmittedEvent) onSubmit();
5463
+ if (event instanceof FormResetEvent) passedThrough.set(false);
5441
5464
  revision.update((r) => r + 1);
5442
5465
  });
5466
+ const rootSub = ctrl.root === ctrl ? null : ctrl.root.events.subscribe((event) => {
5467
+ if (event instanceof FormSubmittedEvent) onSubmit();
5468
+ if (event instanceof FormResetEvent) passedThrough.set(false);
5469
+ });
5443
5470
  onCleanup(() => {
5444
5471
  sub.unsubscribe();
5472
+ rootSub?.unsubscribe();
5445
5473
  dropPendingReveal?.();
5446
5474
  revealPending.set(false);
5447
5475
  });
5448
5476
  });
5449
- const autoError = computed(() => {
5477
+ if (host) afterNextRender(() => {
5478
+ const element = host.nativeElement;
5479
+ const onFocusIn = () => {
5480
+ editing.set(true);
5481
+ revealedBySubmit.set(false);
5482
+ };
5483
+ const onFocusOut = (event) => {
5484
+ if (event.relatedTarget instanceof Node && element.contains(event.relatedTarget)) return;
5485
+ editing.set(false);
5486
+ revealedBySubmit.set(false);
5487
+ holdRevealForPress();
5488
+ };
5489
+ editing.set(element.contains(document.activeElement));
5490
+ element.addEventListener("focusin", onFocusIn);
5491
+ element.addEventListener("focusout", onFocusOut);
5492
+ destroyRef.onDestroy(() => {
5493
+ element.removeEventListener("focusin", onFocusIn);
5494
+ element.removeEventListener("focusout", onFocusOut);
5495
+ });
5496
+ }, { injector });
5497
+ const validationError = computed(() => {
5450
5498
  revision();
5451
5499
  const ctrl = control();
5452
- if (revealPending() || !ctrl || !ctrl.invalid || !ctrl.touched || !ctrl.errors) return null;
5500
+ if (!ctrl || !ctrl.invalid || !ctrl.touched || !ctrl.errors) return null;
5501
+ if (ctrl.pristine && passedThrough()) return null;
5453
5502
  return resolveValidationMessage(ctrl.errors, config.errorMessages(), i18n.messages());
5454
- }, ...ngDevMode ? [{ debugName: "autoError" }] : /* istanbul ignore next */ []);
5503
+ }, ...ngDevMode ? [{ debugName: "validationError" }] : /* istanbul ignore next */ []);
5504
+ const autoError = linkedSignal({
5505
+ ...ngDevMode ? { debugName: "autoError" } : /* istanbul ignore next */ {},
5506
+ source: () => ({
5507
+ message: validationError(),
5508
+ holding: revealPending() || editing() && !revealedBySubmit()
5509
+ }),
5510
+ computation: ({ message, holding }, previous) => previous?.value || !holding ? message : null
5511
+ });
5455
5512
  const error = computed(() => config.errorMsg() || autoError(), ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
5456
5513
  return {
5457
5514
  error,
@@ -5471,7 +5528,7 @@ function injectControlErrorState(config) {
5471
5528
  return controlErrorStateFrom(control, config);
5472
5529
  }
5473
5530
  function resolveValidationMessage(errors, overrides, messages) {
5474
- const key = Object.keys(errors)[0];
5531
+ const key = Object.keys(errors).find((name) => overrides?.[name] !== null);
5475
5532
  if (!key) return null;
5476
5533
  const override = overrides?.[key];
5477
5534
  if (override) return override;
@@ -6531,7 +6588,7 @@ var AutocompleteComponent = class AutocompleteComponent {
6531
6588
  }],
6532
6589
  ngImport: i0,
6533
6590
  template: "<div class=\"ea-autocomplete ea-autocomplete--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [required]=\"required()\" />\n }\n\n <div\n #anchorEl\n class=\"ea-autocomplete__wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <span class=\"ea-autocomplete__prefix\">\n <ng-content select=\"[slot=prefix]\" />\n </span>\n\n <input\n #inputEl\n class=\"ea-autocomplete__input\"\n type=\"text\"\n dir=\"auto\"\n autocomplete=\"off\"\n role=\"combobox\"\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()\"\n [attr.aria-expanded]=\"showList()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-autocomplete]=\"'list'\"\n [attr.aria-controls]=\"id() + '-listbox'\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n \"\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 (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"handleKeydown($event)\" />\n\n <span class=\"ea-autocomplete__suffix\">\n <ng-content select=\"[slot=suffix]\" />\n </span>\n </div>\n\n <ea-popover\n [anchor]=\"anchorEl\"\n [open]=\"showList()\"\n placement=\"bottom-start\"\n role=\"listbox\"\n [aria-label]=\"label() ?? ariaLabel()\"\n [surfaceId]=\"id() + '-listbox'\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"close()\">\n <div\n class=\"ea-autocomplete__listbox\"\n [ngClass]=\"listboxClasses()\">\n @for (group of renderedGroups(); track $index) {\n <div\n class=\"ea-autocomplete__group\"\n [class.ea-autocomplete__group--ruled]=\"group.rule\"\n [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n [attr.aria-label]=\"group.label ?? null\">\n @if (group.label; as groupLabel) {\n <div\n class=\"ea-autocomplete__group-label\"\n aria-hidden=\"true\">\n {{ groupLabel }}\n </div>\n }\n @for (entry of group.options; track entry.option.value) {\n <div\n class=\"ea-autocomplete__option\"\n role=\"option\"\n [id]=\"id() + '-option-' + entry.index\"\n [class.ea-autocomplete__option--focused]=\"entry.index === focusedIndex()\"\n [class.ea-autocomplete__option--disabled]=\"entry.option.disabled\"\n [attr.aria-selected]=\"entry.index === selectedIndex()\"\n [attr.aria-disabled]=\"entry.option.disabled || null\"\n (mousedown)=\"selectOption(entry.option)\"\n (mouseenter)=\"focusedIndex.set(entry.index)\">\n {{ entry.option.label }}\n </div>\n }\n </div>\n }\n @if (showEmpty()) {\n <div\n class=\"ea-autocomplete__empty\"\n role=\"status\">\n {{ resolvedEmptyMessage() }}\n </div>\n }\n </div>\n </ea-popover>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
6534
- styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-autocomplete--2xs{font-size:var(--font-size-2xs)}.ea-autocomplete--xs{font-size:var(--font-size-xs)}.ea-autocomplete--sm{font-size:var(--font-size-sm)}.ea-autocomplete--md{font-size:var(--font-size-md)}.ea-autocomplete--lg{font-size:var(--font-size-lg)}.ea-autocomplete--xl{font-size:var(--font-size-xl)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-autocomplete__wrapper--focused{border-color:var(--color-border-focus);outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-autocomplete__wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--error{border-color:var(--color-error-default)}.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-autocomplete__wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-autocomplete__wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--readonly button{cursor:default}.ea-autocomplete__wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-autocomplete__input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--font-family-sans);color:var(--color-text-primary);outline:none}.ea-autocomplete__input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-autocomplete__input:disabled{cursor:default}.ea-autocomplete__prefix,.ea-autocomplete__suffix{display:flex;flex-shrink:0;align-items:center;color:var(--color-text-secondary)}.ea-autocomplete__prefix:empty,.ea-autocomplete__suffix:empty{display:none}.ea-autocomplete__listbox{overflow-y:auto;overscroll-behavior:none;max-height:15rem;padding:.25em 0;list-style:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-autocomplete-listbox-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-autocomplete__listbox{border:1px solid CanvasText}}.ea-autocomplete__listbox--2xs{font-size:var(--font-size-2xs)}.ea-autocomplete__listbox--xs{font-size:var(--font-size-xs)}.ea-autocomplete__listbox--sm{font-size:var(--font-size-sm)}.ea-autocomplete__listbox--md{font-size:var(--font-size-md)}.ea-autocomplete__listbox--lg{font-size:var(--font-size-lg)}.ea-autocomplete__listbox--xl{font-size:var(--font-size-xl)}.ea-autocomplete__group{position:relative}.ea-autocomplete__group--ruled{padding-top:.25em;margin-top:.25em}.ea-autocomplete__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-autocomplete__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-autocomplete__option{padding:.5em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-autocomplete__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-autocomplete__option--focused{background-color:Highlight;color:HighlightText}}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:default}@media(forced-colors:active){.ea-autocomplete__option--disabled{color:GrayText}}.ea-autocomplete__empty{padding:.5em .75em;font-size:inherit;font-style:italic;color:var(--color-text-tertiary)}\n"],
6591
+ styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-autocomplete--2xs{font-size:var(--font-size-2xs)}.ea-autocomplete--xs{font-size:var(--font-size-xs)}.ea-autocomplete--sm{font-size:var(--font-size-sm)}.ea-autocomplete--md{font-size:var(--font-size-md)}.ea-autocomplete--lg{font-size:var(--font-size-lg)}.ea-autocomplete--xl{font-size:var(--font-size-xl)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-autocomplete__wrapper--focused{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-autocomplete__wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--error{border-color:var(--color-error-default)}.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-autocomplete__wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-autocomplete__wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--readonly button{cursor:default}.ea-autocomplete__wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-autocomplete__input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--font-family-sans);color:var(--color-text-primary);outline:none}.ea-autocomplete__input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-autocomplete__input:disabled{cursor:default}.ea-autocomplete__prefix,.ea-autocomplete__suffix{display:flex;flex-shrink:0;align-items:center;color:var(--color-text-secondary)}.ea-autocomplete__prefix:empty,.ea-autocomplete__suffix:empty{display:none}.ea-autocomplete__listbox{overflow-y:auto;overscroll-behavior:none;max-height:15rem;padding:.25em 0;list-style:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-autocomplete-listbox-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-autocomplete__listbox{border:1px solid CanvasText}}.ea-autocomplete__listbox--2xs{font-size:var(--font-size-2xs)}.ea-autocomplete__listbox--xs{font-size:var(--font-size-xs)}.ea-autocomplete__listbox--sm{font-size:var(--font-size-sm)}.ea-autocomplete__listbox--md{font-size:var(--font-size-md)}.ea-autocomplete__listbox--lg{font-size:var(--font-size-lg)}.ea-autocomplete__listbox--xl{font-size:var(--font-size-xl)}.ea-autocomplete__group{position:relative}.ea-autocomplete__group--ruled{padding-top:.25em;margin-top:.25em}.ea-autocomplete__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-autocomplete__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-autocomplete__option{padding:.5em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-autocomplete__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-autocomplete__option--focused{background-color:Highlight;color:HighlightText}}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:default}@media(forced-colors:active){.ea-autocomplete__option--disabled{color:GrayText}}.ea-autocomplete__empty{padding:.5em .75em;font-size:inherit;font-style:italic;color:var(--color-text-tertiary)}\n"],
6535
6592
  dependencies: [
6536
6593
  {
6537
6594
  kind: "component",
@@ -6614,7 +6671,7 @@ i0.ɵɵngDeclareClassMetadata({
6614
6671
  multi: true
6615
6672
  }],
6616
6673
  template: "<div class=\"ea-autocomplete ea-autocomplete--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [required]=\"required()\" />\n }\n\n <div\n #anchorEl\n class=\"ea-autocomplete__wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <span class=\"ea-autocomplete__prefix\">\n <ng-content select=\"[slot=prefix]\" />\n </span>\n\n <input\n #inputEl\n class=\"ea-autocomplete__input\"\n type=\"text\"\n dir=\"auto\"\n autocomplete=\"off\"\n role=\"combobox\"\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()\"\n [attr.aria-expanded]=\"showList()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-autocomplete]=\"'list'\"\n [attr.aria-controls]=\"id() + '-listbox'\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n \"\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 (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"handleKeydown($event)\" />\n\n <span class=\"ea-autocomplete__suffix\">\n <ng-content select=\"[slot=suffix]\" />\n </span>\n </div>\n\n <ea-popover\n [anchor]=\"anchorEl\"\n [open]=\"showList()\"\n placement=\"bottom-start\"\n role=\"listbox\"\n [aria-label]=\"label() ?? ariaLabel()\"\n [surfaceId]=\"id() + '-listbox'\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"close()\">\n <div\n class=\"ea-autocomplete__listbox\"\n [ngClass]=\"listboxClasses()\">\n @for (group of renderedGroups(); track $index) {\n <div\n class=\"ea-autocomplete__group\"\n [class.ea-autocomplete__group--ruled]=\"group.rule\"\n [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n [attr.aria-label]=\"group.label ?? null\">\n @if (group.label; as groupLabel) {\n <div\n class=\"ea-autocomplete__group-label\"\n aria-hidden=\"true\">\n {{ groupLabel }}\n </div>\n }\n @for (entry of group.options; track entry.option.value) {\n <div\n class=\"ea-autocomplete__option\"\n role=\"option\"\n [id]=\"id() + '-option-' + entry.index\"\n [class.ea-autocomplete__option--focused]=\"entry.index === focusedIndex()\"\n [class.ea-autocomplete__option--disabled]=\"entry.option.disabled\"\n [attr.aria-selected]=\"entry.index === selectedIndex()\"\n [attr.aria-disabled]=\"entry.option.disabled || null\"\n (mousedown)=\"selectOption(entry.option)\"\n (mouseenter)=\"focusedIndex.set(entry.index)\">\n {{ entry.option.label }}\n </div>\n }\n </div>\n }\n @if (showEmpty()) {\n <div\n class=\"ea-autocomplete__empty\"\n role=\"status\">\n {{ resolvedEmptyMessage() }}\n </div>\n }\n </div>\n </ea-popover>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
6617
- styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-autocomplete--2xs{font-size:var(--font-size-2xs)}.ea-autocomplete--xs{font-size:var(--font-size-xs)}.ea-autocomplete--sm{font-size:var(--font-size-sm)}.ea-autocomplete--md{font-size:var(--font-size-md)}.ea-autocomplete--lg{font-size:var(--font-size-lg)}.ea-autocomplete--xl{font-size:var(--font-size-xl)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-autocomplete__wrapper--focused{border-color:var(--color-border-focus);outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-autocomplete__wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--error{border-color:var(--color-error-default)}.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-autocomplete__wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-autocomplete__wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--readonly button{cursor:default}.ea-autocomplete__wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-autocomplete__input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--font-family-sans);color:var(--color-text-primary);outline:none}.ea-autocomplete__input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-autocomplete__input:disabled{cursor:default}.ea-autocomplete__prefix,.ea-autocomplete__suffix{display:flex;flex-shrink:0;align-items:center;color:var(--color-text-secondary)}.ea-autocomplete__prefix:empty,.ea-autocomplete__suffix:empty{display:none}.ea-autocomplete__listbox{overflow-y:auto;overscroll-behavior:none;max-height:15rem;padding:.25em 0;list-style:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-autocomplete-listbox-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-autocomplete__listbox{border:1px solid CanvasText}}.ea-autocomplete__listbox--2xs{font-size:var(--font-size-2xs)}.ea-autocomplete__listbox--xs{font-size:var(--font-size-xs)}.ea-autocomplete__listbox--sm{font-size:var(--font-size-sm)}.ea-autocomplete__listbox--md{font-size:var(--font-size-md)}.ea-autocomplete__listbox--lg{font-size:var(--font-size-lg)}.ea-autocomplete__listbox--xl{font-size:var(--font-size-xl)}.ea-autocomplete__group{position:relative}.ea-autocomplete__group--ruled{padding-top:.25em;margin-top:.25em}.ea-autocomplete__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-autocomplete__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-autocomplete__option{padding:.5em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-autocomplete__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-autocomplete__option--focused{background-color:Highlight;color:HighlightText}}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:default}@media(forced-colors:active){.ea-autocomplete__option--disabled{color:GrayText}}.ea-autocomplete__empty{padding:.5em .75em;font-size:inherit;font-style:italic;color:var(--color-text-tertiary)}\n"]
6674
+ styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-autocomplete--2xs{font-size:var(--font-size-2xs)}.ea-autocomplete--xs{font-size:var(--font-size-xs)}.ea-autocomplete--sm{font-size:var(--font-size-sm)}.ea-autocomplete--md{font-size:var(--font-size-md)}.ea-autocomplete--lg{font-size:var(--font-size-lg)}.ea-autocomplete--xl{font-size:var(--font-size-xl)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-autocomplete__wrapper--focused{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-autocomplete__wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--error{border-color:var(--color-error-default)}.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-autocomplete__wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-autocomplete__wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--readonly button{cursor:default}.ea-autocomplete__wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-autocomplete__input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--font-family-sans);color:var(--color-text-primary);outline:none}.ea-autocomplete__input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-autocomplete__input:disabled{cursor:default}.ea-autocomplete__prefix,.ea-autocomplete__suffix{display:flex;flex-shrink:0;align-items:center;color:var(--color-text-secondary)}.ea-autocomplete__prefix:empty,.ea-autocomplete__suffix:empty{display:none}.ea-autocomplete__listbox{overflow-y:auto;overscroll-behavior:none;max-height:15rem;padding:.25em 0;list-style:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-autocomplete-listbox-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-autocomplete__listbox{border:1px solid CanvasText}}.ea-autocomplete__listbox--2xs{font-size:var(--font-size-2xs)}.ea-autocomplete__listbox--xs{font-size:var(--font-size-xs)}.ea-autocomplete__listbox--sm{font-size:var(--font-size-sm)}.ea-autocomplete__listbox--md{font-size:var(--font-size-md)}.ea-autocomplete__listbox--lg{font-size:var(--font-size-lg)}.ea-autocomplete__listbox--xl{font-size:var(--font-size-xl)}.ea-autocomplete__group{position:relative}.ea-autocomplete__group--ruled{padding-top:.25em;margin-top:.25em}.ea-autocomplete__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-autocomplete__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-autocomplete__option{padding:.5em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-autocomplete__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-autocomplete__option--focused{background-color:Highlight;color:HighlightText}}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:default}@media(forced-colors:active){.ea-autocomplete__option--disabled{color:GrayText}}.ea-autocomplete__empty{padding:.5em .75em;font-size:inherit;font-style:italic;color:var(--color-text-tertiary)}\n"]
6618
6675
  }]
6619
6676
  }],
6620
6677
  propDecorators: {
@@ -12393,7 +12450,7 @@ var InputComponent = class InputComponent {
12393
12450
  }],
12394
12451
  ngImport: i0,
12395
12452
  template: "<div class=\"ea-input-field ea-input-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\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 ((keepIcon() || !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.spellcheck]=\"spellcheck() ?? 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.role]=\"role() ?? null\"\n [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n [attr.aria-expanded]=\"ariaExpanded() ?? null\"\n [attr.aria-controls]=\"ariaControls() ?? null\"\n [attr.aria-activedescendant]=\"ariaActivedescendant() ?? null\"\n [attr.aria-autocomplete]=\"ariaAutocomplete() ?? 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",
12396
- styles: [".ea-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-input-field--2xs{font-size:var(--font-size-2xs)}.ea-input-field--xs{font-size:var(--font-size-xs)}.ea-input-field--sm{font-size:var(--font-size-sm)}.ea-input-field--md{font-size:var(--font-size-md)}.ea-input-field--lg{font-size:var(--font-size-lg)}.ea-input-field--xl{font-size:var(--font-size-xl)}.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--focused{border-color:var(--ea-input-border-color-focus, var(--color-border-focus));outline:none;box-shadow:var(--ea-input-shadow-focus, 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{outline:none;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:default;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:default}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-input-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--readonly button{cursor:default}.ea-input-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.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:1em;color:var(--color-text-secondary)}.ea-input-wrapper__clear{position:relative;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:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-input-wrapper__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-input-wrapper__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__clear:disabled{cursor:default;opacity:.5}.ea-input-wrapper__password-toggle{position:relative;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:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.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;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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:default;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{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.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:default}.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"],
12453
+ styles: [".ea-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-input-field--2xs{font-size:var(--font-size-2xs)}.ea-input-field--xs{font-size:var(--font-size-xs)}.ea-input-field--sm{font-size:var(--font-size-sm)}.ea-input-field--md{font-size:var(--font-size-md)}.ea-input-field--lg{font-size:var(--font-size-lg)}.ea-input-field--xl{font-size:var(--font-size-xl)}.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--focused{border-color:var(--ea-input-border-color-focus, var(--color-border-default));outline:none;box-shadow:var(--ea-input-shadow-focus, 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{outline:none;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:default;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:default}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-input-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--readonly button{cursor:default}.ea-input-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.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:1em;color:var(--color-text-secondary)}.ea-input-wrapper__clear{position:relative;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:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-input-wrapper__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-input-wrapper__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__clear:disabled{cursor:default;opacity:.5}.ea-input-wrapper__password-toggle{position:relative;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:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.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;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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:default;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{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.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:default}.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"],
12397
12454
  dependencies: [
12398
12455
  {
12399
12456
  kind: "component",
@@ -12482,7 +12539,7 @@ i0.ɵɵngDeclareClassMetadata({
12482
12539
  multi: true
12483
12540
  }],
12484
12541
  template: "<div class=\"ea-input-field ea-input-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\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 ((keepIcon() || !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.spellcheck]=\"spellcheck() ?? 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.role]=\"role() ?? null\"\n [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n [attr.aria-expanded]=\"ariaExpanded() ?? null\"\n [attr.aria-controls]=\"ariaControls() ?? null\"\n [attr.aria-activedescendant]=\"ariaActivedescendant() ?? null\"\n [attr.aria-autocomplete]=\"ariaAutocomplete() ?? 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",
12485
- styles: [".ea-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-input-field--2xs{font-size:var(--font-size-2xs)}.ea-input-field--xs{font-size:var(--font-size-xs)}.ea-input-field--sm{font-size:var(--font-size-sm)}.ea-input-field--md{font-size:var(--font-size-md)}.ea-input-field--lg{font-size:var(--font-size-lg)}.ea-input-field--xl{font-size:var(--font-size-xl)}.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--focused{border-color:var(--ea-input-border-color-focus, var(--color-border-focus));outline:none;box-shadow:var(--ea-input-shadow-focus, 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{outline:none;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:default;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:default}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-input-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--readonly button{cursor:default}.ea-input-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.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:1em;color:var(--color-text-secondary)}.ea-input-wrapper__clear{position:relative;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:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-input-wrapper__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-input-wrapper__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__clear:disabled{cursor:default;opacity:.5}.ea-input-wrapper__password-toggle{position:relative;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:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.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;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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:default;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{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.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:default}.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"]
12542
+ styles: [".ea-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-input-field--2xs{font-size:var(--font-size-2xs)}.ea-input-field--xs{font-size:var(--font-size-xs)}.ea-input-field--sm{font-size:var(--font-size-sm)}.ea-input-field--md{font-size:var(--font-size-md)}.ea-input-field--lg{font-size:var(--font-size-lg)}.ea-input-field--xl{font-size:var(--font-size-xl)}.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--focused{border-color:var(--ea-input-border-color-focus, var(--color-border-default));outline:none;box-shadow:var(--ea-input-shadow-focus, 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{outline:none;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:default;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:default}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-input-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--readonly button{cursor:default}.ea-input-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.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:1em;color:var(--color-text-secondary)}.ea-input-wrapper__clear{position:relative;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:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-input-wrapper__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-input-wrapper__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__clear:disabled{cursor:default;opacity:.5}.ea-input-wrapper__password-toggle{position:relative;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:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.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;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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:default;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{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.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:default}.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"]
12486
12543
  }]
12487
12544
  }],
12488
12545
  ctorParameters: () => [],
@@ -13895,7 +13952,7 @@ var ColorPickerComponent = class ColorPickerComponent {
13895
13952
  ],
13896
13953
  ngImport: i0,
13897
13954
  template: "<div class=\"ea-color-picker-field ea-color-picker-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-color-picker\">\n <div\n class=\"ea-color-picker__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-color-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-labelledby]=\"triggerLabelledBy()\"\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)=\"onTriggerKeydown($event)\">\n <span\n class=\"ea-color-picker__swatch\"\n aria-hidden=\"true\">\n <span\n class=\"ea-color-picker__swatch-fill\"\n [style.--_ea-swatch-color]=\"value() ? displayColor() : null\">\n </span>\n </span>\n @if (!compact()) {\n <span\n class=\"ea-color-picker__trigger-value\"\n [class.ea-color-picker__trigger-value--placeholder]=\"!displayValue()\">\n <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n </span>\n }\n </button>\n @if (clearable() && !compact() && value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-color-picker__clear\"\n [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-color-picker__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n [surfaceId]=\"popoverId()\"\n placement=\"bottom-start\"\n role=\"dialog\"\n [aria-label]=\"i18n.messages().colorPicker.dialogLabel\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-color-picker__popover\"\n [ngClass]=\"popoverClasses()\"\n (keydown)=\"onPopoverKeydown($event)\">\n <div\n #svAreaEl\n class=\"ea-color-picker__sv-area\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"satPercent()\"\n [attr.aria-valuetext]=\"\n i18n\n .messages()\n .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n \"\n [style.background-color]=\"hueColor()\"\n (pointerdown)=\"onSvPointerDown($event)\"\n (pointermove)=\"onSvPointerMove($event)\"\n (pointerup)=\"onSvPointerUp($event)\"\n (pointercancel)=\"onSvPointerUp($event)\"\n (keydown)=\"onSvKeydown($event)\">\n <div class=\"ea-color-picker__sv-area-sat\"></div>\n <div class=\"ea-color-picker__sv-area-val\"></div>\n <div\n class=\"ea-color-picker__sv-pointer\"\n [style.background-color]=\"opaqueColor()\"\n [style.left]=\"svPointerLeft()\"\n [style.top]=\"svPointerTop()\">\n </div>\n </div>\n\n <div\n class=\"ea-color-picker__sv-status\"\n aria-live=\"polite\">\n {{\n i18n\n .messages()\n .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n }}\n </div>\n\n <div class=\"ea-color-picker__sliders\">\n <div class=\"ea-color-picker__slider-row\">\n <span\n class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n aria-hidden=\"true\">\n <span\n class=\"ea-color-picker__swatch-fill\"\n [style.--_ea-swatch-color]=\"displayColor()\">\n </span>\n </span>\n <div class=\"ea-color-picker__strip-stack\">\n <div\n #hueTrackEl\n class=\"ea-color-picker__strip ea-color-picker__strip--hue\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.hue\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"360\"\n [attr.aria-valuenow]=\"hueRounded()\"\n (pointerdown)=\"onHuePointerDown($event)\"\n (pointermove)=\"onHuePointerMove($event)\"\n (pointerup)=\"onHuePointerUp($event)\"\n (pointercancel)=\"onHuePointerUp($event)\"\n (keydown)=\"onHueKeydown($event)\">\n <div\n class=\"ea-color-picker__strip-thumb\"\n [style.left]=\"huePointerLeft()\">\n </div>\n </div>\n @if (showAlpha()) {\n <div\n #alphaTrackEl\n class=\"ea-color-picker__strip ea-color-picker__strip--alpha\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.alpha\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-valuenow]=\"alphaPercentRounded()\"\n [attr.aria-valuetext]=\"alphaPercentRounded() + '%'\"\n [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n (pointerdown)=\"onAlphaPointerDown($event)\"\n (pointermove)=\"onAlphaPointerMove($event)\"\n (pointerup)=\"onAlphaPointerUp($event)\"\n (pointercancel)=\"onAlphaPointerUp($event)\"\n (keydown)=\"onAlphaKeydown($event)\">\n <div\n class=\"ea-color-picker__strip-thumb\"\n [style.left]=\"alphaPointerLeft()\">\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <div\n class=\"ea-color-picker__inputs\"\n [class.ea-color-picker__inputs--hex]=\"activeFormat() === 'hex'\">\n @switch (activeFormat()) {\n @case ('hex') {\n <label\n class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n <span class=\"ea-color-picker__input-label\">HEX</span>\n <input\n class=\"ea-color-picker__input\"\n type=\"text\"\n dir=\"auto\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n maxlength=\"9\"\n [value]=\"hexInputValue()\"\n (input)=\"onHexInput($event)\"\n (blur)=\"onHexBlur()\" />\n </label>\n }\n @case ('rgb') {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">R</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().r\"\n (input)=\"onRgbInput('r', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">G</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().g\"\n (input)=\"onRgbInput('g', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">B</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().b\"\n (input)=\"onRgbInput('b', $event)\" />\n </label>\n @if (showAlpha()) {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">A</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"alphaPercentRounded()\"\n (input)=\"onAlphaInput($event)\" />\n </label>\n }\n }\n @case ('hsl') {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">H</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().h\"\n (input)=\"onHslInput('h', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">S</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().s\"\n (input)=\"onHslInput('s', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">L</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().l\"\n (input)=\"onHslInput('l', $event)\" />\n </label>\n @if (showAlpha()) {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">A</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"alphaPercentRounded()\"\n (input)=\"onAlphaInput($event)\" />\n </label>\n }\n }\n }\n @if (canToggleFormat()) {\n <button\n type=\"button\"\n class=\"ea-color-picker__format-toggle\"\n [attr.aria-label]=\"formatToggleLabel()\"\n (click)=\"cycleInputMode()\">\n {{ formatLabel() }}\n </button>\n }\n </div>\n\n @if (hasEyeDropper()) {\n <div class=\"ea-color-picker__tools\">\n <button\n type=\"button\"\n class=\"ea-color-picker__tool-btn\"\n [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n (click)=\"pickFromScreen()\">\n <ea-icon-droplet aria-hidden=\"true\" />\n <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n </button>\n </div>\n }\n\n @if (presets().length > 0) {\n <div class=\"ea-color-picker__presets\">\n <span\n class=\"ea-color-picker__presets-label\"\n [id]=\"id() + '-presets-label'\">\n {{ i18n.messages().colorPicker.presets }}\n </span>\n <div\n class=\"ea-color-picker__presets-grid\"\n role=\"group\"\n [attr.aria-labelledby]=\"id() + '-presets-label'\">\n @for (preset of presets(); track preset) {\n <button\n type=\"button\"\n class=\"ea-color-picker__preset\"\n [attr.aria-label]=\"preset\"\n [attr.aria-pressed]=\"activePresets().has(preset)\"\n [style.background-color]=\"preset\"\n (click)=\"selectPreset(preset)\">\n </button>\n }\n </div>\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",
13898
- styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-color-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-color-picker-field--xs{font-size:var(--font-size-xs)}.ea-color-picker-field--sm{font-size:var(--font-size-sm)}.ea-color-picker-field--md{font-size:var(--font-size-md)}.ea-color-picker-field--lg{font-size:var(--font-size-lg)}.ea-color-picker-field--xl{font-size:var(--font-size-xl)}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.ea-color-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;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;transition:var(--transition-colors),var(--transition-shadow)}.ea-color-picker__trigger:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--open{border-color:var(--color-border-focus);outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-color-picker__trigger--error.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--compact{width:auto;min-height:0;padding:.375em}.ea-color-picker__trigger--compact .ea-color-picker__swatch{width:1.5em;height:1.5em}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-color-picker__trigger--readonly{cursor:default}.ea-color-picker__trigger--readonly:focus-visible{border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-color-picker__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.875em}.ea-color-picker__trigger-value--placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{position:relative;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-color-picker__clear>*{font-size:1.25em}.ea-color-picker__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__clear:disabled{cursor:default;opacity:.5}.ea-color-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125em;height:1.125em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);forced-color-adjust:none}.ea-color-picker__swatch--lg{width:2.5em;height:2.5em;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block;background-color:var(--color-bg-base);background-image:linear-gradient(var(--_ea-swatch-color, transparent),var(--_ea-swatch-color, transparent)),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0;forced-color-adjust:none}.ea-color-picker__popover{display:flex;flex-direction:column;gap:.75em;width:17.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-color-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-color-picker__popover{border:1px solid CanvasText}}.ea-color-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-color-picker__popover--xs{font-size:var(--font-size-xs)}.ea-color-picker__popover--sm{font-size:var(--font-size-sm)}.ea-color-picker__popover--md{font-size:var(--font-size-md)}.ea-color-picker__popover--lg{font-size:var(--font-size-lg)}.ea-color-picker__popover--xl{font-size:var(--font-size-xl)}.ea-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10em;border-radius:var(--radius-sm);cursor:crosshair;forced-color-adjust:none;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__sv-area:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent);forced-color-adjust:none}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent);forced-color-adjust:none}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.875em;height:.875em;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__sv-status{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-color-picker__slider-row{display:flex;align-items:center;gap:.5em}.ea-color-picker__strip-stack{display:flex;flex-direction:column;flex:1;gap:.5em}.ea-color-picker__strip{position:relative;width:100%;height:.75em;border-radius:var(--radius-full);cursor:pointer;forced-color-adjust:none;touch-action:none}.ea-color-picker__strip:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__strip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.875em;height:.875em;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__inputs{display:flex;align-items:end;gap:.25em}.ea-color-picker__input-group{display:flex;flex:1;flex-direction:column;gap:.25em;min-width:0;text-align:center}.ea-color-picker__input-group--hex{flex:1}.ea-color-picker__format-toggle{flex-shrink:0;min-width:5.2em;padding:.4em .8em;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:.625em;font-weight:var(--font-weight-medium);letter-spacing:.04em;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__format-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__format-toggle:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__format-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input-label{font-size:.625em;font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__input{width:100%;min-width:0;padding:.375em .5em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:.75em;text-align:center;color:var(--color-text-primary)}.ea-color-picker__input:focus-visible{outline:none;border-color:var(--color-border-focus);outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__input:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap:.5em;padding:.375em .75em;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;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__tool-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__tool-btn:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__tool-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap:.375em;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-color-picker__presets-label{font-size:.625em;font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__presets-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:.25em}.ea-color-picker__preset{width:100%;aspect-ratio:1;padding:0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);cursor:pointer;forced-color-adjust:none;transition:transform var(--duration-fast) var(--ease-out)}.ea-color-picker__preset:hover{transform:scale(1.1)}.ea-color-picker__preset:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__preset:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"],
13955
+ styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-color-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-color-picker-field--xs{font-size:var(--font-size-xs)}.ea-color-picker-field--sm{font-size:var(--font-size-sm)}.ea-color-picker-field--md{font-size:var(--font-size-md)}.ea-color-picker-field--lg{font-size:var(--font-size-lg)}.ea-color-picker-field--xl{font-size:var(--font-size-xl)}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.ea-color-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;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;transition:var(--transition-colors),var(--transition-shadow)}.ea-color-picker__trigger:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--open{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-color-picker__trigger--error.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--compact{width:auto;min-height:0;padding:.375em}.ea-color-picker__trigger--compact .ea-color-picker__swatch{width:1.5em;height:1.5em}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-color-picker__trigger--readonly{cursor:default}.ea-color-picker__trigger--readonly:focus-visible{border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-color-picker__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.875em}.ea-color-picker__trigger-value--placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{position:relative;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-color-picker__clear>*{font-size:1.25em}.ea-color-picker__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__clear:disabled{cursor:default;opacity:.5}.ea-color-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125em;height:1.125em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);forced-color-adjust:none}.ea-color-picker__swatch--lg{width:2.5em;height:2.5em;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block;background-color:var(--color-bg-base);background-image:linear-gradient(var(--_ea-swatch-color, transparent),var(--_ea-swatch-color, transparent)),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0;forced-color-adjust:none}.ea-color-picker__popover{display:flex;flex-direction:column;gap:.75em;width:17.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-color-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-color-picker__popover{border:1px solid CanvasText}}.ea-color-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-color-picker__popover--xs{font-size:var(--font-size-xs)}.ea-color-picker__popover--sm{font-size:var(--font-size-sm)}.ea-color-picker__popover--md{font-size:var(--font-size-md)}.ea-color-picker__popover--lg{font-size:var(--font-size-lg)}.ea-color-picker__popover--xl{font-size:var(--font-size-xl)}.ea-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10em;border-radius:var(--radius-sm);cursor:crosshair;forced-color-adjust:none;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__sv-area:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent);forced-color-adjust:none}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent);forced-color-adjust:none}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.875em;height:.875em;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__sv-status{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-color-picker__slider-row{display:flex;align-items:center;gap:.5em}.ea-color-picker__strip-stack{display:flex;flex-direction:column;flex:1;gap:.5em}.ea-color-picker__strip{position:relative;width:100%;height:.75em;border-radius:var(--radius-full);cursor:pointer;forced-color-adjust:none;touch-action:none}.ea-color-picker__strip:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__strip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.875em;height:.875em;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__inputs{display:flex;align-items:end;gap:.25em}.ea-color-picker__input-group{display:flex;flex:1;flex-direction:column;gap:.25em;min-width:0;text-align:center}.ea-color-picker__input-group--hex{flex:1}.ea-color-picker__format-toggle{flex-shrink:0;min-width:5.2em;padding:.4em .8em;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:.625em;font-weight:var(--font-weight-medium);letter-spacing:.04em;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__format-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__format-toggle:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__format-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input-label{font-size:.625em;font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__input{width:100%;min-width:0;padding:.375em .5em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:.75em;text-align:center;color:var(--color-text-primary)}.ea-color-picker__input:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__input:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap:.5em;padding:.375em .75em;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;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__tool-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__tool-btn:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__tool-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap:.375em;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-color-picker__presets-label{font-size:.625em;font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__presets-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:.25em}.ea-color-picker__preset{width:100%;aspect-ratio:1;padding:0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);cursor:pointer;forced-color-adjust:none;transition:transform var(--duration-fast) var(--ease-out)}.ea-color-picker__preset:hover{transform:scale(1.1)}.ea-color-picker__preset:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__preset:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"],
13899
13956
  dependencies: [
13900
13957
  {
13901
13958
  kind: "component",
@@ -13990,7 +14047,7 @@ i0.ɵɵngDeclareClassMetadata({
13990
14047
  multi: true
13991
14048
  }],
13992
14049
  template: "<div class=\"ea-color-picker-field ea-color-picker-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-color-picker\">\n <div\n class=\"ea-color-picker__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-color-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-labelledby]=\"triggerLabelledBy()\"\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)=\"onTriggerKeydown($event)\">\n <span\n class=\"ea-color-picker__swatch\"\n aria-hidden=\"true\">\n <span\n class=\"ea-color-picker__swatch-fill\"\n [style.--_ea-swatch-color]=\"value() ? displayColor() : null\">\n </span>\n </span>\n @if (!compact()) {\n <span\n class=\"ea-color-picker__trigger-value\"\n [class.ea-color-picker__trigger-value--placeholder]=\"!displayValue()\">\n <bdi>{{ displayValue() || resolvedPlaceholder() }}</bdi>\n </span>\n }\n </button>\n @if (clearable() && !compact() && value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-color-picker__clear\"\n [attr.aria-label]=\"i18n.messages().colorPicker.clear\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-color-picker__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n [surfaceId]=\"popoverId()\"\n placement=\"bottom-start\"\n role=\"dialog\"\n [aria-label]=\"i18n.messages().colorPicker.dialogLabel\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-color-picker__popover\"\n [ngClass]=\"popoverClasses()\"\n (keydown)=\"onPopoverKeydown($event)\">\n <div\n #svAreaEl\n class=\"ea-color-picker__sv-area\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.saturationAndValue\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"satPercent()\"\n [attr.aria-valuetext]=\"\n i18n\n .messages()\n .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n \"\n [style.background-color]=\"hueColor()\"\n (pointerdown)=\"onSvPointerDown($event)\"\n (pointermove)=\"onSvPointerMove($event)\"\n (pointerup)=\"onSvPointerUp($event)\"\n (pointercancel)=\"onSvPointerUp($event)\"\n (keydown)=\"onSvKeydown($event)\">\n <div class=\"ea-color-picker__sv-area-sat\"></div>\n <div class=\"ea-color-picker__sv-area-val\"></div>\n <div\n class=\"ea-color-picker__sv-pointer\"\n [style.background-color]=\"opaqueColor()\"\n [style.left]=\"svPointerLeft()\"\n [style.top]=\"svPointerTop()\">\n </div>\n </div>\n\n <div\n class=\"ea-color-picker__sv-status\"\n aria-live=\"polite\">\n {{\n i18n\n .messages()\n .colorPicker.saturationAndValueStatus(satPercent(), valPercent())\n }}\n </div>\n\n <div class=\"ea-color-picker__sliders\">\n <div class=\"ea-color-picker__slider-row\">\n <span\n class=\"ea-color-picker__swatch ea-color-picker__swatch--lg\"\n aria-hidden=\"true\">\n <span\n class=\"ea-color-picker__swatch-fill\"\n [style.--_ea-swatch-color]=\"displayColor()\">\n </span>\n </span>\n <div class=\"ea-color-picker__strip-stack\">\n <div\n #hueTrackEl\n class=\"ea-color-picker__strip ea-color-picker__strip--hue\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.hue\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"360\"\n [attr.aria-valuenow]=\"hueRounded()\"\n (pointerdown)=\"onHuePointerDown($event)\"\n (pointermove)=\"onHuePointerMove($event)\"\n (pointerup)=\"onHuePointerUp($event)\"\n (pointercancel)=\"onHuePointerUp($event)\"\n (keydown)=\"onHueKeydown($event)\">\n <div\n class=\"ea-color-picker__strip-thumb\"\n [style.left]=\"huePointerLeft()\">\n </div>\n </div>\n @if (showAlpha()) {\n <div\n #alphaTrackEl\n class=\"ea-color-picker__strip ea-color-picker__strip--alpha\"\n role=\"slider\"\n tabindex=\"0\"\n [attr.aria-label]=\"i18n.messages().colorPicker.alpha\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-valuenow]=\"alphaPercentRounded()\"\n [attr.aria-valuetext]=\"alphaPercentRounded() + '%'\"\n [style.--ea-color-picker-alpha-base]=\"opaqueColor()\"\n (pointerdown)=\"onAlphaPointerDown($event)\"\n (pointermove)=\"onAlphaPointerMove($event)\"\n (pointerup)=\"onAlphaPointerUp($event)\"\n (pointercancel)=\"onAlphaPointerUp($event)\"\n (keydown)=\"onAlphaKeydown($event)\">\n <div\n class=\"ea-color-picker__strip-thumb\"\n [style.left]=\"alphaPointerLeft()\">\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <div\n class=\"ea-color-picker__inputs\"\n [class.ea-color-picker__inputs--hex]=\"activeFormat() === 'hex'\">\n @switch (activeFormat()) {\n @case ('hex') {\n <label\n class=\"ea-color-picker__input-group ea-color-picker__input-group--hex\">\n <span class=\"ea-color-picker__input-label\">HEX</span>\n <input\n class=\"ea-color-picker__input\"\n type=\"text\"\n dir=\"auto\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n maxlength=\"9\"\n [value]=\"hexInputValue()\"\n (input)=\"onHexInput($event)\"\n (blur)=\"onHexBlur()\" />\n </label>\n }\n @case ('rgb') {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">R</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().r\"\n (input)=\"onRgbInput('r', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">G</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().g\"\n (input)=\"onRgbInput('g', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">B</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"rgb().b\"\n (input)=\"onRgbInput('b', $event)\" />\n </label>\n @if (showAlpha()) {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">A</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"alphaPercentRounded()\"\n (input)=\"onAlphaInput($event)\" />\n </label>\n }\n }\n @case ('hsl') {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">H</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().h\"\n (input)=\"onHslInput('h', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">S</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().s\"\n (input)=\"onHslInput('s', $event)\" />\n </label>\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">L</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"hslDisplay().l\"\n (input)=\"onHslInput('l', $event)\" />\n </label>\n @if (showAlpha()) {\n <label class=\"ea-color-picker__input-group\">\n <span class=\"ea-color-picker__input-label\">A</span>\n <input\n class=\"ea-color-picker__input ea-color-picker__input--num\"\n type=\"text\"\n inputmode=\"numeric\"\n pattern=\"\\d*\"\n maxlength=\"3\"\n [value]=\"alphaPercentRounded()\"\n (input)=\"onAlphaInput($event)\" />\n </label>\n }\n }\n }\n @if (canToggleFormat()) {\n <button\n type=\"button\"\n class=\"ea-color-picker__format-toggle\"\n [attr.aria-label]=\"formatToggleLabel()\"\n (click)=\"cycleInputMode()\">\n {{ formatLabel() }}\n </button>\n }\n </div>\n\n @if (hasEyeDropper()) {\n <div class=\"ea-color-picker__tools\">\n <button\n type=\"button\"\n class=\"ea-color-picker__tool-btn\"\n [attr.aria-label]=\"i18n.messages().colorPicker.eyedropper\"\n (click)=\"pickFromScreen()\">\n <ea-icon-droplet aria-hidden=\"true\" />\n <span>{{ i18n.messages().colorPicker.eyedropper }}</span>\n </button>\n </div>\n }\n\n @if (presets().length > 0) {\n <div class=\"ea-color-picker__presets\">\n <span\n class=\"ea-color-picker__presets-label\"\n [id]=\"id() + '-presets-label'\">\n {{ i18n.messages().colorPicker.presets }}\n </span>\n <div\n class=\"ea-color-picker__presets-grid\"\n role=\"group\"\n [attr.aria-labelledby]=\"id() + '-presets-label'\">\n @for (preset of presets(); track preset) {\n <button\n type=\"button\"\n class=\"ea-color-picker__preset\"\n [attr.aria-label]=\"preset\"\n [attr.aria-pressed]=\"activePresets().has(preset)\"\n [style.background-color]=\"preset\"\n (click)=\"selectPreset(preset)\">\n </button>\n }\n </div>\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",
13993
- styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-color-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-color-picker-field--xs{font-size:var(--font-size-xs)}.ea-color-picker-field--sm{font-size:var(--font-size-sm)}.ea-color-picker-field--md{font-size:var(--font-size-md)}.ea-color-picker-field--lg{font-size:var(--font-size-lg)}.ea-color-picker-field--xl{font-size:var(--font-size-xl)}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.ea-color-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;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;transition:var(--transition-colors),var(--transition-shadow)}.ea-color-picker__trigger:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--open{border-color:var(--color-border-focus);outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-color-picker__trigger--error.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--compact{width:auto;min-height:0;padding:.375em}.ea-color-picker__trigger--compact .ea-color-picker__swatch{width:1.5em;height:1.5em}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-color-picker__trigger--readonly{cursor:default}.ea-color-picker__trigger--readonly:focus-visible{border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-color-picker__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.875em}.ea-color-picker__trigger-value--placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{position:relative;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-color-picker__clear>*{font-size:1.25em}.ea-color-picker__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__clear:disabled{cursor:default;opacity:.5}.ea-color-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125em;height:1.125em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);forced-color-adjust:none}.ea-color-picker__swatch--lg{width:2.5em;height:2.5em;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block;background-color:var(--color-bg-base);background-image:linear-gradient(var(--_ea-swatch-color, transparent),var(--_ea-swatch-color, transparent)),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0;forced-color-adjust:none}.ea-color-picker__popover{display:flex;flex-direction:column;gap:.75em;width:17.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-color-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-color-picker__popover{border:1px solid CanvasText}}.ea-color-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-color-picker__popover--xs{font-size:var(--font-size-xs)}.ea-color-picker__popover--sm{font-size:var(--font-size-sm)}.ea-color-picker__popover--md{font-size:var(--font-size-md)}.ea-color-picker__popover--lg{font-size:var(--font-size-lg)}.ea-color-picker__popover--xl{font-size:var(--font-size-xl)}.ea-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10em;border-radius:var(--radius-sm);cursor:crosshair;forced-color-adjust:none;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__sv-area:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent);forced-color-adjust:none}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent);forced-color-adjust:none}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.875em;height:.875em;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__sv-status{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-color-picker__slider-row{display:flex;align-items:center;gap:.5em}.ea-color-picker__strip-stack{display:flex;flex-direction:column;flex:1;gap:.5em}.ea-color-picker__strip{position:relative;width:100%;height:.75em;border-radius:var(--radius-full);cursor:pointer;forced-color-adjust:none;touch-action:none}.ea-color-picker__strip:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__strip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.875em;height:.875em;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__inputs{display:flex;align-items:end;gap:.25em}.ea-color-picker__input-group{display:flex;flex:1;flex-direction:column;gap:.25em;min-width:0;text-align:center}.ea-color-picker__input-group--hex{flex:1}.ea-color-picker__format-toggle{flex-shrink:0;min-width:5.2em;padding:.4em .8em;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:.625em;font-weight:var(--font-weight-medium);letter-spacing:.04em;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__format-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__format-toggle:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__format-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input-label{font-size:.625em;font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__input{width:100%;min-width:0;padding:.375em .5em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:.75em;text-align:center;color:var(--color-text-primary)}.ea-color-picker__input:focus-visible{outline:none;border-color:var(--color-border-focus);outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__input:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap:.5em;padding:.375em .75em;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;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__tool-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__tool-btn:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__tool-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap:.375em;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-color-picker__presets-label{font-size:.625em;font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__presets-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:.25em}.ea-color-picker__preset{width:100%;aspect-ratio:1;padding:0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);cursor:pointer;forced-color-adjust:none;transition:transform var(--duration-fast) var(--ease-out)}.ea-color-picker__preset:hover{transform:scale(1.1)}.ea-color-picker__preset:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__preset:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"]
14050
+ styles: [".ea-color-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-color-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-color-picker-field--xs{font-size:var(--font-size-xs)}.ea-color-picker-field--sm{font-size:var(--font-size-sm)}.ea-color-picker-field--md{font-size:var(--font-size-md)}.ea-color-picker-field--lg{font-size:var(--font-size-lg)}.ea-color-picker-field--xl{font-size:var(--font-size-xl)}.ea-color-picker,.ea-color-picker__trigger-wrapper{position:relative}.ea-color-picker__trigger{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;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;transition:var(--transition-colors),var(--transition-shadow)}.ea-color-picker__trigger:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--open{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--error{border-color:var(--color-error-default)}.ea-color-picker__trigger--error.ea-color-picker__trigger--open{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-color-picker__trigger--error.ea-color-picker__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger--compact{width:auto;min-height:0;padding:.375em}.ea-color-picker__trigger--compact .ea-color-picker__swatch{width:1.5em;height:1.5em}.ea-color-picker__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-color-picker__trigger--readonly{cursor:default}.ea-color-picker__trigger--readonly:focus-visible{border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-color-picker__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-family-mono);font-size:.875em}.ea-color-picker__trigger-value--placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary);font-family:var(--font-family-sans);font-size:1em}.ea-color-picker__clear{position:relative;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-color-picker__clear>*{font-size:1.25em}.ea-color-picker__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-color-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__clear:disabled{cursor:default;opacity:.5}.ea-color-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:var(--space-2);transform:translateY(-50%)}.ea-color-picker__swatch{position:relative;overflow:hidden;flex-shrink:0;width:1.125em;height:1.125em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);background-color:var(--color-bg-base);forced-color-adjust:none}.ea-color-picker__swatch--lg{width:2.5em;height:2.5em;border-radius:var(--radius-md)}.ea-color-picker__swatch-fill{position:absolute;inset:0;display:block;background-color:var(--color-bg-base);background-image:linear-gradient(var(--_ea-swatch-color, transparent),var(--_ea-swatch-color, transparent)),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0;forced-color-adjust:none}.ea-color-picker__popover{display:flex;flex-direction:column;gap:.75em;width:17.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-color-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-color-picker__popover{border:1px solid CanvasText}}.ea-color-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-color-picker__popover--xs{font-size:var(--font-size-xs)}.ea-color-picker__popover--sm{font-size:var(--font-size-sm)}.ea-color-picker__popover--md{font-size:var(--font-size-md)}.ea-color-picker__popover--lg{font-size:var(--font-size-lg)}.ea-color-picker__popover--xl{font-size:var(--font-size-xl)}.ea-color-picker__sv-area{position:relative;overflow:hidden;width:100%;height:10em;border-radius:var(--radius-sm);cursor:crosshair;forced-color-adjust:none;touch-action:none}.ea-color-picker__sv-area:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__sv-area:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__sv-area-sat{position:absolute;inset:0;background:linear-gradient(to right,var(--color-picker-sv-white),transparent);forced-color-adjust:none}.ea-color-picker__sv-area-val{position:absolute;inset:0;background:linear-gradient(to top,var(--color-picker-sv-black),transparent);forced-color-adjust:none}.ea-color-picker__sv-pointer{position:absolute;z-index:1;width:.875em;height:.875em;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__sv-status{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-color-picker__slider-row{display:flex;align-items:center;gap:.5em}.ea-color-picker__strip-stack{display:flex;flex-direction:column;flex:1;gap:.5em}.ea-color-picker__strip{position:relative;width:100%;height:.75em;border-radius:var(--radius-full);cursor:pointer;forced-color-adjust:none;touch-action:none}.ea-color-picker__strip:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__strip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__strip--hue{background:linear-gradient(to right,var(--color-picker-hue-red) 0%,var(--color-picker-hue-yellow) 17%,var(--color-picker-hue-green) 33%,var(--color-picker-hue-cyan) 50%,var(--color-picker-hue-blue) 67%,var(--color-picker-hue-magenta) 83%,var(--color-picker-hue-red) 100%)}.ea-color-picker__strip--alpha{background-color:var(--color-bg-base);background-image:linear-gradient(to right,transparent 0%,var(--ea-color-picker-alpha-base, currentcolor) 100%),linear-gradient(45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--color-neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--color-neutral-200) 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px;background-position:0 0,0 0,0 4px,4px -4px,-4px 0}.ea-color-picker__strip-thumb{position:absolute;top:50%;width:.875em;height:.875em;border:2px solid var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:0 0 0 1px var(--color-picker-thumb-halo);pointer-events:none;transform:translate(-50%,-50%)}.ea-color-picker__inputs{display:flex;align-items:end;gap:.25em}.ea-color-picker__input-group{display:flex;flex:1;flex-direction:column;gap:.25em;min-width:0;text-align:center}.ea-color-picker__input-group--hex{flex:1}.ea-color-picker__format-toggle{flex-shrink:0;min-width:5.2em;padding:.4em .8em;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:.625em;font-weight:var(--font-weight-medium);letter-spacing:.04em;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__format-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__format-toggle:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__format-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input-label{font-size:.625em;font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__input{width:100%;min-width:0;padding:.375em .5em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:.75em;text-align:center;color:var(--color-text-primary)}.ea-color-picker__input:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__input:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__input--num{appearance:textfield}.ea-color-picker__input--num::-webkit-outer-spin-button,.ea-color-picker__input--num::-webkit-inner-spin-button{appearance:none;margin:0}.ea-color-picker__tools{display:flex;justify-content:flex-start}.ea-color-picker__tool-btn{display:inline-flex;align-items:center;gap:.5em;padding:.375em .75em;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;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-color-picker__tool-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-color-picker__tool-btn:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__tool-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__tool-btn ea-icon-droplet{width:.875em;height:.875em}.ea-color-picker__presets{display:flex;flex-direction:column;gap:.375em;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-color-picker__presets-label{font-size:.625em;font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary)}.ea-color-picker__presets-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:.25em}.ea-color-picker__preset{width:100%;aspect-ratio:1;padding:0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-sm);cursor:pointer;forced-color-adjust:none;transition:transform var(--duration-fast) var(--ease-out)}.ea-color-picker__preset:hover{transform:scale(1.1)}.ea-color-picker__preset:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-color-picker__preset:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-color-picker__preset[aria-selected=true]{box-shadow:0 0 0 2px var(--color-brand-default)}\n"]
13994
14051
  }]
13995
14052
  }],
13996
14053
  propDecorators: {
@@ -16004,7 +16061,7 @@ var CodeInputComponent = class CodeInputComponent {
16004
16061
  }],
16005
16062
  ngImport: i0,
16006
16063
  template: "<div class=\"ea-code-input-field ea-code-input-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div\n class=\"ea-code-input-group\"\n [class.ea-code-input-group--xs]=\"size() === 'xs'\"\n [class.ea-code-input-group--sm]=\"size() === 'sm'\"\n [class.ea-code-input-group--md]=\"size() === 'md'\"\n [class.ea-code-input-group--lg]=\"size() === 'lg'\"\n [class.ea-code-input-group--xl]=\"size() === 'xl'\"\n [class.ea-code-input-group--error]=\"hasError()\"\n [class.ea-code-input-group--disabled]=\"isDisabled()\"\n role=\"group\"\n [attr.aria-labelledby]=\"ariaLabelledby() || (label() ? id() + '-label' : null)\"\n [attr.aria-label]=\"\n !label() && !ariaLabelledby()\n ? i18n.messages().codeInput.groupLabel(length())\n : null\n \"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \">\n @for (i of indices(); track i) {\n <input\n #digitEl\n class=\"ea-code-input\"\n [class.ea-code-input--focused]=\"focusedIndex() === i && !readonly()\"\n [class.ea-code-input--readonly]=\"readonly()\"\n [class.ea-code-input--filled]=\"digits()[i] !== ''\"\n type=\"text\"\n [attr.inputmode]=\"allowAllChars() ? 'text' : 'numeric'\"\n autocomplete=\"one-time-code\"\n maxlength=\"1\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"digits()[i]\"\n [placeholder]=\"placeholders()[i]\"\n [attr.aria-label]=\"i18n.messages().codeInput.digitLabel(i + 1, length())\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (input)=\"handleInput($event, i)\"\n (keydown)=\"handleKeydown($event, i)\"\n (paste)=\"handlePaste($event)\"\n (focus)=\"handleFocus(i)\"\n (blur)=\"handleBlur()\" />\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
16007
- styles: [".ea-code-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-code-input-field--2xs{font-size:var(--font-size-2xs)}.ea-code-input-field--xs{font-size:var(--font-size-xs)}.ea-code-input-field--sm{font-size:var(--font-size-sm)}.ea-code-input-field--md{font-size:var(--font-size-md)}.ea-code-input-field--lg{font-size:var(--font-size-lg)}.ea-code-input-field--xl{font-size:var(--font-size-xl)}.ea-code-input-group{display:flex;gap:var(--ea-code-input-gap, .5em)}.ea-code-input-group--error .ea-code-input{border-color:var(--color-error-default)}.ea-code-input-group--error .ea-code-input--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-code-input-group--error .ea-code-input--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-code-input-group--disabled{opacity:.6}.ea-code-input-group--disabled .ea-code-input{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default}.ea-code-input{display:flex;align-items:center;justify-content:center;width:var(--ea-code-input-cell-width, 2.5em);height:var(--ea-code-input-cell-height, 3em);padding:0;font-size:var(--ea-code-input-font-size, 1em);font-weight:var(--ea-code-input-font-weight, var(--font-weight-semibold));text-align:center;font-family:var(--ea-code-input-font-family, var(--font-family-sans));line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);background-color:var(--ea-code-input-background-color, var(--color-bg-base));border:var(--border-width-thin) solid var(--ea-code-input-border-color, var(--color-border-default));border-radius:var(--ea-code-input-radius, var(--radius-md));outline:none;color:var(--ea-code-input-color, var(--color-text-primary));caret-color:var(--ea-code-input-caret-color, transparent);transition:var(--transition-colors),var(--transition-shadow)}.ea-code-input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-code-input--focused{border-color:var(--ea-code-input-border-color-focus, var(--color-border-focus));outline:none;box-shadow:var(--ea-code-input-shadow-focus, var(--shadow-focus-ring))}@media(forced-colors:active){.ea-code-input--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-code-input--readonly{cursor:default}.ea-code-input--readonly:focus-visible{border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-code-input--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-code-input--filled{border-color:var(--ea-code-input-border-color-filled, var(--color-border-strong))}.ea-code-input:disabled{cursor:default}.ea-code-input::-webkit-outer-spin-button,.ea-code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"],
16064
+ styles: [".ea-code-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-code-input-field--2xs{font-size:var(--font-size-2xs)}.ea-code-input-field--xs{font-size:var(--font-size-xs)}.ea-code-input-field--sm{font-size:var(--font-size-sm)}.ea-code-input-field--md{font-size:var(--font-size-md)}.ea-code-input-field--lg{font-size:var(--font-size-lg)}.ea-code-input-field--xl{font-size:var(--font-size-xl)}.ea-code-input-group{display:flex;gap:var(--ea-code-input-gap, .5em)}.ea-code-input-group--error .ea-code-input{border-color:var(--color-error-default)}.ea-code-input-group--error .ea-code-input--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-code-input-group--error .ea-code-input--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-code-input-group--disabled{opacity:.6}.ea-code-input-group--disabled .ea-code-input{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default}.ea-code-input{display:flex;align-items:center;justify-content:center;width:var(--ea-code-input-cell-width, 2.5em);height:var(--ea-code-input-cell-height, 3em);padding:0;font-size:var(--ea-code-input-font-size, 1em);font-weight:var(--ea-code-input-font-weight, var(--font-weight-semibold));text-align:center;font-family:var(--ea-code-input-font-family, var(--font-family-sans));line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);background-color:var(--ea-code-input-background-color, var(--color-bg-base));border:var(--border-width-thin) solid var(--ea-code-input-border-color, var(--color-border-default));border-radius:var(--ea-code-input-radius, var(--radius-md));outline:none;color:var(--ea-code-input-color, var(--color-text-primary));caret-color:var(--ea-code-input-caret-color, transparent);transition:var(--transition-colors),var(--transition-shadow)}.ea-code-input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-code-input--focused{border-color:var(--ea-code-input-border-color-focus, var(--color-border-default));outline:none;box-shadow:var(--ea-code-input-shadow-focus, var(--shadow-focus-ring))}@media(forced-colors:active){.ea-code-input--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-code-input--readonly{cursor:default}.ea-code-input--readonly:focus-visible{border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-code-input--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-code-input--filled{border-color:var(--ea-code-input-border-color-filled, var(--color-border-strong))}.ea-code-input:disabled{cursor:default}.ea-code-input::-webkit-outer-spin-button,.ea-code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"],
16008
16065
  dependencies: [{
16009
16066
  kind: "component",
16010
16067
  type: FieldLabelComponent,
@@ -16048,7 +16105,7 @@ i0.ɵɵngDeclareClassMetadata({
16048
16105
  multi: true
16049
16106
  }],
16050
16107
  template: "<div class=\"ea-code-input-field ea-code-input-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div\n class=\"ea-code-input-group\"\n [class.ea-code-input-group--xs]=\"size() === 'xs'\"\n [class.ea-code-input-group--sm]=\"size() === 'sm'\"\n [class.ea-code-input-group--md]=\"size() === 'md'\"\n [class.ea-code-input-group--lg]=\"size() === 'lg'\"\n [class.ea-code-input-group--xl]=\"size() === 'xl'\"\n [class.ea-code-input-group--error]=\"hasError()\"\n [class.ea-code-input-group--disabled]=\"isDisabled()\"\n role=\"group\"\n [attr.aria-labelledby]=\"ariaLabelledby() || (label() ? id() + '-label' : null)\"\n [attr.aria-label]=\"\n !label() && !ariaLabelledby()\n ? i18n.messages().codeInput.groupLabel(length())\n : null\n \"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \">\n @for (i of indices(); track i) {\n <input\n #digitEl\n class=\"ea-code-input\"\n [class.ea-code-input--focused]=\"focusedIndex() === i && !readonly()\"\n [class.ea-code-input--readonly]=\"readonly()\"\n [class.ea-code-input--filled]=\"digits()[i] !== ''\"\n type=\"text\"\n [attr.inputmode]=\"allowAllChars() ? 'text' : 'numeric'\"\n autocomplete=\"one-time-code\"\n maxlength=\"1\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"digits()[i]\"\n [placeholder]=\"placeholders()[i]\"\n [attr.aria-label]=\"i18n.messages().codeInput.digitLabel(i + 1, length())\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (input)=\"handleInput($event, i)\"\n (keydown)=\"handleKeydown($event, i)\"\n (paste)=\"handlePaste($event)\"\n (focus)=\"handleFocus(i)\"\n (blur)=\"handleBlur()\" />\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
16051
- styles: [".ea-code-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-code-input-field--2xs{font-size:var(--font-size-2xs)}.ea-code-input-field--xs{font-size:var(--font-size-xs)}.ea-code-input-field--sm{font-size:var(--font-size-sm)}.ea-code-input-field--md{font-size:var(--font-size-md)}.ea-code-input-field--lg{font-size:var(--font-size-lg)}.ea-code-input-field--xl{font-size:var(--font-size-xl)}.ea-code-input-group{display:flex;gap:var(--ea-code-input-gap, .5em)}.ea-code-input-group--error .ea-code-input{border-color:var(--color-error-default)}.ea-code-input-group--error .ea-code-input--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-code-input-group--error .ea-code-input--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-code-input-group--disabled{opacity:.6}.ea-code-input-group--disabled .ea-code-input{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default}.ea-code-input{display:flex;align-items:center;justify-content:center;width:var(--ea-code-input-cell-width, 2.5em);height:var(--ea-code-input-cell-height, 3em);padding:0;font-size:var(--ea-code-input-font-size, 1em);font-weight:var(--ea-code-input-font-weight, var(--font-weight-semibold));text-align:center;font-family:var(--ea-code-input-font-family, var(--font-family-sans));line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);background-color:var(--ea-code-input-background-color, var(--color-bg-base));border:var(--border-width-thin) solid var(--ea-code-input-border-color, var(--color-border-default));border-radius:var(--ea-code-input-radius, var(--radius-md));outline:none;color:var(--ea-code-input-color, var(--color-text-primary));caret-color:var(--ea-code-input-caret-color, transparent);transition:var(--transition-colors),var(--transition-shadow)}.ea-code-input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-code-input--focused{border-color:var(--ea-code-input-border-color-focus, var(--color-border-focus));outline:none;box-shadow:var(--ea-code-input-shadow-focus, var(--shadow-focus-ring))}@media(forced-colors:active){.ea-code-input--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-code-input--readonly{cursor:default}.ea-code-input--readonly:focus-visible{border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-code-input--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-code-input--filled{border-color:var(--ea-code-input-border-color-filled, var(--color-border-strong))}.ea-code-input:disabled{cursor:default}.ea-code-input::-webkit-outer-spin-button,.ea-code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"]
16108
+ styles: [".ea-code-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-code-input-field--2xs{font-size:var(--font-size-2xs)}.ea-code-input-field--xs{font-size:var(--font-size-xs)}.ea-code-input-field--sm{font-size:var(--font-size-sm)}.ea-code-input-field--md{font-size:var(--font-size-md)}.ea-code-input-field--lg{font-size:var(--font-size-lg)}.ea-code-input-field--xl{font-size:var(--font-size-xl)}.ea-code-input-group{display:flex;gap:var(--ea-code-input-gap, .5em)}.ea-code-input-group--error .ea-code-input{border-color:var(--color-error-default)}.ea-code-input-group--error .ea-code-input--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-code-input-group--error .ea-code-input--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-code-input-group--disabled{opacity:.6}.ea-code-input-group--disabled .ea-code-input{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default}.ea-code-input{display:flex;align-items:center;justify-content:center;width:var(--ea-code-input-cell-width, 2.5em);height:var(--ea-code-input-cell-height, 3em);padding:0;font-size:var(--ea-code-input-font-size, 1em);font-weight:var(--ea-code-input-font-weight, var(--font-weight-semibold));text-align:center;font-family:var(--ea-code-input-font-family, var(--font-family-sans));line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);background-color:var(--ea-code-input-background-color, var(--color-bg-base));border:var(--border-width-thin) solid var(--ea-code-input-border-color, var(--color-border-default));border-radius:var(--ea-code-input-radius, var(--radius-md));outline:none;color:var(--ea-code-input-color, var(--color-text-primary));caret-color:var(--ea-code-input-caret-color, transparent);transition:var(--transition-colors),var(--transition-shadow)}.ea-code-input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-code-input--focused{border-color:var(--ea-code-input-border-color-focus, var(--color-border-default));outline:none;box-shadow:var(--ea-code-input-shadow-focus, var(--shadow-focus-ring))}@media(forced-colors:active){.ea-code-input--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-code-input--readonly{cursor:default}.ea-code-input--readonly:focus-visible{border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-code-input--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-code-input--filled{border-color:var(--ea-code-input-border-color-filled, var(--color-border-strong))}.ea-code-input:disabled{cursor:default}.ea-code-input::-webkit-outer-spin-button,.ea-code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"]
16052
16109
  }]
16053
16110
  }],
16054
16111
  propDecorators: {
@@ -17075,7 +17132,7 @@ var DatePickerComponent = class DatePickerComponent {
17075
17132
  }],
17076
17133
  ngImport: i0,
17077
17134
  template: "<div class=\"ea-date-picker-field ea-date-picker-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-date-picker\">\n <div\n #fieldEl\n class=\"ea-date-picker__field\"\n [ngClass]=\"fieldClasses()\">\n <button\n type=\"button\"\n class=\"ea-date-picker__calendar-button\"\n [disabled]=\"isDisabled() || readonly()\"\n [attr.aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"isOpen() ? dialogId() : null\"\n (click)=\"toggle()\">\n <ea-icon-calendar aria-hidden=\"true\" />\n </button>\n <input\n #inputEl\n type=\"text\"\n dir=\"auto\"\n autocomplete=\"off\"\n class=\"ea-date-picker__input\"\n [id]=\"id()\"\n [value]=\"inputText()\"\n [placeholder]=\"resolvedPlaceholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [attr.aria-label]=\"label() || ariaLabelledby() ? null : fallbackLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby() || 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 (input)=\"onInput($event)\"\n (keydown)=\"handleInputKeydown($event)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\" />\n @if (value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-date-picker__clear\"\n [attr.aria-label]=\"i18n.messages().datePicker.clear\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-date-picker__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <ea-popover\n [anchor]=\"fieldEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n role=\"dialog\"\n [surfaceId]=\"dialogId()\"\n [aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-date-picker__popover\"\n [ngClass]=\"popoverClasses()\"\n (keydown)=\"handleGridKeydown($event)\">\n <div class=\"ea-date-picker__header\">\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.previousYear\"\n (click)=\"goToPrevYear()\">\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.previousMonth\"\n (click)=\"goToPrevMonth()\">\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <span\n class=\"ea-date-picker__month-label\"\n aria-live=\"polite\">\n {{ monthYearLabel() }}\n </span>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.nextMonth\"\n (click)=\"goToNextMonth()\">\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.nextYear\"\n (click)=\"goToNextYear()\">\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n </div>\n\n <div\n class=\"ea-date-picker__grid\"\n role=\"grid\">\n <div\n class=\"ea-date-picker__weekday-row\"\n role=\"row\">\n @for (label of weekdayLabels(); track label) {\n <div\n class=\"ea-date-picker__weekday\"\n role=\"columnheader\">\n {{ label }}\n </div>\n }\n </div>\n @for (week of weeks(); track $index) {\n <div\n class=\"ea-date-picker__week\"\n role=\"row\">\n @for (day of week; track day.date.getTime()) {\n <div\n class=\"ea-date-picker__cell\"\n role=\"gridcell\"\n [attr.aria-selected]=\"day.isSelected\">\n <button\n type=\"button\"\n class=\"ea-date-picker__day\"\n [class.ea-date-picker__day--outside]=\"!day.isCurrentMonth\"\n [class.ea-date-picker__day--today]=\"day.isToday\"\n [class.ea-date-picker__day--selected]=\"day.isSelected\"\n [class.ea-date-picker__day--focused]=\"day.isFocused\"\n [class.ea-date-picker__day--disabled]=\"day.isDisabled\"\n [attr.aria-disabled]=\"day.isDisabled || null\"\n [attr.aria-current]=\"day.isToday ? 'date' : null\"\n [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n (click)=\"selectDay(day)\">\n {{ day.day }}\n </button>\n </div>\n }\n </div>\n }\n </div>\n\n <div class=\"ea-date-picker__footer\">\n <button\n type=\"button\"\n class=\"ea-date-picker__today-btn\"\n (click)=\"goToToday()\">\n {{ i18n.messages().datePicker.today }}\n </button>\n </div>\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",
17078
- styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-date-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-date-picker-field--xs{font-size:var(--font-size-xs)}.ea-date-picker-field--sm{font-size:var(--font-size-sm)}.ea-date-picker-field--md{font-size:var(--font-size-md)}.ea-date-picker-field--lg{font-size:var(--font-size-lg)}.ea-date-picker-field--xl{font-size:var(--font-size-xl)}.ea-date-picker{position:relative}.ea-date-picker__field{overflow:hidden;display:flex;align-items:center;gap:.5em;min-height:2.5em;padding:0 .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-date-picker__field--focused{border-color:var(--color-border-focus);outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__field--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--error{border-color:var(--color-error-default)}.ea-date-picker__field--error.ea-date-picker__field--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-date-picker__field--error.ea-date-picker__field--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--disabled{opacity:.6;background-color:var(--color-bg-muted);cursor:default}.ea-date-picker__field--readonly{background-color:var(--color-bg-subtle)}.ea-date-picker__field--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-date-picker__field--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--readonly button{cursor:default}.ea-date-picker__field--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-date-picker__field--readonly .ea-date-picker__calendar-button:disabled{opacity:1;cursor:default}.ea-date-picker__calendar-button{position:relative;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-date-picker__calendar-button>*{font-size:1.25em}.ea-date-picker__calendar-button:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__calendar-button:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__calendar-button:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__calendar-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__calendar-button:disabled{cursor:default;opacity:.5}.ea-date-picker__calendar-button{--ea-icon-button-size: 1em;--ea-icon-button-target: 24px}.ea-date-picker__calendar-button>*{font-size:1em}.ea-date-picker__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)}.ea-date-picker__input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-date-picker__input:disabled{cursor:default}.ea-date-picker__clear{position:relative;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-date-picker__clear>*{font-size:1.25em}.ea-date-picker__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__clear:disabled{cursor:default;opacity:.5}.ea-date-picker__popover{display:flex;flex-direction:column;gap:.5em;min-width:17.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-date-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-date-picker__popover{border:1px solid CanvasText}}.ea-date-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-date-picker__popover--xs{font-size:var(--font-size-xs)}.ea-date-picker__popover--sm{font-size:var(--font-size-sm)}.ea-date-picker__popover--md{font-size:var(--font-size-md)}.ea-date-picker__popover--lg{font-size:var(--font-size-lg)}.ea-date-picker__popover--xl{font-size:var(--font-size-xl)}.ea-date-picker__header{display:flex;align-items:center;gap:.25em}.ea-date-picker__nav-btn{position:relative;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-date-picker__nav-btn>*{font-size:1.25em}.ea-date-picker__nav-btn:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__nav-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__nav-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__nav-btn:disabled{cursor:default;opacity:.5}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:1em;height:1em}.ea-date-picker__nav-btn ea-icon-chevron-left+ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right+ea-icon-chevron-right{margin-inline-start:-.375em}.ea-date-picker__month-label{flex:1;font-size:.875em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:.25em}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:.25em}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:2em;font-size:.75em;font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__cell{display:flex;justify-content:center}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2.25em;height:2.25em;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not([aria-disabled=true]){background-color:var(--color-state-hover)}.ea-date-picker__day:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__day:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-secondary-text)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-state-active)}.ea-date-picker__day--selected{background-color:var(--color-brand-default);color:var(--color-text-inverse);font-weight:var(--font-weight-medium)}.ea-date-picker__day--selected:hover{background-color:var(--color-brand-hover)}@media(forced-colors:active){.ea-date-picker__day--selected{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:default}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:.25em .5em;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-brand-secondary-text);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-secondary-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__today-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"],
17135
+ styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-date-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-date-picker-field--xs{font-size:var(--font-size-xs)}.ea-date-picker-field--sm{font-size:var(--font-size-sm)}.ea-date-picker-field--md{font-size:var(--font-size-md)}.ea-date-picker-field--lg{font-size:var(--font-size-lg)}.ea-date-picker-field--xl{font-size:var(--font-size-xl)}.ea-date-picker{position:relative}.ea-date-picker__field{overflow:hidden;display:flex;align-items:center;gap:.5em;min-height:2.5em;padding:0 .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-date-picker__field--focused{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__field--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--error{border-color:var(--color-error-default)}.ea-date-picker__field--error.ea-date-picker__field--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-date-picker__field--error.ea-date-picker__field--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--disabled{opacity:.6;background-color:var(--color-bg-muted);cursor:default}.ea-date-picker__field--readonly{background-color:var(--color-bg-subtle)}.ea-date-picker__field--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-date-picker__field--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--readonly button{cursor:default}.ea-date-picker__field--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-date-picker__field--readonly .ea-date-picker__calendar-button:disabled{opacity:1;cursor:default}.ea-date-picker__calendar-button{position:relative;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-date-picker__calendar-button>*{font-size:1.25em}.ea-date-picker__calendar-button:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__calendar-button:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__calendar-button:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__calendar-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__calendar-button:disabled{cursor:default;opacity:.5}.ea-date-picker__calendar-button{--ea-icon-button-size: 1em;--ea-icon-button-target: 24px}.ea-date-picker__calendar-button>*{font-size:1em}.ea-date-picker__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)}.ea-date-picker__input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-date-picker__input:disabled{cursor:default}.ea-date-picker__clear{position:relative;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-date-picker__clear>*{font-size:1.25em}.ea-date-picker__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__clear:disabled{cursor:default;opacity:.5}.ea-date-picker__popover{display:flex;flex-direction:column;gap:.5em;min-width:17.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-date-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-date-picker__popover{border:1px solid CanvasText}}.ea-date-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-date-picker__popover--xs{font-size:var(--font-size-xs)}.ea-date-picker__popover--sm{font-size:var(--font-size-sm)}.ea-date-picker__popover--md{font-size:var(--font-size-md)}.ea-date-picker__popover--lg{font-size:var(--font-size-lg)}.ea-date-picker__popover--xl{font-size:var(--font-size-xl)}.ea-date-picker__header{display:flex;align-items:center;gap:.25em}.ea-date-picker__nav-btn{position:relative;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-date-picker__nav-btn>*{font-size:1.25em}.ea-date-picker__nav-btn:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__nav-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__nav-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__nav-btn:disabled{cursor:default;opacity:.5}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:1em;height:1em}.ea-date-picker__nav-btn ea-icon-chevron-left+ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right+ea-icon-chevron-right{margin-inline-start:-.375em}.ea-date-picker__month-label{flex:1;font-size:.875em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:.25em}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:.25em}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:2em;font-size:.75em;font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__cell{display:flex;justify-content:center}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2.25em;height:2.25em;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not([aria-disabled=true]){background-color:var(--color-state-hover)}.ea-date-picker__day:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__day:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-secondary-text)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-state-active)}.ea-date-picker__day--selected{background-color:var(--color-brand-default);color:var(--color-text-inverse);font-weight:var(--font-weight-medium)}.ea-date-picker__day--selected:hover{background-color:var(--color-brand-hover)}@media(forced-colors:active){.ea-date-picker__day--selected{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:default}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:.25em .5em;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-brand-secondary-text);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-secondary-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__today-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"],
17079
17136
  dependencies: [
17080
17137
  {
17081
17138
  kind: "component",
@@ -17183,7 +17240,7 @@ i0.ɵɵngDeclareClassMetadata({
17183
17240
  multi: true
17184
17241
  }],
17185
17242
  template: "<div class=\"ea-date-picker-field ea-date-picker-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-date-picker\">\n <div\n #fieldEl\n class=\"ea-date-picker__field\"\n [ngClass]=\"fieldClasses()\">\n <button\n type=\"button\"\n class=\"ea-date-picker__calendar-button\"\n [disabled]=\"isDisabled() || readonly()\"\n [attr.aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"isOpen() ? dialogId() : null\"\n (click)=\"toggle()\">\n <ea-icon-calendar aria-hidden=\"true\" />\n </button>\n <input\n #inputEl\n type=\"text\"\n dir=\"auto\"\n autocomplete=\"off\"\n class=\"ea-date-picker__input\"\n [id]=\"id()\"\n [value]=\"inputText()\"\n [placeholder]=\"resolvedPlaceholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [attr.aria-label]=\"label() || ariaLabelledby() ? null : fallbackLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby() || 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 (input)=\"onInput($event)\"\n (keydown)=\"handleInputKeydown($event)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\" />\n @if (value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-date-picker__clear\"\n [attr.aria-label]=\"i18n.messages().datePicker.clear\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-date-picker__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n </div>\n\n <ea-popover\n [anchor]=\"fieldEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n role=\"dialog\"\n [surfaceId]=\"dialogId()\"\n [aria-label]=\"i18n.messages().datePicker.dialogLabel\"\n [trapFocus]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-date-picker__popover\"\n [ngClass]=\"popoverClasses()\"\n (keydown)=\"handleGridKeydown($event)\">\n <div class=\"ea-date-picker__header\">\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.previousYear\"\n (click)=\"goToPrevYear()\">\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.previousMonth\"\n (click)=\"goToPrevMonth()\">\n <ea-icon-chevron-left\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <span\n class=\"ea-date-picker__month-label\"\n aria-live=\"polite\">\n {{ monthYearLabel() }}\n </span>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.nextMonth\"\n (click)=\"goToNextMonth()\">\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-date-picker__nav-btn\"\n [attr.aria-label]=\"i18n.messages().datePicker.nextYear\"\n (click)=\"goToNextYear()\">\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n <ea-icon-chevron-right\n class=\"ea-rtl-flip\"\n aria-hidden=\"true\" />\n </button>\n </div>\n\n <div\n class=\"ea-date-picker__grid\"\n role=\"grid\">\n <div\n class=\"ea-date-picker__weekday-row\"\n role=\"row\">\n @for (label of weekdayLabels(); track label) {\n <div\n class=\"ea-date-picker__weekday\"\n role=\"columnheader\">\n {{ label }}\n </div>\n }\n </div>\n @for (week of weeks(); track $index) {\n <div\n class=\"ea-date-picker__week\"\n role=\"row\">\n @for (day of week; track day.date.getTime()) {\n <div\n class=\"ea-date-picker__cell\"\n role=\"gridcell\"\n [attr.aria-selected]=\"day.isSelected\">\n <button\n type=\"button\"\n class=\"ea-date-picker__day\"\n [class.ea-date-picker__day--outside]=\"!day.isCurrentMonth\"\n [class.ea-date-picker__day--today]=\"day.isToday\"\n [class.ea-date-picker__day--selected]=\"day.isSelected\"\n [class.ea-date-picker__day--focused]=\"day.isFocused\"\n [class.ea-date-picker__day--disabled]=\"day.isDisabled\"\n [attr.aria-disabled]=\"day.isDisabled || null\"\n [attr.aria-current]=\"day.isToday ? 'date' : null\"\n [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n (click)=\"selectDay(day)\">\n {{ day.day }}\n </button>\n </div>\n }\n </div>\n }\n </div>\n\n <div class=\"ea-date-picker__footer\">\n <button\n type=\"button\"\n class=\"ea-date-picker__today-btn\"\n (click)=\"goToToday()\">\n {{ i18n.messages().datePicker.today }}\n </button>\n </div>\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",
17186
- styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-date-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-date-picker-field--xs{font-size:var(--font-size-xs)}.ea-date-picker-field--sm{font-size:var(--font-size-sm)}.ea-date-picker-field--md{font-size:var(--font-size-md)}.ea-date-picker-field--lg{font-size:var(--font-size-lg)}.ea-date-picker-field--xl{font-size:var(--font-size-xl)}.ea-date-picker{position:relative}.ea-date-picker__field{overflow:hidden;display:flex;align-items:center;gap:.5em;min-height:2.5em;padding:0 .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-date-picker__field--focused{border-color:var(--color-border-focus);outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__field--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--error{border-color:var(--color-error-default)}.ea-date-picker__field--error.ea-date-picker__field--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-date-picker__field--error.ea-date-picker__field--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--disabled{opacity:.6;background-color:var(--color-bg-muted);cursor:default}.ea-date-picker__field--readonly{background-color:var(--color-bg-subtle)}.ea-date-picker__field--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-date-picker__field--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--readonly button{cursor:default}.ea-date-picker__field--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-date-picker__field--readonly .ea-date-picker__calendar-button:disabled{opacity:1;cursor:default}.ea-date-picker__calendar-button{position:relative;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-date-picker__calendar-button>*{font-size:1.25em}.ea-date-picker__calendar-button:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__calendar-button:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__calendar-button:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__calendar-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__calendar-button:disabled{cursor:default;opacity:.5}.ea-date-picker__calendar-button{--ea-icon-button-size: 1em;--ea-icon-button-target: 24px}.ea-date-picker__calendar-button>*{font-size:1em}.ea-date-picker__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)}.ea-date-picker__input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-date-picker__input:disabled{cursor:default}.ea-date-picker__clear{position:relative;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-date-picker__clear>*{font-size:1.25em}.ea-date-picker__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__clear:disabled{cursor:default;opacity:.5}.ea-date-picker__popover{display:flex;flex-direction:column;gap:.5em;min-width:17.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-date-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-date-picker__popover{border:1px solid CanvasText}}.ea-date-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-date-picker__popover--xs{font-size:var(--font-size-xs)}.ea-date-picker__popover--sm{font-size:var(--font-size-sm)}.ea-date-picker__popover--md{font-size:var(--font-size-md)}.ea-date-picker__popover--lg{font-size:var(--font-size-lg)}.ea-date-picker__popover--xl{font-size:var(--font-size-xl)}.ea-date-picker__header{display:flex;align-items:center;gap:.25em}.ea-date-picker__nav-btn{position:relative;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-date-picker__nav-btn>*{font-size:1.25em}.ea-date-picker__nav-btn:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__nav-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__nav-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__nav-btn:disabled{cursor:default;opacity:.5}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:1em;height:1em}.ea-date-picker__nav-btn ea-icon-chevron-left+ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right+ea-icon-chevron-right{margin-inline-start:-.375em}.ea-date-picker__month-label{flex:1;font-size:.875em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:.25em}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:.25em}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:2em;font-size:.75em;font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__cell{display:flex;justify-content:center}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2.25em;height:2.25em;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not([aria-disabled=true]){background-color:var(--color-state-hover)}.ea-date-picker__day:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__day:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-secondary-text)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-state-active)}.ea-date-picker__day--selected{background-color:var(--color-brand-default);color:var(--color-text-inverse);font-weight:var(--font-weight-medium)}.ea-date-picker__day--selected:hover{background-color:var(--color-brand-hover)}@media(forced-colors:active){.ea-date-picker__day--selected{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:default}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:.25em .5em;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-brand-secondary-text);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-secondary-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__today-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"]
17243
+ styles: [".ea-date-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-date-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-date-picker-field--xs{font-size:var(--font-size-xs)}.ea-date-picker-field--sm{font-size:var(--font-size-sm)}.ea-date-picker-field--md{font-size:var(--font-size-md)}.ea-date-picker-field--lg{font-size:var(--font-size-lg)}.ea-date-picker-field--xl{font-size:var(--font-size-xl)}.ea-date-picker{position:relative}.ea-date-picker__field{overflow:hidden;display:flex;align-items:center;gap:.5em;min-height:2.5em;padding:0 .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-date-picker__field--focused{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__field--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--error{border-color:var(--color-error-default)}.ea-date-picker__field--error.ea-date-picker__field--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-date-picker__field--error.ea-date-picker__field--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--disabled{opacity:.6;background-color:var(--color-bg-muted);cursor:default}.ea-date-picker__field--readonly{background-color:var(--color-bg-subtle)}.ea-date-picker__field--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-date-picker__field--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__field--readonly button{cursor:default}.ea-date-picker__field--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-date-picker__field--readonly .ea-date-picker__calendar-button:disabled{opacity:1;cursor:default}.ea-date-picker__calendar-button{position:relative;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-date-picker__calendar-button>*{font-size:1.25em}.ea-date-picker__calendar-button:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__calendar-button:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__calendar-button:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__calendar-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__calendar-button:disabled{cursor:default;opacity:.5}.ea-date-picker__calendar-button{--ea-icon-button-size: 1em;--ea-icon-button-target: 24px}.ea-date-picker__calendar-button>*{font-size:1em}.ea-date-picker__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)}.ea-date-picker__input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-date-picker__input:disabled{cursor:default}.ea-date-picker__clear{position:relative;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-date-picker__clear>*{font-size:1.25em}.ea-date-picker__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__clear:disabled{cursor:default;opacity:.5}.ea-date-picker__popover{display:flex;flex-direction:column;gap:.5em;min-width:17.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-date-picker-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-date-picker__popover{border:1px solid CanvasText}}.ea-date-picker__popover--2xs{font-size:var(--font-size-2xs)}.ea-date-picker__popover--xs{font-size:var(--font-size-xs)}.ea-date-picker__popover--sm{font-size:var(--font-size-sm)}.ea-date-picker__popover--md{font-size:var(--font-size-md)}.ea-date-picker__popover--lg{font-size:var(--font-size-lg)}.ea-date-picker__popover--xl{font-size:var(--font-size-xl)}.ea-date-picker__header{display:flex;align-items:center;gap:.25em}.ea-date-picker__nav-btn{position:relative;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-date-picker__nav-btn>*{font-size:1.25em}.ea-date-picker__nav-btn:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-date-picker__nav-btn:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-date-picker__nav-btn:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__nav-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__nav-btn:disabled{cursor:default;opacity:.5}.ea-date-picker__nav-btn ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right{width:1em;height:1em}.ea-date-picker__nav-btn ea-icon-chevron-left+ea-icon-chevron-left,.ea-date-picker__nav-btn ea-icon-chevron-right+ea-icon-chevron-right{margin-inline-start:-.375em}.ea-date-picker__month-label{flex:1;font-size:.875em;font-weight:var(--font-weight-medium);text-align:center;color:var(--color-text-primary)}.ea-date-picker__grid{display:flex;flex-direction:column;gap:.25em}.ea-date-picker__weekday-row,.ea-date-picker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:.25em}.ea-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:2em;font-size:.75em;font-weight:var(--font-weight-medium);text-transform:uppercase;color:var(--color-text-tertiary)}.ea-date-picker__cell{display:flex;justify-content:center}.ea-date-picker__day{display:flex;align-items:center;justify-content:center;width:2.25em;height:2.25em;padding:0;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__day:hover:not([aria-disabled=true]){background-color:var(--color-state-hover)}.ea-date-picker__day:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__day:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-date-picker__day--outside{color:var(--color-text-tertiary)}.ea-date-picker__day--today{font-weight:var(--font-weight-semibold);color:var(--color-brand-secondary-text)}.ea-date-picker__day--focused:not(.ea-date-picker__day--selected){background-color:var(--color-state-active)}.ea-date-picker__day--selected{background-color:var(--color-brand-default);color:var(--color-text-inverse);font-weight:var(--font-weight-medium)}.ea-date-picker__day--selected:hover{background-color:var(--color-brand-hover)}@media(forced-colors:active){.ea-date-picker__day--selected{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-date-picker__day--disabled{color:var(--color-text-disabled);cursor:default}.ea-date-picker__day--disabled:hover{background-color:transparent}.ea-date-picker__footer{display:flex;justify-content:flex-end;padding-top:.5em;border-top:var(--border-width-thin) solid var(--color-border-default)}.ea-date-picker__today-btn{padding:.25em .5em;border:none;border-radius:var(--radius-sm);background:none;font-family:var(--font-family-sans);font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-brand-secondary-text);cursor:pointer;transition:var(--transition-colors)}.ea-date-picker__today-btn:hover{background-color:var(--color-brand-secondary-subtle)}.ea-date-picker__today-btn:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-date-picker__today-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"]
17187
17244
  }]
17188
17245
  }],
17189
17246
  propDecorators: {
@@ -18853,7 +18910,7 @@ var DropdownComponent = class DropdownComponent {
18853
18910
  ],
18854
18911
  ngImport: i0,
18855
18912
  template: "<div class=\"ea-dropdown-field ea-dropdown-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-dropdown\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-dropdown__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n role=\"combobox\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n [attr.aria-activedescendant]=\"searchable() ? null : activeOptionId()\"\n [attr.aria-labelledby]=\"triggerLabelledBy()\"\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)=\"handleKeydown($event)\">\n <span\n class=\"ea-dropdown__value\"\n [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n <bdi>{{ selectedLabel() || resolvedPlaceholder() }}</bdi>\n </span>\n <ea-icon-chevron-down\n class=\"ea-dropdown__chevron\"\n [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n </button>\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"ea-dropdown__clear\"\n [attr.aria-label]=\"i18n.messages().dropdown.clear\"\n (click)=\"clear()\">\n <ea-icon-x aria-hidden=\"true\" />\n </button>\n }\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n [role]=\"searchable() ? 'dialog' : 'listbox'\"\n [surfaceId]=\"searchable() ? id() + '-popover' : listboxId()\"\n [aria-label]=\"searchable() ? i18n.messages().dropdown.dialogLabel : label()\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n [scrollBehavior]=\"searchable() ? 'reposition' : 'close'\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-dropdown__menu\"\n [ngClass]=\"menuClasses()\"\n role=\"none\"\n (mousedown)=\"onMenuMousedown($event)\">\n @if (searchable()) {\n <div class=\"ea-dropdown__search\">\n <ea-icon-search\n class=\"ea-dropdown__search-icon\"\n aria-hidden=\"true\" />\n <input\n #searchEl\n type=\"text\"\n dir=\"auto\"\n class=\"ea-dropdown__search-input\"\n autocomplete=\"off\"\n [placeholder]=\"i18n.messages().dropdown.searchPlaceholder\"\n [value]=\"searchTerm()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n (input)=\"onSearchInput(searchEl.value)\"\n (keydown)=\"handleSearchKeydown($event)\" />\n </div>\n }\n <div\n class=\"ea-dropdown__list\"\n [attr.id]=\"searchable() ? listboxId() : null\"\n [attr.role]=\"searchable() ? 'listbox' : 'none'\"\n [attr.aria-label]=\"searchable() ? (label() ?? null) : null\">\n @for (group of renderedGroups(); track $index) {\n <div\n class=\"ea-dropdown__group\"\n [class.ea-dropdown__group--ruled]=\"group.rule\"\n [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n [attr.aria-label]=\"group.label ?? null\">\n @if (group.label; as groupLabel) {\n <div\n class=\"ea-dropdown__group-label\"\n aria-hidden=\"true\">\n {{ groupLabel }}\n </div>\n }\n @for (entry of group.options; track entry.option.value) {\n <div\n class=\"ea-dropdown__option\"\n [class.ea-dropdown__option--selected]=\"entry.option.value === value()\"\n [class.ea-dropdown__option--focused]=\"entry.index === focusedIndex()\"\n [class.ea-dropdown__option--disabled]=\"entry.option.disabled\"\n [id]=\"id() + '-option-' + entry.index\"\n role=\"option\"\n [attr.aria-selected]=\"entry.index === selectedIndex()\"\n [attr.aria-disabled]=\"entry.option.disabled || null\"\n (click)=\"select(entry.option)\"\n (mouseenter)=\"focusedIndex.set(entry.index)\">\n {{ entry.option.label }}\n </div>\n }\n </div>\n }\n </div>\n @if (searchable() && filteredOptions().length === 0) {\n <div\n class=\"ea-dropdown__empty\"\n role=\"status\">\n {{ i18n.messages().dropdown.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",
18856
- styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-dropdown-field--2xs{font-size:var(--font-size-2xs)}.ea-dropdown-field--xs{font-size:var(--font-size-xs)}.ea-dropdown-field--sm{font-size:var(--font-size-sm)}.ea-dropdown-field--md{font-size:var(--font-size-md)}.ea-dropdown-field--lg{font-size:var(--font-size-lg)}.ea-dropdown-field--xl{font-size:var(--font-size-xl)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;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;transition:var(--transition-colors),var(--transition-shadow)}.ea-dropdown__trigger:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-dropdown__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-dropdown__trigger--error.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-dropdown__trigger--readonly{cursor:default}.ea-dropdown__trigger--readonly:focus-visible{border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-dropdown__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--clearable .ea-dropdown__value{margin-inline-end:2em}.ea-dropdown__clear{position:relative;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-dropdown__clear>*{font-size:1.25em}.ea-dropdown__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-dropdown__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-dropdown__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-dropdown__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__clear:disabled{cursor:default;opacity:.5}.ea-dropdown__clear{position:absolute;top:50%;inset-inline-end:2em;transform:translateY(-50%)}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-dropdown__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{overflow:hidden;display:flex;flex-direction:column;max-height:15rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-dropdown-menu-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-dropdown__menu{border:1px solid CanvasText}}.ea-dropdown__menu--2xs{font-size:var(--font-size-2xs)}.ea-dropdown__menu--xs{font-size:var(--font-size-xs)}.ea-dropdown__menu--sm{font-size:var(--font-size-sm)}.ea-dropdown__menu--md{font-size:var(--font-size-md)}.ea-dropdown__menu--lg{font-size:var(--font-size-lg)}.ea-dropdown__menu--xl{font-size:var(--font-size-xl)}.ea-dropdown__search{position:relative;display:flex;flex-shrink:0;align-items:center;gap:.5em;padding:.5em .75em}.ea-dropdown__search:after{position:absolute;bottom:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-dropdown__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-dropdown__search-input{flex:1;min-width:0;padding:0;font-size:inherit;font-family:var(--font-family-sans);border:none;background:none;color:var(--color-text-primary)}.ea-dropdown__search-input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-dropdown__search-input:focus{outline:none}.ea-dropdown__list{overflow-y:auto;overscroll-behavior:none;flex:1;padding:.25em 0}.ea-dropdown__empty{padding:.75em;text-align:center;color:var(--color-text-tertiary)}.ea-dropdown__group{position:relative}.ea-dropdown__group--ruled{padding-top:.25em;margin-top:.25em}.ea-dropdown__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-dropdown__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-dropdown__option{padding:.5em .75em;font-size:inherit;white-space:nowrap;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-dropdown__option--focused{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--selected{color:var(--color-brand-text);font-weight:var(--font-weight-medium)}@media(forced-colors:active){.ea-dropdown__option--selected{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:default}@media(forced-colors:active){.ea-dropdown__option--disabled{color:GrayText}}\n"],
18913
+ styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-dropdown-field--2xs{font-size:var(--font-size-2xs)}.ea-dropdown-field--xs{font-size:var(--font-size-xs)}.ea-dropdown-field--sm{font-size:var(--font-size-sm)}.ea-dropdown-field--md{font-size:var(--font-size-md)}.ea-dropdown-field--lg{font-size:var(--font-size-lg)}.ea-dropdown-field--xl{font-size:var(--font-size-xl)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;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;transition:var(--transition-colors),var(--transition-shadow)}.ea-dropdown__trigger:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-dropdown__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--open{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-dropdown__trigger--error.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-dropdown__trigger--readonly{cursor:default}.ea-dropdown__trigger--readonly:focus-visible{border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-dropdown__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--clearable .ea-dropdown__value{margin-inline-end:2em}.ea-dropdown__clear{position:relative;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-dropdown__clear>*{font-size:1.25em}.ea-dropdown__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-dropdown__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-dropdown__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-dropdown__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__clear:disabled{cursor:default;opacity:.5}.ea-dropdown__clear{position:absolute;top:50%;inset-inline-end:2em;transform:translateY(-50%)}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-dropdown__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{overflow:hidden;display:flex;flex-direction:column;max-height:15rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-dropdown-menu-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-dropdown__menu{border:1px solid CanvasText}}.ea-dropdown__menu--2xs{font-size:var(--font-size-2xs)}.ea-dropdown__menu--xs{font-size:var(--font-size-xs)}.ea-dropdown__menu--sm{font-size:var(--font-size-sm)}.ea-dropdown__menu--md{font-size:var(--font-size-md)}.ea-dropdown__menu--lg{font-size:var(--font-size-lg)}.ea-dropdown__menu--xl{font-size:var(--font-size-xl)}.ea-dropdown__search{position:relative;display:flex;flex-shrink:0;align-items:center;gap:.5em;padding:.5em .75em}.ea-dropdown__search:after{position:absolute;bottom:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-dropdown__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-dropdown__search-input{flex:1;min-width:0;padding:0;font-size:inherit;font-family:var(--font-family-sans);border:none;background:none;color:var(--color-text-primary)}.ea-dropdown__search-input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-dropdown__search-input:focus{outline:none}.ea-dropdown__list{overflow-y:auto;overscroll-behavior:none;flex:1;padding:.25em 0}.ea-dropdown__empty{padding:.75em;text-align:center;color:var(--color-text-tertiary)}.ea-dropdown__group{position:relative}.ea-dropdown__group--ruled{padding-top:.25em;margin-top:.25em}.ea-dropdown__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-dropdown__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-dropdown__option{padding:.5em .75em;font-size:inherit;white-space:nowrap;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-dropdown__option--focused{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--selected{color:var(--color-brand-text);font-weight:var(--font-weight-medium)}@media(forced-colors:active){.ea-dropdown__option--selected{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:default}@media(forced-colors:active){.ea-dropdown__option--disabled{color:GrayText}}\n"],
18857
18914
  dependencies: [
18858
18915
  {
18859
18916
  kind: "component",
@@ -18954,7 +19011,7 @@ i0.ɵɵngDeclareClassMetadata({
18954
19011
  multi: true
18955
19012
  }],
18956
19013
  template: "<div class=\"ea-dropdown-field ea-dropdown-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-dropdown\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-dropdown__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n role=\"combobox\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n [attr.aria-activedescendant]=\"searchable() ? null : activeOptionId()\"\n [attr.aria-labelledby]=\"triggerLabelledBy()\"\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)=\"handleKeydown($event)\">\n <span\n class=\"ea-dropdown__value\"\n [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n <bdi>{{ selectedLabel() || resolvedPlaceholder() }}</bdi>\n </span>\n <ea-icon-chevron-down\n class=\"ea-dropdown__chevron\"\n [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n </button>\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"ea-dropdown__clear\"\n [attr.aria-label]=\"i18n.messages().dropdown.clear\"\n (click)=\"clear()\">\n <ea-icon-x aria-hidden=\"true\" />\n </button>\n }\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n [role]=\"searchable() ? 'dialog' : 'listbox'\"\n [surfaceId]=\"searchable() ? id() + '-popover' : listboxId()\"\n [aria-label]=\"searchable() ? i18n.messages().dropdown.dialogLabel : label()\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n [scrollBehavior]=\"searchable() ? 'reposition' : 'close'\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-dropdown__menu\"\n [ngClass]=\"menuClasses()\"\n role=\"none\"\n (mousedown)=\"onMenuMousedown($event)\">\n @if (searchable()) {\n <div class=\"ea-dropdown__search\">\n <ea-icon-search\n class=\"ea-dropdown__search-icon\"\n aria-hidden=\"true\" />\n <input\n #searchEl\n type=\"text\"\n dir=\"auto\"\n class=\"ea-dropdown__search-input\"\n autocomplete=\"off\"\n [placeholder]=\"i18n.messages().dropdown.searchPlaceholder\"\n [value]=\"searchTerm()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n (input)=\"onSearchInput(searchEl.value)\"\n (keydown)=\"handleSearchKeydown($event)\" />\n </div>\n }\n <div\n class=\"ea-dropdown__list\"\n [attr.id]=\"searchable() ? listboxId() : null\"\n [attr.role]=\"searchable() ? 'listbox' : 'none'\"\n [attr.aria-label]=\"searchable() ? (label() ?? null) : null\">\n @for (group of renderedGroups(); track $index) {\n <div\n class=\"ea-dropdown__group\"\n [class.ea-dropdown__group--ruled]=\"group.rule\"\n [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n [attr.aria-label]=\"group.label ?? null\">\n @if (group.label; as groupLabel) {\n <div\n class=\"ea-dropdown__group-label\"\n aria-hidden=\"true\">\n {{ groupLabel }}\n </div>\n }\n @for (entry of group.options; track entry.option.value) {\n <div\n class=\"ea-dropdown__option\"\n [class.ea-dropdown__option--selected]=\"entry.option.value === value()\"\n [class.ea-dropdown__option--focused]=\"entry.index === focusedIndex()\"\n [class.ea-dropdown__option--disabled]=\"entry.option.disabled\"\n [id]=\"id() + '-option-' + entry.index\"\n role=\"option\"\n [attr.aria-selected]=\"entry.index === selectedIndex()\"\n [attr.aria-disabled]=\"entry.option.disabled || null\"\n (click)=\"select(entry.option)\"\n (mouseenter)=\"focusedIndex.set(entry.index)\">\n {{ entry.option.label }}\n </div>\n }\n </div>\n }\n </div>\n @if (searchable() && filteredOptions().length === 0) {\n <div\n class=\"ea-dropdown__empty\"\n role=\"status\">\n {{ i18n.messages().dropdown.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",
18957
- styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-dropdown-field--2xs{font-size:var(--font-size-2xs)}.ea-dropdown-field--xs{font-size:var(--font-size-xs)}.ea-dropdown-field--sm{font-size:var(--font-size-sm)}.ea-dropdown-field--md{font-size:var(--font-size-md)}.ea-dropdown-field--lg{font-size:var(--font-size-lg)}.ea-dropdown-field--xl{font-size:var(--font-size-xl)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;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;transition:var(--transition-colors),var(--transition-shadow)}.ea-dropdown__trigger:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-dropdown__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-dropdown__trigger--error.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-dropdown__trigger--readonly{cursor:default}.ea-dropdown__trigger--readonly:focus-visible{border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-dropdown__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--clearable .ea-dropdown__value{margin-inline-end:2em}.ea-dropdown__clear{position:relative;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-dropdown__clear>*{font-size:1.25em}.ea-dropdown__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-dropdown__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-dropdown__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-dropdown__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__clear:disabled{cursor:default;opacity:.5}.ea-dropdown__clear{position:absolute;top:50%;inset-inline-end:2em;transform:translateY(-50%)}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-dropdown__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{overflow:hidden;display:flex;flex-direction:column;max-height:15rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-dropdown-menu-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-dropdown__menu{border:1px solid CanvasText}}.ea-dropdown__menu--2xs{font-size:var(--font-size-2xs)}.ea-dropdown__menu--xs{font-size:var(--font-size-xs)}.ea-dropdown__menu--sm{font-size:var(--font-size-sm)}.ea-dropdown__menu--md{font-size:var(--font-size-md)}.ea-dropdown__menu--lg{font-size:var(--font-size-lg)}.ea-dropdown__menu--xl{font-size:var(--font-size-xl)}.ea-dropdown__search{position:relative;display:flex;flex-shrink:0;align-items:center;gap:.5em;padding:.5em .75em}.ea-dropdown__search:after{position:absolute;bottom:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-dropdown__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-dropdown__search-input{flex:1;min-width:0;padding:0;font-size:inherit;font-family:var(--font-family-sans);border:none;background:none;color:var(--color-text-primary)}.ea-dropdown__search-input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-dropdown__search-input:focus{outline:none}.ea-dropdown__list{overflow-y:auto;overscroll-behavior:none;flex:1;padding:.25em 0}.ea-dropdown__empty{padding:.75em;text-align:center;color:var(--color-text-tertiary)}.ea-dropdown__group{position:relative}.ea-dropdown__group--ruled{padding-top:.25em;margin-top:.25em}.ea-dropdown__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-dropdown__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-dropdown__option{padding:.5em .75em;font-size:inherit;white-space:nowrap;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-dropdown__option--focused{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--selected{color:var(--color-brand-text);font-weight:var(--font-weight-medium)}@media(forced-colors:active){.ea-dropdown__option--selected{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:default}@media(forced-colors:active){.ea-dropdown__option--disabled{color:GrayText}}\n"]
19014
+ styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-dropdown-field--2xs{font-size:var(--font-size-2xs)}.ea-dropdown-field--xs{font-size:var(--font-size-xs)}.ea-dropdown-field--sm{font-size:var(--font-size-sm)}.ea-dropdown-field--md{font-size:var(--font-size-md)}.ea-dropdown-field--lg{font-size:var(--font-size-lg)}.ea-dropdown-field--xl{font-size:var(--font-size-xl)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;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;transition:var(--transition-colors),var(--transition-shadow)}.ea-dropdown__trigger:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-dropdown__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--open{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-dropdown__trigger--error.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:default}.ea-dropdown__trigger--readonly{cursor:default}.ea-dropdown__trigger--readonly:focus-visible{border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-dropdown__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--clearable .ea-dropdown__value{margin-inline-end:2em}.ea-dropdown__clear{position:relative;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-dropdown__clear>*{font-size:1.25em}.ea-dropdown__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-dropdown__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-dropdown__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-dropdown__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__clear:disabled{cursor:default;opacity:.5}.ea-dropdown__clear{position:absolute;top:50%;inset-inline-end:2em;transform:translateY(-50%)}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-dropdown__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{overflow:hidden;display:flex;flex-direction:column;max-height:15rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-dropdown-menu-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-dropdown__menu{border:1px solid CanvasText}}.ea-dropdown__menu--2xs{font-size:var(--font-size-2xs)}.ea-dropdown__menu--xs{font-size:var(--font-size-xs)}.ea-dropdown__menu--sm{font-size:var(--font-size-sm)}.ea-dropdown__menu--md{font-size:var(--font-size-md)}.ea-dropdown__menu--lg{font-size:var(--font-size-lg)}.ea-dropdown__menu--xl{font-size:var(--font-size-xl)}.ea-dropdown__search{position:relative;display:flex;flex-shrink:0;align-items:center;gap:.5em;padding:.5em .75em}.ea-dropdown__search:after{position:absolute;bottom:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-dropdown__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-dropdown__search-input{flex:1;min-width:0;padding:0;font-size:inherit;font-family:var(--font-family-sans);border:none;background:none;color:var(--color-text-primary)}.ea-dropdown__search-input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-dropdown__search-input:focus{outline:none}.ea-dropdown__list{overflow-y:auto;overscroll-behavior:none;flex:1;padding:.25em 0}.ea-dropdown__empty{padding:.75em;text-align:center;color:var(--color-text-tertiary)}.ea-dropdown__group{position:relative}.ea-dropdown__group--ruled{padding-top:.25em;margin-top:.25em}.ea-dropdown__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-dropdown__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-dropdown__option{padding:.5em .75em;font-size:inherit;white-space:nowrap;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-dropdown__option--focused{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--selected{color:var(--color-brand-text);font-weight:var(--font-weight-medium)}@media(forced-colors:active){.ea-dropdown__option--selected{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:default}@media(forced-colors:active){.ea-dropdown__option--disabled{color:GrayText}}\n"]
18958
19015
  }]
18959
19016
  }],
18960
19017
  ctorParameters: () => [],
@@ -23919,7 +23976,7 @@ var MultiSelectComponent = class MultiSelectComponent {
23919
23976
  ],
23920
23977
  ngImport: i0,
23921
23978
  template: "<div class=\"ea-multi-select-field ea-multi-select-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-multi-select\">\n <div\n #wrapperEl\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]=\"ariaLabelledby() || (label() ? id() + '-label' : null)\"\n [attr.aria-label]=\"label() || ariaLabelledby() ? 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 [maxWidth]=\"maxChipWidth()\"\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]=\"wrapperEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n [aria-label]=\"i18n.messages().multiSelect.dialogLabel\"\n [matchAnchorWidth]=\"true\"\n [maxWidth]=\"popoverMaxWidth()\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"reposition\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-multi-select__popover\"\n [ngClass]=\"menuClasses()\"\n [style.max-height.px]=\"popoverMaxHeight()\">\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 #listEl\n class=\"ea-multi-select__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [id]=\"listboxId()\"\n [attr.aria-labelledby]=\"label() ? null : ariaLabelledby() || null\"\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 (group of renderedGroups(); track $index) {\n <li\n class=\"ea-multi-select__group\"\n [class.ea-multi-select__group--ruled]=\"group.rule\"\n role=\"presentation\">\n @if (group.label; as groupLabel) {\n <span\n class=\"ea-multi-select__group-label\"\n aria-hidden=\"true\">\n {{ groupLabel }}\n </span>\n }\n <ul\n class=\"ea-multi-select__group-options\"\n [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n [attr.aria-label]=\"group.label ?? null\">\n @for (entry of group.options; track entry.option.value) {\n <li\n class=\"ea-multi-select__option\"\n [class.ea-multi-select__option--focused]=\"\n focusedIndex() === entry.index + selectAllOffset()\n \"\n [class.ea-multi-select__option--disabled]=\"entry.option.disabled\"\n [id]=\"id() + '-opt-' + (entry.index + selectAllOffset())\"\n role=\"option\"\n [attr.aria-selected]=\"selectedSet().has(entry.option.value)\"\n [attr.aria-disabled]=\"entry.option.disabled || null\"\n (click)=\"onOptionClick(entry.option, entry.index)\">\n <ea-checkbox\n size=\"sm\"\n inert\n aria-hidden=\"true\"\n [checked]=\"selectedSet().has(entry.option.value)\"\n [disabled]=\"!!entry.option.disabled\" />\n <span\n #optionLabelEl\n class=\"ea-multi-select__option-label\"\n [attr.data-value]=\"entry.option.value\"\n [eaTooltip]=\"\n clippedOptions().has(entry.option.value) ? entry.option.label : ''\n \">\n {{ entry.option.label }}\n </span>\n </li>\n }\n </ul>\n </li>\n }\n @if (creatableText(); as newText) {\n <li\n class=\"ea-multi-select__option ea-multi-select__option--create\"\n [class.ea-multi-select__option--focused]=\"focusedIndex() === createRow()\"\n [id]=\"id() + '-opt-' + createRow()\"\n role=\"option\"\n [attr.aria-selected]=\"false\"\n (click)=\"createOption()\">\n <ea-icon-plus\n class=\"ea-multi-select__create-icon\"\n aria-hidden=\"true\" />\n <span class=\"ea-multi-select__option-label\">\n {{ i18n.messages().multiSelect.create(newText) }}\n </span>\n </li>\n }\n </ul>\n @if (filteredOptions().length === 0 && !creatableText()) {\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",
23922
- styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-multi-select-field--2xs{font-size:var(--font-size-2xs)}.ea-multi-select-field--xs{font-size:var(--font-size-xs)}.ea-multi-select-field--sm{font-size:var(--font-size-sm)}.ea-multi-select-field--md{font-size:var(--font-size-md)}.ea-multi-select-field--lg{font-size:var(--font-size-lg)}.ea-multi-select-field--xl{font-size:var(--font-size-xl)}.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:has(ea-tag){padding-block:.125em}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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);outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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){outline:none;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:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly){cursor:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.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,.ea-multi-select__trigger--readonly{cursor:default}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:.25em;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}.ea-multi-select__trigger-content::-webkit-scrollbar{display:none}.ea-multi-select__trigger-content ea-tag{flex-shrink:0;--ea-tag-padding-block: 0}.ea-multi-select__trigger-placeholder{opacity:1;font-style:italic;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 .4285714286em;font-size:.875em;font-weight:var(--font-weight-medium);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-multi-select__clear{position:relative;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:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-multi-select__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-multi-select__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__clear:disabled{cursor:default;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--2xs{font-size:var(--font-size-2xs)}.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:.5em;flex-shrink:0;padding:.5em .75em;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{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-multi-select__search-input:focus{outline:none}.ea-multi-select__list{overflow-y:auto;overscroll-behavior:none;flex:1;margin:0;padding:.25em 0;list-style:none}.ea-multi-select__group{position:relative}.ea-multi-select__group--ruled{padding-top:.25em;margin-top:.25em}.ea-multi-select__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-multi-select__group-options{padding:0;margin:0;list-style:none}.ea-multi-select__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-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:default}@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--create{font-weight:var(--font-weight-medium);color:var(--color-brand-text)}.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__create-icon{flex-shrink:0;width:1em;height:1em}.ea-multi-select__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:.75em;font-size:inherit;text-align:center;color:var(--color-text-tertiary);list-style:none}\n"],
23979
+ styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-multi-select-field--2xs{font-size:var(--font-size-2xs)}.ea-multi-select-field--xs{font-size:var(--font-size-xs)}.ea-multi-select-field--sm{font-size:var(--font-size-sm)}.ea-multi-select-field--md{font-size:var(--font-size-md)}.ea-multi-select-field--lg{font-size:var(--font-size-lg)}.ea-multi-select-field--xl{font-size:var(--font-size-xl)}.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:has(ea-tag){padding-block:.125em}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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){outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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){outline:none;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:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly){cursor:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.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,.ea-multi-select__trigger--readonly{cursor:default}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:.25em;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}.ea-multi-select__trigger-content::-webkit-scrollbar{display:none}.ea-multi-select__trigger-content ea-tag{flex-shrink:0;--ea-tag-padding-block: 0}.ea-multi-select__trigger-placeholder{opacity:1;font-style:italic;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 .4285714286em;font-size:.875em;font-weight:var(--font-weight-medium);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-multi-select__clear{position:relative;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:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-multi-select__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-multi-select__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__clear:disabled{cursor:default;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--2xs{font-size:var(--font-size-2xs)}.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:.5em;flex-shrink:0;padding:.5em .75em;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{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-multi-select__search-input:focus{outline:none}.ea-multi-select__list{overflow-y:auto;overscroll-behavior:none;flex:1;margin:0;padding:.25em 0;list-style:none}.ea-multi-select__group{position:relative}.ea-multi-select__group--ruled{padding-top:.25em;margin-top:.25em}.ea-multi-select__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-multi-select__group-options{padding:0;margin:0;list-style:none}.ea-multi-select__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-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:default}@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--create{font-weight:var(--font-weight-medium);color:var(--color-brand-text)}.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__create-icon{flex-shrink:0;width:1em;height:1em}.ea-multi-select__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:.75em;font-size:inherit;text-align:center;color:var(--color-text-tertiary);list-style:none}\n"],
23923
23980
  dependencies: [
23924
23981
  {
23925
23982
  kind: "component",
@@ -24085,7 +24142,7 @@ i0.ɵɵngDeclareClassMetadata({
24085
24142
  multi: true
24086
24143
  }],
24087
24144
  template: "<div class=\"ea-multi-select-field ea-multi-select-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-multi-select\">\n <div\n #wrapperEl\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]=\"ariaLabelledby() || (label() ? id() + '-label' : null)\"\n [attr.aria-label]=\"label() || ariaLabelledby() ? 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 [maxWidth]=\"maxChipWidth()\"\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]=\"wrapperEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n [aria-label]=\"i18n.messages().multiSelect.dialogLabel\"\n [matchAnchorWidth]=\"true\"\n [maxWidth]=\"popoverMaxWidth()\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"reposition\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-multi-select__popover\"\n [ngClass]=\"menuClasses()\"\n [style.max-height.px]=\"popoverMaxHeight()\">\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 #listEl\n class=\"ea-multi-select__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [id]=\"listboxId()\"\n [attr.aria-labelledby]=\"label() ? null : ariaLabelledby() || null\"\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 (group of renderedGroups(); track $index) {\n <li\n class=\"ea-multi-select__group\"\n [class.ea-multi-select__group--ruled]=\"group.rule\"\n role=\"presentation\">\n @if (group.label; as groupLabel) {\n <span\n class=\"ea-multi-select__group-label\"\n aria-hidden=\"true\">\n {{ groupLabel }}\n </span>\n }\n <ul\n class=\"ea-multi-select__group-options\"\n [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n [attr.aria-label]=\"group.label ?? null\">\n @for (entry of group.options; track entry.option.value) {\n <li\n class=\"ea-multi-select__option\"\n [class.ea-multi-select__option--focused]=\"\n focusedIndex() === entry.index + selectAllOffset()\n \"\n [class.ea-multi-select__option--disabled]=\"entry.option.disabled\"\n [id]=\"id() + '-opt-' + (entry.index + selectAllOffset())\"\n role=\"option\"\n [attr.aria-selected]=\"selectedSet().has(entry.option.value)\"\n [attr.aria-disabled]=\"entry.option.disabled || null\"\n (click)=\"onOptionClick(entry.option, entry.index)\">\n <ea-checkbox\n size=\"sm\"\n inert\n aria-hidden=\"true\"\n [checked]=\"selectedSet().has(entry.option.value)\"\n [disabled]=\"!!entry.option.disabled\" />\n <span\n #optionLabelEl\n class=\"ea-multi-select__option-label\"\n [attr.data-value]=\"entry.option.value\"\n [eaTooltip]=\"\n clippedOptions().has(entry.option.value) ? entry.option.label : ''\n \">\n {{ entry.option.label }}\n </span>\n </li>\n }\n </ul>\n </li>\n }\n @if (creatableText(); as newText) {\n <li\n class=\"ea-multi-select__option ea-multi-select__option--create\"\n [class.ea-multi-select__option--focused]=\"focusedIndex() === createRow()\"\n [id]=\"id() + '-opt-' + createRow()\"\n role=\"option\"\n [attr.aria-selected]=\"false\"\n (click)=\"createOption()\">\n <ea-icon-plus\n class=\"ea-multi-select__create-icon\"\n aria-hidden=\"true\" />\n <span class=\"ea-multi-select__option-label\">\n {{ i18n.messages().multiSelect.create(newText) }}\n </span>\n </li>\n }\n </ul>\n @if (filteredOptions().length === 0 && !creatableText()) {\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",
24088
- styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-multi-select-field--2xs{font-size:var(--font-size-2xs)}.ea-multi-select-field--xs{font-size:var(--font-size-xs)}.ea-multi-select-field--sm{font-size:var(--font-size-sm)}.ea-multi-select-field--md{font-size:var(--font-size-md)}.ea-multi-select-field--lg{font-size:var(--font-size-lg)}.ea-multi-select-field--xl{font-size:var(--font-size-xl)}.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:has(ea-tag){padding-block:.125em}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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);outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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){outline:none;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:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly){cursor:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.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,.ea-multi-select__trigger--readonly{cursor:default}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:.25em;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}.ea-multi-select__trigger-content::-webkit-scrollbar{display:none}.ea-multi-select__trigger-content ea-tag{flex-shrink:0;--ea-tag-padding-block: 0}.ea-multi-select__trigger-placeholder{opacity:1;font-style:italic;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 .4285714286em;font-size:.875em;font-weight:var(--font-weight-medium);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-multi-select__clear{position:relative;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:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-multi-select__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-multi-select__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__clear:disabled{cursor:default;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--2xs{font-size:var(--font-size-2xs)}.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:.5em;flex-shrink:0;padding:.5em .75em;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{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-multi-select__search-input:focus{outline:none}.ea-multi-select__list{overflow-y:auto;overscroll-behavior:none;flex:1;margin:0;padding:.25em 0;list-style:none}.ea-multi-select__group{position:relative}.ea-multi-select__group--ruled{padding-top:.25em;margin-top:.25em}.ea-multi-select__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-multi-select__group-options{padding:0;margin:0;list-style:none}.ea-multi-select__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-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:default}@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--create{font-weight:var(--font-weight-medium);color:var(--color-brand-text)}.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__create-icon{flex-shrink:0;width:1em;height:1em}.ea-multi-select__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:.75em;font-size:inherit;text-align:center;color:var(--color-text-tertiary);list-style:none}\n"]
24145
+ styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-multi-select-field--2xs{font-size:var(--font-size-2xs)}.ea-multi-select-field--xs{font-size:var(--font-size-xs)}.ea-multi-select-field--sm{font-size:var(--font-size-sm)}.ea-multi-select-field--md{font-size:var(--font-size-md)}.ea-multi-select-field--lg{font-size:var(--font-size-lg)}.ea-multi-select-field--xl{font-size:var(--font-size-xl)}.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:has(ea-tag){padding-block:.125em}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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){outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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){outline:none;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:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly){cursor:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.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,.ea-multi-select__trigger--readonly{cursor:default}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:.25em;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}.ea-multi-select__trigger-content::-webkit-scrollbar{display:none}.ea-multi-select__trigger-content ea-tag{flex-shrink:0;--ea-tag-padding-block: 0}.ea-multi-select__trigger-placeholder{opacity:1;font-style:italic;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 .4285714286em;font-size:.875em;font-weight:var(--font-weight-medium);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-multi-select__clear{position:relative;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:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-multi-select__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-multi-select__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__clear:disabled{cursor:default;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--2xs{font-size:var(--font-size-2xs)}.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:.5em;flex-shrink:0;padding:.5em .75em;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{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-multi-select__search-input:focus{outline:none}.ea-multi-select__list{overflow-y:auto;overscroll-behavior:none;flex:1;margin:0;padding:.25em 0;list-style:none}.ea-multi-select__group{position:relative}.ea-multi-select__group--ruled{padding-top:.25em;margin-top:.25em}.ea-multi-select__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-divider);content:\"\"}.ea-multi-select__group-options{padding:0;margin:0;list-style:none}.ea-multi-select__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-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:default}@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--create{font-weight:var(--font-weight-medium);color:var(--color-brand-text)}.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__create-icon{flex-shrink:0;width:1em;height:1em}.ea-multi-select__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:.75em;font-size:inherit;text-align:center;color:var(--color-text-tertiary);list-style:none}\n"]
24089
24146
  }]
24090
24147
  }],
24091
24148
  ctorParameters: () => [],
@@ -24614,7 +24671,7 @@ var NumberInputComponent = class NumberInputComponent {
24614
24671
  }],
24615
24672
  ngImport: i0,
24616
24673
  template: "<div\n class=\"ea-number-input-field ea-number-input-field--{{ size() }}\"\n [style.--ea-number-input-chars]=\"maxDigits()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\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 </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
24617
- styles: [".ea-number-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-number-input-field--2xs{font-size:var(--font-size-2xs)}.ea-number-input-field--xs{font-size:var(--font-size-xs)}.ea-number-input-field--sm{font-size:var(--font-size-sm)}.ea-number-input-field--md{font-size:var(--font-size-md)}.ea-number-input-field--lg{font-size:var(--font-size-lg)}.ea-number-input-field--xl{font-size:var(--font-size-xl)}.ea-number-input-wrapper{overflow:hidden;display:flex;align-items:center;width:fit-content;min-height:2.5em;padding-block:0;padding-inline:.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-secondary);transition:var(--transition-colors),var(--transition-shadow)}.ea-number-input-wrapper--focused{border-color:var(--color-border-focus);outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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{outline:none;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:default;opacity:.6}.ea-number-input-wrapper--disabled .ea-number-input{cursor:default}.ea-number-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-number-input-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-number-input-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--readonly button{cursor:default}.ea-number-input-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-number-input{width:calc(var(--ea-number-input-chars, 6) * 1ch);min-width:0;padding:.5em 0;font-family:var(--font-family-sans);line-height:var(--line-height-normal);font-variant-numeric:tabular-nums;border:none;outline:none;background:transparent;color:var(--color-text-primary);appearance:textfield;-moz-appearance:textfield}.ea-number-input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-number-input:disabled{cursor:default}.ea-number-input::-webkit-inner-spin-button,.ea-number-input::-webkit-outer-spin-button{margin:0;appearance:none;-webkit-appearance:none}\n"],
24674
+ styles: [".ea-number-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-number-input-field--2xs{font-size:var(--font-size-2xs)}.ea-number-input-field--xs{font-size:var(--font-size-xs)}.ea-number-input-field--sm{font-size:var(--font-size-sm)}.ea-number-input-field--md{font-size:var(--font-size-md)}.ea-number-input-field--lg{font-size:var(--font-size-lg)}.ea-number-input-field--xl{font-size:var(--font-size-xl)}.ea-number-input-wrapper{overflow:hidden;display:flex;align-items:center;width:fit-content;min-height:2.5em;padding-block:0;padding-inline:.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-secondary);transition:var(--transition-colors),var(--transition-shadow)}.ea-number-input-wrapper--focused{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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{outline:none;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:default;opacity:.6}.ea-number-input-wrapper--disabled .ea-number-input{cursor:default}.ea-number-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-number-input-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-number-input-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--readonly button{cursor:default}.ea-number-input-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-number-input{width:calc(var(--ea-number-input-chars, 6) * 1ch);min-width:0;padding:.5em 0;font-family:var(--font-family-sans);line-height:var(--line-height-normal);font-variant-numeric:tabular-nums;border:none;outline:none;background:transparent;color:var(--color-text-primary);appearance:textfield;-moz-appearance:textfield}.ea-number-input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-number-input:disabled{cursor:default}.ea-number-input::-webkit-inner-spin-button,.ea-number-input::-webkit-outer-spin-button{margin:0;appearance:none;-webkit-appearance:none}\n"],
24618
24675
  dependencies: [
24619
24676
  {
24620
24677
  kind: "component",
@@ -24670,7 +24727,7 @@ i0.ɵɵngDeclareClassMetadata({
24670
24727
  multi: true
24671
24728
  }],
24672
24729
  template: "<div\n class=\"ea-number-input-field ea-number-input-field--{{ size() }}\"\n [style.--ea-number-input-chars]=\"maxDigits()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\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 </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
24673
- styles: [".ea-number-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-number-input-field--2xs{font-size:var(--font-size-2xs)}.ea-number-input-field--xs{font-size:var(--font-size-xs)}.ea-number-input-field--sm{font-size:var(--font-size-sm)}.ea-number-input-field--md{font-size:var(--font-size-md)}.ea-number-input-field--lg{font-size:var(--font-size-lg)}.ea-number-input-field--xl{font-size:var(--font-size-xl)}.ea-number-input-wrapper{overflow:hidden;display:flex;align-items:center;width:fit-content;min-height:2.5em;padding-block:0;padding-inline:.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-secondary);transition:var(--transition-colors),var(--transition-shadow)}.ea-number-input-wrapper--focused{border-color:var(--color-border-focus);outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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{outline:none;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:default;opacity:.6}.ea-number-input-wrapper--disabled .ea-number-input{cursor:default}.ea-number-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-number-input-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-number-input-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--readonly button{cursor:default}.ea-number-input-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-number-input{width:calc(var(--ea-number-input-chars, 6) * 1ch);min-width:0;padding:.5em 0;font-family:var(--font-family-sans);line-height:var(--line-height-normal);font-variant-numeric:tabular-nums;border:none;outline:none;background:transparent;color:var(--color-text-primary);appearance:textfield;-moz-appearance:textfield}.ea-number-input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-number-input:disabled{cursor:default}.ea-number-input::-webkit-inner-spin-button,.ea-number-input::-webkit-outer-spin-button{margin:0;appearance:none;-webkit-appearance:none}\n"]
24730
+ styles: [".ea-number-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-number-input-field--2xs{font-size:var(--font-size-2xs)}.ea-number-input-field--xs{font-size:var(--font-size-xs)}.ea-number-input-field--sm{font-size:var(--font-size-sm)}.ea-number-input-field--md{font-size:var(--font-size-md)}.ea-number-input-field--lg{font-size:var(--font-size-lg)}.ea-number-input-field--xl{font-size:var(--font-size-xl)}.ea-number-input-wrapper{overflow:hidden;display:flex;align-items:center;width:fit-content;min-height:2.5em;padding-block:0;padding-inline:.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-secondary);transition:var(--transition-colors),var(--transition-shadow)}.ea-number-input-wrapper--focused{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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{outline:none;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:default;opacity:.6}.ea-number-input-wrapper--disabled .ea-number-input{cursor:default}.ea-number-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-number-input-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-number-input-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-number-input-wrapper--readonly button{cursor:default}.ea-number-input-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-number-input{width:calc(var(--ea-number-input-chars, 6) * 1ch);min-width:0;padding:.5em 0;font-family:var(--font-family-sans);line-height:var(--line-height-normal);font-variant-numeric:tabular-nums;border:none;outline:none;background:transparent;color:var(--color-text-primary);appearance:textfield;-moz-appearance:textfield}.ea-number-input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-number-input:disabled{cursor:default}.ea-number-input::-webkit-inner-spin-button,.ea-number-input::-webkit-outer-spin-button{margin:0;appearance:none;-webkit-appearance:none}\n"]
24674
24731
  }]
24675
24732
  }],
24676
24733
  ctorParameters: () => [],
@@ -30206,7 +30263,7 @@ var TextareaComponent = class TextareaComponent {
30206
30263
  }],
30207
30264
  ngImport: i0,
30208
30265
  template: "<div class=\"ea-textarea-field ea-textarea-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\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]=\"describedBy()\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"></textarea>\n </div>\n\n <ng-template #messages>\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n </ng-template>\n\n @if (showCount()) {\n <div class=\"ea-textarea-field__footer\">\n <ng-container [ngTemplateOutlet]=\"messages\" />\n <span\n class=\"ea-textarea-field__count\"\n [id]=\"id() + '-count'\">\n {{ countText() }}\n </span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"messages\" />\n }\n</div>\n",
30209
- styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-textarea-field--2xs{font-size:var(--font-size-2xs)}.ea-textarea-field--xs{font-size:var(--font-size-xs)}.ea-textarea-field--sm{font-size:var(--font-size-sm)}.ea-textarea-field--md{font-size:var(--font-size-md)}.ea-textarea-field--lg{font-size:var(--font-size-lg)}.ea-textarea-field--xl{font-size:var(--font-size-xl)}.ea-textarea-field__footer{display:flex;align-items:flex-start;gap:.75em}.ea-textarea-field__count{flex-shrink:0;margin-inline-start:auto;font-size:max(var(--ea-field-messages-size, var(--text-helper-size)),.6875rem);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh);font-variant-numeric:tabular-nums}.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--focused{border-color:var(--color-border-focus);outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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{outline:none;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:default;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:default}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-textarea-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--readonly button{cursor:default}.ea-textarea-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.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{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:default}\n"],
30266
+ styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-textarea-field--2xs{font-size:var(--font-size-2xs)}.ea-textarea-field--xs{font-size:var(--font-size-xs)}.ea-textarea-field--sm{font-size:var(--font-size-sm)}.ea-textarea-field--md{font-size:var(--font-size-md)}.ea-textarea-field--lg{font-size:var(--font-size-lg)}.ea-textarea-field--xl{font-size:var(--font-size-xl)}.ea-textarea-field__footer{display:flex;align-items:flex-start;gap:.75em}.ea-textarea-field__count{flex-shrink:0;margin-inline-start:auto;font-size:max(var(--ea-field-messages-size, var(--text-helper-size)),.6875rem);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh);font-variant-numeric:tabular-nums}.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--focused{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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{outline:none;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:default;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:default}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-textarea-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--readonly button{cursor:default}.ea-textarea-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.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{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:default}\n"],
30210
30267
  dependencies: [
30211
30268
  {
30212
30269
  kind: "component",
@@ -30273,7 +30330,7 @@ i0.ɵɵngDeclareClassMetadata({
30273
30330
  multi: true
30274
30331
  }],
30275
30332
  template: "<div class=\"ea-textarea-field ea-textarea-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\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]=\"describedBy()\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"></textarea>\n </div>\n\n <ng-template #messages>\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n </ng-template>\n\n @if (showCount()) {\n <div class=\"ea-textarea-field__footer\">\n <ng-container [ngTemplateOutlet]=\"messages\" />\n <span\n class=\"ea-textarea-field__count\"\n [id]=\"id() + '-count'\">\n {{ countText() }}\n </span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"messages\" />\n }\n</div>\n",
30276
- styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-textarea-field--2xs{font-size:var(--font-size-2xs)}.ea-textarea-field--xs{font-size:var(--font-size-xs)}.ea-textarea-field--sm{font-size:var(--font-size-sm)}.ea-textarea-field--md{font-size:var(--font-size-md)}.ea-textarea-field--lg{font-size:var(--font-size-lg)}.ea-textarea-field--xl{font-size:var(--font-size-xl)}.ea-textarea-field__footer{display:flex;align-items:flex-start;gap:.75em}.ea-textarea-field__count{flex-shrink:0;margin-inline-start:auto;font-size:max(var(--ea-field-messages-size, var(--text-helper-size)),.6875rem);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh);font-variant-numeric:tabular-nums}.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--focused{border-color:var(--color-border-focus);outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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{outline:none;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:default;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:default}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-textarea-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--readonly button{cursor:default}.ea-textarea-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.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{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:default}\n"]
30333
+ styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-textarea-field--2xs{font-size:var(--font-size-2xs)}.ea-textarea-field--xs{font-size:var(--font-size-xs)}.ea-textarea-field--sm{font-size:var(--font-size-sm)}.ea-textarea-field--md{font-size:var(--font-size-md)}.ea-textarea-field--lg{font-size:var(--font-size-lg)}.ea-textarea-field--xl{font-size:var(--font-size-xl)}.ea-textarea-field__footer{display:flex;align-items:flex-start;gap:.75em}.ea-textarea-field__count{flex-shrink:0;margin-inline-start:auto;font-size:max(var(--ea-field-messages-size, var(--text-helper-size)),.6875rem);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh);font-variant-numeric:tabular-nums}.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--focused{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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{outline:none;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:default;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:default}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-textarea-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--readonly button{cursor:default}.ea-textarea-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.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{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:default}\n"]
30277
30334
  }]
30278
30335
  }],
30279
30336
  propDecorators: {
@@ -31153,7 +31210,7 @@ var TimePickerComponent = class TimePickerComponent {
31153
31210
  ],
31154
31211
  ngImport: i0,
31155
31212
  template: "<div class=\"ea-time-picker-field ea-time-picker-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\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 <div\n #triggerEl\n class=\"ea-time-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n (click)=\"onTriggerClick()\">\n <ea-icon-clock\n class=\"ea-time-picker__trigger-icon\"\n aria-hidden=\"true\" />\n <input\n #inputEl\n type=\"text\"\n class=\"ea-time-picker__input\"\n role=\"combobox\"\n autocomplete=\"off\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [placeholder]=\"resolvedPlaceholder()\"\n [value]=\"triggerText()\"\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 (input)=\"onTriggerInput($event)\"\n (keydown)=\"handleTriggerKeydown($event)\"\n (blur)=\"onTriggerBlur()\" />\n </div>\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",
31156
- styles: [".ea-time-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-time-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-time-picker-field--xs{font-size:var(--font-size-xs)}.ea-time-picker-field--sm{font-size:var(--font-size-sm)}.ea-time-picker-field--md{font-size:var(--font-size-md)}.ea-time-picker-field--lg{font-size:var(--font-size-lg)}.ea-time-picker-field--xl{font-size:var(--font-size-xl)}.ea-time-picker,.ea-time-picker__trigger-wrapper{position:relative}.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:text;transition:var(--transition-colors),var(--transition-shadow)}.ea-time-picker__trigger:focus-within{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-time-picker__trigger:focus-within{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--open{border-color:var(--color-border-focus);outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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{outline:none;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:default}.ea-time-picker__trigger--readonly{cursor:default}.ea-time-picker__trigger--readonly:focus-visible{border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-time-picker__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-time-picker__input{overflow:hidden;flex:1;min-width:0;padding:0;font-size:inherit;white-space:nowrap;font-family:inherit;text-overflow:ellipsis;font-variant-numeric:tabular-nums;border:0;background:none;color:inherit;cursor:inherit}.ea-time-picker__input:focus{outline:none}.ea-time-picker__input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-time-picker__input:disabled{cursor:default}.ea-time-picker__clear{position:relative;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:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-time-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-time-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__clear:disabled{cursor:default;opacity:.5}.ea-time-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:calc(.75em + var(--border-width-thin));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--2xs{font-size:var(--font-size-2xs)}.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{position:relative;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:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-time-picker__step:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__step:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-time-picker__step:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__step:disabled{cursor:default;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);outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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"],
31213
+ styles: [".ea-time-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-time-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-time-picker-field--xs{font-size:var(--font-size-xs)}.ea-time-picker-field--sm{font-size:var(--font-size-sm)}.ea-time-picker-field--md{font-size:var(--font-size-md)}.ea-time-picker-field--lg{font-size:var(--font-size-lg)}.ea-time-picker-field--xl{font-size:var(--font-size-xl)}.ea-time-picker,.ea-time-picker__trigger-wrapper{position:relative}.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:text;transition:var(--transition-colors),var(--transition-shadow)}.ea-time-picker__trigger:focus-within{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-time-picker__trigger:focus-within{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--open{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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{outline:none;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:default}.ea-time-picker__trigger--readonly{cursor:default}.ea-time-picker__trigger--readonly:focus-visible{border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-time-picker__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-time-picker__input{overflow:hidden;flex:1;min-width:0;padding:0;font-size:inherit;white-space:nowrap;font-family:inherit;text-overflow:ellipsis;font-variant-numeric:tabular-nums;border:0;background:none;color:inherit;cursor:inherit}.ea-time-picker__input:focus{outline:none}.ea-time-picker__input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-time-picker__input:disabled{cursor:default}.ea-time-picker__clear{position:relative;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:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-time-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-time-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__clear:disabled{cursor:default;opacity:.5}.ea-time-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:calc(.75em + var(--border-width-thin));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--2xs{font-size:var(--font-size-2xs)}.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{position:relative;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:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-time-picker__step:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__step:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-time-picker__step:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__step:disabled{cursor:default;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;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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"],
31157
31214
  dependencies: [
31158
31215
  {
31159
31216
  kind: "component",
@@ -31260,7 +31317,7 @@ i0.ɵɵngDeclareClassMetadata({
31260
31317
  multi: true
31261
31318
  }],
31262
31319
  template: "<div class=\"ea-time-picker-field ea-time-picker-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\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 <div\n #triggerEl\n class=\"ea-time-picker__trigger\"\n [ngClass]=\"triggerClasses()\"\n (click)=\"onTriggerClick()\">\n <ea-icon-clock\n class=\"ea-time-picker__trigger-icon\"\n aria-hidden=\"true\" />\n <input\n #inputEl\n type=\"text\"\n class=\"ea-time-picker__input\"\n role=\"combobox\"\n autocomplete=\"off\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [readonly]=\"readonly()\"\n [placeholder]=\"resolvedPlaceholder()\"\n [value]=\"triggerText()\"\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 (input)=\"onTriggerInput($event)\"\n (keydown)=\"handleTriggerKeydown($event)\"\n (blur)=\"onTriggerBlur()\" />\n </div>\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",
31263
- styles: [".ea-time-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-time-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-time-picker-field--xs{font-size:var(--font-size-xs)}.ea-time-picker-field--sm{font-size:var(--font-size-sm)}.ea-time-picker-field--md{font-size:var(--font-size-md)}.ea-time-picker-field--lg{font-size:var(--font-size-lg)}.ea-time-picker-field--xl{font-size:var(--font-size-xl)}.ea-time-picker,.ea-time-picker__trigger-wrapper{position:relative}.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:text;transition:var(--transition-colors),var(--transition-shadow)}.ea-time-picker__trigger:focus-within{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-time-picker__trigger:focus-within{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--open{border-color:var(--color-border-focus);outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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{outline:none;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:default}.ea-time-picker__trigger--readonly{cursor:default}.ea-time-picker__trigger--readonly:focus-visible{border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-time-picker__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-time-picker__input{overflow:hidden;flex:1;min-width:0;padding:0;font-size:inherit;white-space:nowrap;font-family:inherit;text-overflow:ellipsis;font-variant-numeric:tabular-nums;border:0;background:none;color:inherit;cursor:inherit}.ea-time-picker__input:focus{outline:none}.ea-time-picker__input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-time-picker__input:disabled{cursor:default}.ea-time-picker__clear{position:relative;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:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-time-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-time-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__clear:disabled{cursor:default;opacity:.5}.ea-time-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:calc(.75em + var(--border-width-thin));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--2xs{font-size:var(--font-size-2xs)}.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{position:relative;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:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-time-picker__step:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__step:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-time-picker__step:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__step:disabled{cursor:default;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);outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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"]
31320
+ styles: [".ea-time-picker-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-time-picker-field--2xs{font-size:var(--font-size-2xs)}.ea-time-picker-field--xs{font-size:var(--font-size-xs)}.ea-time-picker-field--sm{font-size:var(--font-size-sm)}.ea-time-picker-field--md{font-size:var(--font-size-md)}.ea-time-picker-field--lg{font-size:var(--font-size-lg)}.ea-time-picker-field--xl{font-size:var(--font-size-xl)}.ea-time-picker,.ea-time-picker__trigger-wrapper{position:relative}.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:text;transition:var(--transition-colors),var(--transition-shadow)}.ea-time-picker__trigger:focus-within{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-time-picker__trigger:focus-within{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger--open{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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{outline:none;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:default}.ea-time-picker__trigger--readonly{cursor:default}.ea-time-picker__trigger--readonly:focus-visible{border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-time-picker__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary)}.ea-time-picker__input{overflow:hidden;flex:1;min-width:0;padding:0;font-size:inherit;white-space:nowrap;font-family:inherit;text-overflow:ellipsis;font-variant-numeric:tabular-nums;border:0;background:none;color:inherit;cursor:inherit}.ea-time-picker__input:focus{outline:none}.ea-time-picker__input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-time-picker__input:disabled{cursor:default}.ea-time-picker__clear{position:relative;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:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-time-picker__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-time-picker__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__clear:disabled{cursor:default;opacity:.5}.ea-time-picker__clear{z-index:1;position:absolute;top:50%;inset-inline-end:calc(.75em + var(--border-width-thin));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--2xs{font-size:var(--font-size-2xs)}.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{position:relative;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:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-time-picker__step:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-time-picker__step:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-time-picker__step:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-time-picker__step:disabled{cursor:default;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;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@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"]
31264
31321
  }]
31265
31322
  }],
31266
31323
  ctorParameters: () => [],
@@ -32122,6 +32179,7 @@ i0.ɵɵngDeclareClassMetadata({
32122
32179
  var ToggleChipComponent = class ToggleChipComponent {
32123
32180
  selected = model(false, ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
32124
32181
  size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
32182
+ icon = input(void 0, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
32125
32183
  disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
32126
32184
  ariaLabel = input(void 0, {
32127
32185
  ...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
@@ -32151,7 +32209,7 @@ var ToggleChipComponent = class ToggleChipComponent {
32151
32209
  target: i0.ɵɵFactoryTarget.Component
32152
32210
  });
32153
32211
  static ɵcmp = i0.ɵɵngDeclareComponent({
32154
- minVersion: "17.1.0",
32212
+ minVersion: "17.0.0",
32155
32213
  version: "22.2.1",
32156
32214
  type: ToggleChipComponent,
32157
32215
  isStandalone: true,
@@ -32171,6 +32229,13 @@ var ToggleChipComponent = class ToggleChipComponent {
32171
32229
  isRequired: false,
32172
32230
  transformFunction: null
32173
32231
  },
32232
+ icon: {
32233
+ classPropertyName: "icon",
32234
+ publicName: "icon",
32235
+ isSignal: true,
32236
+ isRequired: false,
32237
+ transformFunction: null
32238
+ },
32174
32239
  disabled: {
32175
32240
  classPropertyName: "disabled",
32176
32241
  publicName: "disabled",
@@ -32198,12 +32263,25 @@ var ToggleChipComponent = class ToggleChipComponent {
32198
32263
  changed: "changed"
32199
32264
  },
32200
32265
  ngImport: i0,
32201
- template: "<button\n type=\"button\"\n class=\"ea-toggle-chip\"\n [class]=\"classes()\"\n [attr.aria-pressed]=\"selected()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedby() ?? null\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\">\n <span class=\"ea-toggle-chip__content\">\n <ng-content />\n </span>\n <ea-icon-check\n class=\"ea-toggle-chip__check\"\n aria-hidden=\"true\" />\n</button>\n",
32202
- styles: [":host{display:inline-flex;min-width:0}.ea-toggle-chip{display:inline-flex;align-items:center;gap:.375em;min-height:2.25em;padding:.25em .625em .25em .875em;font:inherit;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-full);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;transition:var(--transition-colors)}.ea-toggle-chip:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-toggle-chip:active:not(:disabled){background-color:var(--color-state-active)}.ea-toggle-chip:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-toggle-chip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-toggle-chip:disabled{opacity:.5;cursor:default}.ea-toggle-chip--2xs{font-size:var(--font-size-2xs)}.ea-toggle-chip--xs{font-size:var(--font-size-xs)}.ea-toggle-chip--sm{font-size:var(--font-size-sm)}.ea-toggle-chip--md{font-size:var(--font-size-md)}.ea-toggle-chip--lg{font-size:var(--font-size-lg)}.ea-toggle-chip--xl{font-size:var(--font-size-xl)}.ea-toggle-chip--selected{border-color:var(--color-brand-default);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-toggle-chip--selected:hover:not(:disabled){background-color:var(--color-brand-muted)}.ea-toggle-chip__content{display:inline-flex;align-items:center;gap:.375em;min-width:0}.ea-toggle-chip__check{opacity:0;flex-shrink:0;transition:var(--transition-opacity),var(--transition-transform);transform:scale(.6)}.ea-toggle-chip--selected .ea-toggle-chip__check{opacity:1;transform:none}\n"],
32266
+ template: "<button\n type=\"button\"\n class=\"ea-toggle-chip\"\n [class]=\"classes()\"\n [attr.aria-pressed]=\"selected()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedby() ?? null\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\">\n <span class=\"ea-toggle-chip__content\">\n @if (icon(); as iconComponent) {\n <span\n class=\"ea-toggle-chip__icon\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"iconComponent\" />\n </span>\n }\n <ng-content />\n </span>\n <ea-icon-check\n class=\"ea-toggle-chip__check\"\n aria-hidden=\"true\" />\n</button>\n",
32267
+ styles: [":host{display:inline-flex;min-width:0}.ea-toggle-chip{display:inline-flex;align-items:center;gap:.375em;min-height:2.25em;padding:.25em .625em .25em .875em;font:inherit;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-full);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;transition:var(--transition-colors)}.ea-toggle-chip:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-toggle-chip:active:not(:disabled){background-color:var(--color-state-active)}.ea-toggle-chip:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-toggle-chip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-toggle-chip:disabled{opacity:.5;cursor:default}.ea-toggle-chip--2xs{font-size:var(--font-size-2xs)}.ea-toggle-chip--xs{font-size:var(--font-size-xs)}.ea-toggle-chip--sm{font-size:var(--font-size-sm)}.ea-toggle-chip--md{font-size:var(--font-size-md)}.ea-toggle-chip--lg{font-size:var(--font-size-lg)}.ea-toggle-chip--xl{font-size:var(--font-size-xl)}.ea-toggle-chip--selected{border-color:var(--color-brand-default);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-toggle-chip--selected:hover:not(:disabled){background-color:var(--color-brand-muted)}.ea-toggle-chip__icon{display:inline-flex;flex-shrink:0;font-size:var(--icon-inline-size)}.ea-toggle-chip__content{display:inline-flex;align-items:center;gap:.375em;min-width:0}.ea-toggle-chip__check{opacity:0;flex-shrink:0;transition:var(--transition-opacity),var(--transition-transform);transform:scale(.6)}.ea-toggle-chip--selected .ea-toggle-chip__check{opacity:1;transform:none}\n"],
32203
32268
  dependencies: [{
32204
32269
  kind: "component",
32205
32270
  type: CheckIconComponent,
32206
32271
  selector: "ea-icon-check"
32272
+ }, {
32273
+ kind: "directive",
32274
+ type: NgComponentOutlet,
32275
+ selector: "[ngComponentOutlet]",
32276
+ inputs: [
32277
+ "ngComponentOutlet",
32278
+ "ngComponentOutletInputs",
32279
+ "ngComponentOutletInjector",
32280
+ "ngComponentOutletEnvironmentInjector",
32281
+ "ngComponentOutletContent",
32282
+ "ngComponentOutletNgModule"
32283
+ ],
32284
+ exportAs: ["ngComponentOutlet"]
32207
32285
  }],
32208
32286
  changeDetection: i0.ChangeDetectionStrategy.OnPush
32209
32287
  });
@@ -32217,10 +32295,10 @@ i0.ɵɵngDeclareClassMetadata({
32217
32295
  type: Component,
32218
32296
  args: [{
32219
32297
  selector: "ea-toggle-chip",
32220
- imports: [CheckIconComponent],
32298
+ imports: [CheckIconComponent, NgComponentOutlet],
32221
32299
  changeDetection: ChangeDetectionStrategy.OnPush,
32222
- template: "<button\n type=\"button\"\n class=\"ea-toggle-chip\"\n [class]=\"classes()\"\n [attr.aria-pressed]=\"selected()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedby() ?? null\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\">\n <span class=\"ea-toggle-chip__content\">\n <ng-content />\n </span>\n <ea-icon-check\n class=\"ea-toggle-chip__check\"\n aria-hidden=\"true\" />\n</button>\n",
32223
- styles: [":host{display:inline-flex;min-width:0}.ea-toggle-chip{display:inline-flex;align-items:center;gap:.375em;min-height:2.25em;padding:.25em .625em .25em .875em;font:inherit;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-full);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;transition:var(--transition-colors)}.ea-toggle-chip:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-toggle-chip:active:not(:disabled){background-color:var(--color-state-active)}.ea-toggle-chip:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-toggle-chip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-toggle-chip:disabled{opacity:.5;cursor:default}.ea-toggle-chip--2xs{font-size:var(--font-size-2xs)}.ea-toggle-chip--xs{font-size:var(--font-size-xs)}.ea-toggle-chip--sm{font-size:var(--font-size-sm)}.ea-toggle-chip--md{font-size:var(--font-size-md)}.ea-toggle-chip--lg{font-size:var(--font-size-lg)}.ea-toggle-chip--xl{font-size:var(--font-size-xl)}.ea-toggle-chip--selected{border-color:var(--color-brand-default);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-toggle-chip--selected:hover:not(:disabled){background-color:var(--color-brand-muted)}.ea-toggle-chip__content{display:inline-flex;align-items:center;gap:.375em;min-width:0}.ea-toggle-chip__check{opacity:0;flex-shrink:0;transition:var(--transition-opacity),var(--transition-transform);transform:scale(.6)}.ea-toggle-chip--selected .ea-toggle-chip__check{opacity:1;transform:none}\n"]
32300
+ template: "<button\n type=\"button\"\n class=\"ea-toggle-chip\"\n [class]=\"classes()\"\n [attr.aria-pressed]=\"selected()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-describedby]=\"ariaDescribedby() ?? null\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\">\n <span class=\"ea-toggle-chip__content\">\n @if (icon(); as iconComponent) {\n <span\n class=\"ea-toggle-chip__icon\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"iconComponent\" />\n </span>\n }\n <ng-content />\n </span>\n <ea-icon-check\n class=\"ea-toggle-chip__check\"\n aria-hidden=\"true\" />\n</button>\n",
32301
+ styles: [":host{display:inline-flex;min-width:0}.ea-toggle-chip{display:inline-flex;align-items:center;gap:.375em;min-height:2.25em;padding:.25em .625em .25em .875em;font:inherit;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-full);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;transition:var(--transition-colors)}.ea-toggle-chip:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-toggle-chip:active:not(:disabled){background-color:var(--color-state-active)}.ea-toggle-chip:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-toggle-chip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-toggle-chip:disabled{opacity:.5;cursor:default}.ea-toggle-chip--2xs{font-size:var(--font-size-2xs)}.ea-toggle-chip--xs{font-size:var(--font-size-xs)}.ea-toggle-chip--sm{font-size:var(--font-size-sm)}.ea-toggle-chip--md{font-size:var(--font-size-md)}.ea-toggle-chip--lg{font-size:var(--font-size-lg)}.ea-toggle-chip--xl{font-size:var(--font-size-xl)}.ea-toggle-chip--selected{border-color:var(--color-brand-default);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-toggle-chip--selected:hover:not(:disabled){background-color:var(--color-brand-muted)}.ea-toggle-chip__icon{display:inline-flex;flex-shrink:0;font-size:var(--icon-inline-size)}.ea-toggle-chip__content{display:inline-flex;align-items:center;gap:.375em;min-width:0}.ea-toggle-chip__check{opacity:0;flex-shrink:0;transition:var(--transition-opacity),var(--transition-transform);transform:scale(.6)}.ea-toggle-chip--selected .ea-toggle-chip__check{opacity:1;transform:none}\n"]
32224
32302
  }]
32225
32303
  }],
32226
32304
  propDecorators: {
@@ -32243,6 +32321,14 @@ i0.ɵɵngDeclareClassMetadata({
32243
32321
  required: false
32244
32322
  }]
32245
32323
  }],
32324
+ icon: [{
32325
+ type: i0.Input,
32326
+ args: [{
32327
+ isSignal: true,
32328
+ alias: "icon",
32329
+ required: false
32330
+ }]
32331
+ }],
32246
32332
  disabled: [{
32247
32333
  type: i0.Input,
32248
32334
  args: [{