@eui/ecl 18.2.5 → 18.2.6

package/fesm2022/eui-ecl.mjs

@@ -2063,7 +2063,7 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclSiteHeaderLanguageComponent, deps: [{ token: EclLanguageService }, { token: EclSiteHeaderAreaDataService }, { token: EclRtlService }, { token: EclThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EclSiteHeaderLanguageComponent, selector: "ecl-site-header-language", inputs: { languageCode: "languageCode", languageCodes: "languageCodes" }, outputs: { languageClick: "languageClick", languageSelected: "languageSelected" }, host: { listeners: { "eclClickOutside": "onClickOutside()", "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "languagePopover", first: true, predicate: EclSiteHeaderLanguagePopoverComponent, descendants: true }, { propertyName: "languageLinkElement", first: true, predicate: ["languageLink"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "<a\n    href=\"#\"\n    #languageLink\n    class=\"ecl-button ecl-button--tertiary ecl-site-header__language-selector\"\n    aria-controls=\"language-list-overlay\"\n    role=\"button\"\n    [attr.aria-label]=\"'ecl.language-list.SELECT-LANGUAGE-EXT' | translate: { currentLang: getLanguageLabel() }\"\n    [attr.aria-expanded]=\"isLanguagesDropdownVisible\"\n    (click)=\"onLanguageClick($event)\"\n    (keydown.space)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header__language-icon\">\n        <ecl-icon icon=\"global\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n    </span>\n    {{ languageCode | uppercase }}\n</a>\n@if(hasLanguageCodes()) {\n<ecl-site-header-language-popover\n    #languagePopover\n    [languageCode]=\"languageCode\"\n    [euLanguages]=\"euLanguages\"\n    [nonEuLanguages]=\"nonEuLanguages\"\n    [euColumnsCount]=\"euColumnsCount\"\n    [nonEuColumnsCount]=\"nonEuColumnsCount\"\n    [isHidden]=\"!isLanguagesDropdownVisible\"\n    [isStack]=\"isStack\"\n    [isPushRight]=\"isPushRight\"\n    [isPushLeft] = \"isPushLeft\"\n    [isFull]=\"isFull\"\n    [rightPosition]=\"rightPosition\"\n    [leftPosition]=\"leftPosition\"\n    [languageArrowPosition]=\"languageArrowPosition\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (languageClosed)=\"onLanguageClosed($event)\">\n</ecl-site-header-language-popover>\n}", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: EclSiteHeaderLanguagePopoverComponent, selector: "ecl-site-header-language-popover", inputs: ["languageCode", "euLanguages", "nonEuLanguages", "euColumnsCount", "nonEuColumnsCount", "isHidden", "isPushRight", "isPushLeft", "isStack", "isFull", "rightPosition", "leftPosition", "languageArrowPosition"], outputs: ["languageClosed", "languageSelected"] }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EclSiteHeaderLanguageComponent, selector: "ecl-site-header-language", inputs: { languageCode: "languageCode", languageCodes: "languageCodes" }, outputs: { languageClick: "languageClick", languageSelected: "languageSelected" }, host: { listeners: { "eclClickOutside": "onClickOutside()", "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "languagePopover", first: true, predicate: EclSiteHeaderLanguagePopoverComponent, descendants: true }, { propertyName: "languageLinkElement", first: true, predicate: ["languageLink"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "<a\n    href=\"#\"\n    #languageLink\n    class=\"ecl-button ecl-button--tertiary ecl-site-header__language-selector\"\n    aria-controls=\"language-list-overlay\"\n    role=\"button\"\n    [attr.aria-label]=\"'ecl.language-list.SELECT-LANGUAGE-EXT' | translate: { currentLang: getLanguageLabel() }\"\n    [attr.aria-expanded]=\"isLanguagesDropdownVisible\"\n    (click)=\"onLanguageClick($event)\"\n    (keydown.space)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header__language-icon\">\n        <ecl-icon icon=\"global\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n    </span>\n    {{ languageCode | uppercase }}\n</a>\n@if(hasLanguageCodes()) {\n<ecl-site-header-language-popover\n    #languagePopover\n    id=\"language-list-overlay\"\n    [languageCode]=\"languageCode\"\n    [euLanguages]=\"euLanguages\"\n    [nonEuLanguages]=\"nonEuLanguages\"\n    [euColumnsCount]=\"euColumnsCount\"\n    [nonEuColumnsCount]=\"nonEuColumnsCount\"\n    [isHidden]=\"!isLanguagesDropdownVisible\"\n    [isStack]=\"isStack\"\n    [isPushRight]=\"isPushRight\"\n    [isPushLeft] = \"isPushLeft\"\n    [isFull]=\"isFull\"\n    [rightPosition]=\"rightPosition\"\n    [leftPosition]=\"leftPosition\"\n    [languageArrowPosition]=\"languageArrowPosition\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (languageClosed)=\"onLanguageClosed($event)\">\n</ecl-site-header-language-popover>\n}", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: EclSiteHeaderLanguagePopoverComponent, selector: "ecl-site-header-language-popover", inputs: ["languageCode", "euLanguages", "nonEuLanguages", "euColumnsCount", "nonEuColumnsCount", "isHidden", "isPushRight", "isPushLeft", "isStack", "isFull", "rightPosition", "leftPosition", "languageArrowPosition"], outputs: ["languageClosed", "languageSelected"] }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclSiteHeaderLanguageComponent, decorators: [{
             type: Component,
@@ -2072,7 +2072,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             directive: ECLClickOutsideDirective,
                             outputs: ['eclClickOutside'],
                         },
-                    ], template: "<a\n    href=\"#\"\n    #languageLink\n    class=\"ecl-button ecl-button--tertiary ecl-site-header__language-selector\"\n    aria-controls=\"language-list-overlay\"\n    role=\"button\"\n    [attr.aria-label]=\"'ecl.language-list.SELECT-LANGUAGE-EXT' | translate: { currentLang: getLanguageLabel() }\"\n    [attr.aria-expanded]=\"isLanguagesDropdownVisible\"\n    (click)=\"onLanguageClick($event)\"\n    (keydown.space)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header__language-icon\">\n        <ecl-icon icon=\"global\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n    </span>\n    {{ languageCode | uppercase }}\n</a>\n@if(hasLanguageCodes()) {\n<ecl-site-header-language-popover\n    #languagePopover\n    [languageCode]=\"languageCode\"\n    [euLanguages]=\"euLanguages\"\n    [nonEuLanguages]=\"nonEuLanguages\"\n    [euColumnsCount]=\"euColumnsCount\"\n    [nonEuColumnsCount]=\"nonEuColumnsCount\"\n    [isHidden]=\"!isLanguagesDropdownVisible\"\n    [isStack]=\"isStack\"\n    [isPushRight]=\"isPushRight\"\n    [isPushLeft] = \"isPushLeft\"\n    [isFull]=\"isFull\"\n    [rightPosition]=\"rightPosition\"\n    [leftPosition]=\"leftPosition\"\n    [languageArrowPosition]=\"languageArrowPosition\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (languageClosed)=\"onLanguageClosed($event)\">\n</ecl-site-header-language-popover>\n}", styles: [":host{display:block}\n"] }]
+                    ], template: "<a\n    href=\"#\"\n    #languageLink\n    class=\"ecl-button ecl-button--tertiary ecl-site-header__language-selector\"\n    aria-controls=\"language-list-overlay\"\n    role=\"button\"\n    [attr.aria-label]=\"'ecl.language-list.SELECT-LANGUAGE-EXT' | translate: { currentLang: getLanguageLabel() }\"\n    [attr.aria-expanded]=\"isLanguagesDropdownVisible\"\n    (click)=\"onLanguageClick($event)\"\n    (keydown.space)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header__language-icon\">\n        <ecl-icon icon=\"global\" size=\"s\" class=\"ecl-site-header__icon\"></ecl-icon>\n    </span>\n    {{ languageCode | uppercase }}\n</a>\n@if(hasLanguageCodes()) {\n<ecl-site-header-language-popover\n    #languagePopover\n    id=\"language-list-overlay\"\n    [languageCode]=\"languageCode\"\n    [euLanguages]=\"euLanguages\"\n    [nonEuLanguages]=\"nonEuLanguages\"\n    [euColumnsCount]=\"euColumnsCount\"\n    [nonEuColumnsCount]=\"nonEuColumnsCount\"\n    [isHidden]=\"!isLanguagesDropdownVisible\"\n    [isStack]=\"isStack\"\n    [isPushRight]=\"isPushRight\"\n    [isPushLeft] = \"isPushLeft\"\n    [isFull]=\"isFull\"\n    [rightPosition]=\"rightPosition\"\n    [leftPosition]=\"leftPosition\"\n    [languageArrowPosition]=\"languageArrowPosition\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (languageClosed)=\"onLanguageClosed($event)\">\n</ecl-site-header-language-popover>\n}", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [{ type: EclLanguageService }, { type: EclSiteHeaderAreaDataService }, { type: EclRtlService }, { type: EclThemeService }], propDecorators: { languageCode: [{
                 type: Input
             }], languageCodes: [{
@@ -5902,6 +5902,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class EclBreadcrumbSegmentClickEvent extends EclBaseEvent {
 }
+// TODO: ecl-breadcrumb-segment selector is deprecated and should be removed in v20
 class EclBreadcrumbSegmentComponent extends ECLBaseDirective {
     constructor(el, renderer2) {
         super();
@@ -5918,6 +5919,9 @@ class EclBreadcrumbSegmentComponent extends ECLBaseDirective {
         this.isCurrentPage = false;
         this.isHidden = false;
         this.segmentClick = new EventEmitter();
+        if (el.nativeElement.tagName.toLowerCase() === 'ecl-breadcrumb-segment') {
+            console.warn('"ecl-breadcrumb-segment" selector is deprecated; use "li[eclBreadcrumbSegment]" instead.');
+        }
     }
     get cssClasses() {
         return [
@@ -5933,11 +5937,11 @@ class EclBreadcrumbSegmentComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclBreadcrumbSegmentComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EclBreadcrumbSegmentComponent, selector: "ecl-breadcrumb-segment", inputs: { routerLink: "routerLink", queryParams: "queryParams", href: "href", queryParamsHandling: "queryParamsHandling", isEllipsis: ["isEllipsis", "isEllipsis", booleanAttribute], isCurrentPage: ["isCurrentPage", "isCurrentPage", booleanAttribute], isHidden: ["isHidden", "isHidden", booleanAttribute] }, outputs: { segmentClick: "segmentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "attr.role": "this.role", "attr.aria-hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "@if (!isEllipsis) {\n@if (!isCurrentPage && href) {\n<a eclLink variant=\"standalone\" [isNoVisited]=\"true\" [href]=\"href\" tabindex=\"0\" (click)=\"onSegmentClick($event)\"\n    class=\"ecl-breadcrumb__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n}\n@if (!isCurrentPage && !href) {\n<a eclLink [routerLink]=\"routerLink\" [queryParams]=\"queryParams\" [queryParamsHandling]=\"queryParamsHandling\"\n    variant=\"standalone\" [isNoVisited]=\"true\" tabindex=\"0\" (click)=\"onSegmentClick($event)\"\n    class=\"ecl-breadcrumb__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n}\n} @else {\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n@if (isCurrentPage) {\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n<ecl-icon role=\"presentation\" icon=\"corner-arrow\" ariaHidden=\"true\" focusable=\"false\" size=\"fluid\"\n    class=\"ecl-breadcrumb__icon\">\n</ecl-icon>\n}\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EclBreadcrumbSegmentComponent, selector: "ecl-breadcrumb-segment, li[eclBreadcrumbSegment]", inputs: { routerLink: "routerLink", queryParams: "queryParams", href: "href", queryParamsHandling: "queryParamsHandling", isEllipsis: ["isEllipsis", "isEllipsis", booleanAttribute], isCurrentPage: ["isCurrentPage", "isCurrentPage", booleanAttribute], isHidden: ["isHidden", "isHidden", booleanAttribute] }, outputs: { segmentClick: "segmentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "attr.role": "this.role", "attr.aria-hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "@if (!isEllipsis) {\n@if (!isCurrentPage && href) {\n<a eclLink variant=\"standalone\" [isNoVisited]=\"true\" [href]=\"href\" tabindex=\"0\" (click)=\"onSegmentClick($event)\"\n    class=\"ecl-breadcrumb__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n}\n@if (!isCurrentPage && !href) {\n<a eclLink [routerLink]=\"routerLink\" [queryParams]=\"queryParams\" [queryParamsHandling]=\"queryParamsHandling\"\n    variant=\"standalone\" [isNoVisited]=\"true\" tabindex=\"0\" (click)=\"onSegmentClick($event)\"\n    class=\"ecl-breadcrumb__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n}\n} @else {\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n@if (isCurrentPage) {\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n<ecl-icon role=\"presentation\" icon=\"corner-arrow\" ariaHidden=\"true\" focusable=\"false\" size=\"fluid\"\n    class=\"ecl-breadcrumb__icon\">\n</ecl-icon>\n}\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclBreadcrumbSegmentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-breadcrumb-segment', encapsulation: ViewEncapsulation.None, template: "@if (!isEllipsis) {\n@if (!isCurrentPage && href) {\n<a eclLink variant=\"standalone\" [isNoVisited]=\"true\" [href]=\"href\" tabindex=\"0\" (click)=\"onSegmentClick($event)\"\n    class=\"ecl-breadcrumb__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n}\n@if (!isCurrentPage && !href) {\n<a eclLink [routerLink]=\"routerLink\" [queryParams]=\"queryParams\" [queryParamsHandling]=\"queryParamsHandling\"\n    variant=\"standalone\" [isNoVisited]=\"true\" tabindex=\"0\" (click)=\"onSegmentClick($event)\"\n    class=\"ecl-breadcrumb__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n}\n} @else {\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n@if (isCurrentPage) {\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n<ecl-icon role=\"presentation\" icon=\"corner-arrow\" ariaHidden=\"true\" focusable=\"false\" size=\"fluid\"\n    class=\"ecl-breadcrumb__icon\">\n</ecl-icon>\n}\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>" }]
+            args: [{ selector: 'ecl-breadcrumb-segment, li[eclBreadcrumbSegment]', encapsulation: ViewEncapsulation.None, template: "@if (!isEllipsis) {\n@if (!isCurrentPage && href) {\n<a eclLink variant=\"standalone\" [isNoVisited]=\"true\" [href]=\"href\" tabindex=\"0\" (click)=\"onSegmentClick($event)\"\n    class=\"ecl-breadcrumb__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n}\n@if (!isCurrentPage && !href) {\n<a eclLink [routerLink]=\"routerLink\" [queryParams]=\"queryParams\" [queryParamsHandling]=\"queryParamsHandling\"\n    variant=\"standalone\" [isNoVisited]=\"true\" tabindex=\"0\" (click)=\"onSegmentClick($event)\"\n    class=\"ecl-breadcrumb__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n}\n} @else {\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n@if (isCurrentPage) {\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n<ecl-icon role=\"presentation\" icon=\"corner-arrow\" ariaHidden=\"true\" focusable=\"false\" size=\"fluid\"\n    class=\"ecl-breadcrumb__icon\">\n</ecl-icon>\n}\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { tabIndex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
@@ -5971,6 +5975,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['class']
             }] } });
 
+class EclBreadcrumbContainerDirective extends ECLBaseDirective {
+    constructor(el) {
+        super();
+        this.el = el;
+        this.hasClass = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclBreadcrumbContainerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: EclBreadcrumbContainerDirective, selector: "[eclBreadcrumbContainer]", host: { properties: { "class.ecl-breadcrumb__container": "this.hasClass" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclBreadcrumbContainerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclBreadcrumbContainer]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { hasClass: [{
+                type: HostBinding,
+                args: ['class.ecl-breadcrumb__container']
+            }] } });
+
 class EclBreadcrumbComponent extends ECLBaseDirective {
     constructor(el, translate, renderer) {
         super();
@@ -6008,6 +6031,9 @@ class EclBreadcrumbComponent extends ECLBaseDirective {
     onWindowResize() {
         this.handleOverflownSegments();
     }
+    get hasContainer() {
+        return !!this.eclBreadcrumbContainer;
+    }
     onEllipsisSegmentClick(evt) {
         this.eclSegments.forEach((segment) => {
             segment.isHidden = false;
@@ -6025,7 +6051,12 @@ class EclBreadcrumbComponent extends ECLBaseDirective {
         if (this.hasEnoughSegments()) {
             const secondEclSegmentEl = this.eclSegments.get(1).el.nativeElement;
             const ellipsisSegmentEl = this.eclEllipsisSegment.el.nativeElement;
-            this.renderer.insertBefore(this.breadcrumbContainer.nativeElement, ellipsisSegmentEl, secondEclSegmentEl);
+            if (this.hasContainer) {
+                this.renderer.insertBefore(this.eclBreadcrumbContainer.el.nativeElement, ellipsisSegmentEl, secondEclSegmentEl);
+            }
+            else {
+                this.renderer.insertBefore(this.breadcrumbContainer.nativeElement, ellipsisSegmentEl, secondEclSegmentEl);
+            }
         }
     }
     handleOverflownSegments() {
@@ -6087,11 +6118,11 @@ class EclBreadcrumbComponent extends ECLBaseDirective {
         return this.eclSegments.reduce((width, segmentComponent) => width + segmentComponent.el.nativeElement.offsetWidth, 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclBreadcrumbComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.TranslateService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.13", type: EclBreadcrumbComponent, selector: "ecl-breadcrumb", inputs: { isExpanded: ["isExpanded", "isExpanded", booleanAttribute] }, host: { listeners: { "window:resize": "onWindowResize($event)" }, properties: { "attr.role": "this.role", "attr.aria-label": "this.ariaLabel", "class": "this.cssClasses", "attr.data-ecl-auto-initialized": "this.autoInitialized" } }, queries: [{ propertyName: "eclSegments", predicate: i0.forwardRef(() => EclBreadcrumbSegmentComponent) }], viewQueries: [{ propertyName: "eclEllipsisSegment", first: true, predicate: ["ellipsisSegment"], descendants: true }, { propertyName: "breadcrumbContainer", first: true, predicate: ["breadcrumbContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ol class=\"ecl-breadcrumb__container\" #breadcrumbContainer>\n    <ecl-breadcrumb-segment #ellipsisSegment [isHidden]=\"true\" isEllipsis>\n        <button\n            tabindex=\"0\"\n            eclButton\n            variant=\"ghost\"\n            class=\"ecl-breadcrumb__ellipsis\"\n            [attr.aria-label]=\"'ecl.breadcrumb.SHOW-MORE-ITEMS' | translate\"\n            (click)=\"onEllipsisSegmentClick($event)\">\n            ...\n        </button>\n    </ecl-breadcrumb-segment>\n    <ng-content></ng-content>\n</ol>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "component", type: EclBreadcrumbSegmentComponent, selector: "ecl-breadcrumb-segment", inputs: ["routerLink", "queryParams", "href", "queryParamsHandling", "isEllipsis", "isCurrentPage", "isHidden"], outputs: ["segmentClick"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EclBreadcrumbComponent, selector: "ecl-breadcrumb", inputs: { isExpanded: ["isExpanded", "isExpanded", booleanAttribute] }, host: { listeners: { "window:resize": "onWindowResize($event)" }, properties: { "attr.role": "this.role", "attr.aria-label": "this.ariaLabel", "class": "this.cssClasses", "attr.data-ecl-auto-initialized": "this.autoInitialized" } }, queries: [{ propertyName: "eclBreadcrumbContainer", first: true, predicate: EclBreadcrumbContainerDirective, descendants: true }, { propertyName: "eclSegments", predicate: i0.forwardRef(() => EclBreadcrumbSegmentComponent), descendants: true }], viewQueries: [{ propertyName: "eclEllipsisSegment", first: true, predicate: ["ellipsisSegment"], descendants: true }, { propertyName: "breadcrumbContainer", first: true, predicate: ["breadcrumbContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (!hasContainer) {\n<ol class=\"ecl-breadcrumb__container\" #breadcrumbContainer>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ol>\n} @else {\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n    <li eclBreadcrumbSegment #ellipsisSegment [isHidden]=\"true\" isEllipsis>\n        <button tabindex=\"0\" eclButton variant=\"ghost\" class=\"ecl-breadcrumb__ellipsis\"\n            [attr.aria-label]=\"'ecl.breadcrumb.SHOW-MORE-ITEMS' | translate\" (click)=\"onEllipsisSegmentClick($event)\">\n            ...\n        </button>\n    </li>\n    <ng-content></ng-content>\n</ng-template>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "component", type: EclBreadcrumbSegmentComponent, selector: "ecl-breadcrumb-segment, li[eclBreadcrumbSegment]", inputs: ["routerLink", "queryParams", "href", "queryParamsHandling", "isEllipsis", "isCurrentPage", "isHidden"], outputs: ["segmentClick"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclBreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-breadcrumb', template: "<ol class=\"ecl-breadcrumb__container\" #breadcrumbContainer>\n    <ecl-breadcrumb-segment #ellipsisSegment [isHidden]=\"true\" isEllipsis>\n        <button\n            tabindex=\"0\"\n            eclButton\n            variant=\"ghost\"\n            class=\"ecl-breadcrumb__ellipsis\"\n            [attr.aria-label]=\"'ecl.breadcrumb.SHOW-MORE-ITEMS' | translate\"\n            (click)=\"onEllipsisSegmentClick($event)\">\n            ...\n        </button>\n    </ecl-breadcrumb-segment>\n    <ng-content></ng-content>\n</ol>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'ecl-breadcrumb', template: "@if (!hasContainer) {\n<ol class=\"ecl-breadcrumb__container\" #breadcrumbContainer>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ol>\n} @else {\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n    <li eclBreadcrumbSegment #ellipsisSegment [isHidden]=\"true\" isEllipsis>\n        <button tabindex=\"0\" eclButton variant=\"ghost\" class=\"ecl-breadcrumb__ellipsis\"\n            [attr.aria-label]=\"'ecl.breadcrumb.SHOW-MORE-ITEMS' | translate\" (click)=\"onEllipsisSegmentClick($event)\">\n            ...\n        </button>\n    </li>\n    <ng-content></ng-content>\n</ng-template>", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.TranslateService }, { type: i0.Renderer2 }], propDecorators: { isExpanded: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -6107,9 +6138,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], breadcrumbContainer: [{
                 type: ViewChild,
                 args: ['breadcrumbContainer']
+            }], eclBreadcrumbContainer: [{
+                type: ContentChild,
+                args: [EclBreadcrumbContainerDirective]
             }], eclSegments: [{
                 type: ContentChildren,
-                args: [forwardRef(() => EclBreadcrumbSegmentComponent)]
+                args: [forwardRef(() => EclBreadcrumbSegmentComponent), { descendants: true }]
             }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -6121,10 +6155,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['window:resize', ['$event']]
             }] } });
 
-const COMPONENTS$s = [EclBreadcrumbComponent, EclBreadcrumbSegmentComponent];
+const COMPONENTS$s = [EclBreadcrumbComponent, EclBreadcrumbSegmentComponent, EclBreadcrumbContainerDirective];
 class EclBreadcrumbComponentModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclBreadcrumbComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: EclBreadcrumbComponentModule, declarations: [EclBreadcrumbComponent, EclBreadcrumbSegmentComponent], imports: [CommonModule, RouterModule, TranslateModule, EclButtonComponentModule, EclLinkDirectiveModule, EclIconComponentModule], exports: [EclBreadcrumbComponent, EclBreadcrumbSegmentComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: EclBreadcrumbComponentModule, declarations: [EclBreadcrumbComponent, EclBreadcrumbSegmentComponent, EclBreadcrumbContainerDirective], imports: [CommonModule, RouterModule, TranslateModule, EclButtonComponentModule, EclLinkDirectiveModule, EclIconComponentModule], exports: [EclBreadcrumbComponent, EclBreadcrumbSegmentComponent, EclBreadcrumbContainerDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclBreadcrumbComponentModule, imports: [CommonModule, RouterModule, TranslateModule, EclButtonComponentModule, EclLinkDirectiveModule, EclIconComponentModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclBreadcrumbComponentModule, decorators: [{
@@ -10143,15 +10177,19 @@ class EclInpageNavigationItemClickEvent extends EclBaseEvent {
         this.sectionElementId = sectionElementId;
     }
 }
+// TODO: ecl-inpage-navigation-item selector is deprecated and should be removed in v20
 class EclInpageNavigationItemComponent extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
+    constructor(el) {
+        super();
         this.cmpClass = true;
         this.role = 'listitem';
         this.itemClick = new EventEmitter();
         this.itemArrowUp = new EventEmitter();
         this.itemArrowDown = new EventEmitter();
         this.itemTab = new EventEmitter();
+        if (el.nativeElement.tagName.toLowerCase() === 'ecl-inpage-navigation-item') {
+            console.warn('"ecl-inpage-navigation-item" selector is deprecated; use "li[eclInpageNavigationItem]" instead.');
+        }
     }
     onItemClick(evt) {
         const event = new EclInpageNavigationItemClickEvent(this.sectionId);
@@ -10175,13 +10213,13 @@ class EclInpageNavigationItemComponent extends ECLBaseDirective {
     onFocus() {
         this.link.onFocus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclInpageNavigationItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EclInpageNavigationItemComponent, selector: "ecl-inpage-navigation-item", inputs: { label: "label", sectionId: "sectionId", isActive: "isActive" }, outputs: { itemClick: "itemClick", itemArrowUp: "itemArrowUp", itemArrowDown: "itemArrowDown", itemTab: "itemTab" }, host: { properties: { "class.ecl-inpage-navigation__item": "this.cmpClass", "attr.role": "this.role", "class.ecl-inpage-navigation__item--active": "this.isActive" } }, viewQueries: [{ propertyName: "link", first: true, predicate: EclLinkDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<a eclLink (click)=\"onItemClick($event)\" href=\"#\" class=\"ecl-inpage-navigation__link\"\n    (keydown.arrowUp)=\"onArrowUp($event)\" (keydown.arrowDown)=\"onArrowDown($event)\"\n    (keydown.tab)=\"onTab($event)\">\n    {{ label }}\n</a>\n", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclInpageNavigationItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EclInpageNavigationItemComponent, selector: "ecl-inpage-navigation-item, li[eclInpageNavigationItem]", inputs: { label: "label", sectionId: "sectionId", isActive: "isActive" }, outputs: { itemClick: "itemClick", itemArrowUp: "itemArrowUp", itemArrowDown: "itemArrowDown", itemTab: "itemTab" }, host: { properties: { "class.ecl-inpage-navigation__item": "this.cmpClass", "attr.role": "this.role", "class.ecl-inpage-navigation__item--active": "this.isActive" } }, viewQueries: [{ propertyName: "link", first: true, predicate: EclLinkDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<a eclLink (click)=\"onItemClick($event)\" href=\"#\" class=\"ecl-inpage-navigation__link\"\n    (keydown.arrowUp)=\"onArrowUp($event)\" (keydown.arrowDown)=\"onArrowDown($event)\"\n    (keydown.tab)=\"onTab($event)\">\n    {{ label }}\n</a>\n", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclInpageNavigationItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-inpage-navigation-item', template: "<a eclLink (click)=\"onItemClick($event)\" href=\"#\" class=\"ecl-inpage-navigation__link\"\n    (keydown.arrowUp)=\"onArrowUp($event)\" (keydown.arrowDown)=\"onArrowDown($event)\"\n    (keydown.tab)=\"onTab($event)\">\n    {{ label }}\n</a>\n", styles: [":host{display:list-item}\n"] }]
-        }], propDecorators: { cmpClass: [{
+            args: [{ selector: 'ecl-inpage-navigation-item, li[eclInpageNavigationItem]', template: "<a eclLink (click)=\"onItemClick($event)\" href=\"#\" class=\"ecl-inpage-navigation__link\"\n    (keydown.arrowUp)=\"onArrowUp($event)\" (keydown.arrowDown)=\"onArrowDown($event)\"\n    (keydown.tab)=\"onTab($event)\">\n    {{ label }}\n</a>\n", styles: [":host{display:list-item}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { cmpClass: [{
                 type: HostBinding,
                 args: ['class.ecl-inpage-navigation__item']
             }], role: [{
@@ -10288,6 +10326,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
+class EclInpageNavigationService {
+    constructor() {
+        this.eclInpageNavigationExpanded = new Subject();
+        this.eclInpageNavigationExpanded$ = this.eclInpageNavigationExpanded.asObservable();
+    }
+    eclInpageNavigationToggle(isExpanded) {
+        this.eclInpageNavigationExpanded.next(isExpanded);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclInpageNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclInpageNavigationService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclInpageNavigationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class EclInpageNavigationListDirective extends ECLBaseDirective {
+    constructor(eclInpageNavigationService) {
+        super();
+        this.eclInpageNavigationService = eclInpageNavigationService;
+        this.hasClass = true;
+        this.isVisible = false;
+        this.destroy$ = new Subject();
+    }
+    ngAfterContentInit() {
+        this.eclInpageNavigationService.eclInpageNavigationExpanded$.pipe(takeUntil(this.destroy$)).subscribe((value) => {
+            this.isVisible = value;
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclInpageNavigationListDirective, deps: [{ token: EclInpageNavigationService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: EclInpageNavigationListDirective, selector: "ul[eclInpageNavigationList]", host: { properties: { "class.ecl-inpage-navigation__list": "this.hasClass", "class.ecl-inpage-navigation__list--visible": "this.isVisible" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclInpageNavigationListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ul[eclInpageNavigationList]',
+                }]
+        }], ctorParameters: () => [{ type: EclInpageNavigationService }], propDecorators: { hasClass: [{
+                type: HostBinding,
+                args: ['class.ecl-inpage-navigation__list']
+            }], isVisible: [{
+                type: HostBinding,
+                args: ['class.ecl-inpage-navigation__list--visible']
+            }] } });
+
 class EclInpageNavigationSectionEnterEvent extends EclBaseEvent {
     constructor(sectionId) {
         super();
@@ -10295,9 +10381,8 @@ class EclInpageNavigationSectionEnterEvent extends EclBaseEvent {
     }
 }
 class EclInpageNavigationComponent extends ECLBaseDirective {
-    constructor(el, eclRtlService, eclThemeService, differs, scrollDispatcher, zone, cdkBreakpointObserver, viewportRuler) {
+    constructor(eclRtlService, eclThemeService, differs, scrollDispatcher, zone, cdkBreakpointObserver, viewportRuler, eclInpageNavigationService) {
         super();
-        this.el = el;
         this.eclRtlService = eclRtlService;
         this.eclThemeService = eclThemeService;
         this.differs = differs;
@@ -10305,6 +10390,7 @@ class EclInpageNavigationComponent extends ECLBaseDirective {
         this.zone = zone;
         this.cdkBreakpointObserver = cdkBreakpointObserver;
         this.viewportRuler = viewportRuler;
+        this.eclInpageNavigationService = eclInpageNavigationService;
         this.sectionEnter = new EventEmitter();
         this.isButtonExpanded = false;
         this.isRtl = false;
@@ -10332,6 +10418,9 @@ class EclInpageNavigationComponent extends ECLBaseDirective {
     ngOnInit() {
         this.handleRtlChangeState();
     }
+    get hasNavigationList() {
+        return !!this.eclNavigationList;
+    }
     get currentNavigationLinkItem() {
         return this.eclNavigationLinkItems.find((item) => item.sectionElement === this.currentSectionElement);
     }
@@ -10361,6 +10450,7 @@ class EclInpageNavigationComponent extends ECLBaseDirective {
     }
     onExpandButtonClick() {
         this.isButtonExpanded = !this.isButtonExpanded;
+        this.eclInpageNavigationService.eclInpageNavigationToggle(this.isButtonExpanded);
     }
     onExpandButtonKeydown(evt) {
         switch (evt.key) {
@@ -10507,13 +10597,13 @@ class EclInpageNavigationComponent extends ECLBaseDirective {
             this.isMobileBreakpoint = result.matches;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclInpageNavigationComponent, deps: [{ token: i0.ElementRef }, { token: EclRtlService }, { token: EclThemeService }, { token: i0.IterableDiffers }, { token: i2.ScrollDispatcher }, { token: i0.NgZone }, { token: i1$4.BreakpointObserver }, { token: i2.ViewportRuler }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EclInpageNavigationComponent, selector: "ecl-inpage-navigation", inputs: { eclTitle: "eclTitle", marginTop: "marginTop", marginBottom: "marginBottom" }, outputs: { sectionEnter: "sectionEnter" }, queries: [{ propertyName: "eclNavigationLinkItems", predicate: EclInpageNavigationItemComponent }], viewQueries: [{ propertyName: "togglerButton", first: true, predicate: ["togglerButton"], descendants: true }, { propertyName: "toggleWrapper", first: true, predicate: ["toggleWrapper"], descendants: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true }, { propertyName: "navTittle", first: true, predicate: ["navTittle"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecl-sticky-container [marginTop]=\"marginTop\" [marginBottom]=\"marginBottom\">\n    <nav\n        aria-labelledby=\"ecl-inpage-navigation-default\"\n        class=\"ecl-inpage-navigation\"\n        [class.ecl-inpage-navigation--visible]=\"hasActiveSection\"\n        [class.ecl-inpage-navigation--rtl]=\"isRtl\">\n        <div #navTittle id=\"ecl-inpage-navigation-default\" class=\"ecl-inpage-navigation__title\">\n            {{ eclTitle || 'ecl.inpage-navigation.PAGE-CONTENTS' | translate }}\n        </div>\n        <div class=\"ecl-inpage-navigation__body\">\n            <div #toggleWrapper class=\"ecl-inpage-navigation__trigger-wrapper\">\n                <button\n                    #togglerButton\n                    id=\"ecl-inpage-navigation-default-trigger\"\n                    type=\"button\"\n                    class=\"ecl-inpage-navigation__trigger\"\n                    aria-controls=\"ecl-inpage-navigation-list\"\n                    [attr.aria-expanded]=\"isButtonExpanded\"\n                    (click)=\"onExpandButtonClick()\"\n                    (keydown)=\"onExpandButtonKeydown($event)\">\n                    <span class=\"ecl-inpage-navigation__trigger-current\">\n                        {{ currentNavigationLinkItem?.label }}\n                    </span>\n                    <ecl-icon icon=\"corner-arrow\" [size]=\"sizeIcon\" transform=\"rotate-180\"\n                        class=\"ecl-inpage-navigation__trigger-icon\" title=\"Show full page table of contents\"> </ecl-icon>\n                </button>\n             </div>\n            <ul\n                #listContainer\n                id=\"ecl-inpage-navigation-default-list\"\n                class=\"ecl-inpage-navigation__list\"\n                [class.ecl-inpage-navigation__list--visible]=\"isButtonExpanded\"\n                [style.max-height.px]=\"listMaxHeight\"\n                [attr.aria-expanded]=\"isButtonExpanded\">\n                <ng-content></ng-content>\n            </ul>\n        </div>\n    </nav>\n</ecl-sticky-container>\n", styles: ["@media (min-width: 996px){.ecl-inpage-navigation__list{display:block!important}}\n"], dependencies: [{ kind: "component", type: EclStickyContainerComponent, selector: "ecl-sticky-container", inputs: ["isEnabled", "marginTop", "marginBottom"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclInpageNavigationComponent, deps: [{ token: EclRtlService }, { token: EclThemeService }, { token: i0.IterableDiffers }, { token: i2.ScrollDispatcher }, { token: i0.NgZone }, { token: i1$4.BreakpointObserver }, { token: i2.ViewportRuler }, { token: EclInpageNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EclInpageNavigationComponent, selector: "ecl-inpage-navigation", inputs: { eclTitle: "eclTitle", marginTop: "marginTop", marginBottom: "marginBottom" }, outputs: { sectionEnter: "sectionEnter" }, queries: [{ propertyName: "eclNavigationList", first: true, predicate: EclInpageNavigationListDirective, descendants: true }, { propertyName: "eclNavigationLinkItems", predicate: EclInpageNavigationItemComponent, descendants: true }], viewQueries: [{ propertyName: "togglerButton", first: true, predicate: ["togglerButton"], descendants: true }, { propertyName: "toggleWrapper", first: true, predicate: ["toggleWrapper"], descendants: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true }, { propertyName: "navTittle", first: true, predicate: ["navTittle"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecl-sticky-container [marginTop]=\"marginTop\" [marginBottom]=\"marginBottom\">\n    <nav\n        aria-labelledby=\"ecl-inpage-navigation-default\"\n        class=\"ecl-inpage-navigation\"\n        [class.ecl-inpage-navigation--visible]=\"hasActiveSection\"\n        [class.ecl-inpage-navigation--rtl]=\"isRtl\">\n        <div #navTittle id=\"ecl-inpage-navigation-default\" class=\"ecl-inpage-navigation__title\">\n            {{ eclTitle || 'ecl.inpage-navigation.PAGE-CONTENTS' | translate }}\n        </div>\n        <div class=\"ecl-inpage-navigation__body\">\n            <div #toggleWrapper class=\"ecl-inpage-navigation__trigger-wrapper\">\n                <button\n                    #togglerButton\n                    id=\"ecl-inpage-navigation-default-trigger\"\n                    type=\"button\"\n                    class=\"ecl-inpage-navigation__trigger\"\n                    aria-controls=\"ecl-inpage-navigation-list\"\n                    [attr.aria-expanded]=\"isButtonExpanded\"\n                    (click)=\"onExpandButtonClick()\"\n                    (keydown)=\"onExpandButtonKeydown($event)\">\n                    <span class=\"ecl-inpage-navigation__trigger-current\">\n                        {{ currentNavigationLinkItem?.label }}\n                    </span>\n                    <ecl-icon icon=\"corner-arrow\" [size]=\"sizeIcon\" transform=\"rotate-180\"\n                        class=\"ecl-inpage-navigation__trigger-icon\" title=\"Show full page table of contents\"> </ecl-icon>\n                </button>\n             </div>\n            @if (!hasNavigationList) {\n            <ul #listContainer id=\"ecl-inpage-navigation-default-list\" class=\"ecl-inpage-navigation__list\"\n                [class.ecl-inpage-navigation__list--visible]=\"isButtonExpanded\" [style.max-height.px]=\"listMaxHeight\"\n                [attr.aria-expanded]=\"isButtonExpanded\">\n                <ng-container>\n                    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n                </ng-container>\n            </ul>\n            } @else {\n                <ng-container>\n                    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n                </ng-container>\n            }\n        </div>\n    </nav>\n</ecl-sticky-container>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", styles: ["@media (min-width: 996px){.ecl-inpage-navigation__list{display:block!important}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EclStickyContainerComponent, selector: "ecl-sticky-container", inputs: ["isEnabled", "marginTop", "marginBottom"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclInpageNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-inpage-navigation', template: "<ecl-sticky-container [marginTop]=\"marginTop\" [marginBottom]=\"marginBottom\">\n    <nav\n        aria-labelledby=\"ecl-inpage-navigation-default\"\n        class=\"ecl-inpage-navigation\"\n        [class.ecl-inpage-navigation--visible]=\"hasActiveSection\"\n        [class.ecl-inpage-navigation--rtl]=\"isRtl\">\n        <div #navTittle id=\"ecl-inpage-navigation-default\" class=\"ecl-inpage-navigation__title\">\n            {{ eclTitle || 'ecl.inpage-navigation.PAGE-CONTENTS' | translate }}\n        </div>\n        <div class=\"ecl-inpage-navigation__body\">\n            <div #toggleWrapper class=\"ecl-inpage-navigation__trigger-wrapper\">\n                <button\n                    #togglerButton\n                    id=\"ecl-inpage-navigation-default-trigger\"\n                    type=\"button\"\n                    class=\"ecl-inpage-navigation__trigger\"\n                    aria-controls=\"ecl-inpage-navigation-list\"\n                    [attr.aria-expanded]=\"isButtonExpanded\"\n                    (click)=\"onExpandButtonClick()\"\n                    (keydown)=\"onExpandButtonKeydown($event)\">\n                    <span class=\"ecl-inpage-navigation__trigger-current\">\n                        {{ currentNavigationLinkItem?.label }}\n                    </span>\n                    <ecl-icon icon=\"corner-arrow\" [size]=\"sizeIcon\" transform=\"rotate-180\"\n                        class=\"ecl-inpage-navigation__trigger-icon\" title=\"Show full page table of contents\"> </ecl-icon>\n                </button>\n             </div>\n            <ul\n                #listContainer\n                id=\"ecl-inpage-navigation-default-list\"\n                class=\"ecl-inpage-navigation__list\"\n                [class.ecl-inpage-navigation__list--visible]=\"isButtonExpanded\"\n                [style.max-height.px]=\"listMaxHeight\"\n                [attr.aria-expanded]=\"isButtonExpanded\">\n                <ng-content></ng-content>\n            </ul>\n        </div>\n    </nav>\n</ecl-sticky-container>\n", styles: ["@media (min-width: 996px){.ecl-inpage-navigation__list{display:block!important}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: EclRtlService }, { type: EclThemeService }, { type: i0.IterableDiffers }, { type: i2.ScrollDispatcher }, { type: i0.NgZone }, { type: i1$4.BreakpointObserver }, { type: i2.ViewportRuler }], propDecorators: { eclTitle: [{
+            args: [{ selector: 'ecl-inpage-navigation', template: "<ecl-sticky-container [marginTop]=\"marginTop\" [marginBottom]=\"marginBottom\">\n    <nav\n        aria-labelledby=\"ecl-inpage-navigation-default\"\n        class=\"ecl-inpage-navigation\"\n        [class.ecl-inpage-navigation--visible]=\"hasActiveSection\"\n        [class.ecl-inpage-navigation--rtl]=\"isRtl\">\n        <div #navTittle id=\"ecl-inpage-navigation-default\" class=\"ecl-inpage-navigation__title\">\n            {{ eclTitle || 'ecl.inpage-navigation.PAGE-CONTENTS' | translate }}\n        </div>\n        <div class=\"ecl-inpage-navigation__body\">\n            <div #toggleWrapper class=\"ecl-inpage-navigation__trigger-wrapper\">\n                <button\n                    #togglerButton\n                    id=\"ecl-inpage-navigation-default-trigger\"\n                    type=\"button\"\n                    class=\"ecl-inpage-navigation__trigger\"\n                    aria-controls=\"ecl-inpage-navigation-list\"\n                    [attr.aria-expanded]=\"isButtonExpanded\"\n                    (click)=\"onExpandButtonClick()\"\n                    (keydown)=\"onExpandButtonKeydown($event)\">\n                    <span class=\"ecl-inpage-navigation__trigger-current\">\n                        {{ currentNavigationLinkItem?.label }}\n                    </span>\n                    <ecl-icon icon=\"corner-arrow\" [size]=\"sizeIcon\" transform=\"rotate-180\"\n                        class=\"ecl-inpage-navigation__trigger-icon\" title=\"Show full page table of contents\"> </ecl-icon>\n                </button>\n             </div>\n            @if (!hasNavigationList) {\n            <ul #listContainer id=\"ecl-inpage-navigation-default-list\" class=\"ecl-inpage-navigation__list\"\n                [class.ecl-inpage-navigation__list--visible]=\"isButtonExpanded\" [style.max-height.px]=\"listMaxHeight\"\n                [attr.aria-expanded]=\"isButtonExpanded\">\n                <ng-container>\n                    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n                </ng-container>\n            </ul>\n            } @else {\n                <ng-container>\n                    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n                </ng-container>\n            }\n        </div>\n    </nav>\n</ecl-sticky-container>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", styles: ["@media (min-width: 996px){.ecl-inpage-navigation__list{display:block!important}}\n"] }]
+        }], ctorParameters: () => [{ type: EclRtlService }, { type: EclThemeService }, { type: i0.IterableDiffers }, { type: i2.ScrollDispatcher }, { type: i0.NgZone }, { type: i1$4.BreakpointObserver }, { type: i2.ViewportRuler }, { type: EclInpageNavigationService }], propDecorators: { eclTitle: [{
                 type: Input
             }], marginTop: [{
                 type: Input
@@ -10535,20 +10625,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Output
             }], eclNavigationLinkItems: [{
                 type: ContentChildren,
-                args: [EclInpageNavigationItemComponent]
+                args: [EclInpageNavigationItemComponent, { descendants: true }]
+            }], eclNavigationList: [{
+                type: ContentChild,
+                args: [EclInpageNavigationListDirective]
             }] } });
 
 class EclInpageNavigationComponentModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclInpageNavigationComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: EclInpageNavigationComponentModule, declarations: [EclInpageNavigationComponent, EclInpageNavigationItemComponent], imports: [CommonModule, TranslateModule, EclStickyContainerComponentModule, EclLinkDirectiveModule, EclIconComponentModule], exports: [EclInpageNavigationComponent, EclInpageNavigationItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclInpageNavigationComponentModule, imports: [CommonModule, TranslateModule, EclStickyContainerComponentModule, EclLinkDirectiveModule, EclIconComponentModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: EclInpageNavigationComponentModule, declarations: [EclInpageNavigationComponent, EclInpageNavigationItemComponent, EclInpageNavigationListDirective], imports: [CommonModule, TranslateModule, EclStickyContainerComponentModule, EclLinkDirectiveModule, EclIconComponentModule], exports: [EclInpageNavigationComponent, EclInpageNavigationItemComponent, EclInpageNavigationListDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclInpageNavigationComponentModule, providers: [EclInpageNavigationService], imports: [CommonModule, TranslateModule, EclStickyContainerComponentModule, EclLinkDirectiveModule, EclIconComponentModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclInpageNavigationComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, TranslateModule, EclStickyContainerComponentModule, EclLinkDirectiveModule, EclIconComponentModule],
-                    exports: [EclInpageNavigationComponent, EclInpageNavigationItemComponent],
-                    declarations: [EclInpageNavigationComponent, EclInpageNavigationItemComponent],
+                    exports: [EclInpageNavigationComponent, EclInpageNavigationItemComponent, EclInpageNavigationListDirective],
+                    declarations: [EclInpageNavigationComponent, EclInpageNavigationItemComponent, EclInpageNavigationListDirective],
+                    providers: [EclInpageNavigationService],
                 }]
         }] });
 
@@ -11239,11 +11333,11 @@ class EclModalHeaderComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclModalHeaderComponent, deps: [{ token: EclThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EclModalHeaderComponent, selector: "[eclModalHeader]", inputs: { variant: "variant" }, outputs: { modalClose: "modalClose" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "@if(getIcon()) {\n    @if(variant === 'warning') {\n        <span class=\"ecl-modal__icon-background\"></span>\n    }\n    <ecl-icon [icon]=\"getIcon()\" size=\"l\" class=\"ecl-modal__icon\" [title]=\"variant\"></ecl-icon>\n}\n<div class=\"ecl-modal__header-content\">\n    <ng-content></ng-content>\n</div>\n<button eclButton variant=\"tertiary\" isIconOnly class=\"ecl-modal__close\" type=\"button\" (click)=\"onCloseClick()\">\n    <span eclButtonLabel>Close</span>\n    <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n</button>\n", dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EclModalHeaderComponent, selector: "[eclModalHeader]", inputs: { variant: "variant" }, outputs: { modalClose: "modalClose" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "@if(getIcon()) {\n    @if(variant === 'warning') {\n        <span class=\"ecl-modal__icon-background\"></span>\n    }\n    <ecl-icon [icon]=\"getIcon()\" size=\"l\" class=\"ecl-modal__icon\" [title]=\"variant\"></ecl-icon>\n}\n<div class=\"ecl-modal__header-content\">\n    <ng-content></ng-content>\n</div>\n<button eclButton variant=\"tertiary\" isIconOnly class=\"ecl-modal__close\" type=\"button\" (click)=\"onCloseClick()\">\n    <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n    <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n</button>\n", dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclModalHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[eclModalHeader]', template: "@if(getIcon()) {\n    @if(variant === 'warning') {\n        <span class=\"ecl-modal__icon-background\"></span>\n    }\n    <ecl-icon [icon]=\"getIcon()\" size=\"l\" class=\"ecl-modal__icon\" [title]=\"variant\"></ecl-icon>\n}\n<div class=\"ecl-modal__header-content\">\n    <ng-content></ng-content>\n</div>\n<button eclButton variant=\"tertiary\" isIconOnly class=\"ecl-modal__close\" type=\"button\" (click)=\"onCloseClick()\">\n    <span eclButtonLabel>Close</span>\n    <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n</button>\n" }]
+            args: [{ selector: '[eclModalHeader]', template: "@if(getIcon()) {\n    @if(variant === 'warning') {\n        <span class=\"ecl-modal__icon-background\"></span>\n    }\n    <ecl-icon [icon]=\"getIcon()\" size=\"l\" class=\"ecl-modal__icon\" [title]=\"variant\"></ecl-icon>\n}\n<div class=\"ecl-modal__header-content\">\n    <ng-content></ng-content>\n</div>\n<button eclButton variant=\"tertiary\" isIconOnly class=\"ecl-modal__close\" type=\"button\" (click)=\"onCloseClick()\">\n    <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n    <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n</button>\n" }]
         }], ctorParameters: () => [{ type: EclThemeService }], propDecorators: { variant: [{
                 type: Input
             }], modalClose: [{
@@ -11476,19 +11570,19 @@ class EclModalComponentModule {
             EclModalBodyFixedContentDirective,
             EclModalFooterComponent,
             EclModalCloseDirective,
-            EclModalTriggerDirective], imports: [CommonModule, EclIconComponentModule, EclButtonComponentModule], exports: [EclModalComponent,
+            EclModalTriggerDirective], imports: [CommonModule, TranslateModule, EclIconComponentModule, EclButtonComponentModule], exports: [EclModalComponent,
             EclModalHeaderComponent,
             EclModalBodyComponent,
             EclModalBodyFixedContentDirective,
             EclModalFooterComponent,
             EclModalCloseDirective,
             EclModalTriggerDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclModalComponentModule, imports: [CommonModule, EclIconComponentModule, EclButtonComponentModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclModalComponentModule, imports: [CommonModule, TranslateModule, EclIconComponentModule, EclButtonComponentModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclModalComponentModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, EclIconComponentModule, EclButtonComponentModule],
+                    imports: [CommonModule, TranslateModule, EclIconComponentModule, EclButtonComponentModule],
                     exports: [...COMPONENTS$e],
                     declarations: [...COMPONENTS$e],
                 }]
@@ -13959,19 +14053,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-class EclPaginationItemClickEvent extends EclBaseEvent {
-}
-class EclPaginationItemComponent extends ECLBaseDirective {
+class EclPaginationListDirective extends ECLBaseDirective {
     constructor() {
         super(...arguments);
-        this.role = 'listitem';
-        this.isTruncated = false;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.routerLink = null;
-        this.queryParams = null;
-        this.queryParamsHandling = null;
-        this.pageClick = new EventEmitter();
+        this.hasClass = true;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclPaginationListDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: EclPaginationListDirective, selector: "[eclPaginationList]", host: { properties: { "class.ecl-pagination__list": "this.hasClass" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclPaginationListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclPaginationList]',
+                }]
+        }], propDecorators: { hasClass: [{
+                type: HostBinding,
+                args: ['class.ecl-pagination__list']
+            }] } });
+
+class EclPaginationItemClickEvent extends EclBaseEvent {
+}
+// TODO: ecl-pagination-item selector is deprecated and should be removed in v20
+class EclPaginationItemComponent extends ECLBaseDirective {
     get cssClasses() {
         return [
             super.getCssClasses('ecl-pagination__item'),
@@ -13982,6 +14085,20 @@ class EclPaginationItemComponent extends ECLBaseDirective {
             .join(' ')
             .trim();
     }
+    constructor(el) {
+        super();
+        this.el = el;
+        this.role = 'listitem';
+        this.isTruncated = false;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.routerLink = null;
+        this.queryParams = null;
+        this.queryParamsHandling = null;
+        this.pageClick = new EventEmitter();
+        if (el.nativeElement.tagName.toLowerCase() === 'ecl-pagination-item') {
+            console.warn('"ecl-pagination-item" selector is deprecated; use "li[eclPaginationItem]" instead.');
+        }
+    }
     get isIconOnly() {
         return this.isPrevOrNextVisible();
     }
@@ -14017,13 +14134,13 @@ class EclPaginationItemComponent extends ECLBaseDirective {
     isPrevOrNextVisible() {
         return this.isPrevious || this.isNext;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclPaginationItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EclPaginationItemComponent, selector: "ecl-pagination-item", inputs: { label: "label", ariaLabel: "ariaLabel", pagesCount: "pagesCount", isCurrent: ["isCurrent", "isCurrent", booleanAttribute], isNext: ["isNext", "isNext", booleanAttribute], isPrevious: ["isPrevious", "isPrevious", booleanAttribute], isTruncated: ["isTruncated", "isTruncated", booleanAttribute], routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href" }, outputs: { pageClick: "pageClick" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role", "class.ecl-pagination__item--truncation": "this.isTruncated" } }, usesInheritance: true, ngImport: i0, template: "@if (!isCurrent && !isTruncated) {\n@if(routerLink){\n<a eclLink [isIconOnly]=\"isIconOnly\" (keydown.enter)=\"onPageClick($event)\" (click)=\"onPageClick($event)\" variant=\"standalone\"\n    attr.aria-label=\"{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}\"\n    [routerLink]=\"routerLink\" [queryParams]=\"queryParams\" [queryParamsHandling]=\"queryParamsHandling\"\n    class=\"ecl-pagination__link eui-ecl-u-cursor-pointer\" tabindex=\"{{tabindex ? tabindex : 0}}\">\n    @if (isPrevious) {\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-270\"></ecl-icon>\n    }\n    <span eclLinkLabel>{{ label || geti18nPageLabelKey() | translate }}</span>\n    @if (isNext) {\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-90\"></ecl-icon>\n    }\n</a>\n}\n\n@if (!routerLink) {\n<a eclLink [isIconOnly]=\"isIconOnly\" (keydown.enter)=\"onPageClick($event)\" (click)=\"onPageClick($event)\" variant=\"standalone\"\n    attr.aria-label=\"{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}\" [attr.href]=\"href\"\n    class=\"ecl-pagination__link eui-ecl-u-cursor-pointer\" tabindex=\"{{tabindex ? tabindex : 0}}\">\n    @if (isPrevious) {\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-270\"></ecl-icon>\n    }\n    <span eclLinkLabel>{{ label || geti18nPageLabelKey() | translate }}</span>\n    @if (isNext) {\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-90\"></ecl-icon>\n    }\n</a>\n}\n}\n\n@else if (isTruncated) {\n<span class=\"ecl-pagination__text ecl-pagination__text--summary\" aria-current=\"true\">\n    {{ label }}\n</span>\n}\n@else {\n<span class=\"ecl-pagination__text ecl-pagination__text--summary\" aria-current=\"true\">\n    {{ label }}\n</span>\n\n<span class=\"ecl-pagination__text ecl-pagination__text--full\" aria-current=\"true\">\n    {{ 'ecl.pagination.PAGE' | translate: { pageNumber: label } }}\n    @if(pagesCount) {\n    {{ 'ecl.common.OF' | translate}} {{pagesCount}}\n    }\n</span>\n}", dependencies: [{ kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclPaginationItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EclPaginationItemComponent, selector: "ecl-pagination-item, li[eclPaginationItem]", inputs: { label: "label", ariaLabel: "ariaLabel", pagesCount: "pagesCount", isCurrent: ["isCurrent", "isCurrent", booleanAttribute], isNext: ["isNext", "isNext", booleanAttribute], isPrevious: ["isPrevious", "isPrevious", booleanAttribute], isTruncated: ["isTruncated", "isTruncated", booleanAttribute], routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href" }, outputs: { pageClick: "pageClick" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role", "class.ecl-pagination__item--truncation": "this.isTruncated" } }, usesInheritance: true, ngImport: i0, template: "@if (!isCurrent && !isTruncated) {\n@if(routerLink){\n<a eclLink [isIconOnly]=\"isIconOnly\" (keydown.enter)=\"onPageClick($event)\" (click)=\"onPageClick($event)\" variant=\"standalone\"\n    attr.aria-label=\"{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}\"\n    [routerLink]=\"routerLink\" [queryParams]=\"queryParams\" [queryParamsHandling]=\"queryParamsHandling\"\n    class=\"ecl-pagination__link eui-ecl-u-cursor-pointer\" tabindex=\"{{tabindex ? tabindex : 0}}\">\n    @if (isPrevious) {\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-270\"></ecl-icon>\n    }\n    <span eclLinkLabel>{{ label || geti18nPageLabelKey() | translate }}</span>\n    @if (isNext) {\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-90\"></ecl-icon>\n    }\n</a>\n}\n\n@if (!routerLink) {\n<a eclLink [isIconOnly]=\"isIconOnly\" (keydown.enter)=\"onPageClick($event)\" (click)=\"onPageClick($event)\" variant=\"standalone\"\n    attr.aria-label=\"{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}\" [attr.href]=\"href\"\n    class=\"ecl-pagination__link eui-ecl-u-cursor-pointer\" tabindex=\"{{tabindex ? tabindex : 0}}\">\n    @if (isPrevious) {\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-270\"></ecl-icon>\n    }\n    <span eclLinkLabel>{{ label || geti18nPageLabelKey() | translate }}</span>\n    @if (isNext) {\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-90\"></ecl-icon>\n    }\n</a>\n}\n}\n\n@else if (isTruncated) {\n<span class=\"ecl-pagination__text ecl-pagination__text--summary\" aria-current=\"true\">\n    {{ label }}\n</span>\n}\n@else {\n<span class=\"ecl-pagination__text ecl-pagination__text--summary\" aria-current=\"true\">\n    {{ label }}\n</span>\n\n<span class=\"ecl-pagination__text ecl-pagination__text--full\" aria-current=\"true\">\n    {{ 'ecl.pagination.PAGE' | translate: { pageNumber: label } }}\n    @if(pagesCount) {\n    {{ 'ecl.common.OF' | translate}} {{pagesCount}}\n    }\n</span>\n}", dependencies: [{ kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclPaginationItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-pagination-item', encapsulation: ViewEncapsulation.None, template: "@if (!isCurrent && !isTruncated) {\n@if(routerLink){\n<a eclLink [isIconOnly]=\"isIconOnly\" (keydown.enter)=\"onPageClick($event)\" (click)=\"onPageClick($event)\" variant=\"standalone\"\n    attr.aria-label=\"{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}\"\n    [routerLink]=\"routerLink\" [queryParams]=\"queryParams\" [queryParamsHandling]=\"queryParamsHandling\"\n    class=\"ecl-pagination__link eui-ecl-u-cursor-pointer\" tabindex=\"{{tabindex ? tabindex : 0}}\">\n    @if (isPrevious) {\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-270\"></ecl-icon>\n    }\n    <span eclLinkLabel>{{ label || geti18nPageLabelKey() | translate }}</span>\n    @if (isNext) {\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-90\"></ecl-icon>\n    }\n</a>\n}\n\n@if (!routerLink) {\n<a eclLink [isIconOnly]=\"isIconOnly\" (keydown.enter)=\"onPageClick($event)\" (click)=\"onPageClick($event)\" variant=\"standalone\"\n    attr.aria-label=\"{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}\" [attr.href]=\"href\"\n    class=\"ecl-pagination__link eui-ecl-u-cursor-pointer\" tabindex=\"{{tabindex ? tabindex : 0}}\">\n    @if (isPrevious) {\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-270\"></ecl-icon>\n    }\n    <span eclLinkLabel>{{ label || geti18nPageLabelKey() | translate }}</span>\n    @if (isNext) {\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-90\"></ecl-icon>\n    }\n</a>\n}\n}\n\n@else if (isTruncated) {\n<span class=\"ecl-pagination__text ecl-pagination__text--summary\" aria-current=\"true\">\n    {{ label }}\n</span>\n}\n@else {\n<span class=\"ecl-pagination__text ecl-pagination__text--summary\" aria-current=\"true\">\n    {{ label }}\n</span>\n\n<span class=\"ecl-pagination__text ecl-pagination__text--full\" aria-current=\"true\">\n    {{ 'ecl.pagination.PAGE' | translate: { pageNumber: label } }}\n    @if(pagesCount) {\n    {{ 'ecl.common.OF' | translate}} {{pagesCount}}\n    }\n</span>\n}" }]
-        }], propDecorators: { cssClasses: [{
+            args: [{ selector: 'ecl-pagination-item, li[eclPaginationItem]', encapsulation: ViewEncapsulation.None, template: "@if (!isCurrent && !isTruncated) {\n@if(routerLink){\n<a eclLink [isIconOnly]=\"isIconOnly\" (keydown.enter)=\"onPageClick($event)\" (click)=\"onPageClick($event)\" variant=\"standalone\"\n    attr.aria-label=\"{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}\"\n    [routerLink]=\"routerLink\" [queryParams]=\"queryParams\" [queryParamsHandling]=\"queryParamsHandling\"\n    class=\"ecl-pagination__link eui-ecl-u-cursor-pointer\" tabindex=\"{{tabindex ? tabindex : 0}}\">\n    @if (isPrevious) {\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-270\"></ecl-icon>\n    }\n    <span eclLinkLabel>{{ label || geti18nPageLabelKey() | translate }}</span>\n    @if (isNext) {\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-90\"></ecl-icon>\n    }\n</a>\n}\n\n@if (!routerLink) {\n<a eclLink [isIconOnly]=\"isIconOnly\" (keydown.enter)=\"onPageClick($event)\" (click)=\"onPageClick($event)\" variant=\"standalone\"\n    attr.aria-label=\"{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}\" [attr.href]=\"href\"\n    class=\"ecl-pagination__link eui-ecl-u-cursor-pointer\" tabindex=\"{{tabindex ? tabindex : 0}}\">\n    @if (isPrevious) {\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-270\"></ecl-icon>\n    }\n    <span eclLinkLabel>{{ label || geti18nPageLabelKey() | translate }}</span>\n    @if (isNext) {\n    <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-90\"></ecl-icon>\n    }\n</a>\n}\n}\n\n@else if (isTruncated) {\n<span class=\"ecl-pagination__text ecl-pagination__text--summary\" aria-current=\"true\">\n    {{ label }}\n</span>\n}\n@else {\n<span class=\"ecl-pagination__text ecl-pagination__text--summary\" aria-current=\"true\">\n    {{ label }}\n</span>\n\n<span class=\"ecl-pagination__text ecl-pagination__text--full\" aria-current=\"true\">\n    {{ 'ecl.pagination.PAGE' | translate: { pageNumber: label } }}\n    @if(pagesCount) {\n    {{ 'ecl.common.OF' | translate}} {{pagesCount}}\n    }\n</span>\n}" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }], role: [{
@@ -14100,6 +14217,9 @@ class EclPaginationComponent extends ECLBaseDirective {
             });
         }
     }
+    get hasList() {
+        return !!this.eclPaginationList;
+    }
     onPreviousPage() {
         this.model.goToPreviousPage();
         this.firePageEvent();
@@ -14120,11 +14240,11 @@ class EclPaginationComponent extends ECLBaseDirective {
         this.page.next(evt);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclPaginationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EclPaginationComponent, selector: "ecl-pagination", inputs: { mode: "mode", totalItems: ["totalItems", "totalItems", numberAttribute], pageSize: ["pageSize", "pageSize", numberAttribute], currentPage: ["currentPage", "currentPage", numberAttribute], pageWindowSize: ["pageWindowSize", "pageWindowSize", numberAttribute] }, outputs: { page: "page" }, host: { properties: { "class.ecl-pagination": "this.cmpClass", "attr.role": "this.role" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ul class=\"ecl-pagination__list\">\n    @if (isModeAuto()){\n        @if(model.hasPreviousPage()){\n            <ecl-pagination-item [isPrevious]=\"true\" (pageClick)=\"onPreviousPage()\"> </ecl-pagination-item>\n        }\n        @for (page of model.getPages(); track page) {\n            <ecl-pagination-item\n                [label]=\"page.toString()\"\n                [isCurrent]=\"model.getCurrentPage() === page\"\n                (pageClick)=\"onPage(page)\"\n                [pagesCount]=\"model.getPagesCount().toString()\"\n            >\n            </ecl-pagination-item>\n        }\n\n        @if(model.hasNextPage()){\n            <ecl-pagination-item [isNext]=\"true\" (pageClick)=\"onNextPage()\"> </ecl-pagination-item>\n        }\n    }\n\n    @if(!isModeAuto()){\n        <ng-content></ng-content>\n    }\n</ul>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: EclPaginationItemComponent, selector: "ecl-pagination-item", inputs: ["label", "ariaLabel", "pagesCount", "isCurrent", "isNext", "isPrevious", "isTruncated", "routerLink", "queryParams", "queryParamsHandling", "href"], outputs: ["pageClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EclPaginationComponent, selector: "ecl-pagination", inputs: { mode: "mode", totalItems: ["totalItems", "totalItems", numberAttribute], pageSize: ["pageSize", "pageSize", numberAttribute], currentPage: ["currentPage", "currentPage", numberAttribute], pageWindowSize: ["pageWindowSize", "pageWindowSize", numberAttribute] }, outputs: { page: "page" }, host: { properties: { "class.ecl-pagination": "this.cmpClass", "attr.role": "this.role" } }, queries: [{ propertyName: "eclPaginationList", first: true, predicate: EclPaginationListDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(!hasList) {\n<ul class=\"ecl-pagination__list\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ul>\n} @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n    @if (isModeAuto()){\n        @if(model.hasPreviousPage()){\n            <li eclPaginationItem [isPrevious]=\"true\" (pageClick)=\"onPreviousPage()\"> </li>\n        }\n        @for (page of model.getPages(); track page) {\n            <li eclPaginationItem\n                [label]=\"page.toString()\"\n                [isCurrent]=\"model.getCurrentPage() === page\"\n                (pageClick)=\"onPage(page)\"\n                [pagesCount]=\"model.getPagesCount().toString()\">\n        </li>\n        }\n\n        @if(model.hasNextPage()){\n            <li eclPaginationItem [isNext]=\"true\" (pageClick)=\"onNextPage()\"> </li>\n        }\n    }\n\n    @if(!isModeAuto()) {\n        <ng-content></ng-content>\n    }\n</ng-template>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EclPaginationItemComponent, selector: "ecl-pagination-item, li[eclPaginationItem]", inputs: ["label", "ariaLabel", "pagesCount", "isCurrent", "isNext", "isPrevious", "isTruncated", "routerLink", "queryParams", "queryParamsHandling", "href"], outputs: ["pageClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclPaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-pagination', template: "<ul class=\"ecl-pagination__list\">\n    @if (isModeAuto()){\n        @if(model.hasPreviousPage()){\n            <ecl-pagination-item [isPrevious]=\"true\" (pageClick)=\"onPreviousPage()\"> </ecl-pagination-item>\n        }\n        @for (page of model.getPages(); track page) {\n            <ecl-pagination-item\n                [label]=\"page.toString()\"\n                [isCurrent]=\"model.getCurrentPage() === page\"\n                (pageClick)=\"onPage(page)\"\n                [pagesCount]=\"model.getPagesCount().toString()\"\n            >\n            </ecl-pagination-item>\n        }\n\n        @if(model.hasNextPage()){\n            <ecl-pagination-item [isNext]=\"true\" (pageClick)=\"onNextPage()\"> </ecl-pagination-item>\n        }\n    }\n\n    @if(!isModeAuto()){\n        <ng-content></ng-content>\n    }\n</ul>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'ecl-pagination', template: "@if(!hasList) {\n<ul class=\"ecl-pagination__list\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ul>\n} @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n    @if (isModeAuto()){\n        @if(model.hasPreviousPage()){\n            <li eclPaginationItem [isPrevious]=\"true\" (pageClick)=\"onPreviousPage()\"> </li>\n        }\n        @for (page of model.getPages(); track page) {\n            <li eclPaginationItem\n                [label]=\"page.toString()\"\n                [isCurrent]=\"model.getCurrentPage() === page\"\n                (pageClick)=\"onPage(page)\"\n                [pagesCount]=\"model.getPagesCount().toString()\">\n        </li>\n        }\n\n        @if(model.hasNextPage()){\n            <li eclPaginationItem [isNext]=\"true\" (pageClick)=\"onNextPage()\"> </li>\n        }\n    }\n\n    @if(!isModeAuto()) {\n        <ng-content></ng-content>\n    }\n</ng-template>", styles: [":host{display:block}\n"] }]
         }], propDecorators: { mode: [{
                 type: Input
             }], totalItems: [{
@@ -14147,19 +14267,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
+            }], eclPaginationList: [{
+                type: ContentChild,
+                args: [EclPaginationListDirective]
             }] } });
 
 class EclPaginationComponentModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclPaginationComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: EclPaginationComponentModule, declarations: [EclPaginationComponent, EclPaginationItemComponent], imports: [CommonModule, RouterModule, EclIconComponentModule, EclLinkDirectiveModule, TranslateModule], exports: [EclPaginationComponent, EclPaginationItemComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: EclPaginationComponentModule, declarations: [EclPaginationComponent, EclPaginationItemComponent, EclPaginationListDirective], imports: [CommonModule, RouterModule, EclIconComponentModule, EclLinkDirectiveModule, TranslateModule], exports: [EclPaginationComponent, EclPaginationItemComponent, EclPaginationListDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclPaginationComponentModule, imports: [CommonModule, RouterModule, EclIconComponentModule, EclLinkDirectiveModule, TranslateModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EclPaginationComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, RouterModule, EclIconComponentModule, EclLinkDirectiveModule, TranslateModule],
-                    exports: [EclPaginationComponent, EclPaginationItemComponent],
-                    declarations: [EclPaginationComponent, EclPaginationItemComponent],
+                    exports: [EclPaginationComponent, EclPaginationItemComponent, EclPaginationListDirective],
+                    declarations: [EclPaginationComponent, EclPaginationItemComponent, EclPaginationListDirective],
                 }]
         }] });
 
@@ -17212,5 +17335,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ECLBaseDirective, ECLClickOutsideDirective, ECLFormLabelOptionalDirective, ECLTheme, ECL_DATE_PICKER_VALUE_ACCESSOR, ECL_RATINGFIELD_VALUE_ACCESSOR, ECL_SEARCH_FORM_VALUE_ACCESSOR, ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR, EclAccordionComponent, EclAccordionComponentModule, EclAccordionItemComponent, EclAccordionToggleEvent, EclAllModule, EclAppComponent, EclAppComponentModule, EclAppLanguageDismissEvent, EclBannerComponent, EclBannerComponentModule, EclBannerDescriptionDirective, EclBannerDescriptionLinkDirective, EclBannerDescriptionTextDirective, EclBannerImageDirective, EclBannerPictureDirective, EclBannerTitleDirective, EclBannerTitleLinkDirective, EclBannerTitleTextDirective, EclBannerVideoDirective, EclBaseEvent, EclBlockquoteComponent, EclBlockquoteComponentModule, EclBlockquoteImageDirective, EclBlockquotePictureDirective, EclBreadcrumbComponent, EclBreadcrumbComponentModule, EclBreadcrumbSegmentClickEvent, EclBreadcrumbSegmentComponent, EclButtonComponent, EclButtonComponentModule, EclButtonLabelDirective, EclCardBodyComponent, EclCardComponent, EclCardComponentModule, EclCardImageDirective, EclCardPictureDirective, EclCarouselComponent, EclCarouselComponentModule, EclCarouselItemComponent, EclCategoryFilterComponent, EclCategoryFilterItemComponent, EclCategoryFilterItemSelectEvent, EclCategoryFilterListComponent, EclCategoryFilterModule, EclCheckboxDirective, EclCheckboxHelpComponent, EclCheckboxInputDirective, EclCheckboxLabelComponent, EclCheckboxModule, 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, EclDescriptionListDefinitionComponent, EclDescriptionListDefinitionItemDirective, EclDescriptionListDefinitionListDirective, EclDescriptionListDirective, EclDescriptionListTermDirective, EclDomEvent, EclExpandableComponent, EclExpandableComponentModule, EclExpandableToggleEvent, EclFactFiguresComponent, EclFactFiguresComponentModule, EclFactFiguresDescriptionComponent, EclFactFiguresItemComponent, EclFactFiguresTitleComponent, EclFactFiguresValueComponent, EclFactFiguresViewAllComponent, EclFeaturedComponent, EclFeaturedItemComponent, EclFeaturedItemDescriptionComponent, EclFeaturedItemFooterComponent, EclFeaturedItemFooterLinkDirective, EclFeaturedItemFooterPictureDirective, EclFeaturedItemLinkDirective, EclFeaturedModule, EclFeedbackMessageDirective, EclFeedbackMessageDirectiveModule, EclFileComponent, EclFileComponentModule, EclFileDownloadDirective, EclFileImageDirective, EclFileItemComponent, EclFileItemsComponent, EclFileItemsToggleEvent, EclFilePictureDirective, EclFilePreviewDirective, EclFileTaxonomyComponent, EclFileTitleDirective, EclFileTranslationDownloadDirective, EclFileUploadDirective, EclFileUploadDirectiveModule, EclFileUploadFileSelectedEvent, EclFormGroupComponent, EclFormGroupComponentModule, EclFormLabelComponent, EclFormLabelComponentModule, EclGalleryComponent, EclGalleryComponentModule, EclGalleryFooterComponent, EclGalleryFullScreenEvent, EclGalleryHideEvent, EclGalleryItemClickEvent, EclGalleryItemComponent, EclGalleryItemEvent, EclGalleryMediaDirective, EclGalleryMediaSource, EclGalleryMediaTrack, EclGalleryPictureDirective, EclGalleryPictureImage, EclGalleryPictureSource, EclGalleryShareEvent, EclGalleryShowEvent, EclGalleryThumbnailDirective, EclGalleryToggleItemsEvent, EclHelpBlockDirective, EclHelpBlockDirectiveModule, EclHiddenDirective, EclHiddenModule, EclIconComponent, EclIconComponentModule, EclInpageNavigationComponent, EclInpageNavigationComponentModule, EclInpageNavigationItemClickEvent, EclInpageNavigationItemComponent, EclInpageNavigationSectionEnterEvent, EclLabelDirective, EclLabelDirectiveModule, EclLanguageService, EclLinkDirective, EclLinkDirectiveModule, EclLinkLabelDirective, EclListDirectiveModule, EclListIllustrationComponent, EclListIllustrationComponentModule, EclListIllustrationIconDirective, EclListIllustrationImageDirective, EclListIllustrationItemComponent, EclListIllustrationPictureDirective, EclLoadingIndicatorComponent, EclLoadingIndicatorComponentModule, EclLoadingIndicatorLabelDirective, EclLoadingIndicatorOverlayDirective, EclMediaContainerComponent, EclMediaContainerComponentModule, EclMediaContainerIframeDirective, EclMediaContainerItemAudioDescriptionDirective, EclMediaContainerItemDirective, EclMediaContainerPictureDirective, EclMegaMenuComponent, EclMegaMenuComponentModule, EclMegaMenuContainerDirective, EclMegaMenuFeaturedComponent, EclMegaMenuFeaturedImageDirective, EclMegaMenuFeaturedListDirective, EclMegaMenuFeaturedListItemDirective, EclMegaMenuFeaturedPictureDirective, EclMegaMenuInfoComponent, EclMegaMenuItemComponent, EclMegaMenuListDirective, EclMegaMenuSpacerDirective, EclMegaMenuSubitemComponent, EclMegaMenuSublistDirective, EclMenuComponent, EclMenuComponentModule, EclMenuItemCaretEvent, EclMenuItemComponent, EclMenuItemFocusEvent, EclMenuItemHoverEvent, EclMenuItemHoverOutEvent, EclMenuItemKeydownEvent, EclMenuItemParentFocusEvent, EclMenuItemSelectEvent, EclMenuMegaComponent, EclMenuMegaItemComponent, EclModalBodyComponent, EclModalBodyFixedContentDirective, EclModalCloseDirective, EclModalCloseEvent, EclModalComponent, EclModalComponentModule, EclModalFooterComponent, EclModalHeaderComponent, EclModalOpenEvent, EclModalTriggerDirective, EclMultiselectComponent, EclMultiselectComponentModule, EclMultiselectOptionDirective, EclNavigationListComponent, EclNavigationListComponentModule, EclNavigationListImageComponent, EclNavigationListImageDirective, EclNavigationListItemComponent, EclNavigationListPictureDirective, EclNewsTickerComponent, EclNewsTickerComponentModule, EclNewsTickerIconDirective, EclNewsTickerItemComponent, EclNewsTickerItemEvent, EclNotificationCloseEvent, EclNotificationComponent, EclNotificationComponentModule, EclNotificationTitleDirective, EclOrderedListDirective, EclOrderedListItemDirective, EclPageHeaderBackgroundImageDirective, EclPageHeaderBackgroundPictureDirective, EclPageHeaderComponent, EclPageHeaderComponentModule, EclPageHeaderDescriptionContainerDirective, EclPageHeaderDescriptionDirective, EclPageHeaderDescriptionPictureDirective, EclPageHeaderDescriptionThumbnailDirective, EclPageHeaderInfoDirective, EclPageHeaderMetaDirective, EclPageHeaderMetaItemDirective, EclPageHeaderTitleDirective, EclPaginationComponent, EclPaginationComponentModule, EclPaginationEvent, EclPaginationItemClickEvent, EclPaginationItemComponent, EclPopoverComponent, EclPopoverComponentModule, EclPopoverContentDirective, EclPopoverToggleDirective, EclRadioDirective, EclRadioDirectiveModule, EclRadioHelpComponent, EclRadioInputDirective, EclRadioLabelComponent, EclRangeBubbleComponent, EclRangeDirective, EclRangeDirectiveModule, EclRangeEvent, EclRangeValueComponent, EclRatingChangeEvent, EclRatingFieldComponent, EclRatingFieldComponentModule, EclRtlService, EclSearchFormComponent, EclSearchFormComponentModule, EclSearchFormEvent, EclSelectContainerComponent, EclSelectDirective, EclSelectDirectiveModule, EclSeparatorDirective, EclSeparatorModule, EclSiteFooterColumnDirective, EclSiteFooterComponent, EclSiteFooterComponentModule, EclSiteFooterContentDirective, EclSiteFooterDescriptionDirective, EclSiteFooterFixedContentECComponent, EclSiteFooterFixedContentEUComponent, EclSiteFooterLinkDirective, EclSiteFooterListDirective, EclSiteFooterListItemDirective, EclSiteFooterLogoDirective, EclSiteFooterLogoImageDirective, EclSiteFooterLogoItemDirective, EclSiteFooterLogoLinkDirective, EclSiteFooterLogoListDirective, EclSiteFooterPictureDirective, EclSiteFooterRowDirective, EclSiteFooterSectionDirective, EclSiteFooterTitleDirective, EclSiteFooterTitleLinkDirective, EclSiteHeaderActionComponent, EclSiteHeaderAreaDataService, EclSiteHeaderBannerTopComponent, EclSiteHeaderComponent, EclSiteHeaderComponentModule, EclSiteHeaderCtaDirective, EclSiteHeaderEnvironmentComponent, EclSiteHeaderImageDirective, EclSiteHeaderLanguageClickEvent, EclSiteHeaderLanguageCloseEvent, EclSiteHeaderLanguageComponent, EclSiteHeaderLanguagePopoverComponent, EclSiteHeaderLanguageSelectedEvent, EclSiteHeaderLinkDirective, EclSiteHeaderLoginBoxToggleEvent, EclSiteHeaderLoginComponent, EclSiteHeaderLoginDescriptionDirective, EclSiteHeaderLoginEvent, EclSiteHeaderLoginSeparatorDirective, EclSiteHeaderLogoClickEvent, EclSiteHeaderNotificationComponent, EclSiteHeaderPictureDirective, EclSiteHeaderSearchComponent, EclSiteHeaderSearchEvent, EclSiteHeaderSearchToggleEvent, EclSlideEvent, EclSocialMediaFollowComponent, EclSocialMediaFollowComponentModule, EclSocialMediaFollowItemClickEvent, EclSocialMediaFollowItemComponent, EclSocialMediaFollowLinkDirective, EclSocialMediaShareComponent, EclSocialMediaShareComponentModule, EclSocialMediaShareItemClickEvent, EclSocialMediaShareItemComponent, EclSocialMediaShareLinkDirective, EclSortTableEvent, EclSplashPageComponent, EclSplashPageComponentModule, EclSplashPageLanguageCategoryComponent, EclSplashPageLanguageContainerComponent, EclSplashPageLanguageItemDirective, EclSplashPageLanguageLinkComponent, EclSplashPageLanguageListDirective, EclSplashPageLogoImageDirective, EclSplashPageLogoLinkDirective, EclSplashPagePictureDirective, EclStickyContainerComponent, EclStickyContainerComponentModule, EclTabComponent, EclTabLabelComponent, EclTabMoreComponent, EclTabSelectEvent, EclTableBodyDirective, EclTableCaptionDirective, EclTableCellDirective, EclTableCellGroupDirective, EclTableDirective, EclTableDirectiveModule, EclTableHeadDirective, EclTableHeaderDirective, EclTableResponsiveDirective, EclTableRowDirective, EclTableSortButtonComponent, EclTabsComponent, EclTabsComponentModule, EclTagComponent, EclTagComponentModule, EclTagIconExternalDirective, EclTagRemoveEvent, EclTagSetDirective, EclTagSetItemDirective, EclTextAreaDirective, EclTextAreaDirectiveModule, EclTextInputDirective, EclTextInputDirectiveModule, EclThemeService, EclTimelineComponent, EclTimelineComponentModule, EclTimelineItemComponent, EclTimelineItemLabelDirective, EclTimelineItemTitleDirective, EclTimelineItemToggleEvent, EclTimelineItemTogglerComponent, EclUnorderedListDirective, EclUnorderedListItemDirective, EclUserDeviceService, KeyCode, ShiftDirection, SortOrder, hasNextSiblingWithAttribute, hasPreviousSiblingWithAttribute };
+export { ECLBaseDirective, ECLClickOutsideDirective, ECLFormLabelOptionalDirective, ECLTheme, ECL_DATE_PICKER_VALUE_ACCESSOR, ECL_RATINGFIELD_VALUE_ACCESSOR, ECL_SEARCH_FORM_VALUE_ACCESSOR, ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR, EclAccordionComponent, EclAccordionComponentModule, EclAccordionItemComponent, EclAccordionToggleEvent, EclAllModule, EclAppComponent, EclAppComponentModule, EclAppLanguageDismissEvent, EclBannerComponent, EclBannerComponentModule, EclBannerDescriptionDirective, EclBannerDescriptionLinkDirective, EclBannerDescriptionTextDirective, EclBannerImageDirective, EclBannerPictureDirective, EclBannerTitleDirective, EclBannerTitleLinkDirective, EclBannerTitleTextDirective, EclBannerVideoDirective, EclBaseEvent, EclBlockquoteComponent, EclBlockquoteComponentModule, EclBlockquoteImageDirective, EclBlockquotePictureDirective, EclBreadcrumbComponent, EclBreadcrumbComponentModule, EclBreadcrumbContainerDirective, EclBreadcrumbSegmentClickEvent, EclBreadcrumbSegmentComponent, EclButtonComponent, EclButtonComponentModule, EclButtonLabelDirective, EclCardBodyComponent, EclCardComponent, EclCardComponentModule, EclCardImageDirective, EclCardPictureDirective, EclCarouselComponent, EclCarouselComponentModule, EclCarouselItemComponent, EclCategoryFilterComponent, EclCategoryFilterItemComponent, EclCategoryFilterItemSelectEvent, EclCategoryFilterListComponent, EclCategoryFilterModule, EclCheckboxDirective, EclCheckboxHelpComponent, EclCheckboxInputDirective, EclCheckboxLabelComponent, EclCheckboxModule, 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, EclDescriptionListDefinitionComponent, EclDescriptionListDefinitionItemDirective, EclDescriptionListDefinitionListDirective, EclDescriptionListDirective, EclDescriptionListTermDirective, EclDomEvent, EclExpandableComponent, EclExpandableComponentModule, EclExpandableToggleEvent, EclFactFiguresComponent, EclFactFiguresComponentModule, EclFactFiguresDescriptionComponent, EclFactFiguresItemComponent, EclFactFiguresTitleComponent, EclFactFiguresValueComponent, EclFactFiguresViewAllComponent, EclFeaturedComponent, EclFeaturedItemComponent, EclFeaturedItemDescriptionComponent, EclFeaturedItemFooterComponent, EclFeaturedItemFooterLinkDirective, EclFeaturedItemFooterPictureDirective, EclFeaturedItemLinkDirective, EclFeaturedModule, EclFeedbackMessageDirective, EclFeedbackMessageDirectiveModule, EclFileComponent, EclFileComponentModule, EclFileDownloadDirective, EclFileImageDirective, EclFileItemComponent, EclFileItemsComponent, EclFileItemsToggleEvent, EclFilePictureDirective, EclFilePreviewDirective, EclFileTaxonomyComponent, EclFileTitleDirective, EclFileTranslationDownloadDirective, EclFileUploadDirective, EclFileUploadDirectiveModule, EclFileUploadFileSelectedEvent, EclFormGroupComponent, EclFormGroupComponentModule, EclFormLabelComponent, EclFormLabelComponentModule, EclGalleryComponent, EclGalleryComponentModule, EclGalleryFooterComponent, EclGalleryFullScreenEvent, EclGalleryHideEvent, EclGalleryItemClickEvent, EclGalleryItemComponent, EclGalleryItemEvent, EclGalleryMediaDirective, EclGalleryMediaSource, EclGalleryMediaTrack, EclGalleryPictureDirective, EclGalleryPictureImage, EclGalleryPictureSource, EclGalleryShareEvent, EclGalleryShowEvent, EclGalleryThumbnailDirective, EclGalleryToggleItemsEvent, EclHelpBlockDirective, EclHelpBlockDirectiveModule, EclHiddenDirective, EclHiddenModule, EclIconComponent, EclIconComponentModule, EclInpageNavigationComponent, EclInpageNavigationComponentModule, EclInpageNavigationItemClickEvent, EclInpageNavigationItemComponent, EclInpageNavigationListDirective, EclInpageNavigationSectionEnterEvent, EclInpageNavigationService, EclLabelDirective, EclLabelDirectiveModule, EclLanguageService, EclLinkDirective, EclLinkDirectiveModule, EclLinkLabelDirective, EclListDirectiveModule, EclListIllustrationComponent, EclListIllustrationComponentModule, EclListIllustrationIconDirective, EclListIllustrationImageDirective, EclListIllustrationItemComponent, EclListIllustrationPictureDirective, EclLoadingIndicatorComponent, EclLoadingIndicatorComponentModule, EclLoadingIndicatorLabelDirective, EclLoadingIndicatorOverlayDirective, EclMediaContainerComponent, EclMediaContainerComponentModule, EclMediaContainerIframeDirective, EclMediaContainerItemAudioDescriptionDirective, EclMediaContainerItemDirective, EclMediaContainerPictureDirective, EclMegaMenuComponent, EclMegaMenuComponentModule, EclMegaMenuContainerDirective, EclMegaMenuFeaturedComponent, EclMegaMenuFeaturedImageDirective, EclMegaMenuFeaturedListDirective, EclMegaMenuFeaturedListItemDirective, EclMegaMenuFeaturedPictureDirective, EclMegaMenuInfoComponent, EclMegaMenuItemComponent, EclMegaMenuListDirective, EclMegaMenuSpacerDirective, EclMegaMenuSubitemComponent, EclMegaMenuSublistDirective, EclMenuComponent, EclMenuComponentModule, EclMenuItemCaretEvent, EclMenuItemComponent, EclMenuItemFocusEvent, EclMenuItemHoverEvent, EclMenuItemHoverOutEvent, EclMenuItemKeydownEvent, EclMenuItemParentFocusEvent, EclMenuItemSelectEvent, EclMenuMegaComponent, EclMenuMegaItemComponent, EclModalBodyComponent, EclModalBodyFixedContentDirective, EclModalCloseDirective, EclModalCloseEvent, EclModalComponent, EclModalComponentModule, EclModalFooterComponent, EclModalHeaderComponent, EclModalOpenEvent, EclModalTriggerDirective, EclMultiselectComponent, EclMultiselectComponentModule, EclMultiselectOptionDirective, EclNavigationListComponent, EclNavigationListComponentModule, EclNavigationListImageComponent, EclNavigationListImageDirective, EclNavigationListItemComponent, EclNavigationListPictureDirective, EclNewsTickerComponent, EclNewsTickerComponentModule, EclNewsTickerIconDirective, EclNewsTickerItemComponent, EclNewsTickerItemEvent, EclNotificationCloseEvent, EclNotificationComponent, EclNotificationComponentModule, EclNotificationTitleDirective, EclOrderedListDirective, EclOrderedListItemDirective, EclPageHeaderBackgroundImageDirective, EclPageHeaderBackgroundPictureDirective, EclPageHeaderComponent, EclPageHeaderComponentModule, EclPageHeaderDescriptionContainerDirective, EclPageHeaderDescriptionDirective, EclPageHeaderDescriptionPictureDirective, EclPageHeaderDescriptionThumbnailDirective, EclPageHeaderInfoDirective, EclPageHeaderMetaDirective, EclPageHeaderMetaItemDirective, EclPageHeaderTitleDirective, EclPaginationComponent, EclPaginationComponentModule, EclPaginationEvent, EclPaginationItemClickEvent, EclPaginationItemComponent, EclPaginationListDirective, EclPopoverComponent, EclPopoverComponentModule, EclPopoverContentDirective, EclPopoverToggleDirective, EclRadioDirective, EclRadioDirectiveModule, EclRadioHelpComponent, EclRadioInputDirective, EclRadioLabelComponent, EclRangeBubbleComponent, EclRangeDirective, EclRangeDirectiveModule, EclRangeEvent, EclRangeValueComponent, EclRatingChangeEvent, EclRatingFieldComponent, EclRatingFieldComponentModule, EclRtlService, EclSearchFormComponent, EclSearchFormComponentModule, EclSearchFormEvent, EclSelectContainerComponent, EclSelectDirective, EclSelectDirectiveModule, EclSeparatorDirective, EclSeparatorModule, EclSiteFooterColumnDirective, EclSiteFooterComponent, EclSiteFooterComponentModule, EclSiteFooterContentDirective, EclSiteFooterDescriptionDirective, EclSiteFooterFixedContentECComponent, EclSiteFooterFixedContentEUComponent, EclSiteFooterLinkDirective, EclSiteFooterListDirective, EclSiteFooterListItemDirective, EclSiteFooterLogoDirective, EclSiteFooterLogoImageDirective, EclSiteFooterLogoItemDirective, EclSiteFooterLogoLinkDirective, EclSiteFooterLogoListDirective, EclSiteFooterPictureDirective, EclSiteFooterRowDirective, EclSiteFooterSectionDirective, EclSiteFooterTitleDirective, EclSiteFooterTitleLinkDirective, EclSiteHeaderActionComponent, EclSiteHeaderAreaDataService, EclSiteHeaderBannerTopComponent, EclSiteHeaderComponent, EclSiteHeaderComponentModule, EclSiteHeaderCtaDirective, EclSiteHeaderEnvironmentComponent, EclSiteHeaderImageDirective, EclSiteHeaderLanguageClickEvent, EclSiteHeaderLanguageCloseEvent, EclSiteHeaderLanguageComponent, EclSiteHeaderLanguagePopoverComponent, EclSiteHeaderLanguageSelectedEvent, EclSiteHeaderLinkDirective, EclSiteHeaderLoginBoxToggleEvent, EclSiteHeaderLoginComponent, EclSiteHeaderLoginDescriptionDirective, EclSiteHeaderLoginEvent, EclSiteHeaderLoginSeparatorDirective, EclSiteHeaderLogoClickEvent, EclSiteHeaderNotificationComponent, EclSiteHeaderPictureDirective, EclSiteHeaderSearchComponent, EclSiteHeaderSearchEvent, EclSiteHeaderSearchToggleEvent, EclSlideEvent, EclSocialMediaFollowComponent, EclSocialMediaFollowComponentModule, EclSocialMediaFollowItemClickEvent, EclSocialMediaFollowItemComponent, EclSocialMediaFollowLinkDirective, EclSocialMediaShareComponent, EclSocialMediaShareComponentModule, EclSocialMediaShareItemClickEvent, EclSocialMediaShareItemComponent, EclSocialMediaShareLinkDirective, EclSortTableEvent, EclSplashPageComponent, EclSplashPageComponentModule, EclSplashPageLanguageCategoryComponent, EclSplashPageLanguageContainerComponent, EclSplashPageLanguageItemDirective, EclSplashPageLanguageLinkComponent, EclSplashPageLanguageListDirective, EclSplashPageLogoImageDirective, EclSplashPageLogoLinkDirective, EclSplashPagePictureDirective, EclStickyContainerComponent, EclStickyContainerComponentModule, EclTabComponent, EclTabLabelComponent, EclTabMoreComponent, EclTabSelectEvent, EclTableBodyDirective, EclTableCaptionDirective, EclTableCellDirective, EclTableCellGroupDirective, EclTableDirective, EclTableDirectiveModule, EclTableHeadDirective, EclTableHeaderDirective, EclTableResponsiveDirective, EclTableRowDirective, EclTableSortButtonComponent, EclTabsComponent, EclTabsComponentModule, EclTagComponent, EclTagComponentModule, EclTagIconExternalDirective, EclTagRemoveEvent, EclTagSetDirective, EclTagSetItemDirective, EclTextAreaDirective, EclTextAreaDirectiveModule, EclTextInputDirective, EclTextInputDirectiveModule, EclThemeService, EclTimelineComponent, EclTimelineComponentModule, EclTimelineItemComponent, EclTimelineItemLabelDirective, EclTimelineItemTitleDirective, EclTimelineItemToggleEvent, EclTimelineItemTogglerComponent, EclUnorderedListDirective, EclUnorderedListItemDirective, EclUserDeviceService, KeyCode, ShiftDirection, SortOrder, hasNextSiblingWithAttribute, hasPreviousSiblingWithAttribute };
 //# sourceMappingURL=eui-ecl.mjs.map