@eui/ecl 19.3.1 → 19.3.2-snapshot-1752652198707

package/fesm2022/eui-ecl-components-ecl-menu.mjs

@@ -6,19 +6,18 @@ import * as i1$1 from '@angular/cdk/layout';
 import { Breakpoints, LayoutModule } from '@angular/cdk/layout';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i6 from '@ngx-translate/core';
+import * as i5 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import * as i4$1 from '@eui/ecl/components/ecl-link';
+import * as i4 from '@eui/ecl/components/ecl-link';
 import { EclLinkDirective, EclLinkModule } from '@eui/ecl/components/ecl-link';
-import * as i3 from '@eui/ecl/components/ecl-icon';
+import * as i3$1 from '@eui/ecl/components/ecl-icon';
 import { EclIconComponent, EclIconModule } from '@eui/ecl/components/ecl-icon';
-import * as i4 from '@eui/ecl/components/ecl-button';
+import * as i3 from '@eui/ecl/components/ecl-button';
 import { EclButtonComponent, EclButtonModule } from '@eui/ecl/components/ecl-button';
 import { Subject, of } from 'rxjs';
 import { mergeWith, takeUntil } from 'rxjs/operators';
 import * as i2$1 from '@eui/ecl/core';
 import { EclDomEvent, ECLBaseDirective, KeyCode } from '@eui/ecl/core';
-import * as i3$1 from '@eui/ecl/shared';
 
 class EclMenuItemSelectEvent extends EclDomEvent {
     constructor(menuItem, domEvent = null) {
@@ -68,6 +67,10 @@ class EclMenuItemParentFocusEvent {
     }
 }
 
+/**
+ * This component represents a sub-menu item, that is on the second level of the ecl-menu.
+ * Adds some custom styling and functionality.
+ */
 class EclMenuMegaItemComponent extends ECLBaseDirective {
     constructor(renderer) {
         super();
@@ -79,8 +82,14 @@ class EclMenuMegaItemComponent extends ECLBaseDirective {
         this.href = '';
         this.target = '';
         this.cmpClass = true;
+        /**
+         * The default role of the DOM element is 'listitem', should not be changed.
+         */
         this.role = 'listitem';
         this.isCurrent = false;
+        /**
+         * An additional item, that represents a link.
+         */
         this.isSeeAll = false;
         this.menuItemSelect = new EventEmitter();
         this.menuItemKeydown = new EventEmitter();
@@ -92,6 +101,10 @@ class EclMenuMegaItemComponent extends ECLBaseDirective {
         this.manageContentChildren();
         this.setExtraAttributesForLink(this.megaMenuLink?.nativeElement, this.linkExtraAttributes);
     }
+    /**
+     *
+     * @param evt This event is emited, when the menu item is clicked.
+     */
     onItemClick(evt) {
         this.menuItemSelect.next(new EclMenuItemSelectEvent(this, evt));
         if (!this.href) {
@@ -101,9 +114,15 @@ class EclMenuMegaItemComponent extends ECLBaseDirective {
     onHostClick(evt) {
         evt.stopPropagation();
     }
+    /**
+     * When the item is the current active item, the 'aria-current' attribute is set to 'page'.
+     */
     get ariaCurrent() {
         return this.isCurrent ? 'page' : null;
     }
+    /**
+     * Focus should be set on the underlying <a> element.
+     */
     onFocus() {
         this.megaMenuLink.nativeElement.focus();
     }
@@ -113,6 +132,9 @@ class EclMenuMegaItemComponent extends ECLBaseDirective {
         }
         this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt));
     }
+    /**
+     * Adds specific classes to content children (icons or links).
+     */
     manageContentChildren() {
         if (this.iconComponents) {
             setTimeout(() => {
@@ -196,6 +218,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['click', ['$event']]
             }] } });
 
+/**
+ * This component acts as a wrapper for the second level of menu items, that are children of one root item.
+ * Provides functionality for some common events like keyboard navigation and manages relations between sub items.
+ */
 class EclMenuMegaComponent extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-menu__mega')].join(' ');
@@ -207,13 +233,20 @@ class EclMenuMegaComponent extends ECLBaseDirective {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.isRtlDisplay = false;
         this.menuItemSelect = new EventEmitter();
+        /**
+         * Used in keyboard navigation, when focus has to be moved to the parent item.
+         */
         this.menuMegaItemParentFocus = new EventEmitter();
+        /**
+         * Used when kyboard navigation with TAB reaches the last sub item.
+         */
         this.menuMegaLastItemTab = new EventEmitter();
         this.destroy$ = new Subject();
         this.differ = this.differs.find([]).create();
     }
     ngAfterContentInit() {
         this.diff = this.differ.diff(this.eclMenuMegaItems);
+        // Subscribe to the events of each new added item.
         this.createContentChildrenMenuObservable().subscribe(this.onMenuItemChanges.bind(this));
     }
     ngOnDestroy() {
@@ -347,6 +380,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['class']
             }] } });
 
+/**
+ * This component represents a root menu item. Adds styling and functionality to menu item.
+ */
 class EclMenuItemComponent extends ECLBaseDirective {
     get cssClasses() {
         return [
@@ -385,18 +421,34 @@ class EclMenuItemComponent extends ECLBaseDirective {
         this.href = '';
         this.target = '';
         this.isCurrent = false;
+        /**
+         * Set to 'true', when item has more than 13 chidren and the overlay needs to use the full available space.
+         */
         this.isFull = false;
         this.isHovered = false;
         this.isMobileBreakpoint = false;
+        /**
+         * Used when menu has overlay, to show if the item is currently displayed.
+         */
         this.isVisible = true;
+        /**
+         * The default role of the item is 'listitem' and should not be changed.
+         */
         this.role = 'listitem';
         this.menuItemSelect = new EventEmitter();
         this.menuItemCaret = new EventEmitter();
+        /**
+         * Event that is emited on clicking the caret button to expand item's children in mobile mode.
+         */
         this.menuItemHover = new EventEmitter();
         this.menuItemHoverOut = new EventEmitter();
         this.menuMegaItemSelect = new EventEmitter();
         this.menuItemFocus = new EventEmitter();
         this.menuItemKeydown = new EventEmitter();
+        /**
+         * This event is emited when the keyboard nav reaches the last item in mobile view.
+         * Then the next focused element should be the 'close' btn.
+         */
         this.menuMegaLastItemTab = new EventEmitter();
         this.destroy$ = new Subject();
         afterNextRender(() => {
@@ -411,6 +463,7 @@ class EclMenuItemComponent extends ECLBaseDirective {
         this.menuItemHoverOut.next(new EclMenuItemHoverOutEvent(this, evt));
     }
     ngAfterContentInit() {
+        // Subscibe to submenu component events.
         if (this.submenu) {
             this.submenu.menuItemSelect.pipe(takeUntil(this.destroy$)).subscribe((it) => {
                 this.menuMegaItemSelect.next(new EclMenuItemSelectEvent(it.menuItem, it.domEvent));
@@ -444,14 +497,25 @@ class EclMenuItemComponent extends ECLBaseDirective {
             evt.stopPropagation();
         }
     }
+    /**
+     * When clicking the caret button, to expand item's children. Used in mobile view.
+     * @param evt
+     */
     onItemCaretClick(evt) {
         this.menuItemCaret.next(new EclMenuItemCaretEvent(this, evt));
     }
+    /**
+     * Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from the submenu.
+     */
     onFocusFromSubmenu() {
         this.onButtonFocus();
         this.isHovered = false;
         this.isExpanded = false;
     }
+    /**
+     * Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from
+     *  the next root menu item.
+     */
     onFocusFromNext() {
         if (this.menuButton) {
             this.onButtonFocus();
@@ -460,9 +524,17 @@ class EclMenuItemComponent extends ECLBaseDirective {
             this.onLinkFocus();
         }
     }
+    /**
+     * Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from
+     *  the previous root menu item.
+     */
     onFocusFromPrev() {
         this.onLinkFocus();
     }
+    /**
+     * Manages the keyboard navigation when the current element is the button of the menu item.
+     * @param evt
+     */
     onButtonKeydown(evt) {
         switch (evt.key) {
             case KeyCode.ARROW_DOWN: {
@@ -509,6 +581,10 @@ class EclMenuItemComponent extends ECLBaseDirective {
             }
         }
     }
+    /**
+     * Manages the keyboard navigation when the current element is the <a> tag of the menu item.
+     * @param evt
+     */
     onLinkKeydown(evt) {
         switch (evt.key) {
             case KeyCode.ARROW_DOWN: {
@@ -546,6 +622,13 @@ class EclMenuItemComponent extends ECLBaseDirective {
             }
         }
     }
+    /**
+     * This method calculates height and width of an item, depending the maximum of lines(rows) allowed.
+     * Depends on the 'maxLines' property of the parent menu component.
+     * @param maxLines - property that sets the maximum possible lines in a menu item.
+     * @param isMobileBreakpoint
+     * @returns
+     */
     checkMenuItem(maxLines, isMobileBreakpoint) {
         if (maxLines < 1)
             return;
@@ -592,6 +675,13 @@ class EclMenuItemComponent extends ECLBaseDirective {
     getMenuItemLinkMaxHeight(linkStyle, maxLines) {
         return parseInt(linkStyle.lineHeight, 10) * maxLines + parseInt(linkStyle.paddingTop, 10) + parseInt(linkStyle.paddingBottom, 10);
     }
+    /**
+     * Calculates width of a menu item, depending on maximum lines of text allowed.
+     * @param currentLink
+     * @param maxLines
+     * @param linkStyle
+     * @returns
+     */
     changeMenuItemLinkWidth(currentLink, maxLines, linkStyle) {
         this.renderer.setStyle(currentLink, 'white-space', 'nowrap');
         const linkWidth = currentLink.offsetWidth;
@@ -653,7 +743,7 @@ class EclMenuItemComponent extends ECLBaseDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclMenuItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EclMenuItemComponent, isStandalone: false, selector: "ecl-menu-item", inputs: { id: "id", label: "label", toggleAriaLabel: "toggleAriaLabel", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", isCurrent: "isCurrent", linkExtraAttributes: "linkExtraAttributes" }, outputs: { menuItemSelect: "menuItemSelect", menuItemCaret: "menuItemCaret", menuItemHover: "menuItemHover", menuItemHoverOut: "menuItemHoverOut", menuMegaItemSelect: "menuMegaItemSelect", menuItemFocus: "menuItemFocus", menuItemKeydown: "menuItemKeydown", menuMegaLastItemTab: "menuMegaLastItemTab" }, host: { listeners: { "mouseenter": "onItemMouseEnter($event)", "mouseleave": "onItemMouseLeave($event)" }, properties: { "attr.role": "this.role", "class": "this.cssClasses", "class.ecl-menu__item--has-children": "this.hasEclChildrenDataAttribute", "attr.aria-haspopup": "this.hasEclChildrenDataAttribute", "attr.aria-expanded": "this.isAriaExpanded" } }, queries: [{ propertyName: "submenu", first: true, predicate: i0.forwardRef(() => EclMenuMegaComponent), descendants: true }], viewQueries: [{ propertyName: "menuLink", first: true, predicate: ["menuLink"], descendants: true }, { propertyName: "menuButton", first: true, predicate: EclButtonComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (href) {\n    <a eclLink\n        #menuLink\n        variant=\"standalone\"\n        [href]=\"href\"\n        [target]=\"target\"\n        class=\"ecl-menu__link\"\n        [class.ecl-menu__link--current]=\"isCurrent\"\n        [attr.aria-current]=\"ariaCurrent\"\n        (focus)=\"onItemFocus($event)\"\n        (click)=\"onItemClick($event)\"\n        (keydown)=\"onLinkKeydown($event)\">\n        {{ label }}\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </a>\n} @else {\n    <a eclLink\n        #menuLink\n        variant=\"standalone\"\n        [attr.tabindex]=\"tabindex || 0\"\n        [routerLink]=\"routerLink\"\n        [queryParams]=\"queryParams\"\n        [queryParamsHandling]=\"queryParamsHandling\"\n        class=\"ecl-menu__link\"\n        [class.ecl-menu__link--current]=\"isCurrent\"\n        [attr.aria-current]=\"ariaCurrent\"\n        (focus)=\"onItemFocus($event)\"\n        (click)=\"onItemClick($event)\"\n        (keydown)=\"onLinkKeydown($event)\">\n        {{ label }}\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </a>\n}\n\n@if (hasChildren) {\n    @if (isMobileBreakpoint) {\n        <button\n            eclButton\n            isIconOnly\n            variant=\"ghost\"\n            class=\"ecl-menu__button-caret\"\n            type=\"button\"\n            [attr.aria-label]=\"toggleAriaLabel || 'Access item children'\"\n            (click)=\"onItemCaretClick($event)\"\n            (keydown)=\"onButtonKeydown($event)\">\n            <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n        </button>\n    } @else {\n        <button\n            eclButton\n            isIconOnly\n            variant=\"ghost\"\n            class=\"ecl-menu__button-caret\"\n            type=\"button\"\n            [attr.aria-label]=\"toggleAriaLabel || 'Access item children'\"\n            [attr.aria-expanded]=\"isAriaExpanded\"\n            (keydown)=\"onButtonKeydown($event)\">\n            <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n        </button>\n    }\n}\n\n<ng-content select=\"ecl-menu-mega\"></ng-content>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "component", type: i4.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "component", type: i3.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: i4$1.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EclMenuItemComponent, isStandalone: false, selector: "ecl-menu-item", inputs: { id: "id", label: "label", toggleAriaLabel: "toggleAriaLabel", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", isCurrent: "isCurrent", linkExtraAttributes: "linkExtraAttributes" }, outputs: { menuItemSelect: "menuItemSelect", menuItemCaret: "menuItemCaret", menuItemHover: "menuItemHover", menuItemHoverOut: "menuItemHoverOut", menuMegaItemSelect: "menuMegaItemSelect", menuItemFocus: "menuItemFocus", menuItemKeydown: "menuItemKeydown", menuMegaLastItemTab: "menuMegaLastItemTab" }, host: { listeners: { "mouseenter": "onItemMouseEnter($event)", "mouseleave": "onItemMouseLeave($event)" }, properties: { "attr.role": "this.role", "class": "this.cssClasses", "class.ecl-menu__item--has-children": "this.hasEclChildrenDataAttribute", "attr.aria-haspopup": "this.hasEclChildrenDataAttribute", "attr.aria-expanded": "this.isAriaExpanded" } }, queries: [{ propertyName: "submenu", first: true, predicate: i0.forwardRef(() => EclMenuMegaComponent), descendants: true }], viewQueries: [{ propertyName: "menuLink", first: true, predicate: ["menuLink"], descendants: true }, { propertyName: "menuButton", first: true, predicate: EclButtonComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (href) {\n    <a eclLink\n        #menuLink\n        variant=\"standalone\"\n        [href]=\"href\"\n        [target]=\"target\"\n        class=\"ecl-menu__link\"\n        [class.ecl-menu__link--current]=\"isCurrent\"\n        [attr.aria-current]=\"ariaCurrent\"\n        (focus)=\"onItemFocus($event)\"\n        (click)=\"onItemClick($event)\"\n        (keydown)=\"onLinkKeydown($event)\">\n        {{ label }}\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </a>\n} @else {\n    <a eclLink\n        #menuLink\n        variant=\"standalone\"\n        [attr.tabindex]=\"tabindex || 0\"\n        [routerLink]=\"routerLink\"\n        [queryParams]=\"queryParams\"\n        [queryParamsHandling]=\"queryParamsHandling\"\n        class=\"ecl-menu__link\"\n        [class.ecl-menu__link--current]=\"isCurrent\"\n        [attr.aria-current]=\"ariaCurrent\"\n        (focus)=\"onItemFocus($event)\"\n        (click)=\"onItemClick($event)\"\n        (keydown)=\"onLinkKeydown($event)\">\n        {{ label }}\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </a>\n}\n\n@if (hasChildren) {\n    @if (isMobileBreakpoint) {\n        <button\n            eclButton\n            isIconOnly\n            variant=\"ghost\"\n            class=\"ecl-menu__button-caret\"\n            type=\"button\"\n            [attr.aria-label]=\"toggleAriaLabel || 'Access item children'\"\n            (click)=\"onItemCaretClick($event)\"\n            (keydown)=\"onButtonKeydown($event)\">\n            <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n        </button>\n    } @else {\n        <button\n            eclButton\n            isIconOnly\n            variant=\"ghost\"\n            class=\"ecl-menu__button-caret\"\n            type=\"button\"\n            [attr.aria-label]=\"toggleAriaLabel || 'Access item children'\"\n            [attr.aria-expanded]=\"isAriaExpanded\"\n            (keydown)=\"onButtonKeydown($event)\">\n            <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n        </button>\n    }\n}\n\n<ng-content select=\"ecl-menu-mega\"></ng-content>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ 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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclMenuItemComponent, decorators: [{
             type: Component,
@@ -726,6 +816,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['mouseleave', ['$event']]
             }] } });
 
+/**
+ * The horizontal menu is used as a primary navigation and it can display up to 2 levels.
+ * It directs users to the pages where they need to visit.
+ */
 class EclMenuComponent extends ECLBaseDirective {
     get cssClasses() {
         return [
@@ -734,7 +828,7 @@ class EclMenuComponent extends ECLBaseDirective {
             this.isRtl ? 'ecl-menu--rtl' : '',
         ].join(' ');
     }
-    constructor(el, differs, cdkBreakpointObserver, renderer, eclRtlService, eclUserDeviceService, eclHeaderMenuComunicationService, platformId) {
+    constructor(el, differs, cdkBreakpointObserver, renderer, eclRtlService, eclUserDeviceService, platformId) {
         super();
         this.el = el;
         this.differs = differs;
@@ -742,12 +836,18 @@ class EclMenuComponent extends ECLBaseDirective {
         this.renderer = renderer;
         this.eclRtlService = eclRtlService;
         this.eclUserDeviceService = eclUserDeviceService;
-        this.eclHeaderMenuComunicationService = eclHeaderMenuComunicationService;
         this.platformId = platformId;
+        /**
+         * Adds some additional styling for the menu items' labels.
+         *  Depending on that value, the labels can drop on 2-3 lines, if they are longer.
+         */
         this.maxLines = 0;
         this.menuItemSelect = new EventEmitter();
         this.openHamburgerMenu = new EventEmitter();
         this.isHamburgerMenuOpened = false;
+        /**
+         * The default role is 'navigation', should not be changed.
+         */
         this.role = 'navigation';
         this.isTablet = false;
         this.isMenuHidden = false;
@@ -755,6 +855,9 @@ class EclMenuComponent extends ECLBaseDirective {
         this.hasOverflow = false;
         this.isShowPrevBtn = false;
         this.isShowNextBtn = false;
+        /**
+         * Show/hide the specific class for the 'previous' and 'next' buttons.
+         */
         this.isPrevBtnCurrentClass = false;
         this.menuListStyleRight = 'auto';
         this.menuListStyleLeft = 'auto';
@@ -767,9 +870,6 @@ class EclMenuComponent extends ECLBaseDirective {
         this.TIMEOUT_INTERVAL = 150;
         this.differ = this.differs.find([]).create();
         afterNextRender(() => {
-            eclHeaderMenuComunicationService.bottomSpaceY$.pipe(takeUntil(this.destroy$)).subscribe(value => {
-                this.parentHeaderBottomSpaceY = value;
-            });
             clearTimeout(this.resizeTimer);
             this.observeElementSizeChanges();
             this.resizeTimer = setTimeout(() => {
@@ -779,6 +879,10 @@ class EclMenuComponent extends ECLBaseDirective {
             this.checkIsTabletDevice();
         });
     }
+    /**
+     * On 'esc' key clicked - close/hide any open menus.
+     * @param event
+     */
     keyEvent(event) {
         if (event.key === 'Escape') {
             this.closeRootMenu();
@@ -794,6 +898,7 @@ class EclMenuComponent extends ECLBaseDirective {
         }
     }
     ngAfterContentInit() {
+        // Subscribe to all menu items' events.
         this.observeRootMenuItemsChanges();
     }
     ngOnDestroy() {
@@ -802,19 +907,25 @@ class EclMenuComponent extends ECLBaseDirective {
         this.hammertime?.off('swipeleft');
         this.hammertime?.off('swiperight');
     }
+    /**
+     * Swipe left gesture handling
+     */
     onSwipeLeft() {
         if (this.isMobileBreakpoint) {
             this.onOpenHamburgerMenu();
         }
     }
+    /**
+     * Swipe right gesture handling
+     */
     onSwipeRight() {
         if (this.isMobileBreakpoint) {
             this.onCloseHamburgerMenu();
         }
     }
-    onOverlayClick() {
-        this.onCloseHamburgerMenu();
-    }
+    /**
+     * Manages state on open/close button click, used in mobile view.
+     */
     onMenuOpenCloseClick(evt) {
         if (this.isHamburgerMenuOpened) {
             this.onCloseHamburgerMenu();
@@ -824,19 +935,31 @@ class EclMenuComponent extends ECLBaseDirective {
         }
         evt.preventDefault();
     }
+    /**
+     * Manages state on close button click, used in mobile view, in EU theme.
+     */
     onMenuCloseClick(evt) {
         this.onCloseHamburgerMenu();
         this.closeRootMenu();
         evt.preventDefault();
     }
+    /**
+     * Manages state on back button click, used in mobile view.
+     */
     onMenuBackClick(evt) {
         this.closeRootMenu();
         evt.preventDefault();
     }
+    /**
+     * Manages state on 'previous' button click. Used in desktop view. Slides the items and shows the previous hidden items.
+     */
     onPrevBtnClick() {
         this.slideMenuInitialState();
         this.refreshDisplay();
     }
+    /**
+     * Manages state on 'next' button click. Used in desktop view. Slides the items and shows the next hidden items.
+     */
     onNextBtnClick() {
         this.isShowPrevBtn = true;
         this.isShowNextBtn = false;
@@ -848,6 +971,11 @@ class EclMenuComponent extends ECLBaseDirective {
         }
         this.refreshDisplay();
     }
+    /**
+     * Postions overlay, depending on parent header position.
+     * This method is called from parent header, which uses the menu for navigation.
+     * @param bottomSpaceY
+     */
     positionMenuOverlay(bottomSpaceY) {
         if (this.isMobileBreakpoint && bottomSpaceY) {
             this.overlayStyleTop = bottomSpaceY;
@@ -926,6 +1054,9 @@ class EclMenuComponent extends ECLBaseDirective {
             this.manageOverflowBeginning();
         }
     }
+    /**
+     * Manage items visibility when using overlfow. For both rtl and ltr cases.
+     */
     manageOverflowBeginning() {
         if (this.isRtl) {
             this.eclRootMenuItems
@@ -939,6 +1070,9 @@ class EclMenuComponent extends ECLBaseDirective {
                 .forEach((el) => (el.isVisible = true));
         }
     }
+    /**
+     * Manage items visibility when using overlfow, with the 'next' button. For both rtl and ltr cases.
+     */
     manageOverflowEnd() {
         this.isShowNextBtn = true;
         if (this.isRtl) {
@@ -1318,13 +1452,13 @@ class EclMenuComponent extends ECLBaseDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: i1$1.BreakpointObserver }, { token: i0.Renderer2 }, { token: i2$1.EclRtlService }, { token: i2$1.EclUserDeviceService }, { token: i3$1.EclHeaderMenuComunicationService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EclMenuComponent, isStandalone: false, selector: "ecl-menu", inputs: { maxLines: ["maxLines", "maxLines", numberAttribute] }, outputs: { menuItemSelect: "menuItemSelect", openHamburgerMenu: "openHamburgerMenu" }, host: { listeners: { "keydown": "keyEvent($event)" }, properties: { "class": "this.cssClasses", "attr.aria-expanded": "this.isHamburgerMenuOpened", "attr.role": "this.role", "class.ecl-menu--forced-mobile": "this.isTablet", "class.ecl-menu--forced-close": "this.isMenuHidden" } }, queries: [{ propertyName: "eclRootMenuItems", predicate: EclMenuItemComponent }], viewQueries: [{ propertyName: "innerSection", first: true, predicate: ["innerSection"], descendants: true }, { propertyName: "itemsList", first: true, predicate: ["itemsList"], descendants: true }, { propertyName: "btnPrevious", first: true, predicate: ["btnPrevious"], descendants: true }, { propertyName: "btnNext", first: true, predicate: ["btnNext"], descendants: true }, { propertyName: "openCloseButton", first: true, predicate: ["openCloseButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-menu__overlay\" (click)=\"onOverlayClick()\" [style.top.px]=\"overlayStyleTop\"></div>\n<div class=\"ecl-container ecl-menu__container\">\n    <button #openCloseButton eclButton isIconOnly variant=\"tertiary\" type=\"button\" class=\"ecl-menu__open\"\n        (click)=\"onMenuOpenCloseClick($event)\" [attr.aria-expanded]=\"isHamburgerMenuOpened\">\n        <ecl-icon icon=\"hamburger\" size=\"m\"></ecl-icon>\n        <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        @if (isHamburgerMenuOpened) {\n        <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n        } @else {\n        <span eclButtonLabel>{{ 'ecl.menu.MENU' | translate }}</span>\n        }\n    </button>\n\n    <section\n        class=\"ecl-menu__inner\"\n        #innerSection\n        [class.ecl-menu__inner--expanded]=\"isMenuExpandedInMobile\"\n        [class.ecl-menu__inner--has-overflow]=\"hasOverflow\"\n        aria-label=\"Menu\" [style.top.px]=\"innerStyleTop\">\n        <header class=\"ecl-menu__inner-header\">\n            <button\n                eclButton\n                variant=\"ghost\"\n                class=\"ecl-menu__close\"\n                containerStyleClass=\"ecl-menu__close-container\"\n                (click)=\"onMenuCloseClick($event)\">\n                <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n                <ecl-icon icon=\"close\" size=\"s\"></ecl-icon>\n            </button>\n\n            <div class=\"ecl-menu__title\">{{ 'ecl.menu.MENU' | translate }}</div>\n\n            <button eclButton variant=\"ghost\" class=\"ecl-menu__back\" (click)=\"onMenuBackClick($event)\">\n                <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n                <span eclButtonLabel>{{ 'ecl.common.BACK' | translate }}</span>\n            </button>\n        </header>\n        <button\n            eclButton\n            #btnPrevious\n            tabindex=\"-1\"\n            variant=\"ghost\"\n            isIconOnly\n            class=\"ecl-menu__item ecl-menu__items-previous\"\n            [class.ecl-menu__item--current]=\"isPrevBtnCurrentClass\"\n            [style.display]=\"isShowPrevBtn ? 'flex' : 'none'\"\n            (click)=\"onPrevBtnClick()\">\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n            <span eclButtonLabel class=\"ecl-u-sr-only\">{{ 'ecl.common.PREVIOUS' | translate }}</span>\n        </button>\n        <button\n            eclButton\n            #btnNext\n            variant=\"ghost\"\n            tabindex=\"-1\"\n            isIconOnly\n            class=\"ecl-menu__item ecl-menu__items-next\"\n            [class.ecl-menu__item--current]=\"!isPrevBtnCurrentClass\"\n            [style.display]=\"isShowNextBtn ? 'flex' : 'none'\"\n            (click)=\"onNextBtnClick()\">\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-90\"></ecl-icon>\n            <span eclButtonLabel class=\"ecl-u-sr-only\">{{ 'ecl.common.NEXT' | translate }}</span>\n        </button>\n        <ul class=\"ecl-menu__list\" #itemsList [style.right]=\"menuListStyleRight\" [style.left]=\"menuListStyleLeft\">\n            <ng-content></ng-content>\n        </ul>\n    </section>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: i4.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i4.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i3.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: i1$1.BreakpointObserver }, { token: i0.Renderer2 }, { token: i2$1.EclRtlService }, { token: i2$1.EclUserDeviceService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EclMenuComponent, isStandalone: false, selector: "ecl-menu", inputs: { maxLines: ["maxLines", "maxLines", numberAttribute] }, outputs: { menuItemSelect: "menuItemSelect", openHamburgerMenu: "openHamburgerMenu" }, host: { listeners: { "keydown": "keyEvent($event)" }, properties: { "class": "this.cssClasses", "attr.aria-expanded": "this.isHamburgerMenuOpened", "attr.role": "this.role", "class.ecl-menu--forced-mobile": "this.isTablet", "class.ecl-menu--forced-close": "this.isMenuHidden" } }, queries: [{ propertyName: "eclRootMenuItems", predicate: EclMenuItemComponent }], viewQueries: [{ propertyName: "innerSection", first: true, predicate: ["innerSection"], descendants: true }, { propertyName: "itemsList", first: true, predicate: ["itemsList"], descendants: true }, { propertyName: "btnPrevious", first: true, predicate: ["btnPrevious"], descendants: true }, { propertyName: "btnNext", first: true, predicate: ["btnNext"], descendants: true }, { propertyName: "openCloseButton", first: true, predicate: ["openCloseButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-menu__overlay\" [style.top.px]=\"overlayStyleTop\"></div>\n<div class=\"ecl-container ecl-menu__container\">\n    <button #openCloseButton eclButton isIconOnly variant=\"tertiary\" type=\"button\" class=\"ecl-menu__open\"\n        (click)=\"onMenuOpenCloseClick($event)\" [attr.aria-expanded]=\"isHamburgerMenuOpened\">\n        <ecl-icon icon=\"hamburger\" size=\"m\"></ecl-icon>\n        <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        @if (isHamburgerMenuOpened) {\n        <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n        } @else {\n        <span eclButtonLabel>{{ 'ecl.menu.MENU' | translate }}</span>\n        }\n    </button>\n\n    <section\n        class=\"ecl-menu__inner\"\n        #innerSection\n        [class.ecl-menu__inner--expanded]=\"isMenuExpandedInMobile\"\n        [class.ecl-menu__inner--has-overflow]=\"hasOverflow\"\n        aria-label=\"Menu\" [style.top.px]=\"innerStyleTop\">\n        <header class=\"ecl-menu__inner-header\">\n            <button\n                eclButton\n                variant=\"ghost\"\n                class=\"ecl-menu__close\"\n                containerStyleClass=\"ecl-menu__close-container\"\n                (click)=\"onMenuCloseClick($event)\">\n                <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n                <ecl-icon icon=\"close\" size=\"s\"></ecl-icon>\n            </button>\n\n            <div class=\"ecl-menu__title\">{{ 'ecl.menu.MENU' | translate }}</div>\n\n            <button eclButton variant=\"ghost\" class=\"ecl-menu__back\" (click)=\"onMenuBackClick($event)\">\n                <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n                <span eclButtonLabel>{{ 'ecl.common.BACK' | translate }}</span>\n            </button>\n        </header>\n        <button\n            eclButton\n            #btnPrevious\n            tabindex=\"-1\"\n            variant=\"ghost\"\n            isIconOnly\n            class=\"ecl-menu__item ecl-menu__items-previous\"\n            [class.ecl-menu__item--current]=\"isPrevBtnCurrentClass\"\n            [style.display]=\"isShowPrevBtn ? 'flex' : 'none'\"\n            (click)=\"onPrevBtnClick()\">\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n            <span eclButtonLabel class=\"ecl-u-sr-only\">{{ 'ecl.common.PREVIOUS' | translate }}</span>\n        </button>\n        <button\n            eclButton\n            #btnNext\n            variant=\"ghost\"\n            tabindex=\"-1\"\n            isIconOnly\n            class=\"ecl-menu__item ecl-menu__items-next\"\n            [class.ecl-menu__item--current]=\"!isPrevBtnCurrentClass\"\n            [style.display]=\"isShowNextBtn ? 'flex' : 'none'\"\n            (click)=\"onNextBtnClick()\">\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-90\"></ecl-icon>\n            <span eclButtonLabel class=\"ecl-u-sr-only\">{{ 'ecl.common.NEXT' | translate }}</span>\n        </button>\n        <ul class=\"ecl-menu__list\" #itemsList [style.right]=\"menuListStyleRight\" [style.left]=\"menuListStyleLeft\">\n            <ng-content></ng-content>\n        </ul>\n    </section>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ 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"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-menu', standalone: false, template: "<div class=\"ecl-menu__overlay\" (click)=\"onOverlayClick()\" [style.top.px]=\"overlayStyleTop\"></div>\n<div class=\"ecl-container ecl-menu__container\">\n    <button #openCloseButton eclButton isIconOnly variant=\"tertiary\" type=\"button\" class=\"ecl-menu__open\"\n        (click)=\"onMenuOpenCloseClick($event)\" [attr.aria-expanded]=\"isHamburgerMenuOpened\">\n        <ecl-icon icon=\"hamburger\" size=\"m\"></ecl-icon>\n        <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        @if (isHamburgerMenuOpened) {\n        <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n        } @else {\n        <span eclButtonLabel>{{ 'ecl.menu.MENU' | translate }}</span>\n        }\n    </button>\n\n    <section\n        class=\"ecl-menu__inner\"\n        #innerSection\n        [class.ecl-menu__inner--expanded]=\"isMenuExpandedInMobile\"\n        [class.ecl-menu__inner--has-overflow]=\"hasOverflow\"\n        aria-label=\"Menu\" [style.top.px]=\"innerStyleTop\">\n        <header class=\"ecl-menu__inner-header\">\n            <button\n                eclButton\n                variant=\"ghost\"\n                class=\"ecl-menu__close\"\n                containerStyleClass=\"ecl-menu__close-container\"\n                (click)=\"onMenuCloseClick($event)\">\n                <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n                <ecl-icon icon=\"close\" size=\"s\"></ecl-icon>\n            </button>\n\n            <div class=\"ecl-menu__title\">{{ 'ecl.menu.MENU' | translate }}</div>\n\n            <button eclButton variant=\"ghost\" class=\"ecl-menu__back\" (click)=\"onMenuBackClick($event)\">\n                <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n                <span eclButtonLabel>{{ 'ecl.common.BACK' | translate }}</span>\n            </button>\n        </header>\n        <button\n            eclButton\n            #btnPrevious\n            tabindex=\"-1\"\n            variant=\"ghost\"\n            isIconOnly\n            class=\"ecl-menu__item ecl-menu__items-previous\"\n            [class.ecl-menu__item--current]=\"isPrevBtnCurrentClass\"\n            [style.display]=\"isShowPrevBtn ? 'flex' : 'none'\"\n            (click)=\"onPrevBtnClick()\">\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n            <span eclButtonLabel class=\"ecl-u-sr-only\">{{ 'ecl.common.PREVIOUS' | translate }}</span>\n        </button>\n        <button\n            eclButton\n            #btnNext\n            variant=\"ghost\"\n            tabindex=\"-1\"\n            isIconOnly\n            class=\"ecl-menu__item ecl-menu__items-next\"\n            [class.ecl-menu__item--current]=\"!isPrevBtnCurrentClass\"\n            [style.display]=\"isShowNextBtn ? 'flex' : 'none'\"\n            (click)=\"onNextBtnClick()\">\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-90\"></ecl-icon>\n            <span eclButtonLabel class=\"ecl-u-sr-only\">{{ 'ecl.common.NEXT' | translate }}</span>\n        </button>\n        <ul class=\"ecl-menu__list\" #itemsList [style.right]=\"menuListStyleRight\" [style.left]=\"menuListStyleLeft\">\n            <ng-content></ng-content>\n        </ul>\n    </section>\n</div>\n", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: i1$1.BreakpointObserver }, { type: i0.Renderer2 }, { type: i2$1.EclRtlService }, { type: i2$1.EclUserDeviceService }, { type: i3$1.EclHeaderMenuComunicationService }, { type: undefined, decorators: [{
+            args: [{ selector: 'ecl-menu', standalone: false, template: "<div class=\"ecl-menu__overlay\" [style.top.px]=\"overlayStyleTop\"></div>\n<div class=\"ecl-container ecl-menu__container\">\n    <button #openCloseButton eclButton isIconOnly variant=\"tertiary\" type=\"button\" class=\"ecl-menu__open\"\n        (click)=\"onMenuOpenCloseClick($event)\" [attr.aria-expanded]=\"isHamburgerMenuOpened\">\n        <ecl-icon icon=\"hamburger\" size=\"m\"></ecl-icon>\n        <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        @if (isHamburgerMenuOpened) {\n        <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n        } @else {\n        <span eclButtonLabel>{{ 'ecl.menu.MENU' | translate }}</span>\n        }\n    </button>\n\n    <section\n        class=\"ecl-menu__inner\"\n        #innerSection\n        [class.ecl-menu__inner--expanded]=\"isMenuExpandedInMobile\"\n        [class.ecl-menu__inner--has-overflow]=\"hasOverflow\"\n        aria-label=\"Menu\" [style.top.px]=\"innerStyleTop\">\n        <header class=\"ecl-menu__inner-header\">\n            <button\n                eclButton\n                variant=\"ghost\"\n                class=\"ecl-menu__close\"\n                containerStyleClass=\"ecl-menu__close-container\"\n                (click)=\"onMenuCloseClick($event)\">\n                <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n                <ecl-icon icon=\"close\" size=\"s\"></ecl-icon>\n            </button>\n\n            <div class=\"ecl-menu__title\">{{ 'ecl.menu.MENU' | translate }}</div>\n\n            <button eclButton variant=\"ghost\" class=\"ecl-menu__back\" (click)=\"onMenuBackClick($event)\">\n                <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n                <span eclButtonLabel>{{ 'ecl.common.BACK' | translate }}</span>\n            </button>\n        </header>\n        <button\n            eclButton\n            #btnPrevious\n            tabindex=\"-1\"\n            variant=\"ghost\"\n            isIconOnly\n            class=\"ecl-menu__item ecl-menu__items-previous\"\n            [class.ecl-menu__item--current]=\"isPrevBtnCurrentClass\"\n            [style.display]=\"isShowPrevBtn ? 'flex' : 'none'\"\n            (click)=\"onPrevBtnClick()\">\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n            <span eclButtonLabel class=\"ecl-u-sr-only\">{{ 'ecl.common.PREVIOUS' | translate }}</span>\n        </button>\n        <button\n            eclButton\n            #btnNext\n            variant=\"ghost\"\n            tabindex=\"-1\"\n            isIconOnly\n            class=\"ecl-menu__item ecl-menu__items-next\"\n            [class.ecl-menu__item--current]=\"!isPrevBtnCurrentClass\"\n            [style.display]=\"isShowNextBtn ? 'flex' : 'none'\"\n            (click)=\"onNextBtnClick()\">\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-90\"></ecl-icon>\n            <span eclButtonLabel class=\"ecl-u-sr-only\">{{ 'ecl.common.NEXT' | translate }}</span>\n        </button>\n        <ul class=\"ecl-menu__list\" #itemsList [style.right]=\"menuListStyleRight\" [style.left]=\"menuListStyleLeft\">\n            <ng-content></ng-content>\n        </ul>\n    </section>\n</div>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: i1$1.BreakpointObserver }, { type: i0.Renderer2 }, { type: i2$1.EclRtlService }, { type: i2$1.EclUserDeviceService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
                 }] }], propDecorators: { maxLines: [{