@eui/ecl 19.3.1 → 19.3.2-snapshot-1752652198707

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

@@ -1,5 +1,5 @@
 import * as i7 from '@angular/common';
-import { DOCUMENT, CommonModule } from '@angular/common';
+import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { HostBinding, Component, Directive, afterNextRender, EventEmitter, HostListener, Output, Input, ViewChild, Injectable, ElementRef, Optional, Inject, booleanAttribute, forwardRef, ContentChild, NgModule } from '@angular/core';
 import * as i4 from '@angular/cdk/a11y';
@@ -29,6 +29,10 @@ import { EclMenuComponent } from '@eui/ecl/components/ecl-menu';
 import * as i2$1 from '@angular/cdk/scrolling';
 import * as i1$1 from '@eui/ecl/shared';
 
+/**
+ * This components is a container element for custom action, login, language and search components.
+ */
+// TODO: maybe could be part of the header, and we don't need this component?
 class EclSiteHeaderActionComponent extends ECLBaseDirective {
     constructor() {
         super(...arguments);
@@ -45,6 +49,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['class']
             }] } });
 
+/**
+ * This component is used , when we want to show class name (used in standardised variant of site-header).
+ */
 class EclSiteHeaderBannerTopComponent extends ECLBaseDirective {
     constructor() {
         super(...arguments);
@@ -61,6 +68,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['class.ecl-site-header__banner-top']
             }] } });
 
+/**
+ * This directive is used, when we want to show call-to-action link in the site-header. Used in harmonised and standardised header
+ *  variants.
+ */
 class EclSiteHeaderCtaDirective extends ECLBaseDirective {
     constructor() {
         super(...arguments);
@@ -80,6 +91,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['class.ecl-site-header__cta']
             }] } });
 
+/**
+ * Custom component, that shows the current environment of the application, for example 'develop', 'acceptance', etc.
+ * Adds some custom styling, so that the text will appear over the EU/EC logo.
+ */
 class EclSiteHeaderEnvironmentComponent extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses(''), 'ecl-u-type-xl ecl-u-bg-error ecl-u-type-color-white'].join(' ');
@@ -179,6 +194,11 @@ class EclSiteHeaderSearchToggleEvent extends EclBaseEvent {
     }
 }
 
+/**
+ * This component is a popover, that appears after the user clicks on language link. It contains all the available languages,
+ *  configured for the current site. Adds styling and functionality for the dialog.
+ * Emits events when language is selected and when dialog is closed.
+ */
 class EclSiteHeaderLanguagePopoverComponent extends ECLBaseDirective {
     get display() {
         return this.isHidden ? 'none' : 'block';
@@ -191,13 +211,31 @@ class EclSiteHeaderLanguagePopoverComponent extends ECLBaseDirective {
         this.zone = zone;
         this.euLanguages = [];
         this.nonEuLanguages = [];
+        /**
+         * Property to show/hide the dialog.
+         */
         this.isHidden = false;
+        /**
+         * Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
+         */
         this.isPushRight = false;
+        /**
+         * Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
+         */
         this.isPushLeft = false;
+        /**
+         * Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
+         */
         this.isStack = false;
+        /**
+         * Property to position the dialog correctly. Calculated by the parent component 'ecl-site-header-language'.
+         */
         this.isFull = false;
         this.languageClosed = new EventEmitter();
         this.languageSelected = new EventEmitter();
+        /**
+         * The role of the dialog is 'dialog'. Should not be changed.
+         */
         this.role = 'dialog';
         this.labelledBy = 'ecl-site-header__language-title';
         this.destroy$ = new Subject();
@@ -221,6 +259,9 @@ class EclSiteHeaderLanguagePopoverComponent extends ECLBaseDirective {
     get isDropdownHidden() {
         return this.isHidden || undefined;
     }
+    /**
+     * Calculate the height after resize. If the window is too small -> scroll should appear.
+     */
     onWindowResize() {
         setTimeout(() => this.setLanguageContentMaxHeight());
     }
@@ -236,6 +277,9 @@ class EclSiteHeaderLanguagePopoverComponent extends ECLBaseDirective {
         this.languageSelected.next(new EclSiteHeaderLanguageSelectedEvent(language));
         evt.preventDefault();
     }
+    /**
+     * Set the max-height property of the component. It is calculated depending on the viewport.
+     */
     setLanguageContentMaxHeight() {
         const viewportHeight = window.innerHeight;
         if (this.languageContent) {
@@ -324,11 +368,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['window:resize', ['$event']]
             }] } });
 
+/**
+ * This class is used for methods, that serve for communication between the components in ecl-side-header.
+ */
 class EclAreaDataService {
     constructor() {
         this.dataSubject = new Subject();
         this.dataSubject$ = this.dataSubject.asObservable();
     }
+    /**
+     * When header is resized, some of it's chidren parameters for positioning on the screen need to be recalculated.
+     * This event publishes the new site header position, so that the chidren can adjust their position accordingly.
+     * @param event
+     */
     publishEvent(event) {
         this.dataSubject.next(event);
     }
@@ -339,6 +391,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             type: Injectable
         }], ctorParameters: () => [] });
 
+/**
+ * This component is used to switch between the languages of the application. Shows the current language, when clicked,
+ *  opens a language selector.
+ */
 class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-site-header__language')].join(' ').trim();
@@ -350,13 +406,25 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
         this.eclThemeService = eclThemeService;
         this.config = config;
         this.i18nService = i18nService;
+        /**
+         * Thie event is emited, when language link, showing the current language is clicked.
+         */
         this.languageClick = new EventEmitter();
+        /**
+         * Thie event is emited, when user selects a new language from the dropdown.
+         */
         this.languageSelected = new EventEmitter();
         this.MOBILE_BREAKPOINT = 768;
         this.LANGUAGE_MAX_COLUMNS = 8;
         this.isLanguagesDropdownVisible = false;
         this.languageCode = 'en';
+        /**
+         * Array of EU languages, that can be selected for the current site.
+         */
         this.euLanguages = [];
+        /**
+         * Array of non-EU languages, that can be selected for the current site.
+         */
         this.nonEuLanguages = [];
         this.euColumnsCount = 1;
         this.nonEuColumnsCount = 1;
@@ -367,6 +435,10 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
     ngOnInit() {
         this.handleRtlChangeState();
     }
+    /**
+     * After view is initialized -> calculate popover position and initialize languages, that are configured in the config file
+     *  of the current site.
+     */
     ngAfterViewInit() {
         this.eclAreaDataService.dataSubject$.pipe(takeUntil$1(this.destroy$)).subscribe(parentHeaderRect => {
             this.calculatePopoverPosition(parentHeaderRect.right, parentHeaderRect.left);
@@ -380,6 +452,10 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
     getLanguageLabel() {
         return `${EuiEuLanguages.getLanguageByCode(this.languageCode)?.label} - ${this.languageCode.toUpperCase()}`;
     }
+    /**
+     * Toggle the language dropdown when clicking the link, showing the current language.
+     * @param evt
+     */
     onLanguageClick(evt) {
         this.isLanguagesDropdownVisible = !this.isLanguagesDropdownVisible;
         if (!this.isLanguagesDropdownVisible) {
@@ -392,6 +468,7 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
                 this.languageArrowPosition = undefined;
             });
         }
+        // If the dropdown is visible, we set the max-height of the dropdown, so that it can be scrolled.
         if (this.isLanguagesDropdownVisible) {
             setTimeout(() => this.languagePopover.setLanguageContentMaxHeight());
         }
@@ -407,9 +484,15 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
         this.isLanguagesDropdownVisible = false;
         this.languageSelected.next(new EclSiteHeaderLanguageSelectedEvent(evt.language));
     }
+    /**
+     * Close the dropdown, when clicking outside of the component.
+     */
     onClickOutside() {
         this.isLanguagesDropdownVisible = false;
     }
+    /**
+     * Close the dropdown, when pressing ESC key.
+     */
     onEscapeKeydownHandler() {
         this.isLanguagesDropdownVisible = false;
     }
@@ -421,6 +504,9 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
             this.isRtl = rtlState;
         });
     }
+    /**
+     * Calculate the number of columns for EU and non-EU languages, depending on languages' count.
+     */
     updateLanguages() {
         this.euLanguages = this._languages.filter((item) => EuiEuLanguages.isEuLanguage(item.code));
         this.nonEuLanguages = this._languages.filter((item) => !EuiEuLanguages.isEuLanguage(item.code));
@@ -532,6 +618,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['document:keydown.escape']
             }] } });
 
+/**
+ * Component for login/logout as part of the harmonised site header. Emits events when user logs in and when user opens the
+ * login dropdown.
+ */
 class EclSiteHeaderLoginComponent extends ECLBaseDirective {
     constructor(eclAreaDataService, eclRtlService) {
         super();
@@ -541,6 +631,9 @@ class EclSiteHeaderLoginComponent extends ECLBaseDirective {
         this.class = 'ecl-site-header__login-container';
         this.login = new EventEmitter();
         this.loginBoxToggle = new EventEmitter();
+        /**
+         * If login popover is open (true) or closed (false).
+         */
         this.isLoginBoxActive = false;
         this.TABLET_BREAKPOINT = 996;
         this.destroy$ = new Subject();
@@ -559,9 +652,15 @@ class EclSiteHeaderLoginComponent extends ECLBaseDirective {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
     }
+    /**
+     * Close the login popover on click outside.
+     */
     onClickOutsideMegaMenu() {
         this.onLoginBoxClose();
     }
+    /**
+     * @returns classes for the login popover.
+     */
     getLoginBoxCssClasses() {
         return ['ecl-site-header__login-box', this.isLoginBoxActive ? 'ecl-site-header__login-box--active' : ''].join(' ');
     }
@@ -588,6 +687,9 @@ class EclSiteHeaderLoginComponent extends ECLBaseDirective {
             this.calculateLoginArrowPosition(this.parentHeaderRight);
         });
     }
+    /**
+     * On resize -> calculate the popover arrow position, using parent element ecl-header html parameters.
+     */
     handleSiteHeaderAreaChangeEvent() {
         this.eclAreaDataService.dataSubject$.pipe(takeUntil$1(this.destroy$)).subscribe(parentHeaderRect => {
             this.parentHeaderRight = parentHeaderRect.right;
@@ -642,6 +744,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['eclClickOutside']
             }] } });
 
+/**
+ * This directive is used to add specific class for the login description element, within the login dropdown.
+ */
 class EclSiteHeaderLoginDescriptionDirective extends ECLBaseDirective {
     constructor() {
         super(...arguments);
@@ -660,6 +765,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: HostBinding,
                 args: ['class']
             }] } });
+/**
+ * This directive is used to add specific class for the horizontal line, that separates
+ *  description from the 'Logout' link.
+ */
 class EclSiteHeaderLoginSeparatorDirective extends ECLBaseDirective {
     constructor() {
         super(...arguments);
@@ -679,6 +788,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['class']
             }] } });
 
+/**
+ * This component is used as a wrapper around ecl-notification component, when used in the site-header. Adds specific class
+ *  and methods to show/hide the notification.
+ */
 class EclSiteHeaderNotificationComponent extends ECLBaseDirective {
     constructor() {
         super(...arguments);
@@ -707,6 +820,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['style.display']
             }] } });
 
+/**
+ * Adds some specific classes for picture element, when used in the site header logo.
+ */
 class EclSiteHeaderPictureDirective extends ECLBaseDirective {
     constructor() {
         super(...arguments);
@@ -725,6 +841,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: HostBinding,
                 args: ['class']
             }] } });
+/**
+ * Adds some specific classes for <img> element, when used in the site header logo.
+ */
 class EclSiteHeaderImageDirective extends ECLBaseDirective {
     get cssClasses() {
         return [
@@ -745,6 +864,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: HostBinding,
                 args: ['class']
             }] } });
+/**
+ * Adds some specific classes for <a> element, when used in the site header logo.
+ */
 class EclSiteHeaderLinkDirective extends ECLBaseDirective {
     constructor() {
         super(...arguments);
@@ -772,12 +894,19 @@ const ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR = {
 const noop = () => {
     /** empty*/
 };
+/**
+ * This component builds the search box in the ecl-site-header component. Adds specific style and functionality, emits
+ *  events on search and search toggle.
+ */
 class EclSiteHeaderSearchComponent extends ECLBaseDirective {
     constructor(eclAreaDataService, eclRtlService) {
         super();
         this.eclAreaDataService = eclAreaDataService;
         this.eclRtlService = eclRtlService;
         this.class = 'ecl-site-header__search-container';
+        /**
+         * The default role of the component is 'search', should not be changed.
+         */
         this.role = 'search';
         // TODO: this output should be renamed in v20 - breaking change!
         // eslint-disable-next-line @angular-eslint/no-output-native
@@ -809,6 +938,10 @@ class EclSiteHeaderSearchComponent extends ECLBaseDirective {
         this.searchToggle.next(event);
         evt.preventDefault();
     }
+    /**
+     *
+     * @returns The classes for the ecl search form.
+     */
     getSearchBoxCssClasses() {
         return ['ecl-site-header__search', this.isSearchBoxActive ? 'ecl-site-header__search--active' : ''].join(' ');
     }
@@ -891,7 +1024,16 @@ class EclAreaChangeEvent {
     }
 }
 
+/**
+ * The Site header offers easily recognisable elements (such as the logo) and the most essential functionality of
+ * every site (such as Language switcher or Search form). Additionally it can host the name of the site,
+ * the class name to which it belongs and the main navigation. The header is always placed at the top of the page.
+ * The elements required in the site header are different depending wether it is the corporate, standardised or an harmonised website.
+ */
 class EclSiteHeaderComponent extends ECLBaseDirective {
+    /**
+     * Adds specific classes to the main element. Depending , logo size, menu and menu status, rtl status.
+     */
     get cssClasses() {
         return [
             super.getCssClasses('ecl-site-header'),
@@ -912,7 +1054,13 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
         this.eclThemeService = eclThemeService;
         this.eclRtlService = eclRtlService;
         this.i18nService = i18nService;
+        /**
+         * Language code of the current language of the site.
+         */
         this.languageCode = 'en';
+        /**
+         * The size of the logo, 's', 'm' or 'l', default to 'm'.
+         */
         this.logoSize = 'm';
         this.logoClick = new EventEmitter();
         this.languageClick = new EventEmitter();
@@ -927,6 +1075,7 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
         afterNextRender(() => {
             this.observeBreakpointChanges();
             this.subscribeToMegaMenuEvents();
+            // Observe size changes of the component, for some child components size need to be also adjusted accordingly.
             new ResizeObserver(() => {
                 setTimeout(() => {
                     this.sendResizeEventToChildComponents();
@@ -934,6 +1083,9 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
             }).observe(this.topContainerElement.nativeElement);
         });
     }
+    /**
+     * Subscibe to some child components' events.
+     */
     ngAfterContentInit() {
         this.handleRtlChangeState();
         this.handleLanguageChangeState();
@@ -972,6 +1124,10 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
     }
+    /**
+     * This method is used, when current language is not present for our available logo collection.
+     * In this case, a default logo is returned.
+     */
     get partOfLogoName() {
         if (this.AVAILABLE_NON_EU_LOGO_COUNTRY_CODES.includes(this.languageCode) || EuiEuLanguages.isEuLanguage(this.languageCode)) {
             return this.languageCode;
@@ -995,6 +1151,10 @@ class EclSiteHeaderComponent extends ECLBaseDirective {
             this.isRtl = rtlState;
         });
     }
+    /**
+     * Some child components need position and size to be set according to the parent site-header. So we share some site-header's measurements
+     *  via the 'eclAreaDataService'.
+     */
     sendResizeEventToChildComponents() {
         if (this.topContainerElement.nativeElement.getBoundingClientRect().width !== undefined) {
             const topContainerRect = this.topContainerElement.nativeElement.getBoundingClientRect();
@@ -1238,12 +1398,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
 
+/**
+ * This components gives opportunity for user to add a custom action. It will appear at first place, before log-in and language
+ *  and search (if any of these exist). Adds specific styling and functionality. Opens a dropdown with some more content.
+ */
 class EclSiteHeaderCustomActionComponent extends ECLBaseDirective {
-    constructor(document, renderer) {
-        super();
-        this.document = document;
-        this.renderer = renderer;
+    constructor() {
+        super(...arguments);
         this.class = 'ecl-site-header__custom-action';
+        /**
+         * Used to expand/collapse the dropdown, if any.
+         */
         this.isOverlayExpanded = false;
         this.destroy$ = new Subject();
     }
@@ -1251,6 +1416,7 @@ class EclSiteHeaderCustomActionComponent extends ECLBaseDirective {
         if (this.title) {
             this.titleId = this.title.id;
         }
+        // Subscribe to link output, which toggles the dropdown.
         if (this.eclSiteHeaderCustomActionLink) {
             this.eclSiteHeaderCustomActionLink.customActionOverlayToggle.pipe(takeUntil$1(this.destroy$)).subscribe((isExpanded) => {
                 this.isOverlayExpanded = isExpanded;
@@ -1261,18 +1427,27 @@ class EclSiteHeaderCustomActionComponent extends ECLBaseDirective {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
     }
+    /**
+     * Close the overlay.
+     */
     onCustomActionOverlayClose() {
         this.isOverlayExpanded = false;
         if (!this.eclSiteHeaderCustomActionLink.hasLink())
             this.eclSiteHeaderCustomActionLink.isOverlayExpanded = false;
     }
+    /**
+     * Close the overlay, when clicking outside of it.
+     */
     onClickOutsideHandler() {
         this.onCustomActionOverlayClose();
     }
+    /**
+     * Close the overlay with ESC key.
+     */
     onEscapeKeydownHandler() {
         this.onCustomActionOverlayClose();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderCustomActionComponent, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderCustomActionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EclSiteHeaderCustomActionComponent, isStandalone: false, 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: i2.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: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i3$1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i3$1.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i5.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclSiteHeaderCustomActionComponent, decorators: [{
@@ -1283,10 +1458,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             outputs: ['eclClickOutside'],
                         },
                     ], 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" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.Renderer2 }], propDecorators: { class: [{
+        }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
             }], title: [{