@eui/ecl 16.2.2 → 16.2.3-snapshot-1694704869693

package/fesm2022/eui-ecl.mjs

@@ -17,6 +17,30 @@ import * as i2$2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i1$2 from '@angular/cdk/layout';
 import { LayoutModule, Breakpoints } from '@angular/cdk/layout';
+import '@angular/common/locales/global/bg';
+import '@angular/common/locales/global/da';
+import '@angular/common/locales/global/en';
+import '@angular/common/locales/global/et';
+import '@angular/common/locales/global/fr';
+import '@angular/common/locales/global/hr';
+import '@angular/common/locales/global/lv';
+import '@angular/common/locales/global/hu';
+import '@angular/common/locales/global/nl';
+import '@angular/common/locales/global/pt';
+import '@angular/common/locales/global/sk';
+import '@angular/common/locales/global/fi';
+import '@angular/common/locales/global/cs';
+import '@angular/common/locales/global/de';
+import '@angular/common/locales/global/el';
+import '@angular/common/locales/global/es';
+import '@angular/common/locales/global/ga';
+import '@angular/common/locales/global/it';
+import '@angular/common/locales/global/lt';
+import '@angular/common/locales/global/mt';
+import '@angular/common/locales/global/pl';
+import '@angular/common/locales/global/ro';
+import '@angular/common/locales/global/sl';
+import '@angular/common/locales/global/sv';
 import * as Pikaday from 'pikaday';
 import * as i1$3 from '@angular/platform-browser';
 import * as Hammer from 'hammerjs';
@@ -764,10 +788,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
             }] } });
 
 class EclButtonComponent extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.variant = 'primary';
-    }
     get cssClasses() {
         return [
             super.getCssClasses('ecl-button'),
@@ -777,6 +797,11 @@ class EclButtonComponent extends ECLBaseDirective {
     get hasIcon() {
         return this.iconComponents;
     }
+    constructor(el) {
+        super();
+        this.el = el;
+        this.variant = 'primary';
+    }
     ngAfterViewInit() {
         if (this.iconComponents) {
             setTimeout(() => {
@@ -792,13 +817,13 @@ class EclButtonComponent extends ECLBaseDirective {
             });
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: EclButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: EclButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: { variant: "variant", containerStyleClass: "containerStyleClass" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "iconComponents", predicate: i0.forwardRef(function () { return EclIconComponent; }) }], usesInheritance: true, ngImport: i0, template: "<span *ngIf=\"hasIcon\" class=\"ecl-button__container {{ containerStyleClass }}\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</span>\n<ng-container *ngIf=\"!hasIcon\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-container>\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: EclButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'button[eclButton], button[ecl-button], a[eclButton]', template: "<span *ngIf=\"hasIcon\" class=\"ecl-button__container {{ containerStyleClass }}\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</span>\n<ng-container *ngIf=\"!hasIcon\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-container>\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>" }]
-        }], propDecorators: { variant: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { variant: [{
                 type: Input
             }], containerStyleClass: [{
                 type: Input
@@ -6653,7 +6678,9 @@ class EclDateBlockComponent extends ECLBaseDirective {
         this.translateService = translateService;
         this.dateFormat = 'dd/M/yyyy';
         this.variant = null;
+        this.locale = 'en';
         this._datetime = null;
+        this.locale = translateService.currentLang;
     }
     getDatetime() {
         return this._datetime || this.getFormattedDate(this.date, this.dateFormat);
@@ -6667,11 +6694,11 @@ class EclDateBlockComponent extends ECLBaseDirective {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: EclDateBlockComponent, deps: [{ token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: EclDateBlockComponent, selector: "time[eclDateBlock]", inputs: { date: "date", dateFormat: "dateFormat", variant: "variant", day: "day", month: "month", monthTitle: "monthTitle", year: "year", datetime: "datetime" }, host: { properties: { "class": "this.cssClasses", "attr.datetime": "this.datetime" } }, usesInheritance: true, ngImport: i0, template: "<span class=\"ecl-date-block__daytime\">{{ datetime || (date | date:dateFormat) }}</span>\n<span class=\"ecl-date-block__day\">{{ day || (date | date:'d') }}</span>\n<abbr [title]=\"monthTitle || month || (date | date:'MMMM')\" class=\"ecl-date-block__month\">\n  {{ month || (date | date:'MMM') }}\n</abbr>\n<span class=\"ecl-date-block__year\">{{ year || (date | date:'yyyy') }}</span>", dependencies: [{ kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: EclDateBlockComponent, selector: "time[eclDateBlock]", inputs: { date: "date", dateFormat: "dateFormat", variant: "variant", day: "day", month: "month", monthTitle: "monthTitle", year: "year", datetime: "datetime" }, host: { properties: { "class": "this.cssClasses", "attr.datetime": "this.datetime" } }, usesInheritance: true, ngImport: i0, template: "<span class=\"ecl-date-block__daytime\">{{ datetime || (date | date:dateFormat) }}</span>\n<span class=\"ecl-date-block__day\">{{ day || (date | date:'d') }}</span>\n<abbr [title]=\"monthTitle || month || (date | date:'MMMM':'':locale)\" class=\"ecl-date-block__month\">\n  {{ month || (date | date:'MMM':'':locale) }}\n</abbr>\n<span class=\"ecl-date-block__year\">{{ year || (date | date:'yyyy') }}</span>", dependencies: [{ kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: EclDateBlockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'time[eclDateBlock]', template: "<span class=\"ecl-date-block__daytime\">{{ datetime || (date | date:dateFormat) }}</span>\n<span class=\"ecl-date-block__day\">{{ day || (date | date:'d') }}</span>\n<abbr [title]=\"monthTitle || month || (date | date:'MMMM')\" class=\"ecl-date-block__month\">\n  {{ month || (date | date:'MMM') }}\n</abbr>\n<span class=\"ecl-date-block__year\">{{ year || (date | date:'yyyy') }}</span>" }]
+            args: [{ selector: 'time[eclDateBlock]', template: "<span class=\"ecl-date-block__daytime\">{{ datetime || (date | date:dateFormat) }}</span>\n<span class=\"ecl-date-block__day\">{{ day || (date | date:'d') }}</span>\n<abbr [title]=\"monthTitle || month || (date | date:'MMMM':'':locale)\" class=\"ecl-date-block__month\">\n  {{ month || (date | date:'MMM':'':locale) }}\n</abbr>\n<span class=\"ecl-date-block__year\">{{ year || (date | date:'yyyy') }}</span>" }]
         }], ctorParameters: function () { return [{ type: i2$1.TranslateService }]; }, propDecorators: { date: [{
                 type: Input
             }], dateFormat: [{
@@ -9231,9 +9258,10 @@ class EclMenuMegaComponent extends ECLBaseDirective {
             super.getCssClasses('ecl-menu__mega'),
         ].join(' ');
     }
-    constructor(differs) {
+    constructor(differs, el) {
         super();
         this.differs = differs;
+        this.el = el;
         this.isRtl = false;
         this.menuItemSelect = new EventEmitter();
         this.destroy$ = new Subject();
@@ -9286,8 +9314,8 @@ class EclMenuMegaComponent extends ECLBaseDirective {
     sendMenuItemSelectEvent(evt) {
         this.menuItemSelect.next(new EclMenuItemSelectEvent(evt.menuItem, evt.domEvent));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: EclMenuMegaComponent, deps: [{ token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: EclMenuMegaComponent, selector: "ecl-menu-mega", inputs: { isRtl: "isRtl" }, outputs: { menuItemSelect: "menuItemSelect" }, host: { properties: { "class.ecl-menu__mega--rtl": "this.isRtl", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclMenuMegaItems", predicate: EclMenuMegaItemComponent }], usesInheritance: true, ngImport: i0, template: "<ul class=\"ecl-menu__sublist\">\n    <ng-content></ng-content>\n</ul>\n" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: EclMenuMegaComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: EclMenuMegaComponent, selector: "ecl-menu-mega", inputs: { isRtl: "isRtl" }, outputs: { menuItemSelect: "menuItemSelect" }, host: { properties: { "class.ecl-menu__mega--rtl": "this.isRtl", "style.left.px": "this.offsetLeft", "style.right.px": "this.offsetRight", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclMenuMegaItems", predicate: EclMenuMegaItemComponent }], usesInheritance: true, ngImport: i0, template: "<ul class=\"ecl-menu__sublist\">\n    <ng-content></ng-content>\n</ul>\n" }); }
 }
 __decorate([
     coerceBoolean
@@ -9295,7 +9323,7 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: EclMenuMegaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-menu-mega', template: "<ul class=\"ecl-menu__sublist\">\n    <ng-content></ng-content>\n</ul>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.IterableDiffers }]; }, propDecorators: { isRtl: [{
+        }], ctorParameters: function () { return [{ type: i0.IterableDiffers }, { type: i0.ElementRef }]; }, propDecorators: { isRtl: [{
                 type: Input
             }, {
                 type: HostBinding,
@@ -9305,29 +9333,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
                 args: [EclMenuMegaItemComponent]
             }], menuItemSelect: [{
                 type: Output
+            }], offsetLeft: [{
+                type: HostBinding,
+                args: ['style.left.px']
+            }], offsetRight: [{
+                type: HostBinding,
+                args: ['style.right.px']
             }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
 class EclMenuItemComponent extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.routerLink = null;
-        this.queryParams = null;
-        this.queryParamsHandling = null;
-        this.href = '';
-        this.target = '';
-        this.isCurrent = false;
-        this.isHovered = false;
-        this.menuItemSelect = new EventEmitter();
-        this.menuItemCaret = new EventEmitter();
-        this.menuItemHover = new EventEmitter();
-        this.menuItemHoverOut = new EventEmitter();
-        this.menuMegaItemSelect = new EventEmitter();
-        this.menuItemFocus = new EventEmitter();
-        this.destroy$ = new Subject();
-    }
     get cssClasses() {
         return [
             super.getCssClasses('ecl-menu__item'),
@@ -9348,6 +9365,28 @@ class EclMenuItemComponent extends ECLBaseDirective {
     get children() {
         return this.hasChildren ? this.submenu.eclMenuMegaItems.toArray() : [];
     }
+    constructor(el, renderer, arf) {
+        super();
+        this.el = el;
+        this.renderer = renderer;
+        this.arf = arf;
+        this.routerLink = null;
+        this.queryParams = null;
+        this.queryParamsHandling = null;
+        this.href = '';
+        this.target = '';
+        this.isCurrent = false;
+        this.isHovered = false;
+        this.isVisible = true;
+        this.isFull = false;
+        this.menuItemSelect = new EventEmitter();
+        this.menuItemCaret = new EventEmitter();
+        this.menuItemHover = new EventEmitter();
+        this.menuItemHoverOut = new EventEmitter();
+        this.menuMegaItemSelect = new EventEmitter();
+        this.menuItemFocus = new EventEmitter();
+        this.destroy$ = new Subject();
+    }
     onItemFocus(evt) {
         this.menuItemFocus.next(new EclMenuItemFocusEvent(this, evt));
     }
@@ -9382,6 +9421,52 @@ class EclMenuItemComponent extends ECLBaseDirective {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
     }
+    checkMenuItem(maxLines, isMobileBreakpoint) {
+        if (maxLines < 1)
+            return;
+        const currentItem = this.el.nativeElement;
+        const currentLink = this.menuLink.nativeElement;
+        if (isMobileBreakpoint) {
+            currentLink.style.width = '100%';
+            return;
+        }
+        this.renderer.setStyle(currentItem, 'alignItems', 'flex-start');
+        const linkStyle = window.getComputedStyle(currentLink);
+        const maxHeight = this.getMenuItemLinkMaxHeight(linkStyle, maxLines);
+        if (currentLink.offsetHeight > maxHeight) {
+            this.changeMenuItemLinkWidth(currentLink, maxLines, linkStyle);
+        }
+        this.renderer.removeStyle(currentItem, 'alignItems');
+    }
+    getMenuItemLinkMaxHeight(linkStyle, maxLines) {
+        return parseInt(linkStyle.lineHeight, 10) * maxLines +
+            parseInt(linkStyle.paddingTop, 10) +
+            parseInt(linkStyle.paddingBottom, 10);
+    }
+    changeMenuItemLinkWidth(currentLink, maxLines, linkStyle) {
+        this.renderer.setStyle(currentLink, 'white-space', 'nowrap');
+        const linkWidth = currentLink.offsetWidth;
+        if (maxLines === 1) {
+            currentLink.style.width = `${linkWidth + parseInt(linkStyle.paddingLeft, 10) +
+                parseInt(linkStyle.paddingRight, 10)}px`;
+            this.renderer.removeStyle(currentLink, 'white-space');
+            return;
+        }
+        const textSize = currentLink.text.length;
+        const letterWidth = Math.ceil(linkWidth / textSize);
+        const wordsArray = currentLink.text.trim().split(' ');
+        const goalWidth = Math.ceil(linkWidth / maxLines);
+        const firstWord = wordsArray[0];
+        let cnt = 1;
+        let wordWidth = Math.ceil((firstWord.length + 1) * letterWidth);
+        while (wordWidth < goalWidth) {
+            wordWidth += Math.ceil((wordsArray[cnt].length + 1) * letterWidth);
+            cnt++;
+        }
+        currentLink.style.width = `${wordWidth + parseInt(linkStyle.paddingLeft, 10) +
+            parseInt(linkStyle.paddingRight, 10)}px`;
+        this.renderer.removeStyle(currentLink, 'white-space');
+    }
     getClassDependingChildrenCnt() {
         if (this.hasChildren) {
             if (this.submenu.eclMenuMegaItems.length < 5 /* ColTrigger.COL1_TRIGGER */) {
@@ -9394,6 +9479,7 @@ class EclMenuItemComponent extends ECLBaseDirective {
                 return 'ecl-menu__item--col3';
             }
             else {
+                this.isFull = true;
                 return 'ecl-menu__item--full';
             }
         }
@@ -9402,13 +9488,13 @@ class EclMenuItemComponent extends ECLBaseDirective {
     hasSubmenuAnySelections() {
         return this.submenu && !!this.submenu.eclMenuMegaItems.find(it => it.isCurrent);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: EclMenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: EclMenuItemComponent, selector: "ecl-menu-item", inputs: { id: "id", label: "label", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", isCurrent: "isCurrent" }, outputs: { menuItemSelect: "menuItemSelect", menuItemCaret: "menuItemCaret", menuItemHover: "menuItemHover", menuItemHoverOut: "menuItemHoverOut", menuMegaItemSelect: "menuMegaItemSelect", menuItemFocus: "menuItemFocus" }, host: { listeners: { "mouseenter": "onItemMouseEnter($event)", "mouseleave": "onItemMouseLeave($event)" }, properties: { "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(function () { return EclMenuMegaComponent; }), descendants: true }], usesInheritance: true, ngImport: i0, template: "<a *ngIf=\"href\" \n    [href]=\"href\"\n    [target]=\"target\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\"\n    (focus)=\"onItemFocus($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<a *ngIf=\"!href\"\n    [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\"\n    [queryParamsHandling]=\"queryParamsHandling\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\"\n    (focus)=\"onItemFocus($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<button eclButton \n    *ngIf=\"hasChildren\"\n    variant=\"primary\" \n    class=\"ecl-menu__button-caret\" \n    type=\"button\" \n    aria-label=\"Access item's children\"\n    (click)=\"onItemCaretClick($event)\">\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n</button>\n<ng-content select=\"ecl-menu-mega\"></ng-content>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", dependencies: [{ kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: EclMenuItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: EclMenuItemComponent, selector: "ecl-menu-item", inputs: { id: "id", label: "label", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href", target: "target", isCurrent: "isCurrent" }, outputs: { menuItemSelect: "menuItemSelect", menuItemCaret: "menuItemCaret", menuItemHover: "menuItemHover", menuItemHoverOut: "menuItemHoverOut", menuMegaItemSelect: "menuMegaItemSelect", menuItemFocus: "menuItemFocus" }, host: { listeners: { "mouseenter": "onItemMouseEnter($event)", "mouseleave": "onItemMouseLeave($event)" }, properties: { "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(function () { return EclMenuMegaComponent; }), descendants: true }], viewQueries: [{ propertyName: "menuLink", first: true, predicate: ["menuLink"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<a #menuLink *ngIf=\"href\" \n    [href]=\"href\"\n    [target]=\"target\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\"\n    (focus)=\"onItemFocus($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<a #menuLink *ngIf=\"!href\"\n    [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\"\n    [queryParamsHandling]=\"queryParamsHandling\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\"\n    (focus)=\"onItemFocus($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<button eclButton \n    *ngIf=\"hasChildren\"\n    variant=\"primary\" \n    class=\"ecl-menu__button-caret\" \n    type=\"button\" \n    aria-label=\"Access item's children\"\n    (click)=\"onItemCaretClick($event)\">\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n</button>\n<ng-content select=\"ecl-menu-mega\"></ng-content>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", dependencies: [{ kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: EclMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-menu-item', encapsulation: ViewEncapsulation.None, template: "<a *ngIf=\"href\" \n    [href]=\"href\"\n    [target]=\"target\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\"\n    (focus)=\"onItemFocus($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<a *ngIf=\"!href\"\n    [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\"\n    [queryParamsHandling]=\"queryParamsHandling\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\"\n    (focus)=\"onItemFocus($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<button eclButton \n    *ngIf=\"hasChildren\"\n    variant=\"primary\" \n    class=\"ecl-menu__button-caret\" \n    type=\"button\" \n    aria-label=\"Access item's children\"\n    (click)=\"onItemCaretClick($event)\">\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n</button>\n<ng-content select=\"ecl-menu-mega\"></ng-content>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>" }]
-        }], propDecorators: { id: [{
+            args: [{ selector: 'ecl-menu-item', encapsulation: ViewEncapsulation.None, template: "<a #menuLink *ngIf=\"href\" \n    [href]=\"href\"\n    [target]=\"target\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\"\n    (focus)=\"onItemFocus($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<a #menuLink *ngIf=\"!href\"\n    [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\"\n    [queryParamsHandling]=\"queryParamsHandling\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\"\n    (focus)=\"onItemFocus($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<button eclButton \n    *ngIf=\"hasChildren\"\n    variant=\"primary\" \n    class=\"ecl-menu__button-caret\" \n    type=\"button\" \n    aria-label=\"Access item's children\"\n    (click)=\"onItemCaretClick($event)\">\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-180\" class=\"ecl-button__icon\"></ecl-icon>\n</button>\n<ng-content select=\"ecl-menu-mega\"></ng-content>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ApplicationRef }]; }, propDecorators: { id: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -9430,6 +9516,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
             }], submenu: [{
                 type: ContentChild,
                 args: [forwardRef(() => EclMenuMegaComponent)]
+            }], menuLink: [{
+                type: ViewChild,
+                args: ['menuLink']
             }], menuItemSelect: [{
                 type: Output
             }], menuItemCaret: [{
@@ -9467,17 +9556,28 @@ class EclMenuComponent extends ECLBaseDirective {
             `ecl-menu--group${this.group}`,
         ].join(' ');
     }
-    constructor(differs, cdkBreakpointObserver) {
+    constructor(el, differs, cdkBreakpointObserver, renderer) {
         super();
+        this.el = el;
         this.differs = differs;
         this.cdkBreakpointObserver = cdkBreakpointObserver;
+        this.renderer = renderer;
         this.group = '1';
+        this.maxLines = 0;
         this.menuItemSelect = new EventEmitter();
         this.isHamburgerMenuOpened = false;
         this.isMobileBreakpoint = false;
         this.isMenuHidden = false;
+        this.hasOverflow = false;
+        this.isShowPrevBtn = false;
+        this.isShowNextBtn = false;
+        this.isCurrentItemVisible = false;
         this.destroy$ = new Subject();
+        this.totalItemsWidth = 0;
+        this.offsetLeft = 0;
+        this.direction = 'ltr';
         this.hammertime = new Hammer.default(document, { inputClass: Hammer.TouchInput });
+        this.TIMEOUT_INTERVAL = 150;
         this.differ = this.differs.find([]).create();
     }
     keyEvent(event) {
@@ -9487,6 +9587,16 @@ class EclMenuComponent extends ECLBaseDirective {
             this.closeHamburgerMenu();
         }
     }
+    onResize() {
+        clearTimeout(this.resizeTimer);
+        this.resizeTimer = setTimeout(() => {
+            this.renderer.removeClass(this.el.nativeElement, 'ecl-menu--transition');
+            this.totalItemsWidth = 0;
+            this.checkMenuItems();
+            this.checkMenuOverflow();
+            this.renderer.addClass(this.el.nativeElement, 'ecl-menu--transition');
+        }, this.TIMEOUT_INTERVAL);
+    }
     ngOnInit() {
         this.observeBreakpointChanges();
         this.observeSwipeGestures();
@@ -9494,17 +9604,24 @@ class EclMenuComponent extends ECLBaseDirective {
     ngAfterContentInit() {
         this.observeRootMenuItemsChanges();
     }
-    onSwipeLeft(evt) {
+    ngAfterViewInit() {
+        clearTimeout(this.resizeTimer);
+        this.resizeTimer = setTimeout(() => {
+            this.checkMenuItems();
+            this.checkMenuOverflow();
+        }, this.TIMEOUT_INTERVAL);
+    }
+    onSwipeLeft() {
         if (this.isMobileBreakpoint) {
             this.openHamburgerMenu();
         }
     }
-    onSwipeRight(evt) {
+    onSwipeRight() {
         if (this.isMobileBreakpoint) {
             this.closeHamburgerMenu();
         }
     }
-    onOverlayClick(evt) {
+    onOverlayClick() {
         this.closeHamburgerMenu();
     }
     onMenuOpenClick(evt) {
@@ -9526,6 +9643,132 @@ class EclMenuComponent extends ECLBaseDirective {
         this.hammertime.off('swipeleft');
         this.hammertime.off('swiperight');
     }
+    onPrevBtnClick() {
+        this.offsetLeft = 0;
+        if (this.direction === 'rtl') {
+            this.itemsList.nativeElement.style.right = '0';
+            this.itemsList.nativeElement.style.left = 'auto';
+        }
+        else {
+            this.itemsList.nativeElement.style.left = '0';
+            this.itemsList.nativeElement.style.right = 'auto';
+        }
+        this.isShowPrevBtn = false;
+        this.isShowNextBtn = true;
+        this.refreshDisplay();
+    }
+    onNextBtnClick() {
+        this.isShowPrevBtn = true;
+        this.isShowNextBtn = false;
+        if (this.direction === 'rtl') {
+            this.showNextSlideRtl();
+        }
+        else {
+            this.showNextSlideLtr();
+        }
+        this.refreshDisplay();
+    }
+    showNextSlideLtr() {
+        const btnOffsetWidth = this.btnNext.el.nativeElement.offsetWidth;
+        this.offsetLeft =
+            this.lastVisibleItem.el.nativeElement.getBoundingClientRect().left -
+                this.itemsList.nativeElement.getBoundingClientRect().left -
+                btnOffsetWidth;
+        this.itemsList.nativeElement.style.left = `-${this.offsetLeft}px`;
+        this.itemsList.nativeElement.style.right = 'auto';
+    }
+    showNextSlideRtl() {
+        const btnOffsetWidth = this.btnNext.el.nativeElement.offsetWidth;
+        this.offsetLeft =
+            this.itemsList.nativeElement.getBoundingClientRect().right -
+                this.lastVisibleItem.el.nativeElement.getBoundingClientRect().right -
+                btnOffsetWidth;
+        this.itemsList.nativeElement.style.right = `-${this.offsetLeft}px`;
+        this.itemsList.nativeElement.style.left = 'auto';
+    }
+    refreshDisplay() {
+        this.eclRootMenuItems.forEach(item => {
+            item.checkMenuItem(this.maxLines, this.isMobileBreakpoint);
+            item.isVisible = !item.isVisible;
+        });
+    }
+    checkMenuOverflow() {
+        this.hasOverflow = this.totalItemsWidth > this.innerSection.nativeElement.offsetWidth;
+        if (!this.hasOverflow || this.isMobileBreakpoint) {
+            this.resetOverflowValues();
+            return;
+        }
+        this.checkCurrentItem();
+        this.resetVisibilityIndicator();
+        if (this.offsetLeft === 0) {
+            this.manageOverflowEnd();
+        }
+        else {
+            this.manageOverflowBeginning();
+        }
+    }
+    manageOverflowBeginning() {
+        if (this.direction === 'rtl') {
+            this.eclRootMenuItems.filter(item => item.el.nativeElement.getBoundingClientRect().right <=
+                this.innerSection.nativeElement.getBoundingClientRect().right).forEach(el => el.isVisible = true);
+        }
+        else {
+            this.eclRootMenuItems.filter(item => item.el.nativeElement.getBoundingClientRect().left >=
+                this.innerSection.nativeElement.getBoundingClientRect().left).forEach(el => el.isVisible = true);
+        }
+    }
+    manageOverflowEnd() {
+        this.isShowNextBtn = true;
+        if (this.direction === 'rtl') {
+            for (const item of this.eclRootMenuItems) {
+                if (item.el.nativeElement.getBoundingClientRect().left <
+                    this.itemsList.nativeElement.getBoundingClientRect().left) {
+                    this.lastVisibleItem = item;
+                    break;
+                }
+                item.isVisible = true;
+            }
+        }
+        else {
+            for (const item of this.eclRootMenuItems) {
+                if (item.el.nativeElement.getBoundingClientRect().right >
+                    this.itemsList.nativeElement.getBoundingClientRect().right) {
+                    this.lastVisibleItem = item;
+                    break;
+                }
+                item.isVisible = true;
+            }
+        }
+    }
+    resetVisibilityIndicator() {
+        this.eclRootMenuItems.forEach(item => item.isVisible = false);
+    }
+    resetOverflowValues() {
+        this.isShowPrevBtn = false;
+        this.isShowNextBtn = false;
+        this.hasOverflow = false;
+        this.itemsList.nativeElement.style.left = '0';
+        this.offsetLeft = 0;
+        this.totalItemsWidth = 0;
+        this.lastVisibleItem = null;
+    }
+    checkCurrentItem() {
+        this.currentItem = this.eclRootMenuItems.find(item => item.isCurrent);
+        if (this.currentItem) {
+            if (this.currentItem.isVisible) {
+                this.isCurrentItemVisible = true;
+            }
+            else {
+                this.isCurrentItemVisible = false;
+            }
+        }
+    }
+    checkMenuItems() {
+        this.eclRootMenuItems.forEach(item => {
+            item.checkMenuItem(this.maxLines, this.isMobileBreakpoint);
+            this.totalItemsWidth += item.el.nativeElement.offsetWidth;
+        });
+    }
     get isMenuExpandedInMobile() {
         return this.isMobileBreakpoint && this.isAnyRootMenuItemExpanded();
     }
@@ -9588,9 +9831,40 @@ class EclMenuComponent extends ECLBaseDirective {
     }
     onRootMenuItemHovered(evt) {
         const requestedRootMenuItem = evt.menuItem;
-        requestedRootMenuItem.isHovered = true;
-        this.closeRootMenuButOneItem(requestedRootMenuItem);
-        this.showMenu();
+        if (requestedRootMenuItem.isVisible) {
+            if (!this.isMobileBreakpoint) {
+                this.checkMegaMenu(requestedRootMenuItem);
+            }
+            requestedRootMenuItem.isHovered = true;
+            this.closeRootMenuButOneItem(requestedRootMenuItem);
+            this.showMenu();
+        }
+    }
+    checkMegaMenu(menuItem) {
+        if (menuItem.isFull) {
+            if (menuItem.submenu.isRtl) {
+                menuItem.submenu.offsetRight = this.offsetLeft;
+            }
+            else {
+                menuItem.submenu.offsetLeft = this.offsetLeft;
+            }
+            return;
+        }
+        this.checkEnoughSpaceForMegaMenu(menuItem);
+    }
+    checkEnoughSpaceForMegaMenu(menuItem) {
+        const megaBounding = menuItem.submenu.el.nativeElement.getBoundingClientRect();
+        const containerBounding = this.innerSection.nativeElement.getBoundingClientRect();
+        const menuItemBounding = menuItem.el.nativeElement.getBoundingClientRect();
+        const megaWidth = megaBounding.width;
+        const containerWidth = containerBounding.width;
+        const menuItemPosition = menuItemBounding.left - containerBounding.left;
+        if (menuItemPosition + megaWidth > containerWidth) {
+            menuItem.submenu.isRtl = true;
+        }
+        else {
+            menuItem.submenu.isRtl = false;
+        }
     }
     onRootMenuItemHoveredOut(evt) {
         if (!this.isMobileBreakpoint) {
@@ -9628,6 +9902,7 @@ class EclMenuComponent extends ECLBaseDirective {
     }
     selectMenuItem(item) {
         item.isCurrent = true;
+        this.currentItem = item;
     }
     hideMenu() {
         this.isMenuHidden = true;
@@ -9684,17 +9959,34 @@ class EclMenuComponent extends ECLBaseDirective {
             this.isMobileBreakpoint = result.matches;
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: EclMenuComponent, deps: [{ token: i0.IterableDiffers }, { token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: EclMenuComponent, selector: "ecl-menu", inputs: { group: "group" }, outputs: { menuItemSelect: "menuItemSelect" }, host: { listeners: { "keydown": "keyEvent($event)" }, properties: { "class": "this.cssClasses", "attr.aria-expanded": "this.isHamburgerMenuOpened", "class.ecl-menu--forced-mobile": "this.isMobileBreakpoint", "class.ecl-menu--forced-close": "this.isMenuHidden" } }, queries: [{ propertyName: "eclRootMenuItems", predicate: EclMenuItemComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-menu__overlay\" (click)=\"onOverlayClick($event)\"></div>\n<div class=\"ecl-container ecl-menu__container\">\n    <a eclLink\n        href=\"#\"\n        variant=\"standalone\"\n        class=\"ecl-menu__open\"\n        (click)=\"onMenuOpenClick($event)\">\n        <ecl-icon icon=\"hamburger\" size=\"s\"></ecl-icon> {{ 'ecl.menu.MENU' | translate }}\n    </a>\n\n    <section class=\"ecl-menu__inner\" [class.ecl-menu__inner--expanded]=\"isMenuExpandedInMobile\">\n        <header class=\"ecl-menu__inner-header\">\n            <button\n                eclButton\n                variant=\"text\"\n                class=\"ecl-menu__close\"\n                containerStyleClass=\"ecl-menu__close-container\"\n                (click)=\"onMenuCloseClick($event)\">\n                <ecl-icon icon=\"close-filled\" size=\"s\"></ecl-icon>\n                <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n            </button>\n\n            <div class=\"ecl-menu__title\">{{ 'ecl.menu.MENU' | translate }}</div>\n\n            <button eclButton\n                    variant=\"text\"\n                    class=\"ecl-menu__back\"\n                    (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\n        <ul class=\"ecl-menu__list\">\n            <ng-content></ng-content>\n        </ul>\n    </section>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: EclMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: i1$2.BreakpointObserver }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: EclMenuComponent, selector: "ecl-menu", inputs: { group: "group", maxLines: "maxLines" }, outputs: { menuItemSelect: "menuItemSelect" }, host: { listeners: { "keydown": "keyEvent($event)", "window:resize": "onResize()" }, properties: { "class": "this.cssClasses", "attr.aria-expanded": "this.isHamburgerMenuOpened", "class.ecl-menu--forced-mobile": "this.isMobileBreakpoint", "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 }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-menu__overlay\"\n     (click)=\"onOverlayClick()\"></div>\n<div class=\"ecl-container ecl-menu__container\">\n    <a eclLink\n       href=\"#\"\n       variant=\"standalone\"\n       class=\"ecl-menu__open\"\n       (click)=\"onMenuOpenClick($event)\">\n        <ecl-icon icon=\"hamburger\"\n                  size=\"s\"></ecl-icon> {{ 'ecl.menu.MENU' | translate }}\n    </a>\n\n    <section class=\"ecl-menu__inner\" #innerSection\n             [class.ecl-menu__inner--expanded]=\"isMenuExpandedInMobile\"\n             [class.ecl-menu__inner--has-overflow]=\"hasOverflow\">\n        <header class=\"ecl-menu__inner-header\">\n            <button eclButton\n                    variant=\"text\"\n                    class=\"ecl-menu__close\"\n                    containerStyleClass=\"ecl-menu__close-container\"\n                    (click)=\"onMenuCloseClick($event)\">\n                <ecl-icon icon=\"close-filled\"\n                          size=\"s\"></ecl-icon>\n                <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n            </button>\n\n            <div class=\"ecl-menu__title\">{{ 'ecl.menu.MENU' | translate }}</div>\n\n            <button eclButton\n                    variant=\"text\"\n                    class=\"ecl-menu__back\"\n                    (click)=\"onMenuBackClick($event)\">\n                <ecl-icon icon=\"corner-arrow\"\n                          size=\"s\"\n                          transform=\"rotate-270\"></ecl-icon>\n                <span eclButtonLabel>{{ 'ecl.common.BACK' | translate }}</span>\n            </button>\n        </header>\n        <button eclButton #btnPrevious\n                variant=\"ghost\"\n                class=\"ecl-menu__item ecl-menu__items-previous\"\n                [class.ecl-menu__item--current]=\"isCurrentItemVisible\"\n                [style.display]=\"isShowPrevBtn ? 'block' : 'none'\"\n                (click)=\"onPrevBtnClick()\">\n            <ecl-icon icon=\"corner-arrow\"\n                      size=\"s\"\n                      transform=\"rotate-270\"></ecl-icon>\n            <span eclButtonLabel class=\"ecl-u-sr-only\">{{ 'ecl.common.PREVIOUS' | translate }}</span>\n        </button>\n        <button eclButton #btnNext\n                variant=\"ghost\"\n                class=\"ecl-menu__item ecl-menu__items-next\"\n                [class.ecl-menu__item--current]=\"!isCurrentItemVisible\"\n                [style.display]=\"isShowNextBtn ? 'block' : 'none'\"\n                (click)=\"onNextBtnClick()\">\n            <ecl-icon icon=\"corner-arrow\"\n                      size=\"s\"\n                      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>\n            <ng-content></ng-content>\n        </ul>\n    </section>\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
 }
+__decorate([
+    coerceNumber
+], EclMenuComponent.prototype, "maxLines", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: EclMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-menu', template: "<div class=\"ecl-menu__overlay\" (click)=\"onOverlayClick($event)\"></div>\n<div class=\"ecl-container ecl-menu__container\">\n    <a eclLink\n        href=\"#\"\n        variant=\"standalone\"\n        class=\"ecl-menu__open\"\n        (click)=\"onMenuOpenClick($event)\">\n        <ecl-icon icon=\"hamburger\" size=\"s\"></ecl-icon> {{ 'ecl.menu.MENU' | translate }}\n    </a>\n\n    <section class=\"ecl-menu__inner\" [class.ecl-menu__inner--expanded]=\"isMenuExpandedInMobile\">\n        <header class=\"ecl-menu__inner-header\">\n            <button\n                eclButton\n                variant=\"text\"\n                class=\"ecl-menu__close\"\n                containerStyleClass=\"ecl-menu__close-container\"\n                (click)=\"onMenuCloseClick($event)\">\n                <ecl-icon icon=\"close-filled\" size=\"s\"></ecl-icon>\n                <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n            </button>\n\n            <div class=\"ecl-menu__title\">{{ 'ecl.menu.MENU' | translate }}</div>\n\n            <button eclButton\n                    variant=\"text\"\n                    class=\"ecl-menu__back\"\n                    (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\n        <ul class=\"ecl-menu__list\">\n            <ng-content></ng-content>\n        </ul>\n    </section>\n</div>\n", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.IterableDiffers }, { type: i1$2.BreakpointObserver }]; }, propDecorators: { group: [{
+            args: [{ selector: 'ecl-menu', template: "<div class=\"ecl-menu__overlay\"\n     (click)=\"onOverlayClick()\"></div>\n<div class=\"ecl-container ecl-menu__container\">\n    <a eclLink\n       href=\"#\"\n       variant=\"standalone\"\n       class=\"ecl-menu__open\"\n       (click)=\"onMenuOpenClick($event)\">\n        <ecl-icon icon=\"hamburger\"\n                  size=\"s\"></ecl-icon> {{ 'ecl.menu.MENU' | translate }}\n    </a>\n\n    <section class=\"ecl-menu__inner\" #innerSection\n             [class.ecl-menu__inner--expanded]=\"isMenuExpandedInMobile\"\n             [class.ecl-menu__inner--has-overflow]=\"hasOverflow\">\n        <header class=\"ecl-menu__inner-header\">\n            <button eclButton\n                    variant=\"text\"\n                    class=\"ecl-menu__close\"\n                    containerStyleClass=\"ecl-menu__close-container\"\n                    (click)=\"onMenuCloseClick($event)\">\n                <ecl-icon icon=\"close-filled\"\n                          size=\"s\"></ecl-icon>\n                <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n            </button>\n\n            <div class=\"ecl-menu__title\">{{ 'ecl.menu.MENU' | translate }}</div>\n\n            <button eclButton\n                    variant=\"text\"\n                    class=\"ecl-menu__back\"\n                    (click)=\"onMenuBackClick($event)\">\n                <ecl-icon icon=\"corner-arrow\"\n                          size=\"s\"\n                          transform=\"rotate-270\"></ecl-icon>\n                <span eclButtonLabel>{{ 'ecl.common.BACK' | translate }}</span>\n            </button>\n        </header>\n        <button eclButton #btnPrevious\n                variant=\"ghost\"\n                class=\"ecl-menu__item ecl-menu__items-previous\"\n                [class.ecl-menu__item--current]=\"isCurrentItemVisible\"\n                [style.display]=\"isShowPrevBtn ? 'block' : 'none'\"\n                (click)=\"onPrevBtnClick()\">\n            <ecl-icon icon=\"corner-arrow\"\n                      size=\"s\"\n                      transform=\"rotate-270\"></ecl-icon>\n            <span eclButtonLabel class=\"ecl-u-sr-only\">{{ 'ecl.common.PREVIOUS' | translate }}</span>\n        </button>\n        <button eclButton #btnNext\n                variant=\"ghost\"\n                class=\"ecl-menu__item ecl-menu__items-next\"\n                [class.ecl-menu__item--current]=\"!isCurrentItemVisible\"\n                [style.display]=\"isShowNextBtn ? 'block' : 'none'\"\n                (click)=\"onNextBtnClick()\">\n            <ecl-icon icon=\"corner-arrow\"\n                      size=\"s\"\n                      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>\n            <ng-content></ng-content>\n        </ul>\n    </section>\n</div>", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: i1$2.BreakpointObserver }, { type: i0.Renderer2 }]; }, propDecorators: { group: [{
+                type: Input
+            }], maxLines: [{
                 type: Input
             }], eclRootMenuItems: [{
                 type: ContentChildren,
                 args: [EclMenuItemComponent]
+            }], innerSection: [{
+                type: ViewChild,
+                args: ['innerSection']
+            }], itemsList: [{
+                type: ViewChild,
+                args: ['itemsList']
+            }], btnPrevious: [{
+                type: ViewChild,
+                args: ['btnPrevious']
+            }], btnNext: [{
+                type: ViewChild,
+                args: ['btnNext']
             }], menuItemSelect: [{
                 type: Output
             }], cssClasses: [{
@@ -9712,6 +10004,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
             }], keyEvent: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
             }] } });
 
 const COMPONENTS$d = [