@eui/ecl 21.0.0-next.26 → 21.0.0-next.28

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.
@@ -121,7 +121,7 @@
121
121
  </ol>
122
122
  <ul class="properties-list">
123
123
  <li>
124
- <b>Version</b> : 21.0.0-next.26</li>
124
+ <b>Version</b> : 21.0.0-next.28</li>
125
125
  </ul>
126
126
 
127
127
 
@@ -4,7 +4,7 @@ import * as i1 from '@eui/ecl/core';
4
4
  import { ECLBaseDirective, ECLClickOutsideDirective, EclBaseEvent, EclThemeService, EclRtlService, logoLanguageCode } from '@eui/ecl/core';
5
5
  import * as i2 from '@angular/cdk/a11y';
6
6
  import { A11yModule } from '@angular/cdk/a11y';
7
- import * as i3$1 from '@eui/ecl/components/ecl-icon';
7
+ import * as i2$1 from '@eui/ecl/components/ecl-icon';
8
8
  import { EclIconComponent, EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';
9
9
  import { Subject, takeUntil, debounceTime } from 'rxjs';
10
10
  import * as i3 from '@eui/ecl/components/ecl-button';
@@ -13,17 +13,17 @@ import { BreakpointObserver } from '@angular/cdk/layout';
13
13
  import { takeUntil as takeUntil$1 } from 'rxjs/operators';
14
14
  import { UpperCasePipe, AsyncPipe } from '@angular/common';
15
15
  import { GLOBAL_CONFIG_TOKEN, I18nService, EuiEuLanguages } from '@eui/core';
16
- import * as i4 from '@eui/ecl/components/ecl-link';
16
+ import * as i3$1 from '@eui/ecl/components/ecl-link';
17
17
  import { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';
18
18
  import { EclMegaMenuComponent } from '@eui/ecl/components/ecl-mega-menu';
19
19
  import { EclMenuComponent } from '@eui/ecl/components/ecl-menu';
20
20
  import { EclHeaderMenuComunicationService } from '@eui/ecl/shared';
21
- import * as i1$1 from '@ngx-translate/core';
21
+ import * as i4 from '@ngx-translate/core';
22
22
  import { TranslateModule } from '@ngx-translate/core';
23
23
  import { ScrollDispatcher } from '@angular/cdk/scrolling';
24
- import * as i1$2 from '@angular/forms';
24
+ import * as i1$1 from '@angular/forms';
25
25
  import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
26
- import * as i2$1 from '@eui/ecl/components/ecl-search-form';
26
+ import * as i2$2 from '@eui/ecl/components/ecl-search-form';
27
27
  import { EUI_ECL_SEARCH_FORM } from '@eui/ecl/components/ecl-search-form';
28
28
 
29
29
  /**
@@ -243,7 +243,7 @@ class EclSiteHeaderCustomActionComponent extends ECLBaseDirective {
243
243
  this.onCustomActionOverlayClose();
244
244
  }
245
245
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EclSiteHeaderCustomActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
246
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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"] }] }); }
246
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }] }); }
247
247
  }
248
248
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EclSiteHeaderCustomActionComponent, decorators: [{
249
249
  type: Component,
@@ -494,11 +494,11 @@ class EclSiteHeaderLanguagePopoverComponent extends ECLBaseDirective {
494
494
  });
495
495
  }
496
496
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EclSiteHeaderLanguagePopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
497
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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: ["extraAttributes", "isInverted", "isIconOnly", "isHighlight", "isNoVisited", "variant"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
497
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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\" eclStyle=\"neutral\" 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\" [attr.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\" [attr.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: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "component", type: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: i3$1.EclLinkDirective, selector: "[eclLink]", inputs: ["extraAttributes", "isInverted", "isIconOnly", "isHighlight", "isNoVisited", "variant"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
498
498
  }
499
499
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EclSiteHeaderLanguagePopoverComponent, decorators: [{
500
500
  type: Component,
501
- 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" }]
501
+ 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\" eclStyle=\"neutral\" 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\" [attr.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\" [attr.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" }]
502
502
  }], ctorParameters: () => [], propDecorators: { languageContent: [{
503
503
  type: ViewChild,
504
504
  args: ['languageContent']
@@ -779,7 +779,7 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
779
779
  });
780
780
  }
781
781
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EclSiteHeaderLanguageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
782
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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" }] }); }
782
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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: i2$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: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }] }); }
783
783
  }
784
784
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EclSiteHeaderLanguageComponent, decorators: [{
785
785
  type: Component,
@@ -904,7 +904,7 @@ class EclSiteHeaderLoginComponent extends ECLBaseDirective {
904
904
  }
905
905
  }
906
906
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EclSiteHeaderLoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
907
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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" }] }); }
907
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
908
908
  }
909
909
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EclSiteHeaderLoginComponent, decorators: [{
910
910
  type: Component,
@@ -1167,7 +1167,7 @@ class EclSiteHeaderSearchComponent extends ECLBaseDirective {
1167
1167
  }
1168
1168
  }
1169
1169
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EclSiteHeaderSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1170
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: EclSiteHeaderSearchComponent, isStandalone: true, selector: "ecl-site-header-search", inputs: { searchInputText: "searchInputText", searchInputPlaceholder: "searchInputPlaceholder", searchButtonLabel: "searchButtonLabel" }, outputs: { searchEvent: "searchEvent", 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 (searchEvent)=\"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: ["searchEvent"] }, { 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" }] }); }
1170
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: EclSiteHeaderSearchComponent, isStandalone: true, selector: "ecl-site-header-search", inputs: { searchInputText: "searchInputText", searchInputPlaceholder: "searchInputPlaceholder", searchButtonLabel: "searchButtonLabel" }, outputs: { searchEvent: "searchEvent", 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 (searchEvent)=\"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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: i2$2.EclSearchFormComponent, selector: "ecl-search-form", inputs: ["searchInputText", "placeholder", "searchButtonLabel", "searchButtonIcon", "buttonExtraClassses", "inputExtraClassses"], outputs: ["searchEvent"] }, { kind: "component", type: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
1171
1171
  }
1172
1172
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EclSiteHeaderSearchComponent, decorators: [{
1173
1173
  type: Component,
@@ -1400,7 +1400,7 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
1400
1400
  });
1401
1401
  }
1402
1402
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EclSiteHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1403
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: EclSiteHeaderComponent, isStandalone: true, selector: "ecl-site-header", inputs: { siteName: "siteName", languageCode: "languageCode", logoSize: "logoSize", isSiteNameMobileOnly: ["isSiteNameMobileOnly", "isSiteNameMobileOnly", booleanAttribute] }, outputs: { logoClick: "logoClick", languageClick: "languageClick" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclLoginComponent", first: true, predicate: EclSiteHeaderLoginComponent, descendants: true }, { propertyName: "eclMenuComponent", first: true, predicate: EclMenuComponent, descendants: true }, { propertyName: "eclMegaMenuComponent", first: true, predicate: EclMegaMenuComponent, descendants: true }, { propertyName: "eclSearchComponent", first: true, predicate: EclSiteHeaderSearchComponent, descendants: true }, { propertyName: "eclLanguageComponent", first: true, predicate: EclSiteHeaderLanguageComponent, descendants: true }, { propertyName: "eclNotificationComponent", first: true, predicate: EclSiteHeaderNotificationComponent, descendants: true }, { propertyName: "eclHeaderLink", first: true, predicate: i0.forwardRef(() => EclSiteHeaderLinkDirective), descendants: true }, { propertyName: "eclHeaderImage", first: true, predicate: i0.forwardRef(() => EclSiteHeaderImageDirective), descendants: true }], viewQueries: [{ propertyName: "topContainerElement", first: true, predicate: ["topContainer"], descendants: true }, { propertyName: "siteHeaderHeader", first: true, predicate: ["siteHeaderHeader"], descendants: true }, { propertyName: "bannerHeader", first: true, predicate: ["bannerHeader"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-site-header__background\">\n <div class=\"ecl-site-header__header\" #siteHeaderHeader>\n <div class=\"ecl-site-header__container ecl-container\">\n <div #topContainer class=\"ecl-site-header__top\">\n @if(hasCustomLink()) {\n <ng-content select=\"[eclSiteHeaderLink]\"></ng-content>\n } @else {\n <a eclLink variant=\"standalone\" class=\"ecl-site-header__logo-link\"\n href=\"https://ec.europa.eu/info/index_{{ languageCode }}\" (click)=\"onECLogoClick($event)\"\n [attr.aria-label]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\">\n <ng-content select=\"[eclSiteHeaderEnvironment]\" media=\"(min-width: 1140px)\"></ng-content>\n\n @if (eclThemeService.isEC$ | async) {\n <picture eclSiteHeaderPicture\n [attr.title]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\">\n <source\n srcset=\"./assets/images/ecl/ec/logo/positive/logo-ec--{{ partOfLogoName }}.svg\"\n media=\"(min-width: 415px)\" />\n <img class=\"ecl-site-header__logo-image ecl-site-header__logo-image--{{logoSize}}\"\n src=\"./assets/images/ecl/ec/logo/logo-ec--mute.svg\"\n [attr.alt]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\" />\n </picture>\n }\n @if (eclThemeService.isEU$ | async) {\n <picture eclSiteHeaderPicture\n [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\">\n <source\n srcset=\"./assets/images/ecl/eu/logo/standard-version/positive/logo-eu--{{ partOfLogoName }}.svg\"\n media=\"(min-width: 415px)\" />\n <img class=\"ecl-site-header__logo-image ecl-site-header__logo-image--{{logoSize}}\"\n src=\"./assets/images/ecl/eu/logo/condensed-version/positive/logo-eu--{{ partOfLogoName }}.svg\"\n alt=\"European Union\" />\n </picture>\n }\n </a>\n }\n <ng-content select=\"ecl-site-header-action\"></ng-content>\n </div>\n </div>\n </div>\n <ng-content select=\"ecl-site-header-notification\"></ng-content>\n</div>\n\n\n<ng-content select=\"ecl-site-header-banner-top\"></ng-content>\n@if (siteName) {\n <div class=\"ecl-site-header__banner\" #bannerHeader [class.ecl-site-header__site-name--mobile-only]=\"isSiteNameMobileOnly\">\n <div class=\"ecl-container\">\n <div class=\"ecl-site-header__site-name\">{{ siteName }}</div>\n <ng-content select=\"[eclSiteHeaderCta]\"></ng-content>\n </div>\n </div>\n}\n\n<ng-content select=\"ecl-menu\"></ng-content>\n<ng-content select=\"[eclMegaMenu]\"></ng-content>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i4.EclLinkDirective, selector: "[eclLink]", inputs: ["extraAttributes", "isInverted", "isIconOnly", "isHighlight", "isNoVisited", "variant"] }, { kind: "directive", type: EclSiteHeaderPictureDirective, selector: "[eclSiteHeaderPicture]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
1403
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: EclSiteHeaderComponent, isStandalone: true, selector: "ecl-site-header", inputs: { siteName: "siteName", languageCode: "languageCode", logoSize: "logoSize", isSiteNameMobileOnly: ["isSiteNameMobileOnly", "isSiteNameMobileOnly", booleanAttribute] }, outputs: { logoClick: "logoClick", languageClick: "languageClick" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclLoginComponent", first: true, predicate: EclSiteHeaderLoginComponent, descendants: true }, { propertyName: "eclMenuComponent", first: true, predicate: EclMenuComponent, descendants: true }, { propertyName: "eclMegaMenuComponent", first: true, predicate: EclMegaMenuComponent, descendants: true }, { propertyName: "eclSearchComponent", first: true, predicate: EclSiteHeaderSearchComponent, descendants: true }, { propertyName: "eclLanguageComponent", first: true, predicate: EclSiteHeaderLanguageComponent, descendants: true }, { propertyName: "eclNotificationComponent", first: true, predicate: EclSiteHeaderNotificationComponent, descendants: true }, { propertyName: "eclHeaderLink", first: true, predicate: i0.forwardRef(() => EclSiteHeaderLinkDirective), descendants: true }, { propertyName: "eclHeaderImage", first: true, predicate: i0.forwardRef(() => EclSiteHeaderImageDirective), descendants: true }], viewQueries: [{ propertyName: "topContainerElement", first: true, predicate: ["topContainer"], descendants: true }, { propertyName: "siteHeaderHeader", first: true, predicate: ["siteHeaderHeader"], descendants: true }, { propertyName: "bannerHeader", first: true, predicate: ["bannerHeader"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-site-header__background\">\n <div class=\"ecl-site-header__header\" #siteHeaderHeader>\n <div class=\"ecl-site-header__container ecl-container\">\n <div #topContainer class=\"ecl-site-header__top\">\n @if(hasCustomLink()) {\n <ng-content select=\"[eclSiteHeaderLink]\"></ng-content>\n } @else {\n <a eclLink variant=\"standalone\" class=\"ecl-site-header__logo-link\"\n href=\"https://ec.europa.eu/info/index_{{ languageCode }}\" (click)=\"onECLogoClick($event)\"\n [attr.aria-label]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\">\n <ng-content select=\"[eclSiteHeaderEnvironment]\" media=\"(min-width: 1140px)\"></ng-content>\n\n @if (eclThemeService.isEC$ | async) {\n <picture eclSiteHeaderPicture\n [attr.title]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\">\n <source\n srcset=\"./assets/images/ecl/ec/logo/positive/logo-ec--{{ partOfLogoName }}.svg\"\n media=\"(min-width: 415px)\" />\n <img class=\"ecl-site-header__logo-image ecl-site-header__logo-image--{{logoSize}}\"\n src=\"./assets/images/ecl/ec/logo/logo-ec--mute.svg\"\n [attr.alt]=\"'ecl.footer.EUROPEAN-COMMISSION' | translate\" />\n </picture>\n }\n @if (eclThemeService.isEU$ | async) {\n <picture eclSiteHeaderPicture\n [attr.title]=\"'ecl.footer.EUROPEAN-UNION' | translate\">\n <source\n srcset=\"./assets/images/ecl/eu/logo/standard-version/positive/logo-eu--{{ partOfLogoName }}.svg\"\n media=\"(min-width: 415px)\" />\n <img class=\"ecl-site-header__logo-image ecl-site-header__logo-image--{{logoSize}}\"\n src=\"./assets/images/ecl/eu/logo/condensed-version/positive/logo-eu--{{ partOfLogoName }}.svg\"\n alt=\"European Union\" />\n </picture>\n }\n </a>\n }\n <ng-content select=\"ecl-site-header-action\"></ng-content>\n </div>\n </div>\n </div>\n <ng-content select=\"ecl-site-header-notification\"></ng-content>\n</div>\n\n\n<ng-content select=\"ecl-site-header-banner-top\"></ng-content>\n@if (siteName) {\n <div class=\"ecl-site-header__banner\" #bannerHeader [class.ecl-site-header__site-name--mobile-only]=\"isSiteNameMobileOnly\">\n <div class=\"ecl-container\">\n <div class=\"ecl-site-header__site-name\">{{ siteName }}</div>\n <ng-content select=\"[eclSiteHeaderCta]\"></ng-content>\n </div>\n </div>\n}\n\n<ng-content select=\"ecl-menu\"></ng-content>\n<ng-content select=\"[eclMegaMenu]\"></ng-content>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i3$1.EclLinkDirective, selector: "[eclLink]", inputs: ["extraAttributes", "isInverted", "isIconOnly", "isHighlight", "isNoVisited", "variant"] }, { kind: "directive", type: EclSiteHeaderPictureDirective, selector: "[eclSiteHeaderPicture]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
1404
1404
  }
1405
1405
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EclSiteHeaderComponent, decorators: [{
1406
1406
  type: Component,