@eui/ecl 18.0.0-next.75 → 18.0.0-next.76

package/esm2022/lib/components/ecl-file/ecl-file-items/ecl-file-items.component.mjs

@@ -33,10 +33,10 @@ export class EclFileItemsComponent extends ECLBaseDirective {
             this.isExpanded = nextExpandedState;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFileItemsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.1", type: EclFileItemsComponent, selector: "ecl-file-items", inputs: { label: "label", isExpanded: ["isExpanded", "isExpanded", booleanAttribute] }, outputs: { toggle: "toggle" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "items", predicate: EclFileItemComponent }], usesInheritance: true, ngImport: i0, template: "<button eclButton variant=\"ghost\" class=\"ecl-file__translation-toggle\" [attr.aria-expanded]=\"isExpanded\" (click)=\"onToggleClick($event)\">\n    <span eclButtonLabel>\n        {{ label || 'ecl.file.OTHER-LANGUAGES' | translate: { count: getItemsCount() } }}\n    </span>\n    <ecl-icon icon=\"corner-arrow\" transform=\"rotate-180\"></ecl-icon>\n</button>\n<ul class=\"ecl-file__translation-list\">\n    <ng-content></ng-content>\n</ul>\n", dependencies: [{ kind: "component", type: i1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: i2.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i3.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFileItemsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.3", type: EclFileItemsComponent, selector: "ecl-file-items", inputs: { label: "label", isExpanded: ["isExpanded", "isExpanded", booleanAttribute] }, outputs: { toggle: "toggle" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "items", predicate: EclFileItemComponent }], usesInheritance: true, ngImport: i0, template: "<button eclButton variant=\"ghost\" class=\"ecl-file__translation-toggle\" [attr.aria-expanded]=\"isExpanded\" (click)=\"onToggleClick($event)\">\n    <span eclButtonLabel>\n        {{ label || 'ecl.file.OTHER-LANGUAGES' | translate: { count: getItemsCount() } }}\n    </span>\n    <ecl-icon icon=\"corner-arrow\" transform=\"rotate-180\"></ecl-icon>\n</button>\n<ul class=\"ecl-file__translation-list\">\n    <ng-content></ng-content>\n</ul>\n", dependencies: [{ kind: "component", type: i1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: i2.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i3.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFileItemsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFileItemsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-file-items', template: "<button eclButton variant=\"ghost\" class=\"ecl-file__translation-toggle\" [attr.aria-expanded]=\"isExpanded\" (click)=\"onToggleClick($event)\">\n    <span eclButtonLabel>\n        {{ label || 'ecl.file.OTHER-LANGUAGES' | translate: { count: getItemsCount() } }}\n    </span>\n    <ecl-icon icon=\"corner-arrow\" transform=\"rotate-180\"></ecl-icon>\n</button>\n<ul class=\"ecl-file__translation-list\">\n    <ng-content></ng-content>\n</ul>\n" }]
         }], propDecorators: { cssClasses: [{

package/esm2022/lib/components/ecl-file/ecl-file-picture.directive.mjs

@@ -5,10 +5,10 @@ export class EclFilePictureDirective extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-picture ecl-file__picture')].join(' ').trim();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFilePictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.1", type: EclFilePictureDirective, selector: "picture[eclFilePicture]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFilePictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: EclFilePictureDirective, selector: "picture[eclFilePicture]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFilePictureDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFilePictureDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'picture[eclFilePicture]',
@@ -22,10 +22,10 @@ export class EclFileImageDirective extends ECLBaseDirective {
         super(...arguments);
         this.className = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFileImageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.1", type: EclFileImageDirective, selector: "img[eclFileImage]", host: { properties: { "class.ecl-file__image": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFileImageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: EclFileImageDirective, selector: "img[eclFileImage]", host: { properties: { "class.ecl-file__image": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFileImageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFileImageDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'img[eclFileImage]',
@@ -39,10 +39,10 @@ export class EclFileTitleDirective extends ECLBaseDirective {
         super(...arguments);
         this.className = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFileTitleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.1", type: EclFileTitleDirective, selector: "[eclFileTitle]", inputs: { id: "id" }, host: { properties: { "class.ecl-file__title": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFileTitleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: EclFileTitleDirective, selector: "[eclFileTitle]", inputs: { id: "id" }, host: { properties: { "class.ecl-file__title": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFileTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFileTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclFileTitle]',

package/esm2022/lib/components/ecl-file/ecl-file-taxonomy/ecl-file-taxonomy.component.mjs

@@ -5,10 +5,10 @@ export class EclFileTaxonomyComponent extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-file__taxonomy')].join(' ').trim();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFileTaxonomyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.1", type: EclFileTaxonomyComponent, selector: "ecl-file-taxonomy", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFileTaxonomyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: EclFileTaxonomyComponent, selector: "ecl-file-taxonomy", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFileTaxonomyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFileTaxonomyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-file-taxonomy', template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { cssClasses: [{

package/esm2022/lib/components/ecl-file/ecl-file.component.mjs

@@ -16,10 +16,10 @@ export class EclFileComponent extends ECLBaseDirective {
     get isThumbnail() {
         return !!this.eclPictureContent;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFileComponent, deps: [{ token: i1.EclThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.1", type: EclFileComponent, selector: "ecl-file", inputs: { description: "description", id: "id", langId: "langId", labelInfo: "labelInfo", language: "language", detailMeta: "detailMeta", meta: "meta" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclPictureContent", first: true, predicate: EclFilePictureDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-file__container\">\n    @if(!isThumbnail) {\n        @if(eclThemeService.isECTheme()) {\n            <ecl-icon icon=\"file\" class=\"ecl-file__icon\" size=\"2xl\"></ecl-icon>\n        } @else {\n            <ecl-icon icon=\"file\" class=\"ecl-file__icon\" size=\"m\"></ecl-icon>\n        }\n    } @else {\n    <ng-content select=\"[eclFilePicture]\"></ng-content>\n    }\n    <div class=\"ecl-file__info\">\n        @if(labelInfo) {\n        <div class=\"ecl-file__label\">\n            <span eclLabel variant=\"highlight\">{{ labelInfo }}</span>\n        </div>\n        }\n        @if(detailMeta) {\n        <div class=\"ecl-file__detail-meta\">\n            @for (el of detailMeta; track el) {\n                <span class=\"ecl-file__detail-meta-item\" >{{ el }}</span>\n            }\n        </div>\n        }\n        <ng-content select=\"[eclFileTitle]\"></ng-content>\n        @if(description) {\n            <div class=\"ecl-file__description\">{{ description }}</div>\n        }\n        <ng-content select=\"ecl-file-taxonomy\"></ng-content>\n    </div>\n\n    </div>\n    <div class=\"ecl-file__footer\">\n        <div class=\"ecl-file__language\" [id]=\"langId\">{{ language }}</div>\n        <div class=\"ecl-file__meta\">{{ meta }}</div>\n        <ng-content select=\"[eclFileDownload]\"></ng-content>\n    </div>\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: i3.EclLabelDirective, selector: "[eclLabel]", inputs: ["variant"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFileComponent, deps: [{ token: i1.EclThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.3", type: EclFileComponent, selector: "ecl-file", inputs: { description: "description", id: "id", langId: "langId", labelInfo: "labelInfo", language: "language", detailMeta: "detailMeta", meta: "meta" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclPictureContent", first: true, predicate: EclFilePictureDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-file__container\">\n    @if(!isThumbnail) {\n        @if(eclThemeService.isECTheme()) {\n            <ecl-icon icon=\"file\" class=\"ecl-file__icon\" size=\"2xl\"></ecl-icon>\n        } @else {\n            <ecl-icon icon=\"file\" class=\"ecl-file__icon\" size=\"m\"></ecl-icon>\n        }\n    } @else {\n    <ng-content select=\"[eclFilePicture]\"></ng-content>\n    }\n    <div class=\"ecl-file__info\">\n        @if(labelInfo) {\n        <div class=\"ecl-file__label\">\n            <span eclLabel variant=\"highlight\">{{ labelInfo }}</span>\n        </div>\n        }\n        @if(detailMeta) {\n        <div class=\"ecl-file__detail-meta\">\n            @for (el of detailMeta; track el) {\n                <span class=\"ecl-file__detail-meta-item\" >{{ el }}</span>\n            }\n        </div>\n        }\n        <ng-content select=\"[eclFileTitle]\"></ng-content>\n        @if(description) {\n            <div class=\"ecl-file__description\">{{ description }}</div>\n        }\n        <ng-content select=\"ecl-file-taxonomy\"></ng-content>\n    </div>\n\n    </div>\n    <div class=\"ecl-file__footer\">\n        <div class=\"ecl-file__language\" [id]=\"langId\">{{ language }}</div>\n        <div class=\"ecl-file__meta\">{{ meta }}</div>\n        <ng-content select=\"[eclFileDownload]\"></ng-content>\n    </div>\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: i3.EclLabelDirective, selector: "[eclLabel]", inputs: ["variant"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-file', template: "<div class=\"ecl-file__container\">\n    @if(!isThumbnail) {\n        @if(eclThemeService.isECTheme()) {\n            <ecl-icon icon=\"file\" class=\"ecl-file__icon\" size=\"2xl\"></ecl-icon>\n        } @else {\n            <ecl-icon icon=\"file\" class=\"ecl-file__icon\" size=\"m\"></ecl-icon>\n        }\n    } @else {\n    <ng-content select=\"[eclFilePicture]\"></ng-content>\n    }\n    <div class=\"ecl-file__info\">\n        @if(labelInfo) {\n        <div class=\"ecl-file__label\">\n            <span eclLabel variant=\"highlight\">{{ labelInfo }}</span>\n        </div>\n        }\n        @if(detailMeta) {\n        <div class=\"ecl-file__detail-meta\">\n            @for (el of detailMeta; track el) {\n                <span class=\"ecl-file__detail-meta-item\" >{{ el }}</span>\n            }\n        </div>\n        }\n        <ng-content select=\"[eclFileTitle]\"></ng-content>\n        @if(description) {\n            <div class=\"ecl-file__description\">{{ description }}</div>\n        }\n        <ng-content select=\"ecl-file-taxonomy\"></ng-content>\n    </div>\n\n    </div>\n    <div class=\"ecl-file__footer\">\n        <div class=\"ecl-file__language\" [id]=\"langId\">{{ language }}</div>\n        <div class=\"ecl-file__meta\">{{ meta }}</div>\n        <ng-content select=\"[eclFileDownload]\"></ng-content>\n    </div>\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [{ type: i1.EclThemeService }], propDecorators: { cssClasses: [{

package/esm2022/lib/components/ecl-file/ecl-file.module.mjs

@@ -24,8 +24,8 @@ const COMPONENTS = [
     EclFileImageDirective,
 ];
 export class EclFileComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFileComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFileComponentModule, declarations: [EclFileComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFileComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFileComponentModule, declarations: [EclFileComponent,
             EclFileDownloadDirective,
             EclFileItemsComponent,
             EclFileItemComponent,
@@ -47,14 +47,14 @@ export class EclFileComponentModule {
             EclFileTranslationDownloadDirective,
             EclFilePictureDirective,
             EclFileImageDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFileComponentModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFileComponentModule, imports: [CommonModule,
             EclLinkDirectiveModule,
             EclIconComponentModule,
             EclButtonComponentModule,
             EclLabelDirectiveModule,
             TranslateModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFileComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFileComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/lib/components/ecl-file-upload/ecl-file-upload.directive.mjs

@@ -171,10 +171,10 @@ export class EclFileUploadDirective extends ECLBaseDirective {
         const i = Math.floor(Math.log(bytes) / Math.log(k));
         return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFileUploadDirective, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }, { token: i2.TranslateService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.1", type: EclFileUploadDirective, selector: "[eclFileUpload]", inputs: { variant: "variant", isInvalid: "isInvalid", id: "id", disabled: ["disabled", "disabled", booleanAttribute], multiple: ["multiple", "multiple", booleanAttribute] }, outputs: { filesSelected: "filesSelected" }, host: { listeners: { "click": "onClick($event)", "change": "onFilesSelected($event)" }, properties: { "attr.id": "this.id", "attr.disabled": "this.disabled", "attr.multiple": "this.multiple", "attr.type": "this.type", "class": "this.cssClasses", "class.ecl-file-upload--invalid": "this.invalidState" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFileUploadDirective, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }, { token: i2.TranslateService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.3", type: EclFileUploadDirective, selector: "[eclFileUpload]", inputs: { variant: "variant", isInvalid: "isInvalid", id: "id", disabled: ["disabled", "disabled", booleanAttribute], multiple: ["multiple", "multiple", booleanAttribute] }, outputs: { filesSelected: "filesSelected" }, host: { listeners: { "click": "onClick($event)", "change": "onFilesSelected($event)" }, properties: { "attr.id": "this.id", "attr.disabled": "this.disabled", "attr.multiple": "this.multiple", "attr.type": "this.type", "class": "this.cssClasses", "class.ecl-file-upload--invalid": "this.invalidState" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFileUploadDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFileUploadDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclFileUpload]',

package/esm2022/lib/components/ecl-file-upload/ecl-file-upload.module.mjs

@@ -3,11 +3,11 @@ import { CommonModule } from '@angular/common';
 import { EclFileUploadDirective } from './ecl-file-upload.directive';
 import * as i0 from "@angular/core";
 export class EclFileUploadDirectiveModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFileUploadDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFileUploadDirectiveModule, declarations: [EclFileUploadDirective], imports: [CommonModule], exports: [EclFileUploadDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFileUploadDirectiveModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFileUploadDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFileUploadDirectiveModule, declarations: [EclFileUploadDirective], imports: [CommonModule], exports: [EclFileUploadDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFileUploadDirectiveModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFileUploadDirectiveModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFileUploadDirectiveModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

package/esm2022/lib/components/ecl-form-group/ecl-form-group.component.mjs

@@ -5,10 +5,10 @@ export class EclFormGroupComponent extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-form-group')].join(' ').trim();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.1", type: EclFormGroupComponent, selector: "[eclFormGroup], ecl-form-group", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: EclFormGroupComponent, selector: "[eclFormGroup], ecl-form-group", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFormGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFormGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: '[eclFormGroup], ecl-form-group', template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { cssClasses: [{

package/esm2022/lib/components/ecl-form-group/ecl-form-group.module.mjs

@@ -5,11 +5,11 @@ import { TranslateModule } from '@ngx-translate/core';
 import { EclFormGroupComponent } from './ecl-form-group.component';
 import * as i0 from "@angular/core";
 export class EclFormGroupComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFormGroupComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFormGroupComponentModule, declarations: [EclFormGroupComponent], imports: [CommonModule, EclFormLabelComponentModule, TranslateModule], exports: [EclFormGroupComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFormGroupComponentModule, imports: [CommonModule, EclFormLabelComponentModule, TranslateModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFormGroupComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFormGroupComponentModule, declarations: [EclFormGroupComponent], imports: [CommonModule, EclFormLabelComponentModule, TranslateModule], exports: [EclFormGroupComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFormGroupComponentModule, imports: [CommonModule, EclFormLabelComponentModule, TranslateModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFormGroupComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFormGroupComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, EclFormLabelComponentModule, TranslateModule],

package/esm2022/lib/components/ecl-form-label/ecl-form-label.component.mjs

@@ -19,10 +19,10 @@ export class EclFormLabelComponent extends ECLBaseDirective {
             .join(' ')
             .trim();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFormLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.1", type: EclFormLabelComponent, selector: "[eclFormLabel]", inputs: { isOptional: ["isOptional", "isOptional", booleanAttribute], isInvalid: ["isInvalid", "isInvalid", booleanAttribute], isDisabled: ["isDisabled", "isDisabled", booleanAttribute], isRequired: ["isRequired", "isRequired", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n@if(isOptional) {\n<span class=\"ecl-form-label__optional\" role=\"note\" aria-label=\"optional\"> ({{ 'ecl.form-label.OPTIONAL' | translate }})</span>\n}\n@if(isRequired) {\n<span class=\"ecl-form-label__required\" role=\"note\" aria-label=\"required\">*</span>\n}\n", dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFormLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.3", type: EclFormLabelComponent, selector: "[eclFormLabel]", inputs: { isOptional: ["isOptional", "isOptional", booleanAttribute], isInvalid: ["isInvalid", "isInvalid", booleanAttribute], isDisabled: ["isDisabled", "isDisabled", booleanAttribute], isRequired: ["isRequired", "isRequired", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n@if(isOptional) {\n<span class=\"ecl-form-label__optional\" role=\"note\" aria-label=\"optional\"> ({{ 'ecl.form-label.OPTIONAL' | translate }})</span>\n}\n@if(isRequired) {\n<span class=\"ecl-form-label__required\" role=\"note\" aria-label=\"required\">*</span>\n}\n", dependencies: [{ kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFormLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFormLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: '[eclFormLabel]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n@if(isOptional) {\n<span class=\"ecl-form-label__optional\" role=\"note\" aria-label=\"optional\"> ({{ 'ecl.form-label.OPTIONAL' | translate }})</span>\n}\n@if(isRequired) {\n<span class=\"ecl-form-label__required\" role=\"note\" aria-label=\"required\">*</span>\n}\n" }]
         }], propDecorators: { isOptional: [{

package/esm2022/lib/components/ecl-form-label/ecl-form-label.module.mjs

@@ -4,11 +4,11 @@ import { EclFormLabelComponent } from './ecl-form-label.component';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i0 from "@angular/core";
 export class EclFormLabelComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFormLabelComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFormLabelComponentModule, declarations: [EclFormLabelComponent], imports: [CommonModule, TranslateModule], exports: [EclFormLabelComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFormLabelComponentModule, imports: [CommonModule, TranslateModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFormLabelComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFormLabelComponentModule, declarations: [EclFormLabelComponent], imports: [CommonModule, TranslateModule], exports: [EclFormLabelComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFormLabelComponentModule, imports: [CommonModule, TranslateModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclFormLabelComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclFormLabelComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, TranslateModule],

package/esm2022/lib/components/ecl-gallery/ecl-gallery-footer.component.mjs

@@ -37,10 +37,10 @@ export class EclGalleryFooterComponent {
         this._isExpanded = !this._isExpanded;
         this.toggleItems.next(new EclGalleryToggleItemsEvent(this.isExpanded));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclGalleryFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.1", type: EclGalleryFooterComponent, selector: "ecl-gallery-footer", outputs: { toggleItems: "toggleItems" }, ngImport: i0, template: "<div class=\"ecl-gallery__footer\">\n    <div class=\"ecl-gallery__info\">\n        <div class=\"ecl-gallery__info-total\">\n            <strong>{{ itemsCount }}</strong>{{ 'ecl.gallery.MEDIA-FILES-COUNT' | translate }}\n        </div>\n        @if(isShowToggleBtn) {\n            @if(!isExpanded) {\n            <button eclButton variant=\"ghost\" class=\"ecl-gallery__view-all\" (click)=\"onToggle()\">\n                {{ 'ecl.gallery.VIEW-ALL' | translate }}\n            </button>\n            } @else {\n            <button eclButton variant=\"ghost\" class=\"ecl-gallery__view-all\" (click)=\"onToggle()\">\n                {{ 'ecl.common.COLLAPSE' | translate }}\n            </button>\n            }\n        }\n    </div>\n    <hr class=\"ecl-gallery__footer-divider\" />\n    <div class=\"ecl-gallery__footer-link\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclGalleryFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.3", type: EclGalleryFooterComponent, selector: "ecl-gallery-footer", outputs: { toggleItems: "toggleItems" }, ngImport: i0, template: "<div class=\"ecl-gallery__footer\">\n    <div class=\"ecl-gallery__info\">\n        <div class=\"ecl-gallery__info-total\">\n            <strong>{{ itemsCount }}</strong>{{ 'ecl.gallery.MEDIA-FILES-COUNT' | translate }}\n        </div>\n        @if(isShowToggleBtn) {\n            @if(!isExpanded) {\n            <button eclButton variant=\"ghost\" class=\"ecl-gallery__view-all\" (click)=\"onToggle()\">\n                {{ 'ecl.gallery.VIEW-ALL' | translate }}\n            </button>\n            } @else {\n            <button eclButton variant=\"ghost\" class=\"ecl-gallery__view-all\" (click)=\"onToggle()\">\n                {{ 'ecl.common.COLLAPSE' | translate }}\n            </button>\n            }\n        }\n    </div>\n    <hr class=\"ecl-gallery__footer-divider\" />\n    <div class=\"ecl-gallery__footer-link\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclGalleryFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclGalleryFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-gallery-footer', template: "<div class=\"ecl-gallery__footer\">\n    <div class=\"ecl-gallery__info\">\n        <div class=\"ecl-gallery__info-total\">\n            <strong>{{ itemsCount }}</strong>{{ 'ecl.gallery.MEDIA-FILES-COUNT' | translate }}\n        </div>\n        @if(isShowToggleBtn) {\n            @if(!isExpanded) {\n            <button eclButton variant=\"ghost\" class=\"ecl-gallery__view-all\" (click)=\"onToggle()\">\n                {{ 'ecl.gallery.VIEW-ALL' | translate }}\n            </button>\n            } @else {\n            <button eclButton variant=\"ghost\" class=\"ecl-gallery__view-all\" (click)=\"onToggle()\">\n                {{ 'ecl.common.COLLAPSE' | translate }}\n            </button>\n            }\n        }\n    </div>\n    <hr class=\"ecl-gallery__footer-divider\" />\n    <div class=\"ecl-gallery__footer-link\">\n        <ng-content></ng-content>\n    </div>\n</div>\n" }]
         }], propDecorators: { toggleItems: [{

package/esm2022/lib/components/ecl-gallery/ecl-gallery-item.component.mjs

@@ -56,10 +56,10 @@ export class EclGalleryItemComponent extends ECLBaseDirective {
     get isOpenInFullScreenPossible() {
         return this.mediaType !== 'externalVideo';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclGalleryItemComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.1", type: EclGalleryItemComponent, selector: "ecl-gallery-item", inputs: { isShareable: ["isShareable", "isShareable", booleanAttribute], mediaType: "mediaType", src: "src", label: "label", meta: "meta", description: "description", icon: "icon" }, outputs: { itemClick: "itemClick" }, host: { listeners: { "click": "onItemClick($event)" }, properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, queries: [{ propertyName: "mediaChild", first: true, predicate: EclGalleryMediaDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<a [href]=\"src\" class=\"ecl-gallery__item-link\" [attr.aria-label]=\"label\" [class.ecl-gallery__item__link--frozen]=\"isNoOverlay\">\n    <figure class=\"ecl-gallery__image-container\">\n        @if(mediaType !== 'image') {\n        <div class=\"ecl-gallery__item-icon-wrapper\">\n            <ecl-icon isInverted class=\"ecl-gallery__item-icon ecl-icon--inverted\" icon=\"play-filled\" size=\"l\"></ecl-icon>\n        </div>\n        }\n        <ng-content select=\"[eclGalleryPicture], [eclGalleryMedia], [eclGalleryImage]\"></ng-content>\n        <figcaption class=\"ecl-gallery__description\">\n            {{ description }}\n            @if(icon) {\n            <ecl-icon class=\"ecl-gallery__description-icon\" [icon]=\"icon\"></ecl-icon>\n            }\n            <span class=\"ecl-gallery__meta\">\n                {{ meta }}\n            </span>\n        </figcaption>\n    </figure>\n</a>", styles: [".ecl-gallery__description{width:100%}\n"], dependencies: [{ kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclGalleryItemComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.3", type: EclGalleryItemComponent, selector: "ecl-gallery-item", inputs: { isShareable: ["isShareable", "isShareable", booleanAttribute], mediaType: "mediaType", src: "src", label: "label", meta: "meta", description: "description", icon: "icon" }, outputs: { itemClick: "itemClick" }, host: { listeners: { "click": "onItemClick($event)" }, properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, queries: [{ propertyName: "mediaChild", first: true, predicate: EclGalleryMediaDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<a [href]=\"src\" class=\"ecl-gallery__item-link\" [attr.aria-label]=\"label\" [class.ecl-gallery__item__link--frozen]=\"isNoOverlay\">\n    <figure class=\"ecl-gallery__image-container\">\n        @if(mediaType !== 'image') {\n        <div class=\"ecl-gallery__item-icon-wrapper\">\n            <ecl-icon isInverted class=\"ecl-gallery__item-icon ecl-icon--inverted\" icon=\"play-filled\" size=\"l\"></ecl-icon>\n        </div>\n        }\n        <ng-content select=\"[eclGalleryPicture], [eclGalleryMedia], [eclGalleryImage]\"></ng-content>\n        <figcaption class=\"ecl-gallery__description\">\n            {{ description }}\n            @if(icon) {\n            <ecl-icon class=\"ecl-gallery__description-icon\" [icon]=\"icon\"></ecl-icon>\n            }\n            <span class=\"ecl-gallery__meta\">\n                {{ meta }}\n            </span>\n        </figcaption>\n    </figure>\n</a>", styles: [".ecl-gallery__description{width:100%}\n"], dependencies: [{ kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclGalleryItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclGalleryItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-gallery-item', template: "<a [href]=\"src\" class=\"ecl-gallery__item-link\" [attr.aria-label]=\"label\" [class.ecl-gallery__item__link--frozen]=\"isNoOverlay\">\n    <figure class=\"ecl-gallery__image-container\">\n        @if(mediaType !== 'image') {\n        <div class=\"ecl-gallery__item-icon-wrapper\">\n            <ecl-icon isInverted class=\"ecl-gallery__item-icon ecl-icon--inverted\" icon=\"play-filled\" size=\"l\"></ecl-icon>\n        </div>\n        }\n        <ng-content select=\"[eclGalleryPicture], [eclGalleryMedia], [eclGalleryImage]\"></ng-content>\n        <figcaption class=\"ecl-gallery__description\">\n            {{ description }}\n            @if(icon) {\n            <ecl-icon class=\"ecl-gallery__description-icon\" [icon]=\"icon\"></ecl-icon>\n            }\n            <span class=\"ecl-gallery__meta\">\n                {{ meta }}\n            </span>\n        </figcaption>\n    </figure>\n</a>", styles: [".ecl-gallery__description{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i0.ElementRef }], propDecorators: { isShareable: [{

package/esm2022/lib/components/ecl-gallery/ecl-gallery-media.directive.mjs

@@ -38,10 +38,10 @@ export class EclGalleryMediaDirective extends ECLBaseDirective {
     getHostElement() {
         return this.el.nativeElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclGalleryMediaDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.1", type: EclGalleryMediaDirective, selector: "[eclGalleryMedia], [eclGalleryImage]", inputs: { poster: "poster" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclGalleryMediaDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: EclGalleryMediaDirective, selector: "[eclGalleryMedia], [eclGalleryImage]", inputs: { poster: "poster" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclGalleryMediaDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclGalleryMediaDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclGalleryMedia], [eclGalleryImage]',
@@ -56,10 +56,10 @@ export class EclGalleryPictureDirective extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-picture ecl-gallery__picture')].join(' ').trim();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclGalleryPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.1", type: EclGalleryPictureDirective, selector: "picture[eclGalleryPicture]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclGalleryPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: EclGalleryPictureDirective, selector: "picture[eclGalleryPicture]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclGalleryPictureDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclGalleryPictureDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'picture[eclGalleryPicture]',

package/esm2022/lib/components/ecl-gallery/ecl-gallery.component.mjs

@@ -245,10 +245,10 @@ export class EclGalleryComponent extends ECLBaseDirective {
     getVisibleItems() {
         return this.galleryItems.filter((item, cnt) => cnt < this.maxVisibleItems);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclGalleryComponent, deps: [{ token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.1", type: EclGalleryComponent, selector: "ecl-gallery", inputs: { isOpenInFullScreenPossible: ["isOpenInFullScreenPossible", "isOpenInFullScreenPossible", booleanAttribute], isShareable: ["isShareable", "isShareable", booleanAttribute], isFullWidth: ["isFullWidth", "isFullWidth", booleanAttribute], isNoOverlay: ["isNoOverlay", "isNoOverlay", booleanAttribute], maxVisibleItems: ["maxVisibleItems", "maxVisibleItems", numberAttribute] }, outputs: { show: "show", hide: "hide", openFullScreen: "openFullScreen", share: "share", itemSwitch: "itemSwitch" }, host: { listeners: { "document:keydown.escape": "onEscapeKeydownHandler($event)", "window:resize": "iframeResize($event)" }, properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, queries: [{ propertyName: "galleryFooter", first: true, predicate: EclGalleryFooterComponent, descendants: true }, { propertyName: "galleryItems", predicate: EclGalleryItemComponent }], viewQueries: [{ propertyName: "videoChild", first: true, predicate: ["video"], descendants: true }, { propertyName: "imageChild", first: true, predicate: ["image"], descendants: true }, { propertyName: "externalVideoChild", first: true, predicate: ["externalVideo"], descendants: true }, { propertyName: "overlayChild", first: true, predicate: ["overlay"], descendants: true }, { propertyName: "headerChild", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerChild", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ul class=\"ecl-gallery__list\">\n    <ng-content></ng-content>\n</ul>\n\n<ng-content select=\"ecl-gallery-footer\"></ng-content>\n\n<dialog #overlay [attr.open]=\"isDialogVisible || null\" class=\"ecl-gallery__overlay\"\n    [attr.aria-label]=\"'ecl.gallery.FULL-SIZE-DISPLAY' | translate\">\n    <header #header class=\"ecl-gallery__close\">\n        <button (click)=\"onClose($event)\" eclButton class=\"ecl-gallery__close-button\" isIconOnly variant=\"ghost\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </button>\n    </header>\n    <section class=\"ecl-gallery__slider\">\n        <div class=\"ecl-gallery__slider-media-container\">\n            @if(item?.isExternalVideo) {\n            <div #externalVideo class=\"ecl-gallery__slider-embed\">\n                <iframe [src]=\"item?.getUrlExternalVideo()\" [style.width.px]=\"getIframeWidth()\"\n                    [style.height.px]=\"getIframeHeight()\" frameborder=\"0\">\n                </iframe>\n            </div>\n            }\n            @if(item?.isImage) {\n            <picture #image class=\"ecl-picture ecl-gallery__picture ecl-gallery__slider-image\">\n                <img [attr.alt]=\"item?.label || null\" [src]=\"item?.src\" />\n            </picture>\n            }\n            @if(item?.isVideo) {\n            <video #video controls=\"controls\" class=\"ecl-gallery__slider-video\"\n                [attr.poster]=\"item.mediaChild?.poster\">\n                @for (el of item.mediaChild?.sources; track el.src) {\n                <source [attr.src]=\"el.src\" [attr.type]=\"el.type\" />\n                }\n                @for (elem of item.mediaChild?.tracks; track elem.src) {\n                <track [attr.src]=\"elem.src\" [attr.kind]=\"elem.kind\"\n                    [attr.srcLang]=\"elem.srcLang\" [attr.label]=\"elem.label\" />\n                }\n            </video>\n            }\n        </div>\n    </section>\n    <footer #footer class=\"ecl-gallery__detail\">\n        <div class=\"ecl-container\">\n            <div class=\"ecl-gallery__pager\">\n                <button eclButton class=\"ecl-gallery__slider-previous\" variant=\"tertiary\" isIconOnly\n                    (click)=\"onPrevious($event)\">\n                    <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-270\"></ecl-icon>\n                    <span eclButtonLabel>\n                        {{ 'ecl.common.PREVIOUS' | translate }}\n                    </span>\n                </button>\n                <div class=\"ecl-gallery__detail-counter\">\n                    <span>{{ itemIndex }}</span> {{ 'ecl.common.OF' | translate }} <span>{{ itemsCount }}</span>\n                </div>\n                <button eclButton class=\"ecl-gallery__slider-next\" variant=\"tertiary\" isIconOnly\n                    (click)=\"onNext($event)\">\n                    <span eclButtonLabel>\n                        {{ 'ecl.common.NEXT' | translate }}\n                    </span>\n                    <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-90\"></ecl-icon>\n                </button>\n            </div>\n            <div class=\"ecl-gallery__detail-actions\">\n                @if(canBeOpenInFullScreen()) {\n                <a eclLink variant=\"standalone\" class=\"ecl-gallery__download\" [href]=\"item?.getDownloadLink()\"\n                    target=\"_blank\" (click)=\"onFullScreenOpen($event)\" isInverted>\n                    <span eclLinkLabel>{{ 'ecl.gallery.VIEW-ORIGINAL' | translate }}</span>\n                    <ecl-icon icon=\"fullscreen\" size=\"fluid\" focusable=\"false\"></ecl-icon>\n                </a>\n                }\n                @if(canBeShared()) {\n                <a eclLink variant=\"standalone\" isInverted class=\"ecl-gallery__share\" href=\"\" (click)=\"onShare($event)\">\n                    <span eclLinkLabel>{{ 'ecl.common.SHARE' | translate }}</span>\n                    <ecl-icon icon=\"share\" size=\"fluid\" focusable=\"false\"></ecl-icon>\n                </a>\n                }\n            </div>\n            @if(item?.description) {\n                <div class=\"ecl-gallery__detail-description\">{{ item?.description }}</div>\n            }\n            @if(item?.meta) {\n                <div class=\"ecl-gallery__detail-meta\">{{ item?.meta }}</div>\n            }\n        </div>\n    </footer>\n</dialog>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: i2.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i3.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i4.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: i5.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: i6.EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclGalleryComponent, deps: [{ token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.3", type: EclGalleryComponent, selector: "ecl-gallery", inputs: { isOpenInFullScreenPossible: ["isOpenInFullScreenPossible", "isOpenInFullScreenPossible", booleanAttribute], isShareable: ["isShareable", "isShareable", booleanAttribute], isFullWidth: ["isFullWidth", "isFullWidth", booleanAttribute], isNoOverlay: ["isNoOverlay", "isNoOverlay", booleanAttribute], maxVisibleItems: ["maxVisibleItems", "maxVisibleItems", numberAttribute] }, outputs: { show: "show", hide: "hide", openFullScreen: "openFullScreen", share: "share", itemSwitch: "itemSwitch" }, host: { listeners: { "document:keydown.escape": "onEscapeKeydownHandler($event)", "window:resize": "iframeResize($event)" }, properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, queries: [{ propertyName: "galleryFooter", first: true, predicate: EclGalleryFooterComponent, descendants: true }, { propertyName: "galleryItems", predicate: EclGalleryItemComponent }], viewQueries: [{ propertyName: "videoChild", first: true, predicate: ["video"], descendants: true }, { propertyName: "imageChild", first: true, predicate: ["image"], descendants: true }, { propertyName: "externalVideoChild", first: true, predicate: ["externalVideo"], descendants: true }, { propertyName: "overlayChild", first: true, predicate: ["overlay"], descendants: true }, { propertyName: "headerChild", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerChild", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ul class=\"ecl-gallery__list\">\n    <ng-content></ng-content>\n</ul>\n\n<ng-content select=\"ecl-gallery-footer\"></ng-content>\n\n<dialog #overlay [attr.open]=\"isDialogVisible || null\" class=\"ecl-gallery__overlay\"\n    [attr.aria-label]=\"'ecl.gallery.FULL-SIZE-DISPLAY' | translate\">\n    <header #header class=\"ecl-gallery__close\">\n        <button (click)=\"onClose($event)\" eclButton class=\"ecl-gallery__close-button\" isIconOnly variant=\"ghost\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </button>\n    </header>\n    <section class=\"ecl-gallery__slider\">\n        <div class=\"ecl-gallery__slider-media-container\">\n            @if(item?.isExternalVideo) {\n            <div #externalVideo class=\"ecl-gallery__slider-embed\">\n                <iframe [src]=\"item?.getUrlExternalVideo()\" [style.width.px]=\"getIframeWidth()\"\n                    [style.height.px]=\"getIframeHeight()\" frameborder=\"0\">\n                </iframe>\n            </div>\n            }\n            @if(item?.isImage) {\n            <picture #image class=\"ecl-picture ecl-gallery__picture ecl-gallery__slider-image\">\n                <img [attr.alt]=\"item?.label || null\" [src]=\"item?.src\" />\n            </picture>\n            }\n            @if(item?.isVideo) {\n            <video #video controls=\"controls\" class=\"ecl-gallery__slider-video\"\n                [attr.poster]=\"item.mediaChild?.poster\">\n                @for (el of item.mediaChild?.sources; track el.src) {\n                <source [attr.src]=\"el.src\" [attr.type]=\"el.type\" />\n                }\n                @for (elem of item.mediaChild?.tracks; track elem.src) {\n                <track [attr.src]=\"elem.src\" [attr.kind]=\"elem.kind\"\n                    [attr.srcLang]=\"elem.srcLang\" [attr.label]=\"elem.label\" />\n                }\n            </video>\n            }\n        </div>\n    </section>\n    <footer #footer class=\"ecl-gallery__detail\">\n        <div class=\"ecl-container\">\n            <div class=\"ecl-gallery__pager\">\n                <button eclButton class=\"ecl-gallery__slider-previous\" variant=\"tertiary\" isIconOnly\n                    (click)=\"onPrevious($event)\">\n                    <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-270\"></ecl-icon>\n                    <span eclButtonLabel>\n                        {{ 'ecl.common.PREVIOUS' | translate }}\n                    </span>\n                </button>\n                <div class=\"ecl-gallery__detail-counter\">\n                    <span>{{ itemIndex }}</span> {{ 'ecl.common.OF' | translate }} <span>{{ itemsCount }}</span>\n                </div>\n                <button eclButton class=\"ecl-gallery__slider-next\" variant=\"tertiary\" isIconOnly\n                    (click)=\"onNext($event)\">\n                    <span eclButtonLabel>\n                        {{ 'ecl.common.NEXT' | translate }}\n                    </span>\n                    <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-90\"></ecl-icon>\n                </button>\n            </div>\n            <div class=\"ecl-gallery__detail-actions\">\n                @if(canBeOpenInFullScreen()) {\n                <a eclLink variant=\"standalone\" class=\"ecl-gallery__download\" [href]=\"item?.getDownloadLink()\"\n                    target=\"_blank\" (click)=\"onFullScreenOpen($event)\" isInverted>\n                    <span eclLinkLabel>{{ 'ecl.gallery.VIEW-ORIGINAL' | translate }}</span>\n                    <ecl-icon icon=\"fullscreen\" size=\"fluid\" focusable=\"false\"></ecl-icon>\n                </a>\n                }\n                @if(canBeShared()) {\n                <a eclLink variant=\"standalone\" isInverted class=\"ecl-gallery__share\" href=\"\" (click)=\"onShare($event)\">\n                    <span eclLinkLabel>{{ 'ecl.common.SHARE' | translate }}</span>\n                    <ecl-icon icon=\"share\" size=\"fluid\" focusable=\"false\"></ecl-icon>\n                </a>\n                }\n            </div>\n            @if(item?.description) {\n                <div class=\"ecl-gallery__detail-description\">{{ item?.description }}</div>\n            }\n            @if(item?.meta) {\n                <div class=\"ecl-gallery__detail-meta\">{{ item?.meta }}</div>\n            }\n        </div>\n    </footer>\n</dialog>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: i2.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i3.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i4.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: i5.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: i6.EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclGalleryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclGalleryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-gallery', template: "<ul class=\"ecl-gallery__list\">\n    <ng-content></ng-content>\n</ul>\n\n<ng-content select=\"ecl-gallery-footer\"></ng-content>\n\n<dialog #overlay [attr.open]=\"isDialogVisible || null\" class=\"ecl-gallery__overlay\"\n    [attr.aria-label]=\"'ecl.gallery.FULL-SIZE-DISPLAY' | translate\">\n    <header #header class=\"ecl-gallery__close\">\n        <button (click)=\"onClose($event)\" eclButton class=\"ecl-gallery__close-button\" isIconOnly variant=\"ghost\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </button>\n    </header>\n    <section class=\"ecl-gallery__slider\">\n        <div class=\"ecl-gallery__slider-media-container\">\n            @if(item?.isExternalVideo) {\n            <div #externalVideo class=\"ecl-gallery__slider-embed\">\n                <iframe [src]=\"item?.getUrlExternalVideo()\" [style.width.px]=\"getIframeWidth()\"\n                    [style.height.px]=\"getIframeHeight()\" frameborder=\"0\">\n                </iframe>\n            </div>\n            }\n            @if(item?.isImage) {\n            <picture #image class=\"ecl-picture ecl-gallery__picture ecl-gallery__slider-image\">\n                <img [attr.alt]=\"item?.label || null\" [src]=\"item?.src\" />\n            </picture>\n            }\n            @if(item?.isVideo) {\n            <video #video controls=\"controls\" class=\"ecl-gallery__slider-video\"\n                [attr.poster]=\"item.mediaChild?.poster\">\n                @for (el of item.mediaChild?.sources; track el.src) {\n                <source [attr.src]=\"el.src\" [attr.type]=\"el.type\" />\n                }\n                @for (elem of item.mediaChild?.tracks; track elem.src) {\n                <track [attr.src]=\"elem.src\" [attr.kind]=\"elem.kind\"\n                    [attr.srcLang]=\"elem.srcLang\" [attr.label]=\"elem.label\" />\n                }\n            </video>\n            }\n        </div>\n    </section>\n    <footer #footer class=\"ecl-gallery__detail\">\n        <div class=\"ecl-container\">\n            <div class=\"ecl-gallery__pager\">\n                <button eclButton class=\"ecl-gallery__slider-previous\" variant=\"tertiary\" isIconOnly\n                    (click)=\"onPrevious($event)\">\n                    <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-270\"></ecl-icon>\n                    <span eclButtonLabel>\n                        {{ 'ecl.common.PREVIOUS' | translate }}\n                    </span>\n                </button>\n                <div class=\"ecl-gallery__detail-counter\">\n                    <span>{{ itemIndex }}</span> {{ 'ecl.common.OF' | translate }} <span>{{ itemsCount }}</span>\n                </div>\n                <button eclButton class=\"ecl-gallery__slider-next\" variant=\"tertiary\" isIconOnly\n                    (click)=\"onNext($event)\">\n                    <span eclButtonLabel>\n                        {{ 'ecl.common.NEXT' | translate }}\n                    </span>\n                    <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-90\"></ecl-icon>\n                </button>\n            </div>\n            <div class=\"ecl-gallery__detail-actions\">\n                @if(canBeOpenInFullScreen()) {\n                <a eclLink variant=\"standalone\" class=\"ecl-gallery__download\" [href]=\"item?.getDownloadLink()\"\n                    target=\"_blank\" (click)=\"onFullScreenOpen($event)\" isInverted>\n                    <span eclLinkLabel>{{ 'ecl.gallery.VIEW-ORIGINAL' | translate }}</span>\n                    <ecl-icon icon=\"fullscreen\" size=\"fluid\" focusable=\"false\"></ecl-icon>\n                </a>\n                }\n                @if(canBeShared()) {\n                <a eclLink variant=\"standalone\" isInverted class=\"ecl-gallery__share\" href=\"\" (click)=\"onShare($event)\">\n                    <span eclLinkLabel>{{ 'ecl.common.SHARE' | translate }}</span>\n                    <ecl-icon icon=\"share\" size=\"fluid\" focusable=\"false\"></ecl-icon>\n                </a>\n                }\n            </div>\n            @if(item?.description) {\n                <div class=\"ecl-gallery__detail-description\">{{ item?.description }}</div>\n            }\n            @if(item?.meta) {\n                <div class=\"ecl-gallery__detail-meta\">{{ item?.meta }}</div>\n            }\n        </div>\n    </footer>\n</dialog>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [{ type: i1.BreakpointObserver }], propDecorators: { isOpenInFullScreenPossible: [{

package/esm2022/lib/components/ecl-gallery/ecl-gallery.module.mjs

@@ -17,8 +17,8 @@ const COMPONENTS = [
     EclGalleryPictureDirective,
 ];
 export class EclGalleryComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclGalleryComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclGalleryComponentModule, declarations: [EclGalleryComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclGalleryComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclGalleryComponentModule, declarations: [EclGalleryComponent,
             EclGalleryFooterComponent,
             EclGalleryItemComponent,
             EclGalleryMediaDirective,
@@ -27,9 +27,9 @@ export class EclGalleryComponentModule {
             EclGalleryItemComponent,
             EclGalleryMediaDirective,
             EclGalleryPictureDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclGalleryComponentModule, imports: [CommonModule, TranslateModule, EclButtonComponentModule, EclIconComponentModule, EclLinkDirectiveModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclGalleryComponentModule, imports: [CommonModule, TranslateModule, EclButtonComponentModule, EclIconComponentModule, EclLinkDirectiveModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclGalleryComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclGalleryComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, TranslateModule, EclButtonComponentModule, EclIconComponentModule, EclLinkDirectiveModule],

package/esm2022/lib/components/ecl-help-block/ecl-help-block.directive.mjs

@@ -9,10 +9,10 @@ export class EclHelpBlockDirective extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-help-block'), this.isDisabled ? 'ecl-help-block--disabled' : ''].join(' ').trim();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclHelpBlockDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.1", type: EclHelpBlockDirective, selector: "[eclHelpBlock]", inputs: { isDisabled: ["isDisabled", "isDisabled", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclHelpBlockDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-rc.3", type: EclHelpBlockDirective, selector: "[eclHelpBlock]", inputs: { isDisabled: ["isDisabled", "isDisabled", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclHelpBlockDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclHelpBlockDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclHelpBlock]',

package/esm2022/lib/components/ecl-help-block/ecl-help-block.module.mjs

@@ -3,11 +3,11 @@ import { CommonModule } from '@angular/common';
 import { EclHelpBlockDirective } from './ecl-help-block.directive';
 import * as i0 from "@angular/core";
 export class EclHelpBlockDirectiveModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclHelpBlockDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclHelpBlockDirectiveModule, declarations: [EclHelpBlockDirective], imports: [CommonModule], exports: [EclHelpBlockDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclHelpBlockDirectiveModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclHelpBlockDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclHelpBlockDirectiveModule, declarations: [EclHelpBlockDirective], imports: [CommonModule], exports: [EclHelpBlockDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclHelpBlockDirectiveModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclHelpBlockDirectiveModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclHelpBlockDirectiveModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

package/esm2022/lib/components/ecl-icon/ecl-icon.component.mjs

@@ -78,10 +78,10 @@ export class EclIconComponent {
             }
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclIconComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.EclThemeService }, { token: forwardRef(() => ECLBaseDirective) }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.1", type: EclIconComponent, selector: "ecl-icon", inputs: { iconSet: "iconSet", icon: "icon", size: "size", color: "color", transform: "transform", ariaLabelledby: "ariaLabelledby", role: "role", ariaHidden: ["ariaHidden", "ariaHidden", booleanAttribute], focusable: ["focusable", "focusable", booleanAttribute] }, host: { properties: { "class.ecl-u-bg-dark": "this.isColorInverted" } }, viewQueries: [{ propertyName: "svgEl", first: true, predicate: ["svg"], descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i2.ECLBaseDirective }], ngImport: i0, template: "<svg\n    #svg\n    [ngClass]=\"getClasses()\"\n    [attr.aria-hidden]=\"ariaHidden\"\n    [attr.aria-labelledby]=\"ariaLabelledby || null\"\n    [attr.role]=\"role || null\"\n    [attr.focusable]=\"focusable\">\n    <use [attr.xlink:href]=\"iconUrl$ | async\"></use>\n    <ng-content></ng-content>\n</svg>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclIconComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.EclThemeService }, { token: forwardRef(() => ECLBaseDirective) }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.3", type: EclIconComponent, selector: "ecl-icon", inputs: { iconSet: "iconSet", icon: "icon", size: "size", color: "color", transform: "transform", ariaLabelledby: "ariaLabelledby", role: "role", ariaHidden: ["ariaHidden", "ariaHidden", booleanAttribute], focusable: ["focusable", "focusable", booleanAttribute] }, host: { properties: { "class.ecl-u-bg-dark": "this.isColorInverted" } }, viewQueries: [{ propertyName: "svgEl", first: true, predicate: ["svg"], descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i2.ECLBaseDirective }], ngImport: i0, template: "<svg\n    #svg\n    [ngClass]=\"getClasses()\"\n    [attr.aria-hidden]=\"ariaHidden\"\n    [attr.aria-labelledby]=\"ariaLabelledby || null\"\n    [attr.role]=\"role || null\"\n    [attr.focusable]=\"focusable\">\n    <use [attr.xlink:href]=\"iconUrl$ | async\"></use>\n    <ng-content></ng-content>\n</svg>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-icon', hostDirectives: [
                         {

package/esm2022/lib/components/ecl-icon/ecl-icon.module.mjs

@@ -3,11 +3,11 @@ import { CommonModule } from '@angular/common';
 import { EclIconComponent } from './ecl-icon.component';
 import * as i0 from "@angular/core";
 export class EclIconComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclIconComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclIconComponentModule, declarations: [EclIconComponent], imports: [CommonModule], exports: [EclIconComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclIconComponentModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclIconComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclIconComponentModule, declarations: [EclIconComponent], imports: [CommonModule], exports: [EclIconComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclIconComponentModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclIconComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclIconComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

package/esm2022/lib/components/ecl-inpage-navigation/ecl-inpage-navigation-item.component.mjs

@@ -23,10 +23,10 @@ export class EclInpageNavigationItemComponent extends ECLBaseDirective {
     get sectionElement() {
         return document.querySelector(`#${this.sectionId}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclInpageNavigationItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.1", 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)\" href=\"#\" class=\"ecl-inpage-navigation__link\">\n    {{ label }}\n</a>\n", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i1.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclInpageNavigationItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.3", 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)\" href=\"#\" class=\"ecl-inpage-navigation__link\">\n    {{ label }}\n</a>\n", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i1.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclInpageNavigationItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclInpageNavigationItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-inpage-navigation-item', template: "<a eclLink (click)=\"onItemClick($event)\" href=\"#\" class=\"ecl-inpage-navigation__link\">\n    {{ label }}\n</a>\n", styles: [":host{display:list-item}\n"] }]
         }], propDecorators: { cmpClass: [{

package/esm2022/lib/components/ecl-inpage-navigation/ecl-inpage-navigation.component.mjs

@@ -110,10 +110,10 @@ export class EclInpageNavigationComponent extends ECLBaseDirective {
     hasScrollHitBottom() {
         return window.pageYOffset + window.innerHeight === document.documentElement.scrollHeight;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclInpageNavigationComponent, deps: [{ token: i1.EclThemeService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.1", 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            <div class=\"ecl-inpage-navigation__trigger-wrapper\">\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]=\"sizeIcon\" transform=\"rotate-180\" class=\"ecl-inpage-navigation__trigger-icon\"> </ecl-icon>\n                </button>\n             </div>\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: i2.EclStickyContainerComponent, selector: "ecl-sticky-container", inputs: ["isEnabled", "marginTop", "marginBottom"] }, { kind: "component", type: i3.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EclInpageNavigationComponent, deps: [{ token: i1.EclThemeService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.3", 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            <div class=\"ecl-inpage-navigation__trigger-wrapper\">\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]=\"sizeIcon\" transform=\"rotate-180\" class=\"ecl-inpage-navigation__trigger-icon\"> </ecl-icon>\n                </button>\n             </div>\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: i2.EclStickyContainerComponent, selector: "ecl-sticky-container", inputs: ["isEnabled", "marginTop", "marginBottom"] }, { kind: "component", type: i3.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.1", ngImport: i0, type: EclInpageNavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", 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            <div class=\"ecl-inpage-navigation__trigger-wrapper\">\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]=\"sizeIcon\" transform=\"rotate-180\" class=\"ecl-inpage-navigation__trigger-icon\"> </ecl-icon>\n                </button>\n             </div>\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"] }]
         }], ctorParameters: () => [{ type: i1.EclThemeService }, { type: i0.Renderer2 }], propDecorators: { eclTitle: [{