@eui/ecl 17.3.13 → 17.3.14-snapshot-1736425317830

package/fesm2022/eui-ecl.mjs

@@ -1603,7 +1603,7 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
         });
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclSiteHeaderLanguageComponent, deps: [{ token: EclLanguageService }, { token: EclSiteHeaderComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EclSiteHeaderLanguageComponent, selector: "ecl-site-header-language", inputs: { languageCode: "languageCode", languageCodes: "languageCodes", languageLabel: "languageLabel" }, outputs: { languageClick: "languageClick", languageSelected: "languageSelected" }, host: { listeners: { "eclClickOutside": "onClickOutside()", "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "languagePopoverElement", first: true, predicate: ["languagePopover"], descendants: true, read: ElementRef }, { 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--ghost 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    {{ getLanguageLabel() }}\n</a>\n\n<ecl-site-header-language-popover\n    #languagePopover\n    *ngIf=\"hasLanguageCodes()\"\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    [isFull]=\"isFull\"\n    [rightPosition]=\"rightPosition\"\n    [languageArrowPosition]=\"languageArrowPosition\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (languageClosed)=\"onLanguageClosed($event)\">\n</ecl-site-header-language-popover>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "component", type: EclSiteHeaderLanguagePopoverComponent, selector: "ecl-site-header-language-popover", inputs: ["languageCode", "euLanguages", "nonEuLanguages", "euColumnsCount", "nonEuColumnsCount", "isHidden", "isPushRight", "isStack", "isFull", "rightPosition", "languageArrowPosition"], outputs: ["languageClosed", "languageSelected"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EclSiteHeaderLanguageComponent, selector: "ecl-site-header-language", inputs: { languageCode: "languageCode", languageCodes: "languageCodes", languageLabel: "languageLabel" }, outputs: { languageClick: "languageClick", languageSelected: "languageSelected" }, host: { listeners: { "eclClickOutside": "onClickOutside()", "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "languagePopoverElement", first: true, predicate: ["languagePopover"], descendants: true, read: ElementRef }, { 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--ghost 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    {{ getLanguageLabel() }}\n</a>\n\n<ecl-site-header-language-popover\n    #languagePopover\n    id=\"language-list-overlay\"\n    *ngIf=\"hasLanguageCodes()\"\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    [isFull]=\"isFull\"\n    [rightPosition]=\"rightPosition\"\n    [languageArrowPosition]=\"languageArrowPosition\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (languageClosed)=\"onLanguageClosed($event)\">\n</ecl-site-header-language-popover>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "component", type: EclSiteHeaderLanguagePopoverComponent, selector: "ecl-site-header-language-popover", inputs: ["languageCode", "euLanguages", "nonEuLanguages", "euColumnsCount", "nonEuColumnsCount", "isHidden", "isPushRight", "isStack", "isFull", "rightPosition", "languageArrowPosition"], outputs: ["languageClosed", "languageSelected"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 __decorate([
     coerceElement
@@ -1618,7 +1618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                             directive: ECLClickOutsideDirective,
                             outputs: ['eclClickOutside'],
                         },
-                    ], template: "<a\n    href=\"#\"\n    #languageLink\n    class=\"ecl-button ecl-button--ghost 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    {{ getLanguageLabel() }}\n</a>\n\n<ecl-site-header-language-popover\n    #languagePopover\n    *ngIf=\"hasLanguageCodes()\"\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    [isFull]=\"isFull\"\n    [rightPosition]=\"rightPosition\"\n    [languageArrowPosition]=\"languageArrowPosition\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (languageClosed)=\"onLanguageClosed($event)\">\n</ecl-site-header-language-popover>\n" }]
+                    ], template: "<a\n    href=\"#\"\n    #languageLink\n    class=\"ecl-button ecl-button--ghost 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    {{ getLanguageLabel() }}\n</a>\n\n<ecl-site-header-language-popover\n    #languagePopover\n    id=\"language-list-overlay\"\n    *ngIf=\"hasLanguageCodes()\"\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    [isFull]=\"isFull\"\n    [rightPosition]=\"rightPosition\"\n    [languageArrowPosition]=\"languageArrowPosition\"\n    (languageSelected)=\"onLanguageSelected($event)\"\n    (languageClosed)=\"onLanguageClosed($event)\">\n</ecl-site-header-language-popover>\n" }]
         }], ctorParameters: () => [{ type: EclLanguageService }, { type: EclSiteHeaderComponent }], propDecorators: { languageCode: [{
                 type: Input
             }], languageCodes: [{
@@ -2792,6 +2792,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 class EclBreadcrumbSegmentClickEvent extends EclBaseEvent {
 }
+// TODO: ecl-breadcrumb-segment selector is deprecated and should be removed in v20
 class EclBreadcrumbSegmentComponent extends ECLBaseDirective {
     constructor(el) {
         super();
@@ -2807,6 +2808,9 @@ class EclBreadcrumbSegmentComponent extends ECLBaseDirective {
         this.isCurrentPage = false;
         this.isHidden = null;
         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 [super.getCssClasses('ecl-breadcrumb__segment'), this.isCurrentPage ? 'ecl-breadcrumb__current-page' : ''].join(' ').trim();
@@ -2818,7 +2822,7 @@ class EclBreadcrumbSegmentComponent extends ECLBaseDirective {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclBreadcrumbSegmentComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EclBreadcrumbSegmentComponent, selector: "ecl-breadcrumb-segment", inputs: { routerLink: "routerLink", queryParams: "queryParams", href: "href", queryParamsHandling: "queryParamsHandling", isCurrentPage: "isCurrentPage", isNegative: "isNegative", isHidden: "isHidden" }, outputs: { segmentClick: "segmentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "attr.role": "this.role", "class.ecl-u-d-none": "this.isHidden", "attr.hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a\n    *ngIf=\"!isCurrentPage && href\"\n    eclLink\n    variant=\"standalone\"\n    [isNoVisited]=\"true\"\n    [isNegative]=\"isNegative\"\n    [href]=\"href\"\n    (click)=\"onSegmentClick($event)\"\n    class=\"ecl-breadcrumb__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<a\n    *ngIf=\"!isCurrentPage && !href\"\n    eclLink\n    [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\"\n    [queryParamsHandling]=\"queryParamsHandling\"\n    variant=\"standalone\"\n    [isNoVisited]=\"true\"\n    [isNegative]=\"isNegative\"\n    [href]=\"href\"\n    tabindex\n    (click)=\"onSegmentClick($event)\"\n    class=\"ecl-breadcrumb__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<ng-container *ngIf=\"isCurrentPage\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-container>\n<ecl-icon *ngIf=\"!isCurrentPage\" role=\"presentation\" icon=\"corner-arrow\" size=\"2xs\" class=\"ecl-breadcrumb__icon ecl-icon--rotate-90\">\n</ecl-icon>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EclBreadcrumbSegmentComponent, selector: "ecl-breadcrumb-segment, li[eclBreadcrumbSegment]", inputs: { routerLink: "routerLink", queryParams: "queryParams", href: "href", queryParamsHandling: "queryParamsHandling", isCurrentPage: "isCurrentPage", isNegative: "isNegative", isHidden: "isHidden" }, outputs: { segmentClick: "segmentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "attr.role": "this.role", "class.ecl-u-d-none": "this.isHidden", "attr.hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a\n    *ngIf=\"!isCurrentPage && href\"\n    eclLink\n    variant=\"standalone\"\n    [isNoVisited]=\"true\"\n    [isNegative]=\"isNegative\"\n    [href]=\"href\"\n    (click)=\"onSegmentClick($event)\"\n    class=\"ecl-breadcrumb__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<a\n    *ngIf=\"!isCurrentPage && !href\"\n    eclLink\n    [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\"\n    [queryParamsHandling]=\"queryParamsHandling\"\n    variant=\"standalone\"\n    [isNoVisited]=\"true\"\n    [isNegative]=\"isNegative\"\n    [href]=\"href\"\n    tabindex\n    (click)=\"onSegmentClick($event)\"\n    class=\"ecl-breadcrumb__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<ng-container *ngIf=\"isCurrentPage\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-container>\n<ecl-icon *ngIf=\"!isCurrentPage\" role=\"presentation\" icon=\"corner-arrow\" size=\"2xs\" class=\"ecl-breadcrumb__icon ecl-icon--rotate-90\">\n</ecl-icon>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
     coerceBoolean
@@ -2828,7 +2832,7 @@ __decorate([
 ], EclBreadcrumbSegmentComponent.prototype, "isNegative", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclBreadcrumbSegmentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-breadcrumb-segment', encapsulation: ViewEncapsulation.None, template: "<a\n    *ngIf=\"!isCurrentPage && href\"\n    eclLink\n    variant=\"standalone\"\n    [isNoVisited]=\"true\"\n    [isNegative]=\"isNegative\"\n    [href]=\"href\"\n    (click)=\"onSegmentClick($event)\"\n    class=\"ecl-breadcrumb__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<a\n    *ngIf=\"!isCurrentPage && !href\"\n    eclLink\n    [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\"\n    [queryParamsHandling]=\"queryParamsHandling\"\n    variant=\"standalone\"\n    [isNoVisited]=\"true\"\n    [isNegative]=\"isNegative\"\n    [href]=\"href\"\n    tabindex\n    (click)=\"onSegmentClick($event)\"\n    class=\"ecl-breadcrumb__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<ng-container *ngIf=\"isCurrentPage\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-container>\n<ecl-icon *ngIf=\"!isCurrentPage\" role=\"presentation\" icon=\"corner-arrow\" size=\"2xs\" class=\"ecl-breadcrumb__icon ecl-icon--rotate-90\">\n</ecl-icon>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n" }]
+            args: [{ selector: 'ecl-breadcrumb-segment, li[eclBreadcrumbSegment]', encapsulation: ViewEncapsulation.None, template: "<a\n    *ngIf=\"!isCurrentPage && href\"\n    eclLink\n    variant=\"standalone\"\n    [isNoVisited]=\"true\"\n    [isNegative]=\"isNegative\"\n    [href]=\"href\"\n    (click)=\"onSegmentClick($event)\"\n    class=\"ecl-breadcrumb__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<a\n    *ngIf=\"!isCurrentPage && !href\"\n    eclLink\n    [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\"\n    [queryParamsHandling]=\"queryParamsHandling\"\n    variant=\"standalone\"\n    [isNoVisited]=\"true\"\n    [isNegative]=\"isNegative\"\n    [href]=\"href\"\n    tabindex\n    (click)=\"onSegmentClick($event)\"\n    class=\"ecl-breadcrumb__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<ng-container *ngIf=\"isCurrentPage\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-container>\n<ecl-icon *ngIf=\"!isCurrentPage\" role=\"presentation\" icon=\"corner-arrow\" size=\"2xs\" class=\"ecl-breadcrumb__icon ecl-icon--rotate-90\">\n</ecl-icon>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { tabIndex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
@@ -2862,6 +2866,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ['class']
             }] } });
 
+class EclBreadcrumbContainerDirective extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.hasClass = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclBreadcrumbContainerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: EclBreadcrumbContainerDirective, selector: "[eclBreadcrumbContainer]", host: { properties: { "class.ecl-breadcrumb__container": "this.hasClass" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclBreadcrumbContainerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclBreadcrumbContainer]',
+                }]
+        }], propDecorators: { hasClass: [{
+                type: HostBinding,
+                args: ['class.ecl-breadcrumb__container']
+            }] } });
+
 class EclBreadcrumbComponent extends ECLBaseDirective {
     constructor(el, translate) {
         super();
@@ -2881,18 +2903,23 @@ class EclBreadcrumbComponent extends ECLBaseDirective {
             this.ariaLabel = text;
         });
     }
-    ngAfterViewInit() {
+    ngAfterContentInit() {
         this.truncateBreadcrumb();
     }
     ngOnDestroy() {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
     }
+    get hasContainer() {
+        return !!this.eclBreadcrumbContainer;
+    }
     onEllipsisSegmentClick(evt) {
         this.eclSegments.forEach((segment) => {
             segment.isHidden = null;
         });
-        this.eclEllipsisSegment.isHidden = true;
+        if (this.eclEllipsisSegment) {
+            this.eclEllipsisSegment.isHidden = true;
+        }
     }
     truncateBreadcrumb() {
         setTimeout(() => {
@@ -2938,14 +2965,14 @@ class EclBreadcrumbComponent extends ECLBaseDirective {
         return this.eclSegments.reduce((width, segmentComponent) => width + segmentComponent.el.nativeElement.offsetWidth, 0);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclBreadcrumbComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EclBreadcrumbComponent, selector: "ecl-breadcrumb", inputs: { isNegative: "isNegative" }, host: { properties: { "attr.role": "this.role", "attr.aria-label": "this.ariaLabel", "class.ecl-breadcrumb--negative": "this.isNegative", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclSegments", predicate: i0.forwardRef(() => EclBreadcrumbSegmentComponent) }], viewQueries: [{ propertyName: "eclEllipsisSegment", first: true, predicate: ["ellipsisSegment"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ol class=\"ecl-breadcrumb__container\">\n    <ecl-breadcrumb-segment #ellipsisSegment [isHidden]=\"true\" class=\"ecl-breadcrumb__segment--ellipsis\">\n        <button\n            tabindex=\"-1\"\n            type=\"button\"\n            class=\"ecl-breadcrumb__ellipsis\"\n            aria-label=\"Click to expand\"\n            (click)=\"onEllipsisSegmentClick($event)\">\n            \u2026\n        </button>\n    </ecl-breadcrumb-segment>\n    <ng-content></ng-content>\n</ol>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: EclBreadcrumbSegmentComponent, selector: "ecl-breadcrumb-segment", inputs: ["routerLink", "queryParams", "href", "queryParamsHandling", "isCurrentPage", "isNegative", "isHidden"], outputs: ["segmentClick"] }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EclBreadcrumbComponent, selector: "ecl-breadcrumb", inputs: { isNegative: "isNegative" }, host: { properties: { "attr.role": "this.role", "attr.aria-label": "this.ariaLabel", "class.ecl-breadcrumb--negative": "this.isNegative", "class": "this.cssClasses" } }, 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 }], usesInheritance: true, ngImport: i0, template: "<ol *ngIf=\"!hasContainer\" class=\"ecl-breadcrumb__container\">\n    <li eclBreadcrumbSegment #ellipsisSegment [isHidden]=\"true\" class=\"ecl-breadcrumb__segment--ellipsis\">\n        <button tabindex=\"-1\" type=\"button\" class=\"ecl-breadcrumb__ellipsis\" aria-label=\"Click to expand\"\n            (click)=\"onEllipsisSegmentClick($event)\">\n            \u2026\n        </button>\n    </li>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ol>\n\n<ng-container *ngIf=\"hasContainer\">\n    <li eclBreadcrumbSegment #ellipsisSegment [isHidden]=\"true\" class=\"ecl-breadcrumb__segment--ellipsis\">\n        <button tabindex=\"-1\" type=\"button\" class=\"ecl-breadcrumb__ellipsis\" aria-label=\"Click to expand\"\n            (click)=\"onEllipsisSegmentClick($event)\">\n            \u2026\n        </button>\n    </li>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-container>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EclBreadcrumbSegmentComponent, selector: "ecl-breadcrumb-segment, li[eclBreadcrumbSegment]", inputs: ["routerLink", "queryParams", "href", "queryParamsHandling", "isCurrentPage", "isNegative", "isHidden"], outputs: ["segmentClick"] }] }); }
 }
 __decorate([
     coerceBoolean
 ], EclBreadcrumbComponent.prototype, "isNegative", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclBreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-breadcrumb', template: "<ol class=\"ecl-breadcrumb__container\">\n    <ecl-breadcrumb-segment #ellipsisSegment [isHidden]=\"true\" class=\"ecl-breadcrumb__segment--ellipsis\">\n        <button\n            tabindex=\"-1\"\n            type=\"button\"\n            class=\"ecl-breadcrumb__ellipsis\"\n            aria-label=\"Click to expand\"\n            (click)=\"onEllipsisSegmentClick($event)\">\n            \u2026\n        </button>\n    </ecl-breadcrumb-segment>\n    <ng-content></ng-content>\n</ol>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'ecl-breadcrumb', template: "<ol *ngIf=\"!hasContainer\" class=\"ecl-breadcrumb__container\">\n    <li eclBreadcrumbSegment #ellipsisSegment [isHidden]=\"true\" class=\"ecl-breadcrumb__segment--ellipsis\">\n        <button tabindex=\"-1\" type=\"button\" class=\"ecl-breadcrumb__ellipsis\" aria-label=\"Click to expand\"\n            (click)=\"onEllipsisSegmentClick($event)\">\n            \u2026\n        </button>\n    </li>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ol>\n\n<ng-container *ngIf=\"hasContainer\">\n    <li eclBreadcrumbSegment #ellipsisSegment [isHidden]=\"true\" class=\"ecl-breadcrumb__segment--ellipsis\">\n        <button tabindex=\"-1\" type=\"button\" class=\"ecl-breadcrumb__ellipsis\" aria-label=\"Click to expand\"\n            (click)=\"onEllipsisSegmentClick($event)\">\n            \u2026\n        </button>\n    </li>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-container>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.TranslateService }], propDecorators: { role: [{
                 type: HostBinding,
                 args: ['attr.role']
@@ -2962,16 +2989,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ['ellipsisSegment']
             }], eclSegments: [{
                 type: ContentChildren,
-                args: [forwardRef(() => EclBreadcrumbSegmentComponent)]
+                args: [forwardRef(() => EclBreadcrumbSegmentComponent), { descendants: true }]
+            }], eclBreadcrumbContainer: [{
+                type: ContentChild,
+                args: [EclBreadcrumbContainerDirective]
             }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-const COMPONENTS$n = [EclBreadcrumbComponent, EclBreadcrumbSegmentComponent];
+const COMPONENTS$n = [EclBreadcrumbComponent, EclBreadcrumbSegmentComponent, EclBreadcrumbContainerDirective];
 class EclBreadcrumbComponentModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclBreadcrumbComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: EclBreadcrumbComponentModule, declarations: [EclBreadcrumbComponent, EclBreadcrumbSegmentComponent], imports: [CommonModule, RouterModule, TranslateModule, EclLinkDirectiveModule, EclIconComponentModule], exports: [EclBreadcrumbComponent, EclBreadcrumbSegmentComponent] }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: EclBreadcrumbComponentModule, declarations: [EclBreadcrumbComponent, EclBreadcrumbSegmentComponent, EclBreadcrumbContainerDirective], imports: [CommonModule, RouterModule, TranslateModule, EclLinkDirectiveModule, EclIconComponentModule], exports: [EclBreadcrumbComponent, EclBreadcrumbSegmentComponent, EclBreadcrumbContainerDirective] }); }
     /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclBreadcrumbComponentModule, imports: [CommonModule, RouterModule, TranslateModule, EclLinkDirectiveModule, EclIconComponentModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclBreadcrumbComponentModule, decorators: [{
@@ -6242,11 +6272,15 @@ class EclInpageNavigationItemClickEvent extends EclBaseEvent {
         this.sectionElementId = sectionElementId;
     }
 }
+// TODO: ecl-inpage-navigation-item is deprecated and should be removed in v20
 class EclInpageNavigationItemComponent extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
+    constructor(el) {
+        super();
         this.cmpClass = true;
         this.itemClick = 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);
@@ -6256,13 +6290,13 @@ class EclInpageNavigationItemComponent extends ECLBaseDirective {
     get sectionElement() {
         return document.querySelector(`#${this.sectionId}`);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclInpageNavigationItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EclInpageNavigationItemComponent, selector: "ecl-inpage-navigation-item", inputs: { label: "label", sectionId: "sectionId", isActive: "isActive" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.ecl-inpage-navigation__item": "this.cmpClass", "class.ecl-inpage-navigation__item--active": "this.isActive" } }, usesInheritance: true, ngImport: i0, template: "<a eclLink (click)=\"onItemClick($event)\" variant=\"standalone\" href=\"#\" class=\"ecl-inpage-navigation__link\">\n    {{ label }}\n</a>\n", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclInpageNavigationItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EclInpageNavigationItemComponent, selector: "ecl-inpage-navigation-item, li[eclInpageNavigationItem]", inputs: { label: "label", sectionId: "sectionId", isActive: "isActive" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.ecl-inpage-navigation__item": "this.cmpClass", "class.ecl-inpage-navigation__item--active": "this.isActive" } }, usesInheritance: true, ngImport: i0, template: "<a eclLink (click)=\"onItemClick($event)\" variant=\"standalone\" href=\"#\" class=\"ecl-inpage-navigation__link\">\n    {{ label }}\n</a>\n", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclInpageNavigationItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-inpage-navigation-item', template: "<a eclLink (click)=\"onItemClick($event)\" variant=\"standalone\" href=\"#\" class=\"ecl-inpage-navigation__link\">\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)\" variant=\"standalone\" href=\"#\" class=\"ecl-inpage-navigation__link\">\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']
             }], label: [{
@@ -6360,6 +6394,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }] });
 
+class EclInpageNavigationService {
+    constructor() {
+        this.eclInpageNavigationExpanded = new Subject();
+        this.eclInpageNavigationExpanded$ = this.eclInpageNavigationExpanded.asObservable();
+    }
+    eclInpageNavigationToggle(isExpanded) {
+        this.eclInpageNavigationExpanded.next(isExpanded);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclInpageNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclInpageNavigationService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclInpageNavigationListDirective, deps: [{ token: EclInpageNavigationService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", 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: "17.3.12", 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();
@@ -6367,8 +6449,9 @@ class EclInpageNavigationSectionEnterEvent extends EclBaseEvent {
     }
 }
 class EclInpageNavigationComponent extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
+    constructor(eclInpageNavigationService) {
+        super();
+        this.eclInpageNavigationService = eclInpageNavigationService;
         this.sectionEnter = new EventEmitter();
         this.isButtonExpanded = false;
         this.destroy$ = new Subject();
@@ -6376,6 +6459,9 @@ class EclInpageNavigationComponent extends ECLBaseDirective {
     get currentNavigationLinkItem() {
         return this.eclNavigationLinkItems.find((item) => item.sectionElement === this.currentSectionElement);
     }
+    get hasNavigationList() {
+        return !!this.eclNavigationList;
+    }
     ngAfterContentInit() {
         this.handleNavigationItemsScroll();
         this.handleNavigationItemsClick();
@@ -6386,6 +6472,7 @@ class EclInpageNavigationComponent extends ECLBaseDirective {
     }
     onExpandButtonClick(evt) {
         this.isButtonExpanded = !this.isButtonExpanded;
+        this.eclInpageNavigationService.eclInpageNavigationToggle(this.isButtonExpanded);
     }
     handleNavigationItemsScroll() {
         const scrollableContainer = window;
@@ -6405,6 +6492,7 @@ class EclInpageNavigationComponent extends ECLBaseDirective {
                     item.sectionElement.scrollIntoView();
                 }
                 this.isButtonExpanded = false;
+                this.eclInpageNavigationService.eclInpageNavigationToggle(this.isButtonExpanded);
             });
         });
     }
@@ -6444,13 +6532,13 @@ class EclInpageNavigationComponent extends ECLBaseDirective {
     hasScrollHitBottom() {
         return window.pageYOffset + window.innerHeight === document.documentElement.scrollHeight;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclInpageNavigationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EclInpageNavigationComponent, selector: "ecl-inpage-navigation", inputs: { eclTitle: "eclTitle", marginTop: "marginTop", marginBottom: "marginBottom" }, outputs: { sectionEnter: "sectionEnter" }, queries: [{ propertyName: "eclNavigationLinkItems", predicate: EclInpageNavigationItemComponent }], 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]=\"currentSectionElement\">\n        <div 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            <button\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($event)\">\n                <span class=\"ecl-inpage-navigation__trigger-current\">\n                    {{ currentNavigationLinkItem?.label }}\n                </span>\n                <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-180\" class=\"ecl-inpage-navigation__trigger-icon\"> </ecl-icon>\n            </button>\n            <ul\n                id=\"ecl-inpage-navigation-default-list\"\n                class=\"ecl-inpage-navigation__list\"\n                [class.ecl-inpage-navigation__list--visible]=\"isButtonExpanded\"\n                [attr.aria-expanded]=\"isButtonExpanded\"\n                aria-labelledby=\"ecl-inpage-navigation-trigger\">\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", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclInpageNavigationComponent, deps: [{ token: EclInpageNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }], usesInheritance: true, ngImport: i0, template: "<ecl-sticky-container [marginTop]=\"marginTop\" [marginBottom]=\"marginBottom\">\n    <nav aria-labelledby=\"ecl-inpage-navigation-default\" class=\"ecl-inpage-navigation\"\n        [class.ecl-inpage-navigation--visible]=\"currentSectionElement\">\n        <div 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            <button id=\"ecl-inpage-navigation-default-trigger\" type=\"button\" class=\"ecl-inpage-navigation__trigger\"\n                aria-controls=\"ecl-inpage-navigation-list\" [attr.aria-expanded]=\"isButtonExpanded\"\n                (click)=\"onExpandButtonClick($event)\">\n                <span class=\"ecl-inpage-navigation__trigger-current\">\n                    {{ currentNavigationLinkItem?.label }}\n                </span>\n                <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-180\"\n                    class=\"ecl-inpage-navigation__trigger-icon\"> </ecl-icon>\n            </button>\n            <ul *ngIf=\"!hasNavigationList\" id=\"ecl-inpage-navigation-default-list\" class=\"ecl-inpage-navigation__list\"\n                [class.ecl-inpage-navigation__list--visible]=\"isButtonExpanded\"\n                [attr.aria-expanded]=\"isButtonExpanded\">\n                <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n            </ul>\n            <ng-container *ngIf=\"hasNavigationList\">\n                <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n            </ng-container>\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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]=\"currentSectionElement\">\n        <div 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            <button\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($event)\">\n                <span class=\"ecl-inpage-navigation__trigger-current\">\n                    {{ currentNavigationLinkItem?.label }}\n                </span>\n                <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-180\" class=\"ecl-inpage-navigation__trigger-icon\"> </ecl-icon>\n            </button>\n            <ul\n                id=\"ecl-inpage-navigation-default-list\"\n                class=\"ecl-inpage-navigation__list\"\n                [class.ecl-inpage-navigation__list--visible]=\"isButtonExpanded\"\n                [attr.aria-expanded]=\"isButtonExpanded\"\n                aria-labelledby=\"ecl-inpage-navigation-trigger\">\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"] }]
-        }], propDecorators: { eclTitle: [{
+            args: [{ selector: 'ecl-inpage-navigation', template: "<ecl-sticky-container [marginTop]=\"marginTop\" [marginBottom]=\"marginBottom\">\n    <nav aria-labelledby=\"ecl-inpage-navigation-default\" class=\"ecl-inpage-navigation\"\n        [class.ecl-inpage-navigation--visible]=\"currentSectionElement\">\n        <div 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            <button id=\"ecl-inpage-navigation-default-trigger\" type=\"button\" class=\"ecl-inpage-navigation__trigger\"\n                aria-controls=\"ecl-inpage-navigation-list\" [attr.aria-expanded]=\"isButtonExpanded\"\n                (click)=\"onExpandButtonClick($event)\">\n                <span class=\"ecl-inpage-navigation__trigger-current\">\n                    {{ currentNavigationLinkItem?.label }}\n                </span>\n                <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-180\"\n                    class=\"ecl-inpage-navigation__trigger-icon\"> </ecl-icon>\n            </button>\n            <ul *ngIf=\"!hasNavigationList\" id=\"ecl-inpage-navigation-default-list\" class=\"ecl-inpage-navigation__list\"\n                [class.ecl-inpage-navigation__list--visible]=\"isButtonExpanded\"\n                [attr.aria-expanded]=\"isButtonExpanded\">\n                <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n            </ul>\n            <ng-container *ngIf=\"hasNavigationList\">\n                <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n            </ng-container>\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: EclInpageNavigationService }], propDecorators: { eclTitle: [{
                 type: Input
             }], marginTop: [{
                 type: Input
@@ -6460,20 +6548,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }], eclNavigationLinkItems: [{
                 type: ContentChildren,
-                args: [EclInpageNavigationItemComponent]
+                args: [EclInpageNavigationItemComponent, { descendants: true }]
+            }], eclNavigationList: [{
+                type: ContentChild,
+                args: [EclInpageNavigationListDirective]
             }] } });
 
 class EclInpageNavigationComponentModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclInpageNavigationComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: EclInpageNavigationComponentModule, declarations: [EclInpageNavigationComponent, EclInpageNavigationItemComponent], imports: [CommonModule, TranslateModule, EclStickyContainerComponentModule, EclLinkDirectiveModule, EclIconComponentModule], exports: [EclInpageNavigationComponent, EclInpageNavigationItemComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclInpageNavigationComponentModule, imports: [CommonModule, TranslateModule, EclStickyContainerComponentModule, EclLinkDirectiveModule, EclIconComponentModule] }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: EclInpageNavigationComponentModule, declarations: [EclInpageNavigationComponent, EclInpageNavigationItemComponent, EclInpageNavigationListDirective], imports: [CommonModule, TranslateModule, EclStickyContainerComponentModule, EclLinkDirectiveModule, EclIconComponentModule], exports: [EclInpageNavigationComponent, EclInpageNavigationItemComponent, EclInpageNavigationListDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclInpageNavigationComponentModule, providers: [EclInpageNavigationService], imports: [CommonModule, TranslateModule, EclStickyContainerComponentModule, EclLinkDirectiveModule, EclIconComponentModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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],
                 }]
         }] });
 
@@ -10402,18 +10494,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }] });
 
-class EclPaginationItemClickEvent extends EclBaseEvent {
-}
-class EclPaginationItemComponent extends ECLBaseDirective {
+class EclPaginationListDirective extends ECLBaseDirective {
     constructor() {
         super(...arguments);
-        this.role = 'listitem';
-        // 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;
     }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclPaginationListDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: EclPaginationListDirective, selector: "[eclPaginationList]", host: { properties: { "class.ecl-pagination__list": "this.hasClass" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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'),
@@ -10424,6 +10526,19 @@ class EclPaginationItemComponent extends ECLBaseDirective {
             .join(' ')
             .trim();
     }
+    constructor(el) {
+        super();
+        this.el = el;
+        this.role = 'listitem';
+        // 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.');
+        }
+    }
     onPageClick(evt) {
         this.pageClick.next(new EclPaginationItemClickEvent());
         if (!this.href) {
@@ -10453,8 +10568,8 @@ class EclPaginationItemComponent extends ECLBaseDirective {
         }
         return key;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclPaginationItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EclPaginationItemComponent, selector: "ecl-pagination-item", inputs: { label: "label", ariaLabel: "ariaLabel", isCurrent: "isCurrent", isNext: "isNext", isPrevious: "isPrevious", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href" }, outputs: { pageClick: "pageClick" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, usesInheritance: true, ngImport: i0, template: "@if (!isCurrent) {\n<a *ngIf=\"routerLink\" eclLink (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\" tabindex=\"{{tabindex}}\">\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<a *ngIf=\"!routerLink\" eclLink (click)=\"onPageClick($event)\" variant=\"standalone\"\n    attr.aria-label=\"{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}\" [attr.href]=\"href\"\n    class=\"ecl-pagination__link\" tabindex=\"{{tabindex}}\">\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@else {\n<span class=\"ecl-pagination__text ecl-pagination__text--summary\" aria-current=\"true\">\n    {{ label }}\n</span>\n<span class=\"ecl-pagination__text ecl-pagination__text--full\" aria-current=\"true\">\n    {{ 'ecl.pagination.PAGE' | translate: { pageNumber: label } }}\n</span>\n}", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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", "isInverted", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclPaginationItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EclPaginationItemComponent, selector: "ecl-pagination-item, li[eclPaginationItem]", inputs: { label: "label", ariaLabel: "ariaLabel", isCurrent: "isCurrent", isNext: "isNext", isPrevious: "isPrevious", routerLink: "routerLink", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", href: "href" }, outputs: { pageClick: "pageClick" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, usesInheritance: true, ngImport: i0, template: "@if (!isCurrent) {\n<a *ngIf=\"routerLink\" eclLink (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\" tabindex=\"{{tabindex}}\">\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<a *ngIf=\"!routerLink\" eclLink (click)=\"onPageClick($event)\" variant=\"standalone\"\n    attr.aria-label=\"{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}\" [attr.href]=\"href\"\n    class=\"ecl-pagination__link\" tabindex=\"{{tabindex}}\">\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@else {\n<span class=\"ecl-pagination__text ecl-pagination__text--summary\" aria-current=\"true\">\n    {{ label }}\n</span>\n<span class=\"ecl-pagination__text ecl-pagination__text--full\" aria-current=\"true\">\n    {{ 'ecl.pagination.PAGE' | translate: { pageNumber: label } }}\n</span>\n}", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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", "isInverted", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
     coerceBoolean
@@ -10467,8 +10582,8 @@ __decorate([
 ], EclPaginationItemComponent.prototype, "isPrevious", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclPaginationItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-pagination-item', encapsulation: ViewEncapsulation.None, template: "@if (!isCurrent) {\n<a *ngIf=\"routerLink\" eclLink (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\" tabindex=\"{{tabindex}}\">\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<a *ngIf=\"!routerLink\" eclLink (click)=\"onPageClick($event)\" variant=\"standalone\"\n    attr.aria-label=\"{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}\" [attr.href]=\"href\"\n    class=\"ecl-pagination__link\" tabindex=\"{{tabindex}}\">\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@else {\n<span class=\"ecl-pagination__text ecl-pagination__text--summary\" aria-current=\"true\">\n    {{ label }}\n</span>\n<span class=\"ecl-pagination__text ecl-pagination__text--full\" aria-current=\"true\">\n    {{ 'ecl.pagination.PAGE' | translate: { pageNumber: label } }}\n</span>\n}" }]
-        }], propDecorators: { cssClasses: [{
+            args: [{ selector: 'ecl-pagination-item, li[eclPaginationItem]', encapsulation: ViewEncapsulation.None, template: "@if (!isCurrent) {\n<a *ngIf=\"routerLink\" eclLink (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\" tabindex=\"{{tabindex}}\">\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<a *ngIf=\"!routerLink\" eclLink (click)=\"onPageClick($event)\" variant=\"standalone\"\n    attr.aria-label=\"{{ ariaLabel || geti18nPageAriaLabelKey() | translate: { pageNumber: label } }}\" [attr.href]=\"href\"\n    class=\"ecl-pagination__link\" tabindex=\"{{tabindex}}\">\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@else {\n<span class=\"ecl-pagination__text ecl-pagination__text--summary\" aria-current=\"true\">\n    {{ label }}\n</span>\n<span class=\"ecl-pagination__text ecl-pagination__text--full\" aria-current=\"true\">\n    {{ 'ecl.pagination.PAGE' | translate: { pageNumber: label } }}\n</span>\n}" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }], role: [{
@@ -10538,6 +10653,9 @@ class EclPaginationComponent extends ECLBaseDirective {
             });
         }
     }
+    get hasList() {
+        return !!this.eclPaginationList;
+    }
     onPreviousPage() {
         this.model.goToPreviousPage();
         this.firePageEvent();
@@ -10558,7 +10676,7 @@ class EclPaginationComponent extends ECLBaseDirective {
         this.page.next(evt);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclPaginationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EclPaginationComponent, selector: "ecl-pagination", inputs: { mode: "mode", totalItems: "totalItems", pageSize: "pageSize", currentPage: "currentPage", pageWindowSize: "pageWindowSize" }, 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    <ng-container *ngIf=\"isModeAuto()\">\n        <ecl-pagination-item *ngIf=\"model.hasPreviousPage()\" [isPrevious]=\"true\" (pageClick)=\"onPreviousPage()\"> </ecl-pagination-item>\n\n        <ecl-pagination-item\n            *ngFor=\"let page of model.getPages()\"\n            [label]=\"page.toString()\"\n            [isCurrent]=\"model.getCurrentPage() === page\"\n            (pageClick)=\"onPage(page)\">\n        </ecl-pagination-item>\n\n        <ecl-pagination-item *ngIf=\"model.hasNextPage()\" [isNext]=\"true\" (pageClick)=\"onNextPage()\"> </ecl-pagination-item>\n    </ng-container>\n\n    <ng-container *ngIf=\"!isModeAuto()\">\n        <ng-content></ng-content>\n    </ng-container>\n</ul>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclPaginationItemComponent, selector: "ecl-pagination-item", inputs: ["label", "ariaLabel", "isCurrent", "isNext", "isPrevious", "routerLink", "queryParams", "queryParamsHandling", "href"], outputs: ["pageClick"] }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EclPaginationComponent, selector: "ecl-pagination", inputs: { mode: "mode", totalItems: "totalItems", pageSize: "pageSize", currentPage: "currentPage", pageWindowSize: "pageWindowSize" }, 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: "<ul *ngIf=\"!hasList\" class=\"ecl-pagination__list\">\n    <ng-container *ngIf=\"isModeAuto()\">\n        <li eclPaginationItem *ngIf=\"model.hasPreviousPage()\" [isPrevious]=\"true\" (pageClick)=\"onPreviousPage()\"> </li>\n\n        <li eclPaginationItem\n            *ngFor=\"let page of model.getPages()\"\n            [label]=\"page.toString()\"\n            [isCurrent]=\"model.getCurrentPage() === page\"\n            (pageClick)=\"onPage(page)\">\n        </li>\n\n        <li eclPaginationItem *ngIf=\"model.hasNextPage()\" [isNext]=\"true\" (pageClick)=\"onNextPage()\"> </li>\n    </ng-container>\n\n    <ng-container *ngIf=\"!isModeAuto()\">\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </ng-container>\n</ul>\n\n<ng-container *ngIf=\"hasList\">\n    <ng-container *ngIf=\"isModeAuto()\">\n        <li eclPaginationItem *ngIf=\"model.hasPreviousPage()\" [isPrevious]=\"true\" (pageClick)=\"onPreviousPage()\"> </li>\n\n        <li eclPaginationItem\n            *ngFor=\"let page of model.getPages()\"\n            [label]=\"page.toString()\"\n            [isCurrent]=\"model.getCurrentPage() === page\"\n            (pageClick)=\"onPage(page)\">\n        </li>\n\n        <li eclPaginationItem *ngIf=\"model.hasNextPage()\" [isNext]=\"true\" (pageClick)=\"onNextPage()\"> </li>\n    </ng-container>\n\n    <ng-container *ngIf=\"!isModeAuto()\">\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </ng-container>\n</ng-container>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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", "isCurrent", "isNext", "isPrevious", "routerLink", "queryParams", "queryParamsHandling", "href"], outputs: ["pageClick"] }] }); }
 }
 __decorate([
     coerceNumber
@@ -10574,7 +10692,7 @@ __decorate([
 ], EclPaginationComponent.prototype, "pageWindowSize", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclPaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-pagination', template: "<ul class=\"ecl-pagination__list\">\n    <ng-container *ngIf=\"isModeAuto()\">\n        <ecl-pagination-item *ngIf=\"model.hasPreviousPage()\" [isPrevious]=\"true\" (pageClick)=\"onPreviousPage()\"> </ecl-pagination-item>\n\n        <ecl-pagination-item\n            *ngFor=\"let page of model.getPages()\"\n            [label]=\"page.toString()\"\n            [isCurrent]=\"model.getCurrentPage() === page\"\n            (pageClick)=\"onPage(page)\">\n        </ecl-pagination-item>\n\n        <ecl-pagination-item *ngIf=\"model.hasNextPage()\" [isNext]=\"true\" (pageClick)=\"onNextPage()\"> </ecl-pagination-item>\n    </ng-container>\n\n    <ng-container *ngIf=\"!isModeAuto()\">\n        <ng-content></ng-content>\n    </ng-container>\n</ul>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'ecl-pagination', template: "<ul *ngIf=\"!hasList\" class=\"ecl-pagination__list\">\n    <ng-container *ngIf=\"isModeAuto()\">\n        <li eclPaginationItem *ngIf=\"model.hasPreviousPage()\" [isPrevious]=\"true\" (pageClick)=\"onPreviousPage()\"> </li>\n\n        <li eclPaginationItem\n            *ngFor=\"let page of model.getPages()\"\n            [label]=\"page.toString()\"\n            [isCurrent]=\"model.getCurrentPage() === page\"\n            (pageClick)=\"onPage(page)\">\n        </li>\n\n        <li eclPaginationItem *ngIf=\"model.hasNextPage()\" [isNext]=\"true\" (pageClick)=\"onNextPage()\"> </li>\n    </ng-container>\n\n    <ng-container *ngIf=\"!isModeAuto()\">\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </ng-container>\n</ul>\n\n<ng-container *ngIf=\"hasList\">\n    <ng-container *ngIf=\"isModeAuto()\">\n        <li eclPaginationItem *ngIf=\"model.hasPreviousPage()\" [isPrevious]=\"true\" (pageClick)=\"onPreviousPage()\"> </li>\n\n        <li eclPaginationItem\n            *ngFor=\"let page of model.getPages()\"\n            [label]=\"page.toString()\"\n            [isCurrent]=\"model.getCurrentPage() === page\"\n            (pageClick)=\"onPage(page)\">\n        </li>\n\n        <li eclPaginationItem *ngIf=\"model.hasNextPage()\" [isNext]=\"true\" (pageClick)=\"onNextPage()\"> </li>\n    </ng-container>\n\n    <ng-container *ngIf=\"!isModeAuto()\">\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </ng-container>\n</ng-container>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", styles: [":host{display:block}\n"] }]
         }], propDecorators: { mode: [{
                 type: Input
             }], totalItems: [{
@@ -10593,19 +10711,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
+            }], eclPaginationList: [{
+                type: ContentChild,
+                args: [EclPaginationListDirective]
             }] } });
 
 class EclPaginationComponentModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclPaginationComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: EclPaginationComponentModule, declarations: [EclPaginationComponent, EclPaginationItemComponent], imports: [CommonModule, RouterModule, EclIconComponentModule, EclLinkDirectiveModule, TranslateModule], exports: [EclPaginationComponent, EclPaginationItemComponent] }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: EclPaginationComponentModule, declarations: [EclPaginationComponent, EclPaginationItemComponent, EclPaginationListDirective], imports: [CommonModule, RouterModule, EclIconComponentModule, EclLinkDirectiveModule, TranslateModule], exports: [EclPaginationComponent, EclPaginationItemComponent, EclPaginationListDirective] }); }
     /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EclPaginationComponentModule, imports: [CommonModule, RouterModule, EclIconComponentModule, EclLinkDirectiveModule, TranslateModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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],
                 }]
         }] });
 
@@ -13782,5 +13903,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ECLClickOutsideDirective, 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, EclBannerCreditDirective, EclBannerDescriptionDirective, EclBannerDescriptionTextDirective, EclBannerImageDirective, EclBannerPictureDirective, EclBannerTitleDirective, EclBannerTitleTextDirective, EclBaseEvent, EclBlockquoteComponent, EclBlockquoteComponentModule, EclBlockquoteImageDirective, EclBlockquotePictureDirective, EclBreadcrumbComponent, EclBreadcrumbComponentModule, EclBreadcrumbSegmentClickEvent, EclBreadcrumbSegmentComponent, EclButtonComponent, EclButtonComponentModule, EclButtonLabelDirective, EclCardBodyComponent, EclCardComponent, EclCardComponentModule, EclCardImageComponent, 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, EclDescriptionListDirective, EclDescriptionListTermDirective, EclDomEvent, EclExpandableComponent, EclExpandableComponentModule, EclExpandableToggleEvent, EclFactFiguresComponent, EclFactFiguresComponentModule, EclFactFiguresDescriptionComponent, EclFactFiguresItemComponent, EclFactFiguresTitleComponent, EclFactFiguresValueComponent, EclFactFiguresViewAllComponent, EclFeaturedComponent, EclFeaturedItemComponent, EclFeaturedItemDescriptionComponent, EclFeaturedItemLinkDirective, EclFeaturedModule, EclFeedbackMessageDirective, EclFeedbackMessageDirectiveModule, EclFileComponent, EclFileComponentModule, EclFileDownloadDirective, EclFileDownloadEvent, EclFileImageDirective, EclFileItemComponent, EclFileItemsComponent, EclFileItemsToggleEvent, EclFilePictureDirective, EclFileTaxonomyComponent, EclFileUploadDirective, EclFileUploadDirectiveModule, EclFileUploadFileSelectedEvent, EclFormGroupComponent, EclFormGroupComponentModule, EclFormLabelComponent, EclFormLabelComponentModule, EclGalleryComponent, EclGalleryComponentModule, EclGalleryDownloadEvent, EclGalleryFooterComponent, EclGalleryFullScreenEvent, EclGalleryHideEvent, EclGalleryItemClickEvent, EclGalleryItemComponent, EclGalleryItemEvent, EclGalleryMediaDirective, EclGalleryMediaSource, EclGalleryMediaTrack, EclGalleryPictureDirective, EclGalleryShareEvent, EclGalleryShowEvent, EclGalleryToggleItemsEvent, EclHelpBlockDirective, EclHelpBlockDirectiveModule, EclHiddenDirective, EclHiddenModule, EclIconComponent, EclIconComponentModule, EclInpageNavigationComponent, EclInpageNavigationComponentModule, EclInpageNavigationItemClickEvent, EclInpageNavigationItemComponent, EclInpageNavigationSectionEnterEvent, EclLabelDirective, EclLabelDirectiveModule, EclLanguageService, EclLinkDirective, EclLinkDirectiveModule, EclLinkLabelDirective, EclListDirectiveModule, EclListIllustrationComponent, EclListIllustrationComponentModule, EclListIllustrationIconDirective, EclListIllustrationImageComponent, EclListIllustrationImageDirective, EclListIllustrationItemComponent, EclListIllustrationPictureDirective, EclMediaContainerComponent, EclMediaContainerComponentModule, EclMediaContainerIframeDirective, EclMediaContainerItemDirective, EclMediaContainerPictureDirective, EclMenuComponent, EclMenuComponentModule, EclMenuItemCaretEvent, EclMenuItemComponent, EclMenuItemFocusEvent, EclMenuItemHoverEvent, EclMenuItemHoverOutEvent, EclMenuItemKeydownEvent, EclMenuItemParentFocusEvent, EclMenuItemSelectEvent, EclMenuMegaComponent, EclMenuMegaItemComponent, EclMessageCloseEvent, EclMessageComponent, EclMessageComponentModule, EclMessageTitleDirective, EclModalBodyComponent, EclModalBodyFixedContentDirective, EclModalCloseDirective, EclModalCloseEvent, EclModalComponent, EclModalComponentModule, EclModalFooterComponent, EclModalHeaderComponent, EclModalOpenEvent, EclModalTriggerDirective, EclMultiselectComponent, EclMultiselectComponentModule, EclMultiselectOptionDirective, EclNavigationListComponent, EclNavigationListComponentModule, EclNavigationListImageComponent, EclNavigationListImageDirective, EclNavigationListItemComponent, EclNavigationListPictureDirective, EclNewsTickerComponent, EclNewsTickerComponentModule, EclNewsTickerItemComponent, EclNewsTickerItemEvent, EclOrderedListDirective, EclOrderedListItemDirective, EclPageHeaderBackgroundImageDirective, EclPageHeaderBackgroundPictureDirective, EclPageHeaderComponent, EclPageHeaderComponentModule, EclPageHeaderDescriptionContainerComponent, EclPageHeaderDescriptionDirective, EclPageHeaderDescriptionPictureDirective, EclPageHeaderDescriptionThumbnailDirective, EclPageHeaderMetaDirective, EclPageHeaderMetaItemDirective, EclPageHeaderTitleDirective, EclPaginationComponent, EclPaginationComponentModule, EclPaginationEvent, EclPaginationItemClickEvent, EclPaginationItemComponent, EclPopoverComponent, EclPopoverComponentModule, EclPopoverContentDirective, EclPopoverItemDirective, EclPopoverLinkDirective, EclPopoverListDirective, EclPopoverToggleDirective, EclRadioDirective, EclRadioDirectiveModule, EclRadioHelpComponent, EclRadioInputDirective, EclRadioLabelComponent, EclRangeDirective, EclRangeDirectiveModule, EclRangeEvent, EclRangeValueComponent, EclRatingChangeEvent, EclRatingFieldComponent, EclRatingFieldComponentModule, EclRtlService, EclSearchFormComponent, EclSearchFormComponentModule, EclSearchFormEvent, EclSelectContainerComponent, EclSelectDirective, EclSelectDirectiveModule, EclSiteFooterColumnDirective, EclSiteFooterComponent, EclSiteFooterComponentModule, EclSiteFooterContentDirective, EclSiteFooterDescriptionDirective, EclSiteFooterFixedContentECComponent, EclSiteFooterFixedContentEUComponent, EclSiteFooterLinkDirective, EclSiteFooterListDirective, EclSiteFooterListItemDirective, EclSiteFooterLogoDirective, EclSiteFooterLogoImageDesktopDirective, EclSiteFooterLogoImageDirective, EclSiteFooterLogoItemDirective, EclSiteFooterLogoLinkDirective, EclSiteFooterLogoListDirective, EclSiteFooterPictureDirective, EclSiteFooterRowDirective, EclSiteFooterSectionDirective, EclSiteFooterTitleDirective, EclSiteFooterTitleLinkDirective, EclSiteHeaderActionComponent, EclSiteHeaderBannerTopComponent, EclSiteHeaderComponent, EclSiteHeaderComponentModule, EclSiteHeaderCtaDirective, EclSiteHeaderEnvironmentComponent, EclSiteHeaderLanguageClickEvent, EclSiteHeaderLanguageCloseEvent, EclSiteHeaderLanguageComponent, EclSiteHeaderLanguagePopoverComponent, EclSiteHeaderLanguageSelectedEvent, EclSiteHeaderLoginBoxToggleEvent, EclSiteHeaderLoginComponent, EclSiteHeaderLoginDescriptionDirective, EclSiteHeaderLoginEvent, EclSiteHeaderLoginSeparatorDirective, EclSiteHeaderLogoClickEvent, EclSiteHeaderMessageComponent, EclSiteHeaderSearchComponent, EclSiteHeaderSearchEvent, EclSiteHeaderSearchToggleEvent, EclSlideEvent, EclSocialMediaFollowComponent, EclSocialMediaFollowComponentModule, EclSocialMediaFollowItemClickEvent, EclSocialMediaFollowItemComponent, EclSocialMediaFollowLinkDirective, EclSocialMediaShareComponent, EclSocialMediaShareComponentModule, EclSocialMediaShareItemClickEvent, EclSocialMediaShareItemComponent, EclSocialMediaShareLinkDirective, EclSortTableEvent, EclSpinnerComponent, EclSpinnerComponentModule, EclSpinnerLabelDirective, EclStickyContainerComponent, EclStickyContainerComponentModule, EclTabComponent, EclTabLabelComponent, EclTabMoreComponent, EclTabSelectEvent, EclTableBodyDirective, EclTableCellDirective, EclTableCellGroupDirective, EclTableDirective, EclTableDirectiveModule, EclTableHeadDirective, EclTableHeaderDirective, EclTableResponsiveDirective, EclTableRowDirective, EclTableSortButtonComponent, EclTabsComponent, EclTabsComponentModule, EclTagComponent, EclTagComponentModule, EclTagRemoveEvent, EclTextAreaDirective, EclTextAreaDirectiveModule, EclTextInputDirective, EclTextInputDirectiveModule, EclThemeService, EclTimelineComponent, EclTimelineComponentModule, EclTimelineItemComponent, EclTimelineItemLabelDirective, EclTimelineItemTitleDirective, EclTimelineItemToggleEvent, EclTimelineItemTogglerComponent, EclUnorderedListDirective, EclUnorderedListItemDirective, KeyCode, ShiftDirection, SortOrder, hasNextSiblingWithAttribute, hasPreviousSiblingWithAttribute };
+export { ECLClickOutsideDirective, 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, EclBannerCreditDirective, EclBannerDescriptionDirective, EclBannerDescriptionTextDirective, EclBannerImageDirective, EclBannerPictureDirective, EclBannerTitleDirective, EclBannerTitleTextDirective, EclBaseEvent, EclBlockquoteComponent, EclBlockquoteComponentModule, EclBlockquoteImageDirective, EclBlockquotePictureDirective, EclBreadcrumbComponent, EclBreadcrumbComponentModule, EclBreadcrumbContainerDirective, EclBreadcrumbSegmentClickEvent, EclBreadcrumbSegmentComponent, EclButtonComponent, EclButtonComponentModule, EclButtonLabelDirective, EclCardBodyComponent, EclCardComponent, EclCardComponentModule, EclCardImageComponent, 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, EclDescriptionListDirective, EclDescriptionListTermDirective, EclDomEvent, EclExpandableComponent, EclExpandableComponentModule, EclExpandableToggleEvent, EclFactFiguresComponent, EclFactFiguresComponentModule, EclFactFiguresDescriptionComponent, EclFactFiguresItemComponent, EclFactFiguresTitleComponent, EclFactFiguresValueComponent, EclFactFiguresViewAllComponent, EclFeaturedComponent, EclFeaturedItemComponent, EclFeaturedItemDescriptionComponent, EclFeaturedItemLinkDirective, EclFeaturedModule, EclFeedbackMessageDirective, EclFeedbackMessageDirectiveModule, EclFileComponent, EclFileComponentModule, EclFileDownloadDirective, EclFileDownloadEvent, EclFileImageDirective, EclFileItemComponent, EclFileItemsComponent, EclFileItemsToggleEvent, EclFilePictureDirective, EclFileTaxonomyComponent, EclFileUploadDirective, EclFileUploadDirectiveModule, EclFileUploadFileSelectedEvent, EclFormGroupComponent, EclFormGroupComponentModule, EclFormLabelComponent, EclFormLabelComponentModule, EclGalleryComponent, EclGalleryComponentModule, EclGalleryDownloadEvent, EclGalleryFooterComponent, EclGalleryFullScreenEvent, EclGalleryHideEvent, EclGalleryItemClickEvent, EclGalleryItemComponent, EclGalleryItemEvent, EclGalleryMediaDirective, EclGalleryMediaSource, EclGalleryMediaTrack, EclGalleryPictureDirective, EclGalleryShareEvent, EclGalleryShowEvent, EclGalleryToggleItemsEvent, EclHelpBlockDirective, EclHelpBlockDirectiveModule, EclHiddenDirective, EclHiddenModule, EclIconComponent, EclIconComponentModule, EclInpageNavigationComponent, EclInpageNavigationComponentModule, EclInpageNavigationItemClickEvent, EclInpageNavigationItemComponent, EclInpageNavigationListDirective, EclInpageNavigationSectionEnterEvent, EclInpageNavigationService, EclLabelDirective, EclLabelDirectiveModule, EclLanguageService, EclLinkDirective, EclLinkDirectiveModule, EclLinkLabelDirective, EclListDirectiveModule, EclListIllustrationComponent, EclListIllustrationComponentModule, EclListIllustrationIconDirective, EclListIllustrationImageComponent, EclListIllustrationImageDirective, EclListIllustrationItemComponent, EclListIllustrationPictureDirective, EclMediaContainerComponent, EclMediaContainerComponentModule, EclMediaContainerIframeDirective, EclMediaContainerItemDirective, EclMediaContainerPictureDirective, EclMenuComponent, EclMenuComponentModule, EclMenuItemCaretEvent, EclMenuItemComponent, EclMenuItemFocusEvent, EclMenuItemHoverEvent, EclMenuItemHoverOutEvent, EclMenuItemKeydownEvent, EclMenuItemParentFocusEvent, EclMenuItemSelectEvent, EclMenuMegaComponent, EclMenuMegaItemComponent, EclMessageCloseEvent, EclMessageComponent, EclMessageComponentModule, EclMessageTitleDirective, EclModalBodyComponent, EclModalBodyFixedContentDirective, EclModalCloseDirective, EclModalCloseEvent, EclModalComponent, EclModalComponentModule, EclModalFooterComponent, EclModalHeaderComponent, EclModalOpenEvent, EclModalTriggerDirective, EclMultiselectComponent, EclMultiselectComponentModule, EclMultiselectOptionDirective, EclNavigationListComponent, EclNavigationListComponentModule, EclNavigationListImageComponent, EclNavigationListImageDirective, EclNavigationListItemComponent, EclNavigationListPictureDirective, EclNewsTickerComponent, EclNewsTickerComponentModule, EclNewsTickerItemComponent, EclNewsTickerItemEvent, EclOrderedListDirective, EclOrderedListItemDirective, EclPageHeaderBackgroundImageDirective, EclPageHeaderBackgroundPictureDirective, EclPageHeaderComponent, EclPageHeaderComponentModule, EclPageHeaderDescriptionContainerComponent, EclPageHeaderDescriptionDirective, EclPageHeaderDescriptionPictureDirective, EclPageHeaderDescriptionThumbnailDirective, EclPageHeaderMetaDirective, EclPageHeaderMetaItemDirective, EclPageHeaderTitleDirective, EclPaginationComponent, EclPaginationComponentModule, EclPaginationEvent, EclPaginationItemClickEvent, EclPaginationItemComponent, EclPaginationListDirective, EclPopoverComponent, EclPopoverComponentModule, EclPopoverContentDirective, EclPopoverItemDirective, EclPopoverLinkDirective, EclPopoverListDirective, EclPopoverToggleDirective, EclRadioDirective, EclRadioDirectiveModule, EclRadioHelpComponent, EclRadioInputDirective, EclRadioLabelComponent, EclRangeDirective, EclRangeDirectiveModule, EclRangeEvent, EclRangeValueComponent, EclRatingChangeEvent, EclRatingFieldComponent, EclRatingFieldComponentModule, EclRtlService, EclSearchFormComponent, EclSearchFormComponentModule, EclSearchFormEvent, EclSelectContainerComponent, EclSelectDirective, EclSelectDirectiveModule, EclSiteFooterColumnDirective, EclSiteFooterComponent, EclSiteFooterComponentModule, EclSiteFooterContentDirective, EclSiteFooterDescriptionDirective, EclSiteFooterFixedContentECComponent, EclSiteFooterFixedContentEUComponent, EclSiteFooterLinkDirective, EclSiteFooterListDirective, EclSiteFooterListItemDirective, EclSiteFooterLogoDirective, EclSiteFooterLogoImageDesktopDirective, EclSiteFooterLogoImageDirective, EclSiteFooterLogoItemDirective, EclSiteFooterLogoLinkDirective, EclSiteFooterLogoListDirective, EclSiteFooterPictureDirective, EclSiteFooterRowDirective, EclSiteFooterSectionDirective, EclSiteFooterTitleDirective, EclSiteFooterTitleLinkDirective, EclSiteHeaderActionComponent, EclSiteHeaderBannerTopComponent, EclSiteHeaderComponent, EclSiteHeaderComponentModule, EclSiteHeaderCtaDirective, EclSiteHeaderEnvironmentComponent, EclSiteHeaderLanguageClickEvent, EclSiteHeaderLanguageCloseEvent, EclSiteHeaderLanguageComponent, EclSiteHeaderLanguagePopoverComponent, EclSiteHeaderLanguageSelectedEvent, EclSiteHeaderLoginBoxToggleEvent, EclSiteHeaderLoginComponent, EclSiteHeaderLoginDescriptionDirective, EclSiteHeaderLoginEvent, EclSiteHeaderLoginSeparatorDirective, EclSiteHeaderLogoClickEvent, EclSiteHeaderMessageComponent, EclSiteHeaderSearchComponent, EclSiteHeaderSearchEvent, EclSiteHeaderSearchToggleEvent, EclSlideEvent, EclSocialMediaFollowComponent, EclSocialMediaFollowComponentModule, EclSocialMediaFollowItemClickEvent, EclSocialMediaFollowItemComponent, EclSocialMediaFollowLinkDirective, EclSocialMediaShareComponent, EclSocialMediaShareComponentModule, EclSocialMediaShareItemClickEvent, EclSocialMediaShareItemComponent, EclSocialMediaShareLinkDirective, EclSortTableEvent, EclSpinnerComponent, EclSpinnerComponentModule, EclSpinnerLabelDirective, EclStickyContainerComponent, EclStickyContainerComponentModule, EclTabComponent, EclTabLabelComponent, EclTabMoreComponent, EclTabSelectEvent, EclTableBodyDirective, EclTableCellDirective, EclTableCellGroupDirective, EclTableDirective, EclTableDirectiveModule, EclTableHeadDirective, EclTableHeaderDirective, EclTableResponsiveDirective, EclTableRowDirective, EclTableSortButtonComponent, EclTabsComponent, EclTabsComponentModule, EclTagComponent, EclTagComponentModule, EclTagRemoveEvent, EclTextAreaDirective, EclTextAreaDirectiveModule, EclTextInputDirective, EclTextInputDirectiveModule, EclThemeService, EclTimelineComponent, EclTimelineComponentModule, EclTimelineItemComponent, EclTimelineItemLabelDirective, EclTimelineItemTitleDirective, EclTimelineItemToggleEvent, EclTimelineItemTogglerComponent, EclUnorderedListDirective, EclUnorderedListItemDirective, KeyCode, ShiftDirection, SortOrder, hasNextSiblingWithAttribute, hasPreviousSiblingWithAttribute };
 //# sourceMappingURL=eui-ecl.mjs.map