@eagami/ui 5.7.0 → 5.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/eagami-ui.mjs +43 -27
- package/fesm2022/eagami-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/eagami-ui.d.ts +36 -9
package/fesm2022/eagami-ui.mjs
CHANGED
|
@@ -3702,6 +3702,8 @@ function frenchSpacing(text) {
|
|
|
3702
3702
|
*/
|
|
3703
3703
|
class AccordionComponent {
|
|
3704
3704
|
multi = input(false, ...(ngDevMode ? [{ debugName: "multi" }] : /* istanbul ignore next */ []));
|
|
3705
|
+
/** Visual size of the accordion; every item inherits it. */
|
|
3706
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
3705
3707
|
/** Heading level (1-6) applied to every item's header wrapper. */
|
|
3706
3708
|
headingLevel = input(3, ...(ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []));
|
|
3707
3709
|
expandedItems = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedItems" }] : /* istanbul ignore next */ []));
|
|
@@ -3723,12 +3725,12 @@ class AccordionComponent {
|
|
|
3723
3725
|
return this.expandedItems().has(value);
|
|
3724
3726
|
}
|
|
3725
3727
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3726
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: AccordionComponent, isStandalone: true, selector: "ea-accordion", inputs: { multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ` <div class="ea-accordion"><ng-content /></div> `, isInline: true, styles: [":host{display:block}.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 });
|
|
3728
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: AccordionComponent, isStandalone: true, selector: "ea-accordion", inputs: { multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ` <div class="ea-accordion"><ng-content /></div> `, isInline: true, styles: [":host{display:block}.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 });
|
|
3727
3729
|
}
|
|
3728
3730
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
3729
3731
|
type: Component,
|
|
3730
3732
|
args: [{ selector: 'ea-accordion', template: ` <div class="ea-accordion"><ng-content /></div> `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.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"] }]
|
|
3731
|
-
}], propDecorators: { multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }] } });
|
|
3733
|
+
}], propDecorators: { multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }] } });
|
|
3732
3734
|
|
|
3733
3735
|
/**
|
|
3734
3736
|
* Abstract base class for every `ea-icon-*` component. Provides the shared
|
|
@@ -3836,7 +3838,8 @@ function uniqueId(prefix) {
|
|
|
3836
3838
|
/**
|
|
3837
3839
|
* Single expandable section within an `ea-accordion`. Each item exposes a
|
|
3838
3840
|
* header button with the supplied `label` and reveals its projected content
|
|
3839
|
-
* when expanded.
|
|
3841
|
+
* when expanded. Inherits its size from the parent accordion. Must be
|
|
3842
|
+
* rendered inside an `ea-accordion`.
|
|
3840
3843
|
*/
|
|
3841
3844
|
class AccordionItemComponent {
|
|
3842
3845
|
accordion = inject(AccordionComponent);
|
|
@@ -3846,6 +3849,7 @@ class AccordionItemComponent {
|
|
|
3846
3849
|
id = input(uniqueId('ea-accordion-item'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
3847
3850
|
isExpanded = computed(() => this.accordion.isExpanded(this.value()), ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
|
|
3848
3851
|
headingLevel = computed(() => this.accordion.headingLevel(), ...(ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []));
|
|
3852
|
+
size = computed(() => this.accordion.size(), ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
3849
3853
|
toggle() {
|
|
3850
3854
|
if (this.disabled()) {
|
|
3851
3855
|
return;
|
|
@@ -3853,11 +3857,11 @@ class AccordionItemComponent {
|
|
|
3853
3857
|
this.accordion.toggle(this.value());
|
|
3854
3858
|
}
|
|
3855
3859
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3856
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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 }, id: { classPropertyName: "id", publicName: "id", 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 <div\n class=\"ea-accordion-item__header\"\n role=\"heading\"\n [attr.aria-level]=\"headingLevel()\">\n <button\n class=\"ea-accordion-item__trigger\"\n type=\"button\"\n [id]=\"id() + '-trigger'\"\n [attr.aria-expanded]=\"isExpanded()\"\n [attr.aria-controls]=\"id() + '-content'\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\">\n <span class=\"ea-accordion-item__label\">{{ label() }}</span>\n <ea-icon-chevron-down\n class=\"ea-accordion-item__chevron\"\n aria-hidden=\"true\" />\n </button>\n </div>\n @if (isExpanded()) {\n <div\n class=\"ea-accordion-item__content\"\n role=\"region\"\n [id]=\"id() + '-content'\"\n [attr.aria-labelledby]=\"id() + '-trigger'\">\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-
|
|
3860
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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 }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"ea-accordion-item ea-accordion-item--{{ size() }}\"\n [class.ea-accordion-item--expanded]=\"isExpanded()\"\n [class.ea-accordion-item--disabled]=\"disabled()\">\n <div\n class=\"ea-accordion-item__header\"\n role=\"heading\"\n [attr.aria-level]=\"headingLevel()\">\n <button\n class=\"ea-accordion-item__trigger\"\n type=\"button\"\n [id]=\"id() + '-trigger'\"\n [attr.aria-expanded]=\"isExpanded()\"\n [attr.aria-controls]=\"id() + '-content'\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\">\n <span class=\"ea-accordion-item__label\">{{ label() }}</span>\n <ea-icon-chevron-down\n class=\"ea-accordion-item__chevron\"\n aria-hidden=\"true\" />\n </button>\n </div>\n @if (isExpanded()) {\n <div\n class=\"ea-accordion-item__content\"\n role=\"region\"\n [id]=\"id() + '-content'\"\n [attr.aria-labelledby]=\"id() + '-trigger'\">\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--xs{font-size:var(--font-size-xs)}.ea-accordion-item--sm{font-size:var(--font-size-sm)}.ea-accordion-item--md{font-size:var(--font-size-md)}.ea-accordion-item--lg{font-size:var(--font-size-lg)}.ea-accordion-item--xl{font-size:var(--font-size-xl)}.ea-accordion-item__trigger{display:flex;align-items:center;justify-content:space-between;gap:.75em;width:100%;padding:.75em 1em;font-size:inherit;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);text-align:start;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-state-hover)}.ea-accordion-item__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-accordion-item__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-accordion-item__trigger:disabled{opacity:.5;cursor:not-allowed}.ea-accordion-item__chevron{flex-shrink:0;width:1em;height:1em;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:.5em 1em 1em;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 });
|
|
3857
3861
|
}
|
|
3858
3862
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccordionItemComponent, decorators: [{
|
|
3859
3863
|
type: Component,
|
|
3860
|
-
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 <div\n class=\"ea-accordion-item__header\"\n role=\"heading\"\n [attr.aria-level]=\"headingLevel()\">\n <button\n class=\"ea-accordion-item__trigger\"\n type=\"button\"\n [id]=\"id() + '-trigger'\"\n [attr.aria-expanded]=\"isExpanded()\"\n [attr.aria-controls]=\"id() + '-content'\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\">\n <span class=\"ea-accordion-item__label\">{{ label() }}</span>\n <ea-icon-chevron-down\n class=\"ea-accordion-item__chevron\"\n aria-hidden=\"true\" />\n </button>\n </div>\n @if (isExpanded()) {\n <div\n class=\"ea-accordion-item__content\"\n role=\"region\"\n [id]=\"id() + '-content'\"\n [attr.aria-labelledby]=\"id() + '-trigger'\">\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-
|
|
3864
|
+
args: [{ selector: 'ea-accordion-item', imports: [ChevronDownIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"ea-accordion-item ea-accordion-item--{{ size() }}\"\n [class.ea-accordion-item--expanded]=\"isExpanded()\"\n [class.ea-accordion-item--disabled]=\"disabled()\">\n <div\n class=\"ea-accordion-item__header\"\n role=\"heading\"\n [attr.aria-level]=\"headingLevel()\">\n <button\n class=\"ea-accordion-item__trigger\"\n type=\"button\"\n [id]=\"id() + '-trigger'\"\n [attr.aria-expanded]=\"isExpanded()\"\n [attr.aria-controls]=\"id() + '-content'\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\">\n <span class=\"ea-accordion-item__label\">{{ label() }}</span>\n <ea-icon-chevron-down\n class=\"ea-accordion-item__chevron\"\n aria-hidden=\"true\" />\n </button>\n </div>\n @if (isExpanded()) {\n <div\n class=\"ea-accordion-item__content\"\n role=\"region\"\n [id]=\"id() + '-content'\"\n [attr.aria-labelledby]=\"id() + '-trigger'\">\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--xs{font-size:var(--font-size-xs)}.ea-accordion-item--sm{font-size:var(--font-size-sm)}.ea-accordion-item--md{font-size:var(--font-size-md)}.ea-accordion-item--lg{font-size:var(--font-size-lg)}.ea-accordion-item--xl{font-size:var(--font-size-xl)}.ea-accordion-item__trigger{display:flex;align-items:center;justify-content:space-between;gap:.75em;width:100%;padding:.75em 1em;font-size:inherit;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);text-align:start;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-state-hover)}.ea-accordion-item__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-accordion-item__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-accordion-item__trigger:disabled{opacity:.5;cursor:not-allowed}.ea-accordion-item__chevron{flex-shrink:0;width:1em;height:1em;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:.5em 1em 1em;line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-accordion-item--disabled{opacity:.5}\n"] }]
|
|
3861
3865
|
}], 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 }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
|
|
3862
3866
|
|
|
3863
3867
|
class AlertCircleIconComponent extends IconComponentBase {
|
|
@@ -4172,11 +4176,11 @@ class FieldLabelComponent {
|
|
|
4172
4176
|
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
4173
4177
|
labelId = input(undefined, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
|
|
4174
4178
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FieldLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4175
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FieldLabelComponent, isStandalone: true, selector: "ea-field-label", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, forId: { classPropertyName: "forId", publicName: "forId", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, labelId: { classPropertyName: "labelId", publicName: "labelId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (forId(); as control) {\n <label\n class=\"ea-field-label\"\n [for]=\"control\"\n [attr.id]=\"labelId() ?? null\"\n [class.ea-field-label--required]=\"required()\">\n {{ text() }}\n </label>\n} @else {\n <span\n class=\"ea-field-label\"\n [attr.id]=\"labelId() ?? null\"\n [class.ea-field-label--required]=\"required()\">\n {{ text() }}\n </span>\n}\n", styles: [":host{display:contents}.ea-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-field-label--required:after{content:\" *\";color:var(--color-error-default)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4179
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FieldLabelComponent, isStandalone: true, selector: "ea-field-label", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, forId: { classPropertyName: "forId", publicName: "forId", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, labelId: { classPropertyName: "labelId", publicName: "labelId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (forId(); as control) {\n <label\n class=\"ea-field-label\"\n [for]=\"control\"\n [attr.id]=\"labelId() ?? null\"\n [class.ea-field-label--required]=\"required()\">\n {{ text() }}\n </label>\n} @else {\n <span\n class=\"ea-field-label\"\n [attr.id]=\"labelId() ?? null\"\n [class.ea-field-label--required]=\"required()\">\n {{ text() }}\n </span>\n}\n", styles: [":host{display:contents}.ea-field-label{font-size:var(--ea-field-label-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-field-label--required:after{content:\" *\";color:var(--color-error-default)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4176
4180
|
}
|
|
4177
4181
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FieldLabelComponent, decorators: [{
|
|
4178
4182
|
type: Component,
|
|
4179
|
-
args: [{ selector: 'ea-field-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (forId(); as control) {\n <label\n class=\"ea-field-label\"\n [for]=\"control\"\n [attr.id]=\"labelId() ?? null\"\n [class.ea-field-label--required]=\"required()\">\n {{ text() }}\n </label>\n} @else {\n <span\n class=\"ea-field-label\"\n [attr.id]=\"labelId() ?? null\"\n [class.ea-field-label--required]=\"required()\">\n {{ text() }}\n </span>\n}\n", styles: [":host{display:contents}.ea-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-field-label--required:after{content:\" *\";color:var(--color-error-default)}\n"] }]
|
|
4183
|
+
args: [{ selector: 'ea-field-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (forId(); as control) {\n <label\n class=\"ea-field-label\"\n [for]=\"control\"\n [attr.id]=\"labelId() ?? null\"\n [class.ea-field-label--required]=\"required()\">\n {{ text() }}\n </label>\n} @else {\n <span\n class=\"ea-field-label\"\n [attr.id]=\"labelId() ?? null\"\n [class.ea-field-label--required]=\"required()\">\n {{ text() }}\n </span>\n}\n", styles: [":host{display:contents}.ea-field-label{font-size:var(--ea-field-label-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-field-label--required:after{content:\" *\";color:var(--color-error-default)}\n"] }]
|
|
4180
4184
|
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], forId: [{ type: i0.Input, args: [{ isSignal: true, alias: "forId", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], labelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelId", required: false }] }] } });
|
|
4181
4185
|
|
|
4182
4186
|
// Shared hint/error block for form-like components. Renders the error (with
|
|
@@ -4189,11 +4193,11 @@ class FieldMessagesComponent {
|
|
|
4189
4193
|
error = input(undefined, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
4190
4194
|
hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
4191
4195
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FieldMessagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4192
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FieldMessagesComponent, isStandalone: true, selector: "ea-field-messages", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (error()) {\n <p\n class=\"ea-field-messages__message ea-field-messages__message--error\"\n [id]=\"id() + '-error'\"\n role=\"alert\">\n <ea-icon-alert-circle class=\"ea-field-messages__icon\" />\n {{ error() }}\n </p>\n} @else if (hint()) {\n <p\n class=\"ea-field-messages__message ea-field-messages__message--hint\"\n [id]=\"id() + '-hint'\">\n {{ hint() }}\n </p>\n}\n", styles: [":host{display:contents}.ea-field-messages__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-field-messages__message--hint{color:var(--color-text-secondary)}.ea-field-messages__message--error{color:var(--color-error-default)}.ea-field-messages__icon{flex-shrink:0;font-size:1.2em}\n"], dependencies: [{ kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4196
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FieldMessagesComponent, isStandalone: true, selector: "ea-field-messages", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (error()) {\n <p\n class=\"ea-field-messages__message ea-field-messages__message--error\"\n [id]=\"id() + '-error'\"\n role=\"alert\">\n <ea-icon-alert-circle class=\"ea-field-messages__icon\" />\n {{ error() }}\n </p>\n} @else if (hint()) {\n <p\n class=\"ea-field-messages__message ea-field-messages__message--hint\"\n [id]=\"id() + '-hint'\">\n {{ hint() }}\n </p>\n}\n", styles: [":host{display:contents}.ea-field-messages__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--ea-field-messages-size, var(--text-helper-size));font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-field-messages__message--hint{color:var(--color-text-secondary)}.ea-field-messages__message--error{color:var(--color-error-default)}.ea-field-messages__icon{flex-shrink:0;font-size:1.2em}\n"], dependencies: [{ kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4193
4197
|
}
|
|
4194
4198
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FieldMessagesComponent, decorators: [{
|
|
4195
4199
|
type: Component,
|
|
4196
|
-
args: [{ selector: 'ea-field-messages', imports: [AlertCircleIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (error()) {\n <p\n class=\"ea-field-messages__message ea-field-messages__message--error\"\n [id]=\"id() + '-error'\"\n role=\"alert\">\n <ea-icon-alert-circle class=\"ea-field-messages__icon\" />\n {{ error() }}\n </p>\n} @else if (hint()) {\n <p\n class=\"ea-field-messages__message ea-field-messages__message--hint\"\n [id]=\"id() + '-hint'\">\n {{ hint() }}\n </p>\n}\n", styles: [":host{display:contents}.ea-field-messages__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-field-messages__message--hint{color:var(--color-text-secondary)}.ea-field-messages__message--error{color:var(--color-error-default)}.ea-field-messages__icon{flex-shrink:0;font-size:1.2em}\n"] }]
|
|
4200
|
+
args: [{ selector: 'ea-field-messages', imports: [AlertCircleIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (error()) {\n <p\n class=\"ea-field-messages__message ea-field-messages__message--error\"\n [id]=\"id() + '-error'\"\n role=\"alert\">\n <ea-icon-alert-circle class=\"ea-field-messages__icon\" />\n {{ error() }}\n </p>\n} @else if (hint()) {\n <p\n class=\"ea-field-messages__message ea-field-messages__message--hint\"\n [id]=\"id() + '-hint'\">\n {{ hint() }}\n </p>\n}\n", styles: [":host{display:contents}.ea-field-messages__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--ea-field-messages-size, var(--text-helper-size));font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-field-messages__message--hint{color:var(--color-text-secondary)}.ea-field-messages__message--error{color:var(--color-error-default)}.ea-field-messages__icon{flex-shrink:0;font-size:1.2em}\n"] }]
|
|
4197
4201
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }] } });
|
|
4198
4202
|
|
|
4199
4203
|
/**
|
|
@@ -6462,6 +6466,8 @@ class BreadcrumbsComponent {
|
|
|
6462
6466
|
i18n = inject(EagamiI18nService);
|
|
6463
6467
|
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
6464
6468
|
separator = input('chevron', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
|
|
6469
|
+
/** Visual size of the breadcrumb trail. */
|
|
6470
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
6465
6471
|
ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
|
|
6466
6472
|
/** Fires when a non-disabled, non-final breadcrumb is activated. */
|
|
6467
6473
|
clicked = output();
|
|
@@ -6478,12 +6484,12 @@ class BreadcrumbsComponent {
|
|
|
6478
6484
|
this.clicked.emit({ item, index, event });
|
|
6479
6485
|
}
|
|
6480
6486
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6481
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: BreadcrumbsComponent, isStandalone: true, selector: "ea-breadcrumbs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<nav\n class=\"ea-breadcrumbs\"\n [attr.aria-label]=\"resolvedAriaLabel()\">\n <ol class=\"ea-breadcrumbs__list\">\n @for (item of items(); track $index; let i = $index; let last = $last) {\n <li class=\"ea-breadcrumbs__item\">\n @if (last) {\n <span\n class=\"ea-breadcrumbs__current\"\n aria-current=\"page\">\n {{ item.label }}\n </span>\n } @else if (item.disabled) {\n <span class=\"ea-breadcrumbs__link ea-breadcrumbs__link--disabled\">\n {{ item.label }}\n </span>\n } @else if (item.href) {\n <a\n class=\"ea-breadcrumbs__link\"\n [href]=\"item.href\"\n (click)=\"handleClick(item, i, $event)\">\n {{ item.label }}\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"ea-breadcrumbs__link ea-breadcrumbs__link--button\"\n (click)=\"handleClick(item, i, $event)\">\n {{ item.label }}\n </button>\n }\n\n @if (!last) {\n @if (separator() === 'chevron') {\n <ea-icon-chevron-right\n class=\"ea-breadcrumbs__separator ea-rtl-flip\"\n aria-hidden=\"true\" />\n } @else {\n <span\n class=\"ea-breadcrumbs__separator ea-breadcrumbs__separator--slash\"\n aria-hidden=\"true\">\n /\n </span>\n }\n }\n </li>\n }\n </ol>\n</nav>\n", styles: [".ea-breadcrumbs{font-family:var(--font-family-sans);font-size:var(--font-size-sm)
|
|
6487
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: BreadcrumbsComponent, isStandalone: true, selector: "ea-breadcrumbs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<nav\n class=\"ea-breadcrumbs ea-breadcrumbs--{{ size() }}\"\n [attr.aria-label]=\"resolvedAriaLabel()\">\n <ol class=\"ea-breadcrumbs__list\">\n @for (item of items(); track $index; let i = $index; let last = $last) {\n <li class=\"ea-breadcrumbs__item\">\n @if (last) {\n <span\n class=\"ea-breadcrumbs__current\"\n aria-current=\"page\">\n {{ item.label }}\n </span>\n } @else if (item.disabled) {\n <span class=\"ea-breadcrumbs__link ea-breadcrumbs__link--disabled\">\n {{ item.label }}\n </span>\n } @else if (item.href) {\n <a\n class=\"ea-breadcrumbs__link\"\n [href]=\"item.href\"\n (click)=\"handleClick(item, i, $event)\">\n {{ item.label }}\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"ea-breadcrumbs__link ea-breadcrumbs__link--button\"\n (click)=\"handleClick(item, i, $event)\">\n {{ item.label }}\n </button>\n }\n\n @if (!last) {\n @if (separator() === 'chevron') {\n <ea-icon-chevron-right\n class=\"ea-breadcrumbs__separator ea-rtl-flip\"\n aria-hidden=\"true\" />\n } @else {\n <span\n class=\"ea-breadcrumbs__separator ea-breadcrumbs__separator--slash\"\n aria-hidden=\"true\">\n /\n </span>\n }\n }\n </li>\n }\n </ol>\n</nav>\n", styles: [".ea-breadcrumbs{font-family:var(--font-family-sans);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-breadcrumbs--xs{font-size:var(--font-size-xs)}.ea-breadcrumbs--sm{font-size:var(--font-size-sm)}.ea-breadcrumbs--md{font-size:var(--font-size-md)}.ea-breadcrumbs--lg{font-size:var(--font-size-lg)}.ea-breadcrumbs--xl{font-size:var(--font-size-xl)}.ea-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:.25em;padding:0;margin:0;list-style:none}.ea-breadcrumbs__item{display:inline-flex;align-items:center;gap:.25em;min-width:0}.ea-breadcrumbs__link{padding:.125em .25em;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);font-family:inherit;font-size:inherit;text-decoration:none;cursor:pointer;transition:var(--transition-colors)}.ea-breadcrumbs__link:hover:not(.ea-breadcrumbs__link--disabled){color:var(--color-text-primary);text-decoration:underline}.ea-breadcrumbs__link:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-breadcrumbs__link:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-breadcrumbs__link--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-breadcrumbs__current{padding:.125em .25em;font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.ea-breadcrumbs__separator{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;color:var(--color-text-tertiary);flex-shrink:0;-webkit-user-select:none;user-select:none}.ea-breadcrumbs__separator--slash{width:auto;height:auto}\n"], dependencies: [{ kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6482
6488
|
}
|
|
6483
6489
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
|
|
6484
6490
|
type: Component,
|
|
6485
|
-
args: [{ selector: 'ea-breadcrumbs', imports: [ChevronRightIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<nav\n class=\"ea-breadcrumbs\"\n [attr.aria-label]=\"resolvedAriaLabel()\">\n <ol class=\"ea-breadcrumbs__list\">\n @for (item of items(); track $index; let i = $index; let last = $last) {\n <li class=\"ea-breadcrumbs__item\">\n @if (last) {\n <span\n class=\"ea-breadcrumbs__current\"\n aria-current=\"page\">\n {{ item.label }}\n </span>\n } @else if (item.disabled) {\n <span class=\"ea-breadcrumbs__link ea-breadcrumbs__link--disabled\">\n {{ item.label }}\n </span>\n } @else if (item.href) {\n <a\n class=\"ea-breadcrumbs__link\"\n [href]=\"item.href\"\n (click)=\"handleClick(item, i, $event)\">\n {{ item.label }}\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"ea-breadcrumbs__link ea-breadcrumbs__link--button\"\n (click)=\"handleClick(item, i, $event)\">\n {{ item.label }}\n </button>\n }\n\n @if (!last) {\n @if (separator() === 'chevron') {\n <ea-icon-chevron-right\n class=\"ea-breadcrumbs__separator ea-rtl-flip\"\n aria-hidden=\"true\" />\n } @else {\n <span\n class=\"ea-breadcrumbs__separator ea-breadcrumbs__separator--slash\"\n aria-hidden=\"true\">\n /\n </span>\n }\n }\n </li>\n }\n </ol>\n</nav>\n", styles: [".ea-breadcrumbs{font-family:var(--font-family-sans);font-size:var(--font-size-sm)
|
|
6486
|
-
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
6491
|
+
args: [{ selector: 'ea-breadcrumbs', imports: [ChevronRightIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<nav\n class=\"ea-breadcrumbs ea-breadcrumbs--{{ size() }}\"\n [attr.aria-label]=\"resolvedAriaLabel()\">\n <ol class=\"ea-breadcrumbs__list\">\n @for (item of items(); track $index; let i = $index; let last = $last) {\n <li class=\"ea-breadcrumbs__item\">\n @if (last) {\n <span\n class=\"ea-breadcrumbs__current\"\n aria-current=\"page\">\n {{ item.label }}\n </span>\n } @else if (item.disabled) {\n <span class=\"ea-breadcrumbs__link ea-breadcrumbs__link--disabled\">\n {{ item.label }}\n </span>\n } @else if (item.href) {\n <a\n class=\"ea-breadcrumbs__link\"\n [href]=\"item.href\"\n (click)=\"handleClick(item, i, $event)\">\n {{ item.label }}\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"ea-breadcrumbs__link ea-breadcrumbs__link--button\"\n (click)=\"handleClick(item, i, $event)\">\n {{ item.label }}\n </button>\n }\n\n @if (!last) {\n @if (separator() === 'chevron') {\n <ea-icon-chevron-right\n class=\"ea-breadcrumbs__separator ea-rtl-flip\"\n aria-hidden=\"true\" />\n } @else {\n <span\n class=\"ea-breadcrumbs__separator ea-breadcrumbs__separator--slash\"\n aria-hidden=\"true\">\n /\n </span>\n }\n }\n </li>\n }\n </ol>\n</nav>\n", styles: [".ea-breadcrumbs{font-family:var(--font-family-sans);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-breadcrumbs--xs{font-size:var(--font-size-xs)}.ea-breadcrumbs--sm{font-size:var(--font-size-sm)}.ea-breadcrumbs--md{font-size:var(--font-size-md)}.ea-breadcrumbs--lg{font-size:var(--font-size-lg)}.ea-breadcrumbs--xl{font-size:var(--font-size-xl)}.ea-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:.25em;padding:0;margin:0;list-style:none}.ea-breadcrumbs__item{display:inline-flex;align-items:center;gap:.25em;min-width:0}.ea-breadcrumbs__link{padding:.125em .25em;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);font-family:inherit;font-size:inherit;text-decoration:none;cursor:pointer;transition:var(--transition-colors)}.ea-breadcrumbs__link:hover:not(.ea-breadcrumbs__link--disabled){color:var(--color-text-primary);text-decoration:underline}.ea-breadcrumbs__link:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-breadcrumbs__link:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-breadcrumbs__link--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-breadcrumbs__current{padding:.125em .25em;font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.ea-breadcrumbs__separator{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;color:var(--color-text-tertiary);flex-shrink:0;-webkit-user-select:none;user-select:none}.ea-breadcrumbs__separator--slash{width:auto;height:auto}\n"] }]
|
|
6492
|
+
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
6487
6493
|
|
|
6488
6494
|
/**
|
|
6489
6495
|
* Standard action button supporting primary, secondary, ghost, and danger
|
|
@@ -8103,6 +8109,8 @@ class DataTableComponent {
|
|
|
8103
8109
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
8104
8110
|
trackBy = input(undefined, ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
|
|
8105
8111
|
density = input('comfortable', ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
|
|
8112
|
+
/** Visual size of the table; density paddings and icons scale with it. */
|
|
8113
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
8106
8114
|
stickyHeader = input(false, ...(ngDevMode ? [{ debugName: "stickyHeader" }] : /* istanbul ignore next */ []));
|
|
8107
8115
|
striped = input(false, ...(ngDevMode ? [{ debugName: "striped" }] : /* istanbul ignore next */ []));
|
|
8108
8116
|
hoverable = input(true, ...(ngDevMode ? [{ debugName: "hoverable" }] : /* istanbul ignore next */ []));
|
|
@@ -8122,6 +8130,7 @@ class DataTableComponent {
|
|
|
8122
8130
|
resolvedNoDataText = computed(() => this.noDataText() ?? this.i18n.messages().dataTable.noData, ...(ngDevMode ? [{ debugName: "resolvedNoDataText" }] : /* istanbul ignore next */ []));
|
|
8123
8131
|
hostClasses = computed(() => ({
|
|
8124
8132
|
[`ea-data-table--${this.density()}`]: true,
|
|
8133
|
+
[`ea-data-table--${this.size()}`]: true,
|
|
8125
8134
|
'ea-data-table--sticky': this.stickyHeader(),
|
|
8126
8135
|
'ea-data-table--striped': this.striped(),
|
|
8127
8136
|
'ea-data-table--hoverable': this.hoverable(),
|
|
@@ -8311,7 +8320,7 @@ class DataTableComponent {
|
|
|
8311
8320
|
?.focus();
|
|
8312
8321
|
}
|
|
8313
8322
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8314
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DataTableComponent, isStandalone: true, selector: "ea-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, noDataText: { classPropertyName: "noDataText", publicName: "noDataText", isSignal: true, isRequired: false, transformFunction: null }, navigable: { classPropertyName: "navigable", publicName: "navigable", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", sorted: "sorted", rowActivate: "rowActivate" }, queries: [{ propertyName: "noDataTemplate", first: true, predicate: ["noData"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"ea-data-table\"\n [ngClass]=\"hostClasses()\">\n <div class=\"ea-data-table__scroll\">\n <table\n class=\"ea-data-table__table\"\n [attr.role]=\"navigable() ? 'grid' : null\"\n (keydown)=\"onGridKeydown($event)\">\n <thead class=\"ea-data-table__head\">\n <tr\n class=\"ea-data-table__row ea-data-table__row--header\"\n [attr.role]=\"navigable() ? 'row' : null\">\n @for (col of columns(); track col.key; let colIndex = $index) {\n <th\n scope=\"col\"\n class=\"ea-data-table__cell ea-data-table__cell--header\"\n [attr.role]=\"navigable() ? 'columnheader' : null\"\n [attr.data-ea-cell]=\"navigable() ? '0-' + colIndex : null\"\n [class.ea-data-table__cell--sortable]=\"col.sortable\"\n [class.ea-data-table__cell--sorted]=\"\n sort().column === col.key && sort().direction\n \"\n [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n [style.width]=\"col.width ?? null\"\n [attr.aria-sort]=\"\n sort().column === col.key && sort().direction === 'asc'\n ? 'ascending'\n : sort().column === col.key && sort().direction === 'desc'\n ? 'descending'\n : col.sortable\n ? 'none'\n : null\n \"\n (keydown.enter)=\"onHeaderKeydown($event, col)\"\n (keydown.space)=\"onHeaderKeydown($event, col)\"\n (focus)=\"onCellFocus(0, colIndex)\"\n [attr.tabindex]=\"headerTabindex(colIndex)\">\n @if (col.sortable) {\n <button\n type=\"button\"\n class=\"ea-data-table__sort-button\"\n [attr.tabindex]=\"navigable() ? -1 : null\"\n (click)=\"onHeaderClick(col)\"\n (focus)=\"onCellFocus(0, colIndex)\">\n @if (col.headerTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"col.headerTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n } @else {\n <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n }\n <span class=\"ea-data-table__sort-icon\">\n @if (sort().column === col.key && sort().direction === 'asc') {\n <ea-icon-arrow-up />\n } @else if (\n sort().column === col.key && sort().direction === 'desc'\n ) {\n <ea-icon-arrow-down />\n } @else {\n <ea-icon-chevrons-up-down />\n }\n </span>\n </button>\n } @else if (col.headerTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"col.headerTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n } @else {\n <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody class=\"ea-data-table__body\">\n @if (sortedData().length === 0) {\n <tr\n class=\"ea-data-table__row ea-data-table__row--empty\"\n [attr.role]=\"navigable() ? 'row' : null\">\n <td\n class=\"ea-data-table__cell ea-data-table__cell--empty\"\n [attr.role]=\"navigable() ? 'gridcell' : null\"\n [attr.colspan]=\"columns().length\">\n <div role=\"status\">\n @if (noDataTemplate()) {\n <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n } @else {\n {{ resolvedNoDataText() }}\n }\n </div>\n </td>\n </tr>\n } @else {\n @for (\n row of sortedData();\n track trackByFn($index, row);\n let rowIndex = $index\n ) {\n <tr\n class=\"ea-data-table__row\"\n [attr.role]=\"navigable() ? 'row' : null\"\n [attr.tabindex]=\"rowTabindex()\"\n (click)=\"onRowActivate(row)\"\n (keydown.enter)=\"onRowActivate(row, $event)\"\n (keydown.space)=\"onRowActivate(row, $event)\">\n @for (col of columns(); track col.key; let colIndex = $index) {\n <td\n class=\"ea-data-table__cell\"\n [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n [style.width]=\"col.width ?? null\"\n [attr.role]=\"navigable() ? 'gridcell' : null\"\n [attr.data-ea-cell]=\"navigable() ? rowIndex + 1 + '-' + colIndex : null\"\n [attr.tabindex]=\"bodyCellTabindex(rowIndex + 1, colIndex)\"\n (focus)=\"onCellFocus(rowIndex + 1, colIndex)\">\n @if (col.cellTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"col.cellTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n value: getCellValue(row, col.key),\n }\" />\n } @else if (col.format) {\n {{ col.format(getCellValue(row, col.key)) }}\n } @else {\n {{ getCellValue(row, col.key) }}\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n <ng-content select=\"ea-paginator\" />\n</div>\n", styles: [".ea-data-table{overflow:hidden;width:100%;border:var(--border-width-thin) solid var(--color-border-subtle);border-radius:var(--radius-lg);background-color:var(--ea-data-table-background-color, var(--color-bg-base))}.ea-data-table__scroll{overflow-x:auto}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-primary);table-layout:auto}.ea-data-table__head{background-color:var(--color-bg-stripe)}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:var(--text-label-sm-size);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-align:start;white-space:nowrap;color:var(--color-text-secondary);border-bottom:var(--border-width-thin) solid var(--color-border-subtle);-webkit-user-select:none;user-select:none}.ea-data-table__cell--sortable{cursor:pointer;transition:var(--transition-colors)}.ea-data-table__cell--sortable:hover{color:var(--color-text-primary);background-color:var(--color-state-hover)}.ea-data-table__cell--sorted{color:var(--color-brand-text)}.ea-data-table__sort-button{display:inline-flex;align-items:center;width:100%;padding:0;margin:0;font:inherit;text-transform:inherit;letter-spacing:inherit;border:none;background:none;color:inherit;cursor:pointer}.ea-data-table__sort-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-data-table__sort-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-data-table__cell--align-center .ea-data-table__sort-button{justify-content:center}.ea-data-table__cell--align-right .ea-data-table__sort-button{justify-content:flex-end}.ea-data-table__header-text{display:inline;vertical-align:middle}.ea-data-table__sort-icon{display:inline-flex;vertical-align:middle;width:1em;height:1em;margin-inline-start:var(--space-1);opacity:.5;transition:var(--transition-opacity)}.ea-data-table__cell--sortable:hover .ea-data-table__sort-icon,.ea-data-table__cell--sorted .ea-data-table__sort-icon{opacity:1}.ea-data-table__row{border-bottom:var(--border-width-thin) solid var(--ea-data-table-row-border-color, var(--color-border-subtle));transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom:none}.ea-data-table__cell{text-align:start;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:end}.ea-data-table__cell--empty{text-align:center;color:var(--color-text-tertiary);font-style:italic}.ea-data-table--compact .ea-data-table__cell{padding:var(--space-1-5) var(--space-3)}.ea-data-table--comfortable .ea-data-table__cell{padding:var(--space-2-5) var(--space-4)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--space-4) var(--space-6)}.ea-data-table--sticky,.ea-data-table--sticky .ea-data-table__scroll{max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__table{display:flex;flex-direction:column;min-width:32rem;max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__head{display:block;flex-shrink:0}.ea-data-table--sticky .ea-data-table__head .ea-data-table__row--header{display:table;width:100%;table-layout:fixed}.ea-data-table--sticky .ea-data-table__body{display:block;overflow-y:auto;flex:1 1 auto;min-height:0}.ea-data-table--sticky .ea-data-table__body .ea-data-table__row{display:table;width:100%;table-layout:fixed}.ea-data-table--striped .ea-data-table__body .ea-data-table__row:nth-child(2n){background-color:var(--ea-data-table-row-stripe-background-color, var(--color-bg-stripe-subtle))}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:var(--ea-data-table-row-hover-background-color, var(--color-state-hover))}@media(forced-colors:active){.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:Highlight;color:HighlightText}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover .ea-data-table__cell--sorted{color:HighlightText}}.ea-data-table--clickable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty){cursor:var(--ea-data-table-row-cursor, pointer)}.ea-data-table--bordered .ea-data-table__cell{border-inline-end:var(--border-width-thin) solid var(--color-border-subtle)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-inline-end:none}.ea-data-table--navigable .ea-data-table__cell:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:calc(-1 * var(--border-width-medium));box-shadow:none}\n"], dependencies: [{ kind: "component", type: ArrowDownIconComponent, selector: "ea-icon-arrow-down" }, { kind: "component", type: ArrowUpIconComponent, selector: "ea-icon-arrow-up" }, { kind: "component", type: ChevronsUpDownIconComponent, selector: "ea-icon-chevrons-up-down" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8323
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DataTableComponent, isStandalone: true, selector: "ea-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, noDataText: { classPropertyName: "noDataText", publicName: "noDataText", isSignal: true, isRequired: false, transformFunction: null }, navigable: { classPropertyName: "navigable", publicName: "navigable", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", sorted: "sorted", rowActivate: "rowActivate" }, queries: [{ propertyName: "noDataTemplate", first: true, predicate: ["noData"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"ea-data-table\"\n [ngClass]=\"hostClasses()\">\n <div class=\"ea-data-table__scroll\">\n <table\n class=\"ea-data-table__table\"\n [attr.role]=\"navigable() ? 'grid' : null\"\n (keydown)=\"onGridKeydown($event)\">\n <thead class=\"ea-data-table__head\">\n <tr\n class=\"ea-data-table__row ea-data-table__row--header\"\n [attr.role]=\"navigable() ? 'row' : null\">\n @for (col of columns(); track col.key; let colIndex = $index) {\n <th\n scope=\"col\"\n class=\"ea-data-table__cell ea-data-table__cell--header\"\n [attr.role]=\"navigable() ? 'columnheader' : null\"\n [attr.data-ea-cell]=\"navigable() ? '0-' + colIndex : null\"\n [class.ea-data-table__cell--sortable]=\"col.sortable\"\n [class.ea-data-table__cell--sorted]=\"\n sort().column === col.key && sort().direction\n \"\n [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n [style.width]=\"col.width ?? null\"\n [attr.aria-sort]=\"\n sort().column === col.key && sort().direction === 'asc'\n ? 'ascending'\n : sort().column === col.key && sort().direction === 'desc'\n ? 'descending'\n : col.sortable\n ? 'none'\n : null\n \"\n (keydown.enter)=\"onHeaderKeydown($event, col)\"\n (keydown.space)=\"onHeaderKeydown($event, col)\"\n (focus)=\"onCellFocus(0, colIndex)\"\n [attr.tabindex]=\"headerTabindex(colIndex)\">\n @if (col.sortable) {\n <button\n type=\"button\"\n class=\"ea-data-table__sort-button\"\n [attr.tabindex]=\"navigable() ? -1 : null\"\n (click)=\"onHeaderClick(col)\"\n (focus)=\"onCellFocus(0, colIndex)\">\n @if (col.headerTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"col.headerTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n } @else {\n <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n }\n <span class=\"ea-data-table__sort-icon\">\n @if (sort().column === col.key && sort().direction === 'asc') {\n <ea-icon-arrow-up />\n } @else if (\n sort().column === col.key && sort().direction === 'desc'\n ) {\n <ea-icon-arrow-down />\n } @else {\n <ea-icon-chevrons-up-down />\n }\n </span>\n </button>\n } @else if (col.headerTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"col.headerTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n } @else {\n <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody class=\"ea-data-table__body\">\n @if (sortedData().length === 0) {\n <tr\n class=\"ea-data-table__row ea-data-table__row--empty\"\n [attr.role]=\"navigable() ? 'row' : null\">\n <td\n class=\"ea-data-table__cell ea-data-table__cell--empty\"\n [attr.role]=\"navigable() ? 'gridcell' : null\"\n [attr.colspan]=\"columns().length\">\n <div role=\"status\">\n @if (noDataTemplate()) {\n <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n } @else {\n {{ resolvedNoDataText() }}\n }\n </div>\n </td>\n </tr>\n } @else {\n @for (\n row of sortedData();\n track trackByFn($index, row);\n let rowIndex = $index\n ) {\n <tr\n class=\"ea-data-table__row\"\n [attr.role]=\"navigable() ? 'row' : null\"\n [attr.tabindex]=\"rowTabindex()\"\n (click)=\"onRowActivate(row)\"\n (keydown.enter)=\"onRowActivate(row, $event)\"\n (keydown.space)=\"onRowActivate(row, $event)\">\n @for (col of columns(); track col.key; let colIndex = $index) {\n <td\n class=\"ea-data-table__cell\"\n [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n [style.width]=\"col.width ?? null\"\n [attr.role]=\"navigable() ? 'gridcell' : null\"\n [attr.data-ea-cell]=\"navigable() ? rowIndex + 1 + '-' + colIndex : null\"\n [attr.tabindex]=\"bodyCellTabindex(rowIndex + 1, colIndex)\"\n (focus)=\"onCellFocus(rowIndex + 1, colIndex)\">\n @if (col.cellTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"col.cellTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n value: getCellValue(row, col.key),\n }\" />\n } @else if (col.format) {\n {{ col.format(getCellValue(row, col.key)) }}\n } @else {\n {{ getCellValue(row, col.key) }}\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n <ng-content select=\"ea-paginator\" />\n</div>\n", styles: [".ea-data-table{--ea-data-table-font-size: var(--font-size-md);overflow:hidden;width:100%;border:var(--border-width-thin) solid var(--color-border-subtle);border-radius:var(--radius-lg);background-color:var(--ea-data-table-background-color, var(--color-bg-base))}.ea-data-table__scroll{overflow-x:auto}.ea-data-table--xs{--ea-data-table-font-size: var(--font-size-xs)}.ea-data-table--sm{--ea-data-table-font-size: var(--font-size-sm)}.ea-data-table--md{--ea-data-table-font-size: var(--font-size-md)}.ea-data-table--lg{--ea-data-table-font-size: var(--font-size-lg)}.ea-data-table--xl{--ea-data-table-font-size: var(--font-size-xl)}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--ea-data-table-font-size);color:var(--color-text-primary);table-layout:auto}.ea-data-table__head{background-color:var(--color-bg-stripe)}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:calc(var(--ea-data-table-font-size) * .75);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-align:start;white-space:nowrap;color:var(--color-text-secondary);border-bottom:var(--border-width-thin) solid var(--color-border-subtle);-webkit-user-select:none;user-select:none}.ea-data-table__cell--sortable{cursor:pointer;transition:var(--transition-colors)}.ea-data-table__cell--sortable:hover{color:var(--color-text-primary);background-color:var(--color-state-hover)}.ea-data-table__cell--sorted{color:var(--color-brand-text)}.ea-data-table__sort-button{display:inline-flex;align-items:center;width:100%;padding:0;margin:0;font:inherit;text-transform:inherit;letter-spacing:inherit;border:none;background:none;color:inherit;cursor:pointer}.ea-data-table__sort-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-data-table__sort-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-data-table__cell--align-center .ea-data-table__sort-button{justify-content:center}.ea-data-table__cell--align-right .ea-data-table__sort-button{justify-content:flex-end}.ea-data-table__header-text{display:inline;vertical-align:middle}.ea-data-table__sort-icon{display:inline-flex;vertical-align:middle;width:1em;height:1em;margin-inline-start:calc(var(--ea-data-table-font-size) * .25);opacity:.5;transition:var(--transition-opacity)}.ea-data-table__cell--sortable:hover .ea-data-table__sort-icon,.ea-data-table__cell--sorted .ea-data-table__sort-icon{opacity:1}.ea-data-table__row{border-bottom:var(--border-width-thin) solid var(--ea-data-table-row-border-color, var(--color-border-subtle));transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom:none}.ea-data-table__cell{text-align:start;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:end}.ea-data-table__cell--empty{text-align:center;color:var(--color-text-tertiary);font-style:italic}.ea-data-table--compact .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .375) calc(var(--ea-data-table-font-size) * .75)}.ea-data-table--comfortable .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .625) var(--ea-data-table-font-size)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--ea-data-table-font-size) calc(var(--ea-data-table-font-size) * 1.5)}.ea-data-table--sticky,.ea-data-table--sticky .ea-data-table__scroll{max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__table{display:flex;flex-direction:column;min-width:calc(var(--ea-data-table-font-size) * 32);max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__head{display:block;flex-shrink:0}.ea-data-table--sticky .ea-data-table__head .ea-data-table__row--header{display:table;width:100%;table-layout:fixed}.ea-data-table--sticky .ea-data-table__body{display:block;overflow-y:auto;flex:1 1 auto;min-height:0}.ea-data-table--sticky .ea-data-table__body .ea-data-table__row{display:table;width:100%;table-layout:fixed}.ea-data-table--striped .ea-data-table__body .ea-data-table__row:nth-child(2n){background-color:var(--ea-data-table-row-stripe-background-color, var(--color-bg-stripe-subtle))}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:var(--ea-data-table-row-hover-background-color, var(--color-state-hover))}@media(forced-colors:active){.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:Highlight;color:HighlightText}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover .ea-data-table__cell--sorted{color:HighlightText}}.ea-data-table--clickable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty){cursor:var(--ea-data-table-row-cursor, pointer)}.ea-data-table--bordered .ea-data-table__cell{border-inline-end:var(--border-width-thin) solid var(--color-border-subtle)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-inline-end:none}.ea-data-table--navigable .ea-data-table__cell:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:calc(-1 * var(--border-width-medium));box-shadow:none}\n"], dependencies: [{ kind: "component", type: ArrowDownIconComponent, selector: "ea-icon-arrow-down" }, { kind: "component", type: ArrowUpIconComponent, selector: "ea-icon-arrow-up" }, { kind: "component", type: ChevronsUpDownIconComponent, selector: "ea-icon-chevrons-up-down" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8315
8324
|
}
|
|
8316
8325
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DataTableComponent, decorators: [{
|
|
8317
8326
|
type: Component,
|
|
@@ -8321,8 +8330,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
8321
8330
|
ChevronsUpDownIconComponent,
|
|
8322
8331
|
NgClass,
|
|
8323
8332
|
NgTemplateOutlet,
|
|
8324
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ea-data-table\"\n [ngClass]=\"hostClasses()\">\n <div class=\"ea-data-table__scroll\">\n <table\n class=\"ea-data-table__table\"\n [attr.role]=\"navigable() ? 'grid' : null\"\n (keydown)=\"onGridKeydown($event)\">\n <thead class=\"ea-data-table__head\">\n <tr\n class=\"ea-data-table__row ea-data-table__row--header\"\n [attr.role]=\"navigable() ? 'row' : null\">\n @for (col of columns(); track col.key; let colIndex = $index) {\n <th\n scope=\"col\"\n class=\"ea-data-table__cell ea-data-table__cell--header\"\n [attr.role]=\"navigable() ? 'columnheader' : null\"\n [attr.data-ea-cell]=\"navigable() ? '0-' + colIndex : null\"\n [class.ea-data-table__cell--sortable]=\"col.sortable\"\n [class.ea-data-table__cell--sorted]=\"\n sort().column === col.key && sort().direction\n \"\n [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n [style.width]=\"col.width ?? null\"\n [attr.aria-sort]=\"\n sort().column === col.key && sort().direction === 'asc'\n ? 'ascending'\n : sort().column === col.key && sort().direction === 'desc'\n ? 'descending'\n : col.sortable\n ? 'none'\n : null\n \"\n (keydown.enter)=\"onHeaderKeydown($event, col)\"\n (keydown.space)=\"onHeaderKeydown($event, col)\"\n (focus)=\"onCellFocus(0, colIndex)\"\n [attr.tabindex]=\"headerTabindex(colIndex)\">\n @if (col.sortable) {\n <button\n type=\"button\"\n class=\"ea-data-table__sort-button\"\n [attr.tabindex]=\"navigable() ? -1 : null\"\n (click)=\"onHeaderClick(col)\"\n (focus)=\"onCellFocus(0, colIndex)\">\n @if (col.headerTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"col.headerTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n } @else {\n <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n }\n <span class=\"ea-data-table__sort-icon\">\n @if (sort().column === col.key && sort().direction === 'asc') {\n <ea-icon-arrow-up />\n } @else if (\n sort().column === col.key && sort().direction === 'desc'\n ) {\n <ea-icon-arrow-down />\n } @else {\n <ea-icon-chevrons-up-down />\n }\n </span>\n </button>\n } @else if (col.headerTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"col.headerTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n } @else {\n <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody class=\"ea-data-table__body\">\n @if (sortedData().length === 0) {\n <tr\n class=\"ea-data-table__row ea-data-table__row--empty\"\n [attr.role]=\"navigable() ? 'row' : null\">\n <td\n class=\"ea-data-table__cell ea-data-table__cell--empty\"\n [attr.role]=\"navigable() ? 'gridcell' : null\"\n [attr.colspan]=\"columns().length\">\n <div role=\"status\">\n @if (noDataTemplate()) {\n <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n } @else {\n {{ resolvedNoDataText() }}\n }\n </div>\n </td>\n </tr>\n } @else {\n @for (\n row of sortedData();\n track trackByFn($index, row);\n let rowIndex = $index\n ) {\n <tr\n class=\"ea-data-table__row\"\n [attr.role]=\"navigable() ? 'row' : null\"\n [attr.tabindex]=\"rowTabindex()\"\n (click)=\"onRowActivate(row)\"\n (keydown.enter)=\"onRowActivate(row, $event)\"\n (keydown.space)=\"onRowActivate(row, $event)\">\n @for (col of columns(); track col.key; let colIndex = $index) {\n <td\n class=\"ea-data-table__cell\"\n [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n [style.width]=\"col.width ?? null\"\n [attr.role]=\"navigable() ? 'gridcell' : null\"\n [attr.data-ea-cell]=\"navigable() ? rowIndex + 1 + '-' + colIndex : null\"\n [attr.tabindex]=\"bodyCellTabindex(rowIndex + 1, colIndex)\"\n (focus)=\"onCellFocus(rowIndex + 1, colIndex)\">\n @if (col.cellTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"col.cellTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n value: getCellValue(row, col.key),\n }\" />\n } @else if (col.format) {\n {{ col.format(getCellValue(row, col.key)) }}\n } @else {\n {{ getCellValue(row, col.key) }}\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n <ng-content select=\"ea-paginator\" />\n</div>\n", styles: [".ea-data-table{overflow:hidden;width:100%;border:var(--border-width-thin) solid var(--color-border-subtle);border-radius:var(--radius-lg);background-color:var(--ea-data-table-background-color, var(--color-bg-base))}.ea-data-table__scroll{overflow-x:auto}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-primary);table-layout:auto}.ea-data-table__head{background-color:var(--color-bg-stripe)}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:var(--text-label-sm-size);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-align:start;white-space:nowrap;color:var(--color-text-secondary);border-bottom:var(--border-width-thin) solid var(--color-border-subtle);-webkit-user-select:none;user-select:none}.ea-data-table__cell--sortable{cursor:pointer;transition:var(--transition-colors)}.ea-data-table__cell--sortable:hover{color:var(--color-text-primary);background-color:var(--color-state-hover)}.ea-data-table__cell--sorted{color:var(--color-brand-text)}.ea-data-table__sort-button{display:inline-flex;align-items:center;width:100%;padding:0;margin:0;font:inherit;text-transform:inherit;letter-spacing:inherit;border:none;background:none;color:inherit;cursor:pointer}.ea-data-table__sort-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-data-table__sort-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-data-table__cell--align-center .ea-data-table__sort-button{justify-content:center}.ea-data-table__cell--align-right .ea-data-table__sort-button{justify-content:flex-end}.ea-data-table__header-text{display:inline;vertical-align:middle}.ea-data-table__sort-icon{display:inline-flex;vertical-align:middle;width:1em;height:1em;margin-inline-start:var(--space-1);opacity:.5;transition:var(--transition-opacity)}.ea-data-table__cell--sortable:hover .ea-data-table__sort-icon,.ea-data-table__cell--sorted .ea-data-table__sort-icon{opacity:1}.ea-data-table__row{border-bottom:var(--border-width-thin) solid var(--ea-data-table-row-border-color, var(--color-border-subtle));transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom:none}.ea-data-table__cell{text-align:start;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:end}.ea-data-table__cell--empty{text-align:center;color:var(--color-text-tertiary);font-style:italic}.ea-data-table--compact .ea-data-table__cell{padding:var(--space-1-5) var(--space-3)}.ea-data-table--comfortable .ea-data-table__cell{padding:var(--space-2-5) var(--space-4)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--space-4) var(--space-6)}.ea-data-table--sticky,.ea-data-table--sticky .ea-data-table__scroll{max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__table{display:flex;flex-direction:column;min-width:32rem;max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__head{display:block;flex-shrink:0}.ea-data-table--sticky .ea-data-table__head .ea-data-table__row--header{display:table;width:100%;table-layout:fixed}.ea-data-table--sticky .ea-data-table__body{display:block;overflow-y:auto;flex:1 1 auto;min-height:0}.ea-data-table--sticky .ea-data-table__body .ea-data-table__row{display:table;width:100%;table-layout:fixed}.ea-data-table--striped .ea-data-table__body .ea-data-table__row:nth-child(2n){background-color:var(--ea-data-table-row-stripe-background-color, var(--color-bg-stripe-subtle))}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:var(--ea-data-table-row-hover-background-color, var(--color-state-hover))}@media(forced-colors:active){.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:Highlight;color:HighlightText}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover .ea-data-table__cell--sorted{color:HighlightText}}.ea-data-table--clickable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty){cursor:var(--ea-data-table-row-cursor, pointer)}.ea-data-table--bordered .ea-data-table__cell{border-inline-end:var(--border-width-thin) solid var(--color-border-subtle)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-inline-end:none}.ea-data-table--navigable .ea-data-table__cell:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:calc(-1 * var(--border-width-medium));box-shadow:none}\n"] }]
|
|
8325
|
-
}], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], noDataText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataText", required: false }] }], navigable: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigable", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], sorted: [{ type: i0.Output, args: ["sorted"] }], rowActivate: [{ type: i0.Output, args: ["rowActivate"] }], noDataTemplate: [{ type: i0.ContentChild, args: ['noData', { isSignal: true }] }] } });
|
|
8333
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ea-data-table\"\n [ngClass]=\"hostClasses()\">\n <div class=\"ea-data-table__scroll\">\n <table\n class=\"ea-data-table__table\"\n [attr.role]=\"navigable() ? 'grid' : null\"\n (keydown)=\"onGridKeydown($event)\">\n <thead class=\"ea-data-table__head\">\n <tr\n class=\"ea-data-table__row ea-data-table__row--header\"\n [attr.role]=\"navigable() ? 'row' : null\">\n @for (col of columns(); track col.key; let colIndex = $index) {\n <th\n scope=\"col\"\n class=\"ea-data-table__cell ea-data-table__cell--header\"\n [attr.role]=\"navigable() ? 'columnheader' : null\"\n [attr.data-ea-cell]=\"navigable() ? '0-' + colIndex : null\"\n [class.ea-data-table__cell--sortable]=\"col.sortable\"\n [class.ea-data-table__cell--sorted]=\"\n sort().column === col.key && sort().direction\n \"\n [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n [style.width]=\"col.width ?? null\"\n [attr.aria-sort]=\"\n sort().column === col.key && sort().direction === 'asc'\n ? 'ascending'\n : sort().column === col.key && sort().direction === 'desc'\n ? 'descending'\n : col.sortable\n ? 'none'\n : null\n \"\n (keydown.enter)=\"onHeaderKeydown($event, col)\"\n (keydown.space)=\"onHeaderKeydown($event, col)\"\n (focus)=\"onCellFocus(0, colIndex)\"\n [attr.tabindex]=\"headerTabindex(colIndex)\">\n @if (col.sortable) {\n <button\n type=\"button\"\n class=\"ea-data-table__sort-button\"\n [attr.tabindex]=\"navigable() ? -1 : null\"\n (click)=\"onHeaderClick(col)\"\n (focus)=\"onCellFocus(0, colIndex)\">\n @if (col.headerTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"col.headerTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n } @else {\n <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n }\n <span class=\"ea-data-table__sort-icon\">\n @if (sort().column === col.key && sort().direction === 'asc') {\n <ea-icon-arrow-up />\n } @else if (\n sort().column === col.key && sort().direction === 'desc'\n ) {\n <ea-icon-arrow-down />\n } @else {\n <ea-icon-chevrons-up-down />\n }\n </span>\n </button>\n } @else if (col.headerTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"col.headerTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n } @else {\n <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody class=\"ea-data-table__body\">\n @if (sortedData().length === 0) {\n <tr\n class=\"ea-data-table__row ea-data-table__row--empty\"\n [attr.role]=\"navigable() ? 'row' : null\">\n <td\n class=\"ea-data-table__cell ea-data-table__cell--empty\"\n [attr.role]=\"navigable() ? 'gridcell' : null\"\n [attr.colspan]=\"columns().length\">\n <div role=\"status\">\n @if (noDataTemplate()) {\n <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n } @else {\n {{ resolvedNoDataText() }}\n }\n </div>\n </td>\n </tr>\n } @else {\n @for (\n row of sortedData();\n track trackByFn($index, row);\n let rowIndex = $index\n ) {\n <tr\n class=\"ea-data-table__row\"\n [attr.role]=\"navigable() ? 'row' : null\"\n [attr.tabindex]=\"rowTabindex()\"\n (click)=\"onRowActivate(row)\"\n (keydown.enter)=\"onRowActivate(row, $event)\"\n (keydown.space)=\"onRowActivate(row, $event)\">\n @for (col of columns(); track col.key; let colIndex = $index) {\n <td\n class=\"ea-data-table__cell\"\n [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n [style.width]=\"col.width ?? null\"\n [attr.role]=\"navigable() ? 'gridcell' : null\"\n [attr.data-ea-cell]=\"navigable() ? rowIndex + 1 + '-' + colIndex : null\"\n [attr.tabindex]=\"bodyCellTabindex(rowIndex + 1, colIndex)\"\n (focus)=\"onCellFocus(rowIndex + 1, colIndex)\">\n @if (col.cellTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"col.cellTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n value: getCellValue(row, col.key),\n }\" />\n } @else if (col.format) {\n {{ col.format(getCellValue(row, col.key)) }}\n } @else {\n {{ getCellValue(row, col.key) }}\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n <ng-content select=\"ea-paginator\" />\n</div>\n", styles: [".ea-data-table{--ea-data-table-font-size: var(--font-size-md);overflow:hidden;width:100%;border:var(--border-width-thin) solid var(--color-border-subtle);border-radius:var(--radius-lg);background-color:var(--ea-data-table-background-color, var(--color-bg-base))}.ea-data-table__scroll{overflow-x:auto}.ea-data-table--xs{--ea-data-table-font-size: var(--font-size-xs)}.ea-data-table--sm{--ea-data-table-font-size: var(--font-size-sm)}.ea-data-table--md{--ea-data-table-font-size: var(--font-size-md)}.ea-data-table--lg{--ea-data-table-font-size: var(--font-size-lg)}.ea-data-table--xl{--ea-data-table-font-size: var(--font-size-xl)}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--ea-data-table-font-size);color:var(--color-text-primary);table-layout:auto}.ea-data-table__head{background-color:var(--color-bg-stripe)}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:calc(var(--ea-data-table-font-size) * .75);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-align:start;white-space:nowrap;color:var(--color-text-secondary);border-bottom:var(--border-width-thin) solid var(--color-border-subtle);-webkit-user-select:none;user-select:none}.ea-data-table__cell--sortable{cursor:pointer;transition:var(--transition-colors)}.ea-data-table__cell--sortable:hover{color:var(--color-text-primary);background-color:var(--color-state-hover)}.ea-data-table__cell--sorted{color:var(--color-brand-text)}.ea-data-table__sort-button{display:inline-flex;align-items:center;width:100%;padding:0;margin:0;font:inherit;text-transform:inherit;letter-spacing:inherit;border:none;background:none;color:inherit;cursor:pointer}.ea-data-table__sort-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-data-table__sort-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-data-table__cell--align-center .ea-data-table__sort-button{justify-content:center}.ea-data-table__cell--align-right .ea-data-table__sort-button{justify-content:flex-end}.ea-data-table__header-text{display:inline;vertical-align:middle}.ea-data-table__sort-icon{display:inline-flex;vertical-align:middle;width:1em;height:1em;margin-inline-start:calc(var(--ea-data-table-font-size) * .25);opacity:.5;transition:var(--transition-opacity)}.ea-data-table__cell--sortable:hover .ea-data-table__sort-icon,.ea-data-table__cell--sorted .ea-data-table__sort-icon{opacity:1}.ea-data-table__row{border-bottom:var(--border-width-thin) solid var(--ea-data-table-row-border-color, var(--color-border-subtle));transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom:none}.ea-data-table__cell{text-align:start;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:end}.ea-data-table__cell--empty{text-align:center;color:var(--color-text-tertiary);font-style:italic}.ea-data-table--compact .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .375) calc(var(--ea-data-table-font-size) * .75)}.ea-data-table--comfortable .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .625) var(--ea-data-table-font-size)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--ea-data-table-font-size) calc(var(--ea-data-table-font-size) * 1.5)}.ea-data-table--sticky,.ea-data-table--sticky .ea-data-table__scroll{max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__table{display:flex;flex-direction:column;min-width:calc(var(--ea-data-table-font-size) * 32);max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__head{display:block;flex-shrink:0}.ea-data-table--sticky .ea-data-table__head .ea-data-table__row--header{display:table;width:100%;table-layout:fixed}.ea-data-table--sticky .ea-data-table__body{display:block;overflow-y:auto;flex:1 1 auto;min-height:0}.ea-data-table--sticky .ea-data-table__body .ea-data-table__row{display:table;width:100%;table-layout:fixed}.ea-data-table--striped .ea-data-table__body .ea-data-table__row:nth-child(2n){background-color:var(--ea-data-table-row-stripe-background-color, var(--color-bg-stripe-subtle))}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:var(--ea-data-table-row-hover-background-color, var(--color-state-hover))}@media(forced-colors:active){.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:Highlight;color:HighlightText}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover .ea-data-table__cell--sorted{color:HighlightText}}.ea-data-table--clickable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty){cursor:var(--ea-data-table-row-cursor, pointer)}.ea-data-table--bordered .ea-data-table__cell{border-inline-end:var(--border-width-thin) solid var(--color-border-subtle)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-inline-end:none}.ea-data-table--navigable .ea-data-table__cell:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:calc(-1 * var(--border-width-medium));box-shadow:none}\n"] }]
|
|
8334
|
+
}], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], noDataText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataText", required: false }] }], navigable: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigable", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], sorted: [{ type: i0.Output, args: ["sorted"] }], rowActivate: [{ type: i0.Output, args: ["rowActivate"] }], noDataTemplate: [{ type: i0.ContentChild, args: ['noData', { isSignal: true }] }] } });
|
|
8326
8335
|
|
|
8327
8336
|
/**
|
|
8328
8337
|
* Verification code entry made up of one input per digit. Auto-advances on
|
|
@@ -10313,6 +10322,8 @@ class FormFieldComponent {
|
|
|
10313
10322
|
errorMessages = input(undefined, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
|
|
10314
10323
|
/** Marks the field as required. */
|
|
10315
10324
|
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
10325
|
+
/** Visual size of the field; the label, control text, spacing, and messages scale with it. */
|
|
10326
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
10316
10327
|
/** id seed for the label and message wiring; auto-generated when omitted. */
|
|
10317
10328
|
id = input(uniqueId('ea-form-field'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
10318
10329
|
ngControl = contentChild(NgControl, ...(ngDevMode ? [{ debugName: "ngControl" }] : /* istanbul ignore next */ []));
|
|
@@ -10384,12 +10395,12 @@ class FormFieldComponent {
|
|
|
10384
10395
|
});
|
|
10385
10396
|
}
|
|
10386
10397
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10387
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FormFieldComponent, isStandalone: true, selector: "ea-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-form-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"controlId()\"\n [required]=\"required()\" />\n }\n\n <ng-content />\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-form-field{display:flex;flex-direction:column;gap:var(--
|
|
10398
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FormFieldComponent, isStandalone: true, selector: "ea-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-form-field ea-form-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"controlId()\"\n [required]=\"required()\" />\n }\n\n <ng-content />\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-form-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-form-field--xs{font-size:var(--font-size-xs)}.ea-form-field--sm{font-size:var(--font-size-sm)}.ea-form-field--md{font-size:var(--font-size-md)}.ea-form-field--lg{font-size:var(--font-size-lg)}.ea-form-field--xl{font-size:var(--font-size-xl)}.ea-form-field :is(input,select,textarea){font:inherit}\n"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10388
10399
|
}
|
|
10389
10400
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
10390
10401
|
type: Component,
|
|
10391
|
-
args: [{ selector: 'ea-form-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FieldLabelComponent, FieldMessagesComponent], template: "<div class=\"ea-form-field\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"controlId()\"\n [required]=\"required()\" />\n }\n\n <ng-content />\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-form-field{display:flex;flex-direction:column;gap:var(--
|
|
10392
|
-
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ngControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgControl), { isSignal: true }] }] } });
|
|
10402
|
+
args: [{ selector: 'ea-form-field', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [FieldLabelComponent, FieldMessagesComponent], template: "<div class=\"ea-form-field ea-form-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"controlId()\"\n [required]=\"required()\" />\n }\n\n <ng-content />\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-form-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-form-field--xs{font-size:var(--font-size-xs)}.ea-form-field--sm{font-size:var(--font-size-sm)}.ea-form-field--md{font-size:var(--font-size-md)}.ea-form-field--lg{font-size:var(--font-size-lg)}.ea-form-field--xl{font-size:var(--font-size-xl)}.ea-form-field :is(input,select,textarea){font:inherit}\n"] }]
|
|
10403
|
+
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ngControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgControl), { isSignal: true }] }] } });
|
|
10393
10404
|
|
|
10394
10405
|
class ArchiveIconComponent extends IconComponentBase {
|
|
10395
10406
|
static slug = 'archive';
|
|
@@ -11690,6 +11701,8 @@ class MenuComponent {
|
|
|
11690
11701
|
i18n = inject(EagamiI18nService);
|
|
11691
11702
|
listEl = viewChild('listEl', ...(ngDevMode ? [{ debugName: "listEl" }] : /* istanbul ignore next */ []));
|
|
11692
11703
|
placement = input('bottom-start', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
|
|
11704
|
+
/** Visual size of the menu; every item inherits it. */
|
|
11705
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
11693
11706
|
/** Max height of the scrollable list as a CSS length; tall menus scroll past it. */
|
|
11694
11707
|
maxHeight = input('20rem', ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
|
|
11695
11708
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
@@ -11836,12 +11849,12 @@ class MenuComponent {
|
|
|
11836
11849
|
this.close(true);
|
|
11837
11850
|
}
|
|
11838
11851
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11839
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.16", type: MenuComponent, isStandalone: true, selector: "ea-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", 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 }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:keydown": "onKeydown($event)", "document:keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "listEl", first: true, predicate: ["listEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ea-popover\n [anchor]=\"triggerEl()\"\n [open]=\"open()\"\n [placement]=\"placement()\"\n role=\"menu\"\n [surfaceId]=\"id()\"\n [ariaLabel]=\"resolvedAriaLabel()\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"reposition\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n #listEl\n class=\"ea-menu__list\"\n [style.max-height]=\"maxHeight()\">\n <ng-content />\n </div>\n</ea-popover>\n", styles: [":host{display:contents}.ea-menu__list{min-width:
|
|
11852
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.16", type: MenuComponent, isStandalone: true, selector: "ea-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", 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 }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:keydown": "onKeydown($event)", "document:keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "listEl", first: true, predicate: ["listEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ea-popover\n [anchor]=\"triggerEl()\"\n [open]=\"open()\"\n [placement]=\"placement()\"\n role=\"menu\"\n [surfaceId]=\"id()\"\n [ariaLabel]=\"resolvedAriaLabel()\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"reposition\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n #listEl\n class=\"ea-menu__list ea-menu__list--{{ size() }}\"\n [style.max-height]=\"maxHeight()\">\n <ng-content />\n </div>\n</ea-popover>\n", styles: [":host{display:contents}.ea-menu__list{min-width:10em;padding:.25em 0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-menu-list-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-menu__list{border:1px solid CanvasText}}.ea-menu__list--xs{font-size:var(--font-size-xs)}.ea-menu__list--sm{font-size:var(--font-size-sm)}.ea-menu__list--md{font-size:var(--font-size-md)}.ea-menu__list--lg{font-size:var(--font-size-lg)}.ea-menu__list--xl{font-size:var(--font-size-xl)}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11840
11853
|
}
|
|
11841
11854
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: MenuComponent, decorators: [{
|
|
11842
11855
|
type: Component,
|
|
11843
|
-
args: [{ selector: 'ea-menu', imports: [PopoverComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ea-popover\n [anchor]=\"triggerEl()\"\n [open]=\"open()\"\n [placement]=\"placement()\"\n role=\"menu\"\n [surfaceId]=\"id()\"\n [ariaLabel]=\"resolvedAriaLabel()\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"reposition\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n #listEl\n class=\"ea-menu__list\"\n [style.max-height]=\"maxHeight()\">\n <ng-content />\n </div>\n</ea-popover>\n", styles: [":host{display:contents}.ea-menu__list{min-width:
|
|
11844
|
-
}], ctorParameters: () => [], propDecorators: { listEl: [{ type: i0.ViewChild, args: ['listEl', { isSignal: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], 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"] }], onKeydown: [{
|
|
11856
|
+
args: [{ selector: 'ea-menu', imports: [PopoverComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ea-popover\n [anchor]=\"triggerEl()\"\n [open]=\"open()\"\n [placement]=\"placement()\"\n role=\"menu\"\n [surfaceId]=\"id()\"\n [ariaLabel]=\"resolvedAriaLabel()\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"reposition\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n #listEl\n class=\"ea-menu__list ea-menu__list--{{ size() }}\"\n [style.max-height]=\"maxHeight()\">\n <ng-content />\n </div>\n</ea-popover>\n", styles: [":host{display:contents}.ea-menu__list{min-width:10em;padding:.25em 0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-menu-list-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-menu__list{border:1px solid CanvasText}}.ea-menu__list--xs{font-size:var(--font-size-xs)}.ea-menu__list--sm{font-size:var(--font-size-sm)}.ea-menu__list--md{font-size:var(--font-size-md)}.ea-menu__list--lg{font-size:var(--font-size-lg)}.ea-menu__list--xl{font-size:var(--font-size-xl)}\n"] }]
|
|
11857
|
+
}], ctorParameters: () => [], propDecorators: { listEl: [{ type: i0.ViewChild, args: ['listEl', { isSignal: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], 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"] }], onKeydown: [{
|
|
11845
11858
|
type: HostListener,
|
|
11846
11859
|
args: ['document:keydown', ['$event']]
|
|
11847
11860
|
}], onEscape: [{
|
|
@@ -11852,7 +11865,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
11852
11865
|
/**
|
|
11853
11866
|
* Selectable row inside an `ea-menu`. Supports leading icons via the `icon`
|
|
11854
11867
|
* content slot, a disabled state, and a `danger` variant for destructive
|
|
11855
|
-
* actions.
|
|
11868
|
+
* actions. Inherits its size from the parent menu, and activating an item
|
|
11869
|
+
* closes that menu.
|
|
11856
11870
|
*/
|
|
11857
11871
|
class MenuItemComponent {
|
|
11858
11872
|
menu = inject(MenuComponent, { optional: true });
|
|
@@ -11872,11 +11886,11 @@ class MenuItemComponent {
|
|
|
11872
11886
|
this.menu?.close(true);
|
|
11873
11887
|
}
|
|
11874
11888
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11875
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: MenuItemComponent, isStandalone: true, selector: "ea-menu-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"ea-menu-item\"\n role=\"menuitem\"\n [id]=\"itemId\"\n [attr.tabindex]=\"tabIndex()\"\n [class.ea-menu-item--disabled]=\"disabled()\"\n [class.ea-menu-item--danger]=\"variant() === 'danger'\"\n [disabled]=\"disabled()\"\n (click)=\"handleClick($event)\">\n <span class=\"ea-menu-item__icon\">\n <ng-content select=\"[slot=icon]\" />\n </span>\n <span class=\"ea-menu-item__label\">\n <ng-content />\n </span>\n</button>\n", styles: [".ea-menu-item{display:flex;align-items:center;gap
|
|
11889
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: MenuItemComponent, isStandalone: true, selector: "ea-menu-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"ea-menu-item\"\n role=\"menuitem\"\n [id]=\"itemId\"\n [attr.tabindex]=\"tabIndex()\"\n [class.ea-menu-item--disabled]=\"disabled()\"\n [class.ea-menu-item--danger]=\"variant() === 'danger'\"\n [disabled]=\"disabled()\"\n (click)=\"handleClick($event)\">\n <span class=\"ea-menu-item__icon\">\n <ng-content select=\"[slot=icon]\" />\n </span>\n <span class=\"ea-menu-item__label\">\n <ng-content />\n </span>\n</button>\n", styles: [".ea-menu-item{display:flex;align-items:center;gap:.5em;width:100%;padding:.5em .75em;font-size:inherit;font-family:var(--font-family-sans);text-align:start;border:none;background:transparent;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-menu-item:hover:not(.ea-menu-item--disabled),.ea-menu-item:focus-visible:not(.ea-menu-item--disabled){background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-menu-item:hover:not(.ea-menu-item--disabled),.ea-menu-item:focus-visible:not(.ea-menu-item--disabled){background-color:Highlight;color:HighlightText}}.ea-menu-item:focus-visible{outline:none}.ea-menu-item--danger{color:var(--color-error-default)}.ea-menu-item--danger:hover:not(.ea-menu-item--disabled),.ea-menu-item--danger:focus-visible:not(.ea-menu-item--disabled){background-color:var(--color-error-subtle, var(--color-bg-muted))}@media(forced-colors:active){.ea-menu-item--danger:hover:not(.ea-menu-item--disabled),.ea-menu-item--danger:focus-visible:not(.ea-menu-item--disabled){background-color:Highlight;color:HighlightText}}.ea-menu-item--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-menu-item__icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1em;height:1em;color:inherit}.ea-menu-item__icon>*{width:1em;height:1em}.ea-menu-item__icon:empty{display:none}.ea-menu-item__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11876
11890
|
}
|
|
11877
11891
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: MenuItemComponent, decorators: [{
|
|
11878
11892
|
type: Component,
|
|
11879
|
-
args: [{ selector: 'ea-menu-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n type=\"button\"\n class=\"ea-menu-item\"\n role=\"menuitem\"\n [id]=\"itemId\"\n [attr.tabindex]=\"tabIndex()\"\n [class.ea-menu-item--disabled]=\"disabled()\"\n [class.ea-menu-item--danger]=\"variant() === 'danger'\"\n [disabled]=\"disabled()\"\n (click)=\"handleClick($event)\">\n <span class=\"ea-menu-item__icon\">\n <ng-content select=\"[slot=icon]\" />\n </span>\n <span class=\"ea-menu-item__label\">\n <ng-content />\n </span>\n</button>\n", styles: [".ea-menu-item{display:flex;align-items:center;gap
|
|
11893
|
+
args: [{ selector: 'ea-menu-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n type=\"button\"\n class=\"ea-menu-item\"\n role=\"menuitem\"\n [id]=\"itemId\"\n [attr.tabindex]=\"tabIndex()\"\n [class.ea-menu-item--disabled]=\"disabled()\"\n [class.ea-menu-item--danger]=\"variant() === 'danger'\"\n [disabled]=\"disabled()\"\n (click)=\"handleClick($event)\">\n <span class=\"ea-menu-item__icon\">\n <ng-content select=\"[slot=icon]\" />\n </span>\n <span class=\"ea-menu-item__label\">\n <ng-content />\n </span>\n</button>\n", styles: [".ea-menu-item{display:flex;align-items:center;gap:.5em;width:100%;padding:.5em .75em;font-size:inherit;font-family:var(--font-family-sans);text-align:start;border:none;background:transparent;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-menu-item:hover:not(.ea-menu-item--disabled),.ea-menu-item:focus-visible:not(.ea-menu-item--disabled){background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-menu-item:hover:not(.ea-menu-item--disabled),.ea-menu-item:focus-visible:not(.ea-menu-item--disabled){background-color:Highlight;color:HighlightText}}.ea-menu-item:focus-visible{outline:none}.ea-menu-item--danger{color:var(--color-error-default)}.ea-menu-item--danger:hover:not(.ea-menu-item--disabled),.ea-menu-item--danger:focus-visible:not(.ea-menu-item--disabled){background-color:var(--color-error-subtle, var(--color-bg-muted))}@media(forced-colors:active){.ea-menu-item--danger:hover:not(.ea-menu-item--disabled),.ea-menu-item--danger:focus-visible:not(.ea-menu-item--disabled){background-color:Highlight;color:HighlightText}}.ea-menu-item--disabled{color:var(--color-text-disabled);cursor:not-allowed}.ea-menu-item__icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1em;height:1em;color:inherit}.ea-menu-item__icon>*{width:1em;height:1em}.ea-menu-item__icon:empty{display:none}.ea-menu-item__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
11880
11894
|
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
11881
11895
|
|
|
11882
11896
|
/**
|
|
@@ -15296,11 +15310,13 @@ class ToastComponent {
|
|
|
15296
15310
|
i18n = inject(EagamiI18nService);
|
|
15297
15311
|
/** Viewport corner or edge the toast stack is pinned to. */
|
|
15298
15312
|
position = input('bottom-right', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
|
|
15313
|
+
/** Visual size applied to every toast in the stack. */
|
|
15314
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
15299
15315
|
/** Show a dismiss button on each toast. */
|
|
15300
15316
|
clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
|
|
15301
15317
|
containerClass = computed(() => `ea-toast-container ea-toast-container--${this.position()}`, ...(ngDevMode ? [{ debugName: "containerClass" }] : /* istanbul ignore next */ []));
|
|
15302
15318
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15303
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ToastComponent, isStandalone: true, selector: "ea-toast", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n [class]=\"containerClass()\"\n aria-live=\"polite\"\n aria-atomic=\"false\">\n @for (toast of toastService.toasts(); track toast.id) {\n <div class=\"ea-toast ea-toast--{{ toast.variant }}\">\n @switch (toast.variant) {\n @case ('success') {\n <ea-icon-check-circle class=\"ea-toast__icon\" />\n }\n @case ('info') {\n <ea-icon-info class=\"ea-toast__icon\" />\n }\n @case ('warning') {\n <ea-icon-alert-triangle class=\"ea-toast__icon\" />\n }\n @case ('error') {\n <ea-icon-alert-circle class=\"ea-toast__icon\" />\n }\n }\n <span class=\"ea-toast__message\">{{ toast.message }}</span>\n @if (clearable()) {\n <button\n class=\"ea-toast__close\"\n type=\"button\"\n [attr.aria-label]=\"i18n.messages().toast.dismiss\"\n (click)=\"toastService.dismiss(toast.id)\">\n <ea-icon-x />\n </button>\n }\n </div>\n }\n</div>\n", styles: [".ea-toast-container{position:fixed;z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);max-width:min(24rem,100vw - var(--space-6) * 2);pointer-events:none}.ea-toast-container--top-left,.ea-toast-container--top,.ea-toast-container--top-right{top:var(--space-6)}.ea-toast-container--bottom-left,.ea-toast-container--bottom,.ea-toast-container--bottom-right{bottom:var(--space-6)}.ea-toast-container--top-left,.ea-toast-container--bottom-left{left:var(--space-6)}.ea-toast-container--top-left .ea-toast,.ea-toast-container--bottom-left .ea-toast{margin-right:auto}.ea-toast-container--top-right,.ea-toast-container--bottom-right{right:var(--space-6)}.ea-toast-container--top-right .ea-toast,.ea-toast-container--bottom-right .ea-toast{margin-left:auto}.ea-toast-container--top,.ea-toast-container--bottom{left:50%;transform:translate(-50%)}.ea-toast-container--top .ea-toast,.ea-toast-container--bottom .ea-toast{margin-right:auto;margin-left:auto}.ea-toast-container--top-left .ea-toast,.ea-toast-container--bottom-left .ea-toast{--ea-toast-enter-x: -100%}.ea-toast-container--top .ea-toast{--ea-toast-enter-x: 0;--ea-toast-enter-y: -100%}.ea-toast-container--bottom .ea-toast{--ea-toast-enter-x: 0;--ea-toast-enter-y: 100%}.ea-toast{--ea-toast-enter-x: 100%;--ea-toast-enter-y: 0;display:flex;align-items:center;gap
|
|
15319
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ToastComponent, isStandalone: true, selector: "ea-toast", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n [class]=\"containerClass()\"\n aria-live=\"polite\"\n aria-atomic=\"false\">\n @for (toast of toastService.toasts(); track toast.id) {\n <div class=\"ea-toast ea-toast--{{ toast.variant }} ea-toast--{{ size() }}\">\n @switch (toast.variant) {\n @case ('success') {\n <ea-icon-check-circle class=\"ea-toast__icon\" />\n }\n @case ('info') {\n <ea-icon-info class=\"ea-toast__icon\" />\n }\n @case ('warning') {\n <ea-icon-alert-triangle class=\"ea-toast__icon\" />\n }\n @case ('error') {\n <ea-icon-alert-circle class=\"ea-toast__icon\" />\n }\n }\n <span class=\"ea-toast__message\">{{ toast.message }}</span>\n @if (clearable()) {\n <button\n class=\"ea-toast__close\"\n type=\"button\"\n [attr.aria-label]=\"i18n.messages().toast.dismiss\"\n (click)=\"toastService.dismiss(toast.id)\">\n <ea-icon-x />\n </button>\n }\n </div>\n }\n</div>\n", styles: [".ea-toast-container{position:fixed;z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);max-width:min(24rem,100vw - var(--space-6) * 2);pointer-events:none}.ea-toast-container--top-left,.ea-toast-container--top,.ea-toast-container--top-right{top:var(--space-6)}.ea-toast-container--bottom-left,.ea-toast-container--bottom,.ea-toast-container--bottom-right{bottom:var(--space-6)}.ea-toast-container--top-left,.ea-toast-container--bottom-left{left:var(--space-6)}.ea-toast-container--top-left .ea-toast,.ea-toast-container--bottom-left .ea-toast{margin-right:auto}.ea-toast-container--top-right,.ea-toast-container--bottom-right{right:var(--space-6)}.ea-toast-container--top-right .ea-toast,.ea-toast-container--bottom-right .ea-toast{margin-left:auto}.ea-toast-container--top,.ea-toast-container--bottom{left:50%;transform:translate(-50%)}.ea-toast-container--top .ea-toast,.ea-toast-container--bottom .ea-toast{margin-right:auto;margin-left:auto}.ea-toast-container--top-left .ea-toast,.ea-toast-container--bottom-left .ea-toast{--ea-toast-enter-x: -100%}.ea-toast-container--top .ea-toast{--ea-toast-enter-x: 0;--ea-toast-enter-y: -100%}.ea-toast-container--bottom .ea-toast{--ea-toast-enter-x: 0;--ea-toast-enter-y: 100%}.ea-toast{--ea-toast-enter-x: 100%;--ea-toast-enter-y: 0;display:flex;align-items:center;gap:.375em;width:100%;padding:.75em 1em;font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:auto;animation:ea-toast-slide-in var(--duration-slow) var(--ease-out)}@media(forced-colors:active){.ea-toast{border:1px solid CanvasText}}@media(min-width:640px){.ea-toast{width:auto}}.ea-toast--xs{font-size:var(--font-size-xs)}.ea-toast--sm{font-size:var(--font-size-sm)}.ea-toast--md{font-size:var(--font-size-md)}.ea-toast--lg{font-size:var(--font-size-lg)}.ea-toast--xl{font-size:var(--font-size-xl)}.ea-toast--default{background-color:var(--color-neutral-800);color:var(--color-neutral-0)}.ea-toast--success{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));color:var(--color-success-text)}.ea-toast--warning{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-warning-subtle),var(--color-warning-subtle));color:var(--color-warning-text)}.ea-toast--error{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-error-subtle),var(--color-error-subtle));color:var(--color-error-text)}.ea-toast--info{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-info-subtle),var(--color-info-subtle));color:var(--color-info-text)}.ea-toast__icon{flex-shrink:0;font-size:1.5em}.ea-toast__message{flex:1;min-width:0}.ea-toast__close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-toast__close>*{font-size:1.25em}.ea-toast__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-toast__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-toast__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-toast__close:disabled{cursor:not-allowed;opacity:.5}.ea-toast__close{margin-inline-start:.375em}.ea-toast__close ea-icon-x{width:1em;height:1em}@keyframes ea-toast-slide-in{0%{opacity:0;transform:translate(var(--ea-toast-enter-x),var(--ea-toast-enter-y))}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.ea-toast{animation-name:ea-toast-fade-in}}@keyframes ea-toast-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ea-toast--success{color:var(--color-success-200)}:root:not([data-theme=light]) .ea-toast--warning{color:var(--color-warning-200)}:root:not([data-theme=light]) .ea-toast--error{color:var(--color-error-200)}:root:not([data-theme=light]) .ea-toast--info{color:var(--color-info-200)}}:root[data-theme=dark] .ea-toast--success{color:var(--color-success-200)}:root[data-theme=dark] .ea-toast--warning{color:var(--color-warning-200)}:root[data-theme=dark] .ea-toast--error{color:var(--color-error-200)}:root[data-theme=dark] .ea-toast--info{color:var(--color-info-200)}\n"], dependencies: [{ kind: "component", type: XIconComponent, selector: "ea-icon-x" }, { kind: "component", type: CheckCircleIconComponent, selector: "ea-icon-check-circle" }, { kind: "component", type: InfoIconComponent, selector: "ea-icon-info" }, { kind: "component", type: AlertTriangleIconComponent, selector: "ea-icon-alert-triangle" }, { kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
15304
15320
|
}
|
|
15305
15321
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ToastComponent, decorators: [{
|
|
15306
15322
|
type: Component,
|
|
@@ -15310,8 +15326,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
15310
15326
|
InfoIconComponent,
|
|
15311
15327
|
AlertTriangleIconComponent,
|
|
15312
15328
|
AlertCircleIconComponent,
|
|
15313
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n [class]=\"containerClass()\"\n aria-live=\"polite\"\n aria-atomic=\"false\">\n @for (toast of toastService.toasts(); track toast.id) {\n <div class=\"ea-toast ea-toast--{{ toast.variant }}\">\n @switch (toast.variant) {\n @case ('success') {\n <ea-icon-check-circle class=\"ea-toast__icon\" />\n }\n @case ('info') {\n <ea-icon-info class=\"ea-toast__icon\" />\n }\n @case ('warning') {\n <ea-icon-alert-triangle class=\"ea-toast__icon\" />\n }\n @case ('error') {\n <ea-icon-alert-circle class=\"ea-toast__icon\" />\n }\n }\n <span class=\"ea-toast__message\">{{ toast.message }}</span>\n @if (clearable()) {\n <button\n class=\"ea-toast__close\"\n type=\"button\"\n [attr.aria-label]=\"i18n.messages().toast.dismiss\"\n (click)=\"toastService.dismiss(toast.id)\">\n <ea-icon-x />\n </button>\n }\n </div>\n }\n</div>\n", styles: [".ea-toast-container{position:fixed;z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);max-width:min(24rem,100vw - var(--space-6) * 2);pointer-events:none}.ea-toast-container--top-left,.ea-toast-container--top,.ea-toast-container--top-right{top:var(--space-6)}.ea-toast-container--bottom-left,.ea-toast-container--bottom,.ea-toast-container--bottom-right{bottom:var(--space-6)}.ea-toast-container--top-left,.ea-toast-container--bottom-left{left:var(--space-6)}.ea-toast-container--top-left .ea-toast,.ea-toast-container--bottom-left .ea-toast{margin-right:auto}.ea-toast-container--top-right,.ea-toast-container--bottom-right{right:var(--space-6)}.ea-toast-container--top-right .ea-toast,.ea-toast-container--bottom-right .ea-toast{margin-left:auto}.ea-toast-container--top,.ea-toast-container--bottom{left:50%;transform:translate(-50%)}.ea-toast-container--top .ea-toast,.ea-toast-container--bottom .ea-toast{margin-right:auto;margin-left:auto}.ea-toast-container--top-left .ea-toast,.ea-toast-container--bottom-left .ea-toast{--ea-toast-enter-x: -100%}.ea-toast-container--top .ea-toast{--ea-toast-enter-x: 0;--ea-toast-enter-y: -100%}.ea-toast-container--bottom .ea-toast{--ea-toast-enter-x: 0;--ea-toast-enter-y: 100%}.ea-toast{--ea-toast-enter-x: 100%;--ea-toast-enter-y: 0;display:flex;align-items:center;gap
|
|
15314
|
-
}], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }] } });
|
|
15329
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n [class]=\"containerClass()\"\n aria-live=\"polite\"\n aria-atomic=\"false\">\n @for (toast of toastService.toasts(); track toast.id) {\n <div class=\"ea-toast ea-toast--{{ toast.variant }} ea-toast--{{ size() }}\">\n @switch (toast.variant) {\n @case ('success') {\n <ea-icon-check-circle class=\"ea-toast__icon\" />\n }\n @case ('info') {\n <ea-icon-info class=\"ea-toast__icon\" />\n }\n @case ('warning') {\n <ea-icon-alert-triangle class=\"ea-toast__icon\" />\n }\n @case ('error') {\n <ea-icon-alert-circle class=\"ea-toast__icon\" />\n }\n }\n <span class=\"ea-toast__message\">{{ toast.message }}</span>\n @if (clearable()) {\n <button\n class=\"ea-toast__close\"\n type=\"button\"\n [attr.aria-label]=\"i18n.messages().toast.dismiss\"\n (click)=\"toastService.dismiss(toast.id)\">\n <ea-icon-x />\n </button>\n }\n </div>\n }\n</div>\n", styles: [".ea-toast-container{position:fixed;z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);max-width:min(24rem,100vw - var(--space-6) * 2);pointer-events:none}.ea-toast-container--top-left,.ea-toast-container--top,.ea-toast-container--top-right{top:var(--space-6)}.ea-toast-container--bottom-left,.ea-toast-container--bottom,.ea-toast-container--bottom-right{bottom:var(--space-6)}.ea-toast-container--top-left,.ea-toast-container--bottom-left{left:var(--space-6)}.ea-toast-container--top-left .ea-toast,.ea-toast-container--bottom-left .ea-toast{margin-right:auto}.ea-toast-container--top-right,.ea-toast-container--bottom-right{right:var(--space-6)}.ea-toast-container--top-right .ea-toast,.ea-toast-container--bottom-right .ea-toast{margin-left:auto}.ea-toast-container--top,.ea-toast-container--bottom{left:50%;transform:translate(-50%)}.ea-toast-container--top .ea-toast,.ea-toast-container--bottom .ea-toast{margin-right:auto;margin-left:auto}.ea-toast-container--top-left .ea-toast,.ea-toast-container--bottom-left .ea-toast{--ea-toast-enter-x: -100%}.ea-toast-container--top .ea-toast{--ea-toast-enter-x: 0;--ea-toast-enter-y: -100%}.ea-toast-container--bottom .ea-toast{--ea-toast-enter-x: 0;--ea-toast-enter-y: 100%}.ea-toast{--ea-toast-enter-x: 100%;--ea-toast-enter-y: 0;display:flex;align-items:center;gap:.375em;width:100%;padding:.75em 1em;font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:auto;animation:ea-toast-slide-in var(--duration-slow) var(--ease-out)}@media(forced-colors:active){.ea-toast{border:1px solid CanvasText}}@media(min-width:640px){.ea-toast{width:auto}}.ea-toast--xs{font-size:var(--font-size-xs)}.ea-toast--sm{font-size:var(--font-size-sm)}.ea-toast--md{font-size:var(--font-size-md)}.ea-toast--lg{font-size:var(--font-size-lg)}.ea-toast--xl{font-size:var(--font-size-xl)}.ea-toast--default{background-color:var(--color-neutral-800);color:var(--color-neutral-0)}.ea-toast--success{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));color:var(--color-success-text)}.ea-toast--warning{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-warning-subtle),var(--color-warning-subtle));color:var(--color-warning-text)}.ea-toast--error{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-error-subtle),var(--color-error-subtle));color:var(--color-error-text)}.ea-toast--info{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-info-subtle),var(--color-info-subtle));color:var(--color-info-text)}.ea-toast__icon{flex-shrink:0;font-size:1.5em}.ea-toast__message{flex:1;min-width:0}.ea-toast__close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-toast__close>*{font-size:1.25em}.ea-toast__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-toast__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-toast__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-toast__close:disabled{cursor:not-allowed;opacity:.5}.ea-toast__close{margin-inline-start:.375em}.ea-toast__close ea-icon-x{width:1em;height:1em}@keyframes ea-toast-slide-in{0%{opacity:0;transform:translate(var(--ea-toast-enter-x),var(--ea-toast-enter-y))}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.ea-toast{animation-name:ea-toast-fade-in}}@keyframes ea-toast-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ea-toast--success{color:var(--color-success-200)}:root:not([data-theme=light]) .ea-toast--warning{color:var(--color-warning-200)}:root:not([data-theme=light]) .ea-toast--error{color:var(--color-error-200)}:root:not([data-theme=light]) .ea-toast--info{color:var(--color-info-200)}}:root[data-theme=dark] .ea-toast--success{color:var(--color-success-200)}:root[data-theme=dark] .ea-toast--warning{color:var(--color-warning-200)}:root[data-theme=dark] .ea-toast--error{color:var(--color-error-200)}:root[data-theme=dark] .ea-toast--info{color:var(--color-info-200)}\n"] }]
|
|
15330
|
+
}], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }] } });
|
|
15315
15331
|
|
|
15316
15332
|
class ChevronsLeftIconComponent extends IconComponentBase {
|
|
15317
15333
|
static slug = 'chevrons-left';
|