@eui/ecl 21.0.0-next.4 → 21.0.0-next.40

package/fesm2022/eui-ecl-components-ecl-form-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"eui-ecl-components-ecl-form-group.mjs","sources":["../../components/ecl-form-group/ecl-form-group.component.ts","../../components/ecl-form-group/ecl-form-group.component.html","../../components/ecl-form-group/ecl-form-group.module.ts","../../components/ecl-form-group/index.ts","../../components/ecl-form-group/eui-ecl-components-ecl-form-group.ts"],"sourcesContent":["import { Component, ContentChildren, HostBinding, QueryList, forwardRef } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclRangeDirective } from '@eui/ecl/components/ecl-range';\n\n/**\n * The EclFormGroupComponent is a wrapper component used to group form fields together\n * This component automatically detects if any `EclRangeDirective` inputs are nested inside it,\n * and applies the appropriate styling attributes if so.\n */\n@Component({\n    selector: '[eclFormGroup], ecl-form-group',\n    templateUrl: './ecl-form-group.component.html',\n})\nexport class EclFormGroupComponent extends ECLBaseDirective {\n\n    /**\n     * Query list of any descendant `EclRangeDirective` instances within the form group.\n     * Used internally to determine whether the form group contains range inputs.\n     */\n    @ContentChildren(forwardRef(() => EclRangeDirective), { descendants: true })\n    eclRange: QueryList<EclRangeDirective>;\n\n    /**\n     * Applies the base ECL CSS class for a form group to the host element.\n     * Inherited utility method from `ECLBaseDirective` is used to support modifier classes.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-form-group')].join(' ').trim();\n    }\n\n    /**\n     * Adds a data attribute to the host element when at least one `EclRangeDirective`\n     * is found within the form group. This allows conditional styling via CSS.\n     * \n     * @returns `true` if at least one EclRangeDirective is found; otherwise `null`\n     */\n    @HostBinding('attr.data-ecl-range')\n    get hasEclRange(): boolean | null {\n        return this.eclRange.length > 0 || null;\n    }\n}\n","<ng-content></ng-content>\n","import { NgModule } from '@angular/core';\nimport { EclFormGroupComponent } from './ecl-form-group.component';\n\n/**\n * Module that provides the EclFormGroup component.\n *\n * @deprecated Use {@link EUI_ECL_FORM_GROUP} instead.\n */\n@NgModule({\n    imports: [EclFormGroupComponent],\n    exports: [EclFormGroupComponent],\n})\nexport class EclFormGroupModule {}\n","import { EclFormGroupComponent } from './ecl-form-group.component';\n\nexport * from './ecl-form-group.module';\nexport * from './ecl-form-group.component';\n\nexport const EUI_ECL_FORM_GROUP = [\n    EclFormGroupComponent,\n] as const;","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAIA;;;;AAIG;AAKG,MAAO,qBAAsB,SAAQ,gBAAgB,CAAA;AASvD;;;AAGG;AACH,IAAA,IACI,UAAU,GAAA;AACV,QAAA,OAAO,CAAC,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE;IACnE;AAEA;;;;;AAKG;AACH,IAAA,IACI,WAAW,GAAA;QACX,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI;IAC3C;mHA3BS,qBAAqB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;uGAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gCAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,iBAAA,EAAA,qBAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,UAAA,EAAA,SAAA,EAAA,EAAA,CAAA,UAAA,CAAA,MAMI,iBAAiB,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnBvD,6BACA,EAAA,CAAA,CAAA;;gGDYa,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAJjC,SAAS;+BACI,gCAAgC,EAAA,QAAA,EAAA,6BAAA,EAAA;;sBASzC,eAAe;uBAAC,UAAU,CAAC,MAAM,iBAAiB,CAAC,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE;;sBAO1E,WAAW;uBAAC,OAAO;;sBAWnB,WAAW;uBAAC,qBAAqB;;;AElCtC;;;;AAIG;MAKU,kBAAkB,CAAA;mHAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;oHAAlB,kBAAkB,EAAA,OAAA,EAAA,CAHjB,qBAAqB,CAAA,EAAA,OAAA,EAAA,CACrB,qBAAqB,CAAA,EAAA,CAAA,CAAA;oHAEtB,kBAAkB,EAAA,CAAA,CAAA;;gGAAlB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAJ9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,OAAO,EAAE,CAAC,qBAAqB,CAAC;oBAChC,OAAO,EAAE,CAAC,qBAAqB,CAAC;AACnC,iBAAA;;;ACNM,MAAM,kBAAkB,GAAG;IAC9B,qBAAqB;;;ACNzB;;AAEG;;;;"}
+{"version":3,"file":"eui-ecl-components-ecl-form-group.mjs","sources":["../../components/ecl-form-group/ecl-form-group.component.ts","../../components/ecl-form-group/ecl-form-group.component.html","../../components/ecl-form-group/index.ts","../../components/ecl-form-group/eui-ecl-components-ecl-form-group.ts"],"sourcesContent":["import { Component, ContentChildren, HostBinding, QueryList, forwardRef } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclRangeDirective } from '@eui/ecl/components/ecl-range';\n\n/**\n * The EclFormGroupComponent is a wrapper component used to group form fields together\n * This component automatically detects if any `EclRangeDirective` inputs are nested inside it,\n * and applies the appropriate styling attributes if so.\n */\n@Component({\n    selector: '[eclFormGroup], ecl-form-group',\n    templateUrl: './ecl-form-group.component.html',\n})\nexport class EclFormGroupComponent extends ECLBaseDirective {\n\n    /**\n     * Query list of any descendant `EclRangeDirective` instances within the form group.\n     * Used internally to determine whether the form group contains range inputs.\n     */\n    @ContentChildren(forwardRef(() => EclRangeDirective), { descendants: true })\n    eclRange: QueryList<EclRangeDirective>;\n\n    /**\n     * Applies the base ECL CSS class for a form group to the host element.\n     * Inherited utility method from `ECLBaseDirective` is used to support modifier classes.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-form-group')].join(' ').trim();\n    }\n\n    /**\n     * Adds a data attribute to the host element when at least one `EclRangeDirective`\n     * is found within the form group. This allows conditional styling via CSS.\n     * \n     * @returns `true` if at least one EclRangeDirective is found; otherwise `null`\n     */\n    @HostBinding('attr.data-ecl-range')\n    get hasEclRange(): boolean | null {\n        return this.eclRange.length > 0 || null;\n    }\n}\n","<ng-content></ng-content>\n","import { EclFormGroupComponent } from './ecl-form-group.component';\n\nexport * from './ecl-form-group.component';\n\nexport const EUI_ECL_FORM_GROUP = [\n    EclFormGroupComponent,\n] as const;","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAIA;;;;AAIG;AAKG,MAAO,qBAAsB,SAAQ,gBAAgB,CAAA;AASvD;;;AAGG;AACH,IAAA,IACI,UAAU,GAAA;AACV,QAAA,OAAO,CAAC,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE;IACnE;AAEA;;;;;AAKG;AACH,IAAA,IACI,WAAW,GAAA;QACX,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI;IAC3C;8GA3BS,qBAAqB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gCAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,iBAAA,EAAA,qBAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,UAAA,EAAA,SAAA,EAAA,EAAA,CAAA,UAAA,CAAA,MAMI,iBAAiB,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnBvD,6BACA,EAAA,CAAA,CAAA;;2FDYa,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAJjC,SAAS;+BACI,gCAAgC,EAAA,QAAA,EAAA,6BAAA,EAAA;;sBASzC,eAAe;uBAAC,UAAU,CAAC,MAAM,iBAAiB,CAAC,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE;;sBAO1E,WAAW;uBAAC,OAAO;;sBAWnB,WAAW;uBAAC,qBAAqB;;;AEjC/B,MAAM,kBAAkB,GAAG;IAC9B,qBAAqB;;;ACLzB;;AAEG;;;;"}

package/fesm2022/eui-ecl-components-ecl-form-label.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Directive, booleanAttribute, Input, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { HostBinding, Directive, booleanAttribute, Input, ChangeDetectionStrategy, Component } from '@angular/core';
 import { ECLBaseDirective } from '@eui/ecl/core';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
@@ -15,10 +15,10 @@ class ECLFormLabelOptionalDirective {
          */
         this.hasClass = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: ECLFormLabelOptionalDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-rc.2", type: ECLFormLabelOptionalDirective, isStandalone: true, selector: "[eclFormLabelOptional]", host: { properties: { "class.ecl-form-label__optional": "this.hasClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ECLFormLabelOptionalDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: ECLFormLabelOptionalDirective, isStandalone: true, selector: "[eclFormLabelOptional]", host: { properties: { "class.ecl-form-label__optional": "this.hasClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: ECLFormLabelOptionalDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ECLFormLabelOptionalDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclFormLabelOptional]',
@@ -56,12 +56,12 @@ class EclFormLabelComponent extends ECLBaseDirective {
          */
         this.hasClass = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclFormLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-rc.2", type: EclFormLabelComponent, isStandalone: true, selector: "[eclFormLabel]", inputs: { isOptional: ["isOptional", "isOptional", booleanAttribute], isRequired: ["isRequired", "isRequired", booleanAttribute] }, host: { properties: { "class.ecl-form-label": "this.hasClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n@if(isOptional) {\n<span class=\"ecl-form-label__optional\"> ({{ 'ecl.form-label.OPTIONAL' | translate }})</span>\n}\n@if(isRequired) {\n<span class=\"ecl-form-label__required\" role=\"note\">(required)</span>\n}\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: EclFormLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: EclFormLabelComponent, isStandalone: true, selector: "[eclFormLabel]", inputs: { isOptional: ["isOptional", "isOptional", booleanAttribute], isRequired: ["isRequired", "isRequired", booleanAttribute] }, host: { properties: { "class.ecl-form-label": "this.hasClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n@if(isOptional) {\n<span class=\"ecl-form-label__optional\"> ({{ 'ecl.form-label.OPTIONAL' | translate }})</span>\n}\n@if(isRequired) {\n<span class=\"ecl-form-label__required\" role=\"note\">(required)</span>\n}\n\n<ng-content select=\"[eclHelpHidden]\"></ng-content>\n<ng-content select=\"[eclFeedbackHidden]\"></ng-content>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclFormLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: EclFormLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[eclFormLabel]', imports: [TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n@if(isOptional) {\n<span class=\"ecl-form-label__optional\"> ({{ 'ecl.form-label.OPTIONAL' | translate }})</span>\n}\n@if(isRequired) {\n<span class=\"ecl-form-label__required\" role=\"note\">(required)</span>\n}\n" }]
+            args: [{ selector: '[eclFormLabel]', imports: [TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n@if(isOptional) {\n<span class=\"ecl-form-label__optional\"> ({{ 'ecl.form-label.OPTIONAL' | translate }})</span>\n}\n@if(isRequired) {\n<span class=\"ecl-form-label__required\" role=\"note\">(required)</span>\n}\n\n<ng-content select=\"[eclHelpHidden]\"></ng-content>\n<ng-content select=\"[eclFeedbackHidden]\"></ng-content>\n" }]
         }], propDecorators: { isOptional: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -74,30 +74,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.2", ng
             }] } });
 
 /**
- * Module that provides the EclFormLabel component.
- *
- * @deprecated Use {@link EUI_ECL_FORM_LABEL} instead.
+ * The `EclFormLabelHelpHiddenDirective` adds the `ecl-help-block--hidden` CSS class
+ * to an element to hide the help block content by default.
+ */
+class EclHelpHiddenDirective {
+    constructor() {
+        /**
+         * Adds the ECL help block hidden class to the host element.
+         */
+        this.hasClass = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: EclHelpHiddenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: EclHelpHiddenDirective, isStandalone: true, selector: "[eclHelpHidden]", host: { properties: { "class.ecl-help-block--hidden": "this.hasClass" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: EclHelpHiddenDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclHelpHidden]',
+                }]
+        }], propDecorators: { hasClass: [{
+                type: HostBinding,
+                args: ['class.ecl-help-block--hidden']
+            }] } });
+/**
+ * The `EclFormLabelFeedbackHiddenDirective` adds the `ecl-feedback-message--hidden` CSS class
+ * to an element to hide the feedback message content by default.
  */
-class EclFormLabelModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclFormLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclFormLabelModule, imports: [EclFormLabelComponent, ECLFormLabelOptionalDirective], exports: [EclFormLabelComponent, ECLFormLabelOptionalDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclFormLabelModule, imports: [EclFormLabelComponent] }); }
+class EclFeedbackHiddenDirective {
+    constructor() {
+        /**
+         * Adds the ECL feedback message hidden class to the host element.
+         */
+        this.hasClass = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: EclFeedbackHiddenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: EclFeedbackHiddenDirective, isStandalone: true, selector: "[eclFeedbackHidden]", host: { properties: { "class.ecl-feedback-message--hidden": "this.hasClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclFormLabelModule, decorators: [{
-            type: NgModule,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: EclFeedbackHiddenDirective, decorators: [{
+            type: Directive,
             args: [{
-                    imports: [EclFormLabelComponent, ECLFormLabelOptionalDirective],
-                    exports: [EclFormLabelComponent, ECLFormLabelOptionalDirective],
+                    selector: '[eclFeedbackHidden]',
                 }]
-        }] });
+        }], propDecorators: { hasClass: [{
+                type: HostBinding,
+                args: ['class.ecl-feedback-message--hidden']
+            }] } });
 
 const EUI_ECL_FORM_LABEL = [
-    EclFormLabelComponent, ECLFormLabelOptionalDirective,
+    EclFormLabelComponent, ECLFormLabelOptionalDirective, EclHelpHiddenDirective, EclFeedbackHiddenDirective,
 ];
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ECLFormLabelOptionalDirective, EUI_ECL_FORM_LABEL, EclFormLabelComponent, EclFormLabelModule };
+export { ECLFormLabelOptionalDirective, EUI_ECL_FORM_LABEL, EclFeedbackHiddenDirective, EclFormLabelComponent, EclHelpHiddenDirective };
 //# sourceMappingURL=eui-ecl-components-ecl-form-label.mjs.map

package/fesm2022/eui-ecl-components-ecl-form-label.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"eui-ecl-components-ecl-form-label.mjs","sources":["../../components/ecl-form-label/ecl-form-label-optional.directive.ts","../../components/ecl-form-label/ecl-form-label.component.ts","../../components/ecl-form-label/ecl-form-label.component.html","../../components/ecl-form-label/ecl-form-label.module.ts","../../components/ecl-form-label/index.ts","../../components/ecl-form-label/eui-ecl-components-ecl-form-label.ts"],"sourcesContent":["import { Directive, HostBinding } from '@angular/core';\n\n/**\n * The `ECLFormLabelOptionalDirective` adds the `ecl-form-label__optional` CSS class\n * to an element to indicate that a form field is optional.\n */\n@Directive({\n    selector: '[eclFormLabelOptional]',\n})\nexport class ECLFormLabelOptionalDirective {\n\n    /**\n     * Adds the ECL optional label class to the host element.\n     */\n    @HostBinding('class.ecl-form-label__optional') hasClass = true;\n}\n","import { ChangeDetectionStrategy, Component, HostBinding, Input, booleanAttribute } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { TranslateModule } from '@ngx-translate/core';\n\n/**\n * The `EclFormLabelComponent` is used to render a form label with optional or required state.\n * \n * It supports ECL design system styling and applies relevant classes or attributes\n * based on the input flags.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: '[eclFormLabel]',\n    templateUrl: './ecl-form-label.component.html',\n    imports: [TranslateModule],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EclFormLabelComponent extends ECLBaseDirective {\n\n    /**\n     * Marks the form label as optional.\n     * When `true`, the label can display additional styling or indicators for optional fields.\n     * \n     * Defaults to `false`.\n     */\n    @Input({ transform: booleanAttribute }) isOptional = false;\n\n    /**\n     * Marks the form label as required.\n     * When `true`, the label can display styling or indicators for required fields.\n     * \n     * Defaults to `false`.\n     */\n    @Input({ transform: booleanAttribute }) isRequired = false;\n\n    /**\n     * Applies the base ECL class for form labels to the host element.\n     */\n    @HostBinding('class.ecl-form-label') hasClass = true;\n}\n","<ng-content></ng-content>\n@if(isOptional) {\n<span class=\"ecl-form-label__optional\"> ({{ 'ecl.form-label.OPTIONAL' | translate }})</span>\n}\n@if(isRequired) {\n<span class=\"ecl-form-label__required\" role=\"note\">(required)</span>\n}\n","import { NgModule } from '@angular/core';\nimport { ECLFormLabelOptionalDirective } from './ecl-form-label-optional.directive';\nimport { EclFormLabelComponent } from './ecl-form-label.component';\n\n/**\n * Module that provides the EclFormLabel component.\n *\n * @deprecated Use {@link EUI_ECL_FORM_LABEL} instead.\n */\n@NgModule({\n    imports: [EclFormLabelComponent, ECLFormLabelOptionalDirective],\n    exports: [EclFormLabelComponent, ECLFormLabelOptionalDirective],\n})\nexport class EclFormLabelModule {}\n","import { ECLFormLabelOptionalDirective } from './ecl-form-label-optional.directive';\nimport { EclFormLabelComponent } from './ecl-form-label.component';\n\nexport * from './ecl-form-label.module';\nexport * from './ecl-form-label.component';\nexport * from './ecl-form-label-optional.directive';\n\nexport const EUI_ECL_FORM_LABEL = [\n    EclFormLabelComponent, ECLFormLabelOptionalDirective,\n] as const;","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"eui-ecl-components-ecl-form-label.mjs","sources":["../../components/ecl-form-label/ecl-form-label-optional.directive.ts","../../components/ecl-form-label/ecl-form-label.component.ts","../../components/ecl-form-label/ecl-form-label.component.html","../../components/ecl-form-label/ecl-form-label-hidden.directive.ts","../../components/ecl-form-label/index.ts","../../components/ecl-form-label/eui-ecl-components-ecl-form-label.ts"],"sourcesContent":["import { Directive, HostBinding } from '@angular/core';\n\n/**\n * The `ECLFormLabelOptionalDirective` adds the `ecl-form-label__optional` CSS class\n * to an element to indicate that a form field is optional.\n */\n@Directive({\n    selector: '[eclFormLabelOptional]',\n})\nexport class ECLFormLabelOptionalDirective {\n\n    /**\n     * Adds the ECL optional label class to the host element.\n     */\n    @HostBinding('class.ecl-form-label__optional') hasClass = true;\n}\n","import { ChangeDetectionStrategy, Component, HostBinding, Input, booleanAttribute } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { TranslateModule } from '@ngx-translate/core';\n\n/**\n * The `EclFormLabelComponent` is used to render a form label with optional or required state.\n * \n * It supports ECL design system styling and applies relevant classes or attributes\n * based on the input flags.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: '[eclFormLabel]',\n    templateUrl: './ecl-form-label.component.html',\n    imports: [TranslateModule],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EclFormLabelComponent extends ECLBaseDirective {\n\n    /**\n     * Marks the form label as optional.\n     * When `true`, the label can display additional styling or indicators for optional fields.\n     * \n     * Defaults to `false`.\n     */\n    @Input({ transform: booleanAttribute }) isOptional = false;\n\n    /**\n     * Marks the form label as required.\n     * When `true`, the label can display styling or indicators for required fields.\n     * \n     * Defaults to `false`.\n     */\n    @Input({ transform: booleanAttribute }) isRequired = false;\n\n    /**\n     * Applies the base ECL class for form labels to the host element.\n     */\n    @HostBinding('class.ecl-form-label') hasClass = true;\n}\n","<ng-content></ng-content>\n@if(isOptional) {\n<span class=\"ecl-form-label__optional\"> ({{ 'ecl.form-label.OPTIONAL' | translate }})</span>\n}\n@if(isRequired) {\n<span class=\"ecl-form-label__required\" role=\"note\">(required)</span>\n}\n\n<ng-content select=\"[eclHelpHidden]\"></ng-content>\n<ng-content select=\"[eclFeedbackHidden]\"></ng-content>\n","import { Directive, HostBinding } from '@angular/core';\n\n/**\n * The `EclFormLabelHelpHiddenDirective` adds the `ecl-help-block--hidden` CSS class\n * to an element to hide the help block content by default.\n */\n@Directive({\n    selector: '[eclHelpHidden]',\n})\nexport class EclHelpHiddenDirective {\n\n    /**\n     * Adds the ECL help block hidden class to the host element.\n     */\n    @HostBinding('class.ecl-help-block--hidden') hasClass = true;\n}\n\n/**\n * The `EclFormLabelFeedbackHiddenDirective` adds the `ecl-feedback-message--hidden` CSS class\n * to an element to hide the feedback message content by default.\n */\n@Directive({\n    selector: '[eclFeedbackHidden]',\n})\nexport class EclFeedbackHiddenDirective {\n\n    /**\n     * Adds the ECL feedback message hidden class to the host element.\n     */\n    @HostBinding('class.ecl-feedback-message--hidden') hasClass = true;\n}\n","import { ECLFormLabelOptionalDirective } from './ecl-form-label-optional.directive';\nimport { EclFormLabelComponent } from './ecl-form-label.component';\nimport { EclHelpHiddenDirective, EclFeedbackHiddenDirective } from './ecl-form-label-hidden.directive';\n\nexport * from './ecl-form-label.component';\nexport * from './ecl-form-label-optional.directive';\nexport * from './ecl-form-label-hidden.directive';\n\nexport const EUI_ECL_FORM_LABEL = [\n    EclFormLabelComponent, ECLFormLabelOptionalDirective, EclHelpHiddenDirective, EclFeedbackHiddenDirective,\n] as const;","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/eui-ecl-components-ecl-gallery.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, HostBinding, Component, inject, ElementRef, afterNextRender, booleanAttribute, Directive, ChangeDetectorRef, Renderer2, HostListener, ContentChild, PLATFORM_ID, numberAttribute, ViewChild, ContentChildren, NgModule } from '@angular/core';
+import { EventEmitter, Output, Input, HostBinding, Component, inject, ElementRef, afterNextRender, booleanAttribute, Directive, ChangeDetectorRef, Renderer2, HostListener, ContentChild, PLATFORM_ID, numberAttribute, ViewChild, ContentChildren } from '@angular/core';
 import * as i2 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { EclBaseEvent, ECLBaseDirective } from '@eui/ecl/core';
@@ -89,10 +89,10 @@ class EclGalleryFooterComponent {
         this._isExpanded = !this._isExpanded;
         this.toggleItems.next(new EclGalleryToggleItemsEvent(this.isExpanded));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclGalleryFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-rc.2", type: EclGalleryFooterComponent, isStandalone: true, selector: "ecl-gallery-footer", inputs: { infoId: "infoId" }, outputs: { toggleItems: "toggleItems" }, host: { properties: { "class.ecl-gallery__footer": "this.hasClass" } }, ngImport: i0, template: "<div class=\"ecl-gallery__info\">\n    <div class=\"ecl-gallery__info-total\" [id]=\"infoId\">\n        <strong>{{ itemsCount }}</strong>{{ 'ecl.gallery.MEDIA-FILES-COUNT' | translate }}\n    </div>\n    @if(isShowToggleBtn) {\n    @if(!isExpanded) {\n    <button [attr.aria-describedby]=\"infoId\" eclButton variant=\"tertiary\" class=\"ecl-gallery__view-all\"\n        (click)=\"onToggle()\">\n        {{ 'ecl.SHOW-MORE-ITEMS' | translate }}\n    </button>\n    } @else {\n    <button [attr.aria-describedby]=\"infoId\" eclButton variant=\"tertiary\" class=\"ecl-gallery__view-all\"\n        (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>", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: EclGalleryFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: EclGalleryFooterComponent, isStandalone: true, selector: "ecl-gallery-footer", inputs: { infoId: "infoId" }, outputs: { toggleItems: "toggleItems" }, host: { properties: { "class.ecl-gallery__footer": "this.hasClass" } }, ngImport: i0, template: "<div class=\"ecl-gallery__info\">\n    <div class=\"ecl-gallery__info-total\" [id]=\"infoId\">\n        <strong>{{ itemsCount }}</strong>{{ 'ecl.gallery.MEDIA-FILES-COUNT' | translate }}\n    </div>\n    @if(isShowToggleBtn) {\n    @if(!isExpanded) {\n    <button [attr.aria-describedby]=\"infoId\" eclButton variant=\"tertiary\" class=\"ecl-gallery__view-all\"\n        (click)=\"onToggle()\">\n        {{ 'ecl.SHOW-MORE-ITEMS' | translate }}\n    </button>\n    } @else {\n    <button [attr.aria-describedby]=\"infoId\" eclButton variant=\"tertiary\" class=\"ecl-gallery__view-all\"\n        (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>", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclGalleryFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: EclGalleryFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-gallery-footer', imports: [TranslateModule, ...EUI_ECL_BUTTON], template: "<div class=\"ecl-gallery__info\">\n    <div class=\"ecl-gallery__info-total\" [id]=\"infoId\">\n        <strong>{{ itemsCount }}</strong>{{ 'ecl.gallery.MEDIA-FILES-COUNT' | translate }}\n    </div>\n    @if(isShowToggleBtn) {\n    @if(!isExpanded) {\n    <button [attr.aria-describedby]=\"infoId\" eclButton variant=\"tertiary\" class=\"ecl-gallery__view-all\"\n        (click)=\"onToggle()\">\n        {{ 'ecl.SHOW-MORE-ITEMS' | translate }}\n    </button>\n    } @else {\n    <button [attr.aria-describedby]=\"infoId\" eclButton variant=\"tertiary\" class=\"ecl-gallery__view-all\"\n        (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>" }]
         }], propDecorators: { hasClass: [{
@@ -170,10 +170,10 @@ class EclGalleryMediaDirective extends ECLBaseDirective {
     getHostElement() {
         return this.el.nativeElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclGalleryMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.0-rc.2", type: EclGalleryMediaDirective, isStandalone: true, selector: "[eclGalleryMedia], [eclGalleryImage]", inputs: { poster: "poster", hasZoom: ["hasZoom", "hasZoom", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "class.ecl-video": "this.isVideo" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: EclGalleryMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.2", type: EclGalleryMediaDirective, isStandalone: true, selector: "[eclGalleryMedia], [eclGalleryImage]", inputs: { poster: "poster", hasZoom: ["hasZoom", "hasZoom", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "class.ecl-video": "this.isVideo" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclGalleryMediaDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: EclGalleryMediaDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclGalleryMedia], [eclGalleryImage]',
@@ -235,10 +235,10 @@ class EclGalleryPictureDirective extends ECLBaseDirective {
     getHostElement() {
         return this.el.nativeElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclGalleryPictureDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-rc.2", type: EclGalleryPictureDirective, isStandalone: true, selector: "picture[eclGalleryPicture]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: EclGalleryPictureDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: EclGalleryPictureDirective, isStandalone: true, selector: "picture[eclGalleryPicture]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclGalleryPictureDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: EclGalleryPictureDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'picture[eclGalleryPicture]',
@@ -258,10 +258,10 @@ class EclGalleryThumbnailDirective extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-picture ecl-gallery__thumbnail')].join(' ').trim();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclGalleryThumbnailDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.0-rc.2", type: EclGalleryThumbnailDirective, isStandalone: true, selector: "picture[eclGalleryThumbnail]", inputs: { hasZoom: ["hasZoom", "hasZoom", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "class.ecl-picture--zoom": "this.hasZoom" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: EclGalleryThumbnailDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.2", type: EclGalleryThumbnailDirective, isStandalone: true, selector: "picture[eclGalleryThumbnail]", inputs: { hasZoom: ["hasZoom", "hasZoom", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "class.ecl-picture--zoom": "this.hasZoom" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclGalleryThumbnailDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: EclGalleryThumbnailDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'picture[eclGalleryThumbnail]',
@@ -319,12 +319,6 @@ class EclGalleryItemComponent extends ECLBaseDirective {
             this.itemId = crypto.randomUUID();
         }
     }
-    // TODO: to be removed in v19. Thumbnail should be added by user.
-    ngAfterContentInit() {
-        if (this.galleryPicture && !this.galleryThumbnail && !this.isImage) {
-            this.galleryPicture.isThumbnail = true;
-        }
-    }
     /**
      * Set if the item should be shown in the gallery by default.
      */
@@ -365,21 +359,15 @@ class EclGalleryItemComponent extends ECLBaseDirective {
     get titleId() {
         return `${this.itemId}-title`;
     }
-    /**
-     * If the thimbnail was added by user. If not -> we are adding it in the view.
-     */
-    get hasGalleryThumbnail() {
-        return !this.galleryThumbnail && this.isImage;
-    }
     onFocus() {
         this.renderer.selectRootElement(this.el.nativeElement.children[0], true).focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclGalleryItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-rc.2", type: EclGalleryItemComponent, isStandalone: true, selector: "ecl-gallery-item", inputs: { isShareable: ["isShareable", "isShareable", booleanAttribute], mediaType: "mediaType", src: "src", meta: "meta", description: "description", srVideoAudioDescription: "srVideoAudioDescription", icon: "icon", title: "title", itemId: "itemId" }, 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 }, { propertyName: "galleryThumbnail", first: true, predicate: EclGalleryThumbnailDirective, descendants: true }, { propertyName: "galleryPicture", first: true, predicate: EclGalleryPictureDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<a [href]=\"src\" class=\"ecl-gallery__item-link\" [class.ecl-gallery__item__link--frozen]=\"isNoOverlay\" [id]=\"itemId\">\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        @if(hasGalleryThumbnail) { <!-- TODO: to be removed in v21. Thumbnail should be added by user. -->\n            <picture class=\"ecl-picture ecl-gallery__thumbnail\">\n                @for(el of galleryPicture?.sources; track el.srcset ) {\n                    <source [attr.srcset]=\"el.srcset\" [attr.media]=\" el.media\">\n                }\n                <img class=\"ecl-gallery__image\"\n                     [attr.src]=\"galleryPicture?.img.src\"\n                     [attr.alt]=\"galleryPicture?.img.alt\" />\n            </picture>\n        }\n        <ng-content select=\"[eclGalleryPicture], [eclGalleryThumbnail], [eclGalleryMedia], [eclGalleryImage]\"></ng-content>\n        <figcaption class=\"ecl-gallery__description\">\n            @if(title) {\n                <span class=\"ecl-gallery__title\" [id]=\"titleId\">{{title}}</span>\n            }\n            @if(description) {\n                <span class=\"ecl-gallery__caption\">{{ description }}</span>\n            }\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>", dependencies: [{ kind: "component", type: i1$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: EclGalleryItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: EclGalleryItemComponent, isStandalone: true, selector: "ecl-gallery-item", inputs: { isShareable: ["isShareable", "isShareable", booleanAttribute], mediaType: "mediaType", src: "src", meta: "meta", description: "description", srVideoAudioDescription: "srVideoAudioDescription", icon: "icon", title: "title", itemId: "itemId" }, 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 }, { propertyName: "galleryPicture", first: true, predicate: EclGalleryPictureDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<a [href]=\"src\" class=\"ecl-gallery__item-link\" [class.ecl-gallery__item__link--frozen]=\"isNoOverlay\" [id]=\"itemId\">\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], [eclGalleryThumbnail], [eclGalleryMedia], [eclGalleryImage]\"></ng-content>\n        <figcaption class=\"ecl-gallery__description\">\n            @if(title) {\n                <span class=\"ecl-gallery__title\" [id]=\"titleId\">{{title}}</span>\n            }\n            @if(description) {\n                <span class=\"ecl-gallery__caption\">{{ description }}</span>\n            }\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>", dependencies: [{ kind: "component", type: i1$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclGalleryItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: EclGalleryItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-gallery-item', imports: [...EUI_ECL_ICON], template: "<a [href]=\"src\" class=\"ecl-gallery__item-link\" [class.ecl-gallery__item__link--frozen]=\"isNoOverlay\" [id]=\"itemId\">\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        @if(hasGalleryThumbnail) { <!-- TODO: to be removed in v21. Thumbnail should be added by user. -->\n            <picture class=\"ecl-picture ecl-gallery__thumbnail\">\n                @for(el of galleryPicture?.sources; track el.srcset ) {\n                    <source [attr.srcset]=\"el.srcset\" [attr.media]=\" el.media\">\n                }\n                <img class=\"ecl-gallery__image\"\n                     [attr.src]=\"galleryPicture?.img.src\"\n                     [attr.alt]=\"galleryPicture?.img.alt\" />\n            </picture>\n        }\n        <ng-content select=\"[eclGalleryPicture], [eclGalleryThumbnail], [eclGalleryMedia], [eclGalleryImage]\"></ng-content>\n        <figcaption class=\"ecl-gallery__description\">\n            @if(title) {\n                <span class=\"ecl-gallery__title\" [id]=\"titleId\">{{title}}</span>\n            }\n            @if(description) {\n                <span class=\"ecl-gallery__caption\">{{ description }}</span>\n            }\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>" }]
+            args: [{ selector: 'ecl-gallery-item', imports: [...EUI_ECL_ICON], template: "<a [href]=\"src\" class=\"ecl-gallery__item-link\" [class.ecl-gallery__item__link--frozen]=\"isNoOverlay\" [id]=\"itemId\">\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], [eclGalleryThumbnail], [eclGalleryMedia], [eclGalleryImage]\"></ng-content>\n        <figcaption class=\"ecl-gallery__description\">\n            @if(title) {\n                <span class=\"ecl-gallery__title\" [id]=\"titleId\">{{title}}</span>\n            }\n            @if(description) {\n                <span class=\"ecl-gallery__caption\">{{ description }}</span>\n            }\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>" }]
         }], propDecorators: { isShareable: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -404,9 +392,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.2", ng
             }], mediaChild: [{
                 type: ContentChild,
                 args: [EclGalleryMediaDirective]
-            }], galleryThumbnail: [{
-                type: ContentChild,
-                args: [EclGalleryThumbnailDirective]
             }], galleryPicture: [{
                 type: ContentChild,
                 args: [EclGalleryPictureDirective]
@@ -449,7 +434,6 @@ class EclGalleryComponent extends ECLBaseDirective {
          * If set to true, a specific class will be applied, so the gallery thumbnails are displayed as a grid, all with same size.
          */
         this.isGrid = false;
-        // TODO: not used, to be removed in v20.
         this.columns = 3;
         /**
          * This property can be used with 'isGrid' property set to true. By default gridTemplate is 0 and all the thimbnails have same size.
@@ -722,10 +706,10 @@ class EclGalleryComponent extends ECLBaseDirective {
     getVisibleItems() {
         return this.galleryItems.filter((item, cnt) => cnt < this.maxVisibleItems);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclGalleryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-rc.2", type: EclGalleryComponent, isStandalone: true, selector: "ecl-gallery", inputs: { isOpenInFullScreenPossible: ["isOpenInFullScreenPossible", "isOpenInFullScreenPossible", booleanAttribute], isShareable: ["isShareable", "isShareable", booleanAttribute], isFullWidth: ["isFullWidth", "isFullWidth", booleanAttribute], isNoOverlay: ["isNoOverlay", "isNoOverlay", booleanAttribute], isShowTitleOnHover: ["isShowTitleOnHover", "isShowTitleOnHover", booleanAttribute], maxVisibleItems: ["maxVisibleItems", "maxVisibleItems", numberAttribute], isGrid: ["isGrid", "isGrid", booleanAttribute], columns: ["columns", "columns", numberAttribute], gridTemplate: "gridTemplate", ratio: "ratio" }, outputs: { show: "show", hide: "hide", openFullScreen: "openFullScreen", share: "share", itemSwitch: "itemSwitch" }, host: { listeners: { "document:keydown.escape": "onEscapeKeydownHandler()", "window:resize": "iframeResize()" }, properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, queries: [{ propertyName: "galleryFooter", first: true, predicate: EclGalleryFooterComponent, descendants: true }, { propertyName: "galleryItems", predicate: EclGalleryItemComponent }], viewQueries: [{ 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=\"tertiary\" eclStyle=\"inverted\">\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 class=\"ecl-gallery__slider-embed\">\n                @if (item?.srVideoAudioDescription) {\n                    <div class=\"ecl-gallery__slider-embed-audio\">{{item?.srVideoAudioDescription}}</div>\n                }\n                <iframe [src]=\"item?.getUrlExternalVideo()\" [style.width.px]=\"getIframeWidth()\"\n                    [style.height.px]=\"getIframeHeight()\" [attr.title]=\"item.title + ' - Video player'\" frameborder=\"0\">\n                </iframe>\n            </div>\n            }\n            @if(item?.isImage) {\n            <picture class=\"ecl-picture ecl-gallery__picture ecl-gallery__slider-image\">\n                @for(el of item.galleryPicture?.sources; track el.srcset) {\n                    <source [attr.srcset]=\"el.srcset\" [attr.media]=\" el.media\">\n                }\n                <img [attr.alt]=\"item?.galleryPicture?.img.alt || null\"\n                     [src]=\"item?.galleryPicture?.img.src\"\n                     [attr.loading]=\"item?.galleryPicture?.img.loading || null\" />\n            </picture>\n            }\n            @if(item?.isVideo) {\n            <video controls=\"controls\" class=\"ecl-gallery__slider-video\" [attr.aria-label]=\"item.title + ' - Video player'\"\n                [attr.poster]=\"item.mediaChild?.poster\" playsinline>\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\" [attr.srcLang]=\"elem.srcLang\"\n                    [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__detail-container\">\n                <div class=\"ecl-gallery__pager\">\n                    <div class=\"ecl-gallery__detail-counter\">\n                        <span>{{ itemIndex }}</span> {{ 'ecl.common.OF' | translate }} <span>{{ itemsCount }}</span>\n                    </div>\n                    <div class=\"ecl-gallery__controls\">\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                        <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>\n                <div class=\"ecl-gallery__detail-actions\">\n                    <ng-container *ngTemplateOutlet=\"links\"></ng-container>\n                </div>\n            </div>\n            <div class=\"ecl-gallery__detail-description\">\n                @if(isMobile) {\n                    <div class=\"ecl-gallery__detail-actions-mobile\">\n                        <ng-container *ngTemplateOutlet=\"links\"></ng-container>\n                    </div>\n                }\n                @if(item?.title) {\n                    <span class=\"ecl-gallery__title\" [id]=\"item?.itemId\">{{ item?.title }}</span>\n                }\n                @if(item?.description) {\n                    <span class=\"ecl-gallery__caption\">{{ item?.description }}</span>\n                }\n                @if(item?.meta) {\n                    <span class=\"ecl-gallery__meta\">{{ item?.meta }}</span>\n                }\n            </div>\n        </div>\n    </footer>\n</dialog>\n\n<ng-template #links>\n    @if(canBeOpenInFullScreen()) {\n        <a eclLink [attr.aria-describedby]=\"item?.titleId\" variant=\"standalone\"\n           class=\"ecl-gallery__download\" [href]=\"item?.getDownloadLink()\" target=\"_blank\"\n           (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 [attr.aria-describedby]=\"item?.titleId\" eclLink variant=\"standalone\" isInverted\n           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</ng-template>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "directive", type: i1.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i1$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: i3.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isHighlight", "isNoVisited", "variant"] }, { kind: "directive", type: i3.EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: EclGalleryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: EclGalleryComponent, isStandalone: true, selector: "ecl-gallery", inputs: { isOpenInFullScreenPossible: ["isOpenInFullScreenPossible", "isOpenInFullScreenPossible", booleanAttribute], isShareable: ["isShareable", "isShareable", booleanAttribute], isFullWidth: ["isFullWidth", "isFullWidth", booleanAttribute], isNoOverlay: ["isNoOverlay", "isNoOverlay", booleanAttribute], isShowTitleOnHover: ["isShowTitleOnHover", "isShowTitleOnHover", booleanAttribute], maxVisibleItems: ["maxVisibleItems", "maxVisibleItems", numberAttribute], isGrid: ["isGrid", "isGrid", booleanAttribute], columns: ["columns", "columns", numberAttribute], gridTemplate: "gridTemplate", ratio: "ratio" }, outputs: { show: "show", hide: "hide", openFullScreen: "openFullScreen", share: "share", itemSwitch: "itemSwitch" }, host: { listeners: { "document:keydown.escape": "onEscapeKeydownHandler()", "window:resize": "iframeResize()" }, properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, queries: [{ propertyName: "galleryFooter", first: true, predicate: EclGalleryFooterComponent, descendants: true }, { propertyName: "galleryItems", predicate: EclGalleryItemComponent }], viewQueries: [{ 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=\"tertiary\" eclStyle=\"inverted\">\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 class=\"ecl-gallery__slider-embed\">\n                @if (item?.srVideoAudioDescription) {\n                    <div class=\"ecl-gallery__slider-embed-audio\">{{item?.srVideoAudioDescription}}</div>\n                }\n                <iframe [src]=\"item?.getUrlExternalVideo()\" [style.width.px]=\"getIframeWidth()\"\n                    [style.height.px]=\"getIframeHeight()\" [attr.title]=\"item.title + ' - Video player'\" frameborder=\"0\">\n                </iframe>\n            </div>\n            }\n            @if(item?.isImage) {\n            <picture class=\"ecl-picture ecl-gallery__picture ecl-gallery__slider-image\">\n                @for(el of item.galleryPicture?.sources; track el.srcset) {\n                    <source [attr.srcset]=\"el.srcset\" [attr.media]=\" el.media\">\n                }\n                <img [attr.alt]=\"item?.galleryPicture?.img.alt || null\"\n                     [src]=\"item?.galleryPicture?.img.src\"\n                     [attr.loading]=\"item?.galleryPicture?.img.loading || null\" />\n            </picture>\n            }\n            @if(item?.isVideo) {\n            <video controls=\"controls\" class=\"ecl-gallery__slider-video\" [attr.aria-label]=\"item.title + ' - Video player'\"\n                [attr.poster]=\"item.mediaChild?.poster\" playsinline>\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\" [attr.srcLang]=\"elem.srcLang\"\n                    [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__detail-container\">\n                <div class=\"ecl-gallery__pager\">\n                    <div class=\"ecl-gallery__detail-counter\">\n                        <span>{{ itemIndex }}</span> {{ 'ecl.common.OF' | translate }} <span>{{ itemsCount }}</span>\n                    </div>\n                    <div class=\"ecl-gallery__controls\">\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                        <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>\n                <div class=\"ecl-gallery__detail-actions\">\n                    <ng-container *ngTemplateOutlet=\"links\"></ng-container>\n                </div>\n            </div>\n            <div class=\"ecl-gallery__detail-description\">\n                @if(isMobile) {\n                    <div class=\"ecl-gallery__detail-actions-mobile\">\n                        <ng-container *ngTemplateOutlet=\"links\"></ng-container>\n                    </div>\n                }\n                @if(item?.title) {\n                    <span class=\"ecl-gallery__title\" [id]=\"item?.itemId\">{{ item?.title }}</span>\n                }\n                @if(item?.description) {\n                    <span class=\"ecl-gallery__caption\">{{ item?.description }}</span>\n                }\n                @if(item?.meta) {\n                    <span class=\"ecl-gallery__meta\">{{ item?.meta }}</span>\n                }\n            </div>\n        </div>\n    </footer>\n</dialog>\n\n<ng-template #links>\n    @if(canBeOpenInFullScreen()) {\n        <a eclLink [attr.aria-describedby]=\"item?.titleId\" variant=\"standalone\"\n           class=\"ecl-gallery__download\" [href]=\"item?.getDownloadLink()\" target=\"_blank\"\n           (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 [attr.aria-describedby]=\"item?.titleId\" eclLink variant=\"standalone\" isInverted\n           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</ng-template>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "directive", type: i1.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i1$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: i3.EclLinkDirective, selector: "[eclLink]", inputs: ["extraAttributes", "isInverted", "isIconOnly", "isHighlight", "isNoVisited", "variant"] }, { kind: "directive", type: i3.EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclGalleryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: EclGalleryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-gallery', imports: [TranslateModule, NgTemplateOutlet, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK], 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=\"tertiary\" eclStyle=\"inverted\">\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 class=\"ecl-gallery__slider-embed\">\n                @if (item?.srVideoAudioDescription) {\n                    <div class=\"ecl-gallery__slider-embed-audio\">{{item?.srVideoAudioDescription}}</div>\n                }\n                <iframe [src]=\"item?.getUrlExternalVideo()\" [style.width.px]=\"getIframeWidth()\"\n                    [style.height.px]=\"getIframeHeight()\" [attr.title]=\"item.title + ' - Video player'\" frameborder=\"0\">\n                </iframe>\n            </div>\n            }\n            @if(item?.isImage) {\n            <picture class=\"ecl-picture ecl-gallery__picture ecl-gallery__slider-image\">\n                @for(el of item.galleryPicture?.sources; track el.srcset) {\n                    <source [attr.srcset]=\"el.srcset\" [attr.media]=\" el.media\">\n                }\n                <img [attr.alt]=\"item?.galleryPicture?.img.alt || null\"\n                     [src]=\"item?.galleryPicture?.img.src\"\n                     [attr.loading]=\"item?.galleryPicture?.img.loading || null\" />\n            </picture>\n            }\n            @if(item?.isVideo) {\n            <video controls=\"controls\" class=\"ecl-gallery__slider-video\" [attr.aria-label]=\"item.title + ' - Video player'\"\n                [attr.poster]=\"item.mediaChild?.poster\" playsinline>\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\" [attr.srcLang]=\"elem.srcLang\"\n                    [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__detail-container\">\n                <div class=\"ecl-gallery__pager\">\n                    <div class=\"ecl-gallery__detail-counter\">\n                        <span>{{ itemIndex }}</span> {{ 'ecl.common.OF' | translate }} <span>{{ itemsCount }}</span>\n                    </div>\n                    <div class=\"ecl-gallery__controls\">\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                        <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>\n                <div class=\"ecl-gallery__detail-actions\">\n                    <ng-container *ngTemplateOutlet=\"links\"></ng-container>\n                </div>\n            </div>\n            <div class=\"ecl-gallery__detail-description\">\n                @if(isMobile) {\n                    <div class=\"ecl-gallery__detail-actions-mobile\">\n                        <ng-container *ngTemplateOutlet=\"links\"></ng-container>\n                    </div>\n                }\n                @if(item?.title) {\n                    <span class=\"ecl-gallery__title\" [id]=\"item?.itemId\">{{ item?.title }}</span>\n                }\n                @if(item?.description) {\n                    <span class=\"ecl-gallery__caption\">{{ item?.description }}</span>\n                }\n                @if(item?.meta) {\n                    <span class=\"ecl-gallery__meta\">{{ item?.meta }}</span>\n                }\n            </div>\n        </div>\n    </footer>\n</dialog>\n\n<ng-template #links>\n    @if(canBeOpenInFullScreen()) {\n        <a eclLink [attr.aria-describedby]=\"item?.titleId\" variant=\"standalone\"\n           class=\"ecl-gallery__download\" [href]=\"item?.getDownloadLink()\" target=\"_blank\"\n           (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 [attr.aria-describedby]=\"item?.titleId\" eclLink variant=\"standalone\" isInverted\n           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</ng-template>", styles: [":host{display:block}\n"] }]
         }], propDecorators: { isOpenInFullScreenPossible: [{
@@ -795,44 +779,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.2", ng
                 args: ['window:resize']
             }] } });
 
-const COMPONENTS = [
-    EclGalleryComponent,
-    EclGalleryFooterComponent,
-    EclGalleryItemComponent,
-    EclGalleryMediaDirective,
-    EclGalleryPictureDirective,
-    EclGalleryThumbnailDirective,
-];
-/**
- * Module that provides the EclGalleryComponent and its dependencies.
- *
- * @deprecated Use {@link EUI_ECL_GALLERY} instead.
- */
-class EclGalleryModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclGalleryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclGalleryModule, imports: [EclGalleryComponent,
-            EclGalleryFooterComponent,
-            EclGalleryItemComponent,
-            EclGalleryMediaDirective,
-            EclGalleryPictureDirective,
-            EclGalleryThumbnailDirective], exports: [EclGalleryComponent,
-            EclGalleryFooterComponent,
-            EclGalleryItemComponent,
-            EclGalleryMediaDirective,
-            EclGalleryPictureDirective,
-            EclGalleryThumbnailDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclGalleryModule, imports: [EclGalleryComponent,
-            EclGalleryFooterComponent,
-            EclGalleryItemComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclGalleryModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [...COMPONENTS],
-                    exports: [...COMPONENTS],
-                }]
-        }] });
-
 const EUI_ECL_GALLERY = [
     EclGalleryComponent,
     EclGalleryFooterComponent,
@@ -846,5 +792,5 @@ const EUI_ECL_GALLERY = [
  * Generated bundle index. Do not edit.
  */
 
-export { EUI_ECL_GALLERY, EclGalleryComponent, EclGalleryFooterComponent, EclGalleryFullScreenEvent, EclGalleryHideEvent, EclGalleryItemClickEvent, EclGalleryItemComponent, EclGalleryItemEvent, EclGalleryMediaDirective, EclGalleryMediaSource, EclGalleryMediaTrack, EclGalleryModule, EclGalleryPictureDirective, EclGalleryPictureImage, EclGalleryPictureSource, EclGalleryShareEvent, EclGalleryShowEvent, EclGalleryThumbnailDirective, EclGalleryToggleItemsEvent };
+export { EUI_ECL_GALLERY, EclGalleryComponent, EclGalleryFooterComponent, EclGalleryFullScreenEvent, EclGalleryHideEvent, EclGalleryItemClickEvent, EclGalleryItemComponent, EclGalleryItemEvent, EclGalleryMediaDirective, EclGalleryMediaSource, EclGalleryMediaTrack, EclGalleryPictureDirective, EclGalleryPictureImage, EclGalleryPictureSource, EclGalleryShareEvent, EclGalleryShowEvent, EclGalleryThumbnailDirective, EclGalleryToggleItemsEvent };
 //# sourceMappingURL=eui-ecl-components-ecl-gallery.mjs.map