@eui/ecl 15.0.0-rc.5 → 15.0.0-rc.7

package/fesm2020/eui-ecl.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, HostBinding, Component, ViewChild, EventEmitter, ChangeDetectionStrategy, Output, NgModule, ContentChildren, forwardRef, HostListener, Injectable, Optional, Inject, Self, ContentChild, ViewEncapsulation, ElementRef, ViewChildren } from '@angular/core';
+import { Directive, Input, HostBinding, Component, ViewChild, EventEmitter, ChangeDetectionStrategy, Output, NgModule, ContentChildren, forwardRef, HostListener, Injectable, Optional, Inject, Self, ContentChild, ViewEncapsulation } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, formatDate } from '@angular/common';
 import * as i2 from '@ngx-translate/core';
@@ -2617,7 +2617,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['class']
             }] } });
 
-const COMPONENTS$c = [
+const COMPONENTS$d = [
     EclSiteHeaderComponent,
     EclSiteHeaderActionComponent,
     EclSiteHeaderLoginComponent,
@@ -2674,10 +2674,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         EclSearchFormComponentModule
                     ],
                     exports: [
-                        ...COMPONENTS$c
+                        ...COMPONENTS$d
                     ],
                     declarations: [
-                        ...COMPONENTS$c
+                        ...COMPONENTS$d
                     ]
                 }]
         }] });
@@ -3724,7 +3724,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['class']
             }] } });
 
-const COMPONENTS$b = [
+const COMPONENTS$c = [
     EclBreadcrumbComponent,
     EclBreadcrumbSegmentComponent
 ];
@@ -3753,8 +3753,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         EclLinkDirectiveModule,
                         EclIconComponentModule
                     ],
-                    exports: [...COMPONENTS$b],
-                    declarations: [...COMPONENTS$b],
+                    exports: [...COMPONENTS$c],
+                    declarations: [...COMPONENTS$c],
                     entryComponents: [EclBreadcrumbSegmentComponent]
                 }]
         }] });
@@ -3880,7 +3880,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['class']
             }] } });
 
-const COMPONENTS$a = [
+const COMPONENTS$b = [
     EclCardComponent,
     EclCardBodyComponent,
     EclCardImageDirective,
@@ -3910,10 +3910,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         EclLabelDirectiveModule,
                     ],
                     exports: [
-                        ...COMPONENTS$a
+                        ...COMPONENTS$b
                     ],
                     declarations: [
-                        ...COMPONENTS$a
+                        ...COMPONENTS$b
                     ],
                 }]
         }] });
@@ -4005,7 +4005,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['window:resize', ['$event']]
             }] } });
 
-const COMPONENTS$9 = [
+const COMPONENTS$a = [
     EclCarouselComponent,
     EclCarouselItemComponent
 ];
@@ -4029,10 +4029,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         TranslateModule
                     ],
                     exports: [
-                        ...COMPONENTS$9
+                        ...COMPONENTS$a
                     ],
                     declarations: [
-                        ...COMPONENTS$9
+                        ...COMPONENTS$a
                     ]
                 }]
         }] });
@@ -4841,7 +4841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['class']
             }] } });
 
-const COMPONENTS$8 = [
+const COMPONENTS$9 = [
     EclContentBlockComponent,
     EclContentBlockTitleDirective,
     EclContentBlockDescriptionDirective,
@@ -4907,10 +4907,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         CommonModule,
                     ],
                     exports: [
-                        ...COMPONENTS$8
+                        ...COMPONENTS$9
                     ],
                     declarations: [
-                        ...COMPONENTS$8
+                        ...COMPONENTS$9
                     ]
                 }]
         }] });
@@ -5062,7 +5062,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['class']
             }] } });
 
-const COMPONENTS$7 = [
+const COMPONENTS$8 = [
     EclContentItemComponent,
     EclContentItemImageDirective,
     EclContentItemPictureDirective
@@ -5086,10 +5086,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         RouterModule,
                     ],
                     exports: [
-                        ...COMPONENTS$7
+                        ...COMPONENTS$8
                     ],
                     declarations: [
-                        ...COMPONENTS$7
+                        ...COMPONENTS$8
                     ],
                 }]
         }] });
@@ -6850,7 +6850,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['class']
             }] } });
 
-const COMPONENTS$6 = [
+const COMPONENTS$7 = [
     EclHeroBannerComponent,
     EclHeroBannerTitleDirective,
     EclHeroBannerDescriptionDirective,
@@ -6883,10 +6883,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         EclLinkDirectiveModule,
                     ],
                     exports: [
-                        ...COMPONENTS$6
+                        ...COMPONENTS$7
                     ],
                     declarations: [
-                        ...COMPONENTS$6
+                        ...COMPONENTS$7
                     ],
                 }]
         }] });
@@ -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$5 = [
+const COMPONENTS$6 = [
     EclOrderedListDirective,
     EclOrderedListItemDirective,
     EclUnorderedListDirective,
@@ -7495,10 +7495,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         CommonModule,
                     ],
                     exports: [
-                        ...COMPONENTS$5
+                        ...COMPONENTS$6
                     ],
                     declarations: [
-                        ...COMPONENTS$5
+                        ...COMPONENTS$6
                     ]
                 }]
         }] });
@@ -8898,7 +8898,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['class']
             }] } });
 
-const COMPONENTS$4 = [
+const COMPONENTS$5 = [
     EclNavigationListComponent,
     EclNavigationListItemComponent,
     EclNavigationListImageDirective
@@ -8919,10 +8919,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         CommonModule,
                     ],
                     exports: [
-                        ...COMPONENTS$4
+                        ...COMPONENTS$5
                     ],
                     declarations: [
-                        ...COMPONENTS$4
+                        ...COMPONENTS$5
                     ]
                 }]
         }] });
@@ -9120,13 +9120,13 @@ class EclNewsTickerComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclNewsTickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclNewsTickerComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclNewsTickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclNewsTickerComponent, selector: "ecl-news-ticker", outputs: { itemSwitch: "itemSwitch" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "newsTickerItems", predicate: EclNewsTickerItemComponent }], viewQueries: [{ propertyName: "firstHiddenItem", first: true, predicate: ["firstHiddenItem"], descendants: true }, { propertyName: "lastHiddenItem", first: true, predicate: ["lastHiddenItem"], descendants: true }, { propertyName: "slidesContainer", first: true, predicate: ["slidesContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-news-ticker__container\"\n    [style.height.px]=\"containerHeight\">\n    <div class=\"ecl-news-ticker__content\"\n        [style.height.px]=\"contentHeight\">\n        <ul class=\"ecl-news-ticker__slides\"\n            [style.transition-duration.s]=\"transitionDuration\"\n            [style.transform]=\"slidesTransform\"\n            #slidesContainer >\n            <ecl-news-ticker-item #firstHiddenItem></ecl-news-ticker-item>\n            <ng-content></ng-content>\n            <ecl-news-ticker-item #lastHiddenItem></ecl-news-ticker-item>\n        </ul>\n    </div>\n</div>\n<ecl-icon icon=\"information\"\n    size=\"m\"\n    class=\"ecl-news-ticker__icon\"></ecl-icon>\n<div class=\"ecl-news-ticker__counter\">\n    <span class=\"ecl-news-ticker__counter--current\"> {{ itemIndex }}</span> \n    {{ 'ecl.common.OF' | translate }}\n    <span class=\"ecl-news-ticker__counter--max\">{{ itemsCount }}</span>\n</div>\n<div class=\"ecl-news-ticker__controls\">\n    <button eclButton\n        variant=\"primary\"\n        class=\"ecl-news-ticker__prev\"\n        (click)=\"onPrevious()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.PREV-NEWS' | translate }}\n        </span>\n        <ecl-icon icon=\"corner-arrow\"\n            size=\"m\"\n            transform=\"rotate-270\"></ecl-icon>\n    </button>\n    <button eclButton\n        variant=\"primary\"\n        class=\"ecl-news-ticker__toggle\"\n        (click)=\"togglePlay()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.AUTO-PLAY' | translate }}\n        </span>\n        <ecl-icon [icon]=\"playing ? 'pause' : 'play'\" size=\"m\"></ecl-icon>\n    </button>\n    <button eclButton\n        variant=\"primary\"\n        class=\"ecl-news-ticker__next\"\n        (click)=\"onNext()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.NEXT-NEWS' | translate }}\n        </span>\n        <ecl-icon icon=\"corner-arrow\"\n            size=\"m\"\n            transform=\"rotate-90\">\n        </ecl-icon>\n    </button>\n</div>\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: "component", type: EclNewsTickerItemComponent, selector: "ecl-news-ticker-item" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclNewsTickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclNewsTickerComponent, selector: "ecl-news-ticker", outputs: { itemSwitch: "itemSwitch" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "newsTickerItems", predicate: EclNewsTickerItemComponent }], viewQueries: [{ propertyName: "firstHiddenItem", first: true, predicate: ["firstHiddenItem"], descendants: true }, { propertyName: "lastHiddenItem", first: true, predicate: ["lastHiddenItem"], descendants: true }, { propertyName: "slidesContainer", first: true, predicate: ["slidesContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-news-ticker__container\"\n    [style.height.px]=\"containerHeight\">\n    <ecl-icon icon=\"information\"\n        size=\"m\"\n        class=\"ecl-news-ticker__icon\"></ecl-icon>\n    <div class=\"ecl-news-ticker__content\"\n        [style.height.px]=\"contentHeight\">\n        <ul class=\"ecl-news-ticker__slides\"\n            [style.transition-duration.s]=\"transitionDuration\"\n            [style.transform]=\"slidesTransform\"\n            #slidesContainer >\n            <ecl-news-ticker-item #firstHiddenItem></ecl-news-ticker-item>\n            <ng-content></ng-content>\n            <ecl-news-ticker-item #lastHiddenItem></ecl-news-ticker-item>\n        </ul>\n    </div>\n</div>\n\n\n<div class=\"ecl-news-ticker__controls\">\n    <button eclButton\n        variant=\"primary\"\n        class=\"ecl-news-ticker__prev\"\n        (click)=\"onPrevious()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.PREV-NEWS' | translate }}\n        </span>\n        <ecl-icon isInverted\n            icon=\"corner-arrow\"\n            size=\"l\"\n            transform=\"rotate-270\"\n            class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n    </button>\n    <button eclButton\n        variant=\"primary\"\n        class=\"ecl-news-ticker__next\"\n        (click)=\"onNext()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.NEXT-NEWS' | translate }}\n        </span>\n    <ecl-icon isInverted\n            icon=\"corner-arrow\"\n            size=\"l\"\n            transform=\"rotate-90\"\n            class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n    </button>\n    <button \n        eclButton \n        variant=\"primary\"\n        class=\"ecl-news-ticker__play\"\n        [class.ecl-u-d-none]=\"playing\"\n        (click)=\"togglePlay()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.AUTO-PLAY' | translate }}\n        </span>\n        <ecl-icon isInverted\n            icon=\"play\"\n            size=\"l\"\n            class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n        <ecl-icon isInverted\n            icon=\"play-filled\"\n            size=\"l\"\n            class=\"ecl-news-ticker__icon-active\"></ecl-icon>\n    </button>\n    <button\n        eclButton \n        variant=\"primary\"\n        class=\"ecl-news-ticker__pause\"\n        [class.ecl-u-d-none]=\"!playing\"\n        (click)=\"togglePlay()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.PAUSE' | translate }}\n        </span>\n        <ecl-icon isInverted\n            icon=\"pause\"\n            size=\"l\"\n            class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n        <ecl-icon isInverted\n            icon=\"pause-filled\"\n            size=\"l\"\n            class=\"ecl-news-ticker__icon-active\"></ecl-icon>\n    </button>\n    <div class=\"ecl-news-ticker__counter\">\n        <span class=\"ecl-news-ticker__counter--current\"> {{ itemIndex }}</span> \n        {{ 'ecl.common.OF' | translate }}\n        <span class=\"ecl-news-ticker__counter--max\">{{ itemsCount }}</span>\n    </div>\n</div>\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: "component", type: EclNewsTickerItemComponent, selector: "ecl-news-ticker-item" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 __decorate([
     coerceElement
 ], EclNewsTickerComponent.prototype, "slidesContainer", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclNewsTickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-news-ticker', template: "<div class=\"ecl-news-ticker__container\"\n    [style.height.px]=\"containerHeight\">\n    <div class=\"ecl-news-ticker__content\"\n        [style.height.px]=\"contentHeight\">\n        <ul class=\"ecl-news-ticker__slides\"\n            [style.transition-duration.s]=\"transitionDuration\"\n            [style.transform]=\"slidesTransform\"\n            #slidesContainer >\n            <ecl-news-ticker-item #firstHiddenItem></ecl-news-ticker-item>\n            <ng-content></ng-content>\n            <ecl-news-ticker-item #lastHiddenItem></ecl-news-ticker-item>\n        </ul>\n    </div>\n</div>\n<ecl-icon icon=\"information\"\n    size=\"m\"\n    class=\"ecl-news-ticker__icon\"></ecl-icon>\n<div class=\"ecl-news-ticker__counter\">\n    <span class=\"ecl-news-ticker__counter--current\"> {{ itemIndex }}</span> \n    {{ 'ecl.common.OF' | translate }}\n    <span class=\"ecl-news-ticker__counter--max\">{{ itemsCount }}</span>\n</div>\n<div class=\"ecl-news-ticker__controls\">\n    <button eclButton\n        variant=\"primary\"\n        class=\"ecl-news-ticker__prev\"\n        (click)=\"onPrevious()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.PREV-NEWS' | translate }}\n        </span>\n        <ecl-icon icon=\"corner-arrow\"\n            size=\"m\"\n            transform=\"rotate-270\"></ecl-icon>\n    </button>\n    <button eclButton\n        variant=\"primary\"\n        class=\"ecl-news-ticker__toggle\"\n        (click)=\"togglePlay()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.AUTO-PLAY' | translate }}\n        </span>\n        <ecl-icon [icon]=\"playing ? 'pause' : 'play'\" size=\"m\"></ecl-icon>\n    </button>\n    <button eclButton\n        variant=\"primary\"\n        class=\"ecl-news-ticker__next\"\n        (click)=\"onNext()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.NEXT-NEWS' | translate }}\n        </span>\n        <ecl-icon icon=\"corner-arrow\"\n            size=\"m\"\n            transform=\"rotate-90\">\n        </ecl-icon>\n    </button>\n</div>\n" }]
+            args: [{ selector: 'ecl-news-ticker', template: "<div class=\"ecl-news-ticker__container\"\n    [style.height.px]=\"containerHeight\">\n    <ecl-icon icon=\"information\"\n        size=\"m\"\n        class=\"ecl-news-ticker__icon\"></ecl-icon>\n    <div class=\"ecl-news-ticker__content\"\n        [style.height.px]=\"contentHeight\">\n        <ul class=\"ecl-news-ticker__slides\"\n            [style.transition-duration.s]=\"transitionDuration\"\n            [style.transform]=\"slidesTransform\"\n            #slidesContainer >\n            <ecl-news-ticker-item #firstHiddenItem></ecl-news-ticker-item>\n            <ng-content></ng-content>\n            <ecl-news-ticker-item #lastHiddenItem></ecl-news-ticker-item>\n        </ul>\n    </div>\n</div>\n\n\n<div class=\"ecl-news-ticker__controls\">\n    <button eclButton\n        variant=\"primary\"\n        class=\"ecl-news-ticker__prev\"\n        (click)=\"onPrevious()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.PREV-NEWS' | translate }}\n        </span>\n        <ecl-icon isInverted\n            icon=\"corner-arrow\"\n            size=\"l\"\n            transform=\"rotate-270\"\n            class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n    </button>\n    <button eclButton\n        variant=\"primary\"\n        class=\"ecl-news-ticker__next\"\n        (click)=\"onNext()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.NEXT-NEWS' | translate }}\n        </span>\n    <ecl-icon isInverted\n            icon=\"corner-arrow\"\n            size=\"l\"\n            transform=\"rotate-90\"\n            class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n    </button>\n    <button \n        eclButton \n        variant=\"primary\"\n        class=\"ecl-news-ticker__play\"\n        [class.ecl-u-d-none]=\"playing\"\n        (click)=\"togglePlay()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.AUTO-PLAY' | translate }}\n        </span>\n        <ecl-icon isInverted\n            icon=\"play\"\n            size=\"l\"\n            class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n        <ecl-icon isInverted\n            icon=\"play-filled\"\n            size=\"l\"\n            class=\"ecl-news-ticker__icon-active\"></ecl-icon>\n    </button>\n    <button\n        eclButton \n        variant=\"primary\"\n        class=\"ecl-news-ticker__pause\"\n        [class.ecl-u-d-none]=\"!playing\"\n        (click)=\"togglePlay()\">\n        <span class=\"ecl-u-sr-only\">\n            {{ 'ecl.news-ticker.PAUSE' | translate }}\n        </span>\n        <ecl-icon isInverted\n            icon=\"pause\"\n            size=\"l\"\n            class=\"ecl-news-ticker__icon-default\"></ecl-icon>\n        <ecl-icon isInverted\n            icon=\"pause-filled\"\n            size=\"l\"\n            class=\"ecl-news-ticker__icon-active\"></ecl-icon>\n    </button>\n    <div class=\"ecl-news-ticker__counter\">\n        <span class=\"ecl-news-ticker__counter--current\"> {{ itemIndex }}</span> \n        {{ 'ecl.common.OF' | translate }}\n        <span class=\"ecl-news-ticker__counter--max\">{{ itemsCount }}</span>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { itemSwitch: [{
                 type: Output
             }], newsTickerItems: [{
@@ -9314,7 +9314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['class']
             }] } });
 
-const COMPONENTS$3 = [
+const COMPONENTS$4 = [
     EclPageBannerComponent,
     EclPageBannerTitleDirective,
     EclPageBannerDescriptionDirective,
@@ -9347,10 +9347,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         EclLinkDirectiveModule,
                     ],
                     exports: [
-                        ...COMPONENTS$3
+                        ...COMPONENTS$4
                     ],
                     declarations: [
-                        ...COMPONENTS$3
+                        ...COMPONENTS$4
                     ]
                 }]
         }] });
@@ -10126,7 +10126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['class']
             }] } });
 
-const COMPONENTS$2 = [
+const COMPONENTS$3 = [
     EclPageHeaderComponent,
     EclPageHeaderMetaDirective,
     EclPageHeaderMetaItemDirective,
@@ -10156,8 +10156,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    exports: [...COMPONENTS$2],
-                    declarations: [...COMPONENTS$2]
+                    exports: [...COMPONENTS$3],
+                    declarations: [...COMPONENTS$3]
                 }]
         }] });
 
@@ -10638,7 +10638,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['class']
             }] } });
 
-const COMPONENTS$1 = [
+const COMPONENTS$2 = [
     EclRatingFieldComponent
 ];
 class EclRatingFieldComponentModule {
@@ -10650,8 +10650,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
             type: NgModule,
             args: [{
                     imports: [CommonModule, EclIconComponentModule],
-                    exports: [...COMPONENTS$1],
-                    declarations: [...COMPONENTS$1]
+                    exports: [...COMPONENTS$2],
+                    declarations: [...COMPONENTS$2]
                 }]
         }] });
 
@@ -12297,7 +12297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['attr.role']
             }] } });
 
-const COMPONENTS = [
+const COMPONENTS$1 = [
     EclSiteFooterComponent,
     EclSiteFooterSectionDirective,
     EclSiteFooterTitleDirective,
@@ -12369,10 +12369,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         TranslateModule
                     ],
                     exports: [
-                        ...COMPONENTS
+                        ...COMPONENTS$1
                     ],
                     declarations: [
-                        ...COMPONENTS
+                        ...COMPONENTS$1
                     ],
                 }]
         }] });
@@ -12411,8 +12411,9 @@ class EclSocialMediaFollowItemClickEvent extends EclBaseEvent {
 class EclSocialMediaFollowItemComponent extends ECLBaseDirective {
     constructor() {
         super(...arguments);
+        this.iconSet = 'social-media';
         this.href = '';
-        this.size = 'xl';
+        this.size = 'm';
         this.itemClick = new EventEmitter();
     }
     get cssClasses() {
@@ -12428,12 +12429,14 @@ class EclSocialMediaFollowItemComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclSocialMediaFollowItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSocialMediaFollowItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclSocialMediaFollowItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSocialMediaFollowItemComponent, selector: "ecl-social-media-follow-item", inputs: { icon: "icon", href: "href", target: "target", size: "size" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a eclLink \n    (click)=\"onItemClick($event)\"\n    variant=\"standalone\"\n    [href]=\"href\" \n    [attr.target]=\"target\"\n    class=\"ecl-social-media-follow__link\">\n  <ecl-icon *ngIf=\"icon\" iconSet=\"social\" icon=\"{{ icon }}\" [size]=\"size\" class=\"ecl-social-media-follow__icon\"></ecl-icon>\n  <ecl-icon *ngIf=\"icon\" iconSet=\"social\" icon=\"{{ icon }}_hover\" [size]=\"size\" class=\"ecl-social-media-follow__icon-hover\"></ecl-icon>\n\n  <span class=\"ecl-link__label\">\n    <ng-content></ng-content>\n  </span>\n</a>\n", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] });
+/** @nocollapse */ EclSocialMediaFollowItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSocialMediaFollowItemComponent, selector: "ecl-social-media-follow-item", inputs: { icon: "icon", iconSet: "iconSet", href: "href", target: "target", size: "size" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a eclLink \n    (click)=\"onItemClick($event)\"\n    variant=\"standalone\"\n    [href]=\"href\" \n    [attr.target]=\"target\"\n    class=\"ecl-social-media-follow__link\">\n  <ecl-icon *ngIf=\"icon\" [iconSet]=\"iconSet\" icon=\"{{ icon }}\" [size]=\"size\" class=\"ecl-social-media-follow__icon\"></ecl-icon>\n\n  <span eclLinkLabel>\n    <ng-content></ng-content>\n  </span>\n</a>\n", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSocialMediaFollowItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-social-media-follow-item', template: "<a eclLink \n    (click)=\"onItemClick($event)\"\n    variant=\"standalone\"\n    [href]=\"href\" \n    [attr.target]=\"target\"\n    class=\"ecl-social-media-follow__link\">\n  <ecl-icon *ngIf=\"icon\" iconSet=\"social\" icon=\"{{ icon }}\" [size]=\"size\" class=\"ecl-social-media-follow__icon\"></ecl-icon>\n  <ecl-icon *ngIf=\"icon\" iconSet=\"social\" icon=\"{{ icon }}_hover\" [size]=\"size\" class=\"ecl-social-media-follow__icon-hover\"></ecl-icon>\n\n  <span class=\"ecl-link__label\">\n    <ng-content></ng-content>\n  </span>\n</a>\n", styles: [":host{display:list-item}\n"] }]
+            args: [{ selector: 'ecl-social-media-follow-item', template: "<a eclLink \n    (click)=\"onItemClick($event)\"\n    variant=\"standalone\"\n    [href]=\"href\" \n    [attr.target]=\"target\"\n    class=\"ecl-social-media-follow__link\">\n  <ecl-icon *ngIf=\"icon\" [iconSet]=\"iconSet\" icon=\"{{ icon }}\" [size]=\"size\" class=\"ecl-social-media-follow__icon\"></ecl-icon>\n\n  <span eclLinkLabel>\n    <ng-content></ng-content>\n  </span>\n</a>\n", styles: [":host{display:list-item}\n"] }]
         }], propDecorators: { icon: [{
                 type: Input
+            }], iconSet: [{
+                type: Input
             }], href: [{
                 type: Input
             }], target: [{
@@ -12462,19 +12465,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
         }] });
 
 class EclSocialMediaShareComponent extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.isVertical = false;
+    }
     get cssClasses() {
         return [
             super.getCssClasses('ecl-social-media-share'),
+            this.isVertical ? 'ecl-social-media-share--vertical' : '',
         ].join(' ').trim();
     }
 }
 /** @nocollapse */ EclSocialMediaShareComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSocialMediaShareComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclSocialMediaShareComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSocialMediaShareComponent, selector: "ecl-social-media-share", inputs: { description: "description" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<p class=\"ecl-social-media-share__description\">{{ description }}</p>\n<ul class=\"ecl-social-media-share__list\">\n  <ng-content></ng-content>\n</ul>" });
+/** @nocollapse */ EclSocialMediaShareComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSocialMediaShareComponent, selector: "ecl-social-media-share", inputs: { description: "description", isVertical: "isVertical" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<p class=\"ecl-social-media-share__description\">{{ description }}</p>\n<ul class=\"ecl-social-media-share__list\">\n  <ng-content></ng-content>\n</ul>", styles: [":host{display:block}\n"] });
+__decorate([
+    coerceBoolean
+], EclSocialMediaShareComponent.prototype, "isVertical", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSocialMediaShareComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-social-media-share', template: "<p class=\"ecl-social-media-share__description\">{{ description }}</p>\n<ul class=\"ecl-social-media-share__list\">\n  <ng-content></ng-content>\n</ul>" }]
+            args: [{ selector: 'ecl-social-media-share', template: "<p class=\"ecl-social-media-share__description\">{{ description }}</p>\n<ul class=\"ecl-social-media-share__list\">\n  <ng-content></ng-content>\n</ul>", styles: [":host{display:block}\n"] }]
         }], propDecorators: { description: [{
                 type: Input
+            }], isVertical: [{
+                type: Input
             }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -12485,6 +12498,8 @@ class EclSocialMediaShareItemClickEvent extends EclBaseEvent {
 class EclSocialMediaShareItemComponent extends ECLBaseDirective {
     constructor() {
         super(...arguments);
+        this.iconSet = 'social-media';
+        this.size = 'm';
         this.href = '';
         this.itemClick = new EventEmitter();
     }
@@ -12501,12 +12516,16 @@ class EclSocialMediaShareItemComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclSocialMediaShareItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSocialMediaShareItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclSocialMediaShareItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSocialMediaShareItemComponent, selector: "ecl-social-media-share-item", inputs: { icon: "icon", href: "href", target: "target" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a eclLink \n    (click)=\"onItemClick($event)\"\n    variant=\"standalone\"\n    [href]=\"href\" \n    [attr.target]=\"target\"\n    class=\"ecl-social-media-share__link ecl-social-media-share__link--{{ icon }}\">\n  <ecl-icon *ngIf=\"icon\" iconSet=\"social\" icon=\"{{icon}}\" size=\"xl\" class=\"ecl-social-media-share__icon\"></ecl-icon>\n  <ecl-icon *ngIf=\"icon\" iconSet=\"social\" icon=\"{{icon}}_hover\" size=\"xl\" class=\"ecl-social-media-share__icon-hover\"></ecl-icon>\n\n  <span class=\"ecl-link__label\">\n    <ng-content></ng-content>\n  </span>\n</a>\n", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }] });
+/** @nocollapse */ EclSocialMediaShareItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSocialMediaShareItemComponent, selector: "ecl-social-media-share-item", inputs: { icon: "icon", iconSet: "iconSet", size: "size", href: "href", target: "target" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a eclLink \n    (click)=\"onItemClick($event)\"\n    variant=\"standalone\"\n    [href]=\"href\" \n    [attr.target]=\"target\"\n    class=\"ecl-social-media-share__link ecl-social-media-share__link--{{ icon }}\">\n  <ecl-icon *ngIf=\"icon\" [iconSet]=\"iconSet\" icon=\"{{ icon }}\" [size]=\"size\" class=\"ecl-social-media-share__icon\"></ecl-icon>\n\n  <span eclLinkLabel>\n    <ng-content></ng-content>\n  </span>\n</a>\n", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSocialMediaShareItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-social-media-share-item', template: "<a eclLink \n    (click)=\"onItemClick($event)\"\n    variant=\"standalone\"\n    [href]=\"href\" \n    [attr.target]=\"target\"\n    class=\"ecl-social-media-share__link ecl-social-media-share__link--{{ icon }}\">\n  <ecl-icon *ngIf=\"icon\" iconSet=\"social\" icon=\"{{icon}}\" size=\"xl\" class=\"ecl-social-media-share__icon\"></ecl-icon>\n  <ecl-icon *ngIf=\"icon\" iconSet=\"social\" icon=\"{{icon}}_hover\" size=\"xl\" class=\"ecl-social-media-share__icon-hover\"></ecl-icon>\n\n  <span class=\"ecl-link__label\">\n    <ng-content></ng-content>\n  </span>\n</a>\n", styles: [":host{display:list-item}\n"] }]
+            args: [{ selector: 'ecl-social-media-share-item', template: "<a eclLink \n    (click)=\"onItemClick($event)\"\n    variant=\"standalone\"\n    [href]=\"href\" \n    [attr.target]=\"target\"\n    class=\"ecl-social-media-share__link ecl-social-media-share__link--{{ icon }}\">\n  <ecl-icon *ngIf=\"icon\" [iconSet]=\"iconSet\" icon=\"{{ icon }}\" [size]=\"size\" class=\"ecl-social-media-share__icon\"></ecl-icon>\n\n  <span eclLinkLabel>\n    <ng-content></ng-content>\n  </span>\n</a>\n", styles: [":host{display:list-item}\n"] }]
         }], propDecorators: { icon: [{
                 type: Input
+            }], iconSet: [{
+                type: Input
+            }], size: [{
+                type: Input
             }], href: [{
                 type: Input
             }], target: [{
@@ -12957,15 +12976,12 @@ class EclTabSelectEvent extends EclBaseEvent {
     }
 }
 class EclTabComponent extends ECLBaseDirective {
-    constructor(el, _sanitizer) {
-        super();
-        this.el = el;
-        this._sanitizer = _sanitizer;
+    constructor() {
+        super(...arguments);
         this.isHidden = false;
         this.isActive = false;
         this.select = new EventEmitter();
         this.role = 'listitem';
-        this.contentChange$ = new Subject();
     }
     get cssClasses() {
         return [
@@ -12975,28 +12991,19 @@ class EclTabComponent extends ECLBaseDirective {
     onTabClick(evt) {
         this.select.next(new EclTabSelectEvent(this));
     }
-    get hostElement() {
-        return this.el.nativeElement;
-    }
-    get linkContents() {
-        return this.linkContentElement ? this._sanitizer.bypassSecurityTrustHtml(this.linkContentElement.innerHTML) : '';
-    }
 }
-/** @nocollapse */ EclTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclTabComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.DomSanitizer }], 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: "tabContentTemplate", first: true, predicate: ["content"], descendants: true }, { propertyName: "linkContentElement", first: true, predicate: ["linkContent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "    <a eclLink \n        #linkContent\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: 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        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);
 __decorate([
     coerceBoolean
 ], EclTabComponent.prototype, "isActive", void 0);
-__decorate([
-    coerceElement
-], EclTabComponent.prototype, "linkContentElement", 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        #linkContent\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"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.DomSanitizer }]; }, 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"] }]
+        }], propDecorators: { id: [{
                 type: Input
             }], isHidden: [{
                 type: Input
@@ -13007,12 +13014,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 type: Input
             }], select: [{
                 type: Output
-            }], tabContentTemplate: [{
+            }], contentTemplate: [{
                 type: ViewChild,
                 args: ['content']
-            }], linkContentElement: [{
-                type: ViewChild,
-                args: ['linkContent']
             }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
@@ -13059,29 +13063,22 @@ 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.isMoreDropdownExpanded = false;
-        this.isMoreButtonActive = false;
+        this.isMobileBreakpoint = false;
         this.destroy$ = new Subject();
         this.differ = this.differs.find([]).create();
     }
-    get isMoreDropdownHidden() {
-        return false;
+    ngOnInit() {
+        this.observeBreakpointChanges();
     }
     ngAfterViewInit() {
         this.cd.detectChanges();
-        this.dropdownTabs.forEach((tab, idx) => {
-            tab.select
-                .pipe(takeUntil$1(this.destroy$))
-                .subscribe(() => {
-                this.onTabSelect(this.tabs.get(idx));
-            });
-        });
     }
     ngAfterContentInit() {
         this.observeTabsChanges();
@@ -13090,9 +13087,7 @@ class EclTabsComponent extends ECLBaseDirective {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
     }
-    onResize(event) {
-        const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
-        console.log('window resize', vw);
+    onWindowResize() {
     }
     onScrollPrev() {
         console.log('scroll prev');
@@ -13100,17 +13095,8 @@ class EclTabsComponent extends ECLBaseDirective {
     onScrollNext() {
         console.log('scroll next');
     }
-    onMoreDropdownToggle() {
-        this.toggleMoreDropdown();
-    }
-    onMoreDropdownClickOutside() {
-        this.closeMoreDropdown();
-    }
-    closeMoreDropdown() {
-        this.isMoreDropdownExpanded = false;
-    }
-    toggleMoreDropdown() {
-        this.isMoreDropdownExpanded = !this.isMoreDropdownExpanded;
+    isMoreButtonHidden() {
+        return this.isMobileBreakpoint;
     }
     observeTabsChanges() {
         this.diff = this.differ.diff(this.tabs);
@@ -13144,16 +13130,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;
@@ -13165,68 +13151,52 @@ 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;
+        });
+    }
 }
-/** @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" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "tabs", predicate: i0.forwardRef(function () { return EclTabComponent; }) }], viewQueries: [{ propertyName: "moreTabComponent", first: true, predicate: ["moreTab"], descendants: true }, { propertyName: "moreButtonElement", first: true, predicate: ["moreButton"], descendants: true, read: ElementRef }, { propertyName: "tabsListElement", first: true, predicate: ["tabsList"], descendants: true }, { propertyName: "dropdownListElement", first: true, predicate: ["dropdownList"], descendants: true }, { propertyName: "dropdownTabs", predicate: i0.forwardRef(function () { return EclTabComponent; }), descendants: true }], usesInheritance: true, ngImport: i0, template: "<nav class=\"ecl-tabs\">\n    <div class=\"ecl-tabs__container\">\n        <ul #tabsList class=\"ecl-tabs__list\">\n            <ng-content select=\"ecl-tab\"></ng-content>\n\n            <ecl-tab-more [isHidden]=\"isMoreDropdownHidden\" (eclClickOutside)=\"onMoreDropdownClickOutside()\">\n                <button \n                    #moreButton\n                    eclButton \n                    (click)=\"onMoreDropdownToggle()\"\n                    variant=\"secondary\" \n                    [attr.aria-expanded]=\"isMoreDropdownExpanded\"\n                    class=\"ecl-tabs__toggle\"\n                    [class.ecl-tabs__toggle--active]=\"isMoreButtonActive\">\n                    <span eclButtonLabel>{{ 'ecl.common.MORE' | translate }}</span>\n                    <ecl-icon icon=\"corner-arrow\" transform=\"rotate-180\" size=\"fluid\"></ecl-icon>\n                </button>\n\n                <ul #dropdownList class=\"ecl-tabs__dropdown\" [class.ecl-tabs__dropdown--show]=\"isMoreDropdownExpanded\">\n                    <ng-container *ngFor=\"let tab of tabs.toArray()\">\n                        <ecl-tab [isActive]=\"tab.isActive\">\n                            <ecl-tab-label [innerHTML]=\"tab.linkContents\"></ecl-tab-label>\n                        </ecl-tab>\n                    </ng-container>\n                </ul>\n            </ecl-tab-more>\n        </ul>\n    </div>\n    <div class=\"ecl-tabs__controls\">\n        <button eclButton (click)=\"onScrollPrev()\" class=\"ecl-tabs__prev\">\n            <ecl-icon \n                icon=\"corner-arrow\" \n                color=\"inverted\" \n                transform=\"rotate-270\" \n                size=\"m\"\n                class=\"ecl-u-d-block\">\n            </ecl-icon>\n        </button>\n        <button eclButton (click)=\"onScrollNext()\" class=\"ecl-tabs__next\">\n            <ecl-icon \n                icon=\"corner-arrow\" \n                color=\"inverted\" \n                transform=\"rotate-90\" \n                size=\"m\"\n                class=\"ecl-u-d-block\">\n            </ecl-icon>\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.tabContentTemplate\"></ng-container>\n    </div>\n</ng-container>", 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"] }, { kind: "directive", type: ECLClickOutsideDirective, selector: "[eclClickOutside]", outputs: ["eclClickOutside"] }, { 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: "component", type: EclTabComponent, selector: "ecl-tab", inputs: ["id", "isHidden", "isActive"], outputs: ["select"] }, { kind: "component", type: EclTabMoreComponent, selector: "ecl-tab-more", inputs: ["isHidden"] }, { kind: "component", type: EclTabLabelComponent, selector: "ecl-tab-label" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
-__decorate([
-    coerceElement
-], EclTabsComponent.prototype, "moreTabComponent", void 0);
-__decorate([
-    coerceElement
-], EclTabsComponent.prototype, "moreButtonElement", void 0);
-__decorate([
-    coerceElement
-], EclTabsComponent.prototype, "tabsListElement", void 0);
-__decorate([
-    coerceElement
-], EclTabsComponent.prototype, "dropdownListElement", void 0);
+/** @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.transform]=\"'translate3d(0px, 0px, 0px)'\"\n            [style.transition-duration]=\"'0.4s'\">\n            <ng-content select=\"ecl-tab\"></ng-content>\n\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>{{ 'ecl.common.MORE' | translate }}</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            (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            (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", 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"] }, { 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: "component", type: EclTabComponent, selector: "ecl-tab", inputs: ["id", "isHidden", "isActive"], outputs: ["select"] }, { kind: "component", type: EclTabLabelComponent, selector: "ecl-tab-label" }, { kind: "component", type: EclTabMoreComponent, selector: "ecl-tab-more", inputs: ["isHidden"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 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 #tabsList class=\"ecl-tabs__list\">\n            <ng-content select=\"ecl-tab\"></ng-content>\n\n            <ecl-tab-more [isHidden]=\"isMoreDropdownHidden\" (eclClickOutside)=\"onMoreDropdownClickOutside()\">\n                <button \n                    #moreButton\n                    eclButton \n                    (click)=\"onMoreDropdownToggle()\"\n                    variant=\"secondary\" \n                    [attr.aria-expanded]=\"isMoreDropdownExpanded\"\n                    class=\"ecl-tabs__toggle\"\n                    [class.ecl-tabs__toggle--active]=\"isMoreButtonActive\">\n                    <span eclButtonLabel>{{ 'ecl.common.MORE' | translate }}</span>\n                    <ecl-icon icon=\"corner-arrow\" transform=\"rotate-180\" size=\"fluid\"></ecl-icon>\n                </button>\n\n                <ul #dropdownList class=\"ecl-tabs__dropdown\" [class.ecl-tabs__dropdown--show]=\"isMoreDropdownExpanded\">\n                    <ng-container *ngFor=\"let tab of tabs.toArray()\">\n                        <ecl-tab [isActive]=\"tab.isActive\">\n                            <ecl-tab-label [innerHTML]=\"tab.linkContents\"></ecl-tab-label>\n                        </ecl-tab>\n                    </ng-container>\n                </ul>\n            </ecl-tab-more>\n        </ul>\n    </div>\n    <div class=\"ecl-tabs__controls\">\n        <button eclButton (click)=\"onScrollPrev()\" class=\"ecl-tabs__prev\">\n            <ecl-icon \n                icon=\"corner-arrow\" \n                color=\"inverted\" \n                transform=\"rotate-270\" \n                size=\"m\"\n                class=\"ecl-u-d-block\">\n            </ecl-icon>\n        </button>\n        <button eclButton (click)=\"onScrollNext()\" class=\"ecl-tabs__next\">\n            <ecl-icon \n                icon=\"corner-arrow\" \n                color=\"inverted\" \n                transform=\"rotate-90\" \n                size=\"m\"\n                class=\"ecl-u-d-block\">\n            </ecl-icon>\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.tabContentTemplate\"></ng-container>\n    </div>\n</ng-container>" }]
-        }], 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.transform]=\"'translate3d(0px, 0px, 0px)'\"\n            [style.transition-duration]=\"'0.4s'\">\n            <ng-content select=\"ecl-tab\"></ng-content>\n\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>{{ 'ecl.common.MORE' | translate }}</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            (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            (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" }]
+        }], 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)]
-            }], dropdownTabs: [{
-                type: ViewChildren,
-                args: [forwardRef(() => EclTabComponent)]
-            }], moreTabComponent: [{
-                type: ViewChild,
-                args: ['moreTab']
-            }], moreButtonElement: [{
-                type: ViewChild,
-                args: ['moreButton', { read: ElementRef }]
-            }], tabsListElement: [{
-                type: ViewChild,
-                args: ['tabsList']
-            }], dropdownListElement: [{
-                type: ViewChild,
-                args: ['dropdownList']
-            }], onResize: [{
+            }], onWindowResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
             }] } });
 
+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,
-        EclTabMoreComponent,
-        EclTabLabelComponent], imports: [CommonModule,
-        EclClickOutsideModule,
+        EclTabLabelComponent,
+        EclTabMoreComponent], imports: [CommonModule,
         EclLinkDirectiveModule,
         EclButtonComponentModule,
         EclIconComponentModule,
         TranslateModule], exports: [EclTabsComponent,
         EclTabComponent,
-        EclTabMoreComponent,
-        EclTabLabelComponent] });
+        EclTabLabelComponent,
+        EclTabMoreComponent] });
 /** @nocollapse */ EclTabsComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclTabsComponentModule, imports: [CommonModule,
-        EclClickOutsideModule,
         EclLinkDirectiveModule,
         EclButtonComponentModule,
         EclIconComponentModule,
@@ -13236,23 +13206,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
             args: [{
                     imports: [
                         CommonModule,
-                        EclClickOutsideModule,
                         EclLinkDirectiveModule,
                         EclButtonComponentModule,
                         EclIconComponentModule,
                         TranslateModule
                     ],
                     exports: [
-                        EclTabsComponent,
-                        EclTabComponent,
-                        EclTabMoreComponent,
-                        EclTabLabelComponent,
+                        ...COMPONENTS
                     ],
                     declarations: [
-                        EclTabsComponent,
-                        EclTabComponent,
-                        EclTabMoreComponent,
-                        EclTabLabelComponent,
+                        ...COMPONENTS
                     ]
                 }]
         }] });