@eagami/ui 0.6.0 → 0.7.1

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 (5) hide show
  1. package/README.md +63 -36
  2. package/fesm2022/eagami-ui.mjs +246 -157
  3. package/fesm2022/eagami-ui.mjs.map +1 -1
  4. package/package.json +2 -1
  5. package/types/eagami-ui.d.ts +51 -4
package/fesm2022/eagami-ui.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { input, signal, ChangeDetectionStrategy, Component, inject, computed, model, output, ElementRef, Renderer2, Directive, viewChild, Injector, effect, afterNextRender, ViewEncapsulation, forwardRef, viewChildren, HostListener, Injectable } from '@angular/core';
2
+ import { input, signal, ChangeDetectionStrategy, Component, inject, computed, model, output, ElementRef, Renderer2, Directive, viewChild, Injector, effect, untracked, afterNextRender, ViewEncapsulation, forwardRef, viewChildren, HostListener, Injectable } from '@angular/core';
3
3
  import { NgClass } from '@angular/common';
4
4
  import { NG_VALUE_ACCESSOR } from '@angular/forms';
5
5
 
@@ -23,17 +23,17 @@ class AccordionComponent {
23
23
  isExpanded(value) {
24
24
  return this.expandedItems().has(value);
25
25
  }
26
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
27
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: AccordionComponent, isStandalone: true, selector: "ea-accordion", inputs: { multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<div class="ea-accordion"><ng-content /></div>`, isInline: true, styles: [".ea-accordion{display:flex;flex-direction:column;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
26
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
27
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.7", type: AccordionComponent, isStandalone: true, selector: "ea-accordion", inputs: { multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<div class="ea-accordion"><ng-content /></div>`, isInline: true, styles: [".ea-accordion{display:flex;flex-direction:column;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
28
28
  }
29
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AccordionComponent, decorators: [{
29
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AccordionComponent, decorators: [{
30
30
  type: Component,
31
31
  args: [{ selector: 'ea-accordion', template: `<div class="ea-accordion"><ng-content /></div>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".ea-accordion{display:flex;flex-direction:column;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);overflow:hidden}\n"] }]
32
32
  }], propDecorators: { multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }] } });
33
33
 
34
34
  class ChevronDownIconComponent {
35
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChevronDownIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
36
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: ChevronDownIconComponent, isStandalone: true, selector: "ea-icon-chevron-down", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
35
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ChevronDownIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
36
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: ChevronDownIconComponent, isStandalone: true, selector: "ea-icon-chevron-down", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
37
37
  <svg
38
38
  viewBox="0 0 24 24"
39
39
  fill="none"
@@ -48,7 +48,7 @@ class ChevronDownIconComponent {
48
48
  </svg>
49
49
  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
50
50
  }
51
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChevronDownIconComponent, decorators: [{
51
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ChevronDownIconComponent, decorators: [{
52
52
  type: Component,
53
53
  args: [{
54
54
  selector: 'ea-icon-chevron-down',
@@ -82,17 +82,17 @@ class AccordionItemComponent {
82
82
  return;
83
83
  this.accordion.toggle(this.value());
84
84
  }
85
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
86
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: AccordionItemComponent, isStandalone: true, selector: "ea-accordion-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"ea-accordion-item\"\n [class.ea-accordion-item--expanded]=\"isExpanded()\"\n [class.ea-accordion-item--disabled]=\"disabled()\">\n <button\n class=\"ea-accordion-item__trigger\"\n type=\"button\"\n [attr.aria-expanded]=\"isExpanded()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\">\n <span class=\"ea-accordion-item__label\">{{ label() }}</span>\n <ea-icon-chevron-down class=\"ea-accordion-item__chevron\" />\n </button>\n @if (isExpanded()) {\n <div\n class=\"ea-accordion-item__content\"\n role=\"region\">\n <ng-content />\n </div>\n }\n</div>\n", styles: [".ea-accordion-item{border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-accordion-item:last-child{border-bottom:none}.ea-accordion-item__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);text-align:left;background:none;border:none;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-accordion-item__trigger:hover:not(:disabled){background-color:var(--color-bg-subtle)}.ea-accordion-item__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-accordion-item__trigger:disabled{opacity:.5;cursor:not-allowed}.ea-accordion-item__chevron{flex-shrink:0;width:16px;height:16px;color:var(--color-text-secondary);transition:transform var(--duration-normal) var(--ease-out)}.ea-accordion-item--expanded .ea-accordion-item__chevron{transform:rotate(180deg)}.ea-accordion-item__content{padding:0 var(--space-4) var(--space-4);font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-accordion-item--disabled{opacity:.5}\n"], dependencies: [{ kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
85
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
86
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: AccordionItemComponent, isStandalone: true, selector: "ea-accordion-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"ea-accordion-item\"\n [class.ea-accordion-item--expanded]=\"isExpanded()\"\n [class.ea-accordion-item--disabled]=\"disabled()\">\n <button\n class=\"ea-accordion-item__trigger\"\n type=\"button\"\n [attr.aria-expanded]=\"isExpanded()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\">\n <span class=\"ea-accordion-item__label\">{{ label() }}</span>\n <ea-icon-chevron-down class=\"ea-accordion-item__chevron\" />\n </button>\n @if (isExpanded()) {\n <div\n class=\"ea-accordion-item__content\"\n role=\"region\">\n <ng-content />\n </div>\n }\n</div>\n", styles: [".ea-accordion-item{border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-accordion-item:last-child{border-bottom:none}.ea-accordion-item__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);text-align:left;background:none;border:none;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-accordion-item__trigger:hover:not(:disabled){background-color:var(--color-bg-subtle)}.ea-accordion-item__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-accordion-item__trigger:disabled{opacity:.5;cursor:not-allowed}.ea-accordion-item__chevron{flex-shrink:0;width:16px;height:16px;color:var(--color-text-secondary);transition:transform var(--duration-normal) var(--ease-out)}.ea-accordion-item--expanded .ea-accordion-item__chevron{transform:rotate(180deg)}.ea-accordion-item__content{padding:0 var(--space-4) var(--space-4);font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-accordion-item--disabled{opacity:.5}\n"], dependencies: [{ kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
87
87
  }
88
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AccordionItemComponent, decorators: [{
88
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AccordionItemComponent, decorators: [{
89
89
  type: Component,
90
90
  args: [{ selector: 'ea-accordion-item', imports: [ChevronDownIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"ea-accordion-item\"\n [class.ea-accordion-item--expanded]=\"isExpanded()\"\n [class.ea-accordion-item--disabled]=\"disabled()\">\n <button\n class=\"ea-accordion-item__trigger\"\n type=\"button\"\n [attr.aria-expanded]=\"isExpanded()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\">\n <span class=\"ea-accordion-item__label\">{{ label() }}</span>\n <ea-icon-chevron-down class=\"ea-accordion-item__chevron\" />\n </button>\n @if (isExpanded()) {\n <div\n class=\"ea-accordion-item__content\"\n role=\"region\">\n <ng-content />\n </div>\n }\n</div>\n", styles: [".ea-accordion-item{border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-accordion-item:last-child{border-bottom:none}.ea-accordion-item__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);text-align:left;background:none;border:none;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-accordion-item__trigger:hover:not(:disabled){background-color:var(--color-bg-subtle)}.ea-accordion-item__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-accordion-item__trigger:disabled{opacity:.5;cursor:not-allowed}.ea-accordion-item__chevron{flex-shrink:0;width:16px;height:16px;color:var(--color-text-secondary);transition:transform var(--duration-normal) var(--ease-out)}.ea-accordion-item--expanded .ea-accordion-item__chevron{transform:rotate(180deg)}.ea-accordion-item__content{padding:0 var(--space-4) var(--space-4);font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-accordion-item--disabled{opacity:.5}\n"] }]
91
91
  }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
92
92
 
93
93
  class AlertCircleIconComponent {
94
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AlertCircleIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
95
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: AlertCircleIconComponent, isStandalone: true, selector: "ea-icon-alert-circle", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
94
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AlertCircleIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
95
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: AlertCircleIconComponent, isStandalone: true, selector: "ea-icon-alert-circle", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
96
96
  <svg
97
97
  viewBox="0 0 16 16"
98
98
  fill="currentColor"
@@ -104,7 +104,7 @@ class AlertCircleIconComponent {
104
104
  </svg>
105
105
  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
106
106
  }
107
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AlertCircleIconComponent, decorators: [{
107
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AlertCircleIconComponent, decorators: [{
108
108
  type: Component,
109
109
  args: [{
110
110
  selector: 'ea-icon-alert-circle',
@@ -125,8 +125,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
125
125
  }] });
126
126
 
127
127
  class CheckIconComponent {
128
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CheckIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
129
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: CheckIconComponent, isStandalone: true, selector: "ea-icon-check", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
128
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CheckIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
129
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: CheckIconComponent, isStandalone: true, selector: "ea-icon-check", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
130
130
  <svg
131
131
  viewBox="0 0 24 24"
132
132
  fill="none"
@@ -141,7 +141,7 @@ class CheckIconComponent {
141
141
  </svg>
142
142
  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
143
143
  }
144
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CheckIconComponent, decorators: [{
144
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CheckIconComponent, decorators: [{
145
145
  type: Component,
146
146
  args: [{
147
147
  selector: 'ea-icon-check',
@@ -165,8 +165,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
165
165
  }] });
166
166
 
167
167
  class InfoIconComponent {
168
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: InfoIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
169
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: InfoIconComponent, isStandalone: true, selector: "ea-icon-info", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
168
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: InfoIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
169
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: InfoIconComponent, isStandalone: true, selector: "ea-icon-info", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
170
170
  <svg
171
171
  viewBox="0 0 24 24"
172
172
  fill="none"
@@ -194,7 +194,7 @@ class InfoIconComponent {
194
194
  </svg>
195
195
  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
196
196
  }
197
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: InfoIconComponent, decorators: [{
197
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: InfoIconComponent, decorators: [{
198
198
  type: Component,
199
199
  args: [{
200
200
  selector: 'ea-icon-info',
@@ -231,8 +231,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
231
231
  }] });
232
232
 
233
233
  class XIconComponent {
234
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: XIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
235
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: XIconComponent, isStandalone: true, selector: "ea-icon-x", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
234
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: XIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
235
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: XIconComponent, isStandalone: true, selector: "ea-icon-x", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
236
236
  <svg
237
237
  viewBox="0 0 24 24"
238
238
  fill="none"
@@ -256,7 +256,7 @@ class XIconComponent {
256
256
  </svg>
257
257
  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
258
258
  }
259
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: XIconComponent, decorators: [{
259
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: XIconComponent, decorators: [{
260
260
  type: Component,
261
261
  args: [{
262
262
  selector: 'ea-icon-x',
@@ -300,10 +300,10 @@ class AlertComponent {
300
300
  this.visible.set(false);
301
301
  this.dismissed.emit();
302
302
  }
303
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
304
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: AlertComponent, isStandalone: true, selector: "ea-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", dismissed: "dismissed" }, ngImport: i0, template: "@if (visible()) {\n <div\n class=\"ea-alert\"\n [class.ea-alert--default]=\"variant() === 'default'\"\n [class.ea-alert--success]=\"variant() === 'success'\"\n [class.ea-alert--warning]=\"variant() === 'warning'\"\n [class.ea-alert--error]=\"variant() === 'error'\"\n [class.ea-alert--info]=\"variant() === 'info'\"\n role=\"alert\">\n <span class=\"ea-alert__icon\">\n @switch (variant()) {\n @case ('success') {\n <ea-icon-check />\n }\n @case ('warning') {\n <ea-icon-alert-circle />\n }\n @case ('error') {\n <ea-icon-alert-circle />\n }\n @case ('info') {\n <ea-icon-info />\n }\n @default {\n <ea-icon-info />\n }\n }\n </span>\n <div class=\"ea-alert__content\">\n <ng-content />\n </div>\n @if (dismissible()) {\n <button\n class=\"ea-alert__close\"\n type=\"button\"\n aria-label=\"Dismiss\"\n (click)=\"dismiss()\">\n <ea-icon-x />\n </button>\n }\n </div>\n}\n", styles: [".ea-alert{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);border:var(--border-width-thin) solid;border-radius:var(--radius-lg)}.ea-alert--default{background-color:var(--color-bg-subtle);border-color:var(--color-border-default);color:var(--color-text-primary)}.ea-alert--default .ea-alert__icon{color:var(--color-text-secondary)}.ea-alert--success{background-color:var(--color-success-subtle);border-color:var(--color-success-default);color:var(--color-text-primary)}.ea-alert--success .ea-alert__icon{color:var(--color-success-default)}.ea-alert--warning{background-color:var(--color-warning-subtle);border-color:var(--color-warning-default);color:var(--color-text-primary)}.ea-alert--warning .ea-alert__icon{color:var(--color-warning-default)}.ea-alert--error{background-color:var(--color-error-subtle);border-color:var(--color-error-default);color:var(--color-text-primary)}.ea-alert--error .ea-alert__icon{color:var(--color-error-default)}.ea-alert--info{background-color:var(--color-info-subtle);border-color:var(--color-info-default);color:var(--color-text-primary)}.ea-alert--info .ea-alert__icon{color:var(--color-info-default)}.ea-alert__icon{display:flex;flex-shrink:0;width:1.25rem;height:1.25rem;padding-top:1px}.ea-alert__content{flex:1;min-width:0}.ea-alert__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-alert__close:hover{color:var(--color-text-primary)}.ea-alert__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}\n"], dependencies: [{ kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }, { kind: "component", type: CheckIconComponent, selector: "ea-icon-check" }, { kind: "component", type: InfoIconComponent, selector: "ea-icon-info" }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
303
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
304
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: AlertComponent, isStandalone: true, selector: "ea-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", dismissed: "dismissed" }, ngImport: i0, template: "@if (visible()) {\n <div\n class=\"ea-alert\"\n [class.ea-alert--default]=\"variant() === 'default'\"\n [class.ea-alert--success]=\"variant() === 'success'\"\n [class.ea-alert--warning]=\"variant() === 'warning'\"\n [class.ea-alert--error]=\"variant() === 'error'\"\n [class.ea-alert--info]=\"variant() === 'info'\"\n role=\"alert\">\n <span class=\"ea-alert__icon\">\n @switch (variant()) {\n @case ('success') {\n <ea-icon-check />\n }\n @case ('warning') {\n <ea-icon-alert-circle />\n }\n @case ('error') {\n <ea-icon-alert-circle />\n }\n @case ('info') {\n <ea-icon-info />\n }\n @default {\n <ea-icon-info />\n }\n }\n </span>\n <div class=\"ea-alert__content\">\n <ng-content />\n </div>\n @if (dismissible()) {\n <button\n class=\"ea-alert__close\"\n type=\"button\"\n aria-label=\"Dismiss\"\n (click)=\"dismiss()\">\n <ea-icon-x />\n </button>\n }\n </div>\n}\n", styles: [".ea-alert{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);border:var(--border-width-thin) solid;border-radius:var(--radius-lg)}.ea-alert--default{background-color:var(--color-bg-subtle);border-color:var(--color-border-default);color:var(--color-text-primary)}.ea-alert--default .ea-alert__icon{color:var(--color-text-secondary)}.ea-alert--success{background-color:var(--color-success-subtle);border-color:var(--color-success-default);color:var(--color-text-primary)}.ea-alert--success .ea-alert__icon{color:var(--color-success-default)}.ea-alert--warning{background-color:var(--color-warning-subtle);border-color:var(--color-warning-default);color:var(--color-text-primary)}.ea-alert--warning .ea-alert__icon{color:var(--color-warning-default)}.ea-alert--error{background-color:var(--color-error-subtle);border-color:var(--color-error-default);color:var(--color-text-primary)}.ea-alert--error .ea-alert__icon{color:var(--color-error-default)}.ea-alert--info{background-color:var(--color-info-subtle);border-color:var(--color-info-default);color:var(--color-text-primary)}.ea-alert--info .ea-alert__icon{color:var(--color-info-default)}.ea-alert__icon{display:flex;flex-shrink:0;width:1.25rem;height:1.25rem;padding-top:1px}.ea-alert__content{flex:1;min-width:0}.ea-alert__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-alert__close:hover{color:var(--color-text-primary)}.ea-alert__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}\n"], dependencies: [{ kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }, { kind: "component", type: CheckIconComponent, selector: "ea-icon-check" }, { kind: "component", type: InfoIconComponent, selector: "ea-icon-info" }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
305
305
  }
306
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AlertComponent, decorators: [{
306
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AlertComponent, decorators: [{
307
307
  type: Component,
308
308
  args: [{ selector: 'ea-alert', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
309
309
  AlertCircleIconComponent,
@@ -314,8 +314,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
314
314
  }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
315
315
 
316
316
  class CameraIconComponent {
317
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CameraIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
318
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: CameraIconComponent, isStandalone: true, selector: "ea-icon-camera", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
317
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CameraIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
318
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: CameraIconComponent, isStandalone: true, selector: "ea-icon-camera", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
319
319
  <svg
320
320
  viewBox="0 0 24 24"
321
321
  fill="none"
@@ -335,7 +335,7 @@ class CameraIconComponent {
335
335
  </svg>
336
336
  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
337
337
  }
338
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CameraIconComponent, decorators: [{
338
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CameraIconComponent, decorators: [{
339
339
  type: Component,
340
340
  args: [{
341
341
  selector: 'ea-icon-camera',
@@ -364,8 +364,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
364
364
  }] });
365
365
 
366
366
  class MinusIconComponent {
367
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MinusIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
368
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: MinusIconComponent, isStandalone: true, selector: "ea-icon-minus", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
367
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: MinusIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
368
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: MinusIconComponent, isStandalone: true, selector: "ea-icon-minus", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
369
369
  <svg
370
370
  viewBox="0 0 24 24"
371
371
  fill="none"
@@ -384,7 +384,7 @@ class MinusIconComponent {
384
384
  </svg>
385
385
  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
386
386
  }
387
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MinusIconComponent, decorators: [{
387
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: MinusIconComponent, decorators: [{
388
388
  type: Component,
389
389
  args: [{
390
390
  selector: 'ea-icon-minus',
@@ -412,8 +412,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
412
412
  }] });
413
413
 
414
414
  class PlusIconComponent {
415
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: PlusIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
416
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: PlusIconComponent, isStandalone: true, selector: "ea-icon-plus", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
415
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: PlusIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
416
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: PlusIconComponent, isStandalone: true, selector: "ea-icon-plus", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
417
417
  <svg
418
418
  viewBox="0 0 24 24"
419
419
  fill="none"
@@ -437,7 +437,7 @@ class PlusIconComponent {
437
437
  </svg>
438
438
  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
439
439
  }
440
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: PlusIconComponent, decorators: [{
440
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: PlusIconComponent, decorators: [{
441
441
  type: Component,
442
442
  args: [{
443
443
  selector: 'ea-icon-plus',
@@ -470,8 +470,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
470
470
  }] });
471
471
 
472
472
  class RotateCcwIconComponent {
473
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: RotateCcwIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
474
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: RotateCcwIconComponent, isStandalone: true, selector: "ea-icon-rotate-ccw", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
473
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: RotateCcwIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
474
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: RotateCcwIconComponent, isStandalone: true, selector: "ea-icon-rotate-ccw", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
475
475
  <svg
476
476
  viewBox="0 0 24 24"
477
477
  fill="none"
@@ -487,7 +487,7 @@ class RotateCcwIconComponent {
487
487
  </svg>
488
488
  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
489
489
  }
490
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: RotateCcwIconComponent, decorators: [{
490
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: RotateCcwIconComponent, decorators: [{
491
491
  type: Component,
492
492
  args: [{
493
493
  selector: 'ea-icon-rotate-ccw',
@@ -512,8 +512,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
512
512
  }] });
513
513
 
514
514
  class TrashIconComponent {
515
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TrashIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
516
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: TrashIconComponent, isStandalone: true, selector: "ea-icon-trash", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
515
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TrashIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
516
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: TrashIconComponent, isStandalone: true, selector: "ea-icon-trash", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
517
517
  <svg
518
518
  viewBox="0 0 24 24"
519
519
  fill="none"
@@ -530,7 +530,7 @@ class TrashIconComponent {
530
530
  </svg>
531
531
  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
532
532
  }
533
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TrashIconComponent, decorators: [{
533
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TrashIconComponent, decorators: [{
534
534
  type: Component,
535
535
  args: [{
536
536
  selector: 'ea-icon-trash',
@@ -556,8 +556,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
556
556
  }] });
557
557
 
558
558
  class UploadIconComponent {
559
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: UploadIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
560
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: UploadIconComponent, isStandalone: true, selector: "ea-icon-upload", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
559
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: UploadIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
560
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: UploadIconComponent, isStandalone: true, selector: "ea-icon-upload", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
561
561
  <svg
562
562
  viewBox="0 0 24 24"
563
563
  fill="none"
@@ -578,7 +578,7 @@ class UploadIconComponent {
578
578
  </svg>
579
579
  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
580
580
  }
581
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: UploadIconComponent, decorators: [{
581
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: UploadIconComponent, decorators: [{
582
582
  type: Component,
583
583
  args: [{
584
584
  selector: 'ea-icon-upload',
@@ -675,10 +675,10 @@ class TooltipDirective {
675
675
  this.renderer.setStyle(this.tooltipEl, 'top', `${top + window.scrollY}px`);
676
676
  this.renderer.setStyle(this.tooltipEl, 'left', `${left + window.scrollX}px`);
677
677
  }
678
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
679
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: TooltipDirective, isStandalone: true, selector: "[eaTooltip]", inputs: { eaTooltip: { classPropertyName: "eaTooltip", publicName: "eaTooltip", isSignal: true, isRequired: true, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
678
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
679
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.7", type: TooltipDirective, isStandalone: true, selector: "[eaTooltip]", inputs: { eaTooltip: { classPropertyName: "eaTooltip", publicName: "eaTooltip", isSignal: true, isRequired: true, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
680
680
  }
681
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TooltipDirective, decorators: [{
681
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TooltipDirective, decorators: [{
682
682
  type: Directive,
683
683
  args: [{
684
684
  selector: '[eaTooltip]',
@@ -697,9 +697,12 @@ class AvatarEditorComponent {
697
697
  maxZoom = input(3, ...(ngDevMode ? [{ debugName: "maxZoom" }] : /* istanbul ignore next */ []));
698
698
  exportQuality = input(0.92, ...(ngDevMode ? [{ debugName: "exportQuality" }] : /* istanbul ignore next */ []));
699
699
  exportType = input('image/png', ...(ngDevMode ? [{ debugName: "exportType" }] : /* istanbul ignore next */ []));
700
+ cropState = input(...(ngDevMode ? [undefined, { debugName: "cropState" }] : /* istanbul ignore next */ []));
700
701
  cropped = output();
702
+ fileSelected = output();
701
703
  removed = output();
702
704
  fileError = output();
705
+ cropStateChange = output();
703
706
  hasImage = signal(false, ...(ngDevMode ? [{ debugName: "hasImage" }] : /* istanbul ignore next */ []));
704
707
  isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : /* istanbul ignore next */ []));
705
708
  zoom = signal(1, ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
@@ -713,6 +716,7 @@ class AvatarEditorComponent {
713
716
  hasDragged = false;
714
717
  initialOffsetX = 0;
715
718
  initialOffsetY = 0;
719
+ _suppressCropStateEmit = false;
716
720
  hostClasses = computed(() => ({
717
721
  [`ea-avatar-editor--${this.shape()}`]: true,
718
722
  'ea-avatar-editor--has-image': this.hasImage(),
@@ -725,7 +729,7 @@ class AvatarEditorComponent {
725
729
  const src = this.currentSrc();
726
730
  if (!src)
727
731
  return;
728
- this.loadFromUrl(src);
732
+ this.loadFromUrl(src, untracked(() => this.cropState()) ?? null, true);
729
733
  });
730
734
  }
731
735
  ngOnDestroy() {
@@ -801,6 +805,7 @@ class AvatarEditorComponent {
801
805
  this.offsetY = this.initialOffsetY + dy;
802
806
  this.clampOffset();
803
807
  this.draw();
808
+ this.emitCropStateChange();
804
809
  }
805
810
  onMouseUp() {
806
811
  if (!this.hasDragged)
@@ -822,6 +827,7 @@ class AvatarEditorComponent {
822
827
  this.offsetY = this.initialOffsetY + dy;
823
828
  this.clampOffset();
824
829
  this.draw();
830
+ this.emitCropStateChange();
825
831
  }
826
832
  onTouchEnd() {
827
833
  if (!this.hasDragged)
@@ -842,6 +848,7 @@ class AvatarEditorComponent {
842
848
  this.zoom.set(Math.round(clamped * 100) / 100);
843
849
  this.clampOffset();
844
850
  this.draw();
851
+ this.emitCropStateChange();
845
852
  }
846
853
  onZoomInput(event) {
847
854
  const value = parseFloat(event.target.value);
@@ -860,42 +867,62 @@ class AvatarEditorComponent {
860
867
  const src = this.currentSrc();
861
868
  if (!src)
862
869
  return;
863
- this.loadFromUrl(src);
870
+ this.loadFromUrl(src, null, true);
864
871
  }
865
872
  exportCrop() {
866
- if (!this.image)
867
- return;
868
- const size = this.canvasSize();
869
- const offscreen = document.createElement('canvas');
870
- offscreen.width = size;
871
- offscreen.height = size;
872
- const ctx = offscreen.getContext('2d');
873
- if (this.shape() === 'circle') {
874
- ctx.beginPath();
875
- ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
876
- ctx.closePath();
877
- ctx.clip();
878
- }
879
- const { drawX, drawY, drawW, drawH } = this.getDrawParams();
880
- ctx.drawImage(this.image, drawX, drawY, drawW, drawH);
881
- offscreen.toBlob(blob => {
882
- if (blob) {
883
- const reader = new FileReader();
884
- reader.onloadend = () => {
885
- this.cropped.emit({ blob, dataUrl: reader.result });
886
- };
887
- reader.readAsDataURL(blob);
873
+ return new Promise((resolve, reject) => {
874
+ if (!this.image) {
875
+ reject(new Error('No image loaded'));
876
+ return;
877
+ }
878
+ const size = this.canvasSize();
879
+ const offscreen = document.createElement('canvas');
880
+ offscreen.width = size;
881
+ offscreen.height = size;
882
+ const ctx = offscreen.getContext('2d');
883
+ if (this.shape() === 'circle') {
884
+ ctx.beginPath();
885
+ ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
886
+ ctx.closePath();
887
+ ctx.clip();
888
888
  }
889
- }, this.exportType(), this.exportQuality());
889
+ const { drawX, drawY, drawW, drawH } = this.getDrawParams();
890
+ ctx.drawImage(this.image, drawX, drawY, drawW, drawH);
891
+ offscreen.toBlob(blob => {
892
+ if (blob) {
893
+ const reader = new FileReader();
894
+ reader.onloadend = () => {
895
+ this.cropped.emit({ blob, dataUrl: reader.result });
896
+ resolve(blob);
897
+ };
898
+ reader.readAsDataURL(blob);
899
+ }
900
+ else {
901
+ reject(new Error('Canvas export failed'));
902
+ }
903
+ }, this.exportType(), this.exportQuality());
904
+ });
890
905
  }
891
- loadFromUrl(url) {
906
+ loadFromUrl(url, cropState = null, suppressEmit = false) {
907
+ this._suppressCropStateEmit = suppressEmit;
892
908
  const img = new Image();
893
909
  img.crossOrigin = 'anonymous';
910
+ img.onerror = () => {
911
+ this._suppressCropStateEmit = false;
912
+ };
894
913
  img.onload = () => {
895
914
  this.image = img;
896
915
  this.hasImage.set(true);
897
- this.zoom.set(1);
898
- this.centerImage();
916
+ if (cropState) {
917
+ this.zoom.set(Math.min(this.maxZoom(), Math.max(this.minZoom(), cropState.zoom)));
918
+ this.offsetX = cropState.offsetX;
919
+ this.offsetY = cropState.offsetY;
920
+ this.clampOffset();
921
+ }
922
+ else {
923
+ this.zoom.set(1);
924
+ this.centerImage();
925
+ }
899
926
  this.scheduleDrawAfterRender();
900
927
  };
901
928
  img.src = url;
@@ -910,6 +937,7 @@ class AvatarEditorComponent {
910
937
  this.fileError.emit(`File exceeds ${maxMb} MB limit`);
911
938
  return;
912
939
  }
940
+ this.fileSelected.emit(file);
913
941
  const reader = new FileReader();
914
942
  reader.onload = e => {
915
943
  const img = new Image();
@@ -927,6 +955,7 @@ class AvatarEditorComponent {
927
955
  scheduleDrawAfterRender() {
928
956
  afterNextRender(() => {
929
957
  this.draw();
958
+ this._suppressCropStateEmit = false;
930
959
  const canvas = this.canvasEl()?.nativeElement;
931
960
  canvas?.removeEventListener('wheel', this.boundWheel);
932
961
  canvas?.addEventListener('wheel', this.boundWheel, { passive: false });
@@ -995,6 +1024,15 @@ class AvatarEditorComponent {
995
1024
  ctx.drawImage(this.image, drawX, drawY, drawW, drawH);
996
1025
  ctx.globalCompositeOperation = 'source-over';
997
1026
  }
1027
+ emitCropStateChange() {
1028
+ if (this._suppressCropStateEmit)
1029
+ return;
1030
+ this.cropStateChange.emit({
1031
+ zoom: this.zoom(),
1032
+ offsetX: this.offsetX,
1033
+ offsetY: this.offsetY,
1034
+ });
1035
+ }
998
1036
  clearCanvas() {
999
1037
  const canvas = this.canvasEl()?.nativeElement;
1000
1038
  if (!canvas)
@@ -1002,10 +1040,10 @@ class AvatarEditorComponent {
1002
1040
  const ctx = canvas.getContext('2d');
1003
1041
  ctx.clearRect(0, 0, canvas.width, canvas.height);
1004
1042
  }
1005
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AvatarEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1006
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: AvatarEditorComponent, isStandalone: true, selector: "ea-avatar-editor", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, canvasSize: { classPropertyName: "canvasSize", publicName: "canvasSize", isSignal: true, isRequired: false, transformFunction: null }, currentSrc: { classPropertyName: "currentSrc", publicName: "currentSrc", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, exportQuality: { classPropertyName: "exportQuality", publicName: "exportQuality", isSignal: true, isRequired: false, transformFunction: null }, exportType: { classPropertyName: "exportType", publicName: "exportType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropped: "cropped", removed: "removed", fileError: "fileError" }, viewQueries: [{ propertyName: "canvasEl", first: true, predicate: ["canvasEl"], descendants: true, isSignal: true }, { propertyName: "fileInputEl", first: true, predicate: ["fileInputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"ea-avatar-editor\"\n [ngClass]=\"hostClasses()\">\n <input\n #fileInputEl\n type=\"file\"\n class=\"ea-avatar-editor__file-input\"\n [accept]=\"accept()\"\n (change)=\"onFileSelected($event)\" />\n\n @if (!hasImage()) {\n <button\n type=\"button\"\n class=\"ea-avatar-editor__dropzone\"\n [style.width.px]=\"canvasSize()\"\n [style.height.px]=\"canvasSize()\"\n (click)=\"openFilePicker()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n <ea-icon-upload class=\"ea-avatar-editor__upload-icon\" />\n <span class=\"ea-avatar-editor__dropzone-text\"> Drop image or click to upload </span>\n </button>\n }\n\n @if (hasImage()) {\n <div\n class=\"ea-avatar-editor__canvas-wrapper\"\n [style.width.px]=\"canvasSize()\"\n [style.height.px]=\"canvasSize()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n <canvas\n #canvasEl\n class=\"ea-avatar-editor__canvas\"\n [width]=\"canvasSize()\"\n [height]=\"canvasSize()\"\n (mousedown)=\"onMouseDown($event)\"\n (touchstart)=\"onTouchStart($event)\"></canvas>\n\n <div class=\"ea-avatar-editor__canvas-overlay\">\n <ea-icon-camera class=\"ea-avatar-editor__overlay-icon\" />\n <span>Change photo</span>\n </div>\n </div>\n }\n\n <div class=\"ea-avatar-editor__controls\">\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn\"\n [eaTooltip]=\"'Revert to original'\"\n aria-label=\"Revert to original\"\n [disabled]=\"!canRevert()\"\n (click)=\"revertImage()\">\n <ea-icon-rotate-ccw />\n </button>\n\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn\"\n [eaTooltip]=\"'Zoom out'\"\n aria-label=\"Zoom out\"\n [disabled]=\"!hasImage() || zoom() <= minZoom()\"\n (click)=\"setZoom(zoom() - 0.1)\">\n <ea-icon-minus />\n </button>\n\n <input\n type=\"range\"\n class=\"ea-avatar-editor__zoom-slider\"\n [min]=\"minZoom()\"\n [max]=\"maxZoom()\"\n step=\"0.01\"\n [value]=\"zoom()\"\n [disabled]=\"!hasImage()\"\n aria-label=\"Zoom\"\n (input)=\"onZoomInput($event)\" />\n\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn\"\n [eaTooltip]=\"'Zoom in'\"\n aria-label=\"Zoom in\"\n [disabled]=\"!hasImage() || zoom() >= maxZoom()\"\n (click)=\"setZoom(zoom() + 0.1)\">\n <ea-icon-plus />\n </button>\n\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn ea-avatar-editor__icon-btn--danger\"\n [eaTooltip]=\"'Remove image'\"\n aria-label=\"Remove image\"\n [disabled]=\"!hasImage()\"\n (click)=\"removeImage()\">\n <ea-icon-trash />\n </button>\n </div>\n</div>\n", styles: [".ea-avatar-editor{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-3);font-family:var(--font-family-sans)}.ea-avatar-editor__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.ea-avatar-editor__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);font-family:inherit;font-size:var(--font-size-sm);line-height:var(--line-height-normal);border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-tertiary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__dropzone:hover{border-color:var(--color-border-focus);background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-avatar-editor__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor--drag-over .ea-avatar-editor__dropzone{border-color:var(--color-primary-500);background-color:var(--color-primary-50);color:var(--color-primary-600)}.ea-avatar-editor--circle .ea-avatar-editor__dropzone{border-radius:var(--radius-full)}.ea-avatar-editor__upload-icon{width:32px;height:32px;opacity:.6}.ea-avatar-editor__dropzone-text{text-align:center}.ea-avatar-editor__canvas-wrapper{position:relative;overflow:hidden;border-radius:var(--radius-lg)}.ea-avatar-editor--circle .ea-avatar-editor__canvas-wrapper{border-radius:var(--radius-full)}.ea-avatar-editor__canvas{display:block;cursor:grab}.ea-avatar-editor__canvas:active{cursor:grabbing}.ea-avatar-editor__canvas-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);background-color:var(--color-bg-overlay);color:var(--color-text-inverse);opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--easing-default)}.ea-avatar-editor__overlay-icon{width:24px;height:24px}.ea-avatar-editor__canvas-wrapper:hover .ea-avatar-editor__canvas-overlay{opacity:1}.ea-avatar-editor__controls{display:flex;align-items:center;gap:var(--space-2)}.ea-avatar-editor__icon-btn{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0}.ea-avatar-editor__icon-btn ea-icon-rotate-ccw,.ea-avatar-editor__icon-btn ea-icon-minus,.ea-avatar-editor__icon-btn ea-icon-plus,.ea-avatar-editor__icon-btn ea-icon-trash{width:1rem;height:1rem}.ea-avatar-editor__icon-btn{border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__icon-btn:hover:not(:disabled){border-color:var(--color-border-focus)}.ea-avatar-editor__icon-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__icon-btn:disabled{opacity:.4;cursor:not-allowed}.ea-avatar-editor__icon-btn--danger{color:var(--color-error-default)}.ea-avatar-editor__icon-btn--danger:hover:not(:disabled){border-color:var(--color-error-default)}.ea-avatar-editor__zoom-slider{width:7rem;height:4px;border-radius:var(--radius-full);background:var(--color-neutral-200);appearance:none;cursor:pointer}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);appearance:none;cursor:grab}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider::-moz-range-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);cursor:grab}.ea-avatar-editor__zoom-slider::-moz-range-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider:focus-visible{outline:none}.ea-avatar-editor__zoom-slider:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__zoom-slider:disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CameraIconComponent, selector: "ea-icon-camera" }, { kind: "component", type: MinusIconComponent, selector: "ea-icon-minus" }, { kind: "component", type: PlusIconComponent, selector: "ea-icon-plus" }, { kind: "component", type: RotateCcwIconComponent, selector: "ea-icon-rotate-ccw" }, { kind: "component", type: TrashIconComponent, selector: "ea-icon-trash" }, { kind: "component", type: UploadIconComponent, selector: "ea-icon-upload" }, { kind: "directive", type: TooltipDirective, selector: "[eaTooltip]", inputs: ["eaTooltip", "tooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1043
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AvatarEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1044
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: AvatarEditorComponent, isStandalone: true, selector: "ea-avatar-editor", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, canvasSize: { classPropertyName: "canvasSize", publicName: "canvasSize", isSignal: true, isRequired: false, transformFunction: null }, currentSrc: { classPropertyName: "currentSrc", publicName: "currentSrc", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, exportQuality: { classPropertyName: "exportQuality", publicName: "exportQuality", isSignal: true, isRequired: false, transformFunction: null }, exportType: { classPropertyName: "exportType", publicName: "exportType", isSignal: true, isRequired: false, transformFunction: null }, cropState: { classPropertyName: "cropState", publicName: "cropState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropped: "cropped", fileSelected: "fileSelected", removed: "removed", fileError: "fileError", cropStateChange: "cropStateChange" }, viewQueries: [{ propertyName: "canvasEl", first: true, predicate: ["canvasEl"], descendants: true, isSignal: true }, { propertyName: "fileInputEl", first: true, predicate: ["fileInputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"ea-avatar-editor\"\n [ngClass]=\"hostClasses()\">\n <input\n #fileInputEl\n type=\"file\"\n class=\"ea-avatar-editor__file-input\"\n [accept]=\"accept()\"\n (change)=\"onFileSelected($event)\" />\n\n @if (!hasImage()) {\n <button\n type=\"button\"\n class=\"ea-avatar-editor__dropzone\"\n [style.width.px]=\"canvasSize()\"\n [style.height.px]=\"canvasSize()\"\n (click)=\"openFilePicker()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n <ea-icon-upload class=\"ea-avatar-editor__upload-icon\" />\n <span class=\"ea-avatar-editor__dropzone-text\"> Drop image or click to upload </span>\n </button>\n }\n\n @if (hasImage()) {\n <div\n class=\"ea-avatar-editor__canvas-wrapper\"\n [style.width.px]=\"canvasSize()\"\n [style.height.px]=\"canvasSize()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n <canvas\n #canvasEl\n class=\"ea-avatar-editor__canvas\"\n [width]=\"canvasSize()\"\n [height]=\"canvasSize()\"\n (mousedown)=\"onMouseDown($event)\"\n (touchstart)=\"onTouchStart($event)\"></canvas>\n\n <div class=\"ea-avatar-editor__canvas-overlay\">\n <ea-icon-camera class=\"ea-avatar-editor__overlay-icon\" />\n <span>Change photo</span>\n </div>\n </div>\n }\n\n <div class=\"ea-avatar-editor__controls\">\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn\"\n [eaTooltip]=\"'Revert to original'\"\n aria-label=\"Revert to original\"\n [disabled]=\"!canRevert()\"\n (click)=\"revertImage()\">\n <ea-icon-rotate-ccw />\n </button>\n\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn\"\n [eaTooltip]=\"'Zoom out'\"\n aria-label=\"Zoom out\"\n [disabled]=\"!hasImage() || zoom() <= minZoom()\"\n (click)=\"setZoom(zoom() - 0.1)\">\n <ea-icon-minus />\n </button>\n\n <input\n type=\"range\"\n class=\"ea-avatar-editor__zoom-slider\"\n [min]=\"minZoom()\"\n [max]=\"maxZoom()\"\n step=\"0.01\"\n [value]=\"zoom()\"\n [disabled]=\"!hasImage()\"\n aria-label=\"Zoom\"\n (input)=\"onZoomInput($event)\" />\n\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn\"\n [eaTooltip]=\"'Zoom in'\"\n aria-label=\"Zoom in\"\n [disabled]=\"!hasImage() || zoom() >= maxZoom()\"\n (click)=\"setZoom(zoom() + 0.1)\">\n <ea-icon-plus />\n </button>\n\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn ea-avatar-editor__icon-btn--danger\"\n [eaTooltip]=\"'Remove image'\"\n aria-label=\"Remove image\"\n [disabled]=\"!hasImage()\"\n (click)=\"removeImage()\">\n <ea-icon-trash />\n </button>\n </div>\n</div>\n", styles: [".ea-avatar-editor{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-3);font-family:var(--font-family-sans)}.ea-avatar-editor__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.ea-avatar-editor__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);font-family:inherit;font-size:var(--font-size-sm);line-height:var(--line-height-normal);border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-tertiary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__dropzone:hover{border-color:var(--color-border-focus);background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-avatar-editor__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor--drag-over .ea-avatar-editor__dropzone{border-color:var(--color-primary-500);background-color:var(--color-primary-50);color:var(--color-primary-600)}.ea-avatar-editor--circle .ea-avatar-editor__dropzone{border-radius:var(--radius-full)}.ea-avatar-editor__upload-icon{width:32px;height:32px;opacity:.6}.ea-avatar-editor__dropzone-text{text-align:center}.ea-avatar-editor__canvas-wrapper{position:relative;overflow:hidden;border-radius:var(--radius-lg)}.ea-avatar-editor--circle .ea-avatar-editor__canvas-wrapper{border-radius:var(--radius-full)}.ea-avatar-editor__canvas{display:block;cursor:grab}.ea-avatar-editor__canvas:active{cursor:grabbing}.ea-avatar-editor__canvas-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);background-color:var(--color-bg-overlay);color:var(--color-text-inverse);opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--easing-default)}.ea-avatar-editor__overlay-icon{width:24px;height:24px}.ea-avatar-editor__canvas-wrapper:hover .ea-avatar-editor__canvas-overlay{opacity:1}.ea-avatar-editor__controls{display:flex;align-items:center;gap:var(--space-2)}.ea-avatar-editor__icon-btn{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0}.ea-avatar-editor__icon-btn ea-icon-rotate-ccw,.ea-avatar-editor__icon-btn ea-icon-minus,.ea-avatar-editor__icon-btn ea-icon-plus,.ea-avatar-editor__icon-btn ea-icon-trash{width:1rem;height:1rem}.ea-avatar-editor__icon-btn{border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__icon-btn:hover:not(:disabled){border-color:var(--color-border-focus)}.ea-avatar-editor__icon-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__icon-btn:disabled{opacity:.4;cursor:not-allowed}.ea-avatar-editor__icon-btn--danger{color:var(--color-error-default)}.ea-avatar-editor__icon-btn--danger:hover:not(:disabled){border-color:var(--color-error-default)}.ea-avatar-editor__zoom-slider{width:7rem;height:4px;border-radius:var(--radius-full);background:var(--color-neutral-200);appearance:none;cursor:pointer}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);appearance:none;cursor:grab}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider::-moz-range-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);cursor:grab}.ea-avatar-editor__zoom-slider::-moz-range-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider:focus-visible{outline:none}.ea-avatar-editor__zoom-slider:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__zoom-slider:disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CameraIconComponent, selector: "ea-icon-camera" }, { kind: "component", type: MinusIconComponent, selector: "ea-icon-minus" }, { kind: "component", type: PlusIconComponent, selector: "ea-icon-plus" }, { kind: "component", type: RotateCcwIconComponent, selector: "ea-icon-rotate-ccw" }, { kind: "component", type: TrashIconComponent, selector: "ea-icon-trash" }, { kind: "component", type: UploadIconComponent, selector: "ea-icon-upload" }, { kind: "directive", type: TooltipDirective, selector: "[eaTooltip]", inputs: ["eaTooltip", "tooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1007
1045
  }
1008
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AvatarEditorComponent, decorators: [{
1046
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AvatarEditorComponent, decorators: [{
1009
1047
  type: Component,
1010
1048
  args: [{ selector: 'ea-avatar-editor', imports: [
1011
1049
  NgClass,
@@ -1017,11 +1055,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
1017
1055
  UploadIconComponent,
1018
1056
  TooltipDirective,
1019
1057
  ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ea-avatar-editor\"\n [ngClass]=\"hostClasses()\">\n <input\n #fileInputEl\n type=\"file\"\n class=\"ea-avatar-editor__file-input\"\n [accept]=\"accept()\"\n (change)=\"onFileSelected($event)\" />\n\n @if (!hasImage()) {\n <button\n type=\"button\"\n class=\"ea-avatar-editor__dropzone\"\n [style.width.px]=\"canvasSize()\"\n [style.height.px]=\"canvasSize()\"\n (click)=\"openFilePicker()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n <ea-icon-upload class=\"ea-avatar-editor__upload-icon\" />\n <span class=\"ea-avatar-editor__dropzone-text\"> Drop image or click to upload </span>\n </button>\n }\n\n @if (hasImage()) {\n <div\n class=\"ea-avatar-editor__canvas-wrapper\"\n [style.width.px]=\"canvasSize()\"\n [style.height.px]=\"canvasSize()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n <canvas\n #canvasEl\n class=\"ea-avatar-editor__canvas\"\n [width]=\"canvasSize()\"\n [height]=\"canvasSize()\"\n (mousedown)=\"onMouseDown($event)\"\n (touchstart)=\"onTouchStart($event)\"></canvas>\n\n <div class=\"ea-avatar-editor__canvas-overlay\">\n <ea-icon-camera class=\"ea-avatar-editor__overlay-icon\" />\n <span>Change photo</span>\n </div>\n </div>\n }\n\n <div class=\"ea-avatar-editor__controls\">\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn\"\n [eaTooltip]=\"'Revert to original'\"\n aria-label=\"Revert to original\"\n [disabled]=\"!canRevert()\"\n (click)=\"revertImage()\">\n <ea-icon-rotate-ccw />\n </button>\n\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn\"\n [eaTooltip]=\"'Zoom out'\"\n aria-label=\"Zoom out\"\n [disabled]=\"!hasImage() || zoom() <= minZoom()\"\n (click)=\"setZoom(zoom() - 0.1)\">\n <ea-icon-minus />\n </button>\n\n <input\n type=\"range\"\n class=\"ea-avatar-editor__zoom-slider\"\n [min]=\"minZoom()\"\n [max]=\"maxZoom()\"\n step=\"0.01\"\n [value]=\"zoom()\"\n [disabled]=\"!hasImage()\"\n aria-label=\"Zoom\"\n (input)=\"onZoomInput($event)\" />\n\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn\"\n [eaTooltip]=\"'Zoom in'\"\n aria-label=\"Zoom in\"\n [disabled]=\"!hasImage() || zoom() >= maxZoom()\"\n (click)=\"setZoom(zoom() + 0.1)\">\n <ea-icon-plus />\n </button>\n\n <button\n type=\"button\"\n class=\"ea-avatar-editor__icon-btn ea-avatar-editor__icon-btn--danger\"\n [eaTooltip]=\"'Remove image'\"\n aria-label=\"Remove image\"\n [disabled]=\"!hasImage()\"\n (click)=\"removeImage()\">\n <ea-icon-trash />\n </button>\n </div>\n</div>\n", styles: [".ea-avatar-editor{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-3);font-family:var(--font-family-sans)}.ea-avatar-editor__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.ea-avatar-editor__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);font-family:inherit;font-size:var(--font-size-sm);line-height:var(--line-height-normal);border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-tertiary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__dropzone:hover{border-color:var(--color-border-focus);background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-avatar-editor__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor--drag-over .ea-avatar-editor__dropzone{border-color:var(--color-primary-500);background-color:var(--color-primary-50);color:var(--color-primary-600)}.ea-avatar-editor--circle .ea-avatar-editor__dropzone{border-radius:var(--radius-full)}.ea-avatar-editor__upload-icon{width:32px;height:32px;opacity:.6}.ea-avatar-editor__dropzone-text{text-align:center}.ea-avatar-editor__canvas-wrapper{position:relative;overflow:hidden;border-radius:var(--radius-lg)}.ea-avatar-editor--circle .ea-avatar-editor__canvas-wrapper{border-radius:var(--radius-full)}.ea-avatar-editor__canvas{display:block;cursor:grab}.ea-avatar-editor__canvas:active{cursor:grabbing}.ea-avatar-editor__canvas-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);background-color:var(--color-bg-overlay);color:var(--color-text-inverse);opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--easing-default)}.ea-avatar-editor__overlay-icon{width:24px;height:24px}.ea-avatar-editor__canvas-wrapper:hover .ea-avatar-editor__canvas-overlay{opacity:1}.ea-avatar-editor__controls{display:flex;align-items:center;gap:var(--space-2)}.ea-avatar-editor__icon-btn{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0}.ea-avatar-editor__icon-btn ea-icon-rotate-ccw,.ea-avatar-editor__icon-btn ea-icon-minus,.ea-avatar-editor__icon-btn ea-icon-plus,.ea-avatar-editor__icon-btn ea-icon-trash{width:1rem;height:1rem}.ea-avatar-editor__icon-btn{border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__icon-btn:hover:not(:disabled){border-color:var(--color-border-focus)}.ea-avatar-editor__icon-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__icon-btn:disabled{opacity:.4;cursor:not-allowed}.ea-avatar-editor__icon-btn--danger{color:var(--color-error-default)}.ea-avatar-editor__icon-btn--danger:hover:not(:disabled){border-color:var(--color-error-default)}.ea-avatar-editor__zoom-slider{width:7rem;height:4px;border-radius:var(--radius-full);background:var(--color-neutral-200);appearance:none;cursor:pointer}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);appearance:none;cursor:grab}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider::-moz-range-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);cursor:grab}.ea-avatar-editor__zoom-slider::-moz-range-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider:focus-visible{outline:none}.ea-avatar-editor__zoom-slider:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__zoom-slider:disabled{opacity:.4;cursor:not-allowed}\n"] }]
1020
- }], ctorParameters: () => [], propDecorators: { canvasEl: [{ type: i0.ViewChild, args: ['canvasEl', { isSignal: true }] }], fileInputEl: [{ type: i0.ViewChild, args: ['fileInputEl', { isSignal: true }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], canvasSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasSize", required: false }] }], currentSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSrc", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], minZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "minZoom", required: false }] }], maxZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxZoom", required: false }] }], exportQuality: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportQuality", required: false }] }], exportType: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportType", required: false }] }], cropped: [{ type: i0.Output, args: ["cropped"] }], removed: [{ type: i0.Output, args: ["removed"] }], fileError: [{ type: i0.Output, args: ["fileError"] }] } });
1058
+ }], ctorParameters: () => [], propDecorators: { canvasEl: [{ type: i0.ViewChild, args: ['canvasEl', { isSignal: true }] }], fileInputEl: [{ type: i0.ViewChild, args: ['fileInputEl', { isSignal: true }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], canvasSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasSize", required: false }] }], currentSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSrc", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], minZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "minZoom", required: false }] }], maxZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxZoom", required: false }] }], exportQuality: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportQuality", required: false }] }], exportType: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportType", required: false }] }], cropState: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropState", required: false }] }], cropped: [{ type: i0.Output, args: ["cropped"] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }], removed: [{ type: i0.Output, args: ["removed"] }], fileError: [{ type: i0.Output, args: ["fileError"] }], cropStateChange: [{ type: i0.Output, args: ["cropStateChange"] }] } });
1021
1059
 
1022
1060
  class UserIconComponent {
1023
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: UserIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1024
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: UserIconComponent, isStandalone: true, selector: "ea-icon-user", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
1061
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: UserIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1062
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: UserIconComponent, isStandalone: true, selector: "ea-icon-user", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
1025
1063
  <svg
1026
1064
  viewBox="0 0 24 24"
1027
1065
  fill="none"
@@ -1040,7 +1078,7 @@ class UserIconComponent {
1040
1078
  </svg>
1041
1079
  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1042
1080
  }
1043
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: UserIconComponent, decorators: [{
1081
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: UserIconComponent, decorators: [{
1044
1082
  type: Component,
1045
1083
  args: [{
1046
1084
  selector: 'ea-icon-user',
@@ -1083,10 +1121,10 @@ class AvatarComponent {
1083
1121
  handleImageError(event) {
1084
1122
  event.target.style.display = 'none';
1085
1123
  }
1086
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1087
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: AvatarComponent, isStandalone: true, selector: "ea-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: inline-block; line-height: 0;" }, ngImport: i0, template: "<div\n class=\"ea-avatar\"\n [ngClass]=\"hostClasses()\"\n [attr.aria-label]=\"alt() || null\"\n role=\"img\">\n @if (showImage()) {\n <img\n class=\"ea-avatar__image\"\n [src]=\"src()\"\n [alt]=\"alt()\"\n (error)=\"handleImageError($event)\" />\n }\n @if (showInitials()) {\n <span class=\"ea-avatar__initials\">{{ initials() }}</span>\n }\n @if (showFallback()) {\n <ea-icon-user class=\"ea-avatar__fallback\" />\n }\n</div>\n", styles: [".ea-avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;background-color:var(--color-bg-muted);color:var(--color-text-secondary);font-family:var(--font-family-sans);font-weight:var(--font-weight-medium)}.ea-avatar--xs{width:1.5rem;height:1.5rem;font-size:var(--font-size-xs)}.ea-avatar--sm{width:2rem;height:2rem;font-size:var(--font-size-sm)}.ea-avatar--md{width:2.5rem;height:2.5rem;font-size:var(--font-size-md)}.ea-avatar--lg{width:3rem;height:3rem;font-size:var(--font-size-lg)}.ea-avatar--xl{width:4rem;height:4rem;font-size:var(--font-size-xl)}.ea-avatar--circle{border-radius:var(--radius-full)}.ea-avatar--square{border-radius:var(--radius-md)}.ea-avatar__image{width:100%;height:100%;object-fit:cover}.ea-avatar__initials{text-transform:uppercase;letter-spacing:var(--letter-spacing-wide);line-height:var(--line-height-none)}.ea-avatar__fallback{width:60%;height:60%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UserIconComponent, selector: "ea-icon-user" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1124
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1125
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: AvatarComponent, isStandalone: true, selector: "ea-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: inline-block; line-height: 0;" }, ngImport: i0, template: "<div\n class=\"ea-avatar\"\n [ngClass]=\"hostClasses()\"\n [attr.aria-label]=\"alt() || null\"\n role=\"img\">\n @if (showImage()) {\n <img\n class=\"ea-avatar__image\"\n [src]=\"src()\"\n [alt]=\"alt()\"\n (error)=\"handleImageError($event)\" />\n }\n @if (showInitials()) {\n <span class=\"ea-avatar__initials\">{{ initials() }}</span>\n }\n @if (showFallback()) {\n <ea-icon-user class=\"ea-avatar__fallback\" />\n }\n</div>\n", styles: [".ea-avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;background-color:var(--color-bg-muted);color:var(--color-text-secondary);font-family:var(--font-family-sans);font-weight:var(--font-weight-medium)}.ea-avatar--xs{width:1.5rem;height:1.5rem;font-size:var(--font-size-xs)}.ea-avatar--sm{width:2rem;height:2rem;font-size:var(--font-size-sm)}.ea-avatar--md{width:2.5rem;height:2.5rem;font-size:var(--font-size-md)}.ea-avatar--lg{width:3rem;height:3rem;font-size:var(--font-size-lg)}.ea-avatar--xl{width:4rem;height:4rem;font-size:var(--font-size-xl)}.ea-avatar--circle{border-radius:var(--radius-full)}.ea-avatar--square{border-radius:var(--radius-md)}.ea-avatar__image{width:100%;height:100%;object-fit:cover}.ea-avatar__initials{text-transform:uppercase;letter-spacing:var(--letter-spacing-wide);line-height:var(--line-height-none)}.ea-avatar__fallback{width:60%;height:60%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UserIconComponent, selector: "ea-icon-user" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1088
1126
  }
1089
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AvatarComponent, decorators: [{
1127
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AvatarComponent, decorators: [{
1090
1128
  type: Component,
1091
1129
  args: [{ selector: 'ea-avatar', imports: [NgClass, UserIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { style: 'display: inline-block; line-height: 0;' }, template: "<div\n class=\"ea-avatar\"\n [ngClass]=\"hostClasses()\"\n [attr.aria-label]=\"alt() || null\"\n role=\"img\">\n @if (showImage()) {\n <img\n class=\"ea-avatar__image\"\n [src]=\"src()\"\n [alt]=\"alt()\"\n (error)=\"handleImageError($event)\" />\n }\n @if (showInitials()) {\n <span class=\"ea-avatar__initials\">{{ initials() }}</span>\n }\n @if (showFallback()) {\n <ea-icon-user class=\"ea-avatar__fallback\" />\n }\n</div>\n", styles: [".ea-avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;background-color:var(--color-bg-muted);color:var(--color-text-secondary);font-family:var(--font-family-sans);font-weight:var(--font-weight-medium)}.ea-avatar--xs{width:1.5rem;height:1.5rem;font-size:var(--font-size-xs)}.ea-avatar--sm{width:2rem;height:2rem;font-size:var(--font-size-sm)}.ea-avatar--md{width:2.5rem;height:2.5rem;font-size:var(--font-size-md)}.ea-avatar--lg{width:3rem;height:3rem;font-size:var(--font-size-lg)}.ea-avatar--xl{width:4rem;height:4rem;font-size:var(--font-size-xl)}.ea-avatar--circle{border-radius:var(--radius-full)}.ea-avatar--square{border-radius:var(--radius-md)}.ea-avatar__image{width:100%;height:100%;object-fit:cover}.ea-avatar__initials{text-transform:uppercase;letter-spacing:var(--letter-spacing-wide);line-height:var(--line-height-none)}.ea-avatar__fallback{width:60%;height:60%}\n"] }]
1092
1130
  }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }] } });
@@ -1098,10 +1136,10 @@ class BadgeComponent {
1098
1136
  [`ea-badge--${this.variant()}`]: true,
1099
1137
  [`ea-badge--${this.size()}`]: true,
1100
1138
  }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
1101
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1102
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: BadgeComponent, isStandalone: true, selector: "ea-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n class=\"ea-badge\"\n [ngClass]=\"hostClasses()\">\n <ng-content />\n</span>\n", styles: [".ea-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;border-radius:var(--radius-full)}.ea-badge--sm{padding:var(--space-0-5) var(--space-2);font-size:var(--font-size-xs)}.ea-badge--md{padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-xs)}.ea-badge--lg{padding:var(--space-1) var(--space-3);font-size:var(--font-size-sm)}.ea-badge--default{background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-badge--success{background-color:var(--color-success-subtle);color:var(--color-success-700)}.ea-badge--warning{background-color:var(--color-warning-subtle);color:var(--color-warning-700)}.ea-badge--error{background-color:var(--color-error-subtle);color:var(--color-error-700)}.ea-badge--info{background-color:var(--color-info-subtle);color:var(--color-info-700)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1139
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1140
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.7", type: BadgeComponent, isStandalone: true, selector: "ea-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n class=\"ea-badge\"\n [ngClass]=\"hostClasses()\">\n <ng-content />\n</span>\n", styles: [".ea-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;border-radius:var(--radius-full)}.ea-badge--sm{padding:var(--space-0-5) var(--space-2);font-size:var(--font-size-xs)}.ea-badge--md{padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-xs)}.ea-badge--lg{padding:var(--space-1) var(--space-3);font-size:var(--font-size-sm)}.ea-badge--default{background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-badge--success{background-color:var(--color-success-subtle);color:var(--color-success-700)}.ea-badge--warning{background-color:var(--color-warning-subtle);color:var(--color-warning-700)}.ea-badge--error{background-color:var(--color-error-subtle);color:var(--color-error-700)}.ea-badge--info{background-color:var(--color-info-subtle);color:var(--color-info-700)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1103
1141
  }
1104
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BadgeComponent, decorators: [{
1142
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: BadgeComponent, decorators: [{
1105
1143
  type: Component,
1106
1144
  args: [{ selector: 'ea-badge', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span\n class=\"ea-badge\"\n [ngClass]=\"hostClasses()\">\n <ng-content />\n</span>\n", styles: [".ea-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;border-radius:var(--radius-full)}.ea-badge--sm{padding:var(--space-0-5) var(--space-2);font-size:var(--font-size-xs)}.ea-badge--md{padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-xs)}.ea-badge--lg{padding:var(--space-1) var(--space-3);font-size:var(--font-size-sm)}.ea-badge--default{background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-badge--success{background-color:var(--color-success-subtle);color:var(--color-success-700)}.ea-badge--warning{background-color:var(--color-warning-subtle);color:var(--color-warning-700)}.ea-badge--error{background-color:var(--color-error-subtle);color:var(--color-error-700)}.ea-badge--info{background-color:var(--color-info-subtle);color:var(--color-info-700)}\n"] }]
1107
1145
  }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
@@ -1133,10 +1171,10 @@ class ButtonComponent {
1133
1171
  }
1134
1172
  this.clicked.emit(event);
1135
1173
  }
1136
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1137
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ButtonComponent, isStandalone: true, selector: "ea-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.ea-button--full-width": "fullWidth()" } }, ngImport: i0, template: "<button\n class=\"ea-button\"\n [ngClass]=\"hostClasses()\"\n [type]=\"type()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n (click)=\"handleClick($event)\">\n @if (loading()) {\n <span\n class=\"ea-button__spinner\"\n aria-hidden=\"true\">\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-dasharray=\"31.4\"\n stroke-dashoffset=\"10\" />\n </svg>\n </span>\n }\n\n <span\n class=\"ea-button__content\"\n [class.ea-button__content--hidden]=\"loading()\">\n <ng-content select=\"[slot=prefix]\" />\n <span class=\"ea-button__label\">\n <ng-content />\n </span>\n <ng-content select=\"[slot=suffix]\" />\n </span>\n</button>\n", styles: [".ea-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--inline-xs);position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);font-weight:var(--ea-button-font-weight, var(--font-weight-medium));letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-button--sm{padding:var(--space-1-5) var(--space-3);font-size:var(--ea-button-font-size, var(--font-size-sm));min-height:2rem}.ea-button--md{padding:var(--space-2) var(--space-4);font-size:var(--ea-button-font-size, var(--font-size-sm));min-height:2.5rem}.ea-button--lg{padding:var(--space-2-5) var(--space-6);font-size:var(--ea-button-font-size, var(--font-size-md));min-height:3rem}.ea-button--primary{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--color-brand-hover);border-color:var(--color-brand-hover)}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--color-brand-active);border-color:var(--color-brand-active)}.ea-button--secondary{background-color:transparent;border-color:var(--color-border-strong);color:var(--color-text-primary)}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--color-bg-muted);border-color:var(--color-neutral-500)}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--color-neutral-200)}.ea-button--ghost{background-color:transparent;border-color:transparent;color:var(--color-text-primary)}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--color-bg-muted)}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--color-neutral-200)}.ea-button--danger{background-color:var(--color-error-default);border-color:var(--color-error-default);color:var(--color-text-inverse)}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--color-error-700);border-color:var(--color-error-700)}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--color-error-700);border-color:var(--color-error-700);filter:brightness(.9)}.ea-button--full-width{width:100%}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:var(--inline-xs)}.ea-button__content--hidden{visibility:hidden}.ea-button__label{display:inline-flex;align-items:center}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}:host(.ea-button--full-width){display:block;width:100%}@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 });
1174
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1175
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: ButtonComponent, isStandalone: true, selector: "ea-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.ea-button--full-width": "fullWidth()" } }, ngImport: i0, template: "<button\n class=\"ea-button\"\n [ngClass]=\"hostClasses()\"\n [type]=\"type()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n (click)=\"handleClick($event)\">\n @if (loading()) {\n <span\n class=\"ea-button__spinner\"\n aria-hidden=\"true\">\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-dasharray=\"31.4\"\n stroke-dashoffset=\"10\" />\n </svg>\n </span>\n }\n\n <span\n class=\"ea-button__content\"\n [class.ea-button__content--hidden]=\"loading()\">\n <ng-content select=\"[slot=prefix]\" />\n <span class=\"ea-button__label\">\n <ng-content />\n </span>\n <ng-content select=\"[slot=suffix]\" />\n </span>\n</button>\n", styles: [".ea-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--inline-xs);position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);font-weight:var(--ea-button-font-weight, var(--font-weight-medium));letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-button--sm{padding:var(--space-1-5) var(--space-3);font-size:var(--ea-button-font-size, var(--font-size-sm));min-height:2rem}.ea-button--md{padding:var(--space-2) var(--space-4);font-size:var(--ea-button-font-size, var(--font-size-sm));min-height:2.5rem}.ea-button--lg{padding:var(--space-2-5) var(--space-6);font-size:var(--ea-button-font-size, var(--font-size-md));min-height:3rem}.ea-button--primary{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--color-brand-hover);border-color:var(--color-brand-hover)}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--color-brand-active);border-color:var(--color-brand-active)}.ea-button--secondary{background-color:transparent;border-color:var(--color-border-strong);color:var(--color-text-primary)}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--color-bg-muted);border-color:var(--color-neutral-500)}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--color-neutral-200)}.ea-button--ghost{background-color:transparent;border-color:transparent;color:var(--color-text-primary)}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--color-bg-muted)}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--color-neutral-200)}.ea-button--danger{background-color:var(--color-error-default);border-color:var(--color-error-default);color:var(--color-text-inverse)}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--color-error-700);border-color:var(--color-error-700)}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--color-error-700);border-color:var(--color-error-700);filter:brightness(.9)}.ea-button--full-width{width:100%}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:var(--inline-xs)}.ea-button__content--hidden{visibility:hidden}.ea-button__label{display:inline-flex;align-items:center}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}:host(.ea-button--full-width){display:block;width:100%}@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 });
1138
1176
  }
1139
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ButtonComponent, decorators: [{
1177
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ButtonComponent, decorators: [{
1140
1178
  type: Component,
1141
1179
  args: [{ selector: 'ea-button', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, host: {
1142
1180
  '[class.ea-button--full-width]': 'fullWidth()',
@@ -1155,12 +1193,12 @@ class CardComponent {
1155
1193
  [`ea-card--padding-${this.padding()}`]: true,
1156
1194
  'ea-card--full-width': this.fullWidth(),
1157
1195
  }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
1158
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1159
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: CardComponent, isStandalone: true, selector: "ea-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, headerAlign: { classPropertyName: "headerAlign", publicName: "headerAlign", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"ea-card\"\n [ngClass]=\"hostClasses()\">\n <div\n class=\"ea-card__header\"\n [style.text-align]=\"headerAlign()\">\n <ng-content select=\"[eaCardHeader]\" />\n </div>\n\n <div class=\"ea-card__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-card__footer\">\n <ng-content select=\"[eaCardFooter]\" />\n </div>\n</div>\n", styles: ["ea-card{display:block;min-height:0}.ea-card{display:flex;flex-direction:column;min-height:0;border-radius:var(--radius-lg);font-family:var(--font-family-sans);color:var(--color-text-primary);overflow:hidden}.ea-card--elevated{background-color:var(--color-bg-base);box-shadow:var(--ea-card-shadow, var(--shadow-md))}.ea-card--outlined{background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default)}.ea-card--filled{background-color:var(--color-bg-subtle)}.ea-card--padding-none .ea-card__header,.ea-card--padding-none .ea-card__body,.ea-card--padding-none .ea-card__footer{padding:0}.ea-card--padding-sm .ea-card__header{padding:var(--space-3) var(--space-3) 0}.ea-card--padding-sm .ea-card__body{padding:var(--space-3)}.ea-card--padding-sm .ea-card__footer{padding:0 var(--space-3) var(--space-3)}.ea-card--padding-md .ea-card__header{padding:var(--space-4) var(--space-4) 0}.ea-card--padding-md .ea-card__body{padding:var(--space-4)}.ea-card--padding-md .ea-card__footer{padding:0 var(--space-4) var(--space-4)}.ea-card--padding-lg .ea-card__header{padding:var(--space-6) var(--space-6) 0}.ea-card--padding-lg .ea-card__body{padding:var(--space-6)}.ea-card--padding-lg .ea-card__footer{padding:0 var(--space-6) var(--space-6)}.ea-card--padding-xl .ea-card__header{padding:var(--space-8) var(--space-8) 0}.ea-card--padding-xl .ea-card__body{padding:var(--space-8)}.ea-card--padding-xl .ea-card__footer{padding:0 var(--space-8) var(--space-8)}.ea-card--full-width{width:100%}.ea-card__header:empty,.ea-card__footer:empty{display:none}.ea-card__header{font-size:var(--text-label-lg-size);font-weight:var(--text-label-lg-weight);line-height:var(--text-label-lg-lh)}.ea-card__body{flex:1;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-card__footer{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.ea-card__footer>*{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1196
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1197
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.7", type: CardComponent, isStandalone: true, selector: "ea-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, headerAlign: { classPropertyName: "headerAlign", publicName: "headerAlign", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"ea-card\"\n [ngClass]=\"hostClasses()\">\n <div\n class=\"ea-card__header\"\n [style.text-align]=\"headerAlign()\">\n <ng-content select=\"[eaCardHeader]\" />\n </div>\n\n <div class=\"ea-card__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-card__footer\">\n <ng-content select=\"[eaCardFooter]\" />\n </div>\n</div>\n", styles: ["ea-card{display:block;min-height:0}.ea-card{display:flex;flex-direction:column;min-height:0;border-radius:var(--radius-lg);font-family:var(--font-family-sans);color:var(--color-text-primary);overflow:hidden}.ea-card--elevated{background-color:var(--color-bg-base);box-shadow:var(--ea-card-shadow, var(--shadow-md))}.ea-card--outlined{background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default)}.ea-card--filled{background-color:var(--color-bg-subtle)}.ea-card--padding-none .ea-card__header{padding:var(--ea-card-header-padding, 0)}.ea-card--padding-none .ea-card__body{padding:var(--ea-card-body-padding, 0)}.ea-card--padding-none .ea-card__footer{padding:var(--ea-card-footer-padding, 0)}.ea-card--padding-sm .ea-card__header{padding:var(--ea-card-header-padding, var(--space-3) var(--space-3) 0)}.ea-card--padding-sm .ea-card__body{padding:var(--ea-card-body-padding, var(--space-3))}.ea-card--padding-sm .ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-3) var(--space-3))}.ea-card--padding-md .ea-card__header{padding:var(--ea-card-header-padding, var(--space-4) var(--space-4) 0)}.ea-card--padding-md .ea-card__body{padding:var(--ea-card-body-padding, var(--space-4))}.ea-card--padding-md .ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-4) var(--space-4))}.ea-card--padding-lg .ea-card__header{padding:var(--ea-card-header-padding, var(--space-6) var(--space-6) 0)}.ea-card--padding-lg .ea-card__body{padding:var(--ea-card-body-padding, var(--space-6))}.ea-card--padding-lg .ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-6) var(--space-6))}.ea-card--padding-xl .ea-card__header{padding:var(--ea-card-header-padding, var(--space-8) var(--space-8) 0)}.ea-card--padding-xl .ea-card__body{padding:var(--ea-card-body-padding, var(--space-8))}.ea-card--padding-xl .ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-8) var(--space-8))}.ea-card--full-width{width:100%}.ea-card__header:empty,.ea-card__footer:empty{display:none}.ea-card__header{font-size:var(--text-label-lg-size);font-weight:var(--text-label-lg-weight);line-height:var(--text-label-lg-lh)}.ea-card__body{flex:1;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-card__footer{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.ea-card__footer>*{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1160
1198
  }
1161
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CardComponent, decorators: [{
1199
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CardComponent, decorators: [{
1162
1200
  type: Component,
1163
- args: [{ selector: 'ea-card', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ea-card\"\n [ngClass]=\"hostClasses()\">\n <div\n class=\"ea-card__header\"\n [style.text-align]=\"headerAlign()\">\n <ng-content select=\"[eaCardHeader]\" />\n </div>\n\n <div class=\"ea-card__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-card__footer\">\n <ng-content select=\"[eaCardFooter]\" />\n </div>\n</div>\n", styles: ["ea-card{display:block;min-height:0}.ea-card{display:flex;flex-direction:column;min-height:0;border-radius:var(--radius-lg);font-family:var(--font-family-sans);color:var(--color-text-primary);overflow:hidden}.ea-card--elevated{background-color:var(--color-bg-base);box-shadow:var(--ea-card-shadow, var(--shadow-md))}.ea-card--outlined{background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default)}.ea-card--filled{background-color:var(--color-bg-subtle)}.ea-card--padding-none .ea-card__header,.ea-card--padding-none .ea-card__body,.ea-card--padding-none .ea-card__footer{padding:0}.ea-card--padding-sm .ea-card__header{padding:var(--space-3) var(--space-3) 0}.ea-card--padding-sm .ea-card__body{padding:var(--space-3)}.ea-card--padding-sm .ea-card__footer{padding:0 var(--space-3) var(--space-3)}.ea-card--padding-md .ea-card__header{padding:var(--space-4) var(--space-4) 0}.ea-card--padding-md .ea-card__body{padding:var(--space-4)}.ea-card--padding-md .ea-card__footer{padding:0 var(--space-4) var(--space-4)}.ea-card--padding-lg .ea-card__header{padding:var(--space-6) var(--space-6) 0}.ea-card--padding-lg .ea-card__body{padding:var(--space-6)}.ea-card--padding-lg .ea-card__footer{padding:0 var(--space-6) var(--space-6)}.ea-card--padding-xl .ea-card__header{padding:var(--space-8) var(--space-8) 0}.ea-card--padding-xl .ea-card__body{padding:var(--space-8)}.ea-card--padding-xl .ea-card__footer{padding:0 var(--space-8) var(--space-8)}.ea-card--full-width{width:100%}.ea-card__header:empty,.ea-card__footer:empty{display:none}.ea-card__header{font-size:var(--text-label-lg-size);font-weight:var(--text-label-lg-weight);line-height:var(--text-label-lg-lh)}.ea-card__body{flex:1;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-card__footer{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.ea-card__footer>*{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}\n"] }]
1201
+ args: [{ selector: 'ea-card', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ea-card\"\n [ngClass]=\"hostClasses()\">\n <div\n class=\"ea-card__header\"\n [style.text-align]=\"headerAlign()\">\n <ng-content select=\"[eaCardHeader]\" />\n </div>\n\n <div class=\"ea-card__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-card__footer\">\n <ng-content select=\"[eaCardFooter]\" />\n </div>\n</div>\n", styles: ["ea-card{display:block;min-height:0}.ea-card{display:flex;flex-direction:column;min-height:0;border-radius:var(--radius-lg);font-family:var(--font-family-sans);color:var(--color-text-primary);overflow:hidden}.ea-card--elevated{background-color:var(--color-bg-base);box-shadow:var(--ea-card-shadow, var(--shadow-md))}.ea-card--outlined{background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default)}.ea-card--filled{background-color:var(--color-bg-subtle)}.ea-card--padding-none .ea-card__header{padding:var(--ea-card-header-padding, 0)}.ea-card--padding-none .ea-card__body{padding:var(--ea-card-body-padding, 0)}.ea-card--padding-none .ea-card__footer{padding:var(--ea-card-footer-padding, 0)}.ea-card--padding-sm .ea-card__header{padding:var(--ea-card-header-padding, var(--space-3) var(--space-3) 0)}.ea-card--padding-sm .ea-card__body{padding:var(--ea-card-body-padding, var(--space-3))}.ea-card--padding-sm .ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-3) var(--space-3))}.ea-card--padding-md .ea-card__header{padding:var(--ea-card-header-padding, var(--space-4) var(--space-4) 0)}.ea-card--padding-md .ea-card__body{padding:var(--ea-card-body-padding, var(--space-4))}.ea-card--padding-md .ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-4) var(--space-4))}.ea-card--padding-lg .ea-card__header{padding:var(--ea-card-header-padding, var(--space-6) var(--space-6) 0)}.ea-card--padding-lg .ea-card__body{padding:var(--ea-card-body-padding, var(--space-6))}.ea-card--padding-lg .ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-6) var(--space-6))}.ea-card--padding-xl .ea-card__header{padding:var(--ea-card-header-padding, var(--space-8) var(--space-8) 0)}.ea-card--padding-xl .ea-card__body{padding:var(--ea-card-body-padding, var(--space-8))}.ea-card--padding-xl .ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-8) var(--space-8))}.ea-card--full-width{width:100%}.ea-card__header:empty,.ea-card__footer:empty{display:none}.ea-card__header{font-size:var(--text-label-lg-size);font-weight:var(--text-label-lg-weight);line-height:var(--text-label-lg-lh)}.ea-card__body{flex:1;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-card__footer{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.ea-card__footer>*{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}\n"] }]
1164
1202
  }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], headerAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerAlign", required: false }] }] } });
1165
1203
 
1166
1204
  class CheckboxComponent {
@@ -1211,8 +1249,8 @@ class CheckboxComponent {
1211
1249
  this.onTouched();
1212
1250
  this.changed.emit(newValue);
1213
1251
  }
1214
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1215
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: CheckboxComponent, isStandalone: true, selector: "ea-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", changed: "changed" }, providers: [
1252
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1253
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: CheckboxComponent, isStandalone: true, selector: "ea-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", changed: "changed" }, providers: [
1216
1254
  {
1217
1255
  provide: NG_VALUE_ACCESSOR,
1218
1256
  useExisting: forwardRef(() => CheckboxComponent),
@@ -1220,7 +1258,7 @@ class CheckboxComponent {
1220
1258
  },
1221
1259
  ], ngImport: i0, template: "<label\n class=\"ea-checkbox\"\n [ngClass]=\"hostClasses()\"\n [for]=\"id()\">\n <input\n #inputEl\n type=\"checkbox\"\n class=\"ea-checkbox__input\"\n [id]=\"id()\"\n [checked]=\"checked()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [indeterminate]=\"indeterminate()\"\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n (change)=\"handleChange()\" />\n\n <span\n class=\"ea-checkbox__box\"\n aria-hidden=\"true\">\n @if (indeterminate()) {\n <svg\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M4 8h8\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\" />\n </svg>\n } @else if (checked()) {\n <svg\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n }\n </span>\n\n @if (label()) {\n <span class=\"ea-checkbox__label\">{{ label() }}</span>\n }\n</label>\n", styles: [".ea-checkbox{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-checkbox--sm .ea-checkbox__box{width:1rem;height:1rem;border-radius:var(--radius-sm)}.ea-checkbox--sm .ea-checkbox__label{font-size:var(--font-size-sm);line-height:1rem}.ea-checkbox--md .ea-checkbox__box{width:1.25rem;height:1.25rem;border-radius:var(--radius-sm)}.ea-checkbox--md .ea-checkbox__label{font-size:var(--font-size-sm);line-height:1.25rem}.ea-checkbox--lg .ea-checkbox__box{width:1.5rem;height:1.5rem;border-radius:var(--radius-sm)}.ea-checkbox--lg .ea-checkbox__label{font-size:var(--font-size-md);line-height:1.5rem}.ea-checkbox--disabled{opacity:.45;cursor:not-allowed}.ea-checkbox--checked .ea-checkbox__box,.ea-checkbox--indeterminate .ea-checkbox__box{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-checkbox:hover:not(.ea-checkbox--disabled) .ea-checkbox__box{border-color:var(--color-brand-default)}.ea-checkbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-checkbox__input:focus-visible+.ea-checkbox__box{box-shadow:var(--shadow-focus-ring)}.ea-checkbox__box{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-checkbox__box svg{position:absolute;width:65%;height:65%}.ea-checkbox__label{font-weight:var(--font-weight-regular)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1222
1260
  }
1223
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CheckboxComponent, decorators: [{
1261
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CheckboxComponent, decorators: [{
1224
1262
  type: Component,
1225
1263
  args: [{ selector: 'ea-checkbox', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
1226
1264
  {
@@ -1350,8 +1388,8 @@ class CodeInputComponent {
1350
1388
  focusDigit(index) {
1351
1389
  this.digitEls()[index]?.nativeElement.focus();
1352
1390
  }
1353
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CodeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1354
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: CodeInputComponent, isStandalone: true, selector: "ea-code-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", completed: "completed" }, providers: [
1391
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CodeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1392
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: CodeInputComponent, isStandalone: true, selector: "ea-code-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", completed: "completed" }, providers: [
1355
1393
  {
1356
1394
  provide: NG_VALUE_ACCESSOR,
1357
1395
  useExisting: forwardRef(() => CodeInputComponent),
@@ -1359,7 +1397,7 @@ class CodeInputComponent {
1359
1397
  },
1360
1398
  ], viewQueries: [{ propertyName: "digitEls", predicate: ["digitEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-code-input-field\">\n @if (label()) {\n <label\n class=\"ea-code-input-field__label\"\n [class.ea-code-input-field__label--required]=\"required()\"\n [id]=\"id() + '-label'\">\n {{ label() }}\n </label>\n }\n\n <div\n class=\"ea-code-input-group\"\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--error]=\"resolvedStatus() === 'error'\"\n [class.ea-code-input-group--success]=\"resolvedStatus() === 'success'\"\n [class.ea-code-input-group--disabled]=\"isDisabled()\"\n role=\"group\"\n [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\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\"\n [class.ea-code-input--filled]=\"digits()[i] !== ''\"\n type=\"text\"\n inputmode=\"numeric\"\n autocomplete=\"one-time-code\"\n maxlength=\"1\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [value]=\"digits()[i]\"\n [attr.aria-label]=\"'Digit ' + (i + 1) + ' of ' + length()\"\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 @if (showError()) {\n <p\n class=\"ea-code-input-field__message ea-code-input-field__message--error\"\n [id]=\"id() + '-error'\"\n role=\"alert\">\n {{ errorMsg() }}\n </p>\n }\n\n @if (showHint()) {\n <p\n class=\"ea-code-input-field__message ea-code-input-field__message--hint\"\n [id]=\"id() + '-hint'\">\n {{ hint() }}\n </p>\n }\n</div>\n", styles: [".ea-code-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-code-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-code-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-code-input-field__message{font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-code-input-field__message--hint{color:inherit}.ea-code-input-field__message--error{color:var(--color-error-default)}.ea-code-input-group{display:flex;gap:var(--space-2)}.ea-code-input-group--sm .ea-code-input{width:2rem;height:2.5rem;font-size:var(--font-size-md)}.ea-code-input-group--md .ea-code-input{width:2.5rem;height:3rem;font-size:var(--font-size-xl)}.ea-code-input-group--lg .ea-code-input{width:3rem;height:3.5rem;font-size:var(--font-size-2xl)}.ea-code-input-group--error .ea-code-input{border-color:var(--color-error-default)}.ea-code-input-group--error .ea-code-input--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-code-input-group--success .ea-code-input{border-color:var(--color-success-default)}.ea-code-input-group--success .ea-code-input--focused{box-shadow:var(--shadow-focus-ring-success)}.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:not-allowed}.ea-code-input{display:flex;align-items:center;justify-content:center;padding:0;font-weight:var(--font-weight-semibold);text-align:center;font-family:var(--font-family-sans);line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);outline:none;color:var(--color-text-primary);caret-color:transparent;transition:var(--transition-colors),var(--transition-shadow)}.ea-code-input::placeholder{color:var(--color-text-tertiary)}.ea-code-input--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-code-input--filled{border-color:var(--color-border-strong)}.ea-code-input:disabled{cursor:not-allowed}.ea-code-input::-webkit-outer-spin-button,.ea-code-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1361
1399
  }
1362
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CodeInputComponent, decorators: [{
1400
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CodeInputComponent, decorators: [{
1363
1401
  type: Component,
1364
1402
  args: [{ selector: 'ea-code-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
1365
1403
  {
@@ -1424,10 +1462,10 @@ class DialogComponent {
1424
1462
  }
1425
1463
  this.handleClose();
1426
1464
  }
1427
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1428
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DialogComponent, isStandalone: true, selector: "ea-dialog", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "dialogEl", first: true, predicate: ["dialogEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n #dialogEl\n class=\"ea-dialog\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"handleBackdropClick($event)\"\n (cancel)=\"handleCancel($event)\">\n <div\n class=\"ea-dialog__panel\"\n [ngClass]=\"panelClasses()\">\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"ea-dialog__close\"\n aria-label=\"Close dialog\"\n (click)=\"handleClose()\">\n <ea-icon-x />\n </button>\n }\n\n <div class=\"ea-dialog__header\">\n <ng-content select=\"[slot=header]\" />\n </div>\n\n <div class=\"ea-dialog__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-dialog__footer\">\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n</dialog>\n", styles: [".ea-dialog{border:none;background:transparent;padding:0;margin:auto;max-width:none;max-height:none;overflow:visible}.ea-dialog::backdrop{background-color:var(--color-bg-overlay)}.ea-dialog__panel{position:relative;display:flex;flex-direction:column;background-color:var(--color-bg-base);border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}.ea-dialog__panel--sm{width:24rem}.ea-dialog__panel--md{width:32rem}.ea-dialog__panel--lg{width:42rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{position:absolute;top:var(--space-3);right:var(--space-3);display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors);z-index:1}.ea-dialog__close:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dialog__close svg{width:1rem;height:1rem}.ea-dialog__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__header:empty{display:none}.ea-dialog__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-dialog__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-dialog__footer:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1465
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1466
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: DialogComponent, isStandalone: true, selector: "ea-dialog", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "dialogEl", first: true, predicate: ["dialogEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n #dialogEl\n class=\"ea-dialog\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"handleBackdropClick($event)\"\n (cancel)=\"handleCancel($event)\">\n <div\n class=\"ea-dialog__panel\"\n [ngClass]=\"panelClasses()\">\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"ea-dialog__close\"\n aria-label=\"Close dialog\"\n (click)=\"handleClose()\">\n <ea-icon-x />\n </button>\n }\n\n <div class=\"ea-dialog__header\">\n <ng-content select=\"[slot=header]\" />\n </div>\n\n <div class=\"ea-dialog__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-dialog__footer\">\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n</dialog>\n", styles: [".ea-dialog{border:none;background:transparent;padding:0;margin:auto;max-width:none;max-height:none;overflow:visible}.ea-dialog::backdrop{background-color:var(--color-bg-overlay)}.ea-dialog__panel{position:relative;display:flex;flex-direction:column;background-color:var(--color-bg-base);border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}.ea-dialog__panel--sm{width:24rem}.ea-dialog__panel--md{width:32rem}.ea-dialog__panel--lg{width:42rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{position:absolute;top:var(--space-3);right:var(--space-3);display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors);z-index:1}.ea-dialog__close:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dialog__close svg{width:1rem;height:1rem}.ea-dialog__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__header:empty{display:none}.ea-dialog__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-dialog__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-dialog__footer:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1429
1467
  }
1430
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DialogComponent, decorators: [{
1468
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: DialogComponent, decorators: [{
1431
1469
  type: Component,
1432
1470
  args: [{ selector: 'ea-dialog', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dialog\n #dialogEl\n class=\"ea-dialog\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"handleBackdropClick($event)\"\n (cancel)=\"handleCancel($event)\">\n <div\n class=\"ea-dialog__panel\"\n [ngClass]=\"panelClasses()\">\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"ea-dialog__close\"\n aria-label=\"Close dialog\"\n (click)=\"handleClose()\">\n <ea-icon-x />\n </button>\n }\n\n <div class=\"ea-dialog__header\">\n <ng-content select=\"[slot=header]\" />\n </div>\n\n <div class=\"ea-dialog__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-dialog__footer\">\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n</dialog>\n", styles: [".ea-dialog{border:none;background:transparent;padding:0;margin:auto;max-width:none;max-height:none;overflow:visible}.ea-dialog::backdrop{background-color:var(--color-bg-overlay)}.ea-dialog__panel{position:relative;display:flex;flex-direction:column;background-color:var(--color-bg-base);border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}.ea-dialog__panel--sm{width:24rem}.ea-dialog__panel--md{width:32rem}.ea-dialog__panel--lg{width:42rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{position:absolute;top:var(--space-3);right:var(--space-3);display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors);z-index:1}.ea-dialog__close:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dialog__close svg{width:1rem;height:1rem}.ea-dialog__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__header:empty{display:none}.ea-dialog__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-dialog__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-dialog__footer:empty{display:none}\n"] }]
1433
1471
  }], ctorParameters: () => [], propDecorators: { dialogEl: [{ type: i0.ViewChild, args: ['dialogEl', { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
@@ -1439,10 +1477,10 @@ class DividerComponent {
1439
1477
  [`ea-divider--${this.orientation()}`]: true,
1440
1478
  'ea-divider--with-label': !!this.label(),
1441
1479
  }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
1442
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1443
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DividerComponent, isStandalone: true, selector: "ea-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"ea-divider\"\n [ngClass]=\"hostClasses()\"\n [attr.role]=\"'separator'\"\n [attr.aria-orientation]=\"orientation()\">\n @if (label()) {\n <span class=\"ea-divider__label\">{{ label() }}</span>\n }\n</div>\n", styles: [".ea-divider{flex-shrink:0;border:0;font-family:var(--font-family-sans)}.ea-divider--horizontal{display:flex;align-items:center;width:100%;height:1px;background-color:var(--color-border-default)}.ea-divider--vertical{display:inline-block;width:1px;height:100%;min-height:1rem;background-color:var(--color-border-default)}.ea-divider--with-label{height:auto;background-color:transparent;gap:var(--space-3)}.ea-divider--with-label:before,.ea-divider--with-label:after{content:\"\";flex:1;height:1px;background-color:var(--color-border-default)}.ea-divider__label{flex-shrink:0;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary);white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1480
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1481
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: DividerComponent, isStandalone: true, selector: "ea-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"ea-divider\"\n [ngClass]=\"hostClasses()\"\n [attr.role]=\"'separator'\"\n [attr.aria-orientation]=\"orientation()\">\n @if (label()) {\n <span class=\"ea-divider__label\">{{ label() }}</span>\n }\n</div>\n", styles: [".ea-divider{flex-shrink:0;border:0;font-family:var(--font-family-sans)}.ea-divider--horizontal{display:flex;align-items:center;width:100%;height:1px;background-color:var(--color-border-default)}.ea-divider--vertical{display:inline-block;width:1px;height:100%;min-height:1rem;background-color:var(--color-border-default)}.ea-divider--with-label{height:auto;background-color:transparent;gap:var(--space-3)}.ea-divider--with-label:before,.ea-divider--with-label:after{content:\"\";flex:1;height:1px;background-color:var(--color-border-default)}.ea-divider__label{flex-shrink:0;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary);white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1444
1482
  }
1445
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DividerComponent, decorators: [{
1483
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: DividerComponent, decorators: [{
1446
1484
  type: Component,
1447
1485
  args: [{ selector: 'ea-divider', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ea-divider\"\n [ngClass]=\"hostClasses()\"\n [attr.role]=\"'separator'\"\n [attr.aria-orientation]=\"orientation()\">\n @if (label()) {\n <span class=\"ea-divider__label\">{{ label() }}</span>\n }\n</div>\n", styles: [".ea-divider{flex-shrink:0;border:0;font-family:var(--font-family-sans)}.ea-divider--horizontal{display:flex;align-items:center;width:100%;height:1px;background-color:var(--color-border-default)}.ea-divider--vertical{display:inline-block;width:1px;height:100%;min-height:1rem;background-color:var(--color-border-default)}.ea-divider--with-label{height:auto;background-color:transparent;gap:var(--space-3)}.ea-divider--with-label:before,.ea-divider--with-label:after{content:\"\";flex:1;height:1px;background-color:var(--color-border-default)}.ea-divider__label{flex-shrink:0;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary);white-space:nowrap}\n"] }]
1448
1486
  }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
@@ -1583,8 +1621,8 @@ class DropdownComponent {
1583
1621
  this.onTouched();
1584
1622
  }
1585
1623
  }
1586
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1587
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DropdownComponent, isStandalone: true, selector: "ea-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
1624
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1625
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: DropdownComponent, isStandalone: true, selector: "ea-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
1588
1626
  {
1589
1627
  provide: NG_VALUE_ACCESSOR,
1590
1628
  useExisting: forwardRef(() => DropdownComponent),
@@ -1592,7 +1630,7 @@ class DropdownComponent {
1592
1630
  },
1593
1631
  ], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-dropdown-field\">\n @if (label()) {\n <label\n class=\"ea-dropdown-field__label\"\n [for]=\"id()\"\n [class.ea-dropdown-field__label--required]=\"required()\">\n {{ label() }}\n </label>\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 [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-labelledby]=\"label() ? id() : null\"\n (click)=\"toggle()\"\n (keydown)=\"handleKeydown($event)\">\n <span\n class=\"ea-dropdown__value\"\n [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n {{ selectedLabel() || placeholder() }}\n </span>\n <ea-icon-chevron-down\n class=\"ea-dropdown__chevron\"\n [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n </button>\n\n @if (isOpen()) {\n <ul\n class=\"ea-dropdown__menu\"\n role=\"listbox\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n \">\n @for (option of options(); track option.value; let i = $index) {\n <li\n class=\"ea-dropdown__option\"\n [class.ea-dropdown__option--selected]=\"option.value === value()\"\n [class.ea-dropdown__option--focused]=\"i === focusedIndex()\"\n [class.ea-dropdown__option--disabled]=\"option.disabled\"\n [id]=\"id() + '-option-' + i\"\n role=\"option\"\n [attr.aria-selected]=\"option.value === value()\"\n [attr.aria-disabled]=\"option.disabled || null\"\n (click)=\"select(option)\"\n (mouseenter)=\"focusedIndex.set(i)\">\n {{ option.label }}\n </li>\n }\n </ul>\n }\n </div>\n\n @if (showError()) {\n <p\n class=\"ea-dropdown-field__message ea-dropdown-field__message--error\"\n [id]=\"id() + '-error'\"\n role=\"alert\">\n {{ errorMsg() }}\n </p>\n }\n\n @if (showHint()) {\n <p\n class=\"ea-dropdown-field__message ea-dropdown-field__message--hint\"\n [id]=\"id() + '-hint'\">\n {{ hint() }}\n </p>\n }\n</div>\n", styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-dropdown-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-dropdown-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-dropdown-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-dropdown-field__message--hint{color:var(--color-text-secondary)}.ea-dropdown-field__message--error{color:var(--color-error-default)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;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);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-dropdown__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-dropdown__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{box-shadow:var(--shadow-focus-ring-error)}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{color:var(--color-text-tertiary)}.ea-dropdown__chevron{width:1em;height:1em;flex-shrink:0;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{position:absolute;top:calc(100% + var(--space-1));left:0;right:0;z-index:var(--z-index-dropdown);max-height:15rem;overflow-y:auto;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-1) 0;margin:0;list-style:none}.ea-dropdown__option{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);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-bg-muted)}.ea-dropdown__option--selected{color:var(--color-brand-default);font-weight:var(--font-weight-medium)}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1594
1632
  }
1595
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DropdownComponent, decorators: [{
1633
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: DropdownComponent, decorators: [{
1596
1634
  type: Component,
1597
1635
  args: [{ selector: 'ea-dropdown', imports: [NgClass, ChevronDownIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
1598
1636
  {
@@ -1607,8 +1645,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
1607
1645
  }] } });
1608
1646
 
1609
1647
  class EyeOffIconComponent {
1610
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EyeOffIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1611
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: EyeOffIconComponent, isStandalone: true, selector: "ea-icon-eye-off", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
1648
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: EyeOffIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1649
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: EyeOffIconComponent, isStandalone: true, selector: "ea-icon-eye-off", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
1612
1650
  <svg
1613
1651
  viewBox="0 0 24 24"
1614
1652
  fill="none"
@@ -1629,7 +1667,7 @@ class EyeOffIconComponent {
1629
1667
  </svg>
1630
1668
  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1631
1669
  }
1632
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EyeOffIconComponent, decorators: [{
1670
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: EyeOffIconComponent, decorators: [{
1633
1671
  type: Component,
1634
1672
  args: [{
1635
1673
  selector: 'ea-icon-eye-off',
@@ -1659,8 +1697,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
1659
1697
  }] });
1660
1698
 
1661
1699
  class EyeIconComponent {
1662
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EyeIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1663
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: EyeIconComponent, isStandalone: true, selector: "ea-icon-eye", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
1700
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: EyeIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1701
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: EyeIconComponent, isStandalone: true, selector: "ea-icon-eye", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
1664
1702
  <svg
1665
1703
  viewBox="0 0 24 24"
1666
1704
  fill="none"
@@ -1679,7 +1717,7 @@ class EyeIconComponent {
1679
1717
  </svg>
1680
1718
  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1681
1719
  }
1682
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EyeIconComponent, decorators: [{
1720
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: EyeIconComponent, decorators: [{
1683
1721
  type: Component,
1684
1722
  args: [{
1685
1723
  selector: 'ea-icon-eye',
@@ -1707,8 +1745,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
1707
1745
  }] });
1708
1746
 
1709
1747
  class GoogleIconComponent {
1710
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GoogleIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1711
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: GoogleIconComponent, isStandalone: true, selector: "ea-icon-google", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
1748
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: GoogleIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1749
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: GoogleIconComponent, isStandalone: true, selector: "ea-icon-google", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
1712
1750
  <svg
1713
1751
  viewBox="0 0 24 24"
1714
1752
  aria-hidden="true"
@@ -1729,7 +1767,7 @@ class GoogleIconComponent {
1729
1767
  </svg>
1730
1768
  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1731
1769
  }
1732
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GoogleIconComponent, decorators: [{
1770
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: GoogleIconComponent, decorators: [{
1733
1771
  type: Component,
1734
1772
  args: [{
1735
1773
  selector: 'ea-icon-google',
@@ -1759,8 +1797,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
1759
1797
  }] });
1760
1798
 
1761
1799
  class LoaderIconComponent {
1762
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: LoaderIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1763
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: LoaderIconComponent, isStandalone: true, selector: "ea-icon-loader", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
1800
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: LoaderIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1801
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: LoaderIconComponent, isStandalone: true, selector: "ea-icon-loader", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
1764
1802
  <svg
1765
1803
  viewBox="0 0 24 24"
1766
1804
  fill="none"
@@ -1814,7 +1852,7 @@ class LoaderIconComponent {
1814
1852
  </svg>
1815
1853
  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1816
1854
  }
1817
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: LoaderIconComponent, decorators: [{
1855
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: LoaderIconComponent, decorators: [{
1818
1856
  type: Component,
1819
1857
  args: [{
1820
1858
  selector: 'ea-icon-loader',
@@ -1956,16 +1994,16 @@ class InputComponent {
1956
1994
  focus() {
1957
1995
  this.inputEl()?.nativeElement.focus();
1958
1996
  }
1959
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1960
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: InputComponent, isStandalone: true, selector: "ea-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, showPasswordToggle: { classPropertyName: "showPasswordToggle", publicName: "showPasswordToggle", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", inputFocused: "inputFocused", inputBlurred: "inputBlurred" }, providers: [
1997
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1998
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: InputComponent, isStandalone: true, selector: "ea-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, showPasswordToggle: { classPropertyName: "showPasswordToggle", publicName: "showPasswordToggle", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", inputFocused: "inputFocused", inputBlurred: "inputBlurred" }, providers: [
1961
1999
  {
1962
2000
  provide: NG_VALUE_ACCESSOR,
1963
2001
  useExisting: forwardRef(() => InputComponent),
1964
2002
  multi: true,
1965
2003
  },
1966
- ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-input-field\">\n @if (label()) {\n <label\n class=\"ea-input-field__label\"\n [for]=\"id()\"\n [class.ea-input-field__label--required]=\"required()\">\n {{ label() }}\n </label>\n }\n\n <div\n class=\"ea-input-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <!-- Prefix slot (icon or text) -->\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 [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.aria-invalid]=\"resolvedStatus() === 'error' || 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\n <!-- Suffix slot (icon, clear button, etc.) -->\n <span class=\"ea-input-wrapper__suffix\">\n <ng-content select=\"[slot=suffix]\" />\n </span>\n\n <!-- Built-in password visibility toggle -->\n @if (type() === 'password' && showPasswordToggle()) {\n <button\n type=\"button\"\n class=\"ea-input-wrapper__password-toggle\"\n [attr.aria-label]=\"passwordVisible() ? 'Hide password' : 'Show password'\"\n [attr.aria-pressed]=\"passwordVisible()\"\n (click)=\"togglePasswordVisibility()\"\n tabindex=\"-1\">\n @if (passwordVisible()) {\n <ea-icon-eye-off />\n } @else {\n <ea-icon-eye />\n }\n </button>\n }\n </div>\n\n @if (showError()) {\n <p\n class=\"ea-input-field__message ea-input-field__message--error\"\n [id]=\"id() + '-error'\"\n role=\"alert\">\n <ea-icon-alert-circle class=\"ea-input-field__message-icon\" />\n {{ errorMsg() }}\n </p>\n }\n\n @if (showHint()) {\n <p\n class=\"ea-input-field__message ea-input-field__message--hint\"\n [id]=\"id() + '-hint'\">\n {{ hint() }}\n </p>\n }\n</div>\n", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-input-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-input-field__message--hint{color:inherit}.ea-input-field__message--error{color:var(--color-error-default)}.ea-input-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-input-wrapper{display:flex;align-items:center;gap:var(--space-2);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--sm{padding:0 var(--space-2);min-height:2rem}.ea-input-wrapper--sm .ea-input{font-size:var(--font-size-sm);padding:var(--space-1-5) 0}.ea-input-wrapper--md{padding:0 var(--space-3);min-height:2.5rem}.ea-input-wrapper--md .ea-input{font-size:var(--font-size-md);padding:var(--space-2) 0}.ea-input-wrapper--lg{padding:0 var(--space-4);min-height:3rem}.ea-input-wrapper--lg .ea-input{font-size:var(--font-size-lg);padding:var(--space-2-5) 0}.ea-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-input-wrapper--success{border-color:var(--color-success-default)}.ea-input-wrapper--success.ea-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-success)}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:inherit}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input-wrapper__password-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;cursor:pointer;color:inherit;border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-input-wrapper__password-toggle:hover{color:var(--color-text-primary)}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1rem;height:1rem;pointer-events:none}.ea-input{flex:1;width:100%;min-width:0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{color:var(--color-text-tertiary)}.ea-input:-webkit-autofill,.ea-input:autofill{-webkit-text-fill-color:var(--color-text-primary);-webkit-box-shadow:0 0 0 1000px var(--color-bg-base) inset;transition:background-color 5000s ease-in-out 0s}.ea-input:disabled{cursor:not-allowed}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EyeIconComponent, selector: "ea-icon-eye" }, { kind: "component", type: EyeOffIconComponent, selector: "ea-icon-eye-off" }, { kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2004
+ ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-input-field\">\n @if (label()) {\n <label\n class=\"ea-input-field__label\"\n [for]=\"id()\"\n [class.ea-input-field__label--required]=\"required()\">\n {{ label() }}\n </label>\n }\n\n <div\n class=\"ea-input-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <!-- Prefix slot (icon or text) -->\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 [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.aria-invalid]=\"resolvedStatus() === 'error' || 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\n <!-- Suffix slot (icon, clear button, etc.) -->\n <span class=\"ea-input-wrapper__suffix\">\n <ng-content select=\"[slot=suffix]\" />\n </span>\n\n <!-- Built-in password visibility toggle -->\n @if (type() === 'password' && showPasswordToggle()) {\n <button\n type=\"button\"\n class=\"ea-input-wrapper__password-toggle\"\n [attr.aria-label]=\"passwordVisible() ? 'Hide password' : 'Show password'\"\n [attr.aria-pressed]=\"passwordVisible()\"\n (click)=\"togglePasswordVisibility()\"\n tabindex=\"-1\">\n @if (passwordVisible()) {\n <ea-icon-eye-off />\n } @else {\n <ea-icon-eye />\n }\n </button>\n }\n </div>\n\n @if (showError()) {\n <p\n class=\"ea-input-field__message ea-input-field__message--error\"\n [id]=\"id() + '-error'\"\n role=\"alert\">\n <ea-icon-alert-circle class=\"ea-input-field__message-icon\" />\n {{ errorMsg() }}\n </p>\n }\n\n @if (showHint()) {\n <p\n class=\"ea-input-field__message ea-input-field__message--hint\"\n [id]=\"id() + '-hint'\">\n {{ hint() }}\n </p>\n }\n</div>\n", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-input-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-input-field__message--hint{color:inherit}.ea-input-field__message--error{color:var(--color-error-default)}.ea-input-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-input-wrapper{display:flex;align-items:center;gap:var(--space-2);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--sm{padding:0 var(--space-2);min-height:2rem}.ea-input-wrapper--sm .ea-input{font-size:var(--font-size-sm);padding:var(--space-1-5) 0}.ea-input-wrapper--md{padding:0 var(--space-3);min-height:2.5rem}.ea-input-wrapper--md .ea-input{font-size:var(--font-size-md);padding:var(--space-2) 0}.ea-input-wrapper--lg{padding:0 var(--space-4);min-height:3rem}.ea-input-wrapper--lg .ea-input{font-size:var(--font-size-lg);padding:var(--space-2-5) 0}.ea-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-input-wrapper--success{border-color:var(--color-success-default)}.ea-input-wrapper--success.ea-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-success)}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:inherit}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input-wrapper__password-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;cursor:pointer;color:var(--ea-input-toggle-color, inherit);border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-input-wrapper__password-toggle:hover{color:var(--color-text-primary)}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1rem;height:1rem;pointer-events:none}.ea-input{flex:1;width:100%;min-width:0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{color:var(--color-text-tertiary)}.ea-input:-webkit-autofill,.ea-input:autofill{-webkit-text-fill-color:var(--color-text-primary);-webkit-box-shadow:0 0 0 1000px var(--color-bg-base) inset;transition:background-color 5000s ease-in-out 0s}.ea-input:disabled{cursor:not-allowed}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EyeIconComponent, selector: "ea-icon-eye" }, { kind: "component", type: EyeOffIconComponent, selector: "ea-icon-eye-off" }, { kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1967
2005
  }
1968
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: InputComponent, decorators: [{
2006
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: InputComponent, decorators: [{
1969
2007
  type: Component,
1970
2008
  args: [{ selector: 'ea-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, EyeIconComponent, EyeOffIconComponent, AlertCircleIconComponent], providers: [
1971
2009
  {
@@ -1973,9 +2011,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
1973
2011
  useExisting: forwardRef(() => InputComponent),
1974
2012
  multi: true,
1975
2013
  },
1976
- ], template: "<div class=\"ea-input-field\">\n @if (label()) {\n <label\n class=\"ea-input-field__label\"\n [for]=\"id()\"\n [class.ea-input-field__label--required]=\"required()\">\n {{ label() }}\n </label>\n }\n\n <div\n class=\"ea-input-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <!-- Prefix slot (icon or text) -->\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 [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.aria-invalid]=\"resolvedStatus() === 'error' || 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\n <!-- Suffix slot (icon, clear button, etc.) -->\n <span class=\"ea-input-wrapper__suffix\">\n <ng-content select=\"[slot=suffix]\" />\n </span>\n\n <!-- Built-in password visibility toggle -->\n @if (type() === 'password' && showPasswordToggle()) {\n <button\n type=\"button\"\n class=\"ea-input-wrapper__password-toggle\"\n [attr.aria-label]=\"passwordVisible() ? 'Hide password' : 'Show password'\"\n [attr.aria-pressed]=\"passwordVisible()\"\n (click)=\"togglePasswordVisibility()\"\n tabindex=\"-1\">\n @if (passwordVisible()) {\n <ea-icon-eye-off />\n } @else {\n <ea-icon-eye />\n }\n </button>\n }\n </div>\n\n @if (showError()) {\n <p\n class=\"ea-input-field__message ea-input-field__message--error\"\n [id]=\"id() + '-error'\"\n role=\"alert\">\n <ea-icon-alert-circle class=\"ea-input-field__message-icon\" />\n {{ errorMsg() }}\n </p>\n }\n\n @if (showHint()) {\n <p\n class=\"ea-input-field__message ea-input-field__message--hint\"\n [id]=\"id() + '-hint'\">\n {{ hint() }}\n </p>\n }\n</div>\n", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-input-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-input-field__message--hint{color:inherit}.ea-input-field__message--error{color:var(--color-error-default)}.ea-input-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-input-wrapper{display:flex;align-items:center;gap:var(--space-2);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--sm{padding:0 var(--space-2);min-height:2rem}.ea-input-wrapper--sm .ea-input{font-size:var(--font-size-sm);padding:var(--space-1-5) 0}.ea-input-wrapper--md{padding:0 var(--space-3);min-height:2.5rem}.ea-input-wrapper--md .ea-input{font-size:var(--font-size-md);padding:var(--space-2) 0}.ea-input-wrapper--lg{padding:0 var(--space-4);min-height:3rem}.ea-input-wrapper--lg .ea-input{font-size:var(--font-size-lg);padding:var(--space-2-5) 0}.ea-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-input-wrapper--success{border-color:var(--color-success-default)}.ea-input-wrapper--success.ea-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-success)}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:inherit}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input-wrapper__password-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;cursor:pointer;color:inherit;border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-input-wrapper__password-toggle:hover{color:var(--color-text-primary)}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1rem;height:1rem;pointer-events:none}.ea-input{flex:1;width:100%;min-width:0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{color:var(--color-text-tertiary)}.ea-input:-webkit-autofill,.ea-input:autofill{-webkit-text-fill-color:var(--color-text-primary);-webkit-box-shadow:0 0 0 1000px var(--color-bg-base) inset;transition:background-color 5000s ease-in-out 0s}.ea-input:disabled{cursor:not-allowed}.ea-input[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"] }]
2014
+ ], template: "<div class=\"ea-input-field\">\n @if (label()) {\n <label\n class=\"ea-input-field__label\"\n [for]=\"id()\"\n [class.ea-input-field__label--required]=\"required()\">\n {{ label() }}\n </label>\n }\n\n <div\n class=\"ea-input-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <!-- Prefix slot (icon or text) -->\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 [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.aria-invalid]=\"resolvedStatus() === 'error' || 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\n <!-- Suffix slot (icon, clear button, etc.) -->\n <span class=\"ea-input-wrapper__suffix\">\n <ng-content select=\"[slot=suffix]\" />\n </span>\n\n <!-- Built-in password visibility toggle -->\n @if (type() === 'password' && showPasswordToggle()) {\n <button\n type=\"button\"\n class=\"ea-input-wrapper__password-toggle\"\n [attr.aria-label]=\"passwordVisible() ? 'Hide password' : 'Show password'\"\n [attr.aria-pressed]=\"passwordVisible()\"\n (click)=\"togglePasswordVisibility()\"\n tabindex=\"-1\">\n @if (passwordVisible()) {\n <ea-icon-eye-off />\n } @else {\n <ea-icon-eye />\n }\n </button>\n }\n </div>\n\n @if (showError()) {\n <p\n class=\"ea-input-field__message ea-input-field__message--error\"\n [id]=\"id() + '-error'\"\n role=\"alert\">\n <ea-icon-alert-circle class=\"ea-input-field__message-icon\" />\n {{ errorMsg() }}\n </p>\n }\n\n @if (showHint()) {\n <p\n class=\"ea-input-field__message ea-input-field__message--hint\"\n [id]=\"id() + '-hint'\">\n {{ hint() }}\n </p>\n }\n</div>\n", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-input-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-input-field__message--hint{color:inherit}.ea-input-field__message--error{color:var(--color-error-default)}.ea-input-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-input-wrapper{display:flex;align-items:center;gap:var(--space-2);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--sm{padding:0 var(--space-2);min-height:2rem}.ea-input-wrapper--sm .ea-input{font-size:var(--font-size-sm);padding:var(--space-1-5) 0}.ea-input-wrapper--md{padding:0 var(--space-3);min-height:2.5rem}.ea-input-wrapper--md .ea-input{font-size:var(--font-size-md);padding:var(--space-2) 0}.ea-input-wrapper--lg{padding:0 var(--space-4);min-height:3rem}.ea-input-wrapper--lg .ea-input{font-size:var(--font-size-lg);padding:var(--space-2-5) 0}.ea-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-input-wrapper--success{border-color:var(--color-success-default)}.ea-input-wrapper--success.ea-input-wrapper--focused{box-shadow:var(--shadow-focus-ring-success)}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:inherit}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input-wrapper__password-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;cursor:pointer;color:var(--ea-input-toggle-color, inherit);border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-input-wrapper__password-toggle:hover{color:var(--color-text-primary)}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1rem;height:1rem;pointer-events:none}.ea-input{flex:1;width:100%;min-width:0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{color:var(--color-text-tertiary)}.ea-input:-webkit-autofill,.ea-input:autofill{-webkit-text-fill-color:var(--color-text-primary);-webkit-box-shadow:0 0 0 1000px var(--color-bg-base) inset;transition:background-color 5000s ease-in-out 0s}.ea-input:disabled{cursor:not-allowed}.ea-input[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"] }]
1977
2015
  }], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], showPasswordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordToggle", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputFocused: [{ type: i0.Output, args: ["inputFocused"] }], inputBlurred: [{ type: i0.Output, args: ["inputBlurred"] }] } });
1978
2016
 
2017
+ class ProgressBarComponent {
2018
+ value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
2019
+ max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
2020
+ variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
2021
+ size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
2022
+ label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
2023
+ showValue = input(false, ...(ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []));
2024
+ indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
2025
+ percentage = computed(() => {
2026
+ const max = this.max();
2027
+ if (max <= 0)
2028
+ return 0;
2029
+ return Math.min(100, Math.max(0, (this.value() / max) * 100));
2030
+ }, ...(ngDevMode ? [{ debugName: "percentage" }] : /* istanbul ignore next */ []));
2031
+ percentageRounded = computed(() => Math.round(this.percentage()), ...(ngDevMode ? [{ debugName: "percentageRounded" }] : /* istanbul ignore next */ []));
2032
+ hostClasses = computed(() => ({
2033
+ [`ea-progress-bar--${this.variant()}`]: true,
2034
+ [`ea-progress-bar--${this.size()}`]: true,
2035
+ 'ea-progress-bar--indeterminate': this.indeterminate(),
2036
+ }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
2037
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2038
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: ProgressBarComponent, isStandalone: true, selector: "ea-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"ea-progress-bar\"\n [ngClass]=\"hostClasses()\">\n @if (label() || showValue()) {\n <div class=\"ea-progress-bar__header\">\n @if (label()) {\n <span class=\"ea-progress-bar__label\">{{ label() }}</span>\n }\n @if (showValue() && !indeterminate()) {\n <span class=\"ea-progress-bar__value\">{{ percentageRounded() }}%</span>\n }\n </div>\n }\n <div\n class=\"ea-progress-bar__track\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"indeterminate() ? null : percentageRounded()\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-label]=\"label() || 'Progress'\">\n <div\n class=\"ea-progress-bar__fill\"\n [style.width]=\"indeterminate() ? null : percentage() + '%'\"></div>\n </div>\n</div>\n", styles: [".ea-progress-bar{display:flex;flex-direction:column;gap:var(--space-1-5);font-family:var(--font-family-sans)}.ea-progress-bar__header{display:flex;justify-content:space-between;align-items:baseline}.ea-progress-bar__label{font-size:var(--text-label-sm-size);font-weight:var(--text-label-sm-weight);line-height:var(--text-label-sm-lh);color:var(--color-text-primary)}.ea-progress-bar__value{font-size:var(--text-label-sm-size);font-weight:var(--text-label-sm-weight);line-height:var(--text-label-sm-lh);color:var(--color-text-secondary)}.ea-progress-bar__track{overflow:hidden;border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-progress-bar__fill{height:100%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transition:width var(--duration-slow) var(--ease-out)}.ea-progress-bar--sm .ea-progress-bar__track{height:.25rem}.ea-progress-bar--md .ea-progress-bar__track{height:.375rem}.ea-progress-bar--lg .ea-progress-bar__track{height:.5rem}.ea-progress-bar--success .ea-progress-bar__fill{background-color:var(--color-success-default)}.ea-progress-bar--warning .ea-progress-bar__fill{background-color:var(--color-warning-default)}.ea-progress-bar--error .ea-progress-bar__fill{background-color:var(--color-error-default)}.ea-progress-bar--info .ea-progress-bar__fill{background-color:var(--color-info-default)}.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:40%;transition:none;animation:ea-progress-indeterminate 1.5s var(--ease-in-out) infinite}@keyframes ea-progress-indeterminate{0%{transform:translate(-110%)}to{transform:translate(260%)}}@media(prefers-reduced-motion:reduce){.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:100%;animation:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
2039
+ }
2040
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ProgressBarComponent, decorators: [{
2041
+ type: Component,
2042
+ args: [{ selector: 'ea-progress-bar', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ea-progress-bar\"\n [ngClass]=\"hostClasses()\">\n @if (label() || showValue()) {\n <div class=\"ea-progress-bar__header\">\n @if (label()) {\n <span class=\"ea-progress-bar__label\">{{ label() }}</span>\n }\n @if (showValue() && !indeterminate()) {\n <span class=\"ea-progress-bar__value\">{{ percentageRounded() }}%</span>\n }\n </div>\n }\n <div\n class=\"ea-progress-bar__track\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"indeterminate() ? null : percentageRounded()\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-label]=\"label() || 'Progress'\">\n <div\n class=\"ea-progress-bar__fill\"\n [style.width]=\"indeterminate() ? null : percentage() + '%'\"></div>\n </div>\n</div>\n", styles: [".ea-progress-bar{display:flex;flex-direction:column;gap:var(--space-1-5);font-family:var(--font-family-sans)}.ea-progress-bar__header{display:flex;justify-content:space-between;align-items:baseline}.ea-progress-bar__label{font-size:var(--text-label-sm-size);font-weight:var(--text-label-sm-weight);line-height:var(--text-label-sm-lh);color:var(--color-text-primary)}.ea-progress-bar__value{font-size:var(--text-label-sm-size);font-weight:var(--text-label-sm-weight);line-height:var(--text-label-sm-lh);color:var(--color-text-secondary)}.ea-progress-bar__track{overflow:hidden;border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-progress-bar__fill{height:100%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transition:width var(--duration-slow) var(--ease-out)}.ea-progress-bar--sm .ea-progress-bar__track{height:.25rem}.ea-progress-bar--md .ea-progress-bar__track{height:.375rem}.ea-progress-bar--lg .ea-progress-bar__track{height:.5rem}.ea-progress-bar--success .ea-progress-bar__fill{background-color:var(--color-success-default)}.ea-progress-bar--warning .ea-progress-bar__fill{background-color:var(--color-warning-default)}.ea-progress-bar--error .ea-progress-bar__fill{background-color:var(--color-error-default)}.ea-progress-bar--info .ea-progress-bar__fill{background-color:var(--color-info-default)}.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:40%;transition:none;animation:ea-progress-indeterminate 1.5s var(--ease-in-out) infinite}@keyframes ea-progress-indeterminate{0%{transform:translate(-110%)}to{transform:translate(260%)}}@media(prefers-reduced-motion:reduce){.ea-progress-bar--indeterminate .ea-progress-bar__fill{width:100%;animation:none}}\n"] }]
2043
+ }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }] } });
2044
+
1979
2045
  class RadioGroupComponent {
1980
2046
  // Inputs
1981
2047
  name = input(`ea-radio-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
@@ -2015,8 +2081,8 @@ class RadioGroupComponent {
2015
2081
  this.onTouched();
2016
2082
  this.changed.emit(val);
2017
2083
  }
2018
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2019
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: RadioGroupComponent, isStandalone: true, selector: "ea-radio-group", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [
2084
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2085
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.7", type: RadioGroupComponent, isStandalone: true, selector: "ea-radio-group", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [
2020
2086
  {
2021
2087
  provide: NG_VALUE_ACCESSOR,
2022
2088
  useExisting: forwardRef(() => RadioGroupComponent),
@@ -2024,7 +2090,7 @@ class RadioGroupComponent {
2024
2090
  },
2025
2091
  ], ngImport: i0, template: "<div\n class=\"ea-radio-group\"\n [class.ea-radio-group--horizontal]=\"orientation() === 'horizontal'\"\n [class.ea-radio-group--vertical]=\"orientation() === 'vertical'\"\n role=\"radiogroup\"\n [attr.aria-label]=\"ariaLabel()\">\n <ng-content />\n</div>\n", styles: [".ea-radio-group{display:flex}.ea-radio-group--vertical{flex-direction:column;gap:var(--space-2)}.ea-radio-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--space-4)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2026
2092
  }
2027
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: RadioGroupComponent, decorators: [{
2093
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: RadioGroupComponent, decorators: [{
2028
2094
  type: Component,
2029
2095
  args: [{ selector: 'ea-radio-group', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
2030
2096
  {
@@ -2057,10 +2123,10 @@ class RadioComponent {
2057
2123
  return;
2058
2124
  this.group.select(this.value());
2059
2125
  }
2060
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2061
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: RadioComponent, isStandalone: true, selector: "ea-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<label\n class=\"ea-radio\"\n [ngClass]=\"hostClasses()\"\n [for]=\"id()\">\n <input\n type=\"radio\"\n class=\"ea-radio__input\"\n [id]=\"id()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [checked]=\"isChecked()\"\n [disabled]=\"isDisabled()\"\n (change)=\"handleChange()\" />\n\n <span\n class=\"ea-radio__circle\"\n aria-hidden=\"true\"></span>\n\n @if (label()) {\n <span class=\"ea-radio__label\">{{ label() }}</span>\n }\n</label>\n", styles: [".ea-radio{display:inline-flex;align-items:flex-start;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-radio--sm .ea-radio__circle{width:1rem;height:1rem}.ea-radio--sm .ea-radio__label{font-size:var(--font-size-sm);line-height:1rem}.ea-radio--md .ea-radio__circle{width:1.25rem;height:1.25rem}.ea-radio--md .ea-radio__label{font-size:var(--font-size-sm);line-height:1.25rem}.ea-radio--lg .ea-radio__circle{width:1.5rem;height:1.5rem}.ea-radio--lg .ea-radio__label{font-size:var(--font-size-md);line-height:1.5rem}.ea-radio--disabled{opacity:.45;cursor:not-allowed}.ea-radio--checked .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio--checked .ea-radio__circle:after{transform:scale(1)}.ea-radio:hover:not(.ea-radio--disabled) .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-radio__input:focus-visible+.ea-radio__circle{box-shadow:var(--shadow-focus-ring)}.ea-radio__circle{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--radius-full);background-color:var(--color-bg-base);border:var(--border-width-medium) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-radio__circle:after{content:\"\";display:block;width:45%;height:45%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transform:scale(0);transition:var(--transition-transform)}.ea-radio__label{font-weight:var(--font-weight-regular)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2126
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2127
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: RadioComponent, isStandalone: true, selector: "ea-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<label\n class=\"ea-radio\"\n [ngClass]=\"hostClasses()\"\n [for]=\"id()\">\n <input\n type=\"radio\"\n class=\"ea-radio__input\"\n [id]=\"id()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [checked]=\"isChecked()\"\n [disabled]=\"isDisabled()\"\n (change)=\"handleChange()\" />\n\n <span\n class=\"ea-radio__circle\"\n aria-hidden=\"true\"></span>\n\n @if (label()) {\n <span class=\"ea-radio__label\">{{ label() }}</span>\n }\n</label>\n", styles: [".ea-radio{display:inline-flex;align-items:flex-start;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-radio--sm .ea-radio__circle{width:1rem;height:1rem}.ea-radio--sm .ea-radio__label{font-size:var(--font-size-sm);line-height:1rem}.ea-radio--md .ea-radio__circle{width:1.25rem;height:1.25rem}.ea-radio--md .ea-radio__label{font-size:var(--font-size-sm);line-height:1.25rem}.ea-radio--lg .ea-radio__circle{width:1.5rem;height:1.5rem}.ea-radio--lg .ea-radio__label{font-size:var(--font-size-md);line-height:1.5rem}.ea-radio--disabled{opacity:.45;cursor:not-allowed}.ea-radio--checked .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio--checked .ea-radio__circle:after{transform:scale(1)}.ea-radio:hover:not(.ea-radio--disabled) .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-radio__input:focus-visible+.ea-radio__circle{box-shadow:var(--shadow-focus-ring)}.ea-radio__circle{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--radius-full);background-color:var(--color-bg-base);border:var(--border-width-medium) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-radio__circle:after{content:\"\";display:block;width:45%;height:45%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transform:scale(0);transition:var(--transition-transform)}.ea-radio__label{font-weight:var(--font-weight-regular)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2062
2128
  }
2063
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: RadioComponent, decorators: [{
2129
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: RadioComponent, decorators: [{
2064
2130
  type: Component,
2065
2131
  args: [{ selector: 'ea-radio', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<label\n class=\"ea-radio\"\n [ngClass]=\"hostClasses()\"\n [for]=\"id()\">\n <input\n type=\"radio\"\n class=\"ea-radio__input\"\n [id]=\"id()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [checked]=\"isChecked()\"\n [disabled]=\"isDisabled()\"\n (change)=\"handleChange()\" />\n\n <span\n class=\"ea-radio__circle\"\n aria-hidden=\"true\"></span>\n\n @if (label()) {\n <span class=\"ea-radio__label\">{{ label() }}</span>\n }\n</label>\n", styles: [".ea-radio{display:inline-flex;align-items:flex-start;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-radio--sm .ea-radio__circle{width:1rem;height:1rem}.ea-radio--sm .ea-radio__label{font-size:var(--font-size-sm);line-height:1rem}.ea-radio--md .ea-radio__circle{width:1.25rem;height:1.25rem}.ea-radio--md .ea-radio__label{font-size:var(--font-size-sm);line-height:1.25rem}.ea-radio--lg .ea-radio__circle{width:1.5rem;height:1.5rem}.ea-radio--lg .ea-radio__label{font-size:var(--font-size-md);line-height:1.5rem}.ea-radio--disabled{opacity:.45;cursor:not-allowed}.ea-radio--checked .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio--checked .ea-radio__circle:after{transform:scale(1)}.ea-radio:hover:not(.ea-radio--disabled) .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-radio__input:focus-visible+.ea-radio__circle{box-shadow:var(--shadow-focus-ring)}.ea-radio__circle{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--radius-full);background-color:var(--color-bg-base);border:var(--border-width-medium) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-radio__circle:after{content:\"\";display:block;width:45%;height:45%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transform:scale(0);transition:var(--transition-transform)}.ea-radio__label{font-weight:var(--font-weight-regular)}\n"] }]
2066
2132
  }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
@@ -2082,10 +2148,10 @@ class SkeletonComponent {
2082
2148
  [`ea-skeleton--${this.variant()}`]: true,
2083
2149
  'ea-skeleton--animated': this.animated(),
2084
2150
  }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
2085
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2086
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: SkeletonComponent, isStandalone: true, selector: "ea-skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"ea-skeleton\"\n [class.ea-skeleton--text]=\"variant() === 'text'\"\n [class.ea-skeleton--circle]=\"variant() === 'circle'\"\n [class.ea-skeleton--rect]=\"variant() === 'rect'\"\n [class.ea-skeleton--animated]=\"animated()\"\n [style]=\"hostStyles()\"\n aria-hidden=\"true\">\n</div>\n", styles: [".ea-skeleton{display:block;background-color:var(--color-bg-muted);border-radius:var(--radius-md)}.ea-skeleton--text{width:100%;height:1rem;border-radius:var(--radius-sm)}.ea-skeleton--circle{width:2.5rem;height:2.5rem;border-radius:var(--radius-full)}.ea-skeleton--rect{width:100%;height:6rem}.ea-skeleton--animated{animation:ea-skeleton-pulse 1.5s ease-in-out infinite}@keyframes ea-skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}@media(prefers-reduced-motion:reduce){.ea-skeleton--animated{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2151
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2152
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.7", type: SkeletonComponent, isStandalone: true, selector: "ea-skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"ea-skeleton\"\n [class.ea-skeleton--text]=\"variant() === 'text'\"\n [class.ea-skeleton--circle]=\"variant() === 'circle'\"\n [class.ea-skeleton--rect]=\"variant() === 'rect'\"\n [class.ea-skeleton--animated]=\"animated()\"\n [style]=\"hostStyles()\"\n aria-hidden=\"true\">\n</div>\n", styles: [".ea-skeleton{display:block;background-color:var(--color-bg-muted);border-radius:var(--radius-md)}.ea-skeleton--text{width:100%;height:1rem;border-radius:var(--radius-sm)}.ea-skeleton--circle{width:2.5rem;height:2.5rem;border-radius:var(--radius-full)}.ea-skeleton--rect{width:100%;height:6rem}.ea-skeleton--animated{animation:ea-skeleton-pulse 1.5s ease-in-out infinite}@keyframes ea-skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}@media(prefers-reduced-motion:reduce){.ea-skeleton--animated{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2087
2153
  }
2088
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SkeletonComponent, decorators: [{
2154
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkeletonComponent, decorators: [{
2089
2155
  type: Component,
2090
2156
  args: [{ selector: 'ea-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"ea-skeleton\"\n [class.ea-skeleton--text]=\"variant() === 'text'\"\n [class.ea-skeleton--circle]=\"variant() === 'circle'\"\n [class.ea-skeleton--rect]=\"variant() === 'rect'\"\n [class.ea-skeleton--animated]=\"animated()\"\n [style]=\"hostStyles()\"\n aria-hidden=\"true\">\n</div>\n", styles: [".ea-skeleton{display:block;background-color:var(--color-bg-muted);border-radius:var(--radius-md)}.ea-skeleton--text{width:100%;height:1rem;border-radius:var(--radius-sm)}.ea-skeleton--circle{width:2.5rem;height:2.5rem;border-radius:var(--radius-full)}.ea-skeleton--rect{width:100%;height:6rem}.ea-skeleton--animated{animation:ea-skeleton-pulse 1.5s ease-in-out infinite}@keyframes ea-skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}@media(prefers-reduced-motion:reduce){.ea-skeleton--animated{animation:none}}\n"] }]
2091
2157
  }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }] } });
@@ -2096,10 +2162,10 @@ class SpinnerComponent {
2096
2162
  hostClasses = computed(() => ({
2097
2163
  [`ea-spinner--${this.size()}`]: true,
2098
2164
  }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
2099
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2100
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", 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\">{{ label() }}</span>\n</div>\n", styles: [".ea-spinner{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-brand-default)}.ea-spinner--sm .ea-spinner__circle{width:1rem;height:1rem}.ea-spinner--sm .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--md .ea-spinner__circle{width:1.5rem;height:1.5rem}.ea-spinner--md .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--lg .ea-spinner__circle{width:2rem;height:2rem}.ea-spinner--lg .ea-spinner__label{font-size:var(--font-size-md)}.ea-spinner__circle{animation:ea-spin .75s linear infinite}.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 });
2165
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2166
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.7", 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\">{{ label() }}</span>\n</div>\n", styles: [".ea-spinner{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-brand-default)}.ea-spinner--sm .ea-spinner__circle{width:1rem;height:1rem}.ea-spinner--sm .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--md .ea-spinner__circle{width:1.5rem;height:1.5rem}.ea-spinner--md .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--lg .ea-spinner__circle{width:2rem;height:2rem}.ea-spinner--lg .ea-spinner__label{font-size:var(--font-size-md)}.ea-spinner__circle{animation:ea-spin .75s linear infinite}.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 });
2101
2167
  }
2102
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SpinnerComponent, decorators: [{
2168
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SpinnerComponent, decorators: [{
2103
2169
  type: Component,
2104
2170
  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\">{{ label() }}</span>\n</div>\n", styles: [".ea-spinner{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-brand-default)}.ea-spinner--sm .ea-spinner__circle{width:1rem;height:1rem}.ea-spinner--sm .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--md .ea-spinner__circle{width:1.5rem;height:1.5rem}.ea-spinner--md .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--lg .ea-spinner__circle{width:2rem;height:2rem}.ea-spinner--lg .ea-spinner__label{font-size:var(--font-size-md)}.ea-spinner__circle{animation:ea-spin .75s linear infinite}.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"] }]
2105
2171
  }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
@@ -2141,8 +2207,8 @@ class SwitchComponent {
2141
2207
  this.onTouched();
2142
2208
  this.changed.emit(newValue);
2143
2209
  }
2144
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2145
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SwitchComponent, isStandalone: true, selector: "ea-switch", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", changed: "changed" }, providers: [
2210
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2211
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: SwitchComponent, isStandalone: true, selector: "ea-switch", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", changed: "changed" }, providers: [
2146
2212
  {
2147
2213
  provide: NG_VALUE_ACCESSOR,
2148
2214
  useExisting: forwardRef(() => SwitchComponent),
@@ -2150,7 +2216,7 @@ class SwitchComponent {
2150
2216
  },
2151
2217
  ], ngImport: i0, template: "<label\n class=\"ea-switch\"\n [ngClass]=\"hostClasses()\">\n <input\n class=\"ea-switch__input\"\n type=\"checkbox\"\n role=\"switch\"\n [id]=\"id()\"\n [checked]=\"checked()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-checked]=\"checked()\"\n (change)=\"handleChange()\" />\n <span class=\"ea-switch__track\">\n <span class=\"ea-switch__thumb\"></span>\n </span>\n @if (label()) {\n <span class=\"ea-switch__label\">{{ label() }}</span>\n }\n</label>\n", styles: [".ea-switch{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans)}.ea-switch--sm .ea-switch__track{width:1.75rem;height:1rem}.ea-switch--sm .ea-switch__thumb{width:.75rem;height:.75rem}.ea-switch--sm .ea-switch__label{font-size:var(--font-size-sm)}.ea-switch--md .ea-switch__track{width:2.25rem;height:1.25rem}.ea-switch--md .ea-switch__thumb{width:1rem;height:1rem}.ea-switch--md .ea-switch__label{font-size:var(--font-size-sm)}.ea-switch--lg .ea-switch__track{width:2.75rem;height:1.5rem}.ea-switch--lg .ea-switch__thumb{width:1.25rem;height:1.25rem}.ea-switch--lg .ea-switch__label{font-size:var(--font-size-md)}.ea-switch--checked .ea-switch__track{background-color:var(--color-brand-default);border-color:var(--color-brand-default)}.ea-switch--checked .ea-switch__thumb{transform:translate(100%)}.ea-switch--disabled{opacity:.45;cursor:not-allowed}.ea-switch:hover:not(.ea-switch--disabled) .ea-switch__track{border-color:var(--color-brand-default)}.ea-switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-switch__input:focus-visible+.ea-switch__track{box-shadow:var(--shadow-focus-ring)}.ea-switch__track{position:relative;display:flex;align-items:center;flex-shrink:0;padding:.125rem;background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--color-border-strong);border-radius:var(--radius-full);transition:var(--transition-colors)}.ea-switch__thumb{display:block;background-color:var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);transition:transform var(--duration-fast) var(--ease-out)}.ea-switch__label{font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2152
2218
  }
2153
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SwitchComponent, decorators: [{
2219
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SwitchComponent, decorators: [{
2154
2220
  type: Component,
2155
2221
  args: [{ selector: 'ea-switch', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
2156
2222
  {
@@ -2204,10 +2270,10 @@ class TabsComponent {
2204
2270
  buttons[nextIndex]?.focus();
2205
2271
  }
2206
2272
  }
2207
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2208
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: TabsComponent, isStandalone: true, selector: "ea-tabs", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange", tabChange: "tabChange" }, ngImport: i0, template: "<div class=\"ea-tabs\">\n <div\n class=\"ea-tabs__list\"\n [class.ea-tabs__list--underline]=\"variant() === 'underline'\"\n [class.ea-tabs__list--filled]=\"variant() === 'filled'\"\n [class.ea-tabs__list--sm]=\"size() === 'sm'\"\n [class.ea-tabs__list--md]=\"size() === 'md'\"\n [class.ea-tabs__list--lg]=\"size() === 'lg'\"\n role=\"tablist\"\n (keydown)=\"handleKeydown($event)\">\n @for (tab of registeredTabs(); track tab.value()) {\n <button\n class=\"ea-tabs__trigger\"\n [class.ea-tabs__trigger--active]=\"tab.isActive()\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"tab.isActive()\"\n [disabled]=\"tab.disabled()\"\n [tabindex]=\"tab.isActive() ? 0 : -1\"\n (click)=\"selectTab(tab.value())\">\n {{ tab.label() }}\n </button>\n }\n </div>\n <ng-content />\n</div>\n", styles: [".ea-tabs{display:flex;flex-direction:column;gap:var(--space-4)}.ea-tabs__list{display:flex;gap:var(--space-1)}.ea-tabs__list--underline{border-bottom:var(--border-width-thin) solid var(--color-border-default);gap:0}.ea-tabs__list--underline .ea-tabs__trigger{border-radius:0;border-bottom:var(--border-width-medium) solid transparent;margin-bottom:calc(-1 * var(--border-width-thin))}.ea-tabs__list--underline .ea-tabs__trigger--active{border-bottom-color:var(--color-primary-600);color:var(--color-primary-600)}.ea-tabs__list--underline .ea-tabs__trigger:hover:not(:disabled):not(.ea-tabs__trigger--active){border-bottom-color:var(--color-border-strong)}.ea-tabs__list--filled{background-color:var(--color-bg-muted);border-radius:var(--radius-lg);padding:var(--space-1)}.ea-tabs__list--filled .ea-tabs__trigger{border-radius:var(--radius-md)}.ea-tabs__list--filled .ea-tabs__trigger--active{background-color:var(--color-bg-base);box-shadow:var(--shadow-sm);color:var(--color-text-primary)}.ea-tabs__list--sm .ea-tabs__trigger{padding:var(--space-1-5) var(--space-3);font-size:var(--font-size-xs)}.ea-tabs__list--md .ea-tabs__trigger{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm)}.ea-tabs__list--lg .ea-tabs__trigger{padding:var(--space-2-5) var(--space-5);font-size:var(--font-size-md)}.ea-tabs__trigger{display:flex;align-items:center;justify-content:center;padding:0;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);white-space:nowrap;background:none;border:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-tabs__trigger:hover:not(:disabled){color:var(--color-text-primary)}.ea-tabs__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-tabs__trigger:disabled{opacity:.5;cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2273
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2274
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: TabsComponent, isStandalone: true, selector: "ea-tabs", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange", tabChange: "tabChange" }, ngImport: i0, template: "<div class=\"ea-tabs\">\n <div\n class=\"ea-tabs__list\"\n [class.ea-tabs__list--underline]=\"variant() === 'underline'\"\n [class.ea-tabs__list--filled]=\"variant() === 'filled'\"\n [class.ea-tabs__list--sm]=\"size() === 'sm'\"\n [class.ea-tabs__list--md]=\"size() === 'md'\"\n [class.ea-tabs__list--lg]=\"size() === 'lg'\"\n role=\"tablist\"\n (keydown)=\"handleKeydown($event)\">\n @for (tab of registeredTabs(); track tab.value()) {\n <button\n class=\"ea-tabs__trigger\"\n [class.ea-tabs__trigger--active]=\"tab.isActive()\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"tab.isActive()\"\n [disabled]=\"tab.disabled()\"\n [tabindex]=\"tab.isActive() ? 0 : -1\"\n (click)=\"selectTab(tab.value())\">\n {{ tab.label() }}\n </button>\n }\n </div>\n <ng-content />\n</div>\n", styles: [".ea-tabs{display:flex;flex-direction:column;gap:var(--space-4)}.ea-tabs__list{display:flex;gap:var(--space-1)}.ea-tabs__list--underline{border-bottom:var(--border-width-thin) solid var(--color-border-default);gap:0}.ea-tabs__list--underline .ea-tabs__trigger{border-radius:0;border-bottom:var(--border-width-medium) solid transparent;margin-bottom:calc(-1 * var(--border-width-thin))}.ea-tabs__list--underline .ea-tabs__trigger--active{border-bottom-color:var(--color-primary-600);color:var(--color-primary-600)}.ea-tabs__list--underline .ea-tabs__trigger:hover:not(:disabled):not(.ea-tabs__trigger--active){border-bottom-color:var(--color-border-strong)}.ea-tabs__list--filled{background-color:var(--color-bg-muted);border-radius:var(--radius-lg);padding:var(--space-1)}.ea-tabs__list--filled .ea-tabs__trigger{border-radius:var(--radius-md)}.ea-tabs__list--filled .ea-tabs__trigger--active{background-color:var(--color-bg-base);box-shadow:var(--shadow-sm);color:var(--color-text-primary)}.ea-tabs__list--sm .ea-tabs__trigger{padding:var(--space-1-5) var(--space-3);font-size:var(--font-size-xs)}.ea-tabs__list--md .ea-tabs__trigger{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm)}.ea-tabs__list--lg .ea-tabs__trigger{padding:var(--space-2-5) var(--space-5);font-size:var(--font-size-md)}.ea-tabs__trigger{display:flex;align-items:center;justify-content:center;padding:0;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);white-space:nowrap;background:none;border:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-tabs__trigger:hover:not(:disabled){color:var(--color-text-primary)}.ea-tabs__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-tabs__trigger:disabled{opacity:.5;cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2209
2275
  }
2210
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TabsComponent, decorators: [{
2276
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TabsComponent, decorators: [{
2211
2277
  type: Component,
2212
2278
  args: [{ selector: 'ea-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ea-tabs\">\n <div\n class=\"ea-tabs__list\"\n [class.ea-tabs__list--underline]=\"variant() === 'underline'\"\n [class.ea-tabs__list--filled]=\"variant() === 'filled'\"\n [class.ea-tabs__list--sm]=\"size() === 'sm'\"\n [class.ea-tabs__list--md]=\"size() === 'md'\"\n [class.ea-tabs__list--lg]=\"size() === 'lg'\"\n role=\"tablist\"\n (keydown)=\"handleKeydown($event)\">\n @for (tab of registeredTabs(); track tab.value()) {\n <button\n class=\"ea-tabs__trigger\"\n [class.ea-tabs__trigger--active]=\"tab.isActive()\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"tab.isActive()\"\n [disabled]=\"tab.disabled()\"\n [tabindex]=\"tab.isActive() ? 0 : -1\"\n (click)=\"selectTab(tab.value())\">\n {{ tab.label() }}\n </button>\n }\n </div>\n <ng-content />\n</div>\n", styles: [".ea-tabs{display:flex;flex-direction:column;gap:var(--space-4)}.ea-tabs__list{display:flex;gap:var(--space-1)}.ea-tabs__list--underline{border-bottom:var(--border-width-thin) solid var(--color-border-default);gap:0}.ea-tabs__list--underline .ea-tabs__trigger{border-radius:0;border-bottom:var(--border-width-medium) solid transparent;margin-bottom:calc(-1 * var(--border-width-thin))}.ea-tabs__list--underline .ea-tabs__trigger--active{border-bottom-color:var(--color-primary-600);color:var(--color-primary-600)}.ea-tabs__list--underline .ea-tabs__trigger:hover:not(:disabled):not(.ea-tabs__trigger--active){border-bottom-color:var(--color-border-strong)}.ea-tabs__list--filled{background-color:var(--color-bg-muted);border-radius:var(--radius-lg);padding:var(--space-1)}.ea-tabs__list--filled .ea-tabs__trigger{border-radius:var(--radius-md)}.ea-tabs__list--filled .ea-tabs__trigger--active{background-color:var(--color-bg-base);box-shadow:var(--shadow-sm);color:var(--color-text-primary)}.ea-tabs__list--sm .ea-tabs__trigger{padding:var(--space-1-5) var(--space-3);font-size:var(--font-size-xs)}.ea-tabs__list--md .ea-tabs__trigger{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm)}.ea-tabs__list--lg .ea-tabs__trigger{padding:var(--space-2-5) var(--space-5);font-size:var(--font-size-md)}.ea-tabs__trigger{display:flex;align-items:center;justify-content:center;padding:0;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);white-space:nowrap;background:none;border:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-tabs__trigger:hover:not(:disabled){color:var(--color-text-primary)}.ea-tabs__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-tabs__trigger:disabled{opacity:.5;cursor:not-allowed}\n"] }]
2213
2279
  }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
@@ -2224,8 +2290,8 @@ class TabComponent {
2224
2290
  ngOnDestroy() {
2225
2291
  this.tabs.unregisterTab(this);
2226
2292
  }
2227
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2228
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: TabComponent, isStandalone: true, selector: "ea-tab", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "isActive() ? null : \"none\"" } }, ngImport: i0, template: `
2293
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2294
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: TabComponent, isStandalone: true, selector: "ea-tab", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "isActive() ? null : \"none\"" } }, ngImport: i0, template: `
2229
2295
  @if (isActive()) {
2230
2296
  <div
2231
2297
  class="ea-tab__panel"
@@ -2235,7 +2301,7 @@ class TabComponent {
2235
2301
  }
2236
2302
  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
2237
2303
  }
2238
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TabComponent, decorators: [{
2304
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TabComponent, decorators: [{
2239
2305
  type: Component,
2240
2306
  args: [{
2241
2307
  selector: 'ea-tab',
@@ -2253,6 +2319,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
2253
2319
  }]
2254
2320
  }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
2255
2321
 
2322
+ class TagComponent {
2323
+ variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
2324
+ size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
2325
+ removable = input(false, ...(ngDevMode ? [{ debugName: "removable" }] : /* istanbul ignore next */ []));
2326
+ disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
2327
+ removed = output();
2328
+ hostClasses = computed(() => ({
2329
+ [`ea-tag--${this.variant()}`]: true,
2330
+ [`ea-tag--${this.size()}`]: true,
2331
+ 'ea-tag--disabled': this.disabled(),
2332
+ }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
2333
+ onRemove(event) {
2334
+ event.stopPropagation();
2335
+ this.removed.emit();
2336
+ }
2337
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2338
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: TagComponent, isStandalone: true, selector: "ea-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, ngImport: i0, template: "<span\n class=\"ea-tag\"\n [ngClass]=\"hostClasses()\">\n <ng-content />\n @if (removable()) {\n <button\n type=\"button\"\n class=\"ea-tag__remove\"\n [disabled]=\"disabled() || null\"\n (click)=\"onRemove($event)\"\n aria-label=\"Remove\">\n <ea-icon-x />\n </button>\n }\n</span>\n", styles: [".ea-tag{display:inline-flex;align-items:center;gap:var(--space-1);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-secondary)}.ea-tag--sm{padding:var(--space-0-5) var(--space-1-5);font-size:var(--font-size-xs)}.ea-tag--sm .ea-tag__remove ea-icon-x{width:.625rem;height:.625rem}.ea-tag--md{padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs)}.ea-tag--md .ea-tag__remove ea-icon-x{width:.75rem;height:.75rem}.ea-tag--lg{padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-sm)}.ea-tag--lg .ea-tag__remove ea-icon-x{width:.875rem;height:.875rem}.ea-tag--primary{border-color:var(--color-brand-muted);background-color:var(--color-brand-subtle);color:var(--color-brand-default)}.ea-tag--success{border-color:var(--color-success-muted);background-color:var(--color-success-subtle);color:var(--color-success-700)}.ea-tag--warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-subtle);color:var(--color-warning-700)}.ea-tag--error{border-color:var(--color-error-muted);background-color:var(--color-error-subtle);color:var(--color-error-700)}.ea-tag--info{border-color:var(--color-info-muted);background-color:var(--color-info-subtle);color:var(--color-info-700)}.ea-tag--disabled{opacity:.6;cursor:not-allowed}.ea-tag__remove{opacity:.7;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;border:none;border-radius:var(--radius-xs);background:none;color:inherit;cursor:pointer;transition:var(--transition-colors)}.ea-tag__remove:hover{opacity:1}.ea-tag__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-tag__remove:disabled{cursor:not-allowed}.ea-tag__remove ea-icon-x{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
2339
+ }
2340
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TagComponent, decorators: [{
2341
+ type: Component,
2342
+ args: [{ selector: 'ea-tag', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span\n class=\"ea-tag\"\n [ngClass]=\"hostClasses()\">\n <ng-content />\n @if (removable()) {\n <button\n type=\"button\"\n class=\"ea-tag__remove\"\n [disabled]=\"disabled() || null\"\n (click)=\"onRemove($event)\"\n aria-label=\"Remove\">\n <ea-icon-x />\n </button>\n }\n</span>\n", styles: [".ea-tag{display:inline-flex;align-items:center;gap:var(--space-1);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-secondary)}.ea-tag--sm{padding:var(--space-0-5) var(--space-1-5);font-size:var(--font-size-xs)}.ea-tag--sm .ea-tag__remove ea-icon-x{width:.625rem;height:.625rem}.ea-tag--md{padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs)}.ea-tag--md .ea-tag__remove ea-icon-x{width:.75rem;height:.75rem}.ea-tag--lg{padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-sm)}.ea-tag--lg .ea-tag__remove ea-icon-x{width:.875rem;height:.875rem}.ea-tag--primary{border-color:var(--color-brand-muted);background-color:var(--color-brand-subtle);color:var(--color-brand-default)}.ea-tag--success{border-color:var(--color-success-muted);background-color:var(--color-success-subtle);color:var(--color-success-700)}.ea-tag--warning{border-color:var(--color-warning-muted);background-color:var(--color-warning-subtle);color:var(--color-warning-700)}.ea-tag--error{border-color:var(--color-error-muted);background-color:var(--color-error-subtle);color:var(--color-error-700)}.ea-tag--info{border-color:var(--color-info-muted);background-color:var(--color-info-subtle);color:var(--color-info-700)}.ea-tag--disabled{opacity:.6;cursor:not-allowed}.ea-tag__remove{opacity:.7;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;border:none;border-radius:var(--radius-xs);background:none;color:inherit;cursor:pointer;transition:var(--transition-colors)}.ea-tag__remove:hover{opacity:1}.ea-tag__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-tag__remove:disabled{cursor:not-allowed}.ea-tag__remove ea-icon-x{pointer-events:none}\n"] }]
2343
+ }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
2344
+
2256
2345
  class TextareaComponent {
2257
2346
  textareaEl = viewChild('textareaEl', ...(ngDevMode ? [{ debugName: "textareaEl" }] : /* istanbul ignore next */ []));
2258
2347
  label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -2315,8 +2404,8 @@ class TextareaComponent {
2315
2404
  focus() {
2316
2405
  this.textareaEl()?.nativeElement.focus();
2317
2406
  }
2318
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2319
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: TextareaComponent, isStandalone: true, selector: "ea-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", textareaFocused: "textareaFocused", textareaBlurred: "textareaBlurred" }, providers: [
2407
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2408
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: TextareaComponent, isStandalone: true, selector: "ea-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", textareaFocused: "textareaFocused", textareaBlurred: "textareaBlurred" }, providers: [
2320
2409
  {
2321
2410
  provide: NG_VALUE_ACCESSOR,
2322
2411
  useExisting: forwardRef(() => TextareaComponent),
@@ -2324,7 +2413,7 @@ class TextareaComponent {
2324
2413
  },
2325
2414
  ], viewQueries: [{ propertyName: "textareaEl", first: true, predicate: ["textareaEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-textarea-field\">\n @if (label()) {\n <label\n class=\"ea-textarea-field__label\"\n [for]=\"id()\"\n [class.ea-textarea-field__label--required]=\"required()\">\n {{ label() }}\n </label>\n }\n\n <div\n class=\"ea-textarea-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <textarea\n #textareaEl\n class=\"ea-textarea\"\n [id]=\"id()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [rows]=\"rows()\"\n [value]=\"value()\"\n [style.resize]=\"resize()\"\n [attr.maxlength]=\"maxlength() ?? null\"\n [attr.aria-invalid]=\"resolvedStatus() === 'error' || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"></textarea>\n </div>\n\n @if (showError()) {\n <p\n class=\"ea-textarea-field__message ea-textarea-field__message--error\"\n [id]=\"id() + '-error'\"\n role=\"alert\">\n <ea-icon-alert-circle class=\"ea-textarea-field__message-icon\" />\n {{ errorMsg() }}\n </p>\n }\n\n @if (showHint()) {\n <p\n class=\"ea-textarea-field__message ea-textarea-field__message--hint\"\n [id]=\"id() + '-hint'\">\n {{ hint() }}\n </p>\n }\n</div>\n", styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-textarea-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-textarea-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-textarea-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-textarea-field__message--hint{color:inherit}.ea-textarea-field__message--error{color:var(--color-error-default)}.ea-textarea-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-textarea-wrapper{display:flex;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--sm .ea-textarea{padding:var(--space-2);font-size:var(--font-size-sm)}.ea-textarea-wrapper--md .ea-textarea{padding:var(--space-3);font-size:var(--font-size-md)}.ea-textarea-wrapper--lg .ea-textarea{padding:var(--space-4);font-size:var(--font-size-lg)}.ea-textarea-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}.ea-textarea-wrapper--success{border-color:var(--color-success-default)}.ea-textarea-wrapper--success.ea-textarea-wrapper--focused{box-shadow:var(--shadow-focus-ring-success)}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:not-allowed}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea{flex:1;width:100%;min-width:0;min-height: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-textarea::placeholder{color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2326
2415
  }
2327
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TextareaComponent, decorators: [{
2416
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TextareaComponent, decorators: [{
2328
2417
  type: Component,
2329
2418
  args: [{ selector: 'ea-textarea', imports: [NgClass, AlertCircleIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
2330
2419
  {
@@ -2370,20 +2459,20 @@ class ToastService {
2370
2459
  clear() {
2371
2460
  this.toasts.set([]);
2372
2461
  }
2373
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
2374
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ToastService, providedIn: 'root' });
2462
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
2463
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ToastService, providedIn: 'root' });
2375
2464
  }
2376
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ToastService, decorators: [{
2465
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ToastService, decorators: [{
2377
2466
  type: Injectable,
2378
2467
  args: [{ providedIn: 'root' }]
2379
2468
  }] });
2380
2469
 
2381
2470
  class ToastComponent {
2382
2471
  toastService = inject(ToastService);
2383
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2384
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ToastComponent, isStandalone: true, selector: "ea-toast", ngImport: i0, template: "@if (toastService.toasts().length) {\n <div\n class=\"ea-toast-container\"\n aria-live=\"polite\"\n aria-atomic=\"false\">\n @for (toast of toastService.toasts(); track toast.id) {\n <div\n class=\"ea-toast ea-toast--{{ toast.variant }}\"\n role=\"status\">\n <span class=\"ea-toast__message\">{{ toast.message }}</span>\n <button\n class=\"ea-toast__close\"\n type=\"button\"\n aria-label=\"Dismiss\"\n (click)=\"toastService.dismiss(toast.id)\">\n <ea-icon-x />\n </button>\n </div>\n }\n </div>\n}\n", styles: [".ea-toast-container{position:fixed;bottom:var(--space-6);right:var(--space-6);left:var(--space-6);z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);pointer-events:none}@media(min-width:640px){.ea-toast-container{left:auto;max-width:24rem}}.ea-toast{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);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(min-width:640px){.ea-toast{width:auto}}.ea-toast--default{background-color:var(--color-neutral-800);color:var(--color-neutral-0)}.ea-toast--success{background-color:var(--color-success-subtle);color:var(--color-success-700)}.ea-toast--warning{background-color:var(--color-warning-subtle);color:var(--color-warning-700)}.ea-toast--error{background-color:var(--color-error-subtle);color:var(--color-error-700)}.ea-toast--info{background-color:var(--color-info-subtle);color:var(--color-info-700)}.ea-toast__message{flex:1;min-width:0}.ea-toast__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;color:inherit;opacity:.7;cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-toast__close:hover{opacity:1}.ea-toast__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@keyframes ea-toast-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
2472
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2473
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: ToastComponent, isStandalone: true, selector: "ea-toast", ngImport: i0, template: "@if (toastService.toasts().length) {\n <div\n class=\"ea-toast-container\"\n aria-live=\"polite\"\n aria-atomic=\"false\">\n @for (toast of toastService.toasts(); track toast.id) {\n <div\n class=\"ea-toast ea-toast--{{ toast.variant }}\"\n role=\"status\">\n <span class=\"ea-toast__message\">{{ toast.message }}</span>\n <button\n class=\"ea-toast__close\"\n type=\"button\"\n aria-label=\"Dismiss\"\n (click)=\"toastService.dismiss(toast.id)\">\n <ea-icon-x />\n </button>\n </div>\n }\n </div>\n}\n", styles: [".ea-toast-container{position:fixed;bottom:var(--space-6);right:var(--space-6);left:var(--space-6);z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);pointer-events:none}@media(min-width:640px){.ea-toast-container{left:auto;max-width:24rem}}.ea-toast{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);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(min-width:640px){.ea-toast{width:auto}}.ea-toast--default{background-color:var(--color-neutral-800);color:var(--color-neutral-0)}.ea-toast--success{background-color:var(--color-success-subtle);color:var(--color-success-700)}.ea-toast--warning{background-color:var(--color-warning-subtle);color:var(--color-warning-700)}.ea-toast--error{background-color:var(--color-error-subtle);color:var(--color-error-700)}.ea-toast--info{background-color:var(--color-info-subtle);color:var(--color-info-700)}.ea-toast__message{flex:1;min-width:0}.ea-toast__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;color:inherit;opacity:.7;cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-toast__close:hover{opacity:1}.ea-toast__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@keyframes ea-toast-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
2385
2474
  }
2386
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ToastComponent, decorators: [{
2475
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ToastComponent, decorators: [{
2387
2476
  type: Component,
2388
2477
  args: [{ selector: 'ea-toast', imports: [XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (toastService.toasts().length) {\n <div\n class=\"ea-toast-container\"\n aria-live=\"polite\"\n aria-atomic=\"false\">\n @for (toast of toastService.toasts(); track toast.id) {\n <div\n class=\"ea-toast ea-toast--{{ toast.variant }}\"\n role=\"status\">\n <span class=\"ea-toast__message\">{{ toast.message }}</span>\n <button\n class=\"ea-toast__close\"\n type=\"button\"\n aria-label=\"Dismiss\"\n (click)=\"toastService.dismiss(toast.id)\">\n <ea-icon-x />\n </button>\n </div>\n }\n </div>\n}\n", styles: [".ea-toast-container{position:fixed;bottom:var(--space-6);right:var(--space-6);left:var(--space-6);z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);pointer-events:none}@media(min-width:640px){.ea-toast-container{left:auto;max-width:24rem}}.ea-toast{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);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(min-width:640px){.ea-toast{width:auto}}.ea-toast--default{background-color:var(--color-neutral-800);color:var(--color-neutral-0)}.ea-toast--success{background-color:var(--color-success-subtle);color:var(--color-success-700)}.ea-toast--warning{background-color:var(--color-warning-subtle);color:var(--color-warning-700)}.ea-toast--error{background-color:var(--color-error-subtle);color:var(--color-error-700)}.ea-toast--info{background-color:var(--color-info-subtle);color:var(--color-info-700)}.ea-toast__message{flex:1;min-width:0}.ea-toast__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;color:inherit;opacity:.7;cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-toast__close:hover{opacity:1}.ea-toast__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@keyframes ea-toast-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}\n"] }]
2389
2478
  }] });
@@ -2397,5 +2486,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
2397
2486
  * Generated bundle index. Do not edit.
2398
2487
  */
2399
2488
 
2400
- export { AccordionComponent, AccordionItemComponent, AlertCircleIconComponent, AlertComponent, AvatarComponent, AvatarEditorComponent, BadgeComponent, ButtonComponent, CameraIconComponent, CardComponent, CheckIconComponent, CheckboxComponent, ChevronDownIconComponent, CodeInputComponent, DialogComponent, DividerComponent, DropdownComponent, EyeIconComponent, EyeOffIconComponent, GoogleIconComponent, InfoIconComponent, InputComponent, LoaderIconComponent, MinusIconComponent, PlusIconComponent, RadioComponent, RadioGroupComponent, RotateCcwIconComponent, SkeletonComponent, SpinnerComponent, SwitchComponent, TabComponent, TabsComponent, TextareaComponent, ToastComponent, ToastService, TooltipDirective, TrashIconComponent, UploadIconComponent, UserIconComponent, XIconComponent };
2489
+ export { AccordionComponent, AccordionItemComponent, AlertCircleIconComponent, AlertComponent, AvatarComponent, AvatarEditorComponent, BadgeComponent, ButtonComponent, CameraIconComponent, CardComponent, CheckIconComponent, CheckboxComponent, ChevronDownIconComponent, CodeInputComponent, DialogComponent, DividerComponent, DropdownComponent, EyeIconComponent, EyeOffIconComponent, GoogleIconComponent, InfoIconComponent, InputComponent, LoaderIconComponent, MinusIconComponent, PlusIconComponent, ProgressBarComponent, RadioComponent, RadioGroupComponent, RotateCcwIconComponent, SkeletonComponent, SpinnerComponent, SwitchComponent, TabComponent, TabsComponent, TagComponent, TextareaComponent, ToastComponent, ToastService, TooltipDirective, TrashIconComponent, UploadIconComponent, UserIconComponent, XIconComponent };
2401
2490
  //# sourceMappingURL=eagami-ui.mjs.map