@eagami/ui 5.15.1 → 5.16.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 +15 -11
- package/fesm2022/eagami-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/eagami-ui.d.ts +5 -2
package/fesm2022/eagami-ui.mjs
CHANGED
|
@@ -10824,7 +10824,7 @@ class EagamiWordmarkComponent {
|
|
|
10824
10824
|
}, /* @ts-ignore */
|
|
10825
10825
|
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
10826
10826
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: EagamiWordmarkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10827
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: EagamiWordmarkComponent, isStandalone: true, selector: "ea-eagami-wordmark", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, linked: { classPropertyName: "linked", publicName: "linked", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "dir": "ltr" }, properties: { "style.--_size": "resolvedSize()" } }, ngImport: i0, template: "@if (linked()) {\n <a\n class=\"ea-eagami-wordmark\"\n [class.ea-eagami-wordmark--inline]=\"layout() === 'inline'\"\n [class.ea-eagami-wordmark--tagline]=\"showTagline()\"\n href=\"https://eagami.com\"\n target=\"_blank\"\n rel=\"noopener\"\n [attr.aria-label]=\"ariaLabel()\">\n <ng-container [ngTemplateOutlet]=\"lockup\" />\n </a>\n} @else {\n <span\n class=\"ea-eagami-wordmark\"\n [class.ea-eagami-wordmark--inline]=\"layout() === 'inline'\"\n [class.ea-eagami-wordmark--tagline]=\"showTagline()\">\n <ng-container [ngTemplateOutlet]=\"lockup\" />\n </span>\n}\n\n<ng-template #lockup>\n <ea-icon-eagami\n class=\"ea-eagami-wordmark__logo\"\n aria-hidden=\"true\" />\n\n <span class=\"ea-eagami-wordmark__text\">\n @if (showOverline()) {\n <span class=\"ea-eagami-wordmark__overline\">\n {{ i18n.messages().wordmark.overline }}\n </span>\n }\n <span class=\"ea-eagami-wordmark__brand\">{{ brandText() }}</span>\n @if (showTagline()) {\n @if (layout() === 'inline') {\n <span\n class=\"ea-eagami-wordmark__separator\"\n aria-hidden=\"true\">\n \u2014\n </span>\n }\n <span class=\"ea-eagami-wordmark__tagline\">\n {{ i18n.messages().wordmark.tagline }}\n </span>\n }\n </span>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Syne:wght@400;500&display=swap\";:host{display:inline-
|
|
10827
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: EagamiWordmarkComponent, isStandalone: true, selector: "ea-eagami-wordmark", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, linked: { classPropertyName: "linked", publicName: "linked", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "dir": "ltr" }, properties: { "style.--_size": "resolvedSize()" } }, ngImport: i0, template: "@if (linked()) {\n <a\n class=\"ea-eagami-wordmark\"\n [class.ea-eagami-wordmark--inline]=\"layout() === 'inline'\"\n [class.ea-eagami-wordmark--tagline]=\"showTagline()\"\n href=\"https://eagami.com\"\n target=\"_blank\"\n rel=\"noopener\"\n [attr.aria-label]=\"ariaLabel()\">\n <ng-container [ngTemplateOutlet]=\"lockup\" />\n </a>\n} @else {\n <span\n class=\"ea-eagami-wordmark\"\n [class.ea-eagami-wordmark--inline]=\"layout() === 'inline'\"\n [class.ea-eagami-wordmark--tagline]=\"showTagline()\">\n <ng-container [ngTemplateOutlet]=\"lockup\" />\n </span>\n}\n\n<ng-template #lockup>\n <ea-icon-eagami\n class=\"ea-eagami-wordmark__logo\"\n aria-hidden=\"true\" />\n\n <span class=\"ea-eagami-wordmark__text\">\n @if (showOverline()) {\n <span class=\"ea-eagami-wordmark__overline\">\n {{ i18n.messages().wordmark.overline }}\n </span>\n }\n <span class=\"ea-eagami-wordmark__brand\">{{ brandText() }}</span>\n @if (showTagline()) {\n @if (layout() === 'inline') {\n <span\n class=\"ea-eagami-wordmark__separator\"\n aria-hidden=\"true\">\n \u2014\n </span>\n }\n <span class=\"ea-eagami-wordmark__tagline\">\n {{ i18n.messages().wordmark.tagline }}\n </span>\n }\n </span>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Syne:wght@400;500&display=swap\";:host{display:inline-flex;line-height:var(--line-height-none)}.ea-eagami-wordmark{display:inline-flex;align-items:center;gap:calc(var(--_size) * .125px);border-radius:var(--radius-sm);color:var(--color-text-primary);text-decoration:none;transition:var(--transition-opacity)}.ea-eagami-wordmark:any-link:hover{opacity:.75}.ea-eagami-wordmark:any-link:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-eagami-wordmark:any-link:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-eagami-wordmark__logo{flex-shrink:0;font-size:calc(var(--_size) * 1.5px);forced-color-adjust:none}.ea-eagami-wordmark__text{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:var(--line-height-tight)}.ea-eagami-wordmark__overline,.ea-eagami-wordmark__brand,.ea-eagami-wordmark__tagline{white-space:nowrap;text-transform:lowercase}.ea-eagami-wordmark__overline,.ea-eagami-wordmark__separator,.ea-eagami-wordmark__tagline{font-size:calc(var(--_size) * .4px);font-weight:var(--font-weight-regular);letter-spacing:var(--letter-spacing-wide);font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-eagami-wordmark__overline{margin-bottom:calc(var(--_size) * -.15px);color:var(--ea-eagami-wordmark-overline-color, var(--color-text-secondary))}.ea-eagami-wordmark__brand{font-size:calc(var(--_size) * 1px);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-wide);font-family:var(--font-family-brand)}.ea-eagami-wordmark--tagline .ea-eagami-wordmark__text{transform:translateY(calc(var(--_size) * -.125px))}.ea-eagami-wordmark--inline .ea-eagami-wordmark__text{flex-direction:row;align-items:baseline;gap:calc(var(--_size) * .4px);transform:none}.ea-eagami-wordmark--inline .ea-eagami-wordmark__overline,.ea-eagami-wordmark--inline .ea-eagami-wordmark__separator,.ea-eagami-wordmark--inline .ea-eagami-wordmark__tagline{margin-bottom:0;font-size:calc(var(--_size) * 1px)}\n"], dependencies: [{ kind: "component", type: EagamiIconComponent, selector: "ea-icon-eagami" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10828
10828
|
}
|
|
10829
10829
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: EagamiWordmarkComponent, decorators: [{
|
|
10830
10830
|
type: Component,
|
|
@@ -10832,7 +10832,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
10832
10832
|
// The wordmark is a fixed brand lockup; it never mirrors with UI direction
|
|
10833
10833
|
dir: 'ltr',
|
|
10834
10834
|
'[style.--_size]': 'resolvedSize()',
|
|
10835
|
-
}, template: "@if (linked()) {\n <a\n class=\"ea-eagami-wordmark\"\n [class.ea-eagami-wordmark--inline]=\"layout() === 'inline'\"\n [class.ea-eagami-wordmark--tagline]=\"showTagline()\"\n href=\"https://eagami.com\"\n target=\"_blank\"\n rel=\"noopener\"\n [attr.aria-label]=\"ariaLabel()\">\n <ng-container [ngTemplateOutlet]=\"lockup\" />\n </a>\n} @else {\n <span\n class=\"ea-eagami-wordmark\"\n [class.ea-eagami-wordmark--inline]=\"layout() === 'inline'\"\n [class.ea-eagami-wordmark--tagline]=\"showTagline()\">\n <ng-container [ngTemplateOutlet]=\"lockup\" />\n </span>\n}\n\n<ng-template #lockup>\n <ea-icon-eagami\n class=\"ea-eagami-wordmark__logo\"\n aria-hidden=\"true\" />\n\n <span class=\"ea-eagami-wordmark__text\">\n @if (showOverline()) {\n <span class=\"ea-eagami-wordmark__overline\">\n {{ i18n.messages().wordmark.overline }}\n </span>\n }\n <span class=\"ea-eagami-wordmark__brand\">{{ brandText() }}</span>\n @if (showTagline()) {\n @if (layout() === 'inline') {\n <span\n class=\"ea-eagami-wordmark__separator\"\n aria-hidden=\"true\">\n \u2014\n </span>\n }\n <span class=\"ea-eagami-wordmark__tagline\">\n {{ i18n.messages().wordmark.tagline }}\n </span>\n }\n </span>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Syne:wght@400;500&display=swap\";:host{display:inline-
|
|
10835
|
+
}, template: "@if (linked()) {\n <a\n class=\"ea-eagami-wordmark\"\n [class.ea-eagami-wordmark--inline]=\"layout() === 'inline'\"\n [class.ea-eagami-wordmark--tagline]=\"showTagline()\"\n href=\"https://eagami.com\"\n target=\"_blank\"\n rel=\"noopener\"\n [attr.aria-label]=\"ariaLabel()\">\n <ng-container [ngTemplateOutlet]=\"lockup\" />\n </a>\n} @else {\n <span\n class=\"ea-eagami-wordmark\"\n [class.ea-eagami-wordmark--inline]=\"layout() === 'inline'\"\n [class.ea-eagami-wordmark--tagline]=\"showTagline()\">\n <ng-container [ngTemplateOutlet]=\"lockup\" />\n </span>\n}\n\n<ng-template #lockup>\n <ea-icon-eagami\n class=\"ea-eagami-wordmark__logo\"\n aria-hidden=\"true\" />\n\n <span class=\"ea-eagami-wordmark__text\">\n @if (showOverline()) {\n <span class=\"ea-eagami-wordmark__overline\">\n {{ i18n.messages().wordmark.overline }}\n </span>\n }\n <span class=\"ea-eagami-wordmark__brand\">{{ brandText() }}</span>\n @if (showTagline()) {\n @if (layout() === 'inline') {\n <span\n class=\"ea-eagami-wordmark__separator\"\n aria-hidden=\"true\">\n \u2014\n </span>\n }\n <span class=\"ea-eagami-wordmark__tagline\">\n {{ i18n.messages().wordmark.tagline }}\n </span>\n }\n </span>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Syne:wght@400;500&display=swap\";:host{display:inline-flex;line-height:var(--line-height-none)}.ea-eagami-wordmark{display:inline-flex;align-items:center;gap:calc(var(--_size) * .125px);border-radius:var(--radius-sm);color:var(--color-text-primary);text-decoration:none;transition:var(--transition-opacity)}.ea-eagami-wordmark:any-link:hover{opacity:.75}.ea-eagami-wordmark:any-link:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-eagami-wordmark:any-link:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-eagami-wordmark__logo{flex-shrink:0;font-size:calc(var(--_size) * 1.5px);forced-color-adjust:none}.ea-eagami-wordmark__text{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:var(--line-height-tight)}.ea-eagami-wordmark__overline,.ea-eagami-wordmark__brand,.ea-eagami-wordmark__tagline{white-space:nowrap;text-transform:lowercase}.ea-eagami-wordmark__overline,.ea-eagami-wordmark__separator,.ea-eagami-wordmark__tagline{font-size:calc(var(--_size) * .4px);font-weight:var(--font-weight-regular);letter-spacing:var(--letter-spacing-wide);font-family:var(--font-family-sans);color:var(--color-text-secondary)}.ea-eagami-wordmark__overline{margin-bottom:calc(var(--_size) * -.15px);color:var(--ea-eagami-wordmark-overline-color, var(--color-text-secondary))}.ea-eagami-wordmark__brand{font-size:calc(var(--_size) * 1px);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-wide);font-family:var(--font-family-brand)}.ea-eagami-wordmark--tagline .ea-eagami-wordmark__text{transform:translateY(calc(var(--_size) * -.125px))}.ea-eagami-wordmark--inline .ea-eagami-wordmark__text{flex-direction:row;align-items:baseline;gap:calc(var(--_size) * .4px);transform:none}.ea-eagami-wordmark--inline .ea-eagami-wordmark__overline,.ea-eagami-wordmark--inline .ea-eagami-wordmark__separator,.ea-eagami-wordmark--inline .ea-eagami-wordmark__tagline{margin-bottom:0;font-size:calc(var(--_size) * 1px)}\n"] }]
|
|
10836
10836
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], linked: [{ type: i0.Input, args: [{ isSignal: true, alias: "linked", required: false }] }] } });
|
|
10837
10837
|
|
|
10838
10838
|
/**
|
|
@@ -13594,7 +13594,7 @@ class PaginatorComponent {
|
|
|
13594
13594
|
this.changed.emit({ page: 1, pageSize: newSize });
|
|
13595
13595
|
}
|
|
13596
13596
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13597
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: PaginatorComponent, isStandalone: true, selector: "ea-paginator", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, showRangeLabel: { classPropertyName: "showRangeLabel", publicName: "showRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, groupThousands: { classPropertyName: "groupThousands", publicName: "groupThousands", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange", changed: "changed" }, ngImport: i0, template: "<div\n class=\"ea-paginator\"\n [ngClass]=\"'ea-paginator--' + size()\"\n [class.ea-paginator--left]=\"align() === 'left'\"\n [class.ea-paginator--center]=\"align() === 'center'\"\n [class.ea-paginator--disabled]=\"disabled()\"\n role=\"navigation\"\n [attr.aria-label]=\"i18n.messages().paginator.label\">\n @if (showPageSizeSelector()) {\n <div class=\"ea-paginator__page-size\">\n <label\n class=\"ea-paginator__label\"\n [for]=\"sizeSelectId\">\n {{ i18n.messages().paginator.rowsPerPage }}\n </label>\n <span class=\"ea-paginator__select-wrapper\">\n <select\n class=\"ea-paginator__select\"\n [id]=\"sizeSelectId\"\n [disabled]=\"disabled()\"\n (change)=\"onPageSizeChange($event)\">\n @for (option of pageSizeOptions(); track option) {\n <option\n [value]=\"option\"\n [selected]=\"option === pageSize()\">\n {{ formatNumber(option) }}\n </option>\n }\n </select>\n <ea-icon-chevron-down\n class=\"ea-paginator__select-chevron\"\n aria-hidden=\"true\" />\n </span>\n </div>\n }\n\n @if (showRangeLabel()) {\n <span\n class=\"ea-paginator__range\"\n aria-live=\"polite\">\n <bdi>\n {{\n i18n\n .messages()\n .paginator.range(\n formatNumber(rangeStart()),\n formatNumber(rangeEnd()),\n formatNumber(totalItems())\n )\n }}\n </bdi>\n </span>\n }\n\n <div class=\"ea-paginator__controls\">\n <ea-button\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled() || !canGoPrev()\"\n [aria-label]=\"i18n.messages().paginator.previousPage\"\n (clicked)=\"prevPage()\">\n <ea-icon-chevron-left class=\"ea-rtl-flip\" />\n </ea-button>\n\n @for (p of visiblePages(); track $index) {\n @if (p === 'ellipsis') {\n <span\n class=\"ea-paginator__ellipsis\"\n aria-hidden=\"true\">\n \u2026\n </span>\n } @else {\n <ea-button\n class=\"ea-paginator__page-btn\"\n [class.ea-paginator__page-btn--active]=\"p === page()\"\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled()\"\n [aria-label]=\"i18n.messages().paginator.page(formatNumber(p))\"\n [aria-current]=\"p === page() ? 'page' : undefined\"\n (clicked)=\"goToPage(p)\">\n {{ formatNumber(p) }}\n </ea-button>\n }\n }\n\n <ea-button\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled() || !canGoNext()\"\n [aria-label]=\"i18n.messages().paginator.nextPage\"\n (clicked)=\"nextPage()\">\n <ea-icon-chevron-right class=\"ea-rtl-flip\" />\n </ea-button>\n </div>\n</div>\n", styles: [".ea-paginator{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:1em;width:100%;padding:.75em 1em;font-family:var(--font-family-sans);color:var(--color-text-secondary);border-top:var(--border-width-thin) solid var(--color-border-subtle)}.ea-paginator--xs{font-size:var(--font-size-xs)}.ea-paginator--sm{font-size:var(--font-size-sm)}.ea-paginator--md{font-size:var(--font-size-md)}.ea-paginator--lg{font-size:var(--font-size-lg)}.ea-paginator--xl{font-size:var(--font-size-xl)}.ea-paginator--left{justify-content:flex-start}.ea-paginator--center{justify-content:center}.ea-paginator__page-size{display:flex;align-items:center;gap:.5em}.ea-paginator__label{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__select-wrapper{position:relative;display:inline-flex}.ea-paginator__select-chevron{position:absolute;top:50%;inset-inline-end:.5em;font-size:.75em;color:var(--color-text-secondary);pointer-events:none;transform:translateY(-50%)}.ea-paginator__select{padding-block:.25em;padding-inline:.5em 1.5em;font-size:inherit;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;appearance:none;transition:var(--transition-colors),var(--transition-shadow)}.ea-paginator__select:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-paginator__select:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-paginator__select:disabled{opacity:.5;cursor:not-allowed}.ea-paginator__range{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__controls{display:flex;align-items:center;gap:.25em}.ea-paginator__controls ea-icon-chevron-left,.ea-paginator__controls ea-icon-chevron-right{width:1em;height:1em}.ea-paginator__page-btn--active .ea-button{font-weight:var(--font-weight-medium);border-color:var(--color-brand-text);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-paginator__page-btn--active .ea-button:hover:not(.ea-button--disabled){background-color:var(--color-brand-muted)}@media(forced-colors:active){.ea-paginator__page-btn--active .ea-button{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2em;height:2em;color:var(--color-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.ea-paginator--disabled{pointer-events:none}.ea-paginator--disabled .ea-paginator__range,.ea-paginator--disabled .ea-paginator__label{opacity:.5}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "ea-button", inputs: ["variant", "size", "type", "disabled", "loading", "fullWidth", "icon", "aria-label", "aria-current"], outputs: ["clicked"] }, { kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
13597
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: PaginatorComponent, isStandalone: true, selector: "ea-paginator", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, showRangeLabel: { classPropertyName: "showRangeLabel", publicName: "showRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, groupThousands: { classPropertyName: "groupThousands", publicName: "groupThousands", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange", changed: "changed" }, ngImport: i0, template: "<div\n class=\"ea-paginator\"\n [ngClass]=\"'ea-paginator--' + size()\"\n [class.ea-paginator--left]=\"align() === 'left'\"\n [class.ea-paginator--center]=\"align() === 'center'\"\n [class.ea-paginator--disabled]=\"disabled()\"\n role=\"navigation\"\n [attr.aria-label]=\"i18n.messages().paginator.label\">\n @if (showPageSizeSelector()) {\n <div class=\"ea-paginator__page-size\">\n <label\n class=\"ea-paginator__label\"\n [for]=\"sizeSelectId\">\n {{ i18n.messages().paginator.rowsPerPage }}\n </label>\n <span class=\"ea-paginator__select-wrapper\">\n <select\n class=\"ea-paginator__select\"\n [id]=\"sizeSelectId\"\n [disabled]=\"disabled()\"\n (change)=\"onPageSizeChange($event)\">\n @for (option of pageSizeOptions(); track option) {\n <option\n [value]=\"option\"\n [selected]=\"option === pageSize()\">\n {{ formatNumber(option) }}\n </option>\n }\n </select>\n <ea-icon-chevron-down\n class=\"ea-paginator__select-chevron\"\n aria-hidden=\"true\" />\n </span>\n </div>\n }\n\n @if (showRangeLabel()) {\n <span\n class=\"ea-paginator__range\"\n aria-live=\"polite\">\n <bdi>\n {{\n i18n\n .messages()\n .paginator.range(\n formatNumber(rangeStart()),\n formatNumber(rangeEnd()),\n formatNumber(totalItems())\n )\n }}\n </bdi>\n </span>\n }\n\n <div class=\"ea-paginator__controls\">\n <ea-button\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled() || !canGoPrev()\"\n [aria-label]=\"i18n.messages().paginator.previousPage\"\n (clicked)=\"prevPage()\">\n <ea-icon-chevron-left class=\"ea-rtl-flip\" />\n </ea-button>\n\n @for (p of visiblePages(); track $index) {\n @if (p === 'ellipsis') {\n <span\n class=\"ea-paginator__ellipsis\"\n aria-hidden=\"true\">\n \u2026\n </span>\n } @else {\n <ea-button\n class=\"ea-paginator__page-btn\"\n [class.ea-paginator__page-btn--active]=\"p === page()\"\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled()\"\n [aria-label]=\"i18n.messages().paginator.page(formatNumber(p))\"\n [aria-current]=\"p === page() ? 'page' : undefined\"\n (clicked)=\"goToPage(p)\">\n {{ formatNumber(p) }}\n </ea-button>\n }\n }\n\n <ea-button\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled() || !canGoNext()\"\n [aria-label]=\"i18n.messages().paginator.nextPage\"\n (clicked)=\"nextPage()\">\n <ea-icon-chevron-right class=\"ea-rtl-flip\" />\n </ea-button>\n </div>\n</div>\n", styles: [".ea-paginator{display:flex;flex-wrap:wrap;align-items:center;justify-content:safe flex-end;gap:1em;width:100%;padding:.75em 1em;font-family:var(--font-family-sans);color:var(--color-text-secondary);border-top:var(--border-width-thin) solid var(--color-border-subtle)}.ea-paginator--xs{font-size:var(--font-size-xs)}.ea-paginator--sm{font-size:var(--font-size-sm)}.ea-paginator--md{font-size:var(--font-size-md)}.ea-paginator--lg{font-size:var(--font-size-lg)}.ea-paginator--xl{font-size:var(--font-size-xl)}.ea-paginator--left{justify-content:flex-start}.ea-paginator--center{justify-content:safe center}.ea-paginator__page-size{display:flex;align-items:center;gap:.5em}.ea-paginator__label{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__select-wrapper{position:relative;display:inline-flex}.ea-paginator__select-chevron{position:absolute;top:50%;inset-inline-end:.5em;font-size:.75em;color:var(--color-text-secondary);pointer-events:none;transform:translateY(-50%)}.ea-paginator__select{padding-block:.25em;padding-inline:.5em 1.5em;font-size:inherit;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;appearance:none;transition:var(--transition-colors),var(--transition-shadow)}.ea-paginator__select:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-paginator__select:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-paginator__select:disabled{opacity:.5;cursor:not-allowed}.ea-paginator__range{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__controls{display:flex;align-items:center;gap:.25em}.ea-paginator__controls ea-icon-chevron-left,.ea-paginator__controls ea-icon-chevron-right{width:1em;height:1em}.ea-paginator__page-btn--active .ea-button{font-weight:var(--font-weight-medium);border-color:var(--color-brand-text);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-paginator__page-btn--active .ea-button:hover:not(.ea-button--disabled){background-color:var(--color-brand-muted)}@media(forced-colors:active){.ea-paginator__page-btn--active .ea-button{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2em;height:2em;color:var(--color-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.ea-paginator--disabled{pointer-events:none}.ea-paginator--disabled .ea-paginator__range,.ea-paginator--disabled .ea-paginator__label{opacity:.5}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "ea-button", inputs: ["variant", "size", "type", "disabled", "loading", "fullWidth", "icon", "aria-label", "aria-current"], outputs: ["clicked"] }, { kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
13598
13598
|
}
|
|
13599
13599
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
13600
13600
|
type: Component,
|
|
@@ -13604,7 +13604,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
13604
13604
|
ChevronDownIconComponent,
|
|
13605
13605
|
ChevronLeftIconComponent,
|
|
13606
13606
|
ChevronRightIconComponent,
|
|
13607
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ea-paginator\"\n [ngClass]=\"'ea-paginator--' + size()\"\n [class.ea-paginator--left]=\"align() === 'left'\"\n [class.ea-paginator--center]=\"align() === 'center'\"\n [class.ea-paginator--disabled]=\"disabled()\"\n role=\"navigation\"\n [attr.aria-label]=\"i18n.messages().paginator.label\">\n @if (showPageSizeSelector()) {\n <div class=\"ea-paginator__page-size\">\n <label\n class=\"ea-paginator__label\"\n [for]=\"sizeSelectId\">\n {{ i18n.messages().paginator.rowsPerPage }}\n </label>\n <span class=\"ea-paginator__select-wrapper\">\n <select\n class=\"ea-paginator__select\"\n [id]=\"sizeSelectId\"\n [disabled]=\"disabled()\"\n (change)=\"onPageSizeChange($event)\">\n @for (option of pageSizeOptions(); track option) {\n <option\n [value]=\"option\"\n [selected]=\"option === pageSize()\">\n {{ formatNumber(option) }}\n </option>\n }\n </select>\n <ea-icon-chevron-down\n class=\"ea-paginator__select-chevron\"\n aria-hidden=\"true\" />\n </span>\n </div>\n }\n\n @if (showRangeLabel()) {\n <span\n class=\"ea-paginator__range\"\n aria-live=\"polite\">\n <bdi>\n {{\n i18n\n .messages()\n .paginator.range(\n formatNumber(rangeStart()),\n formatNumber(rangeEnd()),\n formatNumber(totalItems())\n )\n }}\n </bdi>\n </span>\n }\n\n <div class=\"ea-paginator__controls\">\n <ea-button\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled() || !canGoPrev()\"\n [aria-label]=\"i18n.messages().paginator.previousPage\"\n (clicked)=\"prevPage()\">\n <ea-icon-chevron-left class=\"ea-rtl-flip\" />\n </ea-button>\n\n @for (p of visiblePages(); track $index) {\n @if (p === 'ellipsis') {\n <span\n class=\"ea-paginator__ellipsis\"\n aria-hidden=\"true\">\n \u2026\n </span>\n } @else {\n <ea-button\n class=\"ea-paginator__page-btn\"\n [class.ea-paginator__page-btn--active]=\"p === page()\"\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled()\"\n [aria-label]=\"i18n.messages().paginator.page(formatNumber(p))\"\n [aria-current]=\"p === page() ? 'page' : undefined\"\n (clicked)=\"goToPage(p)\">\n {{ formatNumber(p) }}\n </ea-button>\n }\n }\n\n <ea-button\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled() || !canGoNext()\"\n [aria-label]=\"i18n.messages().paginator.nextPage\"\n (clicked)=\"nextPage()\">\n <ea-icon-chevron-right class=\"ea-rtl-flip\" />\n </ea-button>\n </div>\n</div>\n", styles: [".ea-paginator{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:1em;width:100%;padding:.75em 1em;font-family:var(--font-family-sans);color:var(--color-text-secondary);border-top:var(--border-width-thin) solid var(--color-border-subtle)}.ea-paginator--xs{font-size:var(--font-size-xs)}.ea-paginator--sm{font-size:var(--font-size-sm)}.ea-paginator--md{font-size:var(--font-size-md)}.ea-paginator--lg{font-size:var(--font-size-lg)}.ea-paginator--xl{font-size:var(--font-size-xl)}.ea-paginator--left{justify-content:flex-start}.ea-paginator--center{justify-content:center}.ea-paginator__page-size{display:flex;align-items:center;gap:.5em}.ea-paginator__label{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__select-wrapper{position:relative;display:inline-flex}.ea-paginator__select-chevron{position:absolute;top:50%;inset-inline-end:.5em;font-size:.75em;color:var(--color-text-secondary);pointer-events:none;transform:translateY(-50%)}.ea-paginator__select{padding-block:.25em;padding-inline:.5em 1.5em;font-size:inherit;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;appearance:none;transition:var(--transition-colors),var(--transition-shadow)}.ea-paginator__select:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-paginator__select:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-paginator__select:disabled{opacity:.5;cursor:not-allowed}.ea-paginator__range{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__controls{display:flex;align-items:center;gap:.25em}.ea-paginator__controls ea-icon-chevron-left,.ea-paginator__controls ea-icon-chevron-right{width:1em;height:1em}.ea-paginator__page-btn--active .ea-button{font-weight:var(--font-weight-medium);border-color:var(--color-brand-text);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-paginator__page-btn--active .ea-button:hover:not(.ea-button--disabled){background-color:var(--color-brand-muted)}@media(forced-colors:active){.ea-paginator__page-btn--active .ea-button{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2em;height:2em;color:var(--color-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.ea-paginator--disabled{pointer-events:none}.ea-paginator--disabled .ea-paginator__range,.ea-paginator--disabled .ea-paginator__label{opacity:.5}\n"] }]
|
|
13607
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ea-paginator\"\n [ngClass]=\"'ea-paginator--' + size()\"\n [class.ea-paginator--left]=\"align() === 'left'\"\n [class.ea-paginator--center]=\"align() === 'center'\"\n [class.ea-paginator--disabled]=\"disabled()\"\n role=\"navigation\"\n [attr.aria-label]=\"i18n.messages().paginator.label\">\n @if (showPageSizeSelector()) {\n <div class=\"ea-paginator__page-size\">\n <label\n class=\"ea-paginator__label\"\n [for]=\"sizeSelectId\">\n {{ i18n.messages().paginator.rowsPerPage }}\n </label>\n <span class=\"ea-paginator__select-wrapper\">\n <select\n class=\"ea-paginator__select\"\n [id]=\"sizeSelectId\"\n [disabled]=\"disabled()\"\n (change)=\"onPageSizeChange($event)\">\n @for (option of pageSizeOptions(); track option) {\n <option\n [value]=\"option\"\n [selected]=\"option === pageSize()\">\n {{ formatNumber(option) }}\n </option>\n }\n </select>\n <ea-icon-chevron-down\n class=\"ea-paginator__select-chevron\"\n aria-hidden=\"true\" />\n </span>\n </div>\n }\n\n @if (showRangeLabel()) {\n <span\n class=\"ea-paginator__range\"\n aria-live=\"polite\">\n <bdi>\n {{\n i18n\n .messages()\n .paginator.range(\n formatNumber(rangeStart()),\n formatNumber(rangeEnd()),\n formatNumber(totalItems())\n )\n }}\n </bdi>\n </span>\n }\n\n <div class=\"ea-paginator__controls\">\n <ea-button\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled() || !canGoPrev()\"\n [aria-label]=\"i18n.messages().paginator.previousPage\"\n (clicked)=\"prevPage()\">\n <ea-icon-chevron-left class=\"ea-rtl-flip\" />\n </ea-button>\n\n @for (p of visiblePages(); track $index) {\n @if (p === 'ellipsis') {\n <span\n class=\"ea-paginator__ellipsis\"\n aria-hidden=\"true\">\n \u2026\n </span>\n } @else {\n <ea-button\n class=\"ea-paginator__page-btn\"\n [class.ea-paginator__page-btn--active]=\"p === page()\"\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled()\"\n [aria-label]=\"i18n.messages().paginator.page(formatNumber(p))\"\n [aria-current]=\"p === page() ? 'page' : undefined\"\n (clicked)=\"goToPage(p)\">\n {{ formatNumber(p) }}\n </ea-button>\n }\n }\n\n <ea-button\n variant=\"ghost\"\n [size]=\"size()\"\n [disabled]=\"disabled() || !canGoNext()\"\n [aria-label]=\"i18n.messages().paginator.nextPage\"\n (clicked)=\"nextPage()\">\n <ea-icon-chevron-right class=\"ea-rtl-flip\" />\n </ea-button>\n </div>\n</div>\n", styles: [".ea-paginator{display:flex;flex-wrap:wrap;align-items:center;justify-content:safe flex-end;gap:1em;width:100%;padding:.75em 1em;font-family:var(--font-family-sans);color:var(--color-text-secondary);border-top:var(--border-width-thin) solid var(--color-border-subtle)}.ea-paginator--xs{font-size:var(--font-size-xs)}.ea-paginator--sm{font-size:var(--font-size-sm)}.ea-paginator--md{font-size:var(--font-size-md)}.ea-paginator--lg{font-size:var(--font-size-lg)}.ea-paginator--xl{font-size:var(--font-size-xl)}.ea-paginator--left{justify-content:flex-start}.ea-paginator--center{justify-content:safe center}.ea-paginator__page-size{display:flex;align-items:center;gap:.5em}.ea-paginator__label{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__select-wrapper{position:relative;display:inline-flex}.ea-paginator__select-chevron{position:absolute;top:50%;inset-inline-end:.5em;font-size:.75em;color:var(--color-text-secondary);pointer-events:none;transform:translateY(-50%)}.ea-paginator__select{padding-block:.25em;padding-inline:.5em 1.5em;font-size:inherit;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;appearance:none;transition:var(--transition-colors),var(--transition-shadow)}.ea-paginator__select:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-paginator__select:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-paginator__select:disabled{opacity:.5;cursor:not-allowed}.ea-paginator__range{white-space:nowrap;color:var(--color-text-secondary)}.ea-paginator__controls{display:flex;align-items:center;gap:.25em}.ea-paginator__controls ea-icon-chevron-left,.ea-paginator__controls ea-icon-chevron-right{width:1em;height:1em}.ea-paginator__page-btn--active .ea-button{font-weight:var(--font-weight-medium);border-color:var(--color-brand-text);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-paginator__page-btn--active .ea-button:hover:not(.ea-button--disabled){background-color:var(--color-brand-muted)}@media(forced-colors:active){.ea-paginator__page-btn--active .ea-button{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2em;height:2em;color:var(--color-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.ea-paginator--disabled{pointer-events:none}.ea-paginator--disabled .ea-paginator__range,.ea-paginator--disabled .ea-paginator__label{opacity:.5}\n"] }]
|
|
13608
13608
|
}], propDecorators: { totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: true }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], showPageSizeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSizeSelector", required: false }] }], showRangeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRangeLabel", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], groupThousands: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupThousands", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
13609
13609
|
|
|
13610
13610
|
/**
|
|
@@ -14954,6 +14954,8 @@ class StepperComponent {
|
|
|
14954
14954
|
...(ngDevMode ? [{ debugName: "linear" }] : /* istanbul ignore next */ []));
|
|
14955
14955
|
size = input('md', /* @ts-ignore */
|
|
14956
14956
|
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
14957
|
+
orientation = input('horizontal', /* @ts-ignore */
|
|
14958
|
+
...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
14957
14959
|
disabled = input(false, /* @ts-ignore */
|
|
14958
14960
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
14959
14961
|
id = input(uniqueId('ea-stepper'), /* @ts-ignore */
|
|
@@ -14962,6 +14964,7 @@ class StepperComponent {
|
|
|
14962
14964
|
changed = output();
|
|
14963
14965
|
hostClasses = computed(() => ({
|
|
14964
14966
|
[`ea-stepper--${this.size()}`]: true,
|
|
14967
|
+
[`ea-stepper--${this.orientation()}`]: true,
|
|
14965
14968
|
'ea-stepper--disabled': this.disabled(),
|
|
14966
14969
|
}), /* @ts-ignore */
|
|
14967
14970
|
...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
@@ -15024,9 +15027,10 @@ class StepperComponent {
|
|
|
15024
15027
|
if (steps.length === 0) {
|
|
15025
15028
|
return;
|
|
15026
15029
|
}
|
|
15030
|
+
const vertical = this.orientation() === 'vertical';
|
|
15027
15031
|
const rtl = isRtl(event.currentTarget);
|
|
15028
|
-
const forwardKey = rtl ? 'ArrowLeft' : 'ArrowRight';
|
|
15029
|
-
const backwardKey = rtl ? 'ArrowRight' : 'ArrowLeft';
|
|
15032
|
+
const forwardKey = vertical ? 'ArrowDown' : rtl ? 'ArrowLeft' : 'ArrowRight';
|
|
15033
|
+
const backwardKey = vertical ? 'ArrowUp' : rtl ? 'ArrowRight' : 'ArrowLeft';
|
|
15030
15034
|
let nextIndex = -1;
|
|
15031
15035
|
if (event.key === forwardKey) {
|
|
15032
15036
|
event.preventDefault();
|
|
@@ -15083,12 +15087,12 @@ class StepperComponent {
|
|
|
15083
15087
|
return -1;
|
|
15084
15088
|
}
|
|
15085
15089
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15086
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: StepperComponent, isStandalone: true, selector: "ea-stepper", inputs: { activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeStep: "activeStepChange", changed: "changed" }, ngImport: i0, template: "<div\n class=\"ea-stepper\"\n [ngClass]=\"hostClasses()\">\n <div\n class=\"ea-stepper__list\"\n role=\"tablist\"\n [attr.aria-label]=\"i18n.messages().stepper.stepsLabel\"\n (keydown)=\"handleKeydown($event)\">\n @for (step of registeredSteps(); let i = $index; track step) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"ea-stepper__button\"\n [class.ea-stepper__button--active]=\"i === activeStep()\"\n [class.ea-stepper__button--completed]=\"step.completed()\"\n [id]=\"step.id() + '-tab'\"\n [attr.aria-controls]=\"i === activeStep() ? step.id() + '-panel' : null\"\n [attr.aria-selected]=\"i === activeStep()\"\n [disabled]=\"!canNavigateTo(i)\"\n [tabindex]=\"i === activeStep() ? 0 : -1\"\n (click)=\"selectStep(i)\">\n <span\n class=\"ea-stepper__circle\"\n aria-hidden=\"true\">\n @if (step.completed()) {\n <ea-icon-check />\n } @else {\n {{ i + 1 }}\n }\n </span>\n <span class=\"ea-stepper__label\">\n {{ step.label() }}\n @if (step.optional()) {\n <span class=\"ea-stepper__optional\">\n ({{ i18n.messages().stepper.optional }})\n </span>\n }\n </span>\n @if (step.completed()) {\n <span class=\"ea-stepper__completed-label\">\n {{ i18n.messages().stepper.stepCompleted }}\n </span>\n }\n </button>\n @if (i < registeredSteps().length - 1) {\n <span\n class=\"ea-stepper__connector\"\n [class.ea-stepper__connector--completed]=\"step.completed()\"\n aria-hidden=\"true\">\n </span>\n }\n }\n </div>\n <ng-content />\n</div>\n", styles: [".ea-stepper{display:flex;flex-direction:column;gap:var(--space-4)}.ea-stepper--xs{font-size:var(--font-size-xs)}.ea-stepper--sm{font-size:var(--font-size-sm)}.ea-stepper--md{font-size:var(--font-size-md)}.ea-stepper--lg{font-size:var(--font-size-lg)}.ea-stepper--xl{font-size:var(--font-size-xl)}.ea-stepper__list{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:0;list-style:none}.ea-stepper__button{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:0;border:none;background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-stepper__button:focus-visible{outline:none}.ea-stepper__button:focus-visible .ea-stepper__circle{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-stepper__button:focus-visible .ea-stepper__circle{outline:2px solid Highlight;outline-offset:2px}}.ea-stepper__button:hover:not(:disabled){color:var(--color-text-primary)}.ea-stepper__button:disabled{cursor:not-allowed;color:var(--color-text-disabled)}.ea-stepper__circle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2em;height:2em;font-weight:var(--font-weight-medium);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-full);background-color:var(--color-bg-base);color:var(--color-text-secondary);transition:var(--transition-colors)}.ea-stepper__circle ea-icon-check{width:.875em;height:.875em}.ea-stepper__button--active .ea-stepper__circle{border-color:var(--color-brand-secondary-default);background-color:var(--color-brand-secondary-default);color:var(--color-neutral-0)}@media(forced-colors:active){.ea-stepper__button--active .ea-stepper__circle{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-stepper__button--completed .ea-stepper__circle{border-color:var(--color-brand-default);background-color:var(--color-brand-default);color:var(--color-neutral-0)}@media(forced-colors:active){.ea-stepper__button--completed .ea-stepper__circle{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-stepper__button:disabled .ea-stepper__circle{border-color:var(--color-border-default);background-color:var(--color-bg-muted);color:var(--color-text-disabled)}.ea-stepper__label{display:flex;flex-direction:column;align-items:flex-start;font-size:.875em;font-weight:var(--font-weight-medium);text-align:start;line-height:var(--line-height-tight)}.ea-stepper__button--active .ea-stepper__label{color:var(--color-text-primary)}.ea-stepper__optional{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--color-text-tertiary)}.ea-stepper__completed-label{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-stepper__connector{display:block;flex:1;align-self:center;min-width:var(--space-4);height:var(--border-width-thin);background-color:var(--color-border-default);transition:var(--transition-colors)}.ea-stepper__connector--completed{background-color:var(--color-brand-default)}@media(forced-colors:active){.ea-stepper__connector--completed{background-color:Highlight}}.ea-stepper--disabled{opacity:.6;pointer-events:none}.ea-step__panel:focus-visible{outline:none}\n"], dependencies: [{ kind: "component", type: CheckIconComponent, selector: "ea-icon-check" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
15090
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: StepperComponent, isStandalone: true, selector: "ea-stepper", inputs: { activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeStep: "activeStepChange", changed: "changed" }, ngImport: i0, template: "<div\n class=\"ea-stepper\"\n [ngClass]=\"hostClasses()\">\n <div\n class=\"ea-stepper__list\"\n role=\"tablist\"\n [attr.aria-label]=\"i18n.messages().stepper.stepsLabel\"\n [attr.aria-orientation]=\"orientation()\"\n (keydown)=\"handleKeydown($event)\">\n @for (step of registeredSteps(); let i = $index; track step) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"ea-stepper__button\"\n [class.ea-stepper__button--active]=\"i === activeStep()\"\n [class.ea-stepper__button--completed]=\"step.completed()\"\n [id]=\"step.id() + '-tab'\"\n [attr.aria-controls]=\"i === activeStep() ? step.id() + '-panel' : null\"\n [attr.aria-selected]=\"i === activeStep()\"\n [disabled]=\"!canNavigateTo(i)\"\n [tabindex]=\"i === activeStep() ? 0 : -1\"\n (click)=\"selectStep(i)\">\n <span\n class=\"ea-stepper__circle\"\n aria-hidden=\"true\">\n @if (step.completed()) {\n <ea-icon-check />\n } @else {\n {{ i + 1 }}\n }\n </span>\n <span class=\"ea-stepper__label\">\n {{ step.label() }}\n @if (step.optional()) {\n <span class=\"ea-stepper__optional\">\n ({{ i18n.messages().stepper.optional }})\n </span>\n }\n </span>\n @if (step.completed()) {\n <span class=\"ea-stepper__completed-label\">\n {{ i18n.messages().stepper.stepCompleted }}\n </span>\n }\n </button>\n @if (i < registeredSteps().length - 1) {\n <span\n class=\"ea-stepper__connector\"\n [class.ea-stepper__connector--completed]=\"step.completed()\"\n aria-hidden=\"true\">\n </span>\n }\n }\n </div>\n <ng-content />\n</div>\n", styles: [".ea-stepper{display:flex;flex-direction:column;gap:var(--space-4)}.ea-stepper--xs{font-size:var(--font-size-xs)}.ea-stepper--sm{font-size:var(--font-size-sm)}.ea-stepper--md{font-size:var(--font-size-md)}.ea-stepper--lg{font-size:var(--font-size-lg)}.ea-stepper--xl{font-size:var(--font-size-xl)}.ea-stepper__list{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:0;list-style:none}.ea-stepper__button{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:0;border:none;background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-stepper__button:focus-visible{outline:none}.ea-stepper__button:focus-visible .ea-stepper__circle{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-stepper__button:focus-visible .ea-stepper__circle{outline:2px solid Highlight;outline-offset:2px}}.ea-stepper__button:hover:not(:disabled){color:var(--color-text-primary)}.ea-stepper__button:disabled{cursor:not-allowed;color:var(--color-text-disabled)}.ea-stepper__circle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2em;height:2em;font-weight:var(--font-weight-medium);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-full);background-color:var(--color-bg-base);color:var(--color-text-secondary);transition:var(--transition-colors)}.ea-stepper__circle ea-icon-check{width:.875em;height:.875em}.ea-stepper__button--active .ea-stepper__circle{border-color:var(--color-brand-secondary-default);background-color:var(--color-brand-secondary-default);color:var(--color-neutral-0)}@media(forced-colors:active){.ea-stepper__button--active .ea-stepper__circle{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-stepper__button--completed .ea-stepper__circle{border-color:var(--color-brand-default);background-color:var(--color-brand-default);color:var(--color-neutral-0)}@media(forced-colors:active){.ea-stepper__button--completed .ea-stepper__circle{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-stepper__button:disabled .ea-stepper__circle{border-color:var(--color-border-default);background-color:var(--color-bg-muted);color:var(--color-text-disabled)}.ea-stepper__label{display:flex;flex-direction:column;align-items:flex-start;font-size:.875em;font-weight:var(--font-weight-medium);text-align:start;line-height:var(--line-height-tight)}.ea-stepper__button--active .ea-stepper__label{color:var(--color-text-primary)}.ea-stepper__optional{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--color-text-tertiary)}.ea-stepper__completed-label{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-stepper__connector{display:block;flex:1;align-self:center;min-width:var(--space-4);height:var(--border-width-thin);background-color:var(--color-border-default);transition:var(--transition-colors)}.ea-stepper__connector--completed{background-color:var(--color-brand-default)}@media(forced-colors:active){.ea-stepper__connector--completed{background-color:Highlight}}.ea-stepper--vertical .ea-stepper__list{flex-direction:column;align-items:stretch}.ea-stepper--vertical .ea-stepper__connector{flex:none;align-self:flex-start;width:var(--border-width-thin);min-width:0;height:var(--space-4);margin-inline-start:calc(1em - var(--border-width-thin) / 2)}.ea-stepper--disabled{opacity:.6;pointer-events:none}.ea-step__panel:focus-visible{outline:none}\n"], dependencies: [{ kind: "component", type: CheckIconComponent, selector: "ea-icon-check" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
15087
15091
|
}
|
|
15088
15092
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: StepperComponent, decorators: [{
|
|
15089
15093
|
type: Component,
|
|
15090
|
-
args: [{ selector: 'ea-stepper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CheckIconComponent, NgClass], template: "<div\n class=\"ea-stepper\"\n [ngClass]=\"hostClasses()\">\n <div\n class=\"ea-stepper__list\"\n role=\"tablist\"\n [attr.aria-label]=\"i18n.messages().stepper.stepsLabel\"\n (keydown)=\"handleKeydown($event)\">\n @for (step of registeredSteps(); let i = $index; track step) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"ea-stepper__button\"\n [class.ea-stepper__button--active]=\"i === activeStep()\"\n [class.ea-stepper__button--completed]=\"step.completed()\"\n [id]=\"step.id() + '-tab'\"\n [attr.aria-controls]=\"i === activeStep() ? step.id() + '-panel' : null\"\n [attr.aria-selected]=\"i === activeStep()\"\n [disabled]=\"!canNavigateTo(i)\"\n [tabindex]=\"i === activeStep() ? 0 : -1\"\n (click)=\"selectStep(i)\">\n <span\n class=\"ea-stepper__circle\"\n aria-hidden=\"true\">\n @if (step.completed()) {\n <ea-icon-check />\n } @else {\n {{ i + 1 }}\n }\n </span>\n <span class=\"ea-stepper__label\">\n {{ step.label() }}\n @if (step.optional()) {\n <span class=\"ea-stepper__optional\">\n ({{ i18n.messages().stepper.optional }})\n </span>\n }\n </span>\n @if (step.completed()) {\n <span class=\"ea-stepper__completed-label\">\n {{ i18n.messages().stepper.stepCompleted }}\n </span>\n }\n </button>\n @if (i < registeredSteps().length - 1) {\n <span\n class=\"ea-stepper__connector\"\n [class.ea-stepper__connector--completed]=\"step.completed()\"\n aria-hidden=\"true\">\n </span>\n }\n }\n </div>\n <ng-content />\n</div>\n", styles: [".ea-stepper{display:flex;flex-direction:column;gap:var(--space-4)}.ea-stepper--xs{font-size:var(--font-size-xs)}.ea-stepper--sm{font-size:var(--font-size-sm)}.ea-stepper--md{font-size:var(--font-size-md)}.ea-stepper--lg{font-size:var(--font-size-lg)}.ea-stepper--xl{font-size:var(--font-size-xl)}.ea-stepper__list{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:0;list-style:none}.ea-stepper__button{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:0;border:none;background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-stepper__button:focus-visible{outline:none}.ea-stepper__button:focus-visible .ea-stepper__circle{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-stepper__button:focus-visible .ea-stepper__circle{outline:2px solid Highlight;outline-offset:2px}}.ea-stepper__button:hover:not(:disabled){color:var(--color-text-primary)}.ea-stepper__button:disabled{cursor:not-allowed;color:var(--color-text-disabled)}.ea-stepper__circle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2em;height:2em;font-weight:var(--font-weight-medium);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-full);background-color:var(--color-bg-base);color:var(--color-text-secondary);transition:var(--transition-colors)}.ea-stepper__circle ea-icon-check{width:.875em;height:.875em}.ea-stepper__button--active .ea-stepper__circle{border-color:var(--color-brand-secondary-default);background-color:var(--color-brand-secondary-default);color:var(--color-neutral-0)}@media(forced-colors:active){.ea-stepper__button--active .ea-stepper__circle{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-stepper__button--completed .ea-stepper__circle{border-color:var(--color-brand-default);background-color:var(--color-brand-default);color:var(--color-neutral-0)}@media(forced-colors:active){.ea-stepper__button--completed .ea-stepper__circle{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-stepper__button:disabled .ea-stepper__circle{border-color:var(--color-border-default);background-color:var(--color-bg-muted);color:var(--color-text-disabled)}.ea-stepper__label{display:flex;flex-direction:column;align-items:flex-start;font-size:.875em;font-weight:var(--font-weight-medium);text-align:start;line-height:var(--line-height-tight)}.ea-stepper__button--active .ea-stepper__label{color:var(--color-text-primary)}.ea-stepper__optional{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--color-text-tertiary)}.ea-stepper__completed-label{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-stepper__connector{display:block;flex:1;align-self:center;min-width:var(--space-4);height:var(--border-width-thin);background-color:var(--color-border-default);transition:var(--transition-colors)}.ea-stepper__connector--completed{background-color:var(--color-brand-default)}@media(forced-colors:active){.ea-stepper__connector--completed{background-color:Highlight}}.ea-stepper--disabled{opacity:.6;pointer-events:none}.ea-step__panel:focus-visible{outline:none}\n"] }]
|
|
15091
|
-
}], propDecorators: { activeStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeStep", required: false }] }, { type: i0.Output, args: ["activeStepChange"] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
15094
|
+
args: [{ selector: 'ea-stepper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CheckIconComponent, NgClass], template: "<div\n class=\"ea-stepper\"\n [ngClass]=\"hostClasses()\">\n <div\n class=\"ea-stepper__list\"\n role=\"tablist\"\n [attr.aria-label]=\"i18n.messages().stepper.stepsLabel\"\n [attr.aria-orientation]=\"orientation()\"\n (keydown)=\"handleKeydown($event)\">\n @for (step of registeredSteps(); let i = $index; track step) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"ea-stepper__button\"\n [class.ea-stepper__button--active]=\"i === activeStep()\"\n [class.ea-stepper__button--completed]=\"step.completed()\"\n [id]=\"step.id() + '-tab'\"\n [attr.aria-controls]=\"i === activeStep() ? step.id() + '-panel' : null\"\n [attr.aria-selected]=\"i === activeStep()\"\n [disabled]=\"!canNavigateTo(i)\"\n [tabindex]=\"i === activeStep() ? 0 : -1\"\n (click)=\"selectStep(i)\">\n <span\n class=\"ea-stepper__circle\"\n aria-hidden=\"true\">\n @if (step.completed()) {\n <ea-icon-check />\n } @else {\n {{ i + 1 }}\n }\n </span>\n <span class=\"ea-stepper__label\">\n {{ step.label() }}\n @if (step.optional()) {\n <span class=\"ea-stepper__optional\">\n ({{ i18n.messages().stepper.optional }})\n </span>\n }\n </span>\n @if (step.completed()) {\n <span class=\"ea-stepper__completed-label\">\n {{ i18n.messages().stepper.stepCompleted }}\n </span>\n }\n </button>\n @if (i < registeredSteps().length - 1) {\n <span\n class=\"ea-stepper__connector\"\n [class.ea-stepper__connector--completed]=\"step.completed()\"\n aria-hidden=\"true\">\n </span>\n }\n }\n </div>\n <ng-content />\n</div>\n", styles: [".ea-stepper{display:flex;flex-direction:column;gap:var(--space-4)}.ea-stepper--xs{font-size:var(--font-size-xs)}.ea-stepper--sm{font-size:var(--font-size-sm)}.ea-stepper--md{font-size:var(--font-size-md)}.ea-stepper--lg{font-size:var(--font-size-lg)}.ea-stepper--xl{font-size:var(--font-size-xl)}.ea-stepper__list{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:0;list-style:none}.ea-stepper__button{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:0;border:none;background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-stepper__button:focus-visible{outline:none}.ea-stepper__button:focus-visible .ea-stepper__circle{box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-stepper__button:focus-visible .ea-stepper__circle{outline:2px solid Highlight;outline-offset:2px}}.ea-stepper__button:hover:not(:disabled){color:var(--color-text-primary)}.ea-stepper__button:disabled{cursor:not-allowed;color:var(--color-text-disabled)}.ea-stepper__circle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2em;height:2em;font-weight:var(--font-weight-medium);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-full);background-color:var(--color-bg-base);color:var(--color-text-secondary);transition:var(--transition-colors)}.ea-stepper__circle ea-icon-check{width:.875em;height:.875em}.ea-stepper__button--active .ea-stepper__circle{border-color:var(--color-brand-secondary-default);background-color:var(--color-brand-secondary-default);color:var(--color-neutral-0)}@media(forced-colors:active){.ea-stepper__button--active .ea-stepper__circle{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-stepper__button--completed .ea-stepper__circle{border-color:var(--color-brand-default);background-color:var(--color-brand-default);color:var(--color-neutral-0)}@media(forced-colors:active){.ea-stepper__button--completed .ea-stepper__circle{background-color:Highlight;border-color:Highlight;color:HighlightText}}.ea-stepper__button:disabled .ea-stepper__circle{border-color:var(--color-border-default);background-color:var(--color-bg-muted);color:var(--color-text-disabled)}.ea-stepper__label{display:flex;flex-direction:column;align-items:flex-start;font-size:.875em;font-weight:var(--font-weight-medium);text-align:start;line-height:var(--line-height-tight)}.ea-stepper__button--active .ea-stepper__label{color:var(--color-text-primary)}.ea-stepper__optional{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--color-text-tertiary)}.ea-stepper__completed-label{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}.ea-stepper__connector{display:block;flex:1;align-self:center;min-width:var(--space-4);height:var(--border-width-thin);background-color:var(--color-border-default);transition:var(--transition-colors)}.ea-stepper__connector--completed{background-color:var(--color-brand-default)}@media(forced-colors:active){.ea-stepper__connector--completed{background-color:Highlight}}.ea-stepper--vertical .ea-stepper__list{flex-direction:column;align-items:stretch}.ea-stepper--vertical .ea-stepper__connector{flex:none;align-self:flex-start;width:var(--border-width-thin);min-width:0;height:var(--space-4);margin-inline-start:calc(1em - var(--border-width-thin) / 2)}.ea-stepper--disabled{opacity:.6;pointer-events:none}.ea-step__panel:focus-visible{outline:none}\n"] }]
|
|
15095
|
+
}], propDecorators: { activeStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeStep", required: false }] }, { type: i0.Output, args: ["activeStepChange"] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
15092
15096
|
|
|
15093
15097
|
/**
|
|
15094
15098
|
* Single step within an `<ea-stepper>`. Registers itself with the parent on
|
|
@@ -16908,7 +16912,7 @@ class TransferListComponent {
|
|
|
16908
16912
|
}
|
|
16909
16913
|
}
|
|
16910
16914
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TransferListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16911
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: TransferListComponent, isStandalone: true, selector: "ea-transfer-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, sourceLabel: { classPropertyName: "sourceLabel", publicName: "sourceLabel", isSignal: true, isRequired: false, transformFunction: null }, targetLabel: { classPropertyName: "targetLabel", publicName: "targetLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIds: "selectedIdsChange" }, ngImport: i0, template: "<div [class]=\"hostClasses()\">\n <div class=\"ea-transfer-list__pane\">\n @if (resolvedSourceLabel()) {\n <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedSourceLabel() }}</h3>\n }\n <ul\n class=\"ea-transfer-list__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"resolvedSourceLabel() || messages().transferList.sourceLabel\"\n [attr.aria-disabled]=\"disabled() || null\">\n @for (item of sourceItems(); track item.id) {\n <li\n class=\"ea-transfer-list__item\"\n role=\"option\"\n [attr.aria-selected]=\"isHighlighted('source', item.id)\"\n [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n [class.ea-transfer-list__item--highlighted]=\"isHighlighted('source', item.id)\"\n [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n [attr.tabindex]=\"itemTabindex('source', $index, item)\"\n (click)=\"onItemClick('source', item, $event)\"\n (keydown)=\"onItemKeydown($event, 'source', item)\">\n {{ item.label }}\n </li>\n } @empty {\n <li\n class=\"ea-transfer-list__empty\"\n aria-hidden=\"true\">\n {{ messages().transferList.empty }}\n </li>\n }\n </ul>\n </div>\n\n <div\n class=\"ea-transfer-list__buttons\"\n role=\"group\"\n [attr.aria-label]=\"messages().transferList.controlsLabel\">\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveAllToTarget\"\n [disabled]=\"!canMoveAllRight()\"\n (click)=\"moveAllRight()\">\n <ea-icon-chevrons-right class=\"ea-rtl-flip\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveSelectedToTarget\"\n [disabled]=\"!canMoveRight()\"\n (click)=\"moveSelectedRight()\">\n <ea-icon-chevron-right class=\"ea-rtl-flip\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveSelectedToSource\"\n [disabled]=\"!canMoveLeft()\"\n (click)=\"moveSelectedLeft()\">\n <ea-icon-chevron-left class=\"ea-rtl-flip\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveAllToSource\"\n [disabled]=\"!canMoveAllLeft()\"\n (click)=\"moveAllLeft()\">\n <ea-icon-chevrons-left class=\"ea-rtl-flip\" />\n </button>\n </div>\n\n <div class=\"ea-transfer-list__pane\">\n @if (resolvedTargetLabel()) {\n <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedTargetLabel() }}</h3>\n }\n <ul\n class=\"ea-transfer-list__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"resolvedTargetLabel() || messages().transferList.targetLabel\"\n [attr.aria-disabled]=\"disabled() || null\">\n @for (item of targetItems(); track item.id) {\n <li\n class=\"ea-transfer-list__item\"\n role=\"option\"\n [attr.aria-selected]=\"isHighlighted('target', item.id)\"\n [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n [class.ea-transfer-list__item--highlighted]=\"isHighlighted('target', item.id)\"\n [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n [attr.tabindex]=\"itemTabindex('target', $index, item)\"\n (click)=\"onItemClick('target', item, $event)\"\n (keydown)=\"onItemKeydown($event, 'target', item)\">\n {{ item.label }}\n </li>\n } @empty {\n <li\n class=\"ea-transfer-list__empty\"\n aria-hidden=\"true\">\n {{ messages().transferList.empty }}\n </li>\n }\n </ul>\n </div>\n\n <p\n class=\"ea-transfer-list__announcement\"\n role=\"status\">\n {{ announcement() }}\n </p>\n</div>\n", styles: [":host{display:block}.ea-transfer-list{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-3);color:var(--color-text-primary)}.ea-transfer-list__pane{display:flex;flex-direction:column;min-width:
|
|
16915
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: TransferListComponent, isStandalone: true, selector: "ea-transfer-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, sourceLabel: { classPropertyName: "sourceLabel", publicName: "sourceLabel", isSignal: true, isRequired: false, transformFunction: null }, targetLabel: { classPropertyName: "targetLabel", publicName: "targetLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIds: "selectedIdsChange" }, ngImport: i0, template: "<div [class]=\"hostClasses()\">\n <div class=\"ea-transfer-list__pane\">\n @if (resolvedSourceLabel()) {\n <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedSourceLabel() }}</h3>\n }\n <ul\n class=\"ea-transfer-list__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"resolvedSourceLabel() || messages().transferList.sourceLabel\"\n [attr.aria-disabled]=\"disabled() || null\">\n @for (item of sourceItems(); track item.id) {\n <li\n class=\"ea-transfer-list__item\"\n role=\"option\"\n [attr.aria-selected]=\"isHighlighted('source', item.id)\"\n [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n [class.ea-transfer-list__item--highlighted]=\"isHighlighted('source', item.id)\"\n [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n [attr.tabindex]=\"itemTabindex('source', $index, item)\"\n (click)=\"onItemClick('source', item, $event)\"\n (keydown)=\"onItemKeydown($event, 'source', item)\">\n {{ item.label }}\n </li>\n } @empty {\n <li\n class=\"ea-transfer-list__empty\"\n aria-hidden=\"true\">\n {{ messages().transferList.empty }}\n </li>\n }\n </ul>\n </div>\n\n <div\n class=\"ea-transfer-list__buttons\"\n role=\"group\"\n [attr.aria-label]=\"messages().transferList.controlsLabel\">\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveAllToTarget\"\n [disabled]=\"!canMoveAllRight()\"\n (click)=\"moveAllRight()\">\n <ea-icon-chevrons-right class=\"ea-rtl-flip\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveSelectedToTarget\"\n [disabled]=\"!canMoveRight()\"\n (click)=\"moveSelectedRight()\">\n <ea-icon-chevron-right class=\"ea-rtl-flip\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveSelectedToSource\"\n [disabled]=\"!canMoveLeft()\"\n (click)=\"moveSelectedLeft()\">\n <ea-icon-chevron-left class=\"ea-rtl-flip\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveAllToSource\"\n [disabled]=\"!canMoveAllLeft()\"\n (click)=\"moveAllLeft()\">\n <ea-icon-chevrons-left class=\"ea-rtl-flip\" />\n </button>\n </div>\n\n <div class=\"ea-transfer-list__pane\">\n @if (resolvedTargetLabel()) {\n <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedTargetLabel() }}</h3>\n }\n <ul\n class=\"ea-transfer-list__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"resolvedTargetLabel() || messages().transferList.targetLabel\"\n [attr.aria-disabled]=\"disabled() || null\">\n @for (item of targetItems(); track item.id) {\n <li\n class=\"ea-transfer-list__item\"\n role=\"option\"\n [attr.aria-selected]=\"isHighlighted('target', item.id)\"\n [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n [class.ea-transfer-list__item--highlighted]=\"isHighlighted('target', item.id)\"\n [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n [attr.tabindex]=\"itemTabindex('target', $index, item)\"\n (click)=\"onItemClick('target', item, $event)\"\n (keydown)=\"onItemKeydown($event, 'target', item)\">\n {{ item.label }}\n </li>\n } @empty {\n <li\n class=\"ea-transfer-list__empty\"\n aria-hidden=\"true\">\n {{ messages().transferList.empty }}\n </li>\n }\n </ul>\n </div>\n\n <p\n class=\"ea-transfer-list__announcement\"\n role=\"status\">\n {{ announcement() }}\n </p>\n</div>\n", styles: [":host{display:block}.ea-transfer-list{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-3);color:var(--color-text-primary)}.ea-transfer-list__pane{display:flex;flex-direction:column;min-width:6em;gap:var(--space-2)}.ea-transfer-list__pane-label{margin:0;font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-transfer-list__list{display:flex;flex:1;flex-direction:column;gap:2px;min-height:10em;padding:var(--space-1);margin:0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);list-style:none}.ea-transfer-list__list:focus-visible{outline:none}.ea-transfer-list__item{padding:.5em .75em;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-colors);-webkit-user-select:none;user-select:none}.ea-transfer-list__item:hover:not(.ea-transfer-list__item--disabled){background-color:var(--color-state-hover)}.ea-transfer-list__item:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-transfer-list__item:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-transfer-list__item--highlighted{background-color:var(--color-brand-subtle, var(--color-state-hover));color:var(--color-text-primary)}@media(forced-colors:active){.ea-transfer-list__item--highlighted{background-color:Highlight;color:HighlightText}}.ea-transfer-list__item--disabled{opacity:.5;cursor:not-allowed}.ea-transfer-list__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-transfer-list__buttons{display:flex;flex-direction:column;align-self:center;gap:var(--space-2)}.ea-transfer-list__button{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-transfer-list__button>*{font-size:1.25em}.ea-transfer-list__button:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-transfer-list__button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-transfer-list__button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-transfer-list__button:disabled{cursor:not-allowed;opacity:.5}.ea-transfer-list__button{--ea-icon-button-size: 2em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary)}.ea-transfer-list__button:hover:not(:disabled){border-color:var(--color-border-strong)}.ea-transfer-list--xs{font-size:var(--font-size-xs)}.ea-transfer-list--sm{font-size:var(--font-size-sm)}.ea-transfer-list--md{font-size:var(--font-size-md)}.ea-transfer-list--lg{font-size:var(--font-size-lg)}.ea-transfer-list--xl{font-size:var(--font-size-xl)}.ea-transfer-list--disabled{pointer-events:none;opacity:.6}.ea-transfer-list__announcement{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: ChevronLeftIconComponent, selector: "ea-icon-chevron-left" }, { kind: "component", type: ChevronRightIconComponent, selector: "ea-icon-chevron-right" }, { kind: "component", type: ChevronsLeftIconComponent, selector: "ea-icon-chevrons-left" }, { kind: "component", type: ChevronsRightIconComponent, selector: "ea-icon-chevrons-right" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
16912
16916
|
}
|
|
16913
16917
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TransferListComponent, decorators: [{
|
|
16914
16918
|
type: Component,
|
|
@@ -16917,7 +16921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
16917
16921
|
ChevronRightIconComponent,
|
|
16918
16922
|
ChevronsLeftIconComponent,
|
|
16919
16923
|
ChevronsRightIconComponent,
|
|
16920
|
-
], template: "<div [class]=\"hostClasses()\">\n <div class=\"ea-transfer-list__pane\">\n @if (resolvedSourceLabel()) {\n <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedSourceLabel() }}</h3>\n }\n <ul\n class=\"ea-transfer-list__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"resolvedSourceLabel() || messages().transferList.sourceLabel\"\n [attr.aria-disabled]=\"disabled() || null\">\n @for (item of sourceItems(); track item.id) {\n <li\n class=\"ea-transfer-list__item\"\n role=\"option\"\n [attr.aria-selected]=\"isHighlighted('source', item.id)\"\n [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n [class.ea-transfer-list__item--highlighted]=\"isHighlighted('source', item.id)\"\n [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n [attr.tabindex]=\"itemTabindex('source', $index, item)\"\n (click)=\"onItemClick('source', item, $event)\"\n (keydown)=\"onItemKeydown($event, 'source', item)\">\n {{ item.label }}\n </li>\n } @empty {\n <li\n class=\"ea-transfer-list__empty\"\n aria-hidden=\"true\">\n {{ messages().transferList.empty }}\n </li>\n }\n </ul>\n </div>\n\n <div\n class=\"ea-transfer-list__buttons\"\n role=\"group\"\n [attr.aria-label]=\"messages().transferList.controlsLabel\">\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveAllToTarget\"\n [disabled]=\"!canMoveAllRight()\"\n (click)=\"moveAllRight()\">\n <ea-icon-chevrons-right class=\"ea-rtl-flip\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveSelectedToTarget\"\n [disabled]=\"!canMoveRight()\"\n (click)=\"moveSelectedRight()\">\n <ea-icon-chevron-right class=\"ea-rtl-flip\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveSelectedToSource\"\n [disabled]=\"!canMoveLeft()\"\n (click)=\"moveSelectedLeft()\">\n <ea-icon-chevron-left class=\"ea-rtl-flip\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveAllToSource\"\n [disabled]=\"!canMoveAllLeft()\"\n (click)=\"moveAllLeft()\">\n <ea-icon-chevrons-left class=\"ea-rtl-flip\" />\n </button>\n </div>\n\n <div class=\"ea-transfer-list__pane\">\n @if (resolvedTargetLabel()) {\n <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedTargetLabel() }}</h3>\n }\n <ul\n class=\"ea-transfer-list__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"resolvedTargetLabel() || messages().transferList.targetLabel\"\n [attr.aria-disabled]=\"disabled() || null\">\n @for (item of targetItems(); track item.id) {\n <li\n class=\"ea-transfer-list__item\"\n role=\"option\"\n [attr.aria-selected]=\"isHighlighted('target', item.id)\"\n [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n [class.ea-transfer-list__item--highlighted]=\"isHighlighted('target', item.id)\"\n [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n [attr.tabindex]=\"itemTabindex('target', $index, item)\"\n (click)=\"onItemClick('target', item, $event)\"\n (keydown)=\"onItemKeydown($event, 'target', item)\">\n {{ item.label }}\n </li>\n } @empty {\n <li\n class=\"ea-transfer-list__empty\"\n aria-hidden=\"true\">\n {{ messages().transferList.empty }}\n </li>\n }\n </ul>\n </div>\n\n <p\n class=\"ea-transfer-list__announcement\"\n role=\"status\">\n {{ announcement() }}\n </p>\n</div>\n", styles: [":host{display:block}.ea-transfer-list{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-3);color:var(--color-text-primary)}.ea-transfer-list__pane{display:flex;flex-direction:column;min-width:
|
|
16924
|
+
], template: "<div [class]=\"hostClasses()\">\n <div class=\"ea-transfer-list__pane\">\n @if (resolvedSourceLabel()) {\n <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedSourceLabel() }}</h3>\n }\n <ul\n class=\"ea-transfer-list__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"resolvedSourceLabel() || messages().transferList.sourceLabel\"\n [attr.aria-disabled]=\"disabled() || null\">\n @for (item of sourceItems(); track item.id) {\n <li\n class=\"ea-transfer-list__item\"\n role=\"option\"\n [attr.aria-selected]=\"isHighlighted('source', item.id)\"\n [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n [class.ea-transfer-list__item--highlighted]=\"isHighlighted('source', item.id)\"\n [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n [attr.tabindex]=\"itemTabindex('source', $index, item)\"\n (click)=\"onItemClick('source', item, $event)\"\n (keydown)=\"onItemKeydown($event, 'source', item)\">\n {{ item.label }}\n </li>\n } @empty {\n <li\n class=\"ea-transfer-list__empty\"\n aria-hidden=\"true\">\n {{ messages().transferList.empty }}\n </li>\n }\n </ul>\n </div>\n\n <div\n class=\"ea-transfer-list__buttons\"\n role=\"group\"\n [attr.aria-label]=\"messages().transferList.controlsLabel\">\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveAllToTarget\"\n [disabled]=\"!canMoveAllRight()\"\n (click)=\"moveAllRight()\">\n <ea-icon-chevrons-right class=\"ea-rtl-flip\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveSelectedToTarget\"\n [disabled]=\"!canMoveRight()\"\n (click)=\"moveSelectedRight()\">\n <ea-icon-chevron-right class=\"ea-rtl-flip\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveSelectedToSource\"\n [disabled]=\"!canMoveLeft()\"\n (click)=\"moveSelectedLeft()\">\n <ea-icon-chevron-left class=\"ea-rtl-flip\" />\n </button>\n <button\n type=\"button\"\n class=\"ea-transfer-list__button\"\n [attr.aria-label]=\"messages().transferList.moveAllToSource\"\n [disabled]=\"!canMoveAllLeft()\"\n (click)=\"moveAllLeft()\">\n <ea-icon-chevrons-left class=\"ea-rtl-flip\" />\n </button>\n </div>\n\n <div class=\"ea-transfer-list__pane\">\n @if (resolvedTargetLabel()) {\n <h3 class=\"ea-transfer-list__pane-label\">{{ resolvedTargetLabel() }}</h3>\n }\n <ul\n class=\"ea-transfer-list__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"resolvedTargetLabel() || messages().transferList.targetLabel\"\n [attr.aria-disabled]=\"disabled() || null\">\n @for (item of targetItems(); track item.id) {\n <li\n class=\"ea-transfer-list__item\"\n role=\"option\"\n [attr.aria-selected]=\"isHighlighted('target', item.id)\"\n [attr.aria-disabled]=\"item.disabled || disabled() || null\"\n [class.ea-transfer-list__item--highlighted]=\"isHighlighted('target', item.id)\"\n [class.ea-transfer-list__item--disabled]=\"item.disabled || disabled()\"\n [attr.tabindex]=\"itemTabindex('target', $index, item)\"\n (click)=\"onItemClick('target', item, $event)\"\n (keydown)=\"onItemKeydown($event, 'target', item)\">\n {{ item.label }}\n </li>\n } @empty {\n <li\n class=\"ea-transfer-list__empty\"\n aria-hidden=\"true\">\n {{ messages().transferList.empty }}\n </li>\n }\n </ul>\n </div>\n\n <p\n class=\"ea-transfer-list__announcement\"\n role=\"status\">\n {{ announcement() }}\n </p>\n</div>\n", styles: [":host{display:block}.ea-transfer-list{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-3);color:var(--color-text-primary)}.ea-transfer-list__pane{display:flex;flex-direction:column;min-width:6em;gap:var(--space-2)}.ea-transfer-list__pane-label{margin:0;font-size:.875em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-transfer-list__list{display:flex;flex:1;flex-direction:column;gap:2px;min-height:10em;padding:var(--space-1);margin:0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);list-style:none}.ea-transfer-list__list:focus-visible{outline:none}.ea-transfer-list__item{padding:.5em .75em;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-colors);-webkit-user-select:none;user-select:none}.ea-transfer-list__item:hover:not(.ea-transfer-list__item--disabled){background-color:var(--color-state-hover)}.ea-transfer-list__item:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-transfer-list__item:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-transfer-list__item--highlighted{background-color:var(--color-brand-subtle, var(--color-state-hover));color:var(--color-text-primary)}@media(forced-colors:active){.ea-transfer-list__item--highlighted{background-color:Highlight;color:HighlightText}}.ea-transfer-list__item--disabled{opacity:.5;cursor:not-allowed}.ea-transfer-list__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-transfer-list__buttons{display:flex;flex-direction:column;align-self:center;gap:var(--space-2)}.ea-transfer-list__button{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-transfer-list__button>*{font-size:1.25em}.ea-transfer-list__button:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-transfer-list__button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-transfer-list__button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-transfer-list__button:disabled{cursor:not-allowed;opacity:.5}.ea-transfer-list__button{--ea-icon-button-size: 2em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary)}.ea-transfer-list__button:hover:not(:disabled){border-color:var(--color-border-strong)}.ea-transfer-list--xs{font-size:var(--font-size-xs)}.ea-transfer-list--sm{font-size:var(--font-size-sm)}.ea-transfer-list--md{font-size:var(--font-size-md)}.ea-transfer-list--lg{font-size:var(--font-size-lg)}.ea-transfer-list--xl{font-size:var(--font-size-xl)}.ea-transfer-list--disabled{pointer-events:none;opacity:.6}.ea-transfer-list__announcement{position:absolute;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;padding:0;margin:-1px;white-space:nowrap;border:0}\n"] }]
|
|
16921
16925
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIds", required: false }] }, { type: i0.Output, args: ["selectedIdsChange"] }], sourceLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceLabel", required: false }] }], targetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
16922
16926
|
|
|
16923
16927
|
/**
|