@eagami/ui 4.3.0 → 4.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/fesm2022/eagami-ui.mjs
CHANGED
|
@@ -4939,13 +4939,13 @@ class ButtonComponent {
|
|
|
4939
4939
|
this.clicked.emit(event);
|
|
4940
4940
|
}
|
|
4941
4941
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4942
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ButtonComponent, isStandalone: true, selector: "ea-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaCurrent: { classPropertyName: "ariaCurrent", publicName: "aria-current", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.ea-button--full-width": "fullWidth()" } }, ngImport: i0, template: "<button\n class=\"ea-button\"\n [ngClass]=\"hostClasses()\"\n [type]=\"type()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-current]=\"ariaCurrent() || null\"\n [attr.aria-busy]=\"loading() || null\"\n (click)=\"handleClick($event)\">\n @if (loading()) {\n <span\n class=\"ea-button__spinner\"\n aria-hidden=\"true\">\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-dasharray=\"31.4\"\n stroke-dashoffset=\"10\" />\n </svg>\n </span>\n }\n\n <span\n class=\"ea-button__content\"\n [class.ea-button__content--hidden]=\"loading()\">\n <ng-content select=\"[slot=prefix]\" />\n @if (icon(); as iconComponent) {\n <span\n class=\"ea-button__icon\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"iconComponent\" />\n </span>\n }\n <span class=\"ea-button__label\">\n <ng-content />\n </span>\n <ng-content select=\"[slot=suffix]\" />\n </span>\n</button>\n", styles: [":host{display:inline-flex}.ea-button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none;padding:.5em 1em;min-height:2.5em;font-family:var(--font-family-sans);font-weight:var(--ea-button-font-weight, var(--font-weight-medium));letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-button--xs{font-size:var(--ea-button-font-size, var(--font-size-xs))}.ea-button--sm{font-size:var(--ea-button-font-size, var(--font-size-sm))}.ea-button--md{font-size:var(--ea-button-font-size, var(--font-size-md))}.ea-button--lg{font-size:var(--ea-button-font-size, var(--font-size-lg))}.ea-button--xl{font-size:var(--ea-button-font-size, var(--font-size-xl))}.ea-button--primary{background-color:var(--ea-button-background-color, var(--color-brand-default));border-color:var(--ea-button-border-color, var(--color-brand-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-brand-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-brand-hover)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-brand-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-brand-active)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--secondary{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, var(--color-border-strong));color:var(--ea-button-color, var(--color-text-primary))}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, transparent);color:var(--ea-button-color, var(--color-text-primary))}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, transparent));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, transparent));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--danger{background-color:var(--ea-button-background-color, var(--color-error-default));border-color:var(--ea-button-border-color, var(--color-error-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)));filter:brightness(.9)}.ea-button--full-width{width:100%}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:.5em}.ea-button__content--hidden{visibility:hidden}.ea-button__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:var(--icon-inline-size)}.ea-button__label{display:inline-flex;align-items:center}.ea-button__label:empty{display:none}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}:host(.ea-button--full-width){display:block;width:100%}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4942
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ButtonComponent, isStandalone: true, selector: "ea-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaCurrent: { classPropertyName: "ariaCurrent", publicName: "aria-current", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.ea-button--full-width": "fullWidth()" } }, ngImport: i0, template: "<button\n class=\"ea-button\"\n [ngClass]=\"hostClasses()\"\n [type]=\"type()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-current]=\"ariaCurrent() || null\"\n [attr.aria-busy]=\"loading() || null\"\n (click)=\"handleClick($event)\">\n @if (loading()) {\n <span\n class=\"ea-button__spinner\"\n aria-hidden=\"true\">\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-dasharray=\"31.4\"\n stroke-dashoffset=\"10\" />\n </svg>\n </span>\n }\n\n <span\n class=\"ea-button__content\"\n [class.ea-button__content--hidden]=\"loading()\">\n <ng-content select=\"[slot=prefix]\" />\n @if (icon(); as iconComponent) {\n <span\n class=\"ea-button__icon\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"iconComponent\" />\n </span>\n }\n <span class=\"ea-button__label\">\n <ng-content />\n </span>\n <ng-content select=\"[slot=suffix]\" />\n </span>\n</button>\n", styles: [":host{display:inline-flex}.ea-button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none;padding:.5em 1em;min-height:2.5em;font-family:var(--font-family-sans);font-weight:var(--ea-button-font-weight, var(--font-weight-medium));letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-button--xs{font-size:var(--ea-button-font-size, var(--font-size-xs))}.ea-button--sm{font-size:var(--ea-button-font-size, var(--font-size-sm))}.ea-button--md{font-size:var(--ea-button-font-size, var(--font-size-md))}.ea-button--lg{font-size:var(--ea-button-font-size, var(--font-size-lg))}.ea-button--xl{font-size:var(--ea-button-font-size, var(--font-size-xl))}.ea-button--primary{background-color:var(--ea-button-background-color, var(--color-brand-default));border-color:var(--ea-button-border-color, var(--color-brand-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-brand-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-brand-hover)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-brand-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-brand-active)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--secondary{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, var(--color-border-strong));color:var(--ea-button-color, var(--color-text-primary))}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, transparent);color:var(--ea-button-color, var(--color-text-primary))}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, transparent));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, transparent));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--danger{background-color:var(--ea-button-background-color, var(--color-error-default));border-color:var(--ea-button-border-color, var(--color-error-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)));filter:brightness(.9)}.ea-button--full-width{width:100%}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:.5em}.ea-button__content--hidden{visibility:hidden}.ea-button__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:var(--icon-inline-size)}.ea-button__label{display:inline-flex;align-items:center}.ea-button__label:empty{display:none}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}@media(prefers-reduced-motion:reduce){.ea-button__spinner svg{animation-duration:2.5s}}:host(.ea-button--full-width){display:block;width:100%}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4943
4943
|
}
|
|
4944
4944
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
4945
4945
|
type: Component,
|
|
4946
4946
|
args: [{ selector: 'ea-button', imports: [NgClass, NgComponentOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4947
4947
|
'[class.ea-button--full-width]': 'fullWidth()',
|
|
4948
|
-
}, template: "<button\n class=\"ea-button\"\n [ngClass]=\"hostClasses()\"\n [type]=\"type()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-current]=\"ariaCurrent() || null\"\n [attr.aria-busy]=\"loading() || null\"\n (click)=\"handleClick($event)\">\n @if (loading()) {\n <span\n class=\"ea-button__spinner\"\n aria-hidden=\"true\">\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-dasharray=\"31.4\"\n stroke-dashoffset=\"10\" />\n </svg>\n </span>\n }\n\n <span\n class=\"ea-button__content\"\n [class.ea-button__content--hidden]=\"loading()\">\n <ng-content select=\"[slot=prefix]\" />\n @if (icon(); as iconComponent) {\n <span\n class=\"ea-button__icon\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"iconComponent\" />\n </span>\n }\n <span class=\"ea-button__label\">\n <ng-content />\n </span>\n <ng-content select=\"[slot=suffix]\" />\n </span>\n</button>\n", styles: [":host{display:inline-flex}.ea-button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none;padding:.5em 1em;min-height:2.5em;font-family:var(--font-family-sans);font-weight:var(--ea-button-font-weight, var(--font-weight-medium));letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-button--xs{font-size:var(--ea-button-font-size, var(--font-size-xs))}.ea-button--sm{font-size:var(--ea-button-font-size, var(--font-size-sm))}.ea-button--md{font-size:var(--ea-button-font-size, var(--font-size-md))}.ea-button--lg{font-size:var(--ea-button-font-size, var(--font-size-lg))}.ea-button--xl{font-size:var(--ea-button-font-size, var(--font-size-xl))}.ea-button--primary{background-color:var(--ea-button-background-color, var(--color-brand-default));border-color:var(--ea-button-border-color, var(--color-brand-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-brand-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-brand-hover)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-brand-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-brand-active)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--secondary{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, var(--color-border-strong));color:var(--ea-button-color, var(--color-text-primary))}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, transparent);color:var(--ea-button-color, var(--color-text-primary))}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, transparent));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, transparent));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--danger{background-color:var(--ea-button-background-color, var(--color-error-default));border-color:var(--ea-button-border-color, var(--color-error-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)));filter:brightness(.9)}.ea-button--full-width{width:100%}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:.5em}.ea-button__content--hidden{visibility:hidden}.ea-button__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:var(--icon-inline-size)}.ea-button__label{display:inline-flex;align-items:center}.ea-button__label:empty{display:none}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}:host(.ea-button--full-width){display:block;width:100%}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
4948
|
+
}, template: "<button\n class=\"ea-button\"\n [ngClass]=\"hostClasses()\"\n [type]=\"type()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-current]=\"ariaCurrent() || null\"\n [attr.aria-busy]=\"loading() || null\"\n (click)=\"handleClick($event)\">\n @if (loading()) {\n <span\n class=\"ea-button__spinner\"\n aria-hidden=\"true\">\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-dasharray=\"31.4\"\n stroke-dashoffset=\"10\" />\n </svg>\n </span>\n }\n\n <span\n class=\"ea-button__content\"\n [class.ea-button__content--hidden]=\"loading()\">\n <ng-content select=\"[slot=prefix]\" />\n @if (icon(); as iconComponent) {\n <span\n class=\"ea-button__icon\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"iconComponent\" />\n </span>\n }\n <span class=\"ea-button__label\">\n <ng-content />\n </span>\n <ng-content select=\"[slot=suffix]\" />\n </span>\n</button>\n", styles: [":host{display:inline-flex}.ea-button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none;padding:.5em 1em;min-height:2.5em;font-family:var(--font-family-sans);font-weight:var(--ea-button-font-weight, var(--font-weight-medium));letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-button--xs{font-size:var(--ea-button-font-size, var(--font-size-xs))}.ea-button--sm{font-size:var(--ea-button-font-size, var(--font-size-sm))}.ea-button--md{font-size:var(--ea-button-font-size, var(--font-size-md))}.ea-button--lg{font-size:var(--ea-button-font-size, var(--font-size-lg))}.ea-button--xl{font-size:var(--ea-button-font-size, var(--font-size-xl))}.ea-button--primary{background-color:var(--ea-button-background-color, var(--color-brand-default));border-color:var(--ea-button-border-color, var(--color-brand-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-brand-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-brand-hover)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-brand-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-brand-active)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--secondary{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, var(--color-border-strong));color:var(--ea-button-color, var(--color-text-primary))}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, transparent);color:var(--ea-button-color, var(--color-text-primary))}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, transparent));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, transparent));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--danger{background-color:var(--ea-button-background-color, var(--color-error-default));border-color:var(--ea-button-border-color, var(--color-error-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)));filter:brightness(.9)}.ea-button--full-width{width:100%}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:.5em}.ea-button__content--hidden{visibility:hidden}.ea-button__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:var(--icon-inline-size)}.ea-button__label{display:inline-flex;align-items:center}.ea-button__label:empty{display:none}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}@media(prefers-reduced-motion:reduce){.ea-button__spinner svg{animation-duration:2.5s}}:host(.ea-button--full-width){display:block;width:100%}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
4949
4949
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaCurrent: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-current", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
4950
4950
|
|
|
4951
4951
|
/**
|
|
@@ -9054,7 +9054,7 @@ class FileUploaderComponent {
|
|
|
9054
9054
|
useExisting: forwardRef(() => FileUploaderComponent),
|
|
9055
9055
|
multi: true,
|
|
9056
9056
|
},
|
|
9057
|
-
], viewQueries: [{ propertyName: "fileInputEl", first: true, predicate: ["fileInputEl"], descendants: true, isSignal: true }, { propertyName: "dropzoneEl", first: true, predicate: ["dropzoneEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"ea-file-uploader-field\"\n [ngClass]=\"hostClasses()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [required]=\"required()\" />\n }\n\n <input\n #fileInputEl\n type=\"file\"\n class=\"ea-file-uploader-field__file-input\"\n [id]=\"id()\"\n [multiple]=\"multiple()\"\n [attr.accept]=\"accept() ?? null\"\n [attr.required]=\"required() ? true : null\"\n [disabled]=\"isDisabled()\"\n (change)=\"onFileSelected($event)\" />\n\n <button\n #dropzoneEl\n type=\"button\"\n class=\"ea-file-uploader-field__dropzone\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.aria-label]=\"label() ?? promptText()\"\n [disabled]=\"isDisabled()\"\n (click)=\"openFilePicker()\"\n (keydown)=\"onDropzoneKeydown($event)\"\n (focus)=\"onDropzoneFocus()\"\n (blur)=\"onDropzoneBlur()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n <span\n class=\"ea-file-uploader-field__upload-icon\"\n aria-hidden=\"true\">\n <ng-content select=\"[icon]\">\n <ea-icon-upload-cloud />\n </ng-content>\n </span>\n <span class=\"ea-file-uploader-field__prompt\">{{ promptText() }}</span>\n @if (constraintsText(); as c) {\n <span\n class=\"ea-file-uploader-field__constraints\"\n [id]=\"constraintsId()\">\n {{ c }}\n </span>\n }\n </button>\n\n @if (showFileList() && value().length) {\n <ul\n class=\"ea-file-uploader-field__list\"\n [attr.aria-label]=\"i18n.messages().fileUploader.fileListLabel\">\n @for (file of value(); track trackFile($index, file)) {\n <li class=\"ea-file-uploader-field__item\">\n <span\n class=\"ea-file-uploader-field__type-icon\"\n aria-hidden=\"true\">\n @switch (iconKey(file)) {\n @case ('image') {\n <ea-icon-image />\n }\n @case ('film') {\n <ea-icon-film />\n }\n @case ('music') {\n <ea-icon-music />\n }\n @case ('archive') {\n <ea-icon-archive />\n }\n @case ('text') {\n <ea-icon-file-text />\n }\n @default {\n <ea-icon-file />\n }\n }\n </span>\n <div class=\"ea-file-uploader-field__meta\">\n <span\n class=\"ea-file-uploader-field__name\"\n [title]=\"file.name\">\n {{ file.name }}\n </span>\n <span class=\"ea-file-uploader-field__size\">\n {{ formatBytes(file.size) }}\n </span>\n @if (progressFor(file); as p) {\n <div\n class=\"ea-file-uploader-field__progress\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"p\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\">\n <div\n class=\"ea-file-uploader-field__progress-bar\"\n [style.width.%]=\"p\">\n </div>\n </div>\n }\n </div>\n <button\n type=\"button\"\n class=\"ea-file-uploader-field__remove\"\n [attr.aria-label]=\"i18n.messages().fileUploader.removeFile(file.name)\"\n [disabled]=\"isDisabled()\"\n (click)=\"removeFile(file)\">\n <ea-icon-x />\n </button>\n </li>\n }\n </ul>\n }\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:block}.ea-file-uploader-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-file-uploader-field--xs{font-size:var(--font-size-xs)}.ea-file-uploader-field--sm{font-size:var(--font-size-sm)}.ea-file-uploader-field--md{font-size:var(--font-size-md)}.ea-file-uploader-field--lg{font-size:var(--font-size-lg)}.ea-file-uploader-field--xl{font-size:var(--font-size-xl)}.ea-file-uploader-field__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.ea-file-uploader-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;width:100%;padding:1.5em;font-family:inherit;font-size:.875em;line-height:var(--line-height-normal);color:var(--color-text-tertiary);text-align:center;border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);cursor:pointer;transition:var(--transition-colors);appearance:none}.ea-file-uploader-field__dropzone:hover:not(:disabled){border-color:var(--color-border-focus);background-color:var(--color-state-hover);color:var(--color-text-secondary)}.ea-file-uploader-field__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-file-uploader-field__dropzone:disabled{cursor:not-allowed;opacity:.6}.ea-file-uploader-field__upload-icon{display:inline-flex;font-size:2.5em;opacity:.7}.ea-file-uploader-field__prompt{font-weight:var(--font-weight-medium)}.ea-file-uploader-field__constraints{font-size:var(--text-helper-size);line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:var(--color-primary-500);background-color:var(--color-primary-50);color:var(--color-primary-600)}.ea-file-uploader-field--error .ea-file-uploader-field__dropzone{border-color:var(--color-error-default)}.ea-file-uploader-field__list{display:flex;flex-direction:column;gap:.25em;padding:0;margin:0;list-style:none}.ea-file-uploader-field__item{display:flex;align-items:center;gap:.75em;padding:.5em .75em;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background-color:var(--color-bg-base)}.ea-file-uploader-field__type-icon{display:inline-flex;flex-shrink:0;width:1.25em;height:1.25em;color:var(--color-text-secondary)}.ea-file-uploader-field__type-icon>*{width:100%;height:100%}.ea-file-uploader-field__meta{display:flex;flex-direction:column;gap:.125em;flex:1 1 auto;min-width:0}.ea-file-uploader-field__name{overflow:hidden;font-size:.875em;text-overflow:ellipsis;color:var(--color-text-primary);white-space:nowrap}.ea-file-uploader-field__size{font-size:var(--text-helper-size);line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field__progress{overflow:hidden;width:100%;height:4px;margin-top:var(--space-1);border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-file-uploader-field__progress-bar{height:100%;border-radius:inherit;background-color:var(--color-primary-500);transition:width
|
|
9057
|
+
], viewQueries: [{ propertyName: "fileInputEl", first: true, predicate: ["fileInputEl"], descendants: true, isSignal: true }, { propertyName: "dropzoneEl", first: true, predicate: ["dropzoneEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"ea-file-uploader-field\"\n [ngClass]=\"hostClasses()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [required]=\"required()\" />\n }\n\n <input\n #fileInputEl\n type=\"file\"\n class=\"ea-file-uploader-field__file-input\"\n [id]=\"id()\"\n [multiple]=\"multiple()\"\n [attr.accept]=\"accept() ?? null\"\n [attr.required]=\"required() ? true : null\"\n [disabled]=\"isDisabled()\"\n (change)=\"onFileSelected($event)\" />\n\n <button\n #dropzoneEl\n type=\"button\"\n class=\"ea-file-uploader-field__dropzone\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.aria-label]=\"label() ?? promptText()\"\n [disabled]=\"isDisabled()\"\n (click)=\"openFilePicker()\"\n (keydown)=\"onDropzoneKeydown($event)\"\n (focus)=\"onDropzoneFocus()\"\n (blur)=\"onDropzoneBlur()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n <span\n class=\"ea-file-uploader-field__upload-icon\"\n aria-hidden=\"true\">\n <ng-content select=\"[icon]\">\n <ea-icon-upload-cloud />\n </ng-content>\n </span>\n <span class=\"ea-file-uploader-field__prompt\">{{ promptText() }}</span>\n @if (constraintsText(); as c) {\n <span\n class=\"ea-file-uploader-field__constraints\"\n [id]=\"constraintsId()\">\n {{ c }}\n </span>\n }\n </button>\n\n @if (showFileList() && value().length) {\n <ul\n class=\"ea-file-uploader-field__list\"\n [attr.aria-label]=\"i18n.messages().fileUploader.fileListLabel\">\n @for (file of value(); track trackFile($index, file)) {\n <li class=\"ea-file-uploader-field__item\">\n <span\n class=\"ea-file-uploader-field__type-icon\"\n aria-hidden=\"true\">\n @switch (iconKey(file)) {\n @case ('image') {\n <ea-icon-image />\n }\n @case ('film') {\n <ea-icon-film />\n }\n @case ('music') {\n <ea-icon-music />\n }\n @case ('archive') {\n <ea-icon-archive />\n }\n @case ('text') {\n <ea-icon-file-text />\n }\n @default {\n <ea-icon-file />\n }\n }\n </span>\n <div class=\"ea-file-uploader-field__meta\">\n <span\n class=\"ea-file-uploader-field__name\"\n [title]=\"file.name\">\n {{ file.name }}\n </span>\n <span class=\"ea-file-uploader-field__size\">\n {{ formatBytes(file.size) }}\n </span>\n @if (progressFor(file); as p) {\n <div\n class=\"ea-file-uploader-field__progress\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"p\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\">\n <div\n class=\"ea-file-uploader-field__progress-bar\"\n [style.width.%]=\"p\">\n </div>\n </div>\n }\n </div>\n <button\n type=\"button\"\n class=\"ea-file-uploader-field__remove\"\n [attr.aria-label]=\"i18n.messages().fileUploader.removeFile(file.name)\"\n [disabled]=\"isDisabled()\"\n (click)=\"removeFile(file)\">\n <ea-icon-x />\n </button>\n </li>\n }\n </ul>\n }\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:block}.ea-file-uploader-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-file-uploader-field--xs{font-size:var(--font-size-xs)}.ea-file-uploader-field--sm{font-size:var(--font-size-sm)}.ea-file-uploader-field--md{font-size:var(--font-size-md)}.ea-file-uploader-field--lg{font-size:var(--font-size-lg)}.ea-file-uploader-field--xl{font-size:var(--font-size-xl)}.ea-file-uploader-field__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.ea-file-uploader-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;width:100%;padding:1.5em;font-family:inherit;font-size:.875em;line-height:var(--line-height-normal);color:var(--color-text-tertiary);text-align:center;border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);cursor:pointer;transition:var(--transition-colors);appearance:none}.ea-file-uploader-field__dropzone:hover:not(:disabled){border-color:var(--color-border-focus);background-color:var(--color-state-hover);color:var(--color-text-secondary)}.ea-file-uploader-field__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-file-uploader-field__dropzone:disabled{cursor:not-allowed;opacity:.6}.ea-file-uploader-field__upload-icon{display:inline-flex;font-size:2.5em;opacity:.7}.ea-file-uploader-field__prompt{font-weight:var(--font-weight-medium)}.ea-file-uploader-field__constraints{font-size:var(--text-helper-size);line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:var(--color-primary-500);background-color:var(--color-primary-50);color:var(--color-primary-600)}.ea-file-uploader-field--error .ea-file-uploader-field__dropzone{border-color:var(--color-error-default)}.ea-file-uploader-field__list{display:flex;flex-direction:column;gap:.25em;padding:0;margin:0;list-style:none}.ea-file-uploader-field__item{display:flex;align-items:center;gap:.75em;padding:.5em .75em;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background-color:var(--color-bg-base)}.ea-file-uploader-field__type-icon{display:inline-flex;flex-shrink:0;width:1.25em;height:1.25em;color:var(--color-text-secondary)}.ea-file-uploader-field__type-icon>*{width:100%;height:100%}.ea-file-uploader-field__meta{display:flex;flex-direction:column;gap:.125em;flex:1 1 auto;min-width:0}.ea-file-uploader-field__name{overflow:hidden;font-size:.875em;text-overflow:ellipsis;color:var(--color-text-primary);white-space:nowrap}.ea-file-uploader-field__size{font-size:var(--text-helper-size);line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field__progress{overflow:hidden;width:100%;height:4px;margin-top:var(--space-1);border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-file-uploader-field__progress-bar{height:100%;border-radius:inherit;background-color:var(--color-primary-500);transition:width var(--duration-normal) var(--ease-out)}.ea-file-uploader-field__remove{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-file-uploader-field__remove>*{font-size:1.25em}.ea-file-uploader-field__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-file-uploader-field__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-file-uploader-field__remove:disabled{cursor:not-allowed;opacity:.5}.ea-file-uploader-field__remove ea-icon-x{width:1em;height:1em}\n"], dependencies: [{ kind: "component", type: ArchiveIconComponent, selector: "ea-icon-archive" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "component", type: FileIconComponent, selector: "ea-icon-file" }, { kind: "component", type: FileTextIconComponent, selector: "ea-icon-file-text" }, { kind: "component", type: FilmIconComponent, selector: "ea-icon-film" }, { kind: "component", type: ImageIconComponent, selector: "ea-icon-image" }, { kind: "component", type: MusicIconComponent, selector: "ea-icon-music" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UploadCloudIconComponent, selector: "ea-icon-upload-cloud" }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9058
9058
|
}
|
|
9059
9059
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FileUploaderComponent, decorators: [{
|
|
9060
9060
|
type: Component,
|
|
@@ -9076,7 +9076,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
9076
9076
|
useExisting: forwardRef(() => FileUploaderComponent),
|
|
9077
9077
|
multi: true,
|
|
9078
9078
|
},
|
|
9079
|
-
], template: "<div\n class=\"ea-file-uploader-field\"\n [ngClass]=\"hostClasses()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [required]=\"required()\" />\n }\n\n <input\n #fileInputEl\n type=\"file\"\n class=\"ea-file-uploader-field__file-input\"\n [id]=\"id()\"\n [multiple]=\"multiple()\"\n [attr.accept]=\"accept() ?? null\"\n [attr.required]=\"required() ? true : null\"\n [disabled]=\"isDisabled()\"\n (change)=\"onFileSelected($event)\" />\n\n <button\n #dropzoneEl\n type=\"button\"\n class=\"ea-file-uploader-field__dropzone\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.aria-label]=\"label() ?? promptText()\"\n [disabled]=\"isDisabled()\"\n (click)=\"openFilePicker()\"\n (keydown)=\"onDropzoneKeydown($event)\"\n (focus)=\"onDropzoneFocus()\"\n (blur)=\"onDropzoneBlur()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n <span\n class=\"ea-file-uploader-field__upload-icon\"\n aria-hidden=\"true\">\n <ng-content select=\"[icon]\">\n <ea-icon-upload-cloud />\n </ng-content>\n </span>\n <span class=\"ea-file-uploader-field__prompt\">{{ promptText() }}</span>\n @if (constraintsText(); as c) {\n <span\n class=\"ea-file-uploader-field__constraints\"\n [id]=\"constraintsId()\">\n {{ c }}\n </span>\n }\n </button>\n\n @if (showFileList() && value().length) {\n <ul\n class=\"ea-file-uploader-field__list\"\n [attr.aria-label]=\"i18n.messages().fileUploader.fileListLabel\">\n @for (file of value(); track trackFile($index, file)) {\n <li class=\"ea-file-uploader-field__item\">\n <span\n class=\"ea-file-uploader-field__type-icon\"\n aria-hidden=\"true\">\n @switch (iconKey(file)) {\n @case ('image') {\n <ea-icon-image />\n }\n @case ('film') {\n <ea-icon-film />\n }\n @case ('music') {\n <ea-icon-music />\n }\n @case ('archive') {\n <ea-icon-archive />\n }\n @case ('text') {\n <ea-icon-file-text />\n }\n @default {\n <ea-icon-file />\n }\n }\n </span>\n <div class=\"ea-file-uploader-field__meta\">\n <span\n class=\"ea-file-uploader-field__name\"\n [title]=\"file.name\">\n {{ file.name }}\n </span>\n <span class=\"ea-file-uploader-field__size\">\n {{ formatBytes(file.size) }}\n </span>\n @if (progressFor(file); as p) {\n <div\n class=\"ea-file-uploader-field__progress\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"p\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\">\n <div\n class=\"ea-file-uploader-field__progress-bar\"\n [style.width.%]=\"p\">\n </div>\n </div>\n }\n </div>\n <button\n type=\"button\"\n class=\"ea-file-uploader-field__remove\"\n [attr.aria-label]=\"i18n.messages().fileUploader.removeFile(file.name)\"\n [disabled]=\"isDisabled()\"\n (click)=\"removeFile(file)\">\n <ea-icon-x />\n </button>\n </li>\n }\n </ul>\n }\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:block}.ea-file-uploader-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-file-uploader-field--xs{font-size:var(--font-size-xs)}.ea-file-uploader-field--sm{font-size:var(--font-size-sm)}.ea-file-uploader-field--md{font-size:var(--font-size-md)}.ea-file-uploader-field--lg{font-size:var(--font-size-lg)}.ea-file-uploader-field--xl{font-size:var(--font-size-xl)}.ea-file-uploader-field__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.ea-file-uploader-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;width:100%;padding:1.5em;font-family:inherit;font-size:.875em;line-height:var(--line-height-normal);color:var(--color-text-tertiary);text-align:center;border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);cursor:pointer;transition:var(--transition-colors);appearance:none}.ea-file-uploader-field__dropzone:hover:not(:disabled){border-color:var(--color-border-focus);background-color:var(--color-state-hover);color:var(--color-text-secondary)}.ea-file-uploader-field__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-file-uploader-field__dropzone:disabled{cursor:not-allowed;opacity:.6}.ea-file-uploader-field__upload-icon{display:inline-flex;font-size:2.5em;opacity:.7}.ea-file-uploader-field__prompt{font-weight:var(--font-weight-medium)}.ea-file-uploader-field__constraints{font-size:var(--text-helper-size);line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:var(--color-primary-500);background-color:var(--color-primary-50);color:var(--color-primary-600)}.ea-file-uploader-field--error .ea-file-uploader-field__dropzone{border-color:var(--color-error-default)}.ea-file-uploader-field__list{display:flex;flex-direction:column;gap:.25em;padding:0;margin:0;list-style:none}.ea-file-uploader-field__item{display:flex;align-items:center;gap:.75em;padding:.5em .75em;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background-color:var(--color-bg-base)}.ea-file-uploader-field__type-icon{display:inline-flex;flex-shrink:0;width:1.25em;height:1.25em;color:var(--color-text-secondary)}.ea-file-uploader-field__type-icon>*{width:100%;height:100%}.ea-file-uploader-field__meta{display:flex;flex-direction:column;gap:.125em;flex:1 1 auto;min-width:0}.ea-file-uploader-field__name{overflow:hidden;font-size:.875em;text-overflow:ellipsis;color:var(--color-text-primary);white-space:nowrap}.ea-file-uploader-field__size{font-size:var(--text-helper-size);line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field__progress{overflow:hidden;width:100%;height:4px;margin-top:var(--space-1);border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-file-uploader-field__progress-bar{height:100%;border-radius:inherit;background-color:var(--color-primary-500);transition:width
|
|
9079
|
+
], template: "<div\n class=\"ea-file-uploader-field\"\n [ngClass]=\"hostClasses()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [required]=\"required()\" />\n }\n\n <input\n #fileInputEl\n type=\"file\"\n class=\"ea-file-uploader-field__file-input\"\n [id]=\"id()\"\n [multiple]=\"multiple()\"\n [attr.accept]=\"accept() ?? null\"\n [attr.required]=\"required() ? true : null\"\n [disabled]=\"isDisabled()\"\n (change)=\"onFileSelected($event)\" />\n\n <button\n #dropzoneEl\n type=\"button\"\n class=\"ea-file-uploader-field__dropzone\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.aria-label]=\"label() ?? promptText()\"\n [disabled]=\"isDisabled()\"\n (click)=\"openFilePicker()\"\n (keydown)=\"onDropzoneKeydown($event)\"\n (focus)=\"onDropzoneFocus()\"\n (blur)=\"onDropzoneBlur()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n <span\n class=\"ea-file-uploader-field__upload-icon\"\n aria-hidden=\"true\">\n <ng-content select=\"[icon]\">\n <ea-icon-upload-cloud />\n </ng-content>\n </span>\n <span class=\"ea-file-uploader-field__prompt\">{{ promptText() }}</span>\n @if (constraintsText(); as c) {\n <span\n class=\"ea-file-uploader-field__constraints\"\n [id]=\"constraintsId()\">\n {{ c }}\n </span>\n }\n </button>\n\n @if (showFileList() && value().length) {\n <ul\n class=\"ea-file-uploader-field__list\"\n [attr.aria-label]=\"i18n.messages().fileUploader.fileListLabel\">\n @for (file of value(); track trackFile($index, file)) {\n <li class=\"ea-file-uploader-field__item\">\n <span\n class=\"ea-file-uploader-field__type-icon\"\n aria-hidden=\"true\">\n @switch (iconKey(file)) {\n @case ('image') {\n <ea-icon-image />\n }\n @case ('film') {\n <ea-icon-film />\n }\n @case ('music') {\n <ea-icon-music />\n }\n @case ('archive') {\n <ea-icon-archive />\n }\n @case ('text') {\n <ea-icon-file-text />\n }\n @default {\n <ea-icon-file />\n }\n }\n </span>\n <div class=\"ea-file-uploader-field__meta\">\n <span\n class=\"ea-file-uploader-field__name\"\n [title]=\"file.name\">\n {{ file.name }}\n </span>\n <span class=\"ea-file-uploader-field__size\">\n {{ formatBytes(file.size) }}\n </span>\n @if (progressFor(file); as p) {\n <div\n class=\"ea-file-uploader-field__progress\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"p\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\">\n <div\n class=\"ea-file-uploader-field__progress-bar\"\n [style.width.%]=\"p\">\n </div>\n </div>\n }\n </div>\n <button\n type=\"button\"\n class=\"ea-file-uploader-field__remove\"\n [attr.aria-label]=\"i18n.messages().fileUploader.removeFile(file.name)\"\n [disabled]=\"isDisabled()\"\n (click)=\"removeFile(file)\">\n <ea-icon-x />\n </button>\n </li>\n }\n </ul>\n }\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [":host{display:block}.ea-file-uploader-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-file-uploader-field--xs{font-size:var(--font-size-xs)}.ea-file-uploader-field--sm{font-size:var(--font-size-sm)}.ea-file-uploader-field--md{font-size:var(--font-size-md)}.ea-file-uploader-field--lg{font-size:var(--font-size-lg)}.ea-file-uploader-field--xl{font-size:var(--font-size-xl)}.ea-file-uploader-field__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.ea-file-uploader-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;width:100%;padding:1.5em;font-family:inherit;font-size:.875em;line-height:var(--line-height-normal);color:var(--color-text-tertiary);text-align:center;border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);cursor:pointer;transition:var(--transition-colors);appearance:none}.ea-file-uploader-field__dropzone:hover:not(:disabled){border-color:var(--color-border-focus);background-color:var(--color-state-hover);color:var(--color-text-secondary)}.ea-file-uploader-field__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-file-uploader-field__dropzone:disabled{cursor:not-allowed;opacity:.6}.ea-file-uploader-field__upload-icon{display:inline-flex;font-size:2.5em;opacity:.7}.ea-file-uploader-field__prompt{font-weight:var(--font-weight-medium)}.ea-file-uploader-field__constraints{font-size:var(--text-helper-size);line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field--drag-over .ea-file-uploader-field__dropzone{border-color:var(--color-primary-500);background-color:var(--color-primary-50);color:var(--color-primary-600)}.ea-file-uploader-field--error .ea-file-uploader-field__dropzone{border-color:var(--color-error-default)}.ea-file-uploader-field__list{display:flex;flex-direction:column;gap:.25em;padding:0;margin:0;list-style:none}.ea-file-uploader-field__item{display:flex;align-items:center;gap:.75em;padding:.5em .75em;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background-color:var(--color-bg-base)}.ea-file-uploader-field__type-icon{display:inline-flex;flex-shrink:0;width:1.25em;height:1.25em;color:var(--color-text-secondary)}.ea-file-uploader-field__type-icon>*{width:100%;height:100%}.ea-file-uploader-field__meta{display:flex;flex-direction:column;gap:.125em;flex:1 1 auto;min-width:0}.ea-file-uploader-field__name{overflow:hidden;font-size:.875em;text-overflow:ellipsis;color:var(--color-text-primary);white-space:nowrap}.ea-file-uploader-field__size{font-size:var(--text-helper-size);line-height:var(--text-helper-lh);color:var(--color-text-tertiary)}.ea-file-uploader-field__progress{overflow:hidden;width:100%;height:4px;margin-top:var(--space-1);border-radius:var(--radius-full);background-color:var(--color-bg-muted)}.ea-file-uploader-field__progress-bar{height:100%;border-radius:inherit;background-color:var(--color-primary-500);transition:width var(--duration-normal) var(--ease-out)}.ea-file-uploader-field__remove{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-file-uploader-field__remove>*{font-size:1.25em}.ea-file-uploader-field__remove:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-file-uploader-field__remove:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-file-uploader-field__remove:disabled{cursor:not-allowed;opacity:.5}.ea-file-uploader-field__remove ea-icon-x{width:1em;height:1em}\n"] }]
|
|
9080
9080
|
}], propDecorators: { fileInputEl: [{ type: i0.ViewChild, args: ['fileInputEl', { isSignal: true }] }], dropzoneEl: [{ type: i0.ViewChild, args: ['dropzoneEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], showFileList: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFileList", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], rejected: [{ type: i0.Output, args: ["rejected"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }] } });
|
|
9081
9081
|
const ARCHIVE_MIMES = new Set([
|
|
9082
9082
|
'application/zip',
|