@eui/ecl 21.0.0-alpha.31 → 21.0.0-alpha.32

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

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Input, Component, ContentChild, Directive, NgModule } from '@angular/core';
+import { booleanAttribute, HostBinding, Input, Component, ContentChild, Directive, NgModule } from '@angular/core';
 import { ECLBaseDirective } from '@eui/ecl/core';
 import { EclMediaContainerComponent } from '@eui/ecl/components/ecl-media-container';
 
+// TODO: ecl-featured-item-footer and the associated directives are removed. Not used anymore. breaking change v21.
 /**
  * Custom ECL component, that adds visual support to a piece of content. Uses <ecl-media-container>.
  */
@@ -13,6 +14,9 @@ class EclFeaturedComponent extends ECLBaseDirective {
          * The position of the image in the component. Can be 'left' or 'right'. The default value is 'left'.
          */
         this.position = 'left';
+        // TODO: new parameter for v21 - for EC variant only
+        /** Gives a different display for the link in highlighted mode */
+        this.isLinkHighlighted = false;
         this.role = 'article';
     }
     /**
@@ -24,21 +28,22 @@ class EclFeaturedComponent extends ECLBaseDirective {
             this.variant ? `ecl-featured-item--${this.variant}` : '',
         ].join(' ').trim();
     }
-    ngOnInit() {
-        if (this.variant === 'simple') {
-            console.warn('"simple" variant is deprecated and will be removed in the next version (v20).');
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.5", ngImport: i0, type: EclFeaturedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.5", type: EclFeaturedComponent, isStandalone: true, selector: "ecl-featured", inputs: { position: "position", variant: "variant" }, host: { properties: { "attr.role": "this.role", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-featured-item__container\" [class.ecl-featured-item__container--right]=\"position === 'right'\">\n    <ng-content></ng-content>\n</div>\n<ng-content select=\"[eclFeaturedItemFooter]\"></ng-content>" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.0-next.5", type: EclFeaturedComponent, isStandalone: true, selector: "ecl-featured", inputs: { position: "position", variant: "variant", isLinkHighlighted: ["isLinkHighlighted", "isLinkHighlighted", booleanAttribute] }, host: { properties: { "class.ecl-featured-item--link-highlighted": "this.isLinkHighlighted", "attr.role": "this.role", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-featured-item__container\" [class.ecl-featured-item__container--right]=\"position === 'right'\">\n    <ng-content></ng-content>\n</div>" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.5", ngImport: i0, type: EclFeaturedComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-featured', template: "<div class=\"ecl-featured-item__container\" [class.ecl-featured-item__container--right]=\"position === 'right'\">\n    <ng-content></ng-content>\n</div>\n<ng-content select=\"[eclFeaturedItemFooter]\"></ng-content>" }]
+            args: [{ selector: 'ecl-featured', template: "<div class=\"ecl-featured-item__container\" [class.ecl-featured-item__container--right]=\"position === 'right'\">\n    <ng-content></ng-content>\n</div>" }]
         }], propDecorators: { position: [{
                 type: Input
             }], variant: [{
                 type: Input
+            }], isLinkHighlighted: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }, {
+                type: HostBinding,
+                args: ['class.ecl-featured-item--link-highlighted']
             }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
@@ -54,6 +59,7 @@ class EclFeaturedItemComponent extends ECLBaseDirective {
     constructor() {
         super(...arguments);
         this.eclTitle = '';
+        this.titleId = null;
         this.className = true;
     }
     get hasTitle() {
@@ -65,13 +71,15 @@ class EclFeaturedItemComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.5", ngImport: i0, type: EclFeaturedItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.5", type: EclFeaturedItemComponent, isStandalone: true, selector: "ecl-featured-item", inputs: { eclTitle: "eclTitle" }, host: { properties: { "class.ecl-featured-item__item": "this.className" } }, queries: [{ propertyName: "mediaContainer", first: true, predicate: EclMediaContainerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if(hasTitle) {\n    <div class=\"ecl-featured-item__title\">\n        <span class=\"ecl-featured-item__title-content\">{{ eclTitle }}</span>\n    </div>\n}\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.5", type: EclFeaturedItemComponent, isStandalone: true, selector: "ecl-featured-item", inputs: { eclTitle: "eclTitle", titleId: "titleId" }, host: { properties: { "class.ecl-featured-item__item": "this.className" } }, queries: [{ propertyName: "mediaContainer", first: true, predicate: EclMediaContainerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if(hasTitle) {\n    <div class=\"ecl-featured-item__title\">\n        {{ eclTitle }}\n    </div>\n}\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.5", ngImport: i0, type: EclFeaturedItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-featured-item', template: "@if(hasTitle) {\n    <div class=\"ecl-featured-item__title\">\n        <span class=\"ecl-featured-item__title-content\">{{ eclTitle }}</span>\n    </div>\n}\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'ecl-featured-item', template: "@if(hasTitle) {\n    <div class=\"ecl-featured-item__title\">\n        {{ eclTitle }}\n    </div>\n}\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { eclTitle: [{
                 type: Input
+            }], titleId: [{
+                type: Input
             }], mediaContainer: [{
                 type: ContentChild,
                 args: [EclMediaContainerComponent]
@@ -100,25 +108,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.5",
                 args: ['class.ecl-featured-item__description']
             }] } });
 
-/**
- * Applies specific additional class to style <ecl-featured-item-footer> component.
- */
-class EclFeaturedItemFooterComponent extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.className = true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.5", ngImport: i0, type: EclFeaturedItemFooterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.5", type: EclFeaturedItemFooterComponent, isStandalone: true, selector: "[eclFeaturedItemFooter]", host: { properties: { "class.ecl-featured-item__footer": "this.className" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-featured-item__footer-content\">\n    <div class=\"ecl-featured-item__footer-description\">\n        <ng-content></ng-content>\n    </div>\n    <ng-content select=\"[eclFeaturedItemFooterLink]\"></ng-content>\n</div>\n<ng-content select=\"[eclFeaturedItemFooterPicture]\"></ng-content>" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.5", ngImport: i0, type: EclFeaturedItemFooterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: '[eclFeaturedItemFooter]', template: "<div class=\"ecl-featured-item__footer-content\">\n    <div class=\"ecl-featured-item__footer-description\">\n        <ng-content></ng-content>\n    </div>\n    <ng-content select=\"[eclFeaturedItemFooterLink]\"></ng-content>\n</div>\n<ng-content select=\"[eclFeaturedItemFooterPicture]\"></ng-content>" }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class.ecl-featured-item__footer']
-            }] } });
-
 /**
  * Applies specific additional class for the eclLink directive, used in <ecl-featured-item> construction.
  */
@@ -139,54 +128,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.5",
                 type: HostBinding,
                 args: ['class.ecl-featured-item__link']
             }] } });
-/**
- * Applies specific additional class for the eclLink directive, used in <ecl-featured-item-footer>.
- */
-class EclFeaturedItemFooterLinkDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.className = true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.5", ngImport: i0, type: EclFeaturedItemFooterLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.5", type: EclFeaturedItemFooterLinkDirective, isStandalone: true, selector: "[eclFeaturedItemFooterLink]", host: { properties: { "class.ecl-featured-item__footer-link": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.5", ngImport: i0, type: EclFeaturedItemFooterLinkDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[eclFeaturedItemFooterLink]',
-                }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class.ecl-featured-item__footer-link']
-            }] } });
-/**
- * Applies specific additional class for the <picture> element, used in <ecl-featured-item-footer>.
- */
-class EclFeaturedItemFooterPictureDirective extends ECLBaseDirective {
-    get cssClasses() {
-        return [super.getCssClasses('ecl-picture ecl-featured-item__footer-picture')].join(' ').trim();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.5", ngImport: i0, type: EclFeaturedItemFooterPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.5", type: EclFeaturedItemFooterPictureDirective, isStandalone: true, selector: "picture[eclFeaturedItemFooterPicture]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.5", ngImport: i0, type: EclFeaturedItemFooterPictureDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'picture[eclFeaturedItemFooterPicture]',
-                }]
-        }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
 
 const COMPONENTS = [
     EclFeaturedComponent,
     EclFeaturedItemComponent,
     EclFeaturedItemLinkDirective,
     EclFeaturedItemDescriptionComponent,
-    EclFeaturedItemFooterPictureDirective,
-    EclFeaturedItemFooterLinkDirective,
-    EclFeaturedItemFooterComponent,
 ];
 /**
  * @description
@@ -199,16 +146,10 @@ class EclFeaturedModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0-next.5", ngImport: i0, type: EclFeaturedModule, imports: [EclFeaturedComponent,
             EclFeaturedItemComponent,
             EclFeaturedItemLinkDirective,
-            EclFeaturedItemDescriptionComponent,
-            EclFeaturedItemFooterPictureDirective,
-            EclFeaturedItemFooterLinkDirective,
-            EclFeaturedItemFooterComponent], exports: [EclFeaturedComponent,
+            EclFeaturedItemDescriptionComponent], exports: [EclFeaturedComponent,
             EclFeaturedItemComponent,
             EclFeaturedItemLinkDirective,
-            EclFeaturedItemDescriptionComponent,
-            EclFeaturedItemFooterPictureDirective,
-            EclFeaturedItemFooterLinkDirective,
-            EclFeaturedItemFooterComponent] }); }
+            EclFeaturedItemDescriptionComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0-next.5", ngImport: i0, type: EclFeaturedModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.5", ngImport: i0, type: EclFeaturedModule, decorators: [{
@@ -224,14 +165,11 @@ const EUI_ECL_FEATURED = [
     EclFeaturedItemComponent,
     EclFeaturedItemLinkDirective,
     EclFeaturedItemDescriptionComponent,
-    EclFeaturedItemFooterPictureDirective,
-    EclFeaturedItemFooterLinkDirective,
-    EclFeaturedItemFooterComponent,
 ];
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { EUI_ECL_FEATURED, EclFeaturedComponent, EclFeaturedItemComponent, EclFeaturedItemDescriptionComponent, EclFeaturedItemFooterComponent, EclFeaturedItemFooterLinkDirective, EclFeaturedItemFooterPictureDirective, EclFeaturedItemLinkDirective, EclFeaturedModule };
+export { EUI_ECL_FEATURED, EclFeaturedComponent, EclFeaturedItemComponent, EclFeaturedItemDescriptionComponent, EclFeaturedItemLinkDirective, EclFeaturedModule };
 //# sourceMappingURL=eui-ecl-components-ecl-featured.mjs.map

package/fesm2022/eui-ecl-components-ecl-featured.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"eui-ecl-components-ecl-featured.mjs","sources":["../../components/ecl-featured/ecl-featured.component.ts","../../components/ecl-featured/ecl-featured.component.html","../../components/ecl-featured/ecl-featured-item.component.ts","../../components/ecl-featured/ecl-featured-item.component.html","../../components/ecl-featured/ecl-featured-item-description.component.ts","../../components/ecl-featured/ecl-featured-item-description.component.html","../../components/ecl-featured/ecl-featured-item-footer.component.ts","../../components/ecl-featured/ecl-featured-item-footer.component.html","../../components/ecl-featured/ecl-featured-item-link.directive.ts","../../components/ecl-featured/ecl-featured.module.ts","../../components/ecl-featured/index.ts","../../components/ecl-featured/eui-ecl-components-ecl-featured.ts"],"sourcesContent":["import { Component, HostBinding, Input, OnInit } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Custom ECL component, that adds visual support to a piece of content. Uses <ecl-media-container>.\n */\n@Component({\n    selector: 'ecl-featured',\n    templateUrl: './ecl-featured.component.html',\n})\nexport class EclFeaturedComponent extends ECLBaseDirective implements OnInit {\n    /**\n     * The position of the image in the component. Can be 'left' or 'right'. The default value is 'left'.\n     */\n    @Input() position: 'left' | 'right' = 'left';\n    // TODO: variant 'simple' is deprecated and will be removed in v20\n    /**\n     * 'highligh' varian, applies class to make more stand out appearance of the component.\n     */\n    @Input() variant: 'highlight' | 'simple';\n\n    @HostBinding('attr.role') role = 'article';\n\n    /**\n     * Adds specific classes to the component.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-featured-item'),\n            this.variant ?`ecl-featured-item--${this.variant}`: '',\n        ].join(' ').trim();\n    }\n\n    ngOnInit(): void {\n        if (this.variant === 'simple') {\n            console.warn('\"simple\" variant is deprecated and will be removed in the next version (v20).');\n        }\n    }\n}\n","<div class=\"ecl-featured-item__container\" [class.ecl-featured-item__container--right]=\"position === 'right'\">\n    <ng-content></ng-content>\n</div>\n<ng-content select=\"[eclFeaturedItemFooter]\"></ng-content>","import { AfterContentInit, Component, ContentChild, HostBinding, Input } from '@angular/core';\nimport { EclMediaContainerComponent } from '@eui/ecl/components/ecl-media-container';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Container for the text part - title and description of the <ecl-featured> component.\n */\n@Component({\n    selector: 'ecl-featured-item',\n    templateUrl: './ecl-featured-item.component.html',\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n})\nexport class EclFeaturedItemComponent extends ECLBaseDirective implements AfterContentInit {\n    @Input() eclTitle = '';\n    @ContentChild(EclMediaContainerComponent) mediaContainer: EclMediaContainerComponent;\n    @HostBinding('class.ecl-featured-item__item') className = true;\n\n    get hasTitle(): boolean {\n        return this.eclTitle !== '';\n    }\n\n    ngAfterContentInit(): void {\n        if (this.mediaContainer) {\n            this.mediaContainer.class = 'ecl-featured-item__media_container';\n        }\n    }\n}\n","@if(hasTitle) {\n    <div class=\"ecl-featured-item__title\">\n        <span class=\"ecl-featured-item__title-content\">{{ eclTitle }}</span>\n    </div>\n}\n<ng-content></ng-content>\n","import { Component, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Applies specific additional class to style <ecl-featured-item-description> component, as a part of the\n *  <ecl-featured> component.\n */\n@Component({\n    selector: 'ecl-featured-item-description',\n    templateUrl: './ecl-featured-item-description.component.html',\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n})\nexport class EclFeaturedItemDescriptionComponent extends ECLBaseDirective {\n    @HostBinding('class.ecl-featured-item__description') className = true;\n}\n","<ng-content></ng-content>\n","import { Component, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Applies specific additional class to style <ecl-featured-item-footer> component.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: '[eclFeaturedItemFooter]',\n    templateUrl: './ecl-featured-item-footer.component.html',\n})\nexport class EclFeaturedItemFooterComponent extends ECLBaseDirective {\n    @HostBinding('class.ecl-featured-item__footer') className = true;\n}\n","<div class=\"ecl-featured-item__footer-content\">\n    <div class=\"ecl-featured-item__footer-description\">\n        <ng-content></ng-content>\n    </div>\n    <ng-content select=\"[eclFeaturedItemFooterLink]\"></ng-content>\n</div>\n<ng-content select=\"[eclFeaturedItemFooterPicture]\"></ng-content>","import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Applies specific additional class for the eclLink directive, used in <ecl-featured-item> construction.\n */\n@Directive({\n    selector: '[eclFeaturedItemLink]',\n})\nexport class EclFeaturedItemLinkDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-featured-item__link') className = true;\n}\n\n/**\n * Applies specific additional class for the eclLink directive, used in <ecl-featured-item-footer>.\n */\n@Directive({\n    selector: '[eclFeaturedItemFooterLink]',\n})\nexport class EclFeaturedItemFooterLinkDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-featured-item__footer-link') className = true;\n}\n\n/**\n * Applies specific additional class for the <picture> element, used in <ecl-featured-item-footer>.\n */\n@Directive({\n    selector: 'picture[eclFeaturedItemFooterPicture]',\n})\nexport class EclFeaturedItemFooterPictureDirective extends ECLBaseDirective {\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-picture ecl-featured-item__footer-picture')].join(' ').trim();\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { EclFeaturedComponent } from './ecl-featured.component';\nimport { EclFeaturedItemComponent } from './ecl-featured-item.component';\nimport { EclFeaturedItemLinkDirective, EclFeaturedItemFooterPictureDirective, EclFeaturedItemFooterLinkDirective } from './ecl-featured-item-link.directive';\nimport { EclFeaturedItemDescriptionComponent } from './ecl-featured-item-description.component';\nimport { EclFeaturedItemFooterComponent } from './ecl-featured-item-footer.component';\n\nconst COMPONENTS = [\n  EclFeaturedComponent,\n  EclFeaturedItemComponent,\n  EclFeaturedItemLinkDirective,\n  EclFeaturedItemDescriptionComponent,\n  EclFeaturedItemFooterPictureDirective,\n  EclFeaturedItemFooterLinkDirective,\n  EclFeaturedItemFooterComponent,\n];\n\n/**\n * @description\n * Module that provides the EclFeatured component and its dependencies.\n *\n * @deprecated Use {@link EUI_ECL_FEATURED} instead.\n */\n@NgModule({\n  imports: [...COMPONENTS],\n  exports: [...COMPONENTS],\n})\nexport class EclFeaturedModule {}","import { EclFeaturedComponent } from './ecl-featured.component';\nimport { EclFeaturedItemComponent } from './ecl-featured-item.component';\nimport { EclFeaturedItemDescriptionComponent } from './ecl-featured-item-description.component';\nimport { EclFeaturedItemFooterComponent } from './ecl-featured-item-footer.component';\nimport { EclFeaturedItemFooterLinkDirective, EclFeaturedItemFooterPictureDirective, EclFeaturedItemLinkDirective } from './ecl-featured-item-link.directive';\n\nexport * from './ecl-featured.module';\nexport * from './ecl-featured.component';\nexport * from './ecl-featured-item.component';\nexport * from './ecl-featured-item-description.component';\nexport * from './ecl-featured-item-footer.component';\nexport * from './ecl-featured-item-link.directive';\n\nexport const EUI_ECL_FEATURED = [\n    EclFeaturedComponent,\n    EclFeaturedItemComponent,\n    EclFeaturedItemLinkDirective,\n    EclFeaturedItemDescriptionComponent,\n    EclFeaturedItemFooterPictureDirective,\n    EclFeaturedItemFooterLinkDirective,\n    EclFeaturedItemFooterComponent,\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-featured.mjs","sources":["../../components/ecl-featured/ecl-featured.component.ts","../../components/ecl-featured/ecl-featured.component.html","../../components/ecl-featured/ecl-featured-item.component.ts","../../components/ecl-featured/ecl-featured-item.component.html","../../components/ecl-featured/ecl-featured-item-description.component.ts","../../components/ecl-featured/ecl-featured-item-description.component.html","../../components/ecl-featured/ecl-featured-item-link.directive.ts","../../components/ecl-featured/ecl-featured.module.ts","../../components/ecl-featured/index.ts","../../components/ecl-featured/eui-ecl-components-ecl-featured.ts"],"sourcesContent":["import { booleanAttribute, Component, HostBinding, Input } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n// TODO: ecl-featured-item-footer and the associated directives are removed. Not used anymore. breaking change v21.\n/**\n * Custom ECL component, that adds visual support to a piece of content. Uses <ecl-media-container>.\n */\n@Component({\n    selector: 'ecl-featured',\n    templateUrl: './ecl-featured.component.html',\n})\nexport class EclFeaturedComponent extends ECLBaseDirective {\n    /**\n     * The position of the image in the component. Can be 'left' or 'right'. The default value is 'left'.\n     */\n    @Input() position: 'left' | 'right' = 'left';\n    \n    /**\n     * 'highligh' varian, applies class to make more stand out appearance of the component.\n     */\n    @Input() variant: 'highlight'; // TODO: variant 'simple' is removed in v21 - breaking change\n\n     // TODO: new parameter for v21 - for EC variant only\n    /** Gives a different display for the link in highlighted mode */\n    @Input({ transform: booleanAttribute }) @HostBinding('class.ecl-featured-item--link-highlighted') isLinkHighlighted = false;\n\n    @HostBinding('attr.role') role = 'article';\n\n    /**\n     * Adds specific classes to the component.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-featured-item'),\n            this.variant ?`ecl-featured-item--${this.variant}`: '',\n        ].join(' ').trim();\n    }\n}\n","<div class=\"ecl-featured-item__container\" [class.ecl-featured-item__container--right]=\"position === 'right'\">\n    <ng-content></ng-content>\n</div>","import { AfterContentInit, Component, ContentChild, HostBinding, Input } from '@angular/core';\nimport { EclMediaContainerComponent } from '@eui/ecl/components/ecl-media-container';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Container for the text part - title and description of the <ecl-featured> component.\n */\n@Component({\n    selector: 'ecl-featured-item',\n    templateUrl: './ecl-featured-item.component.html',\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n})\nexport class EclFeaturedItemComponent extends ECLBaseDirective implements AfterContentInit {\n    @Input() eclTitle = '';\n    @Input() titleId = null;\n    @ContentChild(EclMediaContainerComponent) mediaContainer: EclMediaContainerComponent;\n    @HostBinding('class.ecl-featured-item__item') className = true;\n\n    get hasTitle(): boolean {\n        return this.eclTitle !== '';\n    }\n\n    ngAfterContentInit(): void {\n        if (this.mediaContainer) {\n            this.mediaContainer.class = 'ecl-featured-item__media_container';\n        }\n    }\n}\n","@if(hasTitle) {\n    <div class=\"ecl-featured-item__title\">\n        {{ eclTitle }}\n    </div>\n}\n<ng-content></ng-content>\n","import { Component, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Applies specific additional class to style <ecl-featured-item-description> component, as a part of the\n *  <ecl-featured> component.\n */\n@Component({\n    selector: 'ecl-featured-item-description',\n    templateUrl: './ecl-featured-item-description.component.html',\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n})\nexport class EclFeaturedItemDescriptionComponent extends ECLBaseDirective {\n    @HostBinding('class.ecl-featured-item__description') className = true;\n}\n","<ng-content></ng-content>\n","import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Applies specific additional class for the eclLink directive, used in <ecl-featured-item> construction.\n */\n@Directive({\n    selector: '[eclFeaturedItemLink]',\n})\nexport class EclFeaturedItemLinkDirective extends ECLBaseDirective {\n    @HostBinding('class.ecl-featured-item__link') className = true;\n}\n","import { NgModule } from '@angular/core';\nimport { EclFeaturedComponent } from './ecl-featured.component';\nimport { EclFeaturedItemComponent } from './ecl-featured-item.component';\nimport { EclFeaturedItemLinkDirective } from './ecl-featured-item-link.directive';\nimport { EclFeaturedItemDescriptionComponent } from './ecl-featured-item-description.component';\n\nconst COMPONENTS = [\n  EclFeaturedComponent,\n  EclFeaturedItemComponent,\n  EclFeaturedItemLinkDirective,\n  EclFeaturedItemDescriptionComponent,\n];\n\n/**\n * @description\n * Module that provides the EclFeatured component and its dependencies.\n *\n * @deprecated Use {@link EUI_ECL_FEATURED} instead.\n */\n@NgModule({\n  imports: [...COMPONENTS],\n  exports: [...COMPONENTS],\n})\nexport class EclFeaturedModule {}","import { EclFeaturedComponent } from './ecl-featured.component';\nimport { EclFeaturedItemComponent } from './ecl-featured-item.component';\nimport { EclFeaturedItemDescriptionComponent } from './ecl-featured-item-description.component';\nimport { EclFeaturedItemLinkDirective } from './ecl-featured-item-link.directive';\n\nexport * from './ecl-featured.module';\nexport * from './ecl-featured.component';\nexport * from './ecl-featured-item.component';\nexport * from './ecl-featured-item-description.component';\nexport * from './ecl-featured-item-link.directive';\n\nexport const EUI_ECL_FEATURED = [\n    EclFeaturedComponent,\n    EclFeaturedItemComponent,\n    EclFeaturedItemLinkDirective,\n    EclFeaturedItemDescriptionComponent,\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-feedback-message.mjs

@@ -3,6 +3,7 @@ import { forwardRef, ContentChildren, HostBinding, Directive, NgModule } from '@
 import { EclIconComponent } from '@eui/ecl/components/ecl-icon';
 import { ECLBaseDirective } from '@eui/ecl/core';
 
+// TODO: check the look of this component after icons update.
 /**
  * Directive that renders a feedback message following the ECL design system.
  * It automatically styles its content and nested icon components accordingly.

package/fesm2022/eui-ecl-components-ecl-feedback-message.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"eui-ecl-components-ecl-feedback-message.mjs","sources":["../../components/ecl-feedback-message/ecl-feedback-message.directive.ts","../../components/ecl-feedback-message/ecl-feedback-message.module.ts","../../components/ecl-feedback-message/index.ts","../../components/ecl-feedback-message/eui-ecl-components-ecl-feedback-message.ts"],"sourcesContent":["import { AfterContentInit, ContentChildren, Directive, forwardRef, HostBinding, QueryList } from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive that renders a feedback message following the ECL design system.\n * It automatically styles its content and nested icon components accordingly.\n *\n * Should be applied to a container element that wraps a feedback message.\n */\n@Directive({\n    selector: '[eclFeedbackMessage]',\n})\nexport class EclFeedbackMessageDirective extends ECLBaseDirective implements AfterContentInit {\n    /**\n     * Applies the appropriate ECL feedback message CSS class to the host element.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-feedback-message')].join(' ').trim();\n    }\n\n    /**\n     * Queries all nested `EclIconComponent` instances inside the host element.\n     * These icons will receive the `ecl-feedback-message__icon` styling class.\n     */\n    @ContentChildren(forwardRef(() => EclIconComponent)) eclIconComponents: QueryList<EclIconComponent>;\n\n    /**\n     * Lifecycle hook that runs after content (e.g. projected icons) is initialized.\n     * Adds the `ecl-feedback-message__icon` CSS class to each nested icon component.\n     */\n    ngAfterContentInit(): void {\n        if (this.eclIconComponents) {\n            setTimeout(() => {\n                this.eclIconComponents.forEach((icn) => {\n                    icn.baseDirective.class = [icn.baseDirective.class, 'ecl-feedback-message__icon'].join(' ');\n                });\n            });\n        }\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { EclFeedbackMessageDirective } from './ecl-feedback-message.directive';\n\n/**\n * Module that provides the EclFeedbackMessage directive.\n *\n * @deprecated Use {@link EUI_ECL_FEEDBACK_MESSAGE} instead.\n */\n@NgModule({\n    imports: [EclFeedbackMessageDirective],\n    exports: [EclFeedbackMessageDirective],\n})\nexport class EclFeedbackMessageModule {}\n","import { EclFeedbackMessageDirective } from './ecl-feedback-message.directive';\n\nexport * from './ecl-feedback-message.module';\nexport * from './ecl-feedback-message.directive';\n\nexport const EUI_ECL_FEEDBACK_MESSAGE = [\n    EclFeedbackMessageDirective,\n] as const;","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAIA;;;;;AAKG;AAIG,MAAO,2BAA4B,SAAQ,gBAAgB,CAAA;AAC7D;;AAEG;AACH,IAAA,IACI,UAAU,GAAA;AACV,QAAA,OAAO,CAAC,KAAK,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE;IACzE;AAQA;;;AAGG;IACH,kBAAkB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,iBAAiB,EAAE;YACxB,UAAU,CAAC,MAAK;gBACZ,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;AACnC,oBAAA,GAAG,CAAC,aAAa,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,aAAa,CAAC,KAAK,EAAE,4BAA4B,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;AAC/F,gBAAA,CAAC,CAAC;AACN,YAAA,CAAC,CAAC;QACN;IACJ;qHA3BS,2BAA2B,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA3B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,eAAA,EAAA,IAAA,EAAA,2BAA2B,4LAaF,gBAAgB,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;kGAbzC,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBAHvC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,sBAAsB;AACnC,iBAAA;8BAMO,UAAU,EAAA,CAAA;sBADb,WAAW;uBAAC,OAAO;gBASiC,iBAAiB,EAAA,CAAA;sBAArE,eAAe;AAAC,gBAAA,IAAA,EAAA,CAAA,UAAU,CAAC,MAAM,gBAAgB,CAAC;;;ACvBvD;;;;AAIG;MAKU,wBAAwB,CAAA;qHAAxB,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;sHAAxB,wBAAwB,EAAA,OAAA,EAAA,CAHvB,2BAA2B,CAAA,EAAA,OAAA,EAAA,CAC3B,2BAA2B,CAAA,EAAA,CAAA,CAAA;sHAE5B,wBAAwB,EAAA,CAAA,CAAA;;kGAAxB,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAJpC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,OAAO,EAAE,CAAC,2BAA2B,CAAC;oBACtC,OAAO,EAAE,CAAC,2BAA2B,CAAC;AACzC,iBAAA;;;ACNM,MAAM,wBAAwB,GAAG;IACpC,2BAA2B;;;ACN/B;;AAEG;;;;"}
+{"version":3,"file":"eui-ecl-components-ecl-feedback-message.mjs","sources":["../../components/ecl-feedback-message/ecl-feedback-message.directive.ts","../../components/ecl-feedback-message/ecl-feedback-message.module.ts","../../components/ecl-feedback-message/index.ts","../../components/ecl-feedback-message/eui-ecl-components-ecl-feedback-message.ts"],"sourcesContent":["import { AfterContentInit, ContentChildren, Directive, forwardRef, HostBinding, QueryList } from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n// TODO: check the look of this component after icons update.\n\n/**\n * Directive that renders a feedback message following the ECL design system.\n * It automatically styles its content and nested icon components accordingly.\n *\n * Should be applied to a container element that wraps a feedback message.\n */\n@Directive({\n    selector: '[eclFeedbackMessage]',\n})\nexport class EclFeedbackMessageDirective extends ECLBaseDirective implements AfterContentInit {\n    /**\n     * Applies the appropriate ECL feedback message CSS class to the host element.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-feedback-message')].join(' ').trim();\n    }\n\n    /**\n     * Queries all nested `EclIconComponent` instances inside the host element.\n     * These icons will receive the `ecl-feedback-message__icon` styling class.\n     */\n    @ContentChildren(forwardRef(() => EclIconComponent)) eclIconComponents: QueryList<EclIconComponent>;\n\n    /**\n     * Lifecycle hook that runs after content (e.g. projected icons) is initialized.\n     * Adds the `ecl-feedback-message__icon` CSS class to each nested icon component.\n     */\n    ngAfterContentInit(): void {\n        if (this.eclIconComponents) {\n            setTimeout(() => {\n                this.eclIconComponents.forEach((icn) => {\n                    icn.baseDirective.class = [icn.baseDirective.class, 'ecl-feedback-message__icon'].join(' ');\n                });\n            });\n        }\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { EclFeedbackMessageDirective } from './ecl-feedback-message.directive';\n\n/**\n * Module that provides the EclFeedbackMessage directive.\n *\n * @deprecated Use {@link EUI_ECL_FEEDBACK_MESSAGE} instead.\n */\n@NgModule({\n    imports: [EclFeedbackMessageDirective],\n    exports: [EclFeedbackMessageDirective],\n})\nexport class EclFeedbackMessageModule {}\n","import { EclFeedbackMessageDirective } from './ecl-feedback-message.directive';\n\nexport * from './ecl-feedback-message.module';\nexport * from './ecl-feedback-message.directive';\n\nexport const EUI_ECL_FEEDBACK_MESSAGE = [\n    EclFeedbackMessageDirective,\n] as const;","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAIA;AAEA;;;;;AAKG;AAIG,MAAO,2BAA4B,SAAQ,gBAAgB,CAAA;AAC7D;;AAEG;AACH,IAAA,IACI,UAAU,GAAA;AACV,QAAA,OAAO,CAAC,KAAK,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE;IACzE;AAQA;;;AAGG;IACH,kBAAkB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,iBAAiB,EAAE;YACxB,UAAU,CAAC,MAAK;gBACZ,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;AACnC,oBAAA,GAAG,CAAC,aAAa,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,aAAa,CAAC,KAAK,EAAE,4BAA4B,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;AAC/F,gBAAA,CAAC,CAAC;AACN,YAAA,CAAC,CAAC;QACN;IACJ;qHA3BS,2BAA2B,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA3B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,eAAA,EAAA,IAAA,EAAA,2BAA2B,4LAaF,gBAAgB,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;kGAbzC,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBAHvC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,sBAAsB;AACnC,iBAAA;8BAMO,UAAU,EAAA,CAAA;sBADb,WAAW;uBAAC,OAAO;gBASiC,iBAAiB,EAAA,CAAA;sBAArE,eAAe;AAAC,gBAAA,IAAA,EAAA,CAAA,UAAU,CAAC,MAAM,gBAAgB,CAAC;;;ACzBvD;;;;AAIG;MAKU,wBAAwB,CAAA;qHAAxB,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;sHAAxB,wBAAwB,EAAA,OAAA,EAAA,CAHvB,2BAA2B,CAAA,EAAA,OAAA,EAAA,CAC3B,2BAA2B,CAAA,EAAA,CAAA,CAAA;sHAE5B,wBAAwB,EAAA,CAAA,CAAA;;kGAAxB,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAJpC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,OAAO,EAAE,CAAC,2BAA2B,CAAC;oBACtC,OAAO,EAAE,CAAC,2BAA2B,CAAC;AACzC,iBAAA;;;ACNM,MAAM,wBAAwB,GAAG;IACpC,2BAA2B;;;ACN/B;;AAEG;;;;"}

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

@@ -57,11 +57,11 @@ class EclFormLabelComponent extends ECLBaseDirective {
         this.hasClass = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.5", ngImport: i0, type: EclFormLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.5", 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\" aria-label=\"required\">*</span>\n}\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.5", 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\" aria-label=\"required\">(required)</span>\n}\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-next.5", 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\" aria-label=\"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\" aria-label=\"required\">(required)</span>\n}\n" }]
         }], propDecorators: { isOptional: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]

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\" aria-label=\"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.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\" aria-label=\"required\">(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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"}

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

@@ -375,11 +375,11 @@ class EclGalleryItemComponent extends ECLBaseDirective {
         this.renderer.selectRootElement(this.el.nativeElement.children[0], true).focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.5", ngImport: i0, type: EclGalleryItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.5", 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 v19. 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.5", 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-next.5", 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 v19. 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        @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: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -723,11 +723,11 @@ class EclGalleryComponent extends ECLBaseDirective {
         return this.galleryItems.filter((item, cnt) => cnt < this.maxVisibleItems);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.5", ngImport: i0, type: EclGalleryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.5", 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=\"ghost\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </button>\n    </header>\n    <section class=\"ecl-gallery__slider\">\n        <div class=\"ecl-gallery__slider-media-container\">\n            @if(item?.isExternalVideo) {\n            <div 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\">\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", "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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.5", 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=\"ghost\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </button>\n    </header>\n    <section class=\"ecl-gallery__slider\">\n        <div class=\"ecl-gallery__slider-media-container\">\n            @if(item?.isExternalVideo) {\n            <div 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", "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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.5", 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=\"ghost\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </button>\n    </header>\n    <section class=\"ecl-gallery__slider\">\n        <div class=\"ecl-gallery__slider-media-container\">\n            @if(item?.isExternalVideo) {\n            <div 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\">\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"] }]
+            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=\"ghost\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </button>\n    </header>\n    <section class=\"ecl-gallery__slider\">\n        <div class=\"ecl-gallery__slider-media-container\">\n            @if(item?.isExternalVideo) {\n            <div 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: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]