@eagami/ui 5.23.0 → 5.24.0

package/fesm2022/eagami-ui.mjs

@@ -15448,11 +15448,11 @@ class SpinnerComponent {
     }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: SpinnerComponent, isStandalone: true, selector: "ea-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-spinner\"\n  [ngClass]=\"hostClasses()\"\n  role=\"status\">\n  <svg\n    class=\"ea-spinner__circle\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    aria-hidden=\"true\">\n    <circle\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      opacity=\"0.25\" />\n    <path\n      d=\"M12 2a10 10 0 0 1 10 10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      stroke-linecap=\"round\" />\n  </svg>\n  <span class=\"ea-spinner__label\">{{ resolvedLabel() }}</span>\n</div>\n", styles: [".ea-spinner{display:inline-flex;align-items:center;gap:.5em;color:var(--color-brand-text)}.ea-spinner--2xs{font-size:var(--font-size-2xs)}.ea-spinner--xs{font-size:var(--font-size-xs)}.ea-spinner--sm{font-size:var(--font-size-sm)}.ea-spinner--md{font-size:var(--font-size-md)}.ea-spinner--lg{font-size:var(--font-size-lg)}.ea-spinner--xl{font-size:var(--font-size-xl)}.ea-spinner__circle{width:var(--icon-inline-size);height:var(--icon-inline-size);animation:ea-spin .75s linear infinite}@media(prefers-reduced-motion:reduce){.ea-spinner__circle{animation-duration:2.5s}}.ea-spinner__label{font-family:var(--font-family-sans);color:var(--color-text-secondary);line-height:var(--line-height-normal)}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: SpinnerComponent, isStandalone: true, selector: "ea-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-spinner\"\n  [ngClass]=\"hostClasses()\"\n  role=\"status\">\n  <svg\n    class=\"ea-spinner__circle\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    aria-hidden=\"true\">\n    <circle\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      opacity=\"0.25\" />\n    <path\n      d=\"M12 2a10 10 0 0 1 10 10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      stroke-linecap=\"round\" />\n  </svg>\n  <span class=\"ea-spinner__label\">{{ resolvedLabel() }}</span>\n</div>\n", styles: [".ea-spinner{display:inline-flex;align-items:center;gap:.5em;color:var(--color-brand-default)}.ea-spinner--2xs{font-size:var(--font-size-2xs)}.ea-spinner--xs{font-size:var(--font-size-xs)}.ea-spinner--sm{font-size:var(--font-size-sm)}.ea-spinner--md{font-size:var(--font-size-md)}.ea-spinner--lg{font-size:var(--font-size-lg)}.ea-spinner--xl{font-size:var(--font-size-xl)}.ea-spinner__circle{width:var(--icon-inline-size);height:var(--icon-inline-size);animation:ea-spin .75s linear infinite}@media(prefers-reduced-motion:reduce){.ea-spinner__circle{animation-duration:2.5s}}.ea-spinner__label{font-family:var(--font-family-sans);color:var(--color-text-secondary);line-height:var(--line-height-normal)}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-spinner', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-spinner\"\n  [ngClass]=\"hostClasses()\"\n  role=\"status\">\n  <svg\n    class=\"ea-spinner__circle\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    aria-hidden=\"true\">\n    <circle\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      opacity=\"0.25\" />\n    <path\n      d=\"M12 2a10 10 0 0 1 10 10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      stroke-linecap=\"round\" />\n  </svg>\n  <span class=\"ea-spinner__label\">{{ resolvedLabel() }}</span>\n</div>\n", styles: [".ea-spinner{display:inline-flex;align-items:center;gap:.5em;color:var(--color-brand-text)}.ea-spinner--2xs{font-size:var(--font-size-2xs)}.ea-spinner--xs{font-size:var(--font-size-xs)}.ea-spinner--sm{font-size:var(--font-size-sm)}.ea-spinner--md{font-size:var(--font-size-md)}.ea-spinner--lg{font-size:var(--font-size-lg)}.ea-spinner--xl{font-size:var(--font-size-xl)}.ea-spinner__circle{width:var(--icon-inline-size);height:var(--icon-inline-size);animation:ea-spin .75s linear infinite}@media(prefers-reduced-motion:reduce){.ea-spinner__circle{animation-duration:2.5s}}.ea-spinner__label{font-family:var(--font-family-sans);color:var(--color-text-secondary);line-height:var(--line-height-normal)}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: 'ea-spinner', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-spinner\"\n  [ngClass]=\"hostClasses()\"\n  role=\"status\">\n  <svg\n    class=\"ea-spinner__circle\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    aria-hidden=\"true\">\n    <circle\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      opacity=\"0.25\" />\n    <path\n      d=\"M12 2a10 10 0 0 1 10 10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      stroke-linecap=\"round\" />\n  </svg>\n  <span class=\"ea-spinner__label\">{{ resolvedLabel() }}</span>\n</div>\n", styles: [".ea-spinner{display:inline-flex;align-items:center;gap:.5em;color:var(--color-brand-default)}.ea-spinner--2xs{font-size:var(--font-size-2xs)}.ea-spinner--xs{font-size:var(--font-size-xs)}.ea-spinner--sm{font-size:var(--font-size-sm)}.ea-spinner--md{font-size:var(--font-size-md)}.ea-spinner--lg{font-size:var(--font-size-lg)}.ea-spinner--xl{font-size:var(--font-size-xl)}.ea-spinner__circle{width:var(--icon-inline-size);height:var(--icon-inline-size);animation:ea-spin .75s linear infinite}@media(prefers-reduced-motion:reduce){.ea-spinner__circle{animation-duration:2.5s}}.ea-spinner__label{font-family:var(--font-family-sans);color:var(--color-text-secondary);line-height:var(--line-height-normal)}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
 /**
@@ -17037,10 +17037,19 @@ class ToastComponent {
     ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
     containerClass = computed(() => `ea-toast-container ea-toast-container--${this.position()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "containerClass" }] : /* istanbul ignore next */ []));
-    /** Errors and warnings interrupt like `ea-alert`; the rest wait politely. */
+    // Errors and warnings interrupt like `ea-alert`; the rest wait politely
     toastRole(variant) {
         return variant === 'error' || variant === 'warning' ? 'alert' : 'status';
     }
+    // null keeps plain text a bare text node rather than a wrapped segment
+    segmentsOf(text) {
+        return typeof text === 'string' ? null : text;
+    }
+    segmentClass(segment) {
+        return segment.strong
+            ? 'ea-toast__segment ea-toast__segment--strong'
+            : 'ea-toast__segment';
+    }
     onMouseEnter() {
         this.hovered = true;
         this.syncPause();
@@ -17067,7 +17076,7 @@ class ToastComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ToastComponent, isStandalone: true, selector: "ea-toast", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["containerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #containerEl\n  [class]=\"containerClass()\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut($event)\">\n  @for (toast of toastService.toasts(); track toast.id) {\n    <div\n      class=\"ea-toast ea-toast--{{ toast.variant }} ea-toast--{{ size() }}\"\n      [attr.role]=\"toastRole(toast.variant)\">\n      @if (toast.icon !== undefined) {\n        @if (toast.icon) {\n          <span\n            class=\"ea-toast__icon\"\n            aria-hidden=\"true\">\n            <ng-container *ngComponentOutlet=\"toast.icon\" />\n          </span>\n        }\n      } @else {\n        @switch (toast.variant) {\n          @case ('success') {\n            <ea-icon-check-circle class=\"ea-toast__icon\" />\n          }\n          @case ('info') {\n            <ea-icon-info class=\"ea-toast__icon\" />\n          }\n          @case ('warning') {\n            <ea-icon-alert-triangle class=\"ea-toast__icon\" />\n          }\n          @case ('error') {\n            <ea-icon-alert-circle class=\"ea-toast__icon\" />\n          }\n        }\n      }\n      <div class=\"ea-toast__content\">\n        @if (toast.title) {\n          <span class=\"ea-toast__title\">{{ toast.title }}</span>\n        }\n        <span class=\"ea-toast__message\">{{ toast.message }}</span>\n      </div>\n      @if (clearable()) {\n        <button\n          class=\"ea-toast__close\"\n          type=\"button\"\n          [attr.aria-label]=\"i18n.messages().toast.dismiss\"\n          (click)=\"toastService.dismiss(toast.id)\">\n          <ea-icon-x />\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [".ea-toast-container{position:fixed;z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);max-width:calc(100vw - var(--space-6) * 2);pointer-events:none}.ea-toast-container--top-left,.ea-toast-container--top,.ea-toast-container--top-right{top:var(--space-6)}.ea-toast-container--bottom-left,.ea-toast-container--bottom,.ea-toast-container--bottom-right{bottom:var(--space-6)}.ea-toast-container--top-left,.ea-toast-container--bottom-left{left:var(--space-6)}.ea-toast-container--top-left .ea-toast,.ea-toast-container--bottom-left .ea-toast{margin-right:auto}.ea-toast-container--top-right,.ea-toast-container--bottom-right{right:var(--space-6)}.ea-toast-container--top-right .ea-toast,.ea-toast-container--bottom-right .ea-toast{margin-left:auto}.ea-toast-container--top,.ea-toast-container--bottom{left:50%;transform:translate(-50%)}.ea-toast-container--top .ea-toast,.ea-toast-container--bottom .ea-toast{margin-right:auto;margin-left:auto}.ea-toast-container--top-left .ea-toast,.ea-toast-container--bottom-left .ea-toast{--ea-toast-enter-x: -100%}.ea-toast-container--top .ea-toast{--ea-toast-enter-x: 0;--ea-toast-enter-y: -100%}.ea-toast-container--bottom .ea-toast{--ea-toast-enter-x: 0;--ea-toast-enter-y: 100%}.ea-toast{--ea-toast-enter-x: 100%;--ea-toast-enter-y: 0;display:flex;align-items:center;gap:.5em;width:100%;max-width:24em;padding:.75em 1em;font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:auto;animation:ea-toast-slide-in var(--duration-slow) var(--ease-out)}@media(forced-colors:active){.ea-toast{border:1px solid CanvasText}}@media(min-width:640px){.ea-toast{width:auto}}.ea-toast--2xs{font-size:var(--font-size-2xs)}.ea-toast--xs{font-size:var(--font-size-xs)}.ea-toast--sm{font-size:var(--font-size-sm)}.ea-toast--md{font-size:var(--font-size-md)}.ea-toast--lg{font-size:var(--font-size-lg)}.ea-toast--xl{font-size:var(--font-size-xl)}.ea-toast--default{background-color:var(--color-neutral-800);color:var(--color-neutral-0)}.ea-toast--success{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));color:var(--color-success-text)}.ea-toast--warning{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-warning-subtle),var(--color-warning-subtle));color:var(--color-warning-text)}.ea-toast--error{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-error-subtle),var(--color-error-subtle));color:var(--color-error-text)}.ea-toast--info{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-info-subtle),var(--color-info-subtle));color:var(--color-info-text)}.ea-toast__icon{display:inline-flex;flex-shrink:0;margin-inline-end:.25em;font-size:1.25em}.ea-toast__content{display:flex;flex:1;flex-direction:column;gap:.125em;min-width:0}.ea-toast__title{font-weight:var(--font-weight-semibold)}.ea-toast__title+.ea-toast__message{opacity:.85}.ea-toast__close{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-toast__close>*{font-size:1.25em}.ea-toast__close: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-toast__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-toast__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-toast__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-toast__close:disabled{cursor:not-allowed;opacity:.5}@keyframes ea-toast-slide-in{0%{opacity:0;transform:translate(var(--ea-toast-enter-x),var(--ea-toast-enter-y))}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.ea-toast{animation-name:ea-toast-fade-in}}@keyframes ea-toast-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ea-toast--success{color:var(--color-success-200)}:root:not([data-theme=light]) .ea-toast--warning{color:var(--color-warning-200)}:root:not([data-theme=light]) .ea-toast--error{color:var(--color-error-200)}:root:not([data-theme=light]) .ea-toast--info{color:var(--color-info-200)}}:root[data-theme=dark] .ea-toast--success{color:var(--color-success-200)}:root[data-theme=dark] .ea-toast--warning{color:var(--color-warning-200)}:root[data-theme=dark] .ea-toast--error{color:var(--color-error-200)}:root[data-theme=dark] .ea-toast--info{color:var(--color-info-200)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }, { kind: "component", type: CheckCircleIconComponent, selector: "ea-icon-check-circle" }, { kind: "component", type: InfoIconComponent, selector: "ea-icon-info" }, { kind: "component", type: AlertTriangleIconComponent, selector: "ea-icon-alert-triangle" }, { kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ToastComponent, isStandalone: true, selector: "ea-toast", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["containerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #containerEl\n  [class]=\"containerClass()\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut($event)\">\n  @for (toast of toastService.toasts(); track toast.id) {\n    <div\n      class=\"ea-toast ea-toast--{{ toast.variant }} ea-toast--{{ size() }}\"\n      [attr.role]=\"toastRole(toast.variant)\">\n      @if (toast.icon !== undefined) {\n        @if (toast.icon) {\n          <span\n            class=\"ea-toast__icon\"\n            aria-hidden=\"true\">\n            <ng-container *ngComponentOutlet=\"toast.icon\" />\n          </span>\n        }\n      } @else {\n        @switch (toast.variant) {\n          @case ('success') {\n            <ea-icon-check-circle class=\"ea-toast__icon\" />\n          }\n          @case ('info') {\n            <ea-icon-info class=\"ea-toast__icon\" />\n          }\n          @case ('warning') {\n            <ea-icon-alert-triangle class=\"ea-toast__icon\" />\n          }\n          @case ('error') {\n            <ea-icon-alert-circle class=\"ea-toast__icon\" />\n          }\n        }\n      }\n      <div class=\"ea-toast__content\">\n        @if (toast.title) {\n          @if (segmentsOf(toast.title); as segments) {\n            <span class=\"ea-toast__title\">\n              @for (segment of segments; track $index) {\n                <span [class]=\"segmentClass(segment)\">{{ segment.text }}</span>\n              }\n            </span>\n          } @else {\n            <span class=\"ea-toast__title\">{{ toast.title }}</span>\n          }\n        }\n        @if (segmentsOf(toast.message); as segments) {\n          <span class=\"ea-toast__message\">\n            @for (segment of segments; track $index) {\n              <span [class]=\"segmentClass(segment)\">{{ segment.text }}</span>\n            }\n          </span>\n        } @else {\n          <span class=\"ea-toast__message\">{{ toast.message }}</span>\n        }\n      </div>\n      @if (clearable()) {\n        <button\n          class=\"ea-toast__close\"\n          type=\"button\"\n          [attr.aria-label]=\"i18n.messages().toast.dismiss\"\n          (click)=\"toastService.dismiss(toast.id)\">\n          <ea-icon-x />\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [".ea-toast-container{position:fixed;z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);max-width:calc(100vw - var(--space-6) * 2);pointer-events:none}.ea-toast-container--top-left,.ea-toast-container--top,.ea-toast-container--top-right{top:var(--space-6)}.ea-toast-container--bottom-left,.ea-toast-container--bottom,.ea-toast-container--bottom-right{bottom:var(--space-6)}.ea-toast-container--top-left,.ea-toast-container--bottom-left{left:var(--space-6)}.ea-toast-container--top-left .ea-toast,.ea-toast-container--bottom-left .ea-toast{margin-right:auto}.ea-toast-container--top-right,.ea-toast-container--bottom-right{right:var(--space-6)}.ea-toast-container--top-right .ea-toast,.ea-toast-container--bottom-right .ea-toast{margin-left:auto}.ea-toast-container--top,.ea-toast-container--bottom{left:50%;transform:translate(-50%)}.ea-toast-container--top .ea-toast,.ea-toast-container--bottom .ea-toast{margin-right:auto;margin-left:auto}.ea-toast-container--top-left .ea-toast,.ea-toast-container--bottom-left .ea-toast{--ea-toast-enter-x: -100%}.ea-toast-container--top .ea-toast{--ea-toast-enter-x: 0;--ea-toast-enter-y: -100%}.ea-toast-container--bottom .ea-toast{--ea-toast-enter-x: 0;--ea-toast-enter-y: 100%}.ea-toast{--ea-toast-enter-x: 100%;--ea-toast-enter-y: 0;display:flex;align-items:center;gap:.5em;width:100%;max-width:24em;padding:.75em 1em;font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:auto;animation:ea-toast-slide-in var(--duration-slow) var(--ease-out)}@media(forced-colors:active){.ea-toast{border:1px solid CanvasText}}@media(min-width:640px){.ea-toast{width:auto}}.ea-toast--2xs{font-size:var(--font-size-2xs)}.ea-toast--xs{font-size:var(--font-size-xs)}.ea-toast--sm{font-size:var(--font-size-sm)}.ea-toast--md{font-size:var(--font-size-md)}.ea-toast--lg{font-size:var(--font-size-lg)}.ea-toast--xl{font-size:var(--font-size-xl)}.ea-toast--default{background-color:var(--color-neutral-800);color:var(--color-neutral-0)}.ea-toast--success{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));color:var(--color-success-text)}.ea-toast--warning{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-warning-subtle),var(--color-warning-subtle));color:var(--color-warning-text)}.ea-toast--error{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-error-subtle),var(--color-error-subtle));color:var(--color-error-text)}.ea-toast--info{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-info-subtle),var(--color-info-subtle));color:var(--color-info-text)}.ea-toast__icon{display:inline-flex;flex-shrink:0;margin-inline-end:.25em;font-size:1.25em}.ea-toast__content{display:flex;flex:1;flex-direction:column;gap:.125em;min-width:0}.ea-toast__title{font-weight:var(--font-weight-semibold)}.ea-toast__segment--strong{font-weight:var(--ea-toast-strong-weight, var(--font-weight-semibold))}.ea-toast__title+.ea-toast__message{opacity:.85}.ea-toast__title+.ea-toast__message:has(.ea-toast__segment--strong){opacity:1}.ea-toast__title+.ea-toast__message:has(.ea-toast__segment--strong) .ea-toast__segment:not(.ea-toast__segment--strong){opacity:.85}.ea-toast__close{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-toast__close>*{font-size:1.25em}.ea-toast__close: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-toast__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-toast__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-toast__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-toast__close:disabled{cursor:not-allowed;opacity:.5}@keyframes ea-toast-slide-in{0%{opacity:0;transform:translate(var(--ea-toast-enter-x),var(--ea-toast-enter-y))}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.ea-toast{animation-name:ea-toast-fade-in}}@keyframes ea-toast-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ea-toast--success{color:var(--color-success-200)}:root:not([data-theme=light]) .ea-toast--warning{color:var(--color-warning-200)}:root:not([data-theme=light]) .ea-toast--error{color:var(--color-error-200)}:root:not([data-theme=light]) .ea-toast--info{color:var(--color-info-200)}}:root[data-theme=dark] .ea-toast--success{color:var(--color-success-200)}:root[data-theme=dark] .ea-toast--warning{color:var(--color-warning-200)}:root[data-theme=dark] .ea-toast--error{color:var(--color-error-200)}:root[data-theme=dark] .ea-toast--info{color:var(--color-info-200)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }, { kind: "component", type: CheckCircleIconComponent, selector: "ea-icon-check-circle" }, { kind: "component", type: InfoIconComponent, selector: "ea-icon-info" }, { kind: "component", type: AlertTriangleIconComponent, selector: "ea-icon-alert-triangle" }, { kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
@@ -17078,7 +17087,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         InfoIconComponent,
                         AlertTriangleIconComponent,
                         AlertCircleIconComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  #containerEl\n  [class]=\"containerClass()\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut($event)\">\n  @for (toast of toastService.toasts(); track toast.id) {\n    <div\n      class=\"ea-toast ea-toast--{{ toast.variant }} ea-toast--{{ size() }}\"\n      [attr.role]=\"toastRole(toast.variant)\">\n      @if (toast.icon !== undefined) {\n        @if (toast.icon) {\n          <span\n            class=\"ea-toast__icon\"\n            aria-hidden=\"true\">\n            <ng-container *ngComponentOutlet=\"toast.icon\" />\n          </span>\n        }\n      } @else {\n        @switch (toast.variant) {\n          @case ('success') {\n            <ea-icon-check-circle class=\"ea-toast__icon\" />\n          }\n          @case ('info') {\n            <ea-icon-info class=\"ea-toast__icon\" />\n          }\n          @case ('warning') {\n            <ea-icon-alert-triangle class=\"ea-toast__icon\" />\n          }\n          @case ('error') {\n            <ea-icon-alert-circle class=\"ea-toast__icon\" />\n          }\n        }\n      }\n      <div class=\"ea-toast__content\">\n        @if (toast.title) {\n          <span class=\"ea-toast__title\">{{ toast.title }}</span>\n        }\n        <span class=\"ea-toast__message\">{{ toast.message }}</span>\n      </div>\n      @if (clearable()) {\n        <button\n          class=\"ea-toast__close\"\n          type=\"button\"\n          [attr.aria-label]=\"i18n.messages().toast.dismiss\"\n          (click)=\"toastService.dismiss(toast.id)\">\n          <ea-icon-x />\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [".ea-toast-container{position:fixed;z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);max-width:calc(100vw - var(--space-6) * 2);pointer-events:none}.ea-toast-container--top-left,.ea-toast-container--top,.ea-toast-container--top-right{top:var(--space-6)}.ea-toast-container--bottom-left,.ea-toast-container--bottom,.ea-toast-container--bottom-right{bottom:var(--space-6)}.ea-toast-container--top-left,.ea-toast-container--bottom-left{left:var(--space-6)}.ea-toast-container--top-left .ea-toast,.ea-toast-container--bottom-left .ea-toast{margin-right:auto}.ea-toast-container--top-right,.ea-toast-container--bottom-right{right:var(--space-6)}.ea-toast-container--top-right .ea-toast,.ea-toast-container--bottom-right .ea-toast{margin-left:auto}.ea-toast-container--top,.ea-toast-container--bottom{left:50%;transform:translate(-50%)}.ea-toast-container--top .ea-toast,.ea-toast-container--bottom .ea-toast{margin-right:auto;margin-left:auto}.ea-toast-container--top-left .ea-toast,.ea-toast-container--bottom-left .ea-toast{--ea-toast-enter-x: -100%}.ea-toast-container--top .ea-toast{--ea-toast-enter-x: 0;--ea-toast-enter-y: -100%}.ea-toast-container--bottom .ea-toast{--ea-toast-enter-x: 0;--ea-toast-enter-y: 100%}.ea-toast{--ea-toast-enter-x: 100%;--ea-toast-enter-y: 0;display:flex;align-items:center;gap:.5em;width:100%;max-width:24em;padding:.75em 1em;font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:auto;animation:ea-toast-slide-in var(--duration-slow) var(--ease-out)}@media(forced-colors:active){.ea-toast{border:1px solid CanvasText}}@media(min-width:640px){.ea-toast{width:auto}}.ea-toast--2xs{font-size:var(--font-size-2xs)}.ea-toast--xs{font-size:var(--font-size-xs)}.ea-toast--sm{font-size:var(--font-size-sm)}.ea-toast--md{font-size:var(--font-size-md)}.ea-toast--lg{font-size:var(--font-size-lg)}.ea-toast--xl{font-size:var(--font-size-xl)}.ea-toast--default{background-color:var(--color-neutral-800);color:var(--color-neutral-0)}.ea-toast--success{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));color:var(--color-success-text)}.ea-toast--warning{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-warning-subtle),var(--color-warning-subtle));color:var(--color-warning-text)}.ea-toast--error{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-error-subtle),var(--color-error-subtle));color:var(--color-error-text)}.ea-toast--info{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-info-subtle),var(--color-info-subtle));color:var(--color-info-text)}.ea-toast__icon{display:inline-flex;flex-shrink:0;margin-inline-end:.25em;font-size:1.25em}.ea-toast__content{display:flex;flex:1;flex-direction:column;gap:.125em;min-width:0}.ea-toast__title{font-weight:var(--font-weight-semibold)}.ea-toast__title+.ea-toast__message{opacity:.85}.ea-toast__close{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-toast__close>*{font-size:1.25em}.ea-toast__close: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-toast__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-toast__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-toast__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-toast__close:disabled{cursor:not-allowed;opacity:.5}@keyframes ea-toast-slide-in{0%{opacity:0;transform:translate(var(--ea-toast-enter-x),var(--ea-toast-enter-y))}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.ea-toast{animation-name:ea-toast-fade-in}}@keyframes ea-toast-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ea-toast--success{color:var(--color-success-200)}:root:not([data-theme=light]) .ea-toast--warning{color:var(--color-warning-200)}:root:not([data-theme=light]) .ea-toast--error{color:var(--color-error-200)}:root:not([data-theme=light]) .ea-toast--info{color:var(--color-info-200)}}:root[data-theme=dark] .ea-toast--success{color:var(--color-success-200)}:root[data-theme=dark] .ea-toast--warning{color:var(--color-warning-200)}:root[data-theme=dark] .ea-toast--error{color:var(--color-error-200)}:root[data-theme=dark] .ea-toast--info{color:var(--color-info-200)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  #containerEl\n  [class]=\"containerClass()\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut($event)\">\n  @for (toast of toastService.toasts(); track toast.id) {\n    <div\n      class=\"ea-toast ea-toast--{{ toast.variant }} ea-toast--{{ size() }}\"\n      [attr.role]=\"toastRole(toast.variant)\">\n      @if (toast.icon !== undefined) {\n        @if (toast.icon) {\n          <span\n            class=\"ea-toast__icon\"\n            aria-hidden=\"true\">\n            <ng-container *ngComponentOutlet=\"toast.icon\" />\n          </span>\n        }\n      } @else {\n        @switch (toast.variant) {\n          @case ('success') {\n            <ea-icon-check-circle class=\"ea-toast__icon\" />\n          }\n          @case ('info') {\n            <ea-icon-info class=\"ea-toast__icon\" />\n          }\n          @case ('warning') {\n            <ea-icon-alert-triangle class=\"ea-toast__icon\" />\n          }\n          @case ('error') {\n            <ea-icon-alert-circle class=\"ea-toast__icon\" />\n          }\n        }\n      }\n      <div class=\"ea-toast__content\">\n        @if (toast.title) {\n          @if (segmentsOf(toast.title); as segments) {\n            <span class=\"ea-toast__title\">\n              @for (segment of segments; track $index) {\n                <span [class]=\"segmentClass(segment)\">{{ segment.text }}</span>\n              }\n            </span>\n          } @else {\n            <span class=\"ea-toast__title\">{{ toast.title }}</span>\n          }\n        }\n        @if (segmentsOf(toast.message); as segments) {\n          <span class=\"ea-toast__message\">\n            @for (segment of segments; track $index) {\n              <span [class]=\"segmentClass(segment)\">{{ segment.text }}</span>\n            }\n          </span>\n        } @else {\n          <span class=\"ea-toast__message\">{{ toast.message }}</span>\n        }\n      </div>\n      @if (clearable()) {\n        <button\n          class=\"ea-toast__close\"\n          type=\"button\"\n          [attr.aria-label]=\"i18n.messages().toast.dismiss\"\n          (click)=\"toastService.dismiss(toast.id)\">\n          <ea-icon-x />\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [".ea-toast-container{position:fixed;z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);max-width:calc(100vw - var(--space-6) * 2);pointer-events:none}.ea-toast-container--top-left,.ea-toast-container--top,.ea-toast-container--top-right{top:var(--space-6)}.ea-toast-container--bottom-left,.ea-toast-container--bottom,.ea-toast-container--bottom-right{bottom:var(--space-6)}.ea-toast-container--top-left,.ea-toast-container--bottom-left{left:var(--space-6)}.ea-toast-container--top-left .ea-toast,.ea-toast-container--bottom-left .ea-toast{margin-right:auto}.ea-toast-container--top-right,.ea-toast-container--bottom-right{right:var(--space-6)}.ea-toast-container--top-right .ea-toast,.ea-toast-container--bottom-right .ea-toast{margin-left:auto}.ea-toast-container--top,.ea-toast-container--bottom{left:50%;transform:translate(-50%)}.ea-toast-container--top .ea-toast,.ea-toast-container--bottom .ea-toast{margin-right:auto;margin-left:auto}.ea-toast-container--top-left .ea-toast,.ea-toast-container--bottom-left .ea-toast{--ea-toast-enter-x: -100%}.ea-toast-container--top .ea-toast{--ea-toast-enter-x: 0;--ea-toast-enter-y: -100%}.ea-toast-container--bottom .ea-toast{--ea-toast-enter-x: 0;--ea-toast-enter-y: 100%}.ea-toast{--ea-toast-enter-x: 100%;--ea-toast-enter-y: 0;display:flex;align-items:center;gap:.5em;width:100%;max-width:24em;padding:.75em 1em;font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:auto;animation:ea-toast-slide-in var(--duration-slow) var(--ease-out)}@media(forced-colors:active){.ea-toast{border:1px solid CanvasText}}@media(min-width:640px){.ea-toast{width:auto}}.ea-toast--2xs{font-size:var(--font-size-2xs)}.ea-toast--xs{font-size:var(--font-size-xs)}.ea-toast--sm{font-size:var(--font-size-sm)}.ea-toast--md{font-size:var(--font-size-md)}.ea-toast--lg{font-size:var(--font-size-lg)}.ea-toast--xl{font-size:var(--font-size-xl)}.ea-toast--default{background-color:var(--color-neutral-800);color:var(--color-neutral-0)}.ea-toast--success{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));color:var(--color-success-text)}.ea-toast--warning{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-warning-subtle),var(--color-warning-subtle));color:var(--color-warning-text)}.ea-toast--error{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-error-subtle),var(--color-error-subtle));color:var(--color-error-text)}.ea-toast--info{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-info-subtle),var(--color-info-subtle));color:var(--color-info-text)}.ea-toast__icon{display:inline-flex;flex-shrink:0;margin-inline-end:.25em;font-size:1.25em}.ea-toast__content{display:flex;flex:1;flex-direction:column;gap:.125em;min-width:0}.ea-toast__title{font-weight:var(--font-weight-semibold)}.ea-toast__segment--strong{font-weight:var(--ea-toast-strong-weight, var(--font-weight-semibold))}.ea-toast__title+.ea-toast__message{opacity:.85}.ea-toast__title+.ea-toast__message:has(.ea-toast__segment--strong){opacity:1}.ea-toast__title+.ea-toast__message:has(.ea-toast__segment--strong) .ea-toast__segment:not(.ea-toast__segment--strong){opacity:.85}.ea-toast__close{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-toast__close>*{font-size:1.25em}.ea-toast__close: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-toast__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-toast__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-toast__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-toast__close:disabled{cursor:not-allowed;opacity:.5}@keyframes ea-toast-slide-in{0%{opacity:0;transform:translate(var(--ea-toast-enter-x),var(--ea-toast-enter-y))}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.ea-toast{animation-name:ea-toast-fade-in}}@keyframes ea-toast-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ea-toast--success{color:var(--color-success-200)}:root:not([data-theme=light]) .ea-toast--warning{color:var(--color-warning-200)}:root:not([data-theme=light]) .ea-toast--error{color:var(--color-error-200)}:root:not([data-theme=light]) .ea-toast--info{color:var(--color-info-200)}}:root[data-theme=dark] .ea-toast--success{color:var(--color-success-200)}:root[data-theme=dark] .ea-toast--warning{color:var(--color-warning-200)}:root[data-theme=dark] .ea-toast--error{color:var(--color-error-200)}:root[data-theme=dark] .ea-toast--info{color:var(--color-info-200)}\n"] }]
         }], propDecorators: { containerEl: [{ type: i0.ViewChild, args: ['containerEl', { isSignal: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }] } });
 
 class ChevronsLeftIconComponent extends IconComponentBase {