@eui/eds 23.0.0-alpha.11 → 23.0.0-alpha.13
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/docs/changelog.html +79 -0
- package/docs/index.html +1 -1
- package/docs/js/search/search_index.js +2 -2
- package/docs/llms.txt +1 -1
- package/docs/properties.html +1 -1
- package/fesm2022/eui-eds-charts-eds-chart-legend.mjs +6 -6
- package/fesm2022/eui-eds-charts-eds-chart.mjs +3 -3
- package/fesm2022/eui-eds-charts-eds-gauge-chart.mjs +3 -3
- package/fesm2022/eui-eds-charts-eds-geo-chart.mjs +3 -3
- package/fesm2022/eui-eds-charts-eds-sparkline.mjs +3 -3
- package/fesm2022/eui-eds-eds-accordion.mjs +9 -9
- package/fesm2022/eui-eds-eds-alert.mjs +6 -6
- package/fesm2022/eui-eds-eds-autocomplete.mjs +21 -17
- package/fesm2022/eui-eds-eds-autocomplete.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-avatar.mjs +27 -27
- package/fesm2022/eui-eds-eds-badge.mjs +5 -4
- package/fesm2022/eui-eds-eds-badge.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-banner.mjs +21 -21
- package/fesm2022/eui-eds-eds-block-content.mjs +3 -3
- package/fesm2022/eui-eds-eds-block-document.mjs +3 -3
- package/fesm2022/eui-eds-eds-blockquote.mjs +3 -3
- package/fesm2022/eui-eds-eds-breadcrumb.mjs +6 -6
- package/fesm2022/eui-eds-eds-button-group.mjs +3 -3
- package/fesm2022/eui-eds-eds-button.mjs +3 -3
- package/fesm2022/eui-eds-eds-calendar.mjs +33 -33
- package/fesm2022/eui-eds-eds-card.mjs +30 -30
- package/fesm2022/eui-eds-eds-carousel.mjs +6 -6
- package/fesm2022/eui-eds-eds-chip-list.mjs +9 -9
- package/fesm2022/eui-eds-eds-chip.mjs +5 -4
- package/fesm2022/eui-eds-eds-chip.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-dashboard-card.mjs +72 -72
- package/fesm2022/eui-eds-eds-date-block.mjs +3 -3
- package/fesm2022/eui-eds-eds-datepicker.mjs +3 -3
- package/fesm2022/eui-eds-eds-dialog.mjs +15 -15
- package/fesm2022/eui-eds-eds-dimmer.mjs +3 -3
- package/fesm2022/eui-eds-eds-disable-content.mjs +3 -3
- package/fesm2022/eui-eds-eds-discussion-thread.mjs +6 -6
- package/fesm2022/eui-eds-eds-dropdown.mjs +9 -9
- package/fesm2022/eui-eds-eds-fab-button.mjs +6 -6
- package/fesm2022/eui-eds-eds-feedback-message.mjs +3 -3
- package/fesm2022/eui-eds-eds-fieldset.mjs +15 -15
- package/fesm2022/eui-eds-eds-file-upload.mjs +12 -12
- package/fesm2022/eui-eds-eds-growl.mjs +6 -6
- package/fesm2022/eui-eds-eds-icon-button.mjs +3 -3
- package/fesm2022/eui-eds-eds-icon-state.mjs +3 -3
- package/fesm2022/eui-eds-eds-icon-toggle.mjs +3 -3
- package/fesm2022/eui-eds-eds-icon.mjs +6 -6
- package/fesm2022/eui-eds-eds-input-button.mjs +3 -3
- package/fesm2022/eui-eds-eds-input-checkbox.mjs +3 -3
- package/fesm2022/eui-eds-eds-input-group.mjs +9 -9
- package/fesm2022/eui-eds-eds-input-icon.mjs +3 -3
- package/fesm2022/eui-eds-eds-input-number.mjs +3 -3
- package/fesm2022/eui-eds-eds-input-radio.mjs +3 -3
- package/fesm2022/eui-eds-eds-input-text.mjs +3 -3
- package/fesm2022/eui-eds-eds-label.mjs +3 -3
- package/fesm2022/eui-eds-eds-language-selector.mjs +6 -6
- package/fesm2022/eui-eds-eds-link.mjs +4 -4
- package/fesm2022/eui-eds-eds-link.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-list-items.mjs +6 -6
- package/fesm2022/eui-eds-eds-menu.mjs +6 -6
- package/fesm2022/eui-eds-eds-message-box.mjs +9 -9
- package/fesm2022/eui-eds-eds-multiselect.mjs +6 -6
- package/fesm2022/eui-eds-eds-navbar.mjs +6 -6
- package/fesm2022/eui-eds-eds-overlay.mjs +21 -21
- package/fesm2022/eui-eds-eds-page.mjs +51 -51
- package/fesm2022/eui-eds-eds-paginator.mjs +3 -3
- package/fesm2022/eui-eds-eds-popover.mjs +8 -7
- package/fesm2022/eui-eds-eds-popover.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-progress-bar.mjs +3 -3
- package/fesm2022/eui-eds-eds-progress-circle.mjs +3 -3
- package/fesm2022/eui-eds-eds-rating.mjs +3 -3
- package/fesm2022/eui-eds-eds-select.mjs +15 -15
- package/fesm2022/eui-eds-eds-shell.mjs +69 -69
- package/fesm2022/eui-eds-eds-skeleton.mjs +3 -3
- package/fesm2022/eui-eds-eds-slider.mjs +3 -3
- package/fesm2022/eui-eds-eds-snc.mjs +3 -3
- package/fesm2022/eui-eds-eds-split-button.mjs +3 -3
- package/fesm2022/eui-eds-eds-table.mjs +33 -33
- package/fesm2022/eui-eds-eds-tabs.mjs +39 -33
- package/fesm2022/eui-eds-eds-tabs.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-tag-group.mjs +3 -3
- package/fesm2022/eui-eds-eds-tag.mjs +3 -3
- package/fesm2022/eui-eds-eds-textarea.mjs +6 -6
- package/fesm2022/eui-eds-eds-timeline.mjs +6 -6
- package/fesm2022/eui-eds-eds-timepicker.mjs +3 -3
- package/fesm2022/eui-eds-eds-toggle-group.mjs +6 -6
- package/fesm2022/eui-eds-eds-toggle.mjs +3 -3
- package/fesm2022/eui-eds-eds-tooltip.mjs +6 -6
- package/fesm2022/eui-eds-eds-tree-list.mjs +21 -21
- package/fesm2022/eui-eds-eds-tree.mjs +9 -9
- package/fesm2022/eui-eds-eds-user-profile.mjs +9 -9
- package/fesm2022/eui-eds-eds-wizard.mjs +6 -6
- package/fesm2022/eui-eds-shared.mjs +27 -27
- package/package.json +1 -1
|
@@ -55,7 +55,8 @@ class EdsBadge {
|
|
|
55
55
|
*/
|
|
56
56
|
this.edsDottedBadge = input(false, { ...(ngDevMode ? { debugName: "edsDottedBadge" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
57
57
|
this.edsOutline = input(false, { ...(ngDevMode ? { debugName: "edsOutline" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
58
|
-
this.content = viewChild.required('contentRef'
|
|
58
|
+
this.content = viewChild.required('contentRef', /* @ts-ignore */
|
|
59
|
+
...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
|
|
59
60
|
this.sizeDirective = inject(EdsSizeDirective);
|
|
60
61
|
this.colorDirective = inject(EdsColorDirective);
|
|
61
62
|
this.hasContentUpdated = false;
|
|
@@ -96,10 +97,10 @@ class EdsBadge {
|
|
|
96
97
|
}
|
|
97
98
|
}
|
|
98
99
|
}
|
|
99
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
100
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
100
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBadge, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
101
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsBadge, isStandalone: true, selector: "div[edsBadge], span[edsBadge], eds-badge", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, maxCharCount: { classPropertyName: "maxCharCount", publicName: "maxCharCount", isSignal: true, isRequired: false, transformFunction: null }, charReplacement: { classPropertyName: "charReplacement", publicName: "charReplacement", isSignal: true, isRequired: false, transformFunction: null }, edsBadgeIcon: { classPropertyName: "edsBadgeIcon", publicName: "edsBadgeIcon", isSignal: true, isRequired: false, transformFunction: null }, edsDottedBadge: { classPropertyName: "edsDottedBadge", publicName: "edsDottedBadge", isSignal: true, isRequired: false, transformFunction: null }, edsOutline: { classPropertyName: "edsOutline", publicName: "edsOutline", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()", "attr.aria-label": "ariaLabel()" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentRef"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.EdsSizeDirective, inputs: ["edsSizeXS", "edsSizeXS", "edsSizeS", "edsSizeS", "edsSizeM", "edsSizeM", "edsSizeL", "edsSizeL", "edsSizeVariant", "edsSizeVariant"] }, { directive: i1.EdsColorDirective, inputs: ["edsNeutral", "edsNeutral", "edsInfo", "edsInfo", "edsSuccess", "edsSuccess", "edsWarning", "edsWarning", "edsCritical", "edsCritical", "edsColorVariant", "edsColorVariant"] }], ngImport: i0, template: "@if (hasContentUpdated) {\n <span class=\"eds-badge-wrapper\">\n {{ updatedContent }}\n </span>\n} @else {\n <span class=\"eds-badge-wrapper\" #contentRef (cdkObserveContent)=\"onContentChanged()\">\n <ng-content></ng-content>\n </span>\n}\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host.eds-badge{--_border-width: var(--eds-bw-none)}.eui-21 :host.eds-badge.eds-badge--neutral{--_surface: var(--eds-c-surface-neutral);--_on-surface: var(--eds-c-on-surface-neutral)}.eui-21 :host.eds-badge.eds-badge--info{--_surface: var(--eds-c-surface-info);--_on-surface: var(--eds-c-on-surface-info)}.eui-21 :host.eds-badge.eds-badge--success{--_surface: var(--eds-c-surface-success);--_on-surface: var(--eds-c-on-surface-success)}.eui-21 :host.eds-badge.eds-badge--warning{--_surface: var(--eds-c-surface-warning);--_on-surface: var(--eds-c-on-surface-warning)}.eui-21 :host.eds-badge.eds-badge--critical{--_surface: var(--eds-c-surface-critical);--_on-surface: var(--eds-c-on-surface-critical)}.eui-21 :host.eds-badge.eds-badge--outline.eds-badge--neutral{--_surface: var(--eds-c-surface-neutral-subtle);--_on-surface: var(--eds-c-on-surface-neutral-subtle)}.eui-21 :host.eds-badge.eds-badge--outline.eds-badge--info{--_surface: var(--eds-c-surface-info-subtle);--_on-surface: var(--eds-c-on-surface-info-subtle)}.eui-21 :host.eds-badge.eds-badge--outline.eds-badge--success{--_surface: var(--eds-c-surface-success-subtle);--_on-surface: var(--eds-c-on-surface-success-subtle)}.eui-21 :host.eds-badge.eds-badge--outline.eds-badge--warning{--_surface: var(--eds-c-surface-warning-subtle);--_on-surface: var(--eds-c-on-surface-warning-subtle)}.eui-21 :host.eds-badge.eds-badge--outline.eds-badge--critical{--_surface: var(--eds-c-surface-critical-subtle);--_on-surface: var(--eds-c-on-surface-critical-subtle)}.eui-21 :host.eds-badge.eds-badge--size-xs.eds-badge--empty{--_min-height: var(--eds-si-xs);--_min-width: var(--eds-si-xs);--_padding: none}.eui-21 :host.eds-badge.eds-badge--size-xs:not(.eds-badge--empty):not(.eds-badge--icon-only){--_min-height: var(--eds-si-s);--_min-width: var(--eds-si-s);--_font: var(--eds-f-microcopy-2xs);--_padding: var(--eds-sp-5xs) var(--eds-sp-4xs)}.eui-21 :host.eds-badge.eds-badge--size-s.eds-badge--empty{--_min-height: var(--eds-si-s);--_min-width: var(--eds-si-s);--_padding: none}.eui-21 :host.eds-badge.eds-badge--size-s:not(.eds-badge--empty):not(.eds-badge--icon-only){--_font: var(--eds-f-microcopy-xs);--_padding: var(--eds-sp-none) var(--eds-sp-3xs) var(--eds-sp-none) var(--eds-sp-3xs)}.eui-21 :host.eds-badge.eds-badge--size-m.eds-badge--empty{--_min-height: var(--eds-si-m);--_min-width: var(--eds-si-m);--_padding: none}.eui-21 :host.eds-badge.eds-badge--size-m:not(.eds-badge--empty):not(.eds-badge--icon-only){--_min-height: var(--eds-si-l);--_min-width: var(--eds-si-l);--_font: var(--eds-f-microcopy-xs);--_padding: var(--eds-sp-4xs) var(--eds-sp-3xs) var(--eds-sp-4xs) var(--eds-sp-3xs)}.eui-21 :host.eds-badge.eds-badge--size-l.eds-badge--empty{--_min-height: var(--eds-si-l);--_min-width: var(--eds-si-l);--_padding: none}.eui-21 :host.eds-badge.eds-badge--size-l:not(.eds-badge--empty):not(.eds-badge--icon-only){--_min-height: var(--eds-si-xl);--_min-width: var(--eds-si-xl);--_font: var(--eds-f-paragraph-s-semi-bold);--_padding: var(--eds-sp-4xs) var(--eds-sp-2xs) var(--eds-sp-4xs) var(--eds-sp-2xs)}.eui-21 :host.eds-badge.eds-badge--empty{--_border-width: var(--eds-bw-xs)}.eui-21 :host.eds-badge.eds-badge--icon-only{--_padding: none}.eui-21 :host.eds-badge.eds-badge--icon-only.eds-badge--size-2xs{--_icon-size: var(--eds-is-2xs)}.eui-21 :host.eds-badge.eds-badge--icon-only.eds-badge--size-xs{--_icon-size: var(--eds-is-2xs)}.eui-21 :host.eds-badge.eds-badge--icon-only.eds-badge--size-s{--_icon-size: var(--eds-is-xs)}.eui-21 :host.eds-badge.eds-badge--icon-only.eds-badge--size-m{--_icon-size: var(--eds-is-s)}.eui-21 :host.eds-badge.eds-badge--icon-only.eds-badge--size-l{--_icon-size: var(--eds-is-m)}.eui-21 :host.eds-badge{display:inline-flex;border-radius:var(--eds-br-full)}.eui-21 :host.eds-badge .eds-badge-wrapper{display:inline-flex;border-radius:var(--eds-br-full);border:var(--_border-width) solid var(--eds-c-border-inverted);align-items:center;min-height:var(--_min-height);min-width:var(--_min-width);padding:var(--_padding);justify-content:center;font:var(--_font);background-color:var(--_surface);color:var(--_on-surface);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-21 .eds-icon :host.eds-badge{position:absolute}.eui-21 .eds-icon :host.eds-badge,.eui-21 .eds-icon :host.eds-badge--size-m{left:60%;top:-20%}.eui-21 .eds-icon :host.eds-badge--empty{left:60%;top:-10%}.eui-21 .eds-icon :host.eds-badge--size-xs.eds-badge--empty{left:70%;top:-10%}.eui-21 .eds-icon-button--size-2xs .eds-icon :host.eds-badge{left:50%;top:-30%}.eui-21 .eds-icon-button--size-xs .eds-icon :host.eds-badge{left:50%;top:-40%}.eui-21 .eds-icon-button--size-s .eds-icon :host.eds-badge{left:50%;top:-50%}.eui-21 .eds-icon-button--size-m .eds-icon :host.eds-badge{left:50%;top:-40%}.eui-21 .eds-icon-button--size-l .eds-icon :host.eds-badge{left:50%;top:-25%}.eui-21 .eds-avatar :host.eds-badge{border:var(--eds-bw-s) solid var(--eds-c-border-inverted)}\n"], dependencies: [{ kind: "ngmodule", type: ObserversModule }, { kind: "directive", type: i2.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
101
102
|
}
|
|
102
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
103
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBadge, decorators: [{
|
|
103
104
|
type: Component,
|
|
104
105
|
args: [{ selector: 'div[edsBadge], span[edsBadge], eds-badge', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ObserversModule], host: {
|
|
105
106
|
'[class]': 'hostClasses()',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eui-eds-eds-badge.mjs","sources":["../../eds-badge/eds-badge.ts","../../eds-badge/eds-badge.html","../../eds-badge/index.ts","../../eds-badge/eui-eds-eds-badge.ts"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n input,\n viewChild,\n ElementRef,\n AfterViewInit,\n ChangeDetectorRef,\n booleanAttribute,\n inject,\n signal,\n computed,\n} from '@angular/core';\nimport { ObserversModule } from '@angular/cdk/observers';\nimport { EdsColorDirective, EdsSizeDirective } from '@eui/eds/shared';\n\n@Component({\n selector: 'div[edsBadge], span[edsBadge], eds-badge',\n templateUrl: './eds-badge.html',\n styleUrl: './eds-badge.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [ObserversModule],\n host: {\n '[class]': 'hostClasses()',\n '[attr.data-e2e]': 'e2eAttr()',\n role: 'status',\n '[attr.aria-label]': 'ariaLabel()',\n },\n hostDirectives: [\n {\n directive: EdsSizeDirective,\n inputs: [\n 'edsSizeXS',\n 'edsSizeS',\n 'edsSizeM',\n 'edsSizeL',\n 'edsSizeVariant',\n ],\n },\n {\n directive: EdsColorDirective,\n inputs: [\n 'edsNeutral',\n 'edsInfo',\n 'edsSuccess',\n 'edsWarning',\n 'edsCritical',\n 'edsColorVariant',\n ],\n },\n ],\n})\nexport class EdsBadge implements AfterViewInit {\n /**\n * @description\n * Computes and returns the CSS classes for the badge based on its current state\n */\n hostClasses = computed(() => {\n const sizeClass = this.sizeDirective.getCssClass('eds-badge');\n const colorClass = this.colorDirective.getCssClass('eds-badge');\n\n return [\n 'eds-badge',\n sizeClass || 'eds-badge--size-m',\n colorClass || 'eds-badge--neutral',\n this.isEmpty() || this.edsDottedBadge() ? 'eds-badge--empty' : '',\n this.edsBadgeIcon() ? 'eds-badge--icon-only' : '',\n this.edsOutline() ? 'eds-badge--outline' : '',\n ].join(' ').trim();\n });\n\n /** @description Data attribute for e2e testing */\n e2eAttr = input('eds-badge');\n\n /** @description ARIA label for accessibility */\n ariaLabel = input<string | null>('badge', { alias: 'aria-label' });\n\n /**\n * Maximum number of characters to display before truncating.\n * When content exceeds this limit, it will be replaced with charReplacement value.\n * Useful for displaying large numbers in a compact format (e.g., \"99+\" for values over 99).\n */\n maxCharCount = input(0);\n\n /**\n * String to display when content is truncated due to maxCharCount.\n * @default '99+'\n */\n charReplacement = input('');\n\n /**\n * Whether the badge contains only an icon (displays as a small dot indicator).\n * When true, no text content is shown, creating a minimal status indicator.\n * @default false\n */\n edsBadgeIcon = input(false, { transform: booleanAttribute });\n\n /**\n * Whether to display the badge with dotted styling variant.\n * Applies alternative visual treatment to the badge.\n * @default false\n */\n edsDottedBadge = input(false, { transform: booleanAttribute });\n\n edsOutline = input(false, { transform: booleanAttribute });\n\n readonly content = viewChild.required<ElementRef>('contentRef');\n\n protected sizeDirective = inject(EdsSizeDirective);\n protected colorDirective = inject(EdsColorDirective);\n\n protected hasContentUpdated = false;\n protected updatedContent!: string;\n private cdRef = inject(ChangeDetectorRef);\n private isEmpty = signal(false);\n\n ngAfterViewInit(): void {\n const content = this.content();\n if (content) {\n this.isEmpty.set(content.nativeElement.childNodes.length === 0);\n this.cdRef.detectChanges();\n if (!this.isEmpty()) {\n this._checkContent();\n this.cdRef.detectChanges();\n }\n }\n }\n\n /**\n * @description\n * Handles content changes and triggers content checking\n */\n onContentChanged(): void {\n this._checkContent();\n }\n\n /**\n * @description\n * Checks if content exceeds maxCharCount and updates content if necessary\n * @private\n */\n private _checkContent(): void {\n if (this.maxCharCount() !== 0) {\n const contentText = this.content().nativeElement.outerText;\n if (contentText && contentText.length > this.maxCharCount()) {\n this.hasContentUpdated = true;\n this.updatedContent = this.charReplacement() || '99+';\n this.cdRef.markForCheck();\n }\n }\n }\n}\n","@if (hasContentUpdated) {\n <span class=\"eds-badge-wrapper\">\n {{ updatedContent }}\n </span>\n} @else {\n <span class=\"eds-badge-wrapper\" #contentRef (cdkObserveContent)=\"onContentChanged()\">\n <ng-content></ng-content>\n </span>\n}\n","import { EdsBadge } from './eds-badge';\n\nexport * from './eds-badge';\n\nexport const EDS_BADGE = [\n EdsBadge,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"eui-eds-eds-badge.mjs","sources":["../../eds-badge/eds-badge.ts","../../eds-badge/eds-badge.html","../../eds-badge/index.ts","../../eds-badge/eui-eds-eds-badge.ts"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n input,\n viewChild,\n ElementRef,\n AfterViewInit,\n ChangeDetectorRef,\n booleanAttribute,\n inject,\n signal,\n computed,\n} from '@angular/core';\nimport { ObserversModule } from '@angular/cdk/observers';\nimport { EdsColorDirective, EdsSizeDirective } from '@eui/eds/shared';\n\n@Component({\n selector: 'div[edsBadge], span[edsBadge], eds-badge',\n templateUrl: './eds-badge.html',\n styleUrl: './eds-badge.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [ObserversModule],\n host: {\n '[class]': 'hostClasses()',\n '[attr.data-e2e]': 'e2eAttr()',\n role: 'status',\n '[attr.aria-label]': 'ariaLabel()',\n },\n hostDirectives: [\n {\n directive: EdsSizeDirective,\n inputs: [\n 'edsSizeXS',\n 'edsSizeS',\n 'edsSizeM',\n 'edsSizeL',\n 'edsSizeVariant',\n ],\n },\n {\n directive: EdsColorDirective,\n inputs: [\n 'edsNeutral',\n 'edsInfo',\n 'edsSuccess',\n 'edsWarning',\n 'edsCritical',\n 'edsColorVariant',\n ],\n },\n ],\n})\nexport class EdsBadge implements AfterViewInit {\n /**\n * @description\n * Computes and returns the CSS classes for the badge based on its current state\n */\n hostClasses = computed(() => {\n const sizeClass = this.sizeDirective.getCssClass('eds-badge');\n const colorClass = this.colorDirective.getCssClass('eds-badge');\n\n return [\n 'eds-badge',\n sizeClass || 'eds-badge--size-m',\n colorClass || 'eds-badge--neutral',\n this.isEmpty() || this.edsDottedBadge() ? 'eds-badge--empty' : '',\n this.edsBadgeIcon() ? 'eds-badge--icon-only' : '',\n this.edsOutline() ? 'eds-badge--outline' : '',\n ].join(' ').trim();\n });\n\n /** @description Data attribute for e2e testing */\n e2eAttr = input('eds-badge');\n\n /** @description ARIA label for accessibility */\n ariaLabel = input<string | null>('badge', { alias: 'aria-label' });\n\n /**\n * Maximum number of characters to display before truncating.\n * When content exceeds this limit, it will be replaced with charReplacement value.\n * Useful for displaying large numbers in a compact format (e.g., \"99+\" for values over 99).\n */\n maxCharCount = input(0);\n\n /**\n * String to display when content is truncated due to maxCharCount.\n * @default '99+'\n */\n charReplacement = input('');\n\n /**\n * Whether the badge contains only an icon (displays as a small dot indicator).\n * When true, no text content is shown, creating a minimal status indicator.\n * @default false\n */\n edsBadgeIcon = input(false, { transform: booleanAttribute });\n\n /**\n * Whether to display the badge with dotted styling variant.\n * Applies alternative visual treatment to the badge.\n * @default false\n */\n edsDottedBadge = input(false, { transform: booleanAttribute });\n\n edsOutline = input(false, { transform: booleanAttribute });\n\n readonly content = viewChild.required<ElementRef>('contentRef');\n\n protected sizeDirective = inject(EdsSizeDirective);\n protected colorDirective = inject(EdsColorDirective);\n\n protected hasContentUpdated = false;\n protected updatedContent!: string;\n private cdRef = inject(ChangeDetectorRef);\n private isEmpty = signal(false);\n\n ngAfterViewInit(): void {\n const content = this.content();\n if (content) {\n this.isEmpty.set(content.nativeElement.childNodes.length === 0);\n this.cdRef.detectChanges();\n if (!this.isEmpty()) {\n this._checkContent();\n this.cdRef.detectChanges();\n }\n }\n }\n\n /**\n * @description\n * Handles content changes and triggers content checking\n */\n onContentChanged(): void {\n this._checkContent();\n }\n\n /**\n * @description\n * Checks if content exceeds maxCharCount and updates content if necessary\n * @private\n */\n private _checkContent(): void {\n if (this.maxCharCount() !== 0) {\n const contentText = this.content().nativeElement.outerText;\n if (contentText && contentText.length > this.maxCharCount()) {\n this.hasContentUpdated = true;\n this.updatedContent = this.charReplacement() || '99+';\n this.cdRef.markForCheck();\n }\n }\n }\n}\n","@if (hasContentUpdated) {\n <span class=\"eds-badge-wrapper\">\n {{ updatedContent }}\n </span>\n} @else {\n <span class=\"eds-badge-wrapper\" #contentRef (cdkObserveContent)=\"onContentChanged()\">\n <ng-content></ng-content>\n </span>\n}\n","import { EdsBadge } from './eds-badge';\n\nexport * from './eds-badge';\n\nexport const EDS_BADGE = [\n EdsBadge,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -15,10 +15,10 @@ import { EDS_ICON } from '@eui/eds/eds-icon';
|
|
|
15
15
|
* ```
|
|
16
16
|
*/
|
|
17
17
|
class EdsBannerPicture {
|
|
18
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
19
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
18
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBannerPicture, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsBannerPicture, isStandalone: true, selector: "eds-banner-picture", host: { classAttribute: "eds-banner__picture" }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
20
20
|
}
|
|
21
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
21
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBannerPicture, decorators: [{
|
|
22
22
|
type: Component,
|
|
23
23
|
args: [{ selector: 'eds-banner-picture', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
24
24
|
class: 'eds-banner__picture',
|
|
@@ -48,10 +48,10 @@ class EdsBannerImage {
|
|
|
48
48
|
}, /* @ts-ignore */
|
|
49
49
|
...(ngDevMode ? [{ debugName: "cssAnchor" }] : /* istanbul ignore next */ []));
|
|
50
50
|
}
|
|
51
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
52
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.
|
|
51
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBannerImage, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
52
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: EdsBannerImage, isStandalone: true, selector: "img[edsBannerImage]", inputs: { imageAnchor: { classPropertyName: "imageAnchor", publicName: "imageAnchor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--eds-image-anchor": "cssAnchor()" }, classAttribute: "eds-banner__image" }, ngImport: i0 }); }
|
|
53
53
|
}
|
|
54
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
54
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBannerImage, decorators: [{
|
|
55
55
|
type: Directive,
|
|
56
56
|
args: [{
|
|
57
57
|
selector: 'img[edsBannerImage]',
|
|
@@ -80,10 +80,10 @@ class EdsBannerVideo {
|
|
|
80
80
|
get nativeElement() {
|
|
81
81
|
return this.el.nativeElement;
|
|
82
82
|
}
|
|
83
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
84
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
83
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBannerVideo, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
84
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EdsBannerVideo, isStandalone: true, selector: "video[edsBannerVideo]", host: { classAttribute: "eds-banner__video" }, ngImport: i0 }); }
|
|
85
85
|
}
|
|
86
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
86
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBannerVideo, decorators: [{
|
|
87
87
|
type: Directive,
|
|
88
88
|
args: [{
|
|
89
89
|
selector: 'video[edsBannerVideo]',
|
|
@@ -296,10 +296,10 @@ class EdsBanner {
|
|
|
296
296
|
const video = this.bannerVideo();
|
|
297
297
|
return video ? video.nativeElement : null;
|
|
298
298
|
}
|
|
299
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
300
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EdsBanner, isStandalone: true, selector: "eds-banner", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, edsSizeXS: { classPropertyName: "edsSizeXS", publicName: "edsSizeXS", isSignal: true, isRequired: false, transformFunction: null }, edsSizeS: { classPropertyName: "edsSizeS", publicName: "edsSizeS", isSignal: true, isRequired: false, transformFunction: null }, edsSizeM: { classPropertyName: "edsSizeM", publicName: "edsSizeM", isSignal: true, isRequired: false, transformFunction: null }, edsSizeL: { classPropertyName: "edsSizeL", publicName: "edsSizeL", isSignal: true, isRequired: false, transformFunction: null }, edsSizeVariant: { classPropertyName: "edsSizeVariant", publicName: "edsSizeVariant", isSignal: true, isRequired: false, transformFunction: null }, hasLightBackground: { classPropertyName: "hasLightBackground", publicName: "hasLightBackground", isSignal: true, isRequired: false, transformFunction: null }, hasDarkBackground: { classPropertyName: "hasDarkBackground", publicName: "hasDarkBackground", isSignal: true, isRequired: false, transformFunction: null }, hasNoBackground: { classPropertyName: "hasNoBackground", publicName: "hasNoBackground", isSignal: true, isRequired: false, transformFunction: null }, fontColor: { classPropertyName: "fontColor", publicName: "fontColor", isSignal: true, isRequired: false, transformFunction: null }, fontSize: { classPropertyName: "fontSize", publicName: "fontSize", isSignal: true, isRequired: false, transformFunction: null }, fontWeight: { classPropertyName: "fontWeight", publicName: "fontWeight", isSignal: true, isRequired: false, transformFunction: null }, horizontalAlignment: { classPropertyName: "horizontalAlignment", publicName: "horizontalAlignment", isSignal: true, isRequired: false, transformFunction: null }, verticalAlignment: { classPropertyName: "verticalAlignment", publicName: "verticalAlignment", isSignal: true, isRequired: false, transformFunction: null }, copyright: { classPropertyName: "copyright", publicName: "copyright", isSignal: true, isRequired: false, transformFunction: null }, isFullWidth: { classPropertyName: "isFullWidth", publicName: "isFullWidth", isSignal: true, isRequired: false, transformFunction: null }, hasOverlay: { classPropertyName: "hasOverlay", publicName: "hasOverlay", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "region" }, properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()", "style.--banner-footer-height.px": "bannerFooterHeight()", "attr.aria-label": "ariaLabel()" } }, queries: [{ propertyName: "bannerPicture", first: true, predicate: EdsBannerPicture, descendants: true, isSignal: true }, { propertyName: "bannerVideo", first: true, predicate: EdsBannerVideo, descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasImage()) {\n <figure class=\"eds-banner__picture-container\" role=\"presentation\" aria-hidden=\"true\">\n <ng-content select=\"eds-banner-picture\" />\n @if (copyright()) {\n <footer class=\"eds-banner__credit\">\n <div class=\"eds-banner__credit-container\">\u00A9 {{ copyright() }}</div>\n </footer>\n }\n </figure>\n}\n\n@if (hasVideo()) {\n <div class=\"eds-banner__video-container\">\n <ng-content select=\"video[edsBannerVideo]\" />\n @if (copyright()) {\n <footer class=\"eds-banner__credit\">\n <div class=\"eds-banner__credit-container\">\u00A9 {{ copyright() }}</div>\n </footer>\n }\n <button\n class=\"eds-banner__play\"\n [style.display]=\"isPlaying() ? 'none' : 'flex'\"\n (click)=\"onVideoPlay()\"\n aria-label=\"Play video\"\n type=\"button\"\n >\n <eds-icon icon=\"play\" edsSizeM />\n </button>\n <button\n class=\"eds-banner__pause\"\n [style.display]=\"isPlaying() ? 'flex' : 'none'\"\n (click)=\"onVideoPause()\"\n aria-label=\"Pause video\"\n type=\"button\"\n >\n <eds-icon icon=\"pause\" edsSizeM />\n </button>\n </div>\n}\n\n<div class=\"eds-banner__info\">\n <div class=\"eds-banner__container\">\n <div class=\"eds-banner__content\">\n <ng-content select=\"eds-banner-title\" />\n <ng-content select=\"eds-banner-description\" />\n <ng-content select=\"eds-banner-cta\" />\n <ng-content />\n </div>\n </div>\n</div>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{--banner-footer-height: 0px;align-items:center;border-radius:0;box-shadow:none;display:flex;flex-direction:column;justify-content:center;margin-bottom:0;margin-inline-end:0;margin-top:0;position:relative}.eui-21 :host .eds-banner__picture-container{margin:0;position:relative;width:100%;aspect-ratio:3/2}.eui-21 :host .eds-banner__video-container{object-fit:cover;overflow:hidden;position:relative;width:100%;aspect-ratio:3/2}.eui-21 :host .eds-banner__credit{background-color:var(--eds-c-surface-default);color:var(--eds-c-foreground-default);font:var(--eds-f-paragraph-xs);margin-block-end:calc(var(--eds-sp-xl) * -1);padding-block-start:1px;position:relative;text-align:end;width:100%;z-index:1}.eui-21 :host .eds-banner__credit-container{padding-inline:var(--eds-sp-m)}.eui-21 :host .eds-banner__info{background-color:var(--eds-c-surface-default);display:flex;flex-grow:1;padding-left:10%;width:100%}.eui-21 :host .eds-banner__container{display:flex;padding-block:var(--eds-sp-l) var(--eds-sp-xl);width:100%}.eui-21 :host .eds-banner__content{align-items:flex-start;box-sizing:initial;display:inline-flex;flex-direction:column;max-width:50rem}.eui-21 :host .eds-banner__content>:first-child{margin-top:0}.eui-21 :host ::ng-deep .eds-banner__image{display:block;height:100%;max-height:100%;object-fit:cover;object-position:var(--eds-image-anchor, top);position:relative;width:100%}.eui-21 :host ::ng-deep .eds-banner__video{display:block;height:100%;max-height:100%;object-fit:cover;object-position:center;position:relative;width:100%}.eui-21 :host ::ng-deep eds-banner-picture{display:block;height:100%;position:relative}.eui-21 :host ::ng-deep eds-banner-title{color:var(--eds-c-foreground-default);display:block;margin:0;width:100%;font-family:Inter,arial,sans-serif;font-size:var(--eds-f-size-4xl, 2rem);font-weight:400;line-height:var(--eds-f-lh-xl, 2.5rem)}.eui-21 :host ::ng-deep eds-banner-description{color:var(--eds-c-foreground-default);display:block;margin-block-start:var(--eds-sp-s);margin-block-end:0;width:100%;font-family:Inter,arial,sans-serif;font-size:var(--eds-f-size-2xl, 1.25rem);font-weight:300;line-height:var(--eds-f-lh-l, 1.75rem)}.eui-21 :host ::ng-deep eds-banner-cta{display:block;margin-top:var(--eds-sp-m);padding-top:var(--eds-sp-l)}.eui-21 :host .eds-banner__play,.eui-21 :host .eds-banner__pause{align-items:center;background-color:var(--eds-c-foreground-default);border:none;border-radius:50%;bottom:calc(var(--eds-sp-m) + var(--banner-footer-height));color:var(--eds-c-surface-elevation);cursor:pointer;inset-inline-end:var(--eds-sp-m);justify-content:center;outline-offset:-4px;padding:var(--eds-sp-xs);position:absolute;z-index:2}.eui-21 :host .eds-banner__play:hover,.eui-21 :host .eds-banner__play:focus-visible,.eui-21 :host .eds-banner__play:active,.eui-21 :host .eds-banner__pause:hover,.eui-21 :host .eds-banner__pause:focus-visible,.eui-21 :host .eds-banner__pause:active{background-color:var(--eds-c-surface-elevation);border:none;color:var(--eds-c-foreground-default)}.eui-21 :host(.eds-banner--full-width){border-radius:0;margin-inline:calc(50% - 50vw);width:100vw}.eui-21 :host(.eds-banner--no-media){background-color:var(--eds-c-surface-primary)}.eui-21 :host(.eds-banner--no-media) .eds-banner__info{background-color:var(--eds-c-surface-primary)}.eui-21 :host(.eds-banner--no-media) ::ng-deep eds-banner-title,.eui-21 :host(.eds-banner--no-media) ::ng-deep eds-banner-description{color:var(--eds-c-foreground-inverted)}.eui-21 :host(.eds-banner--no-media) .eds-banner__content{background:transparent;padding:0}.eui-21 :host(.eds-banner--no-media) .eds-banner__container{padding-block:var(--eds-sp-xl) var(--eds-sp-2xl)}.eui-21 :host(.eds-banner--font-s) ::ng-deep eds-banner-title{font-size:var(--eds-f-size-2xl, 1.25rem);font-weight:400;line-height:var(--eds-f-lh-l, 1.75rem)}.eui-21 :host(.eds-banner--font-s) ::ng-deep eds-banner-description{font-size:var(--eds-f-size-l, 1.125rem);font-weight:400;line-height:var(--eds-f-lh-m, 1.5rem)}.eui-21 :host(.eds-banner--font-l) ::ng-deep eds-banner-title{font-size:var(--eds-f-size-6xl, 3rem);font-weight:400;line-height:var(--eds-f-lh-3xl, 3.25rem)}.eui-21 :host(.eds-banner--font-l) ::ng-deep eds-banner-description{font-size:var(--eds-f-size-2xl, 1.25rem);font-weight:300;line-height:var(--eds-f-lh-l, 1.75rem)}.eui-21 :host(.eds-banner--font-weight-bold) ::ng-deep eds-banner-title{font-weight:600}.eui-21 :host(.eds-banner--font-weight-bold) ::ng-deep eds-banner-description{font-weight:400}@media screen and (min-width:768px)and (max-width:1139px){.eui-21 :host .eds-banner__picture-container,.eui-21 :host .eds-banner__video-container{aspect-ratio:3/1}.eui-21 :host .eds-banner__container{padding-block:var(--eds-sp-xl) var(--eds-sp-2xl)}.eui-21 :host .eds-banner__credit-container{padding-inline:var(--eds-sp-xl)}.eui-21 :host ::ng-deep eds-banner-title{font-size:var(--eds-f-size-5xl, 2.5rem);letter-spacing:-1px;line-height:var(--eds-f-lh-2xl, 3rem)}.eui-21 :host ::ng-deep eds-banner-description{font-size:var(--eds-f-size-3xl, 1.5rem);line-height:var(--eds-f-lh-l, 1.75rem)}.eui-21 :host(.eds-banner--no-media) .eds-banner__container{padding-block:var(--eds-sp-2xl)}.eui-21 :host(.eds-banner--font-s) ::ng-deep eds-banner-title{font-size:var(--eds-f-size-5xl, 2.5rem);letter-spacing:-1px;line-height:var(--eds-f-lh-2xl, 3rem)}.eui-21 :host(.eds-banner--font-s) ::ng-deep eds-banner-description{font-size:var(--eds-f-size-xl, 1.25rem);line-height:var(--eds-f-lh-l, 1.75rem)}.eui-21 :host(.eds-banner--font-l) ::ng-deep eds-banner-title{font-size:var(--eds-f-size-8xl, 4rem);letter-spacing:-1px;line-height:var(--eds-f-lh-7xl, 4.5rem)}.eui-21 :host(.eds-banner--font-l) ::ng-deep eds-banner-description{font-size:var(--eds-f-size-5xl, 2.5rem);letter-spacing:-1px;line-height:var(--eds-f-lh-2xl, 3rem)}}@media screen and (min-width:1140px){.eui-21 :host{aspect-ratio:4/1;padding-bottom:var(--banner-footer-height)}.eui-21 :host .eds-banner__info{align-items:center;background-color:initial;position:absolute;z-index:1}.eui-21 :host .eds-banner__container{padding-block:var(--eds-sp-4xl)}.eui-21 :host .eds-banner__content{background-color:var(--eds-c-surface-elevation);border-radius:0;max-width:42.5rem;padding:var(--eds-sp-l) var(--eds-sp-xl) var(--eds-sp-xl)}.eui-21 :host .eds-banner__credit{font:var(--eds-f-paragraph-xs);margin-block-end:0;padding-block:var(--eds-sp-2xs);position:absolute;text-align:start}.eui-21 :host .eds-banner__credit-container{padding-inline:var(--eds-sp-2xl)}.eui-21 :host .eds-banner__picture-container,.eui-21 :host .eds-banner__video-container{aspect-ratio:auto;height:100%;position:static}.eui-21 :host ::ng-deep eds-banner-title{font-size:var(--eds-f-size-8xl, 4rem);letter-spacing:-2px;line-height:var(--eds-f-lh-7xl, 4.5rem);display:inline;width:auto}.eui-21 :host ::ng-deep eds-banner-description{font-size:var(--eds-f-size-6xl, 3rem);letter-spacing:-1px;line-height:var(--eds-f-lh-4xl, 3.5rem);width:auto}.eui-21 :host(.eds-banner--xs){aspect-ratio:6/1}.eui-21 :host(.eds-banner--s){aspect-ratio:5/1}.eui-21 :host(.eds-banner--m){aspect-ratio:4/1}.eui-21 :host(.eds-banner--l){aspect-ratio:3/1}.eui-21 :host(.eds-banner--no-media) .eds-banner__container{padding-block:var(--eds-sp-4xl)}.eui-21 :host(.eds-banner--v-bottom) .eds-banner__container{padding-block-end:calc(var(--eds-sp-4xl) + var(--banner-footer-height))}.eui-21 :host(.eds-banner--box-bg-none) .eds-banner__content{background-color:initial;border-radius:0;padding:0}.eui-21 :host(.eds-banner--box-bg-dark) .eds-banner__content{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#000000b3;-webkit-box-decoration-break:clone;box-decoration-break:clone}.eui-21 :host(.eds-banner--color-light) ::ng-deep eds-banner-title,.eui-21 :host(.eds-banner--color-light) ::ng-deep eds-banner-description{color:#fff}.eui-21 :host(.eds-banner--h-center) .eds-banner__container{justify-content:center}.eui-21 :host(.eds-banner--h-center) .eds-banner__content{align-items:center;text-align:center}.eui-21 :host(.eds-banner--h-right) .eds-banner__container{justify-content:flex-end}.eui-21 :host(.eds-banner--h-right) .eds-banner__content{align-items:flex-end;text-align:end}.eui-21 :host(.eds-banner--v-top) .eds-banner__info{top:0}.eui-21 :host(.eds-banner--v-bottom) .eds-banner__info{bottom:0}.eui-21 :host(.eds-banner--overlay) .eds-banner__picture-container:after,.eui-21 :host(.eds-banner--overlay) .eds-banner__video-container:after{background-color:#0006;content:\"\";inset:0;mix-blend-mode:multiply;position:absolute;z-index:0}.eui-21 :host(.eds-banner--font-s) ::ng-deep eds-banner-title{font-size:var(--eds-f-size-6xl, 3rem);letter-spacing:-1px;line-height:var(--eds-f-lh-4xl, 3.5rem)}.eui-21 :host(.eds-banner--font-s) ::ng-deep eds-banner-description{font-size:var(--eds-f-size-2xl, 1.25rem);line-height:var(--eds-f-lh-xl, 2.5rem)}.eui-21 :host(.eds-banner--font-l) ::ng-deep eds-banner-title{font-size:var(--eds-f-size-10xl, 5rem);letter-spacing:-2px;line-height:var(--eds-f-lh-10xl, 5.5rem)}.eui-21 :host(.eds-banner--font-l) ::ng-deep eds-banner-description{font-size:var(--eds-f-size-6xl, 3rem);letter-spacing:-1px;line-height:var(--eds-f-lh-4xl, 3.5rem)}}\n"], dependencies: [{ kind: "component", type: i1.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden", "edsRounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
299
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBanner, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
300
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsBanner, isStandalone: true, selector: "eds-banner", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, edsSizeXS: { classPropertyName: "edsSizeXS", publicName: "edsSizeXS", isSignal: true, isRequired: false, transformFunction: null }, edsSizeS: { classPropertyName: "edsSizeS", publicName: "edsSizeS", isSignal: true, isRequired: false, transformFunction: null }, edsSizeM: { classPropertyName: "edsSizeM", publicName: "edsSizeM", isSignal: true, isRequired: false, transformFunction: null }, edsSizeL: { classPropertyName: "edsSizeL", publicName: "edsSizeL", isSignal: true, isRequired: false, transformFunction: null }, edsSizeVariant: { classPropertyName: "edsSizeVariant", publicName: "edsSizeVariant", isSignal: true, isRequired: false, transformFunction: null }, hasLightBackground: { classPropertyName: "hasLightBackground", publicName: "hasLightBackground", isSignal: true, isRequired: false, transformFunction: null }, hasDarkBackground: { classPropertyName: "hasDarkBackground", publicName: "hasDarkBackground", isSignal: true, isRequired: false, transformFunction: null }, hasNoBackground: { classPropertyName: "hasNoBackground", publicName: "hasNoBackground", isSignal: true, isRequired: false, transformFunction: null }, fontColor: { classPropertyName: "fontColor", publicName: "fontColor", isSignal: true, isRequired: false, transformFunction: null }, fontSize: { classPropertyName: "fontSize", publicName: "fontSize", isSignal: true, isRequired: false, transformFunction: null }, fontWeight: { classPropertyName: "fontWeight", publicName: "fontWeight", isSignal: true, isRequired: false, transformFunction: null }, horizontalAlignment: { classPropertyName: "horizontalAlignment", publicName: "horizontalAlignment", isSignal: true, isRequired: false, transformFunction: null }, verticalAlignment: { classPropertyName: "verticalAlignment", publicName: "verticalAlignment", isSignal: true, isRequired: false, transformFunction: null }, copyright: { classPropertyName: "copyright", publicName: "copyright", isSignal: true, isRequired: false, transformFunction: null }, isFullWidth: { classPropertyName: "isFullWidth", publicName: "isFullWidth", isSignal: true, isRequired: false, transformFunction: null }, hasOverlay: { classPropertyName: "hasOverlay", publicName: "hasOverlay", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "region" }, properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()", "style.--banner-footer-height.px": "bannerFooterHeight()", "attr.aria-label": "ariaLabel()" } }, queries: [{ propertyName: "bannerPicture", first: true, predicate: EdsBannerPicture, descendants: true, isSignal: true }, { propertyName: "bannerVideo", first: true, predicate: EdsBannerVideo, descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasImage()) {\n <figure class=\"eds-banner__picture-container\" role=\"presentation\" aria-hidden=\"true\">\n <ng-content select=\"eds-banner-picture\" />\n @if (copyright()) {\n <footer class=\"eds-banner__credit\">\n <div class=\"eds-banner__credit-container\">\u00A9 {{ copyright() }}</div>\n </footer>\n }\n </figure>\n}\n\n@if (hasVideo()) {\n <div class=\"eds-banner__video-container\">\n <ng-content select=\"video[edsBannerVideo]\" />\n @if (copyright()) {\n <footer class=\"eds-banner__credit\">\n <div class=\"eds-banner__credit-container\">\u00A9 {{ copyright() }}</div>\n </footer>\n }\n <button\n class=\"eds-banner__play\"\n [style.display]=\"isPlaying() ? 'none' : 'flex'\"\n (click)=\"onVideoPlay()\"\n aria-label=\"Play video\"\n type=\"button\"\n >\n <eds-icon icon=\"play\" edsSizeM />\n </button>\n <button\n class=\"eds-banner__pause\"\n [style.display]=\"isPlaying() ? 'flex' : 'none'\"\n (click)=\"onVideoPause()\"\n aria-label=\"Pause video\"\n type=\"button\"\n >\n <eds-icon icon=\"pause\" edsSizeM />\n </button>\n </div>\n}\n\n<div class=\"eds-banner__info\">\n <div class=\"eds-banner__container\">\n <div class=\"eds-banner__content\">\n <ng-content select=\"eds-banner-title\" />\n <ng-content select=\"eds-banner-description\" />\n <ng-content select=\"eds-banner-cta\" />\n <ng-content />\n </div>\n </div>\n</div>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{--banner-footer-height: 0px;align-items:center;border-radius:0;box-shadow:none;display:flex;flex-direction:column;justify-content:center;margin-bottom:0;margin-inline-end:0;margin-top:0;position:relative}.eui-21 :host .eds-banner__picture-container{margin:0;position:relative;width:100%;aspect-ratio:3/2}.eui-21 :host .eds-banner__video-container{object-fit:cover;overflow:hidden;position:relative;width:100%;aspect-ratio:3/2}.eui-21 :host .eds-banner__credit{background-color:var(--eds-c-surface-default);color:var(--eds-c-foreground-default);font:var(--eds-f-paragraph-xs);margin-block-end:calc(var(--eds-sp-xl) * -1);padding-block-start:1px;position:relative;text-align:end;width:100%;z-index:1}.eui-21 :host .eds-banner__credit-container{padding-inline:var(--eds-sp-m)}.eui-21 :host .eds-banner__info{background-color:var(--eds-c-surface-default);display:flex;flex-grow:1;padding-left:10%;width:100%}.eui-21 :host .eds-banner__container{display:flex;padding-block:var(--eds-sp-l) var(--eds-sp-xl);width:100%}.eui-21 :host .eds-banner__content{align-items:flex-start;box-sizing:initial;display:inline-flex;flex-direction:column;max-width:50rem}.eui-21 :host .eds-banner__content>:first-child{margin-top:0}.eui-21 :host ::ng-deep .eds-banner__image{display:block;height:100%;max-height:100%;object-fit:cover;object-position:var(--eds-image-anchor, top);position:relative;width:100%}.eui-21 :host ::ng-deep .eds-banner__video{display:block;height:100%;max-height:100%;object-fit:cover;object-position:center;position:relative;width:100%}.eui-21 :host ::ng-deep eds-banner-picture{display:block;height:100%;position:relative}.eui-21 :host ::ng-deep eds-banner-title{color:var(--eds-c-foreground-default);display:block;margin:0;width:100%;font-family:Inter,arial,sans-serif;font-size:var(--eds-f-size-4xl, 2rem);font-weight:400;line-height:var(--eds-f-lh-xl, 2.5rem)}.eui-21 :host ::ng-deep eds-banner-description{color:var(--eds-c-foreground-default);display:block;margin-block-start:var(--eds-sp-s);margin-block-end:0;width:100%;font-family:Inter,arial,sans-serif;font-size:var(--eds-f-size-2xl, 1.25rem);font-weight:300;line-height:var(--eds-f-lh-l, 1.75rem)}.eui-21 :host ::ng-deep eds-banner-cta{display:block;margin-top:var(--eds-sp-m);padding-top:var(--eds-sp-l)}.eui-21 :host .eds-banner__play,.eui-21 :host .eds-banner__pause{align-items:center;background-color:var(--eds-c-foreground-default);border:none;border-radius:50%;bottom:calc(var(--eds-sp-m) + var(--banner-footer-height));color:var(--eds-c-surface-elevation);cursor:pointer;inset-inline-end:var(--eds-sp-m);justify-content:center;outline-offset:-4px;padding:var(--eds-sp-xs);position:absolute;z-index:2}.eui-21 :host .eds-banner__play:hover,.eui-21 :host .eds-banner__play:focus-visible,.eui-21 :host .eds-banner__play:active,.eui-21 :host .eds-banner__pause:hover,.eui-21 :host .eds-banner__pause:focus-visible,.eui-21 :host .eds-banner__pause:active{background-color:var(--eds-c-surface-elevation);border:none;color:var(--eds-c-foreground-default)}.eui-21 :host(.eds-banner--full-width){border-radius:0;margin-inline:calc(50% - 50vw);width:100vw}.eui-21 :host(.eds-banner--no-media){background-color:var(--eds-c-surface-primary)}.eui-21 :host(.eds-banner--no-media) .eds-banner__info{background-color:var(--eds-c-surface-primary)}.eui-21 :host(.eds-banner--no-media) ::ng-deep eds-banner-title,.eui-21 :host(.eds-banner--no-media) ::ng-deep eds-banner-description{color:var(--eds-c-foreground-inverted)}.eui-21 :host(.eds-banner--no-media) .eds-banner__content{background:transparent;padding:0}.eui-21 :host(.eds-banner--no-media) .eds-banner__container{padding-block:var(--eds-sp-xl) var(--eds-sp-2xl)}.eui-21 :host(.eds-banner--font-s) ::ng-deep eds-banner-title{font-size:var(--eds-f-size-2xl, 1.25rem);font-weight:400;line-height:var(--eds-f-lh-l, 1.75rem)}.eui-21 :host(.eds-banner--font-s) ::ng-deep eds-banner-description{font-size:var(--eds-f-size-l, 1.125rem);font-weight:400;line-height:var(--eds-f-lh-m, 1.5rem)}.eui-21 :host(.eds-banner--font-l) ::ng-deep eds-banner-title{font-size:var(--eds-f-size-6xl, 3rem);font-weight:400;line-height:var(--eds-f-lh-3xl, 3.25rem)}.eui-21 :host(.eds-banner--font-l) ::ng-deep eds-banner-description{font-size:var(--eds-f-size-2xl, 1.25rem);font-weight:300;line-height:var(--eds-f-lh-l, 1.75rem)}.eui-21 :host(.eds-banner--font-weight-bold) ::ng-deep eds-banner-title{font-weight:600}.eui-21 :host(.eds-banner--font-weight-bold) ::ng-deep eds-banner-description{font-weight:400}@media screen and (min-width:768px)and (max-width:1139px){.eui-21 :host .eds-banner__picture-container,.eui-21 :host .eds-banner__video-container{aspect-ratio:3/1}.eui-21 :host .eds-banner__container{padding-block:var(--eds-sp-xl) var(--eds-sp-2xl)}.eui-21 :host .eds-banner__credit-container{padding-inline:var(--eds-sp-xl)}.eui-21 :host ::ng-deep eds-banner-title{font-size:var(--eds-f-size-5xl, 2.5rem);letter-spacing:-1px;line-height:var(--eds-f-lh-2xl, 3rem)}.eui-21 :host ::ng-deep eds-banner-description{font-size:var(--eds-f-size-3xl, 1.5rem);line-height:var(--eds-f-lh-l, 1.75rem)}.eui-21 :host(.eds-banner--no-media) .eds-banner__container{padding-block:var(--eds-sp-2xl)}.eui-21 :host(.eds-banner--font-s) ::ng-deep eds-banner-title{font-size:var(--eds-f-size-5xl, 2.5rem);letter-spacing:-1px;line-height:var(--eds-f-lh-2xl, 3rem)}.eui-21 :host(.eds-banner--font-s) ::ng-deep eds-banner-description{font-size:var(--eds-f-size-xl, 1.25rem);line-height:var(--eds-f-lh-l, 1.75rem)}.eui-21 :host(.eds-banner--font-l) ::ng-deep eds-banner-title{font-size:var(--eds-f-size-8xl, 4rem);letter-spacing:-1px;line-height:var(--eds-f-lh-7xl, 4.5rem)}.eui-21 :host(.eds-banner--font-l) ::ng-deep eds-banner-description{font-size:var(--eds-f-size-5xl, 2.5rem);letter-spacing:-1px;line-height:var(--eds-f-lh-2xl, 3rem)}}@media screen and (min-width:1140px){.eui-21 :host{aspect-ratio:4/1;padding-bottom:var(--banner-footer-height)}.eui-21 :host .eds-banner__info{align-items:center;background-color:initial;position:absolute;z-index:1}.eui-21 :host .eds-banner__container{padding-block:var(--eds-sp-4xl)}.eui-21 :host .eds-banner__content{background-color:var(--eds-c-surface-elevation);border-radius:0;max-width:42.5rem;padding:var(--eds-sp-l) var(--eds-sp-xl) var(--eds-sp-xl)}.eui-21 :host .eds-banner__credit{font:var(--eds-f-paragraph-xs);margin-block-end:0;padding-block:var(--eds-sp-2xs);position:absolute;text-align:start}.eui-21 :host .eds-banner__credit-container{padding-inline:var(--eds-sp-2xl)}.eui-21 :host .eds-banner__picture-container,.eui-21 :host .eds-banner__video-container{aspect-ratio:auto;height:100%;position:static}.eui-21 :host ::ng-deep eds-banner-title{font-size:var(--eds-f-size-8xl, 4rem);letter-spacing:-2px;line-height:var(--eds-f-lh-7xl, 4.5rem);display:inline;width:auto}.eui-21 :host ::ng-deep eds-banner-description{font-size:var(--eds-f-size-6xl, 3rem);letter-spacing:-1px;line-height:var(--eds-f-lh-4xl, 3.5rem);width:auto}.eui-21 :host(.eds-banner--xs){aspect-ratio:6/1}.eui-21 :host(.eds-banner--s){aspect-ratio:5/1}.eui-21 :host(.eds-banner--m){aspect-ratio:4/1}.eui-21 :host(.eds-banner--l){aspect-ratio:3/1}.eui-21 :host(.eds-banner--no-media) .eds-banner__container{padding-block:var(--eds-sp-4xl)}.eui-21 :host(.eds-banner--v-bottom) .eds-banner__container{padding-block-end:calc(var(--eds-sp-4xl) + var(--banner-footer-height))}.eui-21 :host(.eds-banner--box-bg-none) .eds-banner__content{background-color:initial;border-radius:0;padding:0}.eui-21 :host(.eds-banner--box-bg-dark) .eds-banner__content{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#000000b3;-webkit-box-decoration-break:clone;box-decoration-break:clone}.eui-21 :host(.eds-banner--color-light) ::ng-deep eds-banner-title,.eui-21 :host(.eds-banner--color-light) ::ng-deep eds-banner-description{color:#fff}.eui-21 :host(.eds-banner--h-center) .eds-banner__container{justify-content:center}.eui-21 :host(.eds-banner--h-center) .eds-banner__content{align-items:center;text-align:center}.eui-21 :host(.eds-banner--h-right) .eds-banner__container{justify-content:flex-end}.eui-21 :host(.eds-banner--h-right) .eds-banner__content{align-items:flex-end;text-align:end}.eui-21 :host(.eds-banner--v-top) .eds-banner__info{top:0}.eui-21 :host(.eds-banner--v-bottom) .eds-banner__info{bottom:0}.eui-21 :host(.eds-banner--overlay) .eds-banner__picture-container:after,.eui-21 :host(.eds-banner--overlay) .eds-banner__video-container:after{background-color:#0006;content:\"\";inset:0;mix-blend-mode:multiply;position:absolute;z-index:0}.eui-21 :host(.eds-banner--font-s) ::ng-deep eds-banner-title{font-size:var(--eds-f-size-6xl, 3rem);letter-spacing:-1px;line-height:var(--eds-f-lh-4xl, 3.5rem)}.eui-21 :host(.eds-banner--font-s) ::ng-deep eds-banner-description{font-size:var(--eds-f-size-2xl, 1.25rem);line-height:var(--eds-f-lh-xl, 2.5rem)}.eui-21 :host(.eds-banner--font-l) ::ng-deep eds-banner-title{font-size:var(--eds-f-size-10xl, 5rem);letter-spacing:-2px;line-height:var(--eds-f-lh-10xl, 5.5rem)}.eui-21 :host(.eds-banner--font-l) ::ng-deep eds-banner-description{font-size:var(--eds-f-size-6xl, 3rem);letter-spacing:-1px;line-height:var(--eds-f-lh-4xl, 3.5rem)}}\n"], dependencies: [{ kind: "component", type: i1.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden", "edsRounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
301
301
|
}
|
|
302
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
302
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBanner, decorators: [{
|
|
303
303
|
type: Component,
|
|
304
304
|
args: [{ selector: 'eds-banner', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
305
305
|
...EDS_ICON,
|
|
@@ -322,10 +322,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
322
322
|
* ```
|
|
323
323
|
*/
|
|
324
324
|
class EdsBannerTitle {
|
|
325
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
326
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
325
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBannerTitle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
326
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsBannerTitle, isStandalone: true, selector: "eds-banner-title", host: { classAttribute: "eds-banner__title" }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
327
327
|
}
|
|
328
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
328
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBannerTitle, decorators: [{
|
|
329
329
|
type: Component,
|
|
330
330
|
args: [{ selector: 'eds-banner-title', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
331
331
|
class: 'eds-banner__title',
|
|
@@ -342,10 +342,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
342
342
|
* ```
|
|
343
343
|
*/
|
|
344
344
|
class EdsBannerDescription {
|
|
345
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
346
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
345
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBannerDescription, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
346
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsBannerDescription, isStandalone: true, selector: "eds-banner-description", host: { classAttribute: "eds-banner__description" }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
347
347
|
}
|
|
348
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
348
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBannerDescription, decorators: [{
|
|
349
349
|
type: Component,
|
|
350
350
|
args: [{ selector: 'eds-banner-description', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
351
351
|
class: 'eds-banner__description',
|
|
@@ -364,10 +364,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
364
364
|
* ```
|
|
365
365
|
*/
|
|
366
366
|
class EdsBannerCta {
|
|
367
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
368
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
367
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBannerCta, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
368
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsBannerCta, isStandalone: true, selector: "eds-banner-cta", host: { classAttribute: "eds-banner__cta" }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
369
369
|
}
|
|
370
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
370
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBannerCta, decorators: [{
|
|
371
371
|
type: Component,
|
|
372
372
|
args: [{ selector: 'eds-banner-cta', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
373
373
|
class: 'eds-banner__cta',
|
|
@@ -80,10 +80,10 @@ class EdsBlockContent {
|
|
|
80
80
|
getActiveElement() {
|
|
81
81
|
return this.elRef.nativeElement.querySelector(':focus');
|
|
82
82
|
}
|
|
83
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
84
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
83
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBlockContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
84
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsBlockContent, isStandalone: true, selector: "eds-block-content", inputs: { role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, isBlocked: { classPropertyName: "isBlocked", publicName: "isBlocked", isSignal: true, isRequired: false, transformFunction: null }, e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.role": "role()", "attr.aria-label": "ariaLabel()", "attr.aria-busy": "isBlocked()", "attr.aria-disabled": "isBlocked() || null", "attr.inert": "isBlocked() || null", "attr.data-e2e": "e2eAttr()" } }, ngImport: i0, template: "<ng-content/>@if (isBlocked()) {<span class=\"eds-sr-only\" aria-live=\"polite\">Loading</span>}\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:block;position:relative}.eui-21 :host.eds-block-content--blocked{min-height:114px}.eui-21 :host.eds-block-content--blocked:before{border-top:var(--eds-bw-m) solid currentcolor;border-right:var(--eds-bw-m) solid currentcolor;border-bottom-style:solid;border-left-style:solid;border-radius:var(--eds-br-full);border-bottom-width:var(--eds-bw-m);border-left-width:var(--eds-bw-m);border-bottom-color:var(--eds-c-border-divider);border-left-color:var(--eds-c-border-divider);color:var(--eds-c-foreground-primary);animation:eds-spin .65s linear infinite;display:block;height:80px;left:50%;margin:-40px 0 0 -40px;top:50%;content:\"\";position:absolute;width:80px;z-index:100}.eui-21 :host.eds-block-content--blocked:after{background-color:#fff6;content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}@keyframes eds-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.eds-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
85
85
|
}
|
|
86
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
86
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBlockContent, decorators: [{
|
|
87
87
|
type: Component,
|
|
88
88
|
args: [{ selector: 'eds-block-content', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
89
89
|
'[class]': 'hostClasses()',
|
|
@@ -99,10 +99,10 @@ class EdsBlockDocument {
|
|
|
99
99
|
this.isActive = computed(() => this.isBlocked() || this.shellService.isBlockDocumentActive(), /* @ts-ignore */
|
|
100
100
|
...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
|
|
101
101
|
}
|
|
102
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
103
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
102
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBlockDocument, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
103
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsBlockDocument, isStandalone: true, selector: "eds-block-document", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, isBlocked: { classPropertyName: "isBlocked", publicName: "isBlocked", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.aria-busy": "isActive()", "attr.data-e2e": "e2eAttr()" } }, ngImport: i0, template: "@if (isActive()) {\n <div class=\"eds-block-document__overlay\" role=\"alert\" aria-live=\"assertive\">\n <div\n class=\"eds-block-document__spinner\"\n role=\"progressbar\"\n [attr.aria-label]=\"ariaLabel()\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\">\n </div>\n <span class=\"eds-u-sr-only\">{{ ariaLabel() }}</span>\n </div>\n}\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:none;pointer-events:none}.eui-21 :host .eds-block-document__overlay{position:fixed;inset:0;z-index:10020;display:flex;align-items:center;justify-content:center;background-color:#0000001a;pointer-events:all}.eui-21 :host .eds-block-document__spinner{width:120px;height:120px;border-radius:var(--eds-br-full);border-top:var(--eds-bw-m) solid var(--eds-c-surface-primary);border-right:var(--eds-bw-m) solid var(--eds-c-surface-primary);border-bottom:var(--eds-bw-m) solid var(--eds-c-border-divider);border-left:var(--eds-bw-m) solid var(--eds-c-border-divider);animation:eds-block-document-spin .65s linear infinite}.eui-21 :host .eds-u-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.eui-21 :host.eds-block-document--blocked{display:block}@keyframes eds-block-document-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
104
104
|
}
|
|
105
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
105
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBlockDocument, decorators: [{
|
|
106
106
|
type: Component,
|
|
107
107
|
args: [{ selector: 'eds-block-document', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
108
108
|
'[class]': 'hostClasses()',
|
|
@@ -42,10 +42,10 @@ class EdsBlockquote {
|
|
|
42
42
|
this.hasImage = computed(() => !!this.imageUrl(), /* @ts-ignore */
|
|
43
43
|
...(ngDevMode ? [{ debugName: "hasImage" }] : /* istanbul ignore next */ []));
|
|
44
44
|
}
|
|
45
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
46
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
45
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBlockquote, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
46
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsBlockquote, isStandalone: true, selector: "eds-blockquote", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, author: { classPropertyName: "author", publicName: "author", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()" } }, ngImport: i0, template: "@if (hasImage()) {\n <img class=\"eds-blockquote__image\" [src]=\"imageUrl()\" [alt]=\"author() || ''\" />\n}\n<div class=\"eds-blockquote__body\">\n <blockquote class=\"eds-blockquote__quote\">\n <p class=\"eds-blockquote__citation\">\n <ng-content/>\n </p>\n @if (hasAuthor()) {\n <footer class=\"eds-blockquote__attribution\">\n <cite class=\"eds-blockquote__author\">{{ author() }}</cite>\n </footer>\n }\n </blockquote>\n</div>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:flex;align-items:flex-start;gap:var(--eds-sp-m);padding:var(--eds-sp-m) var(--eds-sp-l);border-left:var(--eds-bw-m) solid var(--eds-c-border-primary);border-radius:var(--eds-br-xs);background-color:var(--eds-c-surface-elevation)}.eui-21 :host .eds-blockquote__image{display:block;width:120px;height:120px;aspect-ratio:1/1;object-fit:cover;flex-shrink:0}.eui-21 :host .eds-blockquote__body{display:flex;flex-direction:column;flex:1}.eui-21 :host .eds-blockquote__quote{margin:0;padding:0}.eui-21 :host .eds-blockquote__citation{font:var(--eds-f-paragraph-l);font-style:italic;color:var(--eds-c-foreground-default);margin:0}.eui-21 :host .eds-blockquote__attribution{margin-top:var(--eds-sp-s)}.eui-21 :host .eds-blockquote__author{font:var(--eds-f-label-m-semi-bold);font-style:normal;color:var(--eds-c-foreground-subtler)}@media screen and (max-width:767px){.eui-21 :host{padding:var(--eds-sp-s) var(--eds-sp-m);gap:var(--eds-sp-s)}.eui-21 :host .eds-blockquote__citation{font:var(--eds-f-paragraph-m);font-style:italic}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
47
47
|
}
|
|
48
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
48
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBlockquote, decorators: [{
|
|
49
49
|
type: Component,
|
|
50
50
|
args: [{ selector: 'eds-blockquote', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
51
51
|
'[class]': 'hostClasses()',
|
|
@@ -56,10 +56,10 @@ class EdsBreadcrumbItem {
|
|
|
56
56
|
this._router.navigate(linkValue, this.navigationExtras());
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
60
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
59
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBreadcrumbItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
60
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsBreadcrumbItem, isStandalone: true, selector: "eds-breadcrumb-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, navigationExtras: { classPropertyName: "navigationExtras", publicName: "navigationExtras", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "class.eds-breadcrumb-item--clickable": "!!link()", "class.eds-breadcrumb-item--current": "_isLast", "attr.aria-current": "_isLast ? \"page\" : null" } }, ngImport: i0, template: "@if (!_isFirst) {\n <eds-icon icon=\"caret-right:core\" edsSizeXS class=\"eds-breadcrumb-item__separator\" />\n}\n@if (icon()) {\n <eds-icon [icon]=\"icon()\" edsSizeS [attr.aria-label]=\"ariaLabel()\" />\n}\n@if (label()) {\n <span class=\"eds-breadcrumb-item__label\">{{ label() }}</span>\n}\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:flex;align-items:center;gap:var(--eds-sp-3xs);white-space:nowrap;font:var(--eds-f-label-s);color:var(--eds-c-foreground-subtler)}.eui-21 :host(.eds-breadcrumb-item--clickable){cursor:pointer;color:var(--eds-c-foreground-primary)}.eui-21 :host(.eds-breadcrumb-item--clickable):hover .eds-breadcrumb-item__label{text-decoration:underline}.eui-21 :host(.eds-breadcrumb-item--current){color:var(--eds-c-foreground);cursor:default}.eui-21 .eds-breadcrumb-item__separator{color:var(--eds-c-foreground-subtler)}.eui-21 .eds-breadcrumb-item__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}\n"], dependencies: [{ kind: "component", type: i1.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden", "edsRounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
61
61
|
}
|
|
62
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
62
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBreadcrumbItem, decorators: [{
|
|
63
63
|
type: Component,
|
|
64
64
|
args: [{ selector: 'eds-breadcrumb-item', imports: [...EDS_ICON], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
65
65
|
'(click)': 'onClick()',
|
|
@@ -100,10 +100,10 @@ class EdsBreadcrumb {
|
|
|
100
100
|
this._destroy$.next();
|
|
101
101
|
this._destroy$.complete();
|
|
102
102
|
}
|
|
103
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
104
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
103
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
104
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsBreadcrumb, isStandalone: true, selector: "eds-breadcrumb", host: { attributes: { "role": "navigation", "aria-label": "Breadcrumb" } }, queries: [{ propertyName: "_items", predicate: i0.forwardRef(() => EdsBreadcrumbItem) }], ngImport: i0, template: '<ng-content/>', isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--eds-sp-3xs);font:var(--eds-f-label-m);color:var(--eds-c-foreground-subtler)}@media screen and (max-width:767px){.eui-21 :host{display:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
105
105
|
}
|
|
106
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
106
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBreadcrumb, decorators: [{
|
|
107
107
|
type: Component,
|
|
108
108
|
args: [{ selector: 'eds-breadcrumb', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
109
109
|
role: 'navigation',
|
|
@@ -232,10 +232,10 @@ class EdsButtonGroup {
|
|
|
232
232
|
}
|
|
233
233
|
});
|
|
234
234
|
}
|
|
235
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
236
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.
|
|
235
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
236
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EdsButtonGroup, isStandalone: true, selector: "eds-button-group", inputs: { isCheckboxButtons: { classPropertyName: "isCheckboxButtons", publicName: "isCheckboxButtons", isSignal: true, isRequired: false, transformFunction: null }, isRadioButtons: { classPropertyName: "isRadioButtons", publicName: "isRadioButtons", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, host: { properties: { "class": "hostClasses()", "attr.data-e2e": "\"eds-button-group\"", "attr.role": "groupRole()", "attr.aria-label": "ariaLabel()", "attr.aria-orientation": "\"horizontal\"" } }, queries: [{ propertyName: "buttons", predicate: EdsButton, read: ElementRef, isSignal: true }, { propertyName: "buttonInstances", predicate: EdsButton, isSignal: true }], ngImport: i0, template: '<ng-content/>', isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:inline-flex;flex-wrap:wrap;vertical-align:middle;position:relative;width:100%}.eui-21 :host ::ng-deep>.eds-button:not(:first-child){margin-left:calc(-1 * var(--eds-bw-xs))}.eui-21 :host ::ng-deep>.eds-button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.eui-21 :host ::ng-deep>.eds-button:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.eui-21 :host ::ng-deep>.eds-button.eds-button--checked{background-color:var(--eds-c-surface-primary);color:var(--eds-c-on-surface-primary);border-color:var(--eds-c-border-primary);z-index:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
237
237
|
}
|
|
238
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
238
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsButtonGroup, decorators: [{
|
|
239
239
|
type: Component,
|
|
240
240
|
args: [{ selector: 'eds-button-group', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
241
241
|
'[class]': 'hostClasses()',
|
|
@@ -95,10 +95,10 @@ class EdsButton {
|
|
|
95
95
|
this._renderer.removeAttribute(this._elementRef.nativeElement, 'disabled');
|
|
96
96
|
}
|
|
97
97
|
}
|
|
98
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
99
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: EdsButton, isStandalone: true, selector: "button[edsButton]", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, edsBlockButton: { classPropertyName: "edsBlockButton", publicName: "edsBlockButton", isSignal: true, isRequired: false, transformFunction: null }, edsIconButton: { classPropertyName: "edsIconButton", publicName: "edsIconButton", isSignal: true, isRequired: false, transformFunction: null }, edsAvatarButton: { classPropertyName: "edsAvatarButton", publicName: "edsAvatarButton", isSignal: true, isRequired: false, transformFunction: null }, edsLineWrap: { classPropertyName: "edsLineWrap", publicName: "edsLineWrap", isSignal: true, isRequired: false, transformFunction: null }, edsButtonPrimary: { classPropertyName: "edsButtonPrimary", publicName: "edsButtonPrimary", isSignal: true, isRequired: false, transformFunction: null }, edsButtonSecondary: { classPropertyName: "edsButtonSecondary", publicName: "edsButtonSecondary", isSignal: true, isRequired: false, transformFunction: null }, edsButtonTertiary: { classPropertyName: "edsButtonTertiary", publicName: "edsButtonTertiary", isSignal: true, isRequired: false, transformFunction: null }, edsButtonRounded: { classPropertyName: "edsButtonRounded", publicName: "edsButtonRounded", isSignal: true, isRequired: false, transformFunction: null }, edsTypeVariant: { classPropertyName: "edsTypeVariant", publicName: "edsTypeVariant", isSignal: true, isRequired: false, transformFunction: null }, isChecked: { classPropertyName: "isChecked", publicName: "isChecked", isSignal: true, isRequired: false, transformFunction: null }, edsDisabled: { classPropertyName: "edsDisabled", publicName: "edsDisabled", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()", "attr.id": "id()" } }, hostDirectives: [{ directive: i1.EdsSizeDirective, inputs: ["edsSizeS", "edsSizeS", "edsSizeM", "edsSizeM", "edsSizeL", "edsSizeL", "edsSizeVariant", "edsSizeVariant"] }, { directive: i1.EdsColorDirective, inputs: ["edsPrimary", "edsPrimary", "edsNeutral", "edsNeutral", "edsHighlight", "edsHighlight", "edsCritical", "edsCritical", "edsColorVariant", "edsColorVariant"] }], ngImport: i0, template: "<span class=\"eds-button__container\">\n <ng-content></ng-content>\n</span>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host.eds-button.eds-button--type-primary{--_border-width: var(--eds-bw-none);--_border-color: transparent}.eui-21 :host.eds-button.eds-button--type-primary.eds-button--primary{--_surface: var(--eds-c-surface-primary);--_on-surface: var(--eds-c-on-surface-primary);--_surface-hover: var(--eds-c-surface-primary--hover);--_on-surface-hover: var(--eds-c-on-surface-primary--hover);--_surface-active: var(--eds-c-surface-primary--pressed);--_on-surface-active: var(--eds-c-on-surface-primary--pressed)}.eui-21 :host.eds-button.eds-button--type-primary.eds-button--highlight{--_surface: var(--eds-c-surface-highlight);--_on-surface: var(--eds-c-on-surface-highlight);--_surface-hover: var(--eds-c-surface-highlight--hover);--_on-surface-hover: var(--eds-c-on-surface-highlight--hover);--_surface-active: var(--eds-c-surface-highlight--pressed);--_on-surface-active: var(--eds-c-on-surface-highlight--pressed)}.eui-21 :host.eds-button.eds-button--type-primary.eds-button--critical{--_surface: var(--eds-c-surface-critical);--_on-surface: var(--eds-c-on-surface-critical);--_surface-hover: var(--eds-c-surface-critical--hover);--_on-surface-hover: var(--eds-c-on-surface-critical--hover);--_surface-active: var(--eds-c-surface-critical--pressed);--_on-surface-active: var(--eds-c-on-surface-critical--pressed)}.eui-21 :host.eds-button.eds-button--type-primary:disabled,.eui-21 :host.eds-button.eds-button--type-primary.disabled{--_surface: var(--eds-c-surface-disabled);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-disabled);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-disabled);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button.eds-button--type-secondary{--_border-width: var(--eds-bw-xs);--_surface: transparent}.eui-21 :host.eds-button.eds-button--type-secondary.eds-button--primary{--_border-color: var(--eds-c-border-primary);--_on-surface: var(--eds-c-foreground-primary);--_surface-hover: var(--eds-c-surface-primary-subtle);--_on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_surface-active: var(--eds-c-surface-primary-subtle);--_on-surface-active: var(--eds-c-on-surface-primary-subtle)}.eui-21 :host.eds-button.eds-button--type-secondary.eds-button--neutral{--_border-color: var(--eds-c-border-neutral);--_on-surface: var(--eds-c-foreground-neutral);--_surface-hover: var(--eds-c-surface-neutral-subtle);--_on-surface-hover: var(--eds-c-on-surface-neutral-subtle);--_surface-active: var(--eds-c-surface-neutral-subtle);--_on-surface-active: var(--eds-c-on-surface-neutral-subtle)}.eui-21 :host.eds-button.eds-button--type-secondary.eds-button--highlight{--_border-color: var(--eds-c-border-highlight);--_on-surface: var(--eds-c-foreground-highlight);--_surface-hover: var(--eds-c-surface-highlight-subtler);--_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);--_surface-active: var(--eds-c-surface-highlight-subtler);--_on-surface-active: var(--eds-c-on-surface-highlight-subtler)}.eui-21 :host.eds-button.eds-button--type-secondary.eds-button--critical{--_border-color: var(--eds-c-border-critical);--_on-surface: var(--eds-c-foreground-critical);--_surface-hover: var(--eds-c-surface-critical-subtler);--_on-surface-hover: var(--eds-c-on-surface-critical-subtler);--_surface-active: var(--eds-c-surface-critical-subtler);--_on-surface-active: var(--eds-c-on-surface-critical-subtler)}.eui-21 :host.eds-button.eds-button--type-secondary:disabled,.eui-21 :host.eds-button.eds-button--type-secondary.disabled{--_border-width: var(--eds-bw-xs);--_border-color: var(--eds-c-border-disabled);--_surface: var(--eds-c-surface-elevation);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-elevation);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-elevation);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button.eds-button--type-tertiary{--_border-width: var(--eds-bw-none);--_surface: transparent}.eui-21 :host.eds-button.eds-button--type-tertiary.eds-button--primary{--_on-surface: var(--eds-c-foreground-primary);--_surface-hover: var(--eds-c-surface-primary-subtle);--_on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_surface-active: var(--eds-c-surface-primary-subtle);--_on-surface-active: var(--eds-c-on-surface-primary-subtle)}.eui-21 :host.eds-button.eds-button--type-tertiary.eds-button--neutral{--_on-surface: var(--eds-c-foreground-neutral);--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-neutral-subtle));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-neutral-subtle));--_surface-active: var(--eds-c-surface-neutral-subtle);--_on-surface-active: var(--eds-c-on-surface-neutral-subtle)}.eui-21 :host.eds-button.eds-button--type-tertiary.eds-button--highlight{--_on-surface: var(--eds-c-foreground-highlight);--_surface-hover: var(--eds-c-surface-highlight-subtler);--_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);--_surface-active: var(--eds-c-surface-highlight-subtler);--_on-surface-active: var(--eds-c-on-surface-highlight-subtler)}.eui-21 :host.eds-button.eds-button--type-tertiary.eds-button--critical{--_on-surface: var(--eds-c-foreground-critical);--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-critical-subtler));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-critical-subtler));--_surface-active: var(--eds-c-surface-critical-subtler);--_on-surface-active: var(--eds-c-on-surface-critical-subtler)}.eui-21 :host.eds-button.eds-button--type-tertiary:disabled,.eui-21 :host.eds-button.eds-button--type-tertiary.disabled{--_surface: var(--eds-c-surface-elevation);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-elevation);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-elevation);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button.eds-button--size-m{--_font-size: var(--eds-f-s-m);--_padding: 0 var(--eds-sp-xs);--_size: var(--eds-sp-5xl);--_icon-size: var(--eds-is-m)}.eui-21 :host.eds-button.eds-button--size-s{--_font-size: var(--eds-f-s-s);--_padding: 0 var(--eds-sp-2xs);--_size: var(--eds-sp-3xl);--_icon-size: var(--eds-is-s)}.eui-21 :host.eds-button.eds-button--size-l{--_font-size: var(--eds-f-s-l);--_padding: 0 var(--eds-sp-s);--_size: var(--eds-sp-8xl);--_icon-size: var(--eds-is-m)}.eui-21 :host.eds-button{align-items:center;background-image:none;border-radius:var(--eds-br-s);box-sizing:border-box;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;outline:none;text-transform:none;transition:none;vertical-align:middle;white-space:nowrap;border-style:solid}.eui-21 :host.eds-button:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-xs)!important}.eui-21 :host.eds-button .eds-button__container{align-items:center;display:inline-flex;position:relative;gap:var(--eds-sp-2xs);justify-content:center;width:100%}.eui-21 :host.eds-button{background-color:var(--_surface);color:var(--_on-surface);border-width:var(--_border-width);border-color:var(--_border-color);font-size:var(--_font-size);min-height:var(--_size);min-width:var(--_size);padding:var(--_padding)}.eui-21 :host.eds-button:hover{background-color:var(--_surface-hover);color:var(--_on-surface-hover)}.eui-21 :host.eds-button:active{background-color:var(--_surface-active);color:var(--_on-surface-active)}.eui-21 :host.eds-button.eds-button--rounded{border-radius:var(--eds-br-full)}.eui-21 :host.eds-button.eds-button--rounded:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-full)!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
98
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
99
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsButton, isStandalone: true, selector: "button[edsButton]", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, edsBlockButton: { classPropertyName: "edsBlockButton", publicName: "edsBlockButton", isSignal: true, isRequired: false, transformFunction: null }, edsIconButton: { classPropertyName: "edsIconButton", publicName: "edsIconButton", isSignal: true, isRequired: false, transformFunction: null }, edsAvatarButton: { classPropertyName: "edsAvatarButton", publicName: "edsAvatarButton", isSignal: true, isRequired: false, transformFunction: null }, edsLineWrap: { classPropertyName: "edsLineWrap", publicName: "edsLineWrap", isSignal: true, isRequired: false, transformFunction: null }, edsButtonPrimary: { classPropertyName: "edsButtonPrimary", publicName: "edsButtonPrimary", isSignal: true, isRequired: false, transformFunction: null }, edsButtonSecondary: { classPropertyName: "edsButtonSecondary", publicName: "edsButtonSecondary", isSignal: true, isRequired: false, transformFunction: null }, edsButtonTertiary: { classPropertyName: "edsButtonTertiary", publicName: "edsButtonTertiary", isSignal: true, isRequired: false, transformFunction: null }, edsButtonRounded: { classPropertyName: "edsButtonRounded", publicName: "edsButtonRounded", isSignal: true, isRequired: false, transformFunction: null }, edsTypeVariant: { classPropertyName: "edsTypeVariant", publicName: "edsTypeVariant", isSignal: true, isRequired: false, transformFunction: null }, isChecked: { classPropertyName: "isChecked", publicName: "isChecked", isSignal: true, isRequired: false, transformFunction: null }, edsDisabled: { classPropertyName: "edsDisabled", publicName: "edsDisabled", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()", "attr.id": "id()" } }, hostDirectives: [{ directive: i1.EdsSizeDirective, inputs: ["edsSizeS", "edsSizeS", "edsSizeM", "edsSizeM", "edsSizeL", "edsSizeL", "edsSizeVariant", "edsSizeVariant"] }, { directive: i1.EdsColorDirective, inputs: ["edsPrimary", "edsPrimary", "edsNeutral", "edsNeutral", "edsHighlight", "edsHighlight", "edsCritical", "edsCritical", "edsColorVariant", "edsColorVariant"] }], ngImport: i0, template: "<span class=\"eds-button__container\">\n <ng-content></ng-content>\n</span>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host.eds-button.eds-button--type-primary{--_border-width: var(--eds-bw-none);--_border-color: transparent}.eui-21 :host.eds-button.eds-button--type-primary.eds-button--primary{--_surface: var(--eds-c-surface-primary);--_on-surface: var(--eds-c-on-surface-primary);--_surface-hover: var(--eds-c-surface-primary--hover);--_on-surface-hover: var(--eds-c-on-surface-primary--hover);--_surface-active: var(--eds-c-surface-primary--pressed);--_on-surface-active: var(--eds-c-on-surface-primary--pressed)}.eui-21 :host.eds-button.eds-button--type-primary.eds-button--highlight{--_surface: var(--eds-c-surface-highlight);--_on-surface: var(--eds-c-on-surface-highlight);--_surface-hover: var(--eds-c-surface-highlight--hover);--_on-surface-hover: var(--eds-c-on-surface-highlight--hover);--_surface-active: var(--eds-c-surface-highlight--pressed);--_on-surface-active: var(--eds-c-on-surface-highlight--pressed)}.eui-21 :host.eds-button.eds-button--type-primary.eds-button--critical{--_surface: var(--eds-c-surface-critical);--_on-surface: var(--eds-c-on-surface-critical);--_surface-hover: var(--eds-c-surface-critical--hover);--_on-surface-hover: var(--eds-c-on-surface-critical--hover);--_surface-active: var(--eds-c-surface-critical--pressed);--_on-surface-active: var(--eds-c-on-surface-critical--pressed)}.eui-21 :host.eds-button.eds-button--type-primary:disabled,.eui-21 :host.eds-button.eds-button--type-primary.disabled{--_surface: var(--eds-c-surface-disabled);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-disabled);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-disabled);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button.eds-button--type-secondary{--_border-width: var(--eds-bw-xs);--_surface: transparent}.eui-21 :host.eds-button.eds-button--type-secondary.eds-button--primary{--_border-color: var(--eds-c-border-primary);--_on-surface: var(--eds-c-foreground-primary);--_surface-hover: var(--eds-c-surface-primary-subtle);--_on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_surface-active: var(--eds-c-surface-primary-subtle);--_on-surface-active: var(--eds-c-on-surface-primary-subtle)}.eui-21 :host.eds-button.eds-button--type-secondary.eds-button--neutral{--_border-color: var(--eds-c-border-neutral);--_on-surface: var(--eds-c-foreground-neutral);--_surface-hover: var(--eds-c-surface-neutral-subtle);--_on-surface-hover: var(--eds-c-on-surface-neutral-subtle);--_surface-active: var(--eds-c-surface-neutral-subtle);--_on-surface-active: var(--eds-c-on-surface-neutral-subtle)}.eui-21 :host.eds-button.eds-button--type-secondary.eds-button--highlight{--_border-color: var(--eds-c-border-highlight);--_on-surface: var(--eds-c-foreground-highlight);--_surface-hover: var(--eds-c-surface-highlight-subtler);--_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);--_surface-active: var(--eds-c-surface-highlight-subtler);--_on-surface-active: var(--eds-c-on-surface-highlight-subtler)}.eui-21 :host.eds-button.eds-button--type-secondary.eds-button--critical{--_border-color: var(--eds-c-border-critical);--_on-surface: var(--eds-c-foreground-critical);--_surface-hover: var(--eds-c-surface-critical-subtler);--_on-surface-hover: var(--eds-c-on-surface-critical-subtler);--_surface-active: var(--eds-c-surface-critical-subtler);--_on-surface-active: var(--eds-c-on-surface-critical-subtler)}.eui-21 :host.eds-button.eds-button--type-secondary:disabled,.eui-21 :host.eds-button.eds-button--type-secondary.disabled{--_border-width: var(--eds-bw-xs);--_border-color: var(--eds-c-border-disabled);--_surface: var(--eds-c-surface-elevation);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-elevation);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-elevation);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button.eds-button--type-tertiary{--_border-width: var(--eds-bw-none);--_surface: transparent}.eui-21 :host.eds-button.eds-button--type-tertiary.eds-button--primary{--_on-surface: var(--eds-c-foreground-primary);--_surface-hover: var(--eds-c-surface-primary-subtle);--_on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_surface-active: var(--eds-c-surface-primary-subtle);--_on-surface-active: var(--eds-c-on-surface-primary-subtle)}.eui-21 :host.eds-button.eds-button--type-tertiary.eds-button--neutral{--_on-surface: var(--eds-c-foreground-neutral);--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-neutral-subtle));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-neutral-subtle));--_surface-active: var(--eds-c-surface-neutral-subtle);--_on-surface-active: var(--eds-c-on-surface-neutral-subtle)}.eui-21 :host.eds-button.eds-button--type-tertiary.eds-button--highlight{--_on-surface: var(--eds-c-foreground-highlight);--_surface-hover: var(--eds-c-surface-highlight-subtler);--_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);--_surface-active: var(--eds-c-surface-highlight-subtler);--_on-surface-active: var(--eds-c-on-surface-highlight-subtler)}.eui-21 :host.eds-button.eds-button--type-tertiary.eds-button--critical{--_on-surface: var(--eds-c-foreground-critical);--_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-critical-subtler));--_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-critical-subtler));--_surface-active: var(--eds-c-surface-critical-subtler);--_on-surface-active: var(--eds-c-on-surface-critical-subtler)}.eui-21 :host.eds-button.eds-button--type-tertiary:disabled,.eui-21 :host.eds-button.eds-button--type-tertiary.disabled{--_surface: var(--eds-c-surface-elevation);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-elevation);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-elevation);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button.eds-button--size-m{--_font-size: var(--eds-f-s-m);--_padding: 0 var(--eds-sp-xs);--_size: var(--eds-sp-5xl);--_icon-size: var(--eds-is-m)}.eui-21 :host.eds-button.eds-button--size-s{--_font-size: var(--eds-f-s-s);--_padding: 0 var(--eds-sp-2xs);--_size: var(--eds-sp-3xl);--_icon-size: var(--eds-is-s)}.eui-21 :host.eds-button.eds-button--size-l{--_font-size: var(--eds-f-s-l);--_padding: 0 var(--eds-sp-s);--_size: var(--eds-sp-8xl);--_icon-size: var(--eds-is-m)}.eui-21 :host.eds-button{align-items:center;background-image:none;border-radius:var(--eds-br-s);box-sizing:border-box;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;outline:none;text-transform:none;transition:none;vertical-align:middle;white-space:nowrap;border-style:solid}.eui-21 :host.eds-button:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-xs)!important}.eui-21 :host.eds-button .eds-button__container{align-items:center;display:inline-flex;position:relative;gap:var(--eds-sp-2xs);justify-content:center;width:100%}.eui-21 :host.eds-button{background-color:var(--_surface);color:var(--_on-surface);border-width:var(--_border-width);border-color:var(--_border-color);font-size:var(--_font-size);min-height:var(--_size);min-width:var(--_size);padding:var(--_padding)}.eui-21 :host.eds-button:hover{background-color:var(--_surface-hover);color:var(--_on-surface-hover)}.eui-21 :host.eds-button:active{background-color:var(--_surface-active);color:var(--_on-surface-active)}.eui-21 :host.eds-button.eds-button--rounded{border-radius:var(--eds-br-full)}.eui-21 :host.eds-button.eds-button--rounded:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-full)!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
100
100
|
}
|
|
101
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
101
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsButton, decorators: [{
|
|
102
102
|
type: Component,
|
|
103
103
|
args: [{ selector: 'button[edsButton]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
104
104
|
'[class]': 'hostClasses()',
|