npm - @eui/ecl - Versions diffs - 21.0.0-next.1 → 21.0.0-next.11 - Mend

@eui/ecl 21.0.0-next.1 → 21.0.0-next.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (295) hide show

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

@@ -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.0", ngImport: i0, type: ECLFormLabelOptionalDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", 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.0", 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.0", ngImport: i0, type: EclFormLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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.0", 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,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.2", ng
             }] } });
 /**
- * Module that provides the EclFormLabel component.
+ * 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.0", ngImport: i0, type: EclHelpHiddenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", 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.0", 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 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.0", ngImport: i0, type: EclFeedbackHiddenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", 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", ngImport: i0, type: EclFeedbackHiddenDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclFeedbackHidden]',
+                }]
+        }], propDecorators: { hasClass: [{
+                type: HostBinding,
+                args: ['class.ecl-feedback-message--hidden']
+            }] } });
+/**
+ * Module that provides the EclFormLabel component and helper directives.
  *
  * @deprecated Use {@link EUI_ECL_FORM_LABEL} instead.
  */
 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] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EclFormLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: EclFormLabelModule, imports: [EclFormLabelComponent,
+            ECLFormLabelOptionalDirective,
+            EclHelpHiddenDirective,
+            EclFeedbackHiddenDirective], exports: [EclFormLabelComponent,
+            ECLFormLabelOptionalDirective,
+            EclHelpHiddenDirective,
+            EclFeedbackHiddenDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EclFormLabelModule, imports: [EclFormLabelComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclFormLabelModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EclFormLabelModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [EclFormLabelComponent, ECLFormLabelOptionalDirective],
-                    exports: [EclFormLabelComponent, ECLFormLabelOptionalDirective],
+                    imports: [
+                        EclFormLabelComponent,
+                        ECLFormLabelOptionalDirective,
+                        EclHelpHiddenDirective,
+                        EclFeedbackHiddenDirective,
+                    ],
+                    exports: [
+                        EclFormLabelComponent,
+                        ECLFormLabelOptionalDirective,
+                        EclHelpHiddenDirective,
+                        EclFeedbackHiddenDirective,
+                    ],
                 }]
         }] });
 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, EclFormLabelModule, EclHelpHiddenDirective };
 //# sourceMappingURL=eui-ecl-components-ecl-form-label.mjs.map

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

	@@ -1 +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":";;;;;;AAEA;;;AAGG;MAIU,6BAA6B,CAAA;AAH1C,IAAA,WAAA,GAAA;AAKI;;AAEG;QAC4C,IAAA,CAAA,QAAQ,GAAG,IAAI;AACjE,IAAA;~~mHANY~~,6BAA6B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;~~uGAA7B~~,6BAA6B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,gCAAA,EAAA,eAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;~~gGAA7B~~,6BAA6B,EAAA,UAAA,EAAA,CAAA;kBAHzC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,wBAAwB;AACrC,iBAAA;;sBAMI,WAAW;uBAAC,gCAAgC;;;ACVjD;;;;;AAKG;AAQG,MAAO,qBAAsB,SAAQ,gBAAgB,CAAA;AAP3D,IAAA,WAAA,GAAA;;AASI;;;;;AAKG;QACqC,IAAA,CAAA,UAAU,GAAG,KAAK;AAE1D;;;;;AAKG;QACqC,IAAA,CAAA,UAAU,GAAG,KAAK;AAE1D;;AAEG;QACkC,IAAA,CAAA,QAAQ,GAAG,IAAI;AACvD,IAAA;~~mHAtBY~~,qBAAqB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~aAAA~~,EAAA,IAAA,EAAA,qBAAqB,qGAQV,gBAAgB,CAAA,EAAA,UAAA,EAAA,CAAA,YAAA,EAAA,YAAA,EAQhB,gBAAgB,CAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,sBAAA,EAAA,eAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjCxC,~~mPAOA~~,~~2CDOc~~,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;~~gGAGhB~~,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAPjC,SAAS;AAEI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,WAEjB,CAAC,eAAe,CAAC,EAAA,eAAA,EACT,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,~~mPAAA~~,EAAA;;sBAU9C,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;;sBAQrC,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;;sBAKrC,WAAW;uBAAC,sBAAsB;;;~~AElCvC~~;;;;AAIG;~~MAKU~~,kBAAkB,CAAA;~~mHAAlB~~,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~aAAA~~,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,~~YAHjB~~,qBAAqB,~~EAAE,~~6BAA6B,~~CAAA~~,~~EAAA~~,~~OAAA~~,~~EAAA~~,~~CACpD,~~qBAAqB,~~EAAE,~~6BAA6B,CAAA,EAAA,CAAA,CAAA;~~AAErD~~,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~aAAA~~,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,~~YAHjB~~,qBAAqB,CAAA,EAAA,CAAA,CAAA;;~~gGAGtB~~,kBAAkB,EAAA,UAAA,EAAA,CAAA;~~kBAJ9B~~,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;~~AACN~~,oBAAA,OAAO,EAAE,~~CAAC,~~qBAAqB,~~EAAE,~~6BAA6B,~~CAAC~~;~~AAC/D~~,oBAAA,OAAO,EAAE,~~CAAC,~~qBAAqB,~~EAAE,~~6BAA6B,~~CAAC~~;~~AAClE~~,iBAAA;;;~~ACLM~~,MAAM,kBAAkB,GAAG;AAC9B,IAAA,qBAAqB,EAAE,6BAA6B;;;~~ACRxD~~;;AAEG;;;;"}
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-hidden.directive.ts","../../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\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 { NgModule } from '@angular/core';\nimport { ECLFormLabelOptionalDirective } from './ecl-form-label-optional.directive';\nimport { EclFormLabelComponent } from './ecl-form-label.component';\nimport { EclHelpHiddenDirective, EclFeedbackHiddenDirective } from './ecl-form-label-hidden.directive';\n\n/\n Module that provides the EclFormLabel component and helper directives.\n \n @deprecated Use {@link EUI_ECL_FORM_LABEL} instead.\n /\n@NgModule({\n imports: [\n EclFormLabelComponent,\n ECLFormLabelOptionalDirective,\n EclHelpHiddenDirective,\n EclFeedbackHiddenDirective,\n ],\n exports: [\n EclFormLabelComponent,\n ECLFormLabelOptionalDirective,\n EclHelpHiddenDirective,\n EclFeedbackHiddenDirective,\n ],\n})\nexport class EclFormLabelModule {}\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.module';\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 CHANGED Viewed

@@ -89,12 +89,12 @@ 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.gallery.VIEW-ALL' | 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.0", ngImport: i0, type: EclGalleryFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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.0", 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.gallery.VIEW-ALL' | 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>" }]
+            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: [{
                 type: HostBinding,
                 args: ['class.ecl-gallery__footer']
@@ -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.0", ngImport: i0, type: EclGalleryMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.0", 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.0", 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.0", ngImport: i0, type: EclGalleryPictureDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", 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.0", 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.0", ngImport: i0, type: EclGalleryThumbnailDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.0", 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.0", ngImport: i0, type: EclGalleryThumbnailDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'picture[eclGalleryThumbnail]',
@@ -374,10 +374,10 @@ class EclGalleryItemComponent extends ECLBaseDirective {
     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.0", ngImport: i0, type: EclGalleryItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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"] }] }); }
 }
-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.0", 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>" }]
         }], propDecorators: { isShareable: [{
@@ -722,10 +722,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", "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.0", ngImport: i0, type: EclGalleryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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" }] }); }
 }
-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.0", 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: [{
@@ -809,8 +809,8 @@ const COMPONENTS = [
  * @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,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EclGalleryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: EclGalleryModule, imports: [EclGalleryComponent,
             EclGalleryFooterComponent,
             EclGalleryItemComponent,
             EclGalleryMediaDirective,
@@ -821,11 +821,11 @@ class EclGalleryModule {
             EclGalleryMediaDirective,
             EclGalleryPictureDirective,
             EclGalleryThumbnailDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0-rc.2", ngImport: i0, type: EclGalleryModule, imports: [EclGalleryComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EclGalleryModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...COMPONENTS],