@eagami/ui 5.16.0 → 5.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/fesm2022/eagami-ui.mjs
CHANGED
|
@@ -6765,11 +6765,11 @@ class DividerComponent {
|
|
|
6765
6765
|
}), /* @ts-ignore */
|
|
6766
6766
|
...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
6767
6767
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6768
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
6768
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: DividerComponent, isStandalone: true, selector: "ea-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, thick: { classPropertyName: "thick", publicName: "thick", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"ea-divider\"\n [ngClass]=\"hostClasses()\"\n [attr.role]=\"'separator'\"\n [attr.aria-orientation]=\"orientation()\">\n <span class=\"ea-divider__label\">{{ label() }}</span>\n</div>\n", styles: [".ea-divider{--ea-divider-thickness: 1px;flex-shrink:0;border:0;font-family:var(--font-family-sans)}.ea-divider--thick{--ea-divider-thickness: 2px}.ea-divider--horizontal{display:flex;align-items:center;width:100%;height:var(--ea-divider-thickness);background-color:var(--color-divider)}.ea-divider--vertical{display:inline-block;width:var(--ea-divider-thickness);height:var(--ea-divider-length, 1.5em);min-height:var(--ea-divider-length, 1rem);background-color:var(--color-divider)}.ea-divider--vertical.ea-divider--with-label{display:inline-flex;flex-direction:column;align-items:center;width:auto;height:auto;background-color:transparent;gap:var(--space-3)}.ea-divider--vertical.ea-divider--with-label:before,.ea-divider--vertical.ea-divider--with-label:after{content:\"\";flex:1;width:var(--ea-divider-thickness);height:auto;min-height:2em;background-color:var(--color-divider)}.ea-divider--with-label{height:auto;background-color:transparent;gap:var(--space-3)}.ea-divider--with-label:before,.ea-divider--with-label:after{content:\"\";flex:1;height:var(--ea-divider-thickness);background-color:var(--color-divider)}.ea-divider:not(.ea-divider--with-label) .ea-divider__label{display:none}.ea-divider__label{flex-shrink:0;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary);white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6769
6769
|
}
|
|
6770
6770
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DividerComponent, decorators: [{
|
|
6771
6771
|
type: Component,
|
|
6772
|
-
args: [{ selector: 'ea-divider', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ea-divider\"\n [ngClass]=\"hostClasses()\"\n [attr.role]=\"'separator'\"\n [attr.aria-orientation]=\"orientation()\">\n
|
|
6772
|
+
args: [{ selector: 'ea-divider', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ea-divider\"\n [ngClass]=\"hostClasses()\"\n [attr.role]=\"'separator'\"\n [attr.aria-orientation]=\"orientation()\">\n <span class=\"ea-divider__label\">{{ label() }}</span>\n</div>\n", styles: [".ea-divider{--ea-divider-thickness: 1px;flex-shrink:0;border:0;font-family:var(--font-family-sans)}.ea-divider--thick{--ea-divider-thickness: 2px}.ea-divider--horizontal{display:flex;align-items:center;width:100%;height:var(--ea-divider-thickness);background-color:var(--color-divider)}.ea-divider--vertical{display:inline-block;width:var(--ea-divider-thickness);height:var(--ea-divider-length, 1.5em);min-height:var(--ea-divider-length, 1rem);background-color:var(--color-divider)}.ea-divider--vertical.ea-divider--with-label{display:inline-flex;flex-direction:column;align-items:center;width:auto;height:auto;background-color:transparent;gap:var(--space-3)}.ea-divider--vertical.ea-divider--with-label:before,.ea-divider--vertical.ea-divider--with-label:after{content:\"\";flex:1;width:var(--ea-divider-thickness);height:auto;min-height:2em;background-color:var(--color-divider)}.ea-divider--with-label{height:auto;background-color:transparent;gap:var(--space-3)}.ea-divider--with-label:before,.ea-divider--with-label:after{content:\"\";flex:1;height:var(--ea-divider-thickness);background-color:var(--color-divider)}.ea-divider:not(.ea-divider--with-label) .ea-divider__label{display:none}.ea-divider__label{flex-shrink:0;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary);white-space:nowrap}\n"] }]
|
|
6773
6773
|
}], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], thick: [{ type: i0.Input, args: [{ isSignal: true, alias: "thick", required: false }] }] } });
|
|
6774
6774
|
|
|
6775
6775
|
/**
|
|
@@ -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
|
/**
|
|
@@ -16350,6 +16350,7 @@ class ToastService {
|
|
|
16350
16350
|
message,
|
|
16351
16351
|
variant: options.variant ?? 'default',
|
|
16352
16352
|
duration: options.duration ?? 4000,
|
|
16353
|
+
icon: options.icon,
|
|
16353
16354
|
};
|
|
16354
16355
|
this.toasts.update(list => [...list, toast]);
|
|
16355
16356
|
if (toast.duration > 0) {
|
|
@@ -16454,7 +16455,7 @@ class ToastComponent {
|
|
|
16454
16455
|
position = input('bottom-right', /* @ts-ignore */
|
|
16455
16456
|
...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
|
|
16456
16457
|
/** Visual size applied to every toast in the stack. */
|
|
16457
|
-
size = input('
|
|
16458
|
+
size = input('sm', /* @ts-ignore */
|
|
16458
16459
|
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
16459
16460
|
/** Show a dismiss button on each toast. */
|
|
16460
16461
|
clearable = input(true, /* @ts-ignore */
|
|
@@ -16491,17 +16492,18 @@ class ToastComponent {
|
|
|
16491
16492
|
}
|
|
16492
16493
|
}
|
|
16493
16494
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16494
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ToastComponent, isStandalone: true, selector: "ea-toast", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["containerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #containerEl\n [class]=\"containerClass()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut($event)\">\n @for (toast of toastService.toasts(); track toast.id) {\n <div\n class=\"ea-toast ea-toast--{{ toast.variant }} ea-toast--{{ size() }}\"\n [attr.role]=\"toastRole(toast.variant)\">\n @switch (toast.variant) {\n
|
|
16495
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ToastComponent, isStandalone: true, selector: "ea-toast", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["containerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #containerEl\n [class]=\"containerClass()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut($event)\">\n @for (toast of toastService.toasts(); track toast.id) {\n <div\n class=\"ea-toast ea-toast--{{ toast.variant }} ea-toast--{{ size() }}\"\n [attr.role]=\"toastRole(toast.variant)\">\n @if (toast.icon !== undefined) {\n @if (toast.icon) {\n <span class=\"ea-toast__icon\">\n <ng-container *ngComponentOutlet=\"toast.icon\" />\n </span>\n }\n } @else {\n @switch (toast.variant) {\n @case ('success') {\n <ea-icon-check-circle class=\"ea-toast__icon\" />\n }\n @case ('info') {\n <ea-icon-info class=\"ea-toast__icon\" />\n }\n @case ('warning') {\n <ea-icon-alert-triangle class=\"ea-toast__icon\" />\n }\n @case ('error') {\n <ea-icon-alert-circle class=\"ea-toast__icon\" />\n }\n }\n }\n <span class=\"ea-toast__message\">{{ toast.message }}</span>\n @if (clearable()) {\n <button\n class=\"ea-toast__close\"\n type=\"button\"\n [attr.aria-label]=\"i18n.messages().toast.dismiss\"\n (click)=\"toastService.dismiss(toast.id)\">\n <ea-icon-x />\n </button>\n }\n </div>\n }\n</div>\n", styles: [".ea-toast-container{position:fixed;z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);max-width:calc(100vw - var(--space-6) * 2);pointer-events:none}.ea-toast-container--top-left,.ea-toast-container--top,.ea-toast-container--top-right{top:var(--space-6)}.ea-toast-container--bottom-left,.ea-toast-container--bottom,.ea-toast-container--bottom-right{bottom:var(--space-6)}.ea-toast-container--top-left,.ea-toast-container--bottom-left{left:var(--space-6)}.ea-toast-container--top-left .ea-toast,.ea-toast-container--bottom-left .ea-toast{margin-right:auto}.ea-toast-container--top-right,.ea-toast-container--bottom-right{right:var(--space-6)}.ea-toast-container--top-right .ea-toast,.ea-toast-container--bottom-right .ea-toast{margin-left:auto}.ea-toast-container--top,.ea-toast-container--bottom{left:50%;transform:translate(-50%)}.ea-toast-container--top .ea-toast,.ea-toast-container--bottom .ea-toast{margin-right:auto;margin-left:auto}.ea-toast-container--top-left .ea-toast,.ea-toast-container--bottom-left .ea-toast{--ea-toast-enter-x: -100%}.ea-toast-container--top .ea-toast{--ea-toast-enter-x: 0;--ea-toast-enter-y: -100%}.ea-toast-container--bottom .ea-toast{--ea-toast-enter-x: 0;--ea-toast-enter-y: 100%}.ea-toast{--ea-toast-enter-x: 100%;--ea-toast-enter-y: 0;display:flex;align-items:center;gap:.5em;width:100%;max-width:24em;padding:.75em 1em;font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:auto;animation:ea-toast-slide-in var(--duration-slow) var(--ease-out)}@media(forced-colors:active){.ea-toast{border:1px solid CanvasText}}@media(min-width:640px){.ea-toast{width:auto}}.ea-toast--xs{font-size:var(--font-size-xs)}.ea-toast--sm{font-size:var(--font-size-sm)}.ea-toast--md{font-size:var(--font-size-md)}.ea-toast--lg{font-size:var(--font-size-lg)}.ea-toast--xl{font-size:var(--font-size-xl)}.ea-toast--default{background-color:var(--color-neutral-800);color:var(--color-neutral-0)}.ea-toast--success{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));color:var(--color-success-text)}.ea-toast--warning{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-warning-subtle),var(--color-warning-subtle));color:var(--color-warning-text)}.ea-toast--error{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-error-subtle),var(--color-error-subtle));color:var(--color-error-text)}.ea-toast--info{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-info-subtle),var(--color-info-subtle));color:var(--color-info-text)}.ea-toast__icon{display:inline-flex;flex-shrink:0;font-size:1em}.ea-toast__message{flex:1;min-width:0}.ea-toast__close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-toast__close>*{font-size:1.25em}.ea-toast__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-toast__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-toast__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-toast__close:disabled{cursor:not-allowed;opacity:.5}@keyframes ea-toast-slide-in{0%{opacity:0;transform:translate(var(--ea-toast-enter-x),var(--ea-toast-enter-y))}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.ea-toast{animation-name:ea-toast-fade-in}}@keyframes ea-toast-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ea-toast--success{color:var(--color-success-200)}:root:not([data-theme=light]) .ea-toast--warning{color:var(--color-warning-200)}:root:not([data-theme=light]) .ea-toast--error{color:var(--color-error-200)}:root:not([data-theme=light]) .ea-toast--info{color:var(--color-info-200)}}:root[data-theme=dark] .ea-toast--success{color:var(--color-success-200)}:root[data-theme=dark] .ea-toast--warning{color:var(--color-warning-200)}:root[data-theme=dark] .ea-toast--error{color:var(--color-error-200)}:root[data-theme=dark] .ea-toast--info{color:var(--color-info-200)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }, { kind: "component", type: CheckCircleIconComponent, selector: "ea-icon-check-circle" }, { kind: "component", type: InfoIconComponent, selector: "ea-icon-info" }, { kind: "component", type: AlertTriangleIconComponent, selector: "ea-icon-alert-triangle" }, { kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
16495
16496
|
}
|
|
16496
16497
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ToastComponent, decorators: [{
|
|
16497
16498
|
type: Component,
|
|
16498
16499
|
args: [{ selector: 'ea-toast', imports: [
|
|
16500
|
+
NgComponentOutlet,
|
|
16499
16501
|
XIconComponent,
|
|
16500
16502
|
CheckCircleIconComponent,
|
|
16501
16503
|
InfoIconComponent,
|
|
16502
16504
|
AlertTriangleIconComponent,
|
|
16503
16505
|
AlertCircleIconComponent,
|
|
16504
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n #containerEl\n [class]=\"containerClass()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut($event)\">\n @for (toast of toastService.toasts(); track toast.id) {\n <div\n class=\"ea-toast ea-toast--{{ toast.variant }} ea-toast--{{ size() }}\"\n [attr.role]=\"toastRole(toast.variant)\">\n @switch (toast.variant) {\n
|
|
16506
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n #containerEl\n [class]=\"containerClass()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut($event)\">\n @for (toast of toastService.toasts(); track toast.id) {\n <div\n class=\"ea-toast ea-toast--{{ toast.variant }} ea-toast--{{ size() }}\"\n [attr.role]=\"toastRole(toast.variant)\">\n @if (toast.icon !== undefined) {\n @if (toast.icon) {\n <span class=\"ea-toast__icon\">\n <ng-container *ngComponentOutlet=\"toast.icon\" />\n </span>\n }\n } @else {\n @switch (toast.variant) {\n @case ('success') {\n <ea-icon-check-circle class=\"ea-toast__icon\" />\n }\n @case ('info') {\n <ea-icon-info class=\"ea-toast__icon\" />\n }\n @case ('warning') {\n <ea-icon-alert-triangle class=\"ea-toast__icon\" />\n }\n @case ('error') {\n <ea-icon-alert-circle class=\"ea-toast__icon\" />\n }\n }\n }\n <span class=\"ea-toast__message\">{{ toast.message }}</span>\n @if (clearable()) {\n <button\n class=\"ea-toast__close\"\n type=\"button\"\n [attr.aria-label]=\"i18n.messages().toast.dismiss\"\n (click)=\"toastService.dismiss(toast.id)\">\n <ea-icon-x />\n </button>\n }\n </div>\n }\n</div>\n", styles: [".ea-toast-container{position:fixed;z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);max-width:calc(100vw - var(--space-6) * 2);pointer-events:none}.ea-toast-container--top-left,.ea-toast-container--top,.ea-toast-container--top-right{top:var(--space-6)}.ea-toast-container--bottom-left,.ea-toast-container--bottom,.ea-toast-container--bottom-right{bottom:var(--space-6)}.ea-toast-container--top-left,.ea-toast-container--bottom-left{left:var(--space-6)}.ea-toast-container--top-left .ea-toast,.ea-toast-container--bottom-left .ea-toast{margin-right:auto}.ea-toast-container--top-right,.ea-toast-container--bottom-right{right:var(--space-6)}.ea-toast-container--top-right .ea-toast,.ea-toast-container--bottom-right .ea-toast{margin-left:auto}.ea-toast-container--top,.ea-toast-container--bottom{left:50%;transform:translate(-50%)}.ea-toast-container--top .ea-toast,.ea-toast-container--bottom .ea-toast{margin-right:auto;margin-left:auto}.ea-toast-container--top-left .ea-toast,.ea-toast-container--bottom-left .ea-toast{--ea-toast-enter-x: -100%}.ea-toast-container--top .ea-toast{--ea-toast-enter-x: 0;--ea-toast-enter-y: -100%}.ea-toast-container--bottom .ea-toast{--ea-toast-enter-x: 0;--ea-toast-enter-y: 100%}.ea-toast{--ea-toast-enter-x: 100%;--ea-toast-enter-y: 0;display:flex;align-items:center;gap:.5em;width:100%;max-width:24em;padding:.75em 1em;font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:auto;animation:ea-toast-slide-in var(--duration-slow) var(--ease-out)}@media(forced-colors:active){.ea-toast{border:1px solid CanvasText}}@media(min-width:640px){.ea-toast{width:auto}}.ea-toast--xs{font-size:var(--font-size-xs)}.ea-toast--sm{font-size:var(--font-size-sm)}.ea-toast--md{font-size:var(--font-size-md)}.ea-toast--lg{font-size:var(--font-size-lg)}.ea-toast--xl{font-size:var(--font-size-xl)}.ea-toast--default{background-color:var(--color-neutral-800);color:var(--color-neutral-0)}.ea-toast--success{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));color:var(--color-success-text)}.ea-toast--warning{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-warning-subtle),var(--color-warning-subtle));color:var(--color-warning-text)}.ea-toast--error{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-error-subtle),var(--color-error-subtle));color:var(--color-error-text)}.ea-toast--info{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-info-subtle),var(--color-info-subtle));color:var(--color-info-text)}.ea-toast__icon{display:inline-flex;flex-shrink:0;font-size:1em}.ea-toast__message{flex:1;min-width:0}.ea-toast__close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-toast__close>*{font-size:1.25em}.ea-toast__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-toast__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-toast__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-toast__close:disabled{cursor:not-allowed;opacity:.5}@keyframes ea-toast-slide-in{0%{opacity:0;transform:translate(var(--ea-toast-enter-x),var(--ea-toast-enter-y))}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.ea-toast{animation-name:ea-toast-fade-in}}@keyframes ea-toast-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ea-toast--success{color:var(--color-success-200)}:root:not([data-theme=light]) .ea-toast--warning{color:var(--color-warning-200)}:root:not([data-theme=light]) .ea-toast--error{color:var(--color-error-200)}:root:not([data-theme=light]) .ea-toast--info{color:var(--color-info-200)}}:root[data-theme=dark] .ea-toast--success{color:var(--color-success-200)}:root[data-theme=dark] .ea-toast--warning{color:var(--color-warning-200)}:root[data-theme=dark] .ea-toast--error{color:var(--color-error-200)}:root[data-theme=dark] .ea-toast--info{color:var(--color-info-200)}\n"] }]
|
|
16505
16507
|
}], propDecorators: { containerEl: [{ type: i0.ViewChild, args: ['containerEl', { isSignal: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }] } });
|
|
16506
16508
|
|
|
16507
16509
|
class ChevronsLeftIconComponent extends IconComponentBase {
|
|
@@ -16912,7 +16914,7 @@ class TransferListComponent {
|
|
|
16912
16914
|
}
|
|
16913
16915
|
}
|
|
16914
16916
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TransferListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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:
|
|
16917
|
+
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 });
|
|
16916
16918
|
}
|
|
16917
16919
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TransferListComponent, decorators: [{
|
|
16918
16920
|
type: Component,
|
|
@@ -16921,7 +16923,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
16921
16923
|
ChevronRightIconComponent,
|
|
16922
16924
|
ChevronsLeftIconComponent,
|
|
16923
16925
|
ChevronsRightIconComponent,
|
|
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:
|
|
16926
|
+
], 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"] }]
|
|
16925
16927
|
}], 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 }] }] } });
|
|
16926
16928
|
|
|
16927
16929
|
/**
|