npm - @eui/ecl - Versions diffs - 21.0.0-alpha.37 → 21.0.0-alpha.39 - Mend

@eui/ecl 21.0.0-alpha.37 → 21.0.0-alpha.39

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.

Files changed (184) hide show

package/fesm2022/eui-ecl-components-ecl-select.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"eui-ecl-components-ecl-select.mjs","sources":["../../components/ecl-select/ecl-select-container.component.ts","../../components/ecl-select/ecl-select-container.component.html","../../components/ecl-select/ecl-select.directive.ts","../../components/ecl-select/ecl-select.module.ts","../../components/ecl-select/index.ts","../../components/ecl-select/eui-ecl-components-ecl-select.ts"],"sourcesContent":["import { Component, HostBinding, Input, booleanAttribute, inject } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclThemeService } from '@eui/ecl/core';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { TranslateModule } from '@ngx-translate/core';\n\n/*\n Container component, which wraps the <select> component. Ataches custom select button with dropdown arrow.\n /\n@Component({\n selector: 'ecl-select-container',\n templateUrl: './ecl-select-container.component.html',\n imports: [\n ...EUI_ECL_ICON,\n TranslateModule,\n ...EUI_ECL_BUTTON,\n ],\n})\nexport class EclSelectContainerComponent extends ECLBaseDirective {\n /\n Size/length of the field and the dropdown, can be 's', 'm' or 'l'. Default is 'm'.\n * Same as the size of the main host element.\n /\n @Input() eclSize = 'm';\n @Input({ transform: booleanAttribute }) disabled: boolean;\n @Input({ transform: booleanAttribute }) isInvalid: boolean;\n /\n Custom label for the arrow-down button. Set from the main host element.\n /\n @Input() toggleLabel: string \| undefined = undefined;\n\n /\n Adds specific classes for the container.\n /\n @HostBinding('class')\n get cssClasses(): string {\n return [\n super.getCssClasses('ecl-select__container'),\n this.eclSize ? `ecl-select__container--${this.eclSize}` : '',\n this.disabled ? 'ecl-select__container--disabled' : '',\n this.isInvalid ? 'ecl-select__container--invalid' : '',\n ]\n .join(' ')\n .trim();\n }\n\n private ICON_SIZE_EC = 'xs';\n private ICON_SIZE_EU = 's'\n private eclThemeService = inject(EclThemeService);\n\n /\n Returns different icon sizes, depending if it's EU (s) or EC (xs) theme.\n /\n get iconSize(): string {\n if (this.eclThemeService.isECTheme()) {\n return this.ICON_SIZE_EC;\n } else {\n return this.ICON_SIZE_EU;\n }\n }\n}\n","<div class=\"ecl-select__icon\">\n <button eclButton variant=\"ghost\" tabindex=\"-1\" isIconOnly>\n <span eclButtonLabel>{{ toggleLabel \|\| 'ecl.multiselect.TOGGLE.DROPDOWN' \| translate }}</span>\n <ecl-icon icon=\"corner-arrow\" [size]=\"iconSize\" transform=\"rotate-180\"></ecl-icon>\n </button>\n</div>\n","import { AfterContentInit, Directive, DoCheck, ElementRef, HostBinding, Input, OnInit, Renderer2, ViewContainerRef, booleanAttribute, inject } from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclSelectContainerComponent } from './ecl-select-container.component';\n\n/\n The default HTML <select> component, with some added styling and formatting according to ECL standards.\n /\n@Directive({\n selector: 'select[eclSelect]',\n})\nexport class EclSelectDirective extends ECLBaseDirective implements OnInit, DoCheck, AfterContentInit{\n @Input({ transform: booleanAttribute }) @HostBinding('attr.disabled') disabled = false;\n @Input({ transform: booleanAttribute }) isInvalid = false;\n /\n Custom label for the arrow-down button.\n /\n @Input() toggleLabel: string \| undefined = undefined;\n /\n Size/length of the field and the dropdown, can be 's', 'm' or 'l'. Default is 'm'.\n /\n @Input() eclSize: 's' \| 'm' \| 'l' = 'm';\n\n private containerComponent: EclSelectContainerComponent;\n private readonly OPTGROUP_TAG_NAME = 'OPTGROUP';\n\n /\n Applies the 'ecl-select' class to the main <select> component\n /\n @HostBinding('class')\n get cssClasses(): string {\n return [super.getCssClasses('ecl-select')].join(' ').trim();\n }\n\n @HostBinding('attr.disabled')\n get isDisabled(): boolean {\n if (this.ngControl) {\n return this.ngControl.disabled \|\| null;\n } else {\n return this.disabled \|\| null;\n }\n }\n\n /\n Adds 'ecl-select--invalid' class to the host element, in case the component has invalid status.\n /\n @HostBinding('class.ecl-select--invalid')\n get isInvalidState(): boolean {\n if (this.ngControl) {\n return this.ngControl.status === 'INVALID' && this.ngControl.touched;\n } else {\n return this.isInvalid;\n }\n }\n private ngControl = inject(NgControl, { optional: true, self: true });\n private el = inject(ElementRef);\n private viewContainerRef = inject(ViewContainerRef);\n private renderer = inject(Renderer2);\n\n /\n Creates container component for the <select> and assigns default values to it's parameters.\n /\n ngOnInit(): void {\n const containerComponentRef = this.viewContainerRef.createComponent(EclSelectContainerComponent);\n\n this.containerComponent = containerComponentRef.instance;\n this.containerComponent.eclSize = this.eclSize;\n this.containerComponent.disabled = this.isDisabled;\n this.containerComponent.toggleLabel = this.toggleLabel;\n this.containerComponent.isInvalid = this.isInvalidState;\n\n containerComponentRef.location.nativeElement.prepend(this.el.nativeElement);\n }\n\n /\n Handles the group options.\n /\n ngAfterContentInit(): void {\n const childrenElements: Element[] = Array.from(this.el.nativeElement.children);\n this.handleOptgroup(childrenElements);\n }\n\n ngDoCheck(): void {\n this.containerComponent.eclSize = this.eclSize;\n this.containerComponent.disabled = this.isDisabled;\n this.containerComponent.isInvalid = this.isInvalidState;\n }\n\n /\n Sets custom 'aria-label' attribute for parent of the option group and for the children.\n /\n private handleOptgroup(childrenElements: Element[]): void {\n childrenElements.filter(item => {\n return item.tagName === this.OPTGROUP_TAG_NAME && item.getAttribute('label') !== null;\n }).forEach(optGroup => {\n const optGroupLabel = optGroup.getAttribute('label');\n this.renderer.setAttribute(optGroup, 'aria-label', optGroupLabel);\n Array.from(optGroup.children).forEach(option => {\n const optionLabel = option.getAttribute('label') \|\| option.textContent;\n if (optionLabel) {\n this.renderer.setAttribute(option, 'aria-label',`${optionLabel} - ${optGroupLabel}`);\n }\n });\n });\n }\n}\n","import { NgModule } from '@angular/core';\nimport { EclSelectDirective } from './ecl-select.directive';\nimport { EclSelectContainerComponent } from './ecl-select-container.component';\n\nconst COMPONENTS = [\n EclSelectDirective,\n EclSelectContainerComponent,\n];\n\n/\n @description\n * Module that provides the EclSelect component and its dependencies.\n \n @deprecated Use {@link EUI_ECL_SELECT} instead.\n /\n@NgModule({\n imports: [...COMPONENTS],\n exports: [...COMPONENTS],\n})\nexport class EclSelectModule {}\n","import { EclSelectDirective } from './ecl-select.directive';\nimport { EclSelectContainerComponent } from './ecl-select-container.component';\n\nexport from './ecl-select.module';\nexport * from './ecl-select.directive';\nexport * from './ecl-select-container.component';\n\nexport const EUI_ECL_SELECT = [\n EclSelectDirective,\n EclSelectContainerComponent,\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-ecl-components-ecl-select.mjs","sources":["../../components/ecl-select/ecl-select-container.component.ts","../../components/ecl-select/ecl-select-container.component.html","../../components/ecl-select/ecl-select.directive.ts","../../components/ecl-select/ecl-select.module.ts","../../components/ecl-select/index.ts","../../components/ecl-select/eui-ecl-components-ecl-select.ts"],"sourcesContent":["import { Component, HostBinding, Input, booleanAttribute, inject } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclThemeService } from '@eui/ecl/core';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { TranslateModule } from '@ngx-translate/core';\n\n/*\n Container component, which wraps the <select> component. Ataches custom select button with dropdown arrow.\n /\n@Component({\n selector: 'ecl-select-container',\n templateUrl: './ecl-select-container.component.html',\n imports: [\n ...EUI_ECL_ICON,\n TranslateModule,\n ...EUI_ECL_BUTTON,\n ],\n})\nexport class EclSelectContainerComponent extends ECLBaseDirective {\n /\n Size/length of the field and the dropdown, can be 's', 'm' or 'l'. Default is 'm'.\n * Same as the size of the main host element.\n /\n @Input() eclSize = 'm';\n @Input({ transform: booleanAttribute }) disabled: boolean;\n @Input({ transform: booleanAttribute }) isInvalid: boolean;\n /\n Custom label for the arrow-down button. Set from the main host element.\n /\n @Input() toggleLabel: string \| undefined = undefined;\n\n /\n Adds specific classes for the container.\n /\n @HostBinding('class')\n get cssClasses(): string {\n return [\n super.getCssClasses('ecl-select__container'),\n this.eclSize ? `ecl-select__container--${this.eclSize}` : '',\n this.disabled ? 'ecl-select__container--disabled' : '',\n this.isInvalid ? 'ecl-select__container--invalid' : '',\n ]\n .join(' ')\n .trim();\n }\n\n private ICON_SIZE_EC = 'xs';\n private ICON_SIZE_EU = 's'\n private eclThemeService = inject(EclThemeService);\n\n /\n Returns different icon sizes, depending if it's EU (s) or EC (xs) theme.\n /\n get iconSize(): string {\n if (this.eclThemeService.isECTheme()) {\n return this.ICON_SIZE_EC;\n } else {\n return this.ICON_SIZE_EU;\n }\n }\n}\n","<div class=\"ecl-select__icon\">\n <button eclButton variant=\"tertiary\" tabindex=\"-1\" isIconOnly>\n <span eclButtonLabel>{{ toggleLabel \|\| 'ecl.multiselect.TOGGLE.DROPDOWN' \| translate }}</span>\n <ecl-icon icon=\"corner-arrow\" [size]=\"iconSize\" transform=\"rotate-180\"></ecl-icon>\n </button>\n</div>\n","import { AfterContentInit, Directive, DoCheck, ElementRef, HostBinding, Input, OnInit, Renderer2, ViewContainerRef, booleanAttribute, inject } from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclSelectContainerComponent } from './ecl-select-container.component';\n\n/\n The default HTML <select> component, with some added styling and formatting according to ECL standards.\n /\n@Directive({\n selector: 'select[eclSelect]',\n})\nexport class EclSelectDirective extends ECLBaseDirective implements OnInit, DoCheck, AfterContentInit{\n @Input({ transform: booleanAttribute }) @HostBinding('attr.disabled') disabled = false;\n @Input({ transform: booleanAttribute }) isInvalid = false;\n /\n Custom label for the arrow-down button.\n /\n @Input() toggleLabel: string \| undefined = undefined;\n /\n Size/length of the field and the dropdown, can be 's', 'm' or 'l'. Default is 'm'.\n /\n @Input() eclSize: 's' \| 'm' \| 'l' = 'm';\n\n private containerComponent: EclSelectContainerComponent;\n private readonly OPTGROUP_TAG_NAME = 'OPTGROUP';\n\n /\n Applies the 'ecl-select' class to the main <select> component\n /\n @HostBinding('class')\n get cssClasses(): string {\n return [super.getCssClasses('ecl-select')].join(' ').trim();\n }\n\n @HostBinding('attr.disabled')\n get isDisabled(): boolean {\n if (this.ngControl) {\n return this.ngControl.disabled \|\| null;\n } else {\n return this.disabled \|\| null;\n }\n }\n\n /\n Adds 'ecl-select--invalid' class to the host element, in case the component has invalid status.\n /\n @HostBinding('class.ecl-select--invalid')\n get isInvalidState(): boolean {\n if (this.ngControl) {\n return this.ngControl.status === 'INVALID' && this.ngControl.touched;\n } else {\n return this.isInvalid;\n }\n }\n private ngControl = inject(NgControl, { optional: true, self: true });\n private el = inject(ElementRef);\n private viewContainerRef = inject(ViewContainerRef);\n private renderer = inject(Renderer2);\n\n /\n Creates container component for the <select> and assigns default values to it's parameters.\n /\n ngOnInit(): void {\n const containerComponentRef = this.viewContainerRef.createComponent(EclSelectContainerComponent);\n\n this.containerComponent = containerComponentRef.instance;\n this.containerComponent.eclSize = this.eclSize;\n this.containerComponent.disabled = this.isDisabled;\n this.containerComponent.toggleLabel = this.toggleLabel;\n this.containerComponent.isInvalid = this.isInvalidState;\n\n containerComponentRef.location.nativeElement.prepend(this.el.nativeElement);\n }\n\n /\n Handles the group options.\n /\n ngAfterContentInit(): void {\n const childrenElements: Element[] = Array.from(this.el.nativeElement.children);\n this.handleOptgroup(childrenElements);\n }\n\n ngDoCheck(): void {\n this.containerComponent.eclSize = this.eclSize;\n this.containerComponent.disabled = this.isDisabled;\n this.containerComponent.isInvalid = this.isInvalidState;\n }\n\n /\n Sets custom 'aria-label' attribute for parent of the option group and for the children.\n /\n private handleOptgroup(childrenElements: Element[]): void {\n childrenElements.filter(item => {\n return item.tagName === this.OPTGROUP_TAG_NAME && item.getAttribute('label') !== null;\n }).forEach(optGroup => {\n const optGroupLabel = optGroup.getAttribute('label');\n this.renderer.setAttribute(optGroup, 'aria-label', optGroupLabel);\n Array.from(optGroup.children).forEach(option => {\n const optionLabel = option.getAttribute('label') \|\| option.textContent;\n if (optionLabel) {\n this.renderer.setAttribute(option, 'aria-label',`${optionLabel} - ${optGroupLabel}`);\n }\n });\n });\n }\n}\n","import { NgModule } from '@angular/core';\nimport { EclSelectDirective } from './ecl-select.directive';\nimport { EclSelectContainerComponent } from './ecl-select-container.component';\n\nconst COMPONENTS = [\n EclSelectDirective,\n EclSelectContainerComponent,\n];\n\n/\n @description\n * Module that provides the EclSelect component and its dependencies.\n \n @deprecated Use {@link EUI_ECL_SELECT} instead.\n /\n@NgModule({\n imports: [...COMPONENTS],\n exports: [...COMPONENTS],\n})\nexport class EclSelectModule {}\n","import { EclSelectDirective } from './ecl-select.directive';\nimport { EclSelectContainerComponent } from './ecl-select-container.component';\n\nexport from './ecl-select.module';\nexport * from './ecl-select.directive';\nexport * from './ecl-select-container.component';\n\nexport const EUI_ECL_SELECT = [\n EclSelectDirective,\n EclSelectContainerComponent,\n] as const;\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/eui-ecl-components-ecl-site-header.mjs CHANGED Viewed

@@ -243,7 +243,7 @@ class EclSiteHeaderCustomActionComponent extends ECLBaseDirective {
         this.onCustomActionOverlayClose();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.0", ngImport: i0, type: EclSiteHeaderCustomActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-rc.0", type: EclSiteHeaderCustomActionComponent, isStandalone: true, selector: "div[eclSiteHeaderCustomAction]", host: { listeners: { "eclClickOutside": "onClickOutsideHandler()", "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "class": "this.class" } }, queries: [{ propertyName: "title", first: true, predicate: EclSiteHeaderCustomActionTitleDirective, descendants: true }, { propertyName: "eclSiteHeaderCustomActionLink", first: true, predicate: EclSiteHeaderCustomActionLinkDirective, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "<ng-content select=\"[eclSiteHeaderCustomActionLink]\"></ng-content>\n@if (isOverlayExpanded) {\n    <div class=\"ecl-site-header__custom-action-overlay\" id=\"custom-action-overlay\" role=\"dialog\" [attr.aria-labelledby]=\"titleId\" cdkTrapFocus cdkTrapFocusAutoCapture>\n        <div class=\"ecl-site-header__custom-action-header\">\n            <ng-content select=\"[eclSiteHeaderCustomActionTitle]\"></ng-content>\n            <button eclButton variant=\"tertiary\" isIconOnly class=\"ecl-site-header__custom-action-close\" (click)=\"onCustomActionOverlayClose()\">\n                <span eclButtonLabel>Close</span>\n                <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n            </button>\n        </div>\n        <ng-content select=\"[eclSiteHeaderCustomActionContent]\"></ng-content>\n    </div>\n}\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i3.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i3$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-rc.0", type: EclSiteHeaderCustomActionComponent, isStandalone: true, selector: "div[eclSiteHeaderCustomAction]", host: { listeners: { "eclClickOutside": "onClickOutsideHandler()", "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "class": "this.class" } }, queries: [{ propertyName: "title", first: true, predicate: EclSiteHeaderCustomActionTitleDirective, descendants: true }, { propertyName: "eclSiteHeaderCustomActionLink", first: true, predicate: EclSiteHeaderCustomActionLinkDirective, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "<ng-content select=\"[eclSiteHeaderCustomActionLink]\"></ng-content>\n@if (isOverlayExpanded) {\n    <div class=\"ecl-site-header__custom-action-overlay\" id=\"custom-action-overlay\" role=\"dialog\" [attr.aria-labelledby]=\"titleId\" cdkTrapFocus cdkTrapFocusAutoCapture>\n        <div class=\"ecl-site-header__custom-action-header\">\n            <ng-content select=\"[eclSiteHeaderCustomActionTitle]\"></ng-content>\n            <button eclButton variant=\"tertiary\" isIconOnly class=\"ecl-site-header__custom-action-close\" (click)=\"onCustomActionOverlayClose()\">\n                <span eclButtonLabel>Close</span>\n                <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n            </button>\n        </div>\n        <ng-content select=\"[eclSiteHeaderCustomActionContent]\"></ng-content>\n    </div>\n}\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "directive", type: i3.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i3$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.0", ngImport: i0, type: EclSiteHeaderCustomActionComponent, decorators: [{
             type: Component,
@@ -494,11 +494,11 @@ class EclSiteHeaderLanguagePopoverComponent extends ECLBaseDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.0", ngImport: i0, type: EclSiteHeaderLanguagePopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-rc.0", type: EclSiteHeaderLanguagePopoverComponent, isStandalone: true, selector: "ecl-site-header-language-popover", inputs: { languageCode: "languageCode", euLanguages: "euLanguages", nonEuLanguages: "nonEuLanguages", euColumnsCount: "euColumnsCount", nonEuColumnsCount: "nonEuColumnsCount", isHidden: "isHidden", isPushRight: "isPushRight", isPushLeft: "isPushLeft", isStack: "isStack", isFull: "isFull", rightPosition: "rightPosition", leftPosition: "leftPosition", languageArrowPosition: "languageArrowPosition" }, outputs: { languageClosed: "languageClosed", languageSelected: "languageSelected" }, host: { listeners: { "window:resize": "onWindowResize()" }, properties: { "style.right.px": "this.rightPosition", "style.left.px": "this.leftPosition", "style.--ecl-language-arrow-position": "this.languageArrowPosition", "attr.role": "this.role", "attr.aria-labelledby": "this.labelledBy", "style.display": "this.display", "class": "this.cssClasses", "attr.aria-modal": "this.isModal", "attr.hidden": "this.isDropdownHidden" } }, viewQueries: [{ propertyName: "languageContent", first: true, predicate: ["languageContent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-site-header__language-header\">\n    <div class=\"ecl-site-header__language-title\">\n        {{ 'ecl.language-list.SELECT-LANGUAGE' | translate }}\n    </div>\n    <button eclButton variant=\"tertiary\" isIconOnly class=\"ecl-site-header__language-close\" (click)=\"onCloseClick()\">\n        <span class=\"ecl-button__container\">\n            <span class=\"ecl-button__label\">\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            @if (eclThemeService.isECTheme()) {\n            <ecl-icon icon=\"close\" size=\"m\"> </ecl-icon>\n            } @else {\n            <ecl-icon icon=\"close\" size=\"s\"> </ecl-icon>\n            }\n        </span>\n    </button>\n</div>\n\n<div #languageContent class=\"ecl-site-header__language-content\" [style.max-height.px]=\"languageContentMaxHeight\"\n    [class.ecl-site-header__language-content--stack]=\"isStack\">\n    @if (euLanguages.length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ euColumnsCount }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\" translate=\"no\">\n                @for (item of euLanguages; track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            variant=\"standalone\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n    @if (nonEuLanguages.length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ nonEuColumnsCount }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.NON-EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\" translate=\"no\">\n                @for (item of nonEuLanguages; track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            variant=\"standalone\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "component", type: i3$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: i4.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-rc.0", type: EclSiteHeaderLanguagePopoverComponent, isStandalone: true, selector: "ecl-site-header-language-popover", inputs: { languageCode: "languageCode", euLanguages: "euLanguages", nonEuLanguages: "nonEuLanguages", euColumnsCount: "euColumnsCount", nonEuColumnsCount: "nonEuColumnsCount", isHidden: "isHidden", isPushRight: "isPushRight", isPushLeft: "isPushLeft", isStack: "isStack", isFull: "isFull", rightPosition: "rightPosition", leftPosition: "leftPosition", languageArrowPosition: "languageArrowPosition" }, outputs: { languageClosed: "languageClosed", languageSelected: "languageSelected" }, host: { listeners: { "window:resize": "onWindowResize()" }, properties: { "style.right.px": "this.rightPosition", "style.left.px": "this.leftPosition", "style.--ecl-language-arrow-position": "this.languageArrowPosition", "attr.role": "this.role", "attr.aria-labelledby": "this.labelledBy", "style.display": "this.display", "class": "this.cssClasses", "attr.aria-modal": "this.isModal", "attr.hidden": "this.isDropdownHidden" } }, viewQueries: [{ propertyName: "languageContent", first: true, predicate: ["languageContent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-site-header__language-header\">\n    <div class=\"ecl-site-header__language-title\">\n        {{ 'ecl.language-list.SELECT-LANGUAGE' | translate }}\n    </div>\n    <button eclButton variant=\"tertiary\" isIconOnly class=\"ecl-site-header__language-close\" (click)=\"onCloseClick()\">\n        <span class=\"ecl-button__container\">\n            <span class=\"ecl-button__label\">\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </span>\n    </button>\n</div>\n\n<div #languageContent class=\"ecl-site-header__language-content\" [style.max-height.px]=\"languageContentMaxHeight\"\n    [class.ecl-site-header__language-content--stack]=\"isStack\">\n    @if (euLanguages.length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ euColumnsCount }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\" translate=\"no\">\n                @for (item of euLanguages; track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            variant=\"standalone\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n    @if (nonEuLanguages.length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ nonEuColumnsCount }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.NON-EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\" translate=\"no\">\n                @for (item of nonEuLanguages; track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            variant=\"standalone\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "component", type: i3$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: i4.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.0", ngImport: i0, type: EclSiteHeaderLanguagePopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-site-header-language-popover', imports: [TranslateModule, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK], template: "<div class=\"ecl-site-header__language-header\">\n    <div class=\"ecl-site-header__language-title\">\n        {{ 'ecl.language-list.SELECT-LANGUAGE' | translate }}\n    </div>\n    <button eclButton variant=\"tertiary\" isIconOnly class=\"ecl-site-header__language-close\" (click)=\"onCloseClick()\">\n        <span class=\"ecl-button__container\">\n            <span class=\"ecl-button__label\">\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            @if (eclThemeService.isECTheme()) {\n            <ecl-icon icon=\"close\" size=\"m\"> </ecl-icon>\n            } @else {\n            <ecl-icon icon=\"close\" size=\"s\"> </ecl-icon>\n            }\n        </span>\n    </button>\n</div>\n\n<div #languageContent class=\"ecl-site-header__language-content\" [style.max-height.px]=\"languageContentMaxHeight\"\n    [class.ecl-site-header__language-content--stack]=\"isStack\">\n    @if (euLanguages.length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ euColumnsCount }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\" translate=\"no\">\n                @for (item of euLanguages; track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            variant=\"standalone\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n    @if (nonEuLanguages.length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ nonEuColumnsCount }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.NON-EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\" translate=\"no\">\n                @for (item of nonEuLanguages; track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            variant=\"standalone\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n</div>\n" }]
+            args: [{ selector: 'ecl-site-header-language-popover', imports: [TranslateModule, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK], template: "<div class=\"ecl-site-header__language-header\">\n    <div class=\"ecl-site-header__language-title\">\n        {{ 'ecl.language-list.SELECT-LANGUAGE' | translate }}\n    </div>\n    <button eclButton variant=\"tertiary\" isIconOnly class=\"ecl-site-header__language-close\" (click)=\"onCloseClick()\">\n        <span class=\"ecl-button__container\">\n            <span class=\"ecl-button__label\">\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </span>\n    </button>\n</div>\n\n<div #languageContent class=\"ecl-site-header__language-content\" [style.max-height.px]=\"languageContentMaxHeight\"\n    [class.ecl-site-header__language-content--stack]=\"isStack\">\n    @if (euLanguages.length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ euColumnsCount }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\" translate=\"no\">\n                @for (item of euLanguages; track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            variant=\"standalone\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n    @if (nonEuLanguages.length) {\n        <div class=\"ecl-site-header__language-category ecl-site-header__language-category--{{ nonEuColumnsCount }}-col\">\n            <div class=\"ecl-site-header__language-category-title\">\n                {{ 'ecl.language-list.NON-EU-LANGUAGES' | translate }}\n            </div>\n            <ul class=\"ecl-site-header__language-list\" translate=\"no\">\n                @for (item of nonEuLanguages; track item.code) {\n                    <li class=\"ecl-site-header__language-item\">\n                        <a\n                            eclLink\n                            href=\"#\"\n                            [lang]=\"item.code\"\n                            [hreflang]=\"item.code\"\n                            variant=\"standalone\"\n                            class=\"ecl-site-header__language-link\"\n                            [class.ecl-site-header__language-link--active]=\"item.code === languageCode\"\n                            (click)=\"onLanguageClick(item, $event)\">\n                            <span class=\"ecl-site-header__language-link-code\">{{ item.code }}</span>\n                            <span class=\"ecl-site-header__language-link-label\">{{ item.label }}</span>\n                        </a>\n                    </li>\n                }\n            </ul>\n        </div>\n    }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { languageContent: [{
                 type: ViewChild,
                 args: ['languageContent']
@@ -779,7 +779,7 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.0", ngImport: i0, type: EclSiteHeaderLanguageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-rc.0", type: EclSiteHeaderLanguageComponent, isStandalone: true, selector: "ecl-site-header-language", outputs: { languageClick: "languageClick", languageSelected: "languageSelected" }, host: { listeners: { "eclClickOutside": "onClickOutside()", "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "languagePopover", first: true, predicate: EclSiteHeaderLanguagePopoverComponent, descendants: true }, { propertyName: "languageLinkElement", first: true, predicate: ["languageLink"], descendants: true, read: ElementRef }], usesInheritance: true, hostDirectives: [{ directive: i1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "<a\n    href=\"#\"\n    #languageLink\n    class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__language-selector\"\n    aria-controls=\"language-list-overlay\"\n    role=\"button\"\n    [attr.aria-label]=\"'ecl.language-list.SELECT-LANGUAGE-EXT' | translate: { currentLang: getLanguageLabel() }\"\n    [attr.aria-expanded]=\"isLanguagesDropdownVisible\"\n    (click)=\"onLanguageClick($event)\"\n    (keydown.space)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header__language-icon\">\n        <ecl-icon icon=\"global\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n    </span>\n    {{ languageCode | uppercase }}\n</a>\n@if(hasLanguageCodes() && isLanguagesDropdownVisible) {\n<ecl-site-header-language-popover\n    #languagePopover\n    cdkTrapFocus\n    cdkTrapFocusAutoCapture\n    id=\"language-list-overlay\"\n    [languageCode]=\"languageCode\"\n    [euLanguages]=\"euLanguages\"\n    [nonEuLanguages]=\"nonEuLanguages\"\n    [euColumnsCount]=\"euColumnsCount\"\n    [nonEuColumnsCount]=\"nonEuColumnsCount\"\n    [isStack]=\"isStack\"\n    [isPushRight]=\"isPushRight\"\n    [isPushLeft] = \"isPushLeft\"\n    [isFull]=\"isFull\"\n    [rightPosition]=\"rightPosition\"\n    [leftPosition]=\"leftPosition\"\n    [languageArrowPosition]=\"languageArrowPosition\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (languageClosed)=\"onLanguageClosed($event)\">\n</ecl-site-header-language-popover>\n}", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: i3$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: EclSiteHeaderLanguagePopoverComponent, selector: "ecl-site-header-language-popover", inputs: ["languageCode", "euLanguages", "nonEuLanguages", "euColumnsCount", "nonEuColumnsCount", "isHidden", "isPushRight", "isPushLeft", "isStack", "isFull", "rightPosition", "leftPosition", "languageArrowPosition"], outputs: ["languageClosed", "languageSelected"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-rc.0", type: EclSiteHeaderLanguageComponent, isStandalone: true, selector: "ecl-site-header-language", outputs: { languageClick: "languageClick", languageSelected: "languageSelected" }, host: { listeners: { "eclClickOutside": "onClickOutside()", "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "languagePopover", first: true, predicate: EclSiteHeaderLanguagePopoverComponent, descendants: true }, { propertyName: "languageLinkElement", first: true, predicate: ["languageLink"], descendants: true, read: ElementRef }], usesInheritance: true, hostDirectives: [{ directive: i1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "<a\n    href=\"#\"\n    #languageLink\n    class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__language-selector\"\n    aria-controls=\"language-list-overlay\"\n    role=\"button\"\n    [attr.aria-label]=\"'ecl.language-list.SELECT-LANGUAGE-EXT' | translate: { currentLang: getLanguageLabel() }\"\n    [attr.aria-expanded]=\"isLanguagesDropdownVisible\"\n    (click)=\"onLanguageClick($event)\"\n    (keydown.space)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header__language-icon\">\n        <ecl-icon icon=\"global\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n    </span>\n    {{ languageCode | uppercase }}\n</a>\n@if(hasLanguageCodes() && isLanguagesDropdownVisible) {\n<ecl-site-header-language-popover\n    #languagePopover\n    cdkTrapFocus\n    cdkTrapFocusAutoCapture\n    id=\"language-list-overlay\"\n    [languageCode]=\"languageCode\"\n    [euLanguages]=\"euLanguages\"\n    [nonEuLanguages]=\"nonEuLanguages\"\n    [euColumnsCount]=\"euColumnsCount\"\n    [nonEuColumnsCount]=\"nonEuColumnsCount\"\n    [isStack]=\"isStack\"\n    [isPushRight]=\"isPushRight\"\n    [isPushLeft] = \"isPushLeft\"\n    [isFull]=\"isFull\"\n    [rightPosition]=\"rightPosition\"\n    [leftPosition]=\"leftPosition\"\n    [languageArrowPosition]=\"languageArrowPosition\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (languageClosed)=\"onLanguageClosed($event)\">\n</ecl-site-header-language-popover>\n}", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: i3$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: EclSiteHeaderLanguagePopoverComponent, selector: "ecl-site-header-language-popover", inputs: ["languageCode", "euLanguages", "nonEuLanguages", "euColumnsCount", "nonEuColumnsCount", "isHidden", "isPushRight", "isPushLeft", "isStack", "isFull", "rightPosition", "leftPosition", "languageArrowPosition"], outputs: ["languageClosed", "languageSelected"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.0", ngImport: i0, type: EclSiteHeaderLanguageComponent, decorators: [{
             type: Component,
@@ -788,7 +788,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.0", ng
                             directive: ECLClickOutsideDirective,
                             outputs: ['eclClickOutside'],
                         },
-                    ], template: "<a\n    href=\"#\"\n    #languageLink\n    class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__language-selector\"\n    aria-controls=\"language-list-overlay\"\n    role=\"button\"\n    [attr.aria-label]=\"'ecl.language-list.SELECT-LANGUAGE-EXT' | translate: { currentLang: getLanguageLabel() }\"\n    [attr.aria-expanded]=\"isLanguagesDropdownVisible\"\n    (click)=\"onLanguageClick($event)\"\n    (keydown.space)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header__language-icon\">\n        <ecl-icon icon=\"global\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n    </span>\n    {{ languageCode | uppercase }}\n</a>\n@if(hasLanguageCodes() && isLanguagesDropdownVisible) {\n<ecl-site-header-language-popover\n    #languagePopover\n    cdkTrapFocus\n    cdkTrapFocusAutoCapture\n    id=\"language-list-overlay\"\n    [languageCode]=\"languageCode\"\n    [euLanguages]=\"euLanguages\"\n    [nonEuLanguages]=\"nonEuLanguages\"\n    [euColumnsCount]=\"euColumnsCount\"\n    [nonEuColumnsCount]=\"nonEuColumnsCount\"\n    [isStack]=\"isStack\"\n    [isPushRight]=\"isPushRight\"\n    [isPushLeft] = \"isPushLeft\"\n    [isFull]=\"isFull\"\n    [rightPosition]=\"rightPosition\"\n    [leftPosition]=\"leftPosition\"\n    [languageArrowPosition]=\"languageArrowPosition\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (languageClosed)=\"onLanguageClosed($event)\">\n</ecl-site-header-language-popover>\n}", styles: [":host{display:block}\n"] }]
+                    ], template: "<a\n    href=\"#\"\n    #languageLink\n    class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__language-selector\"\n    aria-controls=\"language-list-overlay\"\n    role=\"button\"\n    [attr.aria-label]=\"'ecl.language-list.SELECT-LANGUAGE-EXT' | translate: { currentLang: getLanguageLabel() }\"\n    [attr.aria-expanded]=\"isLanguagesDropdownVisible\"\n    (click)=\"onLanguageClick($event)\"\n    (keydown.space)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header__language-icon\">\n        <ecl-icon icon=\"global\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n    </span>\n    {{ languageCode | uppercase }}\n</a>\n@if(hasLanguageCodes() && isLanguagesDropdownVisible) {\n<ecl-site-header-language-popover\n    #languagePopover\n    cdkTrapFocus\n    cdkTrapFocusAutoCapture\n    id=\"language-list-overlay\"\n    [languageCode]=\"languageCode\"\n    [euLanguages]=\"euLanguages\"\n    [nonEuLanguages]=\"nonEuLanguages\"\n    [euColumnsCount]=\"euColumnsCount\"\n    [nonEuColumnsCount]=\"nonEuColumnsCount\"\n    [isStack]=\"isStack\"\n    [isPushRight]=\"isPushRight\"\n    [isPushLeft] = \"isPushLeft\"\n    [isFull]=\"isFull\"\n    [rightPosition]=\"rightPosition\"\n    [leftPosition]=\"leftPosition\"\n    [languageArrowPosition]=\"languageArrowPosition\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (languageClosed)=\"onLanguageClosed($event)\">\n</ecl-site-header-language-popover>\n}", styles: [":host{display:block}\n"] }]
         }], propDecorators: { languagePopover: [{
                 type: ViewChild,
                 args: [EclSiteHeaderLanguagePopoverComponent]
@@ -904,7 +904,7 @@ class EclSiteHeaderLoginComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.0", ngImport: i0, type: EclSiteHeaderLoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-rc.0", type: EclSiteHeaderLoginComponent, isStandalone: true, selector: "ecl-site-header-login", inputs: { isLoggedIn: ["isLoggedIn", "isLoggedIn", booleanAttribute] }, outputs: { login: "login", loginBoxToggle: "loginBoxToggle" }, host: { listeners: { "eclClickOutside": "onClickOutsideMegaMenu()" }, properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "loginLinkElement", first: true, predicate: ["loginLink"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: i1.ECLBaseDirective }, { directive: i1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "@if (isLoggedIn) {\n    <a\n        #loginLink\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle\"\n        aria-controls=\"login-box-id\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginBoxToggle($event)\">\n        <ecl-icon icon=\"logged-in\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n    </a>\n    <div\n        id=\"login-box-id\"\n        [style]=\"{'--ecl-login-arrow-position': loginArrowPosition}\"\n        class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n} @else {\n    <a\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: i3$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-rc.0", type: EclSiteHeaderLoginComponent, isStandalone: true, selector: "ecl-site-header-login", inputs: { isLoggedIn: ["isLoggedIn", "isLoggedIn", booleanAttribute] }, outputs: { login: "login", loginBoxToggle: "loginBoxToggle" }, host: { listeners: { "eclClickOutside": "onClickOutsideMegaMenu()" }, properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "loginLinkElement", first: true, predicate: ["loginLink"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: i1.ECLBaseDirective }, { directive: i1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "@if (isLoggedIn) {\n    <a\n        #loginLink\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle\"\n        aria-controls=\"login-box-id\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginBoxToggle($event)\">\n        <ecl-icon icon=\"logged-in\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n    </a>\n    <div\n        id=\"login-box-id\"\n        [style]=\"{'--ecl-login-arrow-position': loginArrowPosition}\"\n        class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n} @else {\n    <a\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: i3$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.0", ngImport: i0, type: EclSiteHeaderLoginComponent, decorators: [{
             type: Component,
@@ -917,7 +917,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.0", ng
                             // eslint-disable-next-line @angular-eslint/no-outputs-metadata-property
                             outputs: ['eclClickOutside'],
                         },
-                    ], template: "@if (isLoggedIn) {\n    <a\n        #loginLink\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle\"\n        aria-controls=\"login-box-id\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginBoxToggle($event)\">\n        <ecl-icon icon=\"logged-in\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n    </a>\n    <div\n        id=\"login-box-id\"\n        [style]=\"{'--ecl-login-arrow-position': loginArrowPosition}\"\n        class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n} @else {\n    <a\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n}\n", styles: [":host{display:block}\n"] }]
+                    ], template: "@if (isLoggedIn) {\n    <a\n        #loginLink\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle\"\n        aria-controls=\"login-box-id\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginBoxToggle($event)\">\n        <ecl-icon icon=\"logged-in\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n    </a>\n    <div\n        id=\"login-box-id\"\n        [style]=\"{'--ecl-login-arrow-position': loginArrowPosition}\"\n        class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n} @else {\n    <a\n        href=\"#\"\n        class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle\"\n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n}\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [], propDecorators: { isLoggedIn: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -1169,11 +1169,11 @@ class EclSiteHeaderSearchComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.0", ngImport: i0, type: EclSiteHeaderSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-rc.0", type: EclSiteHeaderSearchComponent, isStandalone: true, selector: "ecl-site-header-search", inputs: { searchInputText: "searchInputText", searchInputPlaceholder: "searchInputPlaceholder", searchButtonLabel: "searchButtonLabel" }, outputs: { search: "search", searchToggle: "searchToggle" }, host: { properties: { "class": "this.class", "attr.role": "this.role" } }, providers: [ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR], viewQueries: [{ propertyName: "searchLinkElement", first: true, predicate: ["searchLink"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<a\n    #searchLink\n    href=\"#\"\n    class=\"ecl-button ecl-button--tertiary ecl-site-header__search-toggle\"\n    data-ecl-search-toggle=\"true\"\n    aria-controls=\"search-form-id\"\n    [attr.aria-expanded]=\"isSearchBoxActive\"\n    (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form\n    [style]=\"{'--ecl-search-arrow-position': searchArrowPosition}\"\n    (search)=\"onSearch($event)\"\n    [placeholder]=\"searchInputPlaceholder\"\n    (ngModelChange)=\"onModelChange($event)\"\n    [(ngModel)]=\"searchInputText\"\n    [searchButtonLabel]=\"searchButtonLabel\"\n    [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: i2$1.EclSearchFormComponent, selector: "ecl-search-form", inputs: ["searchInputText", "placeholder", "searchButtonLabel", "searchButtonIcon", "buttonExtraClassses", "inputExtraClassses"], outputs: ["search"] }, { kind: "component", type: i3$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-rc.0", type: EclSiteHeaderSearchComponent, isStandalone: true, selector: "ecl-site-header-search", inputs: { searchInputText: "searchInputText", searchInputPlaceholder: "searchInputPlaceholder", searchButtonLabel: "searchButtonLabel" }, outputs: { search: "search", searchToggle: "searchToggle" }, host: { properties: { "class": "this.class", "attr.role": "this.role" } }, providers: [ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR], viewQueries: [{ propertyName: "searchLinkElement", first: true, predicate: ["searchLink"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<a\n    #searchLink\n    href=\"#\"\n    class=\"ecl-button ecl-button--tertiary ecl-site-header__search-toggle\"\n    data-ecl-search-toggle=\"true\"\n    aria-controls=\"search-form-id\"\n    [attr.aria-expanded]=\"isSearchBoxActive\"\n    (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form\n    [style]=\"{'--ecl-search-arrow-position': searchArrowPosition}\"\n    (search)=\"onSearch($event)\"\n    [placeholder]=\"searchInputPlaceholder\"\n    (ngModelChange)=\"onModelChange($event)\"\n    [(ngModel)]=\"searchInputText\"\n    [searchButtonLabel]=\"searchButtonLabel\"\n    [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: i2$1.EclSearchFormComponent, selector: "ecl-search-form", inputs: ["searchInputText", "placeholder", "searchButtonLabel", "searchButtonIcon", "buttonExtraClassses", "inputExtraClassses"], outputs: ["search"] }, { kind: "component", type: i3$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.0", ngImport: i0, type: EclSiteHeaderSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-site-header-search', imports: [FormsModule, TranslateModule, ...EUI_ECL_SEARCH_FORM, ...EUI_ECL_ICON], providers: [ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR], template: "<a\n    #searchLink\n    href=\"#\"\n    class=\"ecl-button ecl-button--tertiary ecl-site-header__search-toggle\"\n    data-ecl-search-toggle=\"true\"\n    aria-controls=\"search-form-id\"\n    [attr.aria-expanded]=\"isSearchBoxActive\"\n    (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form\n    [style]=\"{'--ecl-search-arrow-position': searchArrowPosition}\"\n    (search)=\"onSearch($event)\"\n    [placeholder]=\"searchInputPlaceholder\"\n    (ngModelChange)=\"onModelChange($event)\"\n    [(ngModel)]=\"searchInputText\"\n    [searchButtonLabel]=\"searchButtonLabel\"\n    [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'ecl-site-header-search', imports: [FormsModule, TranslateModule, ...EUI_ECL_SEARCH_FORM, ...EUI_ECL_ICON], providers: [ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR], template: "<a\n    #searchLink\n    href=\"#\"\n    class=\"ecl-button ecl-button--tertiary ecl-site-header__search-toggle\"\n    data-ecl-search-toggle=\"true\"\n    aria-controls=\"search-form-id\"\n    [attr.aria-expanded]=\"isSearchBoxActive\"\n    (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\" size=\"m\" class=\"ecl-site-header__icon\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form\n    [style]=\"{'--ecl-search-arrow-position': searchArrowPosition}\"\n    (search)=\"onSearch($event)\"\n    [placeholder]=\"searchInputPlaceholder\"\n    (ngModelChange)=\"onModelChange($event)\"\n    [(ngModel)]=\"searchInputText\"\n    [searchButtonLabel]=\"searchButtonLabel\"\n    [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']