@eui/ecl 15.0.0-rc.6 → 15.0.0-rc.8

package/fesm2020/eui-ecl.mjs

@@ -2617,7 +2617,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['class']
             }] } });
 
-const COMPONENTS$d = [
+const COMPONENTS$e = [
     EclSiteHeaderComponent,
     EclSiteHeaderActionComponent,
     EclSiteHeaderLoginComponent,
@@ -2674,10 +2674,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         EclSearchFormComponentModule
                     ],
                     exports: [
-                        ...COMPONENTS$d
+                        ...COMPONENTS$e
                     ],
                     declarations: [
-                        ...COMPONENTS$d
+                        ...COMPONENTS$e
                     ]
                 }]
         }] });
@@ -3724,7 +3724,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['class']
             }] } });
 
-const COMPONENTS$c = [
+const COMPONENTS$d = [
     EclBreadcrumbComponent,
     EclBreadcrumbSegmentComponent
 ];
@@ -3753,8 +3753,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         EclLinkDirectiveModule,
                         EclIconComponentModule
                     ],
-                    exports: [...COMPONENTS$c],
-                    declarations: [...COMPONENTS$c],
+                    exports: [...COMPONENTS$d],
+                    declarations: [...COMPONENTS$d],
                     entryComponents: [EclBreadcrumbSegmentComponent]
                 }]
         }] });
@@ -3880,7 +3880,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['class']
             }] } });
 
-const COMPONENTS$b = [
+const COMPONENTS$c = [
     EclCardComponent,
     EclCardBodyComponent,
     EclCardImageDirective,
@@ -3910,10 +3910,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         EclLabelDirectiveModule,
                     ],
                     exports: [
-                        ...COMPONENTS$b
+                        ...COMPONENTS$c
                     ],
                     declarations: [
-                        ...COMPONENTS$b
+                        ...COMPONENTS$c
                     ],
                 }]
         }] });
@@ -4005,7 +4005,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['window:resize', ['$event']]
             }] } });
 
-const COMPONENTS$a = [
+const COMPONENTS$b = [
     EclCarouselComponent,
     EclCarouselItemComponent
 ];
@@ -4029,10 +4029,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         TranslateModule
                     ],
                     exports: [
-                        ...COMPONENTS$a
+                        ...COMPONENTS$b
                     ],
                     declarations: [
-                        ...COMPONENTS$a
+                        ...COMPONENTS$b
                     ]
                 }]
         }] });
@@ -4841,7 +4841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['class']
             }] } });
 
-const COMPONENTS$9 = [
+const COMPONENTS$a = [
     EclContentBlockComponent,
     EclContentBlockTitleDirective,
     EclContentBlockDescriptionDirective,
@@ -4907,10 +4907,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         CommonModule,
                     ],
                     exports: [
-                        ...COMPONENTS$9
+                        ...COMPONENTS$a
                     ],
                     declarations: [
-                        ...COMPONENTS$9
+                        ...COMPONENTS$a
                     ]
                 }]
         }] });
@@ -5062,7 +5062,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['class']
             }] } });
 
-const COMPONENTS$8 = [
+const COMPONENTS$9 = [
     EclContentItemComponent,
     EclContentItemImageDirective,
     EclContentItemPictureDirective
@@ -5086,10 +5086,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         RouterModule,
                     ],
                     exports: [
-                        ...COMPONENTS$8
+                        ...COMPONENTS$9
                     ],
                     declarations: [
-                        ...COMPONENTS$8
+                        ...COMPONENTS$9
                     ],
                 }]
         }] });
@@ -6850,7 +6850,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['class']
             }] } });
 
-const COMPONENTS$7 = [
+const COMPONENTS$8 = [
     EclHeroBannerComponent,
     EclHeroBannerTitleDirective,
     EclHeroBannerDescriptionDirective,
@@ -6883,10 +6883,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         EclLinkDirectiveModule,
                     ],
                     exports: [
-                        ...COMPONENTS$7
+                        ...COMPONENTS$8
                     ],
                     declarations: [
-                        ...COMPONENTS$7
+                        ...COMPONENTS$8
                     ],
                 }]
         }] });
@@ -7459,7 +7459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['class.ecl-description-list__definition-item']
             }] } });
 
-const COMPONENTS$6 = [
+const COMPONENTS$7 = [
     EclOrderedListDirective,
     EclOrderedListItemDirective,
     EclUnorderedListDirective,
@@ -7495,10 +7495,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         CommonModule,
                     ],
                     exports: [
-                        ...COMPONENTS$6
+                        ...COMPONENTS$7
                     ],
                     declarations: [
-                        ...COMPONENTS$6
+                        ...COMPONENTS$7
                     ]
                 }]
         }] });
@@ -7517,6 +7517,13 @@ class EclMenuItemHoverEvent extends EclDomEvent {
         this.domEvent = domEvent;
     }
 }
+class EclMenuItemHoverOutEvent extends EclDomEvent {
+    constructor(menuItem, domEvent = null) {
+        super(domEvent);
+        this.menuItem = menuItem;
+        this.domEvent = domEvent;
+    }
+}
 class EclMenuItemFocusEvent extends EclDomEvent {
     constructor(menuItem, domEvent = null) {
         super(domEvent);
@@ -7524,7 +7531,7 @@ class EclMenuItemFocusEvent extends EclDomEvent {
         this.domEvent = domEvent;
     }
 }
-class EclMenuItemHoverOutEvent extends EclDomEvent {
+class EclMenuItemCaretEvent extends EclDomEvent {
     constructor(menuItem, domEvent = null) {
         super(domEvent);
         this.menuItem = menuItem;
@@ -7544,6 +7551,15 @@ class EclMenuMegaItemComponent extends ECLBaseDirective {
         this.isExpanded = true;
         this.children = [];
     }
+    ngAfterViewInit() {
+        if (this.iconComponents) {
+            setTimeout(() => {
+                this.iconComponents.forEach(icn => {
+                    icn.class = 'ecl-menu__sublink-icon';
+                });
+            });
+        }
+    }
     onItemClick(evt) {
         this.menuItemSelect.next(new EclMenuItemSelectEvent(this, evt));
         if (!this.href) {
@@ -7555,13 +7571,13 @@ class EclMenuMegaItemComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclMenuMegaItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclMenuMegaItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclMenuMegaItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclMenuMegaItemComponent, selector: "ecl-menu-mega-item", inputs: { id: "id", label: "label", routerLink: "routerLink", queryParams: "queryParams", href: "href", isCurrent: "isCurrent" }, outputs: { menuItemSelect: "menuItemSelect" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class.ecl-menu__subitem": "this.cmpClass", "class.ecl-menu__subitem--current": "this.isCurrent" } }, usesInheritance: true, ngImport: i0, template: "<a *ngIf=\"href\" [href]=\"href\"\n    class=\"ecl-menu__sublink\"\n    [class.ecl-menu__sublink--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\">\n    {{ label }}\n</a>\n\n<a *ngIf=\"!href\" \n    [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\"\n    class=\"ecl-menu__sublink\"\n    [class.ecl-menu__sublink--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\">\n    {{ label }}\n</a>\n", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+/** @nocollapse */ EclMenuMegaItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclMenuMegaItemComponent, selector: "ecl-menu-mega-item", inputs: { id: "id", label: "label", routerLink: "routerLink", queryParams: "queryParams", href: "href", isCurrent: "isCurrent" }, outputs: { menuItemSelect: "menuItemSelect" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class.ecl-menu__subitem": "this.cmpClass", "class.ecl-menu__subitem--current": "this.isCurrent" } }, queries: [{ propertyName: "iconComponents", predicate: i0.forwardRef(function () { return EclIconComponent; }) }], usesInheritance: true, ngImport: i0, template: "<a *ngIf=\"href\" \n    [href]=\"href\"\n    class=\"ecl-menu__sublink\"\n    [class.ecl-menu__sublink--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<a *ngIf=\"!href\" \n    [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\"\n    class=\"ecl-menu__sublink\"\n    [class.ecl-menu__sublink--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", styles: [":host{display:list-item}\n"], dependencies: [{ 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.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 __decorate([
     coerceBoolean
 ], EclMenuMegaItemComponent.prototype, "isCurrent", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclMenuMegaItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-menu-mega-item', template: "<a *ngIf=\"href\" [href]=\"href\"\n    class=\"ecl-menu__sublink\"\n    [class.ecl-menu__sublink--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\">\n    {{ label }}\n</a>\n\n<a *ngIf=\"!href\" \n    [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\"\n    class=\"ecl-menu__sublink\"\n    [class.ecl-menu__sublink--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\">\n    {{ label }}\n</a>\n", styles: [":host{display:list-item}\n"] }]
+            args: [{ selector: 'ecl-menu-mega-item', template: "<a *ngIf=\"href\" \n    [href]=\"href\"\n    class=\"ecl-menu__sublink\"\n    [class.ecl-menu__sublink--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<a *ngIf=\"!href\" \n    [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\"\n    class=\"ecl-menu__sublink\"\n    [class.ecl-menu__sublink--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\">\n    {{ label }}\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", styles: [":host{display:list-item}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], label: [{
@@ -7580,6 +7596,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
             }, {
                 type: HostBinding,
                 args: ['class.ecl-menu__subitem--current']
+            }], iconComponents: [{
+                type: ContentChildren,
+                args: [forwardRef(() => EclIconComponent)]
             }], menuItemSelect: [{
                 type: Output
             }], onHostClick: [{
@@ -7591,7 +7610,6 @@ class EclMenuMegaComponent extends ECLBaseDirective {
     constructor(differs) {
         super();
         this.differs = differs;
-        this.isExpanded = false;
         this.isRtl = false;
         this.menuItemSelect = new EventEmitter();
         this.destroy$ = new Subject();
@@ -7602,10 +7620,6 @@ class EclMenuMegaComponent extends ECLBaseDirective {
             super.getCssClasses('ecl-menu__mega'),
         ].join(' ');
     }
-    onMenuMegaToggleClick(evt) {
-        this.isExpanded = !this.isExpanded;
-        evt.preventDefault();
-    }
     ngAfterContentInit() {
         this.diff = this.differ.diff(this.eclMenuMegaItems);
         this.createContentChildrenMenuObservable().subscribe(this.onMenuItemChanges.bind(this));
@@ -7655,19 +7669,14 @@ class EclMenuMegaComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclMenuMegaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclMenuMegaComponent, deps: [{ token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclMenuMegaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclMenuMegaComponent, selector: "ecl-menu-mega", inputs: { isExpanded: "isExpanded", 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" });
-__decorate([
-    coerceBoolean
-], EclMenuMegaComponent.prototype, "isExpanded", void 0);
+/** @nocollapse */ EclMenuMegaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.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" });
 __decorate([
     coerceBoolean
 ], EclMenuMegaComponent.prototype, "isRtl", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.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: { isExpanded: [{
-                type: Input
-            }], isRtl: [{
+        }], ctorParameters: function () { return [{ type: i0.IterableDiffers }]; }, propDecorators: { isRtl: [{
                 type: Input
             }, {
                 type: HostBinding,
@@ -7691,6 +7700,7 @@ class EclMenuItemComponent extends ECLBaseDirective {
         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();
@@ -7726,6 +7736,9 @@ class EclMenuItemComponent extends ECLBaseDirective {
             evt.preventDefault();
         }
     }
+    onItemCaretClick(evt) {
+        this.menuItemCaret.next(new EclMenuItemCaretEvent(this, evt));
+    }
     onItemMouseEnter(evt) {
         this.menuItemHover.next(new EclMenuItemHoverEvent(this, evt));
     }
@@ -7770,10 +7783,10 @@ class EclMenuItemComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclMenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclMenuItemComponent, selector: "ecl-menu-item", inputs: { id: "id", label: "label", routerLink: "routerLink", queryParams: "queryParams", href: "href", isCurrent: "isCurrent" }, outputs: { menuItemSelect: "menuItemSelect", menuItemHover: "menuItemHover", menuItemHoverOut: "menuItemHoverOut", menuMegaItemSelect: "menuMegaItemSelect", menuItemFocus: "menuItemFocus" }, host: { 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    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\"\n    (mouseenter)=\"onItemMouseEnter($event)\"\n    (mouseleave)=\"onItemMouseLeave($event)\"\n    (focus)=\"onItemFocus($event)\">\n    {{ label }}\n    <ng-container *ngIf=\"hasChildren\">\n        <ecl-icon\n            icon=\"corner-arrow\"\n            size=\"xs\"\n            transform=\"rotate-90\"\n            class=\"ecl-menu__link-icon\">\n        </ecl-icon>\n    </ng-container>\n</a>\n<a *ngIf=\"!href\"\n    [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\"\n    (mouseenter)=\"onItemMouseEnter($event)\"\n    (mouseleave)=\"onItemMouseLeave($event)\"\n    (focus)=\"onItemFocus($event)\">\n    {{ label }}\n    <ng-container *ngIf=\"hasChildren\">\n        <ecl-icon\n            icon=\"corner-arrow\"\n            size=\"xs\"\n            transform=\"rotate-90\"\n            class=\"ecl-menu__link-icon\">\n        </ecl-icon>\n    </ng-container>\n</a>\n<ng-content></ng-content>\n", styles: [":host{display:list-item}.ecl-menu__link{box-sizing:unset}\n"], dependencies: [{ 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: i2$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+/** @nocollapse */ EclMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclMenuItemComponent, selector: "ecl-menu-item", inputs: { id: "id", label: "label", routerLink: "routerLink", queryParams: "queryParams", href: "href", 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    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    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>", styles: [".ecl-menu__link{box-sizing:unset}\n"], 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.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-menu-item', template: "<a *ngIf=\"href\" \n    [href]=\"href\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\"\n    (mouseenter)=\"onItemMouseEnter($event)\"\n    (mouseleave)=\"onItemMouseLeave($event)\"\n    (focus)=\"onItemFocus($event)\">\n    {{ label }}\n    <ng-container *ngIf=\"hasChildren\">\n        <ecl-icon\n            icon=\"corner-arrow\"\n            size=\"xs\"\n            transform=\"rotate-90\"\n            class=\"ecl-menu__link-icon\">\n        </ecl-icon>\n    </ng-container>\n</a>\n<a *ngIf=\"!href\"\n    [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\"\n    (mouseenter)=\"onItemMouseEnter($event)\"\n    (mouseleave)=\"onItemMouseLeave($event)\"\n    (focus)=\"onItemFocus($event)\">\n    {{ label }}\n    <ng-container *ngIf=\"hasChildren\">\n        <ecl-icon\n            icon=\"corner-arrow\"\n            size=\"xs\"\n            transform=\"rotate-90\"\n            class=\"ecl-menu__link-icon\">\n        </ecl-icon>\n    </ng-container>\n</a>\n<ng-content></ng-content>\n", styles: [":host{display:list-item}.ecl-menu__link{box-sizing:unset}\n"] }]
+            args: [{ selector: 'ecl-menu-item', template: "<a *ngIf=\"href\" \n    [href]=\"href\"\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    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>", styles: [".ecl-menu__link{box-sizing:unset}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], label: [{
@@ -7794,6 +7807,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: [forwardRef(() => EclMenuMegaComponent)]
             }], menuItemSelect: [{
                 type: Output
+            }], menuItemCaret: [{
+                type: Output
             }], menuItemHover: [{
                 type: Output
             }], menuItemHoverOut: [{
@@ -7811,6 +7826,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
             }], isAriaExpanded: [{
                 type: HostBinding,
                 args: ['attr.aria-expanded']
+            }], onItemMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter', ['$event']]
+            }], onItemMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave', ['$event']]
             }] } });
 
 class ECLClickOutsideDirective extends ECLBaseDirective {
@@ -7941,6 +7962,9 @@ class EclMenuComponent extends ECLBaseDirective {
         item.menuItemHoverOut
             .pipe(takeUntil$1(this.destroy$))
             .subscribe((evt) => { this.onRootMenuItemHoveredOut(evt); });
+        item.menuItemCaret
+            .pipe(takeUntil$1(this.destroy$))
+            .subscribe((evt) => { this.onRootMenuItemCaret(evt); });
         item.menuMegaItemSelect
             .pipe(takeUntil$1(this.destroy$))
             .subscribe((evt) => { this.onMenuMegaItemSelected(item, evt); });
@@ -7959,31 +7983,31 @@ class EclMenuComponent extends ECLBaseDirective {
     }
     onRootMenuItemSelected(evt) {
         const requestedRootMenuItem = evt.menuItem;
-        this.preventFollowingHrefInMobileMode(evt);
-        if (requestedRootMenuItem.hasChildren) {
-            this.closeRootMenuButOneItem(requestedRootMenuItem);
-            this.toggleExpandedForMenuItem(requestedRootMenuItem);
-        }
-        else {
-            this.closeRootMenu();
-            this.deselectAllRootMenuItems();
-            this.deselectAllSubmenusItems();
-            this.selectMenuItem(requestedRootMenuItem);
-            this.closeHamburgerMenu();
-        }
+        this.closeRootMenu();
+        this.deselectAllRootMenuItems();
+        this.deselectAllSubmenusItems();
+        this.selectMenuItem(requestedRootMenuItem);
+        this.closeHamburgerMenu();
         this.sendMenuItemSelectEvent(evt);
     }
     onRootMenuItemHovered(evt) {
         const requestedRootMenuItem = evt.menuItem;
         requestedRootMenuItem.isHovered = true;
-        if (requestedRootMenuItem.hasChildren) {
-            this.closeRootMenuButOneItem(requestedRootMenuItem);
-        }
+        this.closeRootMenuButOneItem(requestedRootMenuItem);
         this.showMenu();
     }
+    /*
+    * Note:
+    * ECL keeps root menu expanded when hovered out and still hovering child mega menu
+    * so no change of this item hover state to false to make similar behaviour
+    */
     onRootMenuItemHoveredOut(evt) {
+        this.closeRootMenu();
+    }
+    onRootMenuItemCaret(evt) {
         const requestedRootMenuItem = evt.menuItem;
-        requestedRootMenuItem.isHovered = false;
+        this.closeRootMenuButOneItem(requestedRootMenuItem);
+        this.toggleExpandedForMenuItem(requestedRootMenuItem);
     }
     onMenuMegaItemSelected(rootMenuItem, evt) {
         const requestedSubmenuItem = evt.menuItem;
@@ -8050,21 +8074,6 @@ class EclMenuComponent extends ECLBaseDirective {
     sendMenuItemSelectEvent(evt) {
         this.menuItemSelect.next(new EclMenuItemSelectEvent(evt.menuItem, evt.domEvent));
     }
-    /**
-     * When in mobile mode, tapping on parent item should not follow href,
-     * but rather open submenu only. When submenu is opened, then parent can
-     * be tapped and href is followed
-     *
-     * EUI-4694
-     */
-    preventFollowingHrefInMobileMode(evt) {
-        if (evt.menuItem.hasChildren) {
-            if (this.isMobileBreakpoint && !this.isMenuExpandedInMobile) {
-                evt.domEvent.stopPropagation();
-                evt.preventDefault();
-            }
-        }
-    }
     observeRootMenuItemsChanges() {
         this.diff = this.differ.diff(this.eclRootMenuItems);
         this.createRootMenuItemsChangesObservable()
@@ -8126,6 +8135,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 }]
         }] });
 
+const COMPONENTS$6 = [
+    EclMenuComponent,
+    EclMenuItemComponent,
+    EclMenuMegaComponent,
+    EclMenuMegaItemComponent,
+];
 class EclMenuComponentModule {
 }
 /** @nocollapse */ EclMenuComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclMenuComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -8165,16 +8180,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         TranslateModule
                     ],
                     exports: [
-                        EclMenuComponent,
-                        EclMenuItemComponent,
-                        EclMenuMegaComponent,
-                        EclMenuMegaItemComponent
+                        ...COMPONENTS$6
                     ],
                     declarations: [
-                        EclMenuComponent,
-                        EclMenuItemComponent,
-                        EclMenuMegaComponent,
-                        EclMenuMegaItemComponent
+                        ...COMPONENTS$6
                     ]
                 }]
         }] });
@@ -12976,13 +12985,20 @@ class EclTabSelectEvent extends EclBaseEvent {
     }
 }
 class EclTabComponent extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
+    constructor(elementRef) {
+        super();
+        this.elementRef = elementRef;
         this.isHidden = false;
         this.isActive = false;
         this.select = new EventEmitter();
         this.role = 'listitem';
     }
+    get hostElement() {
+        return this.elementRef.nativeElement;
+    }
+    getWidth() {
+        return this.hostElement.getBoundingClientRect().width;
+    }
     get cssClasses() {
         return [
             super.getCssClasses('ecl-tabs__item')
@@ -12992,8 +13008,8 @@ class EclTabComponent extends ECLBaseDirective {
         this.select.next(new EclTabSelectEvent(this));
     }
 }
-/** @nocollapse */ EclTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclTabComponent, selector: "ecl-tab", inputs: { id: "id", isHidden: "isHidden", isActive: "isActive" }, outputs: { select: "select" }, host: { properties: { "attr.aria-hidden": "this.isHidden", "attr.role": "this.role", "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, ngImport: i0, template: "    <a eclLink \n        (click)=\"onTabClick($event)\"\n        class=\"ecl-tabs__link\" \n        [class.ecl-tabs__link--active]=\"isActive\">\n        <ng-content select=\"ecl-tab-label\"></ng-content>\n    </a>\n\n    <ng-template #content>\n        <ng-content></ng-content>\n    </ng-template>\n", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }] });
+/** @nocollapse */ EclTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclTabComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ EclTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclTabComponent, selector: "ecl-tab", inputs: { id: "id", isHidden: "isHidden", isActive: "isActive" }, outputs: { select: "select" }, host: { properties: { "attr.aria-hidden": "this.isHidden", "attr.role": "this.role", "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, ngImport: i0, template: "    <a eclLink \n        role=\"tab\"\n        class=\"ecl-tabs__link\" \n        [class.ecl-tabs__link--active]=\"isActive\"\n        [attr.aria-selected]=\"isActive\"\n        [attr.tabindex]=\"isActive ? -1 : undefined\"\n        (click)=\"onTabClick($event)\">\n        <ng-content select=\"ecl-tab-label\"></ng-content>\n    </a>\n\n    <ng-template #content>\n        <ng-content></ng-content>\n    </ng-template>\n", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }] });
 __decorate([
     coerceBoolean
 ], EclTabComponent.prototype, "isHidden", void 0);
@@ -13002,8 +13018,8 @@ __decorate([
 ], EclTabComponent.prototype, "isActive", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-tab', template: "    <a eclLink \n        (click)=\"onTabClick($event)\"\n        class=\"ecl-tabs__link\" \n        [class.ecl-tabs__link--active]=\"isActive\">\n        <ng-content select=\"ecl-tab-label\"></ng-content>\n    </a>\n\n    <ng-template #content>\n        <ng-content></ng-content>\n    </ng-template>\n", styles: [":host{display:list-item}\n"] }]
-        }], propDecorators: { id: [{
+            args: [{ selector: 'ecl-tab', template: "    <a eclLink \n        role=\"tab\"\n        class=\"ecl-tabs__link\" \n        [class.ecl-tabs__link--active]=\"isActive\"\n        [attr.aria-selected]=\"isActive\"\n        [attr.tabindex]=\"isActive ? -1 : undefined\"\n        (click)=\"onTabClick($event)\">\n        <ng-content select=\"ecl-tab-label\"></ng-content>\n    </a>\n\n    <ng-template #content>\n        <ng-content></ng-content>\n    </ng-template>\n", styles: [":host{display:list-item}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { id: [{
                 type: Input
             }], isHidden: [{
                 type: Input
@@ -13026,27 +13042,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
             }] } });
 
 class EclTabsComponent extends ECLBaseDirective {
-    constructor(differs, cd) {
+    constructor(differs, cdkBreakpointObserver, cd) {
         super();
         this.differs = differs;
+        this.cdkBreakpointObserver = cdkBreakpointObserver;
         this.cd = cd;
         this.bodyClass = 'ecl-u-mt-s';
         this.tabSelect = new EventEmitter();
+        this.isMobileBreakpoint = false;
         this.destroy$ = new Subject();
         this.differ = this.differs.find([]).create();
     }
+    ngOnInit() {
+        this.observeBreakpointChanges();
+    }
     ngAfterViewInit() {
+        this.handleResize();
         this.cd.detectChanges();
     }
     ngAfterContentInit() {
+        this.diff = this.differ.diff(this.tabs);
         this.observeTabsChanges();
     }
     ngOnDestroy() {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
     }
+    onWindowResize() {
+        this.handleResize();
+    }
+    onScrollPrev() {
+        console.log('scroll prev');
+    }
+    onScrollNext() {
+        console.log('scroll next');
+    }
+    isMoreButtonHidden() {
+        return this.isMobileBreakpoint;
+    }
+    getTabsWidthStyle() {
+        return this.isMobileBreakpoint ? `${this.getTabsWidth()}px` : 'auto';
+    }
+    getTabsWidth() {
+        return this.tabs.reduce((total, item) => {
+            return total += Math.ceil(item.getWidth());
+        }, 0);
+    }
+    getHiddenTabsCount() {
+        return this.tabs.filter(item => item.isHidden).length;
+    }
+    getTransitionDuration() {
+        if (this.isMobileBreakpoint) {
+            return '0.4s';
+        }
+        return '0s';
+    }
+    isScrollPrevHidden() {
+        if (!this.isMobileBreakpoint) {
+            return true;
+        }
+        return false;
+    }
+    isScrollNextHidden() {
+        if (!this.isMobileBreakpoint) {
+            return true;
+        }
+        return false;
+    }
     observeTabsChanges() {
-        this.diff = this.differ.diff(this.tabs);
         this.createTabsChangesObservable(this.tabs)
             .pipe(takeUntil$1(this.destroy$))
             .subscribe(this.onTabsChanges.bind(this));
@@ -13077,16 +13140,16 @@ class EclTabsComponent extends ECLBaseDirective {
             this.onTabSelect(tab);
         });
     }
-    onTabSelect(tab) {
-        this.deactivateAllTabs(this.tabs.toArray());
-        this.activateTab(tab);
-        this.sendTabSelectEvent(tab);
-    }
     disconnectTabEvents(tab) {
         if (tab && tab.select) {
             tab.select.unsubscribe();
         }
     }
+    onTabSelect(tab) {
+        this.deactivateAllTabs(this.tabs.toArray());
+        this.activateTab(tab);
+        this.sendTabSelectEvent(tab);
+    }
     deactivateAllTabs(tabs) {
         tabs.forEach(it => {
             it.isActive = false;
@@ -13098,38 +13161,91 @@ class EclTabsComponent extends ECLBaseDirective {
     sendTabSelectEvent(tab) {
         this.tabSelect.next(new EclTabSelectEvent(tab));
     }
+    observeBreakpointChanges() {
+        this.cdkBreakpointObserver.observe(['(max-width: 480px)'])
+            .pipe(takeUntil$1(this.destroy$))
+            .subscribe(result => {
+            this.isMobileBreakpoint = result.matches;
+        });
+    }
+    handleResize() {
+        // this.tabsListElement.style.width = `${this.getTabsWidth()}px`;
+    }
 }
-/** @nocollapse */ EclTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclTabsComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclTabsComponent, selector: "ecl-tabs", inputs: { bodyClass: "bodyClass" }, outputs: { tabSelect: "tabSelect" }, queries: [{ propertyName: "tabs", predicate: i0.forwardRef(function () { return EclTabComponent; }) }], usesInheritance: true, ngImport: i0, template: "<nav class=\"ecl-tabs\">\n    <div class=\"ecl-tabs__container\">\n        <ul class=\"ecl-tabs__list\">\n            <ng-content select=\"ecl-tab\"></ng-content>\n        </ul>\n    </div>\n\n    <ng-container *ngFor=\"let tab of tabs.toArray()\">\n        <div class=\"{{ bodyClass }}\" *ngIf=\"tab.isActive\">\n            <ng-container *ngTemplateOutlet=\"tab.contentTemplate\"></ng-container>\n        </div>\n    </ng-container>\n</nav>\n\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+/** @nocollapse */ EclTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclTabsComponent, deps: [{ token: i0.IterableDiffers }, { token: i1$3.BreakpointObserver }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ EclTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclTabsComponent, selector: "ecl-tabs", inputs: { bodyClass: "bodyClass" }, outputs: { tabSelect: "tabSelect" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, queries: [{ propertyName: "tabs", predicate: i0.forwardRef(function () { return EclTabComponent; }) }], usesInheritance: true, ngImport: i0, template: "<nav class=\"ecl-tabs\" role=\"tablist\">\n    <div class=\"ecl-tabs__container\">\n        <!-- <ul class=\"ecl-tabs__list\" \n            [style.width]=\"getTabsWidthStyle()\"\n            [style.transform]=\"'translate3d(0px, 0px, 0px)'\"\n            [style.transition-duration]=\"'0' || getTransitionDuration()\">\n            <ng-content select=\"ecl-tab\"></ng-content> -->\n        <ul class=\"ecl-tabs__list\">\n            <ng-content select=\"ecl-tab\"></ng-content>\n            <!-- <ecl-tab-more [isHidden]=\"isMoreButtonHidden()\">\n                <button \n                    eclButton \n                    class=\"ecl-tabs__toggle\"\n                    tabindex=\"-1\"\n                    variant=\"secondary\" \n                    [attr.aria-expanded]=\"true\"\n                    [class.ecl-tabs__toggle--active]=\"false\">\n                    <span eclButtonLabel>\n                        {{ 'ecl.common.MORE' | translate }}\n                        ({{ getHiddenTabsCount() }})\n                    </span>\n                    <ecl-icon icon=\"corner-arrow\" transform=\"rotate-180\" size=\"fluid\"></ecl-icon>\n                </button>\n                <ul \n                    class=\"ecl-tabs__dropdown\" \n                    [class.ecl-tabs__dropdown--show]=\"false\">\n                    <ng-container *ngFor=\"let tab of tabs.toArray()\">\n                        <ecl-tab [isActive]=\"tab.isActive\">\n                            <ecl-tab-label [innerHTML]=\"'test'\"></ecl-tab-label>\n                        </ecl-tab>\n                    </ng-container>\n                </ul>\n            </ecl-tab-more> -->\n        </ul>\n    </div>\n\n    <!-- <div class=\"ecl-tabs__controls\">\n        <button \n            [attr.aria-hidden]=\"true\"\n            class=\"ecl-tabs__prev\" \n            [class.ecl-u-d-none]=\"isScrollPrevHidden()\"\n            [class.ecl-u-d-block]=\"!isScrollPrevHidden()\"\n            (click)=\"onScrollPrev()\">\n            <ecl-icon \n                isInverted\n                icon=\"corner-arrow\" \n                transform=\"rotate-270\" \n                size=\"m\"\n                class=\"ecl-u-d-block\">\n            </ecl-icon>\n            <span class=\"ecl-u-sr-only\"></span>\n        </button>\n        <button \n            [attr.aria-hidden]=\"true\"\n            class=\"ecl-tabs__next\" \n            [class.ecl-u-d-none]=\"isScrollNextHidden()\"\n            [class.ecl-u-d-block]=\"!isScrollNextHidden()\"\n            (click)=\"onScrollNext()\">\n            <ecl-icon \n                isInverted\n                icon=\"corner-arrow\" \n                color=\"inverted\" \n                transform=\"rotate-90\" \n                size=\"m\"\n                class=\"ecl-u-d-block\">\n            </ecl-icon>\n            <span class=\"ecl-u-sr-only\"></span>\n        </button>\n    </div> -->\n</nav>\n\n<ng-container *ngFor=\"let tab of tabs.toArray()\">\n    <div class=\"{{ bodyClass }}\" *ngIf=\"tab.isActive\">\n        <ng-container *ngTemplateOutlet=\"tab.contentTemplate\"></ng-container>\n    </div>\n</ng-container>\n", styles: [".ecl-tabs{margin-bottom:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "15.0.0-next.4", ngImport: i0, type: EclTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-tabs', template: "<nav class=\"ecl-tabs\">\n    <div class=\"ecl-tabs__container\">\n        <ul class=\"ecl-tabs__list\">\n            <ng-content select=\"ecl-tab\"></ng-content>\n        </ul>\n    </div>\n\n    <ng-container *ngFor=\"let tab of tabs.toArray()\">\n        <div class=\"{{ bodyClass }}\" *ngIf=\"tab.isActive\">\n            <ng-container *ngTemplateOutlet=\"tab.contentTemplate\"></ng-container>\n        </div>\n    </ng-container>\n</nav>\n\n" }]
-        }], ctorParameters: function () { return [{ type: i0.IterableDiffers }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { bodyClass: [{
+            args: [{ selector: 'ecl-tabs', template: "<nav class=\"ecl-tabs\" role=\"tablist\">\n    <div class=\"ecl-tabs__container\">\n        <!-- <ul class=\"ecl-tabs__list\" \n            [style.width]=\"getTabsWidthStyle()\"\n            [style.transform]=\"'translate3d(0px, 0px, 0px)'\"\n            [style.transition-duration]=\"'0' || getTransitionDuration()\">\n            <ng-content select=\"ecl-tab\"></ng-content> -->\n        <ul class=\"ecl-tabs__list\">\n            <ng-content select=\"ecl-tab\"></ng-content>\n            <!-- <ecl-tab-more [isHidden]=\"isMoreButtonHidden()\">\n                <button \n                    eclButton \n                    class=\"ecl-tabs__toggle\"\n                    tabindex=\"-1\"\n                    variant=\"secondary\" \n                    [attr.aria-expanded]=\"true\"\n                    [class.ecl-tabs__toggle--active]=\"false\">\n                    <span eclButtonLabel>\n                        {{ 'ecl.common.MORE' | translate }}\n                        ({{ getHiddenTabsCount() }})\n                    </span>\n                    <ecl-icon icon=\"corner-arrow\" transform=\"rotate-180\" size=\"fluid\"></ecl-icon>\n                </button>\n                <ul \n                    class=\"ecl-tabs__dropdown\" \n                    [class.ecl-tabs__dropdown--show]=\"false\">\n                    <ng-container *ngFor=\"let tab of tabs.toArray()\">\n                        <ecl-tab [isActive]=\"tab.isActive\">\n                            <ecl-tab-label [innerHTML]=\"'test'\"></ecl-tab-label>\n                        </ecl-tab>\n                    </ng-container>\n                </ul>\n            </ecl-tab-more> -->\n        </ul>\n    </div>\n\n    <!-- <div class=\"ecl-tabs__controls\">\n        <button \n            [attr.aria-hidden]=\"true\"\n            class=\"ecl-tabs__prev\" \n            [class.ecl-u-d-none]=\"isScrollPrevHidden()\"\n            [class.ecl-u-d-block]=\"!isScrollPrevHidden()\"\n            (click)=\"onScrollPrev()\">\n            <ecl-icon \n                isInverted\n                icon=\"corner-arrow\" \n                transform=\"rotate-270\" \n                size=\"m\"\n                class=\"ecl-u-d-block\">\n            </ecl-icon>\n            <span class=\"ecl-u-sr-only\"></span>\n        </button>\n        <button \n            [attr.aria-hidden]=\"true\"\n            class=\"ecl-tabs__next\" \n            [class.ecl-u-d-none]=\"isScrollNextHidden()\"\n            [class.ecl-u-d-block]=\"!isScrollNextHidden()\"\n            (click)=\"onScrollNext()\">\n            <ecl-icon \n                isInverted\n                icon=\"corner-arrow\" \n                color=\"inverted\" \n                transform=\"rotate-90\" \n                size=\"m\"\n                class=\"ecl-u-d-block\">\n            </ecl-icon>\n            <span class=\"ecl-u-sr-only\"></span>\n        </button>\n    </div> -->\n</nav>\n\n<ng-container *ngFor=\"let tab of tabs.toArray()\">\n    <div class=\"{{ bodyClass }}\" *ngIf=\"tab.isActive\">\n        <ng-container *ngTemplateOutlet=\"tab.contentTemplate\"></ng-container>\n    </div>\n</ng-container>\n", styles: [".ecl-tabs{margin-bottom:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.IterableDiffers }, { type: i1$3.BreakpointObserver }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { bodyClass: [{
                 type: Input
             }], tabSelect: [{
                 type: Output
             }], tabs: [{
                 type: ContentChildren,
                 args: [forwardRef(() => EclTabComponent)]
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
+class EclTabMoreComponent extends ECLBaseDirective {
+    constructor(el) {
+        super();
+        this.el = el;
+        this.isHidden = false;
+        this.role = 'listitem';
+    }
+    get cssClasses() {
+        return [
+            super.getCssClasses('ecl-tabs__item ecl-tabs__item--more'),
+        ].join(' ').trim();
+    }
+    get hostElement() {
+        return this.el.nativeElement;
+    }
+}
+/** @nocollapse */ EclTabMoreComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclTabMoreComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ EclTabMoreComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclTabMoreComponent, selector: "ecl-tab-more", inputs: { isHidden: "isHidden" }, host: { properties: { "attr.aria-hidden": "this.isHidden", "attr.role": "this.role", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{display:list-item}\n"] });
+__decorate([
+    coerceBoolean
+], EclTabMoreComponent.prototype, "isHidden", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclTabMoreComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecl-tab-more', template: "<ng-content></ng-content>", styles: [":host{display:list-item}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { isHidden: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.aria-hidden']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
 const COMPONENTS = [
     EclTabsComponent,
     EclTabComponent,
     EclTabLabelComponent,
+    EclTabMoreComponent,
 ];
 class EclTabsComponentModule {
 }
 /** @nocollapse */ EclTabsComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclTabsComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 /** @nocollapse */ EclTabsComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclTabsComponentModule, declarations: [EclTabsComponent,
         EclTabComponent,
-        EclTabLabelComponent], imports: [CommonModule,
+        EclTabLabelComponent,
+        EclTabMoreComponent], imports: [CommonModule,
         EclLinkDirectiveModule,
         EclButtonComponentModule,
         EclIconComponentModule,
         TranslateModule], exports: [EclTabsComponent,
         EclTabComponent,
-        EclTabLabelComponent] });
+        EclTabLabelComponent,
+        EclTabMoreComponent] });
 /** @nocollapse */ EclTabsComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclTabsComponentModule, imports: [CommonModule,
         EclLinkDirectiveModule,
         EclButtonComponentModule,
@@ -13833,5 +13949,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
  * Generated bundle index. Do not edit.
  */
 
-export { ECLClickOutsideDirective, ECL_DATE_PICKER_VALUE_ACCESSOR, ECL_RATINGFIELD_VALUE_ACCESSOR, ECL_SEARCH_FORM_VALUE_ACCESSOR, EclAccordionComponent, EclAccordionComponentModule, EclAccordionItemComponent, EclAccordionToggleEvent, EclAllModule, EclAppComponent, EclAppComponentBase, EclAppComponentModule, EclAppCoreComponent, EclAppCoreComponentModule, EclAppHarmonisedComponent, EclAppHarmonisedComponentModule, EclAppLanguageDismissEvent, EclAppStandardisedComponent, EclAppStandardisedComponentModule, EclBaseEvent, EclBlockquoteComponent, EclBlockquoteComponentModule, EclBlockquoteImageDirective, EclBreadcrumbComponent, EclBreadcrumbComponentBase, EclBreadcrumbComponentModule, EclBreadcrumbCoreComponent, EclBreadcrumbCoreComponentModule, EclBreadcrumbCoreSegmentComponent, EclBreadcrumbHarmonisedComponent, EclBreadcrumbHarmonisedComponentModule, EclBreadcrumbHarmonisedSegmentComponent, EclBreadcrumbSegmentClickEvent, EclBreadcrumbSegmentComponent, EclBreadcrumbSegmentComponentBase, EclBreadcrumbStandardisedComponent, EclBreadcrumbStandardisedComponentModule, EclBreadcrumbStandardisedSegmentComponent, EclButtonComponent, EclButtonComponentModule, EclButtonLabelDirective, EclCardBodyComponent, EclCardComponent, EclCardComponentModule, EclCardImageDirective, EclCarouselComponent, EclCarouselComponentModule, EclCarouselItemComponent, EclCategoryFilterComponent, EclCategoryFilterItemComponent, EclCategoryFilterItemSelectEvent, EclCategoryFilterListComponent, EclCategoryFilterModule, EclCheckboxDirective, EclCheckboxHelpComponent, EclCheckboxInputDirective, EclCheckboxLabelComponent, EclCheckboxModule, EclClickOutsideModule, EclContentBlockComponent, EclContentBlockComponentModule, EclContentBlockDescriptionDirective, EclContentBlockLabelDirective, EclContentBlockLabelsDirective, EclContentBlockLinkDirective, EclContentBlockLinksContainerDirective, EclContentBlockLinksDirective, EclContentBlockListContainerDirective, EclContentBlockListDirective, EclContentBlockPrimaryMetaDirective, EclContentBlockPrimaryMetasDirective, EclContentBlockSecondaryMetaDirective, EclContentBlockSecondaryMetaIconDirective, EclContentBlockSecondaryMetaLabelDirective, EclContentBlockSecondaryMetasDirective, EclContentBlockTagDirective, EclContentBlockTagsDirective, EclContentBlockTitleDirective, EclContentItemComponent, EclContentItemComponentModule, EclContentItemImageDirective, EclContentItemPictureDirective, EclDateBlockComponent, EclDateBlockComponentModule, EclDatePickerDatePickedEvent, EclDatePickerDirective, EclDatePickerDirectiveModule, EclDefaultLanguageService, EclDescriptionListDefinitionDirective, EclDescriptionListDefinitionItemDirective, EclDescriptionListDirective, EclDescriptionListTermDirective, EclDomEvent, EclExpandableComponent, EclExpandableComponentModule, EclExpandableToggleEvent, EclFactFiguresComponent, EclFactFiguresComponentModule, EclFactFiguresDescriptionComponent, EclFactFiguresItemComponent, EclFactFiguresTitleComponent, EclFactFiguresValueComponent, EclFactFiguresViewAllComponent, EclFeaturedComponent, EclFeaturedItemComponent, EclFeaturedItemDescriptionComponent, EclFeaturedItemLinkDirective, EclFeaturedModule, EclFeedbackMessageDirective, EclFeedbackMessageDirectiveModule, EclFileComponent, EclFileComponentModule, EclFileDownloadEvent, EclFileItemComponent, EclFileItemsComponent, EclFileItemsToggleEvent, EclFileTaxonomyComponent, EclFileUploadDirective, EclFileUploadDirectiveModule, EclFileUploadFileSelectedEvent, EclFooterComponentBase, EclFooterCoreColumntDirective, EclFooterCoreComponent, EclFooterCoreComponentModule, EclFooterCoreDescriptionDirective, EclFooterCoreLinkDirective, EclFooterCoreListDirective, EclFooterCoreListItemDirective, EclFooterCoreSectionDirective, EclFooterCoreTitleDirective, EclFooterCoreTitleLinkDirective, EclFooterHarmonisedColumnDirective, EclFooterHarmonisedComponent, EclFooterHarmonisedComponentModule, EclFooterHarmonisedContentDirective, EclFooterHarmonisedDescriptionDirective, EclFooterHarmonisedLinkDirective, EclFooterHarmonisedListDirective, EclFooterHarmonisedListItemDirective, EclFooterHarmonisedLogoDirective, EclFooterHarmonisedLogoImageDesktopDirective, EclFooterHarmonisedLogoItemDirective, EclFooterHarmonisedLogoLinkDirective, EclFooterHarmonisedLogoListDirective, EclFooterHarmonisedRowDirective, EclFooterHarmonisedSectionDirective, EclFooterHarmonisedTitleDirective, EclFooterHarmonisedTitleLinkDirective, EclFooterStandardisedColumnDirective, EclFooterStandardisedComponent, EclFooterStandardisedComponentModule, EclFooterStandardisedContentDirective, EclFooterStandardisedDescriptionDirective, EclFooterStandardisedLinkDirective, EclFooterStandardisedListDirective, EclFooterStandardisedListItemDirective, EclFooterStandardisedLogoImageDesktopDirective, EclFooterStandardisedLogoLinkDirective, EclFooterStandardisedRowDirective, EclFooterStandardisedSectionDirective, EclFooterStandardisedTitleDirective, EclFooterStandardisedTitleLinkDirective, EclFormGroupComponent, EclFormGroupComponentModule, EclFormLabelComponent, EclFormLabelComponentModule, EclGalleryComponent, EclGalleryComponentModule, EclGalleryDownloadEvent, EclGalleryFooterComponent, EclGalleryHideEvent, EclGalleryItemClickEvent, EclGalleryItemComponent, EclGalleryItemEvent, EclGalleryMediaDirective, EclGalleryMediaSource, EclGalleryMediaTrack, EclGalleryShareEvent, EclGalleryShowEvent, EclHelpBlockDirective, EclHelpBlockDirectiveModule, EclHeroBannerComponent, EclHeroBannerComponentModule, EclHeroBannerCreditDirective, EclHeroBannerCtaLinkDirective, EclHeroBannerDescriptionDirective, EclHeroBannerTitleDirective, EclHiddenDirective, EclHiddenModule, EclIconComponent, EclIconComponentModule, EclInpageNavigationComponent, EclInpageNavigationComponentModule, EclInpageNavigationItemClickEvent, EclInpageNavigationItemComponent, EclInpageNavigationSectionEnterEvent, EclLabelDirective, EclLabelDirectiveModule, EclLanguageListCloseEvent, EclLanguageListComponent, EclLanguageListComponentModule, EclLanguageListItemClickEvent, EclLanguageListItemComponent, EclLanguageListLanguageSelectedEvent, EclLanguageService, EclLinkDirective, EclLinkDirectiveModule, EclLinkLabelDirective, EclListDirectiveModule, EclListIllustrationComponent, EclListIllustrationComponentModule, EclListIllustrationIconDirective, EclListIllustrationImageDirective, EclListIllustrationItemComponent, EclMediaContainerComponent, EclMediaContainerComponentModule, EclMediaContainerItemDirective, EclMenuComponent, EclMenuComponentModule, EclMenuItemComponent, EclMenuItemFocusEvent, EclMenuItemHoverEvent, EclMenuItemHoverOutEvent, EclMenuItemSelectEvent, EclMenuMegaComponent, EclMenuMegaItemComponent, EclMessageCloseEvent, EclMessageComponent, EclMessageComponentModule, EclMessageTitleDirective, EclMultiselectComponent, EclMultiselectComponentModule, EclMultiselectOptionDirective, EclNavigationListComponent, EclNavigationListComponentModule, EclNavigationListImageDirective, EclNavigationListItemComponent, EclNewsTickerComponent, EclNewsTickerComponentModule, EclNewsTickerItemComponent, EclNewsTickerItemEvent, EclOrderedListDirective, EclOrderedListItemDirective, EclPageBannerComponent, EclPageBannerComponentModule, EclPageBannerCreditDirective, EclPageBannerCtaLinkDirective, EclPageBannerDescriptionDirective, EclPageBannerTitleDirective, EclPageHeaderComponent, EclPageHeaderComponentBase, EclPageHeaderComponentModule, EclPageHeaderCoreComponent, EclPageHeaderCoreComponentModule, EclPageHeaderCoreDescriptionContainerDirective, EclPageHeaderCoreDescriptionDirective, EclPageHeaderCoreDescriptionThumbnailDirective, EclPageHeaderCoreMetaDirective, EclPageHeaderCoreMetaItemDirective, EclPageHeaderCoreTitleDirective, EclPageHeaderDescriptionContainerDirective, EclPageHeaderDescriptionDirective, EclPageHeaderDescriptionThumbnailDirective, EclPageHeaderHarmonisedComponent, EclPageHeaderHarmonisedComponentModule, EclPageHeaderHarmonisedDescriptionContainerDirective, EclPageHeaderHarmonisedDescriptionDirective, EclPageHeaderHarmonisedDescriptionThumbnailDirective, EclPageHeaderHarmonisedMetaDirective, EclPageHeaderHarmonisedMetaItemDirective, EclPageHeaderHarmonisedTitleDirective, EclPageHeaderMetaDirective, EclPageHeaderMetaItemDirective, EclPageHeaderStandardisedComponent, EclPageHeaderStandardisedComponentModule, EclPageHeaderStandardisedDescriptionContainerDirective, EclPageHeaderStandardisedDescriptionDirective, EclPageHeaderStandardisedDescriptionThumbnailDirective, EclPageHeaderStandardisedMetaDirective, EclPageHeaderStandardisedMetaItemDirective, EclPageHeaderStandardisedTitleDirective, EclPageHeaderTitleDirective, EclPaginationComponent, EclPaginationComponentModule, EclPaginationEvent, EclPaginationItemClickEvent, EclPaginationItemComponent, EclRadioDirective, EclRadioDirectiveModule, EclRadioHelpComponent, EclRadioInputDirective, EclRadioLabelComponent, EclRatingChangeEvent, EclRatingFieldComponent, EclRatingFieldComponentModule, EclSearchFormComponent, EclSearchFormComponentModule, EclSearchFormEvent, EclSelectDirective, EclSelectDirectiveModule, EclSiteFooterColumnDirective, EclSiteFooterComponent, EclSiteFooterComponentModule, EclSiteFooterContentDirective, EclSiteFooterDescriptionDirective, EclSiteFooterLinkDirective, EclSiteFooterListDirective, EclSiteFooterListItemDirective, EclSiteFooterLogoDirective, EclSiteFooterLogoImageDesktopDirective, EclSiteFooterLogoItemDirective, EclSiteFooterLogoLinkDirective, EclSiteFooterLogoListDirective, EclSiteFooterRowDirective, EclSiteFooterSectionDirective, EclSiteFooterTitleDirective, EclSiteFooterTitleLinkDirective, EclSiteHeaderActionComponent, EclSiteHeaderActionComponentBase, EclSiteHeaderBannerTopComponent, EclSiteHeaderBannerTopComponentBase, EclSiteHeaderComponent, EclSiteHeaderComponentBase, EclSiteHeaderComponentModule, EclSiteHeaderCoreActionComponent, EclSiteHeaderCoreComponent, EclSiteHeaderCoreComponentModule, EclSiteHeaderCoreLanguageComponent, EclSiteHeaderCoreLoginComponent, EclSiteHeaderCoreLoginDescriptionDirective, EclSiteHeaderCoreLoginSeparatorDirective, EclSiteHeaderCoreSearchComponent, EclSiteHeaderEnvironmentComponent, EclSiteHeaderHarmonisedActionComponent, EclSiteHeaderHarmonisedBannerTopComponent, EclSiteHeaderHarmonisedComponent, EclSiteHeaderHarmonisedComponentModule, EclSiteHeaderHarmonisedLanguageComponent, EclSiteHeaderHarmonisedLoginComponent, EclSiteHeaderHarmonisedLoginDescriptionDirective, EclSiteHeaderHarmonisedLoginSeparatorDirective, EclSiteHeaderHarmonisedSearchComponent, EclSiteHeaderLanguageClickEvent, EclSiteHeaderLanguageComponent, EclSiteHeaderLanguageComponentBase, EclSiteHeaderLoginBoxToggleEvent, EclSiteHeaderLoginComponent, EclSiteHeaderLoginComponentBase, EclSiteHeaderLoginDescriptionDirective, EclSiteHeaderLoginEvent, EclSiteHeaderLoginSeparatorDirective, EclSiteHeaderLogoClickEvent, EclSiteHeaderSearchComponent, EclSiteHeaderSearchComponentBase, EclSiteHeaderSearchEvent, EclSiteHeaderSearchToggleEvent, EclSiteHeaderStandardisedActionComponent, EclSiteHeaderStandardisedBannerTopComponent, EclSiteHeaderStandardisedComponent, EclSiteHeaderStandardisedComponentModule, EclSiteHeaderStandardisedCtaDirective, EclSiteHeaderStandardisedLanguageComponent, EclSiteHeaderStandardisedLoginComponent, EclSiteHeaderStandardisedLoginDescriptionDirective, EclSiteHeaderStandardisedLoginSeparatorDirective, EclSiteHeaderStandardisedSearchComponent, EclSocialMediaFollowComponent, EclSocialMediaFollowComponentModule, EclSocialMediaFollowItemClickEvent, EclSocialMediaFollowItemComponent, EclSocialMediaShareComponent, EclSocialMediaShareComponentModule, EclSocialMediaShareItemClickEvent, EclSocialMediaShareItemComponent, EclSortTableEvent, EclSpinnerComponent, EclSpinnerComponentModule, EclSpinnerLabelDirective, EclStickyContainerComponent, EclStickyContainerComponentModule, EclTabComponent, EclTabLabelComponent, EclTabSelectEvent, EclTableBodyDirective, EclTableCellDirective, EclTableCellGroupDirective, EclTableDirective, EclTableDirectiveModule, EclTableHeadDirective, EclTableHeaderDirective, EclTableRowDirective, EclTabsComponent, EclTabsComponentModule, EclTagComponent, EclTagComponentModule, EclTagRemoveEvent, EclTextAreaDirective, EclTextAreaDirectiveModule, EclTextInputDirective, EclTextInputDirectiveModule, EclTimelineComponent, EclTimelineComponentModule, EclTimelineItemComponent, EclTimelineItemLabelDirective, EclTimelineItemTitleDirective, EclTimelineItemToggleEvent, EclTimelineItemTogglerComponent, EclUnorderedListDirective, EclUnorderedListItemDirective, SortOrder, hasNextSiblingWithAttribute, hasPreviousSiblingWithAttribute };
+export { ECLClickOutsideDirective, ECL_DATE_PICKER_VALUE_ACCESSOR, ECL_RATINGFIELD_VALUE_ACCESSOR, ECL_SEARCH_FORM_VALUE_ACCESSOR, EclAccordionComponent, EclAccordionComponentModule, EclAccordionItemComponent, EclAccordionToggleEvent, EclAllModule, EclAppComponent, EclAppComponentBase, EclAppComponentModule, EclAppCoreComponent, EclAppCoreComponentModule, EclAppHarmonisedComponent, EclAppHarmonisedComponentModule, EclAppLanguageDismissEvent, EclAppStandardisedComponent, EclAppStandardisedComponentModule, EclBaseEvent, EclBlockquoteComponent, EclBlockquoteComponentModule, EclBlockquoteImageDirective, EclBreadcrumbComponent, EclBreadcrumbComponentBase, EclBreadcrumbComponentModule, EclBreadcrumbCoreComponent, EclBreadcrumbCoreComponentModule, EclBreadcrumbCoreSegmentComponent, EclBreadcrumbHarmonisedComponent, EclBreadcrumbHarmonisedComponentModule, EclBreadcrumbHarmonisedSegmentComponent, EclBreadcrumbSegmentClickEvent, EclBreadcrumbSegmentComponent, EclBreadcrumbSegmentComponentBase, EclBreadcrumbStandardisedComponent, EclBreadcrumbStandardisedComponentModule, EclBreadcrumbStandardisedSegmentComponent, EclButtonComponent, EclButtonComponentModule, EclButtonLabelDirective, EclCardBodyComponent, EclCardComponent, EclCardComponentModule, EclCardImageDirective, EclCarouselComponent, EclCarouselComponentModule, EclCarouselItemComponent, EclCategoryFilterComponent, EclCategoryFilterItemComponent, EclCategoryFilterItemSelectEvent, EclCategoryFilterListComponent, EclCategoryFilterModule, EclCheckboxDirective, EclCheckboxHelpComponent, EclCheckboxInputDirective, EclCheckboxLabelComponent, EclCheckboxModule, EclClickOutsideModule, EclContentBlockComponent, EclContentBlockComponentModule, EclContentBlockDescriptionDirective, EclContentBlockLabelDirective, EclContentBlockLabelsDirective, EclContentBlockLinkDirective, EclContentBlockLinksContainerDirective, EclContentBlockLinksDirective, EclContentBlockListContainerDirective, EclContentBlockListDirective, EclContentBlockPrimaryMetaDirective, EclContentBlockPrimaryMetasDirective, EclContentBlockSecondaryMetaDirective, EclContentBlockSecondaryMetaIconDirective, EclContentBlockSecondaryMetaLabelDirective, EclContentBlockSecondaryMetasDirective, EclContentBlockTagDirective, EclContentBlockTagsDirective, EclContentBlockTitleDirective, EclContentItemComponent, EclContentItemComponentModule, EclContentItemImageDirective, EclContentItemPictureDirective, EclDateBlockComponent, EclDateBlockComponentModule, EclDatePickerDatePickedEvent, EclDatePickerDirective, EclDatePickerDirectiveModule, EclDefaultLanguageService, EclDescriptionListDefinitionDirective, EclDescriptionListDefinitionItemDirective, EclDescriptionListDirective, EclDescriptionListTermDirective, EclDomEvent, EclExpandableComponent, EclExpandableComponentModule, EclExpandableToggleEvent, EclFactFiguresComponent, EclFactFiguresComponentModule, EclFactFiguresDescriptionComponent, EclFactFiguresItemComponent, EclFactFiguresTitleComponent, EclFactFiguresValueComponent, EclFactFiguresViewAllComponent, EclFeaturedComponent, EclFeaturedItemComponent, EclFeaturedItemDescriptionComponent, EclFeaturedItemLinkDirective, EclFeaturedModule, EclFeedbackMessageDirective, EclFeedbackMessageDirectiveModule, EclFileComponent, EclFileComponentModule, EclFileDownloadEvent, EclFileItemComponent, EclFileItemsComponent, EclFileItemsToggleEvent, EclFileTaxonomyComponent, EclFileUploadDirective, EclFileUploadDirectiveModule, EclFileUploadFileSelectedEvent, EclFooterComponentBase, EclFooterCoreColumntDirective, EclFooterCoreComponent, EclFooterCoreComponentModule, EclFooterCoreDescriptionDirective, EclFooterCoreLinkDirective, EclFooterCoreListDirective, EclFooterCoreListItemDirective, EclFooterCoreSectionDirective, EclFooterCoreTitleDirective, EclFooterCoreTitleLinkDirective, EclFooterHarmonisedColumnDirective, EclFooterHarmonisedComponent, EclFooterHarmonisedComponentModule, EclFooterHarmonisedContentDirective, EclFooterHarmonisedDescriptionDirective, EclFooterHarmonisedLinkDirective, EclFooterHarmonisedListDirective, EclFooterHarmonisedListItemDirective, EclFooterHarmonisedLogoDirective, EclFooterHarmonisedLogoImageDesktopDirective, EclFooterHarmonisedLogoItemDirective, EclFooterHarmonisedLogoLinkDirective, EclFooterHarmonisedLogoListDirective, EclFooterHarmonisedRowDirective, EclFooterHarmonisedSectionDirective, EclFooterHarmonisedTitleDirective, EclFooterHarmonisedTitleLinkDirective, EclFooterStandardisedColumnDirective, EclFooterStandardisedComponent, EclFooterStandardisedComponentModule, EclFooterStandardisedContentDirective, EclFooterStandardisedDescriptionDirective, EclFooterStandardisedLinkDirective, EclFooterStandardisedListDirective, EclFooterStandardisedListItemDirective, EclFooterStandardisedLogoImageDesktopDirective, EclFooterStandardisedLogoLinkDirective, EclFooterStandardisedRowDirective, EclFooterStandardisedSectionDirective, EclFooterStandardisedTitleDirective, EclFooterStandardisedTitleLinkDirective, EclFormGroupComponent, EclFormGroupComponentModule, EclFormLabelComponent, EclFormLabelComponentModule, EclGalleryComponent, EclGalleryComponentModule, EclGalleryDownloadEvent, EclGalleryFooterComponent, EclGalleryHideEvent, EclGalleryItemClickEvent, EclGalleryItemComponent, EclGalleryItemEvent, EclGalleryMediaDirective, EclGalleryMediaSource, EclGalleryMediaTrack, EclGalleryShareEvent, EclGalleryShowEvent, EclHelpBlockDirective, EclHelpBlockDirectiveModule, EclHeroBannerComponent, EclHeroBannerComponentModule, EclHeroBannerCreditDirective, EclHeroBannerCtaLinkDirective, EclHeroBannerDescriptionDirective, EclHeroBannerTitleDirective, EclHiddenDirective, EclHiddenModule, EclIconComponent, EclIconComponentModule, EclInpageNavigationComponent, EclInpageNavigationComponentModule, EclInpageNavigationItemClickEvent, EclInpageNavigationItemComponent, EclInpageNavigationSectionEnterEvent, EclLabelDirective, EclLabelDirectiveModule, EclLanguageListCloseEvent, EclLanguageListComponent, EclLanguageListComponentModule, EclLanguageListItemClickEvent, EclLanguageListItemComponent, EclLanguageListLanguageSelectedEvent, EclLanguageService, EclLinkDirective, EclLinkDirectiveModule, EclLinkLabelDirective, EclListDirectiveModule, EclListIllustrationComponent, EclListIllustrationComponentModule, EclListIllustrationIconDirective, EclListIllustrationImageDirective, EclListIllustrationItemComponent, EclMediaContainerComponent, EclMediaContainerComponentModule, EclMediaContainerItemDirective, EclMenuComponent, EclMenuComponentModule, EclMenuItemCaretEvent, EclMenuItemComponent, EclMenuItemFocusEvent, EclMenuItemHoverEvent, EclMenuItemHoverOutEvent, EclMenuItemSelectEvent, EclMenuMegaComponent, EclMenuMegaItemComponent, EclMessageCloseEvent, EclMessageComponent, EclMessageComponentModule, EclMessageTitleDirective, EclMultiselectComponent, EclMultiselectComponentModule, EclMultiselectOptionDirective, EclNavigationListComponent, EclNavigationListComponentModule, EclNavigationListImageDirective, EclNavigationListItemComponent, EclNewsTickerComponent, EclNewsTickerComponentModule, EclNewsTickerItemComponent, EclNewsTickerItemEvent, EclOrderedListDirective, EclOrderedListItemDirective, EclPageBannerComponent, EclPageBannerComponentModule, EclPageBannerCreditDirective, EclPageBannerCtaLinkDirective, EclPageBannerDescriptionDirective, EclPageBannerTitleDirective, EclPageHeaderComponent, EclPageHeaderComponentBase, EclPageHeaderComponentModule, EclPageHeaderCoreComponent, EclPageHeaderCoreComponentModule, EclPageHeaderCoreDescriptionContainerDirective, EclPageHeaderCoreDescriptionDirective, EclPageHeaderCoreDescriptionThumbnailDirective, EclPageHeaderCoreMetaDirective, EclPageHeaderCoreMetaItemDirective, EclPageHeaderCoreTitleDirective, EclPageHeaderDescriptionContainerDirective, EclPageHeaderDescriptionDirective, EclPageHeaderDescriptionThumbnailDirective, EclPageHeaderHarmonisedComponent, EclPageHeaderHarmonisedComponentModule, EclPageHeaderHarmonisedDescriptionContainerDirective, EclPageHeaderHarmonisedDescriptionDirective, EclPageHeaderHarmonisedDescriptionThumbnailDirective, EclPageHeaderHarmonisedMetaDirective, EclPageHeaderHarmonisedMetaItemDirective, EclPageHeaderHarmonisedTitleDirective, EclPageHeaderMetaDirective, EclPageHeaderMetaItemDirective, EclPageHeaderStandardisedComponent, EclPageHeaderStandardisedComponentModule, EclPageHeaderStandardisedDescriptionContainerDirective, EclPageHeaderStandardisedDescriptionDirective, EclPageHeaderStandardisedDescriptionThumbnailDirective, EclPageHeaderStandardisedMetaDirective, EclPageHeaderStandardisedMetaItemDirective, EclPageHeaderStandardisedTitleDirective, EclPageHeaderTitleDirective, EclPaginationComponent, EclPaginationComponentModule, EclPaginationEvent, EclPaginationItemClickEvent, EclPaginationItemComponent, EclRadioDirective, EclRadioDirectiveModule, EclRadioHelpComponent, EclRadioInputDirective, EclRadioLabelComponent, EclRatingChangeEvent, EclRatingFieldComponent, EclRatingFieldComponentModule, EclSearchFormComponent, EclSearchFormComponentModule, EclSearchFormEvent, EclSelectDirective, EclSelectDirectiveModule, EclSiteFooterColumnDirective, EclSiteFooterComponent, EclSiteFooterComponentModule, EclSiteFooterContentDirective, EclSiteFooterDescriptionDirective, EclSiteFooterLinkDirective, EclSiteFooterListDirective, EclSiteFooterListItemDirective, EclSiteFooterLogoDirective, EclSiteFooterLogoImageDesktopDirective, EclSiteFooterLogoItemDirective, EclSiteFooterLogoLinkDirective, EclSiteFooterLogoListDirective, EclSiteFooterRowDirective, EclSiteFooterSectionDirective, EclSiteFooterTitleDirective, EclSiteFooterTitleLinkDirective, EclSiteHeaderActionComponent, EclSiteHeaderActionComponentBase, EclSiteHeaderBannerTopComponent, EclSiteHeaderBannerTopComponentBase, EclSiteHeaderComponent, EclSiteHeaderComponentBase, EclSiteHeaderComponentModule, EclSiteHeaderCoreActionComponent, EclSiteHeaderCoreComponent, EclSiteHeaderCoreComponentModule, EclSiteHeaderCoreLanguageComponent, EclSiteHeaderCoreLoginComponent, EclSiteHeaderCoreLoginDescriptionDirective, EclSiteHeaderCoreLoginSeparatorDirective, EclSiteHeaderCoreSearchComponent, EclSiteHeaderEnvironmentComponent, EclSiteHeaderHarmonisedActionComponent, EclSiteHeaderHarmonisedBannerTopComponent, EclSiteHeaderHarmonisedComponent, EclSiteHeaderHarmonisedComponentModule, EclSiteHeaderHarmonisedLanguageComponent, EclSiteHeaderHarmonisedLoginComponent, EclSiteHeaderHarmonisedLoginDescriptionDirective, EclSiteHeaderHarmonisedLoginSeparatorDirective, EclSiteHeaderHarmonisedSearchComponent, EclSiteHeaderLanguageClickEvent, EclSiteHeaderLanguageComponent, EclSiteHeaderLanguageComponentBase, EclSiteHeaderLoginBoxToggleEvent, EclSiteHeaderLoginComponent, EclSiteHeaderLoginComponentBase, EclSiteHeaderLoginDescriptionDirective, EclSiteHeaderLoginEvent, EclSiteHeaderLoginSeparatorDirective, EclSiteHeaderLogoClickEvent, EclSiteHeaderSearchComponent, EclSiteHeaderSearchComponentBase, EclSiteHeaderSearchEvent, EclSiteHeaderSearchToggleEvent, EclSiteHeaderStandardisedActionComponent, EclSiteHeaderStandardisedBannerTopComponent, EclSiteHeaderStandardisedComponent, EclSiteHeaderStandardisedComponentModule, EclSiteHeaderStandardisedCtaDirective, EclSiteHeaderStandardisedLanguageComponent, EclSiteHeaderStandardisedLoginComponent, EclSiteHeaderStandardisedLoginDescriptionDirective, EclSiteHeaderStandardisedLoginSeparatorDirective, EclSiteHeaderStandardisedSearchComponent, EclSocialMediaFollowComponent, EclSocialMediaFollowComponentModule, EclSocialMediaFollowItemClickEvent, EclSocialMediaFollowItemComponent, EclSocialMediaShareComponent, EclSocialMediaShareComponentModule, EclSocialMediaShareItemClickEvent, EclSocialMediaShareItemComponent, EclSortTableEvent, EclSpinnerComponent, EclSpinnerComponentModule, EclSpinnerLabelDirective, EclStickyContainerComponent, EclStickyContainerComponentModule, EclTabComponent, EclTabLabelComponent, EclTabMoreComponent, EclTabSelectEvent, EclTableBodyDirective, EclTableCellDirective, EclTableCellGroupDirective, EclTableDirective, EclTableDirectiveModule, EclTableHeadDirective, EclTableHeaderDirective, EclTableRowDirective, EclTabsComponent, EclTabsComponentModule, EclTagComponent, EclTagComponentModule, EclTagRemoveEvent, EclTextAreaDirective, EclTextAreaDirectiveModule, EclTextInputDirective, EclTextInputDirectiveModule, EclTimelineComponent, EclTimelineComponentModule, EclTimelineItemComponent, EclTimelineItemLabelDirective, EclTimelineItemTitleDirective, EclTimelineItemToggleEvent, EclTimelineItemTogglerComponent, EclUnorderedListDirective, EclUnorderedListItemDirective, SortOrder, hasNextSiblingWithAttribute, hasPreviousSiblingWithAttribute };
 //# sourceMappingURL=eui-ecl.mjs.map