@eui/ecl 22.0.0-alpha.41 → 22.0.0-alpha.43

package/fesm2022/eui-ecl-components-ecl-date-block.mjs

@@ -1,6 +1,6 @@
 import { formatDate, DatePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, inject, Input, HostBinding, Component } from '@angular/core';
+import { input, computed, inject, Component } from '@angular/core';
 import '@angular/common/locales/global/bg';
 import '@angular/common/locales/global/da';
 import '@angular/common/locales/global/en';
@@ -37,16 +37,6 @@ class EclDateBlockComponent extends ECLBaseDirective {
         const variant = this.variant();
         return [super.getCssClasses('ecl-date-block'), variant ? `ecl-date-block--${variant}` : ''].join(' ').trim();
     }
-    /**
-     * Sets the `datetime` attribute of the `<time>` element.
-     * If not provided, it is derived from `date` and `dateFormat`.
-     */
-    get datetime() {
-        return this.getDatetime();
-    }
-    set datetime(value) {
-        this._datetime = value;
-    }
     constructor() {
         super();
         /**
@@ -91,15 +81,22 @@ class EclDateBlockComponent extends ECLBaseDirective {
          */
         this.year = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "year" }] : /* istanbul ignore next */ []));
+        /**
+         * Explicit value for the `datetime` attribute of the `<time>` element (optional).
+         * If not provided, it is derived from `date` and `dateFormat`.
+         */
+        this.datetimeInput = input(undefined, { ...(ngDevMode ? { debugName: "datetimeInput" } : /* istanbul ignore next */ {}), alias: 'datetime' });
         this.locale = 'en';
-        this._datetime = null;
+        /**
+         * The resolved `datetime` attribute value. Uses the explicit `datetime` input
+         * when provided, otherwise derives it from `date` and `dateFormat`.
+         */
+        this.datetime = computed(() => this.datetimeInput() || this.getFormattedDate(this.date(), this.dateFormat()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "datetime" }] : /* istanbul ignore next */ []));
         this.translateService = inject(TranslateService);
         const translateService = this.translateService;
         this.locale = translateService.currentLang();
     }
-    getDatetime() {
-        return this._datetime || this.getFormattedDate(this.date(), this.dateFormat());
-    }
     getFormattedDate(date, dateFormat) {
         if (date) {
             return formatDate(date, dateFormat, this.translateService.currentLang());
@@ -109,20 +106,15 @@ class EclDateBlockComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclDateBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EclDateBlockComponent, isStandalone: true, selector: "time[eclDateBlock]", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, day: { classPropertyName: "day", publicName: "day", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, monthTitle: { classPropertyName: "monthTitle", publicName: "monthTitle", isSignal: true, isRequired: false, transformFunction: null }, year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: false, transformFunction: null }, datetime: { classPropertyName: "datetime", publicName: "datetime", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClasses", "attr.datetime": "this.datetime" } }, usesInheritance: true, ngImport: i0, template: "<span class=\"ecl-date-block__daytime\">{{ datetime || (date() | date: dateFormat()) }}</span>\n<span class=\"ecl-date-block__day\" aria-hidden=\"true\">{{ day() || (date() | date: 'd') }}</span>\n<abbr [title]=\"monthTitle() || month() || (date() | date: 'MMMM' : '' : locale)\" class=\"ecl-date-block__month\" aria-hidden=\"true\">\n    {{ month() || (date() | date: 'MMM' : '' : locale) }}\n</abbr>\n<span class=\"ecl-date-block__year\" aria-hidden=\"true\">{{ year() || (date() | date: 'yyyy') }}</span>\n", dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EclDateBlockComponent, isStandalone: true, selector: "time[eclDateBlock]", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, day: { classPropertyName: "day", publicName: "day", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, monthTitle: { classPropertyName: "monthTitle", publicName: "monthTitle", isSignal: true, isRequired: false, transformFunction: null }, year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: false, transformFunction: null }, datetimeInput: { classPropertyName: "datetimeInput", publicName: "datetime", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cssClasses", "attr.datetime": "datetime()" } }, usesInheritance: true, ngImport: i0, template: "<span class=\"ecl-date-block__daytime\">{{ datetime() || (date() | date: dateFormat()) }}</span>\n<span class=\"ecl-date-block__day\" aria-hidden=\"true\">{{ day() || (date() | date: 'd') }}</span>\n<abbr [title]=\"monthTitle() || month() || (date() | date: 'MMMM' : '' : locale)\" class=\"ecl-date-block__month\" aria-hidden=\"true\">\n    {{ month() || (date() | date: 'MMM' : '' : locale) }}\n</abbr>\n<span class=\"ecl-date-block__year\" aria-hidden=\"true\">{{ year() || (date() | date: 'yyyy') }}</span>\n", dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclDateBlockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'time[eclDateBlock]', imports: [DatePipe], template: "<span class=\"ecl-date-block__daytime\">{{ datetime || (date() | date: dateFormat()) }}</span>\n<span class=\"ecl-date-block__day\" aria-hidden=\"true\">{{ day() || (date() | date: 'd') }}</span>\n<abbr [title]=\"monthTitle() || month() || (date() | date: 'MMMM' : '' : locale)\" class=\"ecl-date-block__month\" aria-hidden=\"true\">\n    {{ month() || (date() | date: 'MMM' : '' : locale) }}\n</abbr>\n<span class=\"ecl-date-block__year\" aria-hidden=\"true\">{{ year() || (date() | date: 'yyyy') }}</span>\n" }]
-        }], ctorParameters: () => [], propDecorators: { date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], day: [{ type: i0.Input, args: [{ isSignal: true, alias: "day", required: false }] }], month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }], monthTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthTitle", required: false }] }], year: [{ type: i0.Input, args: [{ isSignal: true, alias: "year", required: false }] }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], datetime: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.datetime']
-            }] } });
+            args: [{ selector: 'time[eclDateBlock]', imports: [DatePipe], host: {
+                        '[class]': 'cssClasses',
+                        '[attr.datetime]': 'datetime()',
+                    }, template: "<span class=\"ecl-date-block__daytime\">{{ datetime() || (date() | date: dateFormat()) }}</span>\n<span class=\"ecl-date-block__day\" aria-hidden=\"true\">{{ day() || (date() | date: 'd') }}</span>\n<abbr [title]=\"monthTitle() || month() || (date() | date: 'MMMM' : '' : locale)\" class=\"ecl-date-block__month\" aria-hidden=\"true\">\n    {{ month() || (date() | date: 'MMM' : '' : locale) }}\n</abbr>\n<span class=\"ecl-date-block__year\" aria-hidden=\"true\">{{ year() || (date() | date: 'yyyy') }}</span>\n" }]
+        }], ctorParameters: () => [], propDecorators: { date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], day: [{ type: i0.Input, args: [{ isSignal: true, alias: "day", required: false }] }], month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }], monthTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthTitle", required: false }] }], year: [{ type: i0.Input, args: [{ isSignal: true, alias: "year", required: false }] }], datetimeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "datetime", required: false }] }] } });
 
 const EUI_ECL_DATE_BLOCK = [
     EclDateBlockComponent,

package/fesm2022/eui-ecl-components-ecl-date-block.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"eui-ecl-components-ecl-date-block.mjs","sources":["../../components/ecl-date-block/ecl-date-block.component.ts","../../components/ecl-date-block/ecl-date-block.component.html","../../components/ecl-date-block/index.ts","../../components/ecl-date-block/eui-ecl-components-ecl-date-block.ts"],"sourcesContent":["import { formatDate, DatePipe } from '@angular/common';\nimport { Component, Input, HostBinding, inject, input } from '@angular/core';\nimport '@angular/common/locales/global/bg';\nimport '@angular/common/locales/global/da';\nimport '@angular/common/locales/global/en';\nimport '@angular/common/locales/global/et';\nimport '@angular/common/locales/global/fr';\nimport '@angular/common/locales/global/hr';\nimport '@angular/common/locales/global/lv';\nimport '@angular/common/locales/global/hu';\nimport '@angular/common/locales/global/nl';\nimport '@angular/common/locales/global/pt';\nimport '@angular/common/locales/global/sk';\nimport '@angular/common/locales/global/fi';\nimport '@angular/common/locales/global/cs';\nimport '@angular/common/locales/global/de';\nimport '@angular/common/locales/global/el';\nimport '@angular/common/locales/global/es';\nimport '@angular/common/locales/global/ga';\nimport '@angular/common/locales/global/it';\nimport '@angular/common/locales/global/lt';\nimport '@angular/common/locales/global/mt';\nimport '@angular/common/locales/global/pl';\nimport '@angular/common/locales/global/ro';\nimport '@angular/common/locales/global/sl';\nimport '@angular/common/locales/global/sv';\nimport { TranslateService } from '@ngx-translate/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Component used to display a formatted date in a styled time element.\n * Designed for use within content components such as content blocks or items.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'time[eclDateBlock]',\n    templateUrl: './ecl-date-block.component.html',\n    imports: [DatePipe],\n})\nexport class EclDateBlockComponent extends ECLBaseDirective {\n    /**\n     * The date to be displayed. If not null, it's used to generate the `datetime` attribute and visual output.\n     */\n    readonly date = input<Date>(undefined);\n\n    /**\n     * The format to be used when rendering the date string (Angular DatePipe format).\n     * Default is `'dd/M/yyyy'`.\n     */\n    readonly dateFormat = input('dd/M/yyyy');\n\n    /**\n     * Optional visual variant of the date block. Can be:\n     * - `'ongoing'`: for ongoing events\n     * - `'past'`: for past events\n     * This changes styling only.\n     */\n    readonly variant = input<'ongoing' | 'past'>(null);\n\n    /**\n     * Explicit string for day part of the date (optional).\n     * Used when date is not set or overridden manually.\n     */\n    readonly day = input<string>(undefined);\n\n    /**\n     * Explicit string for month part of the date (optional).\n     * Used when date is not set or overridden manually.\n     */\n    readonly month = input<string>(undefined);\n\n    /**\n     * Explicit string used as an accessible or verbose label for the month (optional).\n     */\n    readonly monthTitle = input<string>(undefined);\n\n    /**\n     * Explicit string for year part of the date (optional).\n     * Used when date is not set or overridden manually.\n     */\n    readonly year = input<string>(undefined);\n\n    locale = 'en';\n    @HostBinding('class')\n    get cssClasses(): string {\n        const variant = this.variant();\n        return [super.getCssClasses('ecl-date-block'), variant ? `ecl-date-block--${variant}` : ''].join(' ').trim();\n    }\n\n    /**\n     * Sets the `datetime` attribute of the `<time>` element.\n     * If not provided, it is derived from `date` and `dateFormat`.\n     */\n    @Input()\n    @HostBinding('attr.datetime')\n    get datetime(): string {\n        return this.getDatetime();\n    }\n    set datetime(value) {\n        this._datetime = value;\n    }\n    private _datetime: string = null;\n    private translateService = inject(TranslateService);\n\n    constructor() {\n        super();\n        const translateService = this.translateService;\n\n        this.locale = translateService.currentLang();\n    }\n\n    private getDatetime(): string {\n        return this._datetime || this.getFormattedDate(this.date(), this.dateFormat());\n    }\n\n    private getFormattedDate(date: Date, dateFormat: string): string {\n        if (date) {\n            return formatDate(date, dateFormat, this.translateService.currentLang());\n        } else {\n            return null;\n        }\n    }\n}\n","<span class=\"ecl-date-block__daytime\">{{ datetime || (date() | date: dateFormat()) }}</span>\n<span class=\"ecl-date-block__day\" aria-hidden=\"true\">{{ day() || (date() | date: 'd') }}</span>\n<abbr [title]=\"monthTitle() || month() || (date() | date: 'MMMM' : '' : locale)\" class=\"ecl-date-block__month\" aria-hidden=\"true\">\n    {{ month() || (date() | date: 'MMM' : '' : locale) }}\n</abbr>\n<span class=\"ecl-date-block__year\" aria-hidden=\"true\">{{ year() || (date() | date: 'yyyy') }}</span>\n","import { EclDateBlockComponent } from './ecl-date-block.component';\n\nexport * from './ecl-date-block.component';\n\nexport const EUI_ECL_DATE_BLOCK = [\n    EclDateBlockComponent,\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-date-block.mjs","sources":["../../components/ecl-date-block/ecl-date-block.component.ts","../../components/ecl-date-block/ecl-date-block.component.html","../../components/ecl-date-block/index.ts","../../components/ecl-date-block/eui-ecl-components-ecl-date-block.ts"],"sourcesContent":["import { formatDate, DatePipe } from '@angular/common';\nimport { Component, computed, inject, input } from '@angular/core';\nimport '@angular/common/locales/global/bg';\nimport '@angular/common/locales/global/da';\nimport '@angular/common/locales/global/en';\nimport '@angular/common/locales/global/et';\nimport '@angular/common/locales/global/fr';\nimport '@angular/common/locales/global/hr';\nimport '@angular/common/locales/global/lv';\nimport '@angular/common/locales/global/hu';\nimport '@angular/common/locales/global/nl';\nimport '@angular/common/locales/global/pt';\nimport '@angular/common/locales/global/sk';\nimport '@angular/common/locales/global/fi';\nimport '@angular/common/locales/global/cs';\nimport '@angular/common/locales/global/de';\nimport '@angular/common/locales/global/el';\nimport '@angular/common/locales/global/es';\nimport '@angular/common/locales/global/ga';\nimport '@angular/common/locales/global/it';\nimport '@angular/common/locales/global/lt';\nimport '@angular/common/locales/global/mt';\nimport '@angular/common/locales/global/pl';\nimport '@angular/common/locales/global/ro';\nimport '@angular/common/locales/global/sl';\nimport '@angular/common/locales/global/sv';\nimport { TranslateService } from '@ngx-translate/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Component used to display a formatted date in a styled time element.\n * Designed for use within content components such as content blocks or items.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'time[eclDateBlock]',\n    templateUrl: './ecl-date-block.component.html',\n    imports: [DatePipe],\n    host: {\n        '[class]': 'cssClasses',\n        '[attr.datetime]': 'datetime()',\n    },\n})\nexport class EclDateBlockComponent extends ECLBaseDirective {\n    /**\n     * The date to be displayed. If not null, it's used to generate the `datetime` attribute and visual output.\n     */\n    readonly date = input<Date>(undefined);\n\n    /**\n     * The format to be used when rendering the date string (Angular DatePipe format).\n     * Default is `'dd/M/yyyy'`.\n     */\n    readonly dateFormat = input('dd/M/yyyy');\n\n    /**\n     * Optional visual variant of the date block. Can be:\n     * - `'ongoing'`: for ongoing events\n     * - `'past'`: for past events\n     * This changes styling only.\n     */\n    readonly variant = input<'ongoing' | 'past'>(null);\n\n    /**\n     * Explicit string for day part of the date (optional).\n     * Used when date is not set or overridden manually.\n     */\n    readonly day = input<string>(undefined);\n\n    /**\n     * Explicit string for month part of the date (optional).\n     * Used when date is not set or overridden manually.\n     */\n    readonly month = input<string>(undefined);\n\n    /**\n     * Explicit string used as an accessible or verbose label for the month (optional).\n     */\n    readonly monthTitle = input<string>(undefined);\n\n    /**\n     * Explicit string for year part of the date (optional).\n     * Used when date is not set or overridden manually.\n     */\n    readonly year = input<string>(undefined);\n\n    /**\n     * Explicit value for the `datetime` attribute of the `<time>` element (optional).\n     * If not provided, it is derived from `date` and `dateFormat`.\n     */\n    readonly datetimeInput = input<string>(undefined, { alias: 'datetime' });\n\n    locale = 'en';\n\n    get cssClasses(): string {\n        const variant = this.variant();\n        return [super.getCssClasses('ecl-date-block'), variant ? `ecl-date-block--${variant}` : ''].join(' ').trim();\n    }\n\n    /**\n     * The resolved `datetime` attribute value. Uses the explicit `datetime` input\n     * when provided, otherwise derives it from `date` and `dateFormat`.\n     */\n    readonly datetime = computed(() => this.datetimeInput() || this.getFormattedDate(this.date(), this.dateFormat()));\n\n    private translateService = inject(TranslateService);\n\n    constructor() {\n        super();\n        const translateService = this.translateService;\n\n        this.locale = translateService.currentLang();\n    }\n\n    private getFormattedDate(date: Date, dateFormat: string): string {\n        if (date) {\n            return formatDate(date, dateFormat, this.translateService.currentLang());\n        } else {\n            return null;\n        }\n    }\n}\n","<span class=\"ecl-date-block__daytime\">{{ datetime() || (date() | date: dateFormat()) }}</span>\n<span class=\"ecl-date-block__day\" aria-hidden=\"true\">{{ day() || (date() | date: 'd') }}</span>\n<abbr [title]=\"monthTitle() || month() || (date() | date: 'MMMM' : '' : locale)\" class=\"ecl-date-block__month\" aria-hidden=\"true\">\n    {{ month() || (date() | date: 'MMM' : '' : locale) }}\n</abbr>\n<span class=\"ecl-date-block__year\" aria-hidden=\"true\">{{ year() || (date() | date: 'yyyy') }}</span>\n","import { EclDateBlockComponent } from './ecl-date-block.component';\n\nexport * from './ecl-date-block.component';\n\nexport const EUI_ECL_DATE_BLOCK = [\n    EclDateBlockComponent,\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-featured.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, HostBinding, Component, inject, ElementRef, Renderer2, Input, Directive, computed, contentChild, contentChildren } from '@angular/core';
+import { input, booleanAttribute, computed, Component, signal, Directive, contentChild, contentChildren } from '@angular/core';
 import { ECLBaseDirective } from '@eui/ecl/core';
 import { EclMediaContainerComponent } from '@eui/ecl/components/ecl-media-container';
 import { uniqueId } from '@eui/core';
@@ -28,36 +28,32 @@ class EclFeaturedComponent extends ECLBaseDirective {
         ...(ngDevMode ? [undefined, { debugName: "verticalAlign" }] : /* istanbul ignore next */ []));
         /** Gives a different display for the link in highlighted mode */
         this.isLinkHighlighted = input(false, { ...(ngDevMode ? { debugName: "isLinkHighlighted" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.role = 'article';
-    }
-    /**
-     * Adds specific classes to the component.
-     */
-    get cssClasses() {
-        const variant = this.variant();
-        return [
-            super.getCssClasses('ecl-featured-item'),
-            variant ? `ecl-featured-item--${variant}` : '',
-            this.horizontalAlign() === 'center' ? 'ecl-featured-item--hcenter' : '',
-            this.verticalAlign() === 'center' ? 'ecl-featured-item--vcenter' : '',
-            this.isDynamicImage() ? 'ecl-featured-item--dynamic' : '',
-        ].join(' ').trim();
+        /**
+         * Adds specific classes to the component.
+         */
+        this.cssClasses = computed(() => {
+            const variant = this.variant();
+            return [
+                super.getCssClasses('ecl-featured-item'),
+                variant ? `ecl-featured-item--${variant}` : '',
+                this.horizontalAlign() === 'center' ? 'ecl-featured-item--hcenter' : '',
+                this.verticalAlign() === 'center' ? 'ecl-featured-item--vcenter' : '',
+                this.isDynamicImage() ? 'ecl-featured-item--dynamic' : '',
+            ].join(' ').trim();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cssClasses" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclFeaturedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EclFeaturedComponent, isStandalone: true, selector: "ecl-featured, article[eclFeatured]", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, isDynamicImage: { classPropertyName: "isDynamicImage", publicName: "isDynamicImage", isSignal: true, isRequired: false, transformFunction: null }, horizontalAlign: { classPropertyName: "horizontalAlign", publicName: "horizontalAlign", isSignal: true, isRequired: false, transformFunction: null }, verticalAlign: { classPropertyName: "verticalAlign", publicName: "verticalAlign", isSignal: true, isRequired: false, transformFunction: null }, isLinkHighlighted: { classPropertyName: "isLinkHighlighted", publicName: "isLinkHighlighted", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ecl-featured-item--link-highlighted": "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>" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EclFeaturedComponent, isStandalone: true, selector: "ecl-featured, article[eclFeatured]", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, isDynamicImage: { classPropertyName: "isDynamicImage", publicName: "isDynamicImage", isSignal: true, isRequired: false, transformFunction: null }, horizontalAlign: { classPropertyName: "horizontalAlign", publicName: "horizontalAlign", isSignal: true, isRequired: false, transformFunction: null }, verticalAlign: { classPropertyName: "verticalAlign", publicName: "verticalAlign", isSignal: true, isRequired: false, transformFunction: null }, isLinkHighlighted: { classPropertyName: "isLinkHighlighted", publicName: "isLinkHighlighted", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "article" }, properties: { "class": "cssClasses()", "class.ecl-featured-item--link-highlighted": "isLinkHighlighted()" } }, 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: "22.1.2", ngImport: i0, type: EclFeaturedComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-featured, article[eclFeatured]', host: {
+                        'role': 'article',
+                        '[class]': 'cssClasses()',
                         '[class.ecl-featured-item--link-highlighted]': 'isLinkHighlighted()',
                     }, 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: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], isDynamicImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDynamicImage", required: false }] }], horizontalAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontalAlign", required: false }] }], verticalAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalAlign", required: false }] }], isLinkHighlighted: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLinkHighlighted", required: false }] }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], isDynamicImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDynamicImage", required: false }] }], horizontalAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontalAlign", required: false }] }], verticalAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalAlign", required: false }] }], isLinkHighlighted: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLinkHighlighted", required: false }] }] } });
 
 /**
  * Applies specific additional class for the eclLink directive, used in <ecl-featured-item> construction.
@@ -65,32 +61,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
 class EclFeaturedItemLinkDirective extends ECLBaseDirective {
     constructor() {
         super(...arguments);
-        this.className = true;
-        this.el = inject(ElementRef);
-        this.renderer = inject(Renderer2);
-    }
-    set ariaDescribedBy(value) {
-        if (value) {
-            this.renderer.setAttribute(this.el.nativeElement, 'aria-describedby', value);
-        }
-        else {
-            this.renderer.removeAttribute(this.el.nativeElement, 'aria-describedby');
-        }
+        /**
+         * The id of the element describing this link. Set imperatively by the parent
+         * featured item once the title id is known.
+         */
+        this.ariaDescribedBy = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclFeaturedItemLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclFeaturedItemLinkDirective, isStandalone: true, selector: "[eclFeaturedItemLink]", inputs: { ariaDescribedBy: "ariaDescribedBy" }, host: { properties: { "class.ecl-featured-item__link": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclFeaturedItemLinkDirective, isStandalone: true, selector: "[eclFeaturedItemLink]", host: { properties: { "attr.aria-describedby": "ariaDescribedBy()" }, classAttribute: "ecl-featured-item__link" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclFeaturedItemLinkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclFeaturedItemLink]',
+                    host: {
+                        'class': 'ecl-featured-item__link',
+                        '[attr.aria-describedby]': 'ariaDescribedBy()',
+                    },
                 }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class.ecl-featured-item__link']
-            }], ariaDescribedBy: [{
-                type: Input
-            }] } });
+        }] });
 class EclFeaturedMediaAnchorDirective extends ECLBaseDirective {
     constructor() {
         super(...arguments);
@@ -133,7 +123,6 @@ class EclFeaturedItemComponent extends ECLBaseDirective {
         this.mediaContainer = contentChild(EclMediaContainerComponent, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "mediaContainer" }] : /* istanbul ignore next */ []));
         this.links = contentChildren(EclFeaturedItemLinkDirective, { ...(ngDevMode ? { debugName: "links" } : /* istanbul ignore next */ {}), descendants: true });
-        this.className = true;
         this.hasMedia = computed(() => {
             return !!this.mediaContainer();
         }, /* @ts-ignore */
@@ -151,40 +140,34 @@ class EclFeaturedItemComponent extends ECLBaseDirective {
         const links = this.links();
         if (describedBy && links) {
             links.forEach(link => {
-                link.ariaDescribedBy = describedBy;
+                link.ariaDescribedBy.set(describedBy);
             });
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclFeaturedItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclFeaturedItemComponent, isStandalone: true, selector: "ecl-featured-item, div[eclFeaturedItem]", inputs: { eclTitle: { classPropertyName: "eclTitle", publicName: "eclTitle", isSignal: true, isRequired: false, transformFunction: null }, eclMicroTitle: { classPropertyName: "eclMicroTitle", publicName: "eclMicroTitle", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ecl-featured-item__item": "this.className" } }, queries: [{ propertyName: "mediaContainer", first: true, predicate: EclMediaContainerComponent, descendants: true, isSignal: true }, { propertyName: "links", predicate: EclFeaturedItemLinkDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (!hasMedia()) {\n<div class=\"ecl-featured-item__content\">\n    <div class=\"ecl-featured-item__info\">\n         @if(hasMicroTitle()) {\n        <div class=\"ecl-featured-item__micro-title\">{{ eclMicroTitle() }}</div>\n         }\n        @if(hasTitle()) {\n        <div class=\"ecl-featured-item__title\" [attr.id]=\"id() + '-title'\">\n            {{ eclTitle() }}\n        </div>\n        }\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <ng-content select=\"[eclLink]\"></ng-content>\n</div>\n} @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclFeaturedItemComponent, isStandalone: true, selector: "ecl-featured-item, div[eclFeaturedItem]", inputs: { eclTitle: { classPropertyName: "eclTitle", publicName: "eclTitle", isSignal: true, isRequired: false, transformFunction: null }, eclMicroTitle: { classPropertyName: "eclMicroTitle", publicName: "eclMicroTitle", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ecl-featured-item__item" }, queries: [{ propertyName: "mediaContainer", first: true, predicate: EclMediaContainerComponent, descendants: true, isSignal: true }, { propertyName: "links", predicate: EclFeaturedItemLinkDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (!hasMedia()) {\n<div class=\"ecl-featured-item__content\">\n    <div class=\"ecl-featured-item__info\">\n         @if(hasMicroTitle()) {\n        <div class=\"ecl-featured-item__micro-title\">{{ eclMicroTitle() }}</div>\n         }\n        @if(hasTitle()) {\n        <div class=\"ecl-featured-item__title\" [attr.id]=\"id() + '-title'\">\n            {{ eclTitle() }}\n        </div>\n        }\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <ng-content select=\"[eclLink]\"></ng-content>\n</div>\n} @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclFeaturedItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-featured-item, div[eclFeaturedItem]', imports: [NgTemplateOutlet], template: "@if (!hasMedia()) {\n<div class=\"ecl-featured-item__content\">\n    <div class=\"ecl-featured-item__info\">\n         @if(hasMicroTitle()) {\n        <div class=\"ecl-featured-item__micro-title\">{{ eclMicroTitle() }}</div>\n         }\n        @if(hasTitle()) {\n        <div class=\"ecl-featured-item__title\" [attr.id]=\"id() + '-title'\">\n            {{ eclTitle() }}\n        </div>\n        }\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <ng-content select=\"[eclLink]\"></ng-content>\n</div>\n} @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { eclTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclTitle", required: false }] }], eclMicroTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclMicroTitle", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], mediaContainer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclMediaContainerComponent), { isSignal: true }] }], links: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => EclFeaturedItemLinkDirective), { ...{ descendants: true }, isSignal: true }] }], className: [{
-                type: HostBinding,
-                args: ['class.ecl-featured-item__item']
-            }] } });
+            args: [{ selector: 'ecl-featured-item, div[eclFeaturedItem]', imports: [NgTemplateOutlet], host: {
+                        'class': 'ecl-featured-item__item',
+                    }, template: "@if (!hasMedia()) {\n<div class=\"ecl-featured-item__content\">\n    <div class=\"ecl-featured-item__info\">\n         @if(hasMicroTitle()) {\n        <div class=\"ecl-featured-item__micro-title\">{{ eclMicroTitle() }}</div>\n         }\n        @if(hasTitle()) {\n        <div class=\"ecl-featured-item__title\" [attr.id]=\"id() + '-title'\">\n            {{ eclTitle() }}\n        </div>\n        }\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <ng-content select=\"[eclLink]\"></ng-content>\n</div>\n} @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { eclTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclTitle", required: false }] }], eclMicroTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclMicroTitle", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], mediaContainer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclMediaContainerComponent), { isSignal: true }] }], links: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => EclFeaturedItemLinkDirective), { ...{ descendants: true }, isSignal: true }] }] } });
 
 /**
  * Applies specific additional class to style <ecl-featured-item-description> component, as a part of the
  *  <ecl-featured> component.
  */
 class EclFeaturedItemDescriptionComponent extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.className = true;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclFeaturedItemDescriptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EclFeaturedItemDescriptionComponent, isStandalone: true, selector: "ecl-featured-item-description", host: { properties: { "class.ecl-featured-item__description": "this.className" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EclFeaturedItemDescriptionComponent, isStandalone: true, selector: "ecl-featured-item-description", host: { classAttribute: "ecl-featured-item__description" }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclFeaturedItemDescriptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-featured-item-description', template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class.ecl-featured-item__description']
-            }] } });
+            args: [{ selector: 'ecl-featured-item-description', host: {
+                        'class': 'ecl-featured-item__description',
+                    }, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
+        }] });
 
 const EUI_ECL_FEATURED = [
     EclFeaturedComponent,

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-link.directive.ts","../../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/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/**\n * Custom ECL component, that adds visual support to a piece of content. Uses <ecl-media-container>.\n */\n@Component({\n    selector: 'ecl-featured, article[eclFeatured]',\n    templateUrl: './ecl-featured.component.html',\n    host: {\n        '[class.ecl-featured-item--link-highlighted]': 'isLinkHighlighted()',\n    },\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    readonly position = input<'left' | 'right'>('left');\n    /**\n     * 'highligh' varian, applies class to make more stand out appearance of the component.\n     */\n    readonly variant = input<'highlight'>(undefined);\n\n    isDynamicImage = input(false, { transform: booleanAttribute });\n\n    horizontalAlign = input<'left' | 'center' | undefined>();\n\n    verticalAlign = input<'top' | 'center' | undefined>();\n\n    /** Gives a different display for the link in highlighted mode */\n    readonly isLinkHighlighted = input(false, { transform: booleanAttribute });\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        const variant = this.variant();\n        return [\n            super.getCssClasses('ecl-featured-item'),\n            variant ? `ecl-featured-item--${variant}`: '',\n            this.horizontalAlign() === 'center' ? 'ecl-featured-item--hcenter' : '',\n            this.verticalAlign() === 'center' ? 'ecl-featured-item--vcenter' : '',\n            this.isDynamicImage() ? 'ecl-featured-item--dynamic' : '',\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 { Directive, ElementRef, Input, Renderer2, HostBinding, inject, input, computed } 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    @Input()\n    set ariaDescribedBy(value: string | null) {\n        if (value) {\n        this.renderer.setAttribute(this.el.nativeElement, 'aria-describedby', value);\n        } else {\n        this.renderer.removeAttribute(this.el.nativeElement, 'aria-describedby');\n        }\n    }\n    private el = inject(ElementRef);\n    private renderer = inject(Renderer2);\n}\n\n@Directive({\n    selector: '[eclFeaturedMediaAnchor]',\n    host: {\n    '[style.--ecl-image-anchor]': 'cssAnchor()',\n  },\n})\nexport class EclFeaturedMediaAnchorDirective extends ECLBaseDirective {\n    eclFeaturedMediaAnchor = input<'left' | 'right' | '20%' | 'center' | undefined>();\n\n    readonly cssAnchor = computed(() => {\n    const value = this.eclFeaturedMediaAnchor();\n\n    if (!value || value === 'center') {\n      return null;\n    }\n\n    return value;\n  });\n}\n","import { AfterContentInit, Component, HostBinding, contentChild, computed, input, contentChildren } from '@angular/core';\nimport { EclMediaContainerComponent } from '@eui/ecl/components/ecl-media-container';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { uniqueId } from '@eui/core';\nimport { EclFeaturedItemLinkDirective } from './ecl-featured-item-link.directive';\nimport { NgTemplateOutlet } from '@angular/common';\n\n/**\n * Container for the text part - title and description of the <ecl-featured> component.\n */\n@Component({\n    selector: 'ecl-featured-item, div[eclFeaturedItem]',\n    imports: [NgTemplateOutlet],\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    eclTitle = input('');\n    eclMicroTitle = input('');\n    id = input<string>(`ecl-featured-item-${uniqueId()}`);\n    mediaContainer = contentChild(EclMediaContainerComponent);\n    readonly links = contentChildren(EclFeaturedItemLinkDirective, { descendants: true });\n\n    @HostBinding('class.ecl-featured-item__item') className = true;\n\n    protected readonly hasMedia = computed(() => {\n        return !!this.mediaContainer() \n    });\n    protected readonly hasTitle = computed(() => this.eclTitle() !== '');\n    protected readonly hasMicroTitle = computed(() => this.eclMicroTitle() !== '');\n\n    ngAfterContentInit(): void {\n        if (this.mediaContainer()) {\n            this.mediaContainer().class.set('ecl-featured-item__media_container');\n        }\n\n        const describedBy = this.hasTitle() ? `${this.id()}-title` : null;\n        const links = this.links();\n        if (describedBy && links) {\n            links.forEach(link => {\n                link.ariaDescribedBy = describedBy;\n            });\n        }\n    }\n}\n","@if (!hasMedia()) {\n<div class=\"ecl-featured-item__content\">\n    <div class=\"ecl-featured-item__info\">\n         @if(hasMicroTitle()) {\n        <div class=\"ecl-featured-item__micro-title\">{{ eclMicroTitle() }}</div>\n         }\n        @if(hasTitle()) {\n        <div class=\"ecl-featured-item__title\" [attr.id]=\"id() + '-title'\">\n            {{ eclTitle() }}\n        </div>\n        }\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <ng-content select=\"[eclLink]\"></ng-content>\n</div>\n} @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>","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 { EclFeaturedComponent } from './ecl-featured.component';\nimport { EclFeaturedItemComponent } from './ecl-featured-item.component';\nimport { EclFeaturedItemDescriptionComponent } from './ecl-featured-item-description.component';\nimport { EclFeaturedItemLinkDirective, EclFeaturedMediaAnchorDirective } from './ecl-featured-item-link.directive';\n\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    EclFeaturedMediaAnchorDirective,\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-link.directive.ts","../../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/index.ts","../../components/ecl-featured/eui-ecl-components-ecl-featured.ts"],"sourcesContent":["import { booleanAttribute, Component, computed, input } 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, article[eclFeatured]',\n    templateUrl: './ecl-featured.component.html',\n    host: {\n        'role': 'article',\n        '[class]': 'cssClasses()',\n        '[class.ecl-featured-item--link-highlighted]': 'isLinkHighlighted()',\n    },\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    readonly position = input<'left' | 'right'>('left');\n    /**\n     * 'highligh' varian, applies class to make more stand out appearance of the component.\n     */\n    readonly variant = input<'highlight'>(undefined);\n\n    isDynamicImage = input(false, { transform: booleanAttribute });\n\n    horizontalAlign = input<'left' | 'center' | undefined>();\n\n    verticalAlign = input<'top' | 'center' | undefined>();\n\n    /** Gives a different display for the link in highlighted mode */\n    readonly isLinkHighlighted = input(false, { transform: booleanAttribute });\n\n    /**\n     * Adds specific classes to the component.\n     */\n    readonly cssClasses = computed(() => {\n        const variant = this.variant();\n        return [\n            super.getCssClasses('ecl-featured-item'),\n            variant ? `ecl-featured-item--${variant}`: '',\n            this.horizontalAlign() === 'center' ? 'ecl-featured-item--hcenter' : '',\n            this.verticalAlign() === 'center' ? 'ecl-featured-item--vcenter' : '',\n            this.isDynamicImage() ? 'ecl-featured-item--dynamic' : '',\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 { Directive, computed, input, signal } 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    host: {\n        'class': 'ecl-featured-item__link',\n        '[attr.aria-describedby]': 'ariaDescribedBy()',\n    },\n})\nexport class EclFeaturedItemLinkDirective extends ECLBaseDirective {\n    /**\n     * The id of the element describing this link. Set imperatively by the parent\n     * featured item once the title id is known.\n     */\n    readonly ariaDescribedBy = signal<string | null>(null);\n}\n\n@Directive({\n    selector: '[eclFeaturedMediaAnchor]',\n    host: {\n    '[style.--ecl-image-anchor]': 'cssAnchor()',\n  },\n})\nexport class EclFeaturedMediaAnchorDirective extends ECLBaseDirective {\n    eclFeaturedMediaAnchor = input<'left' | 'right' | '20%' | 'center' | undefined>();\n\n    readonly cssAnchor = computed(() => {\n    const value = this.eclFeaturedMediaAnchor();\n\n    if (!value || value === 'center') {\n      return null;\n    }\n\n    return value;\n  });\n}\n","import { AfterContentInit, Component, contentChild, computed, input, contentChildren } from '@angular/core';\nimport { EclMediaContainerComponent } from '@eui/ecl/components/ecl-media-container';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { uniqueId } from '@eui/core';\nimport { EclFeaturedItemLinkDirective } from './ecl-featured-item-link.directive';\nimport { NgTemplateOutlet } from '@angular/common';\n\n/**\n * Container for the text part - title and description of the <ecl-featured> component.\n */\n@Component({\n    selector: 'ecl-featured-item, div[eclFeaturedItem]',\n    imports: [NgTemplateOutlet],\n    templateUrl: './ecl-featured-item.component.html',\n    host: {\n        'class': 'ecl-featured-item__item',\n    },\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n})\nexport class EclFeaturedItemComponent extends ECLBaseDirective implements AfterContentInit {\n    eclTitle = input('');\n    eclMicroTitle = input('');\n    id = input<string>(`ecl-featured-item-${uniqueId()}`);\n    mediaContainer = contentChild(EclMediaContainerComponent);\n    readonly links = contentChildren(EclFeaturedItemLinkDirective, { descendants: true });\n\n    protected readonly hasMedia = computed(() => {\n        return !!this.mediaContainer() \n    });\n    protected readonly hasTitle = computed(() => this.eclTitle() !== '');\n    protected readonly hasMicroTitle = computed(() => this.eclMicroTitle() !== '');\n\n    ngAfterContentInit(): void {\n        if (this.mediaContainer()) {\n            this.mediaContainer().class.set('ecl-featured-item__media_container');\n        }\n\n        const describedBy = this.hasTitle() ? `${this.id()}-title` : null;\n        const links = this.links();\n        if (describedBy && links) {\n            links.forEach(link => {\n                link.ariaDescribedBy.set(describedBy);\n            });\n        }\n    }\n}\n","@if (!hasMedia()) {\n<div class=\"ecl-featured-item__content\">\n    <div class=\"ecl-featured-item__info\">\n         @if(hasMicroTitle()) {\n        <div class=\"ecl-featured-item__micro-title\">{{ eclMicroTitle() }}</div>\n         }\n        @if(hasTitle()) {\n        <div class=\"ecl-featured-item__title\" [attr.id]=\"id() + '-title'\">\n            {{ eclTitle() }}\n        </div>\n        }\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <ng-content select=\"[eclLink]\"></ng-content>\n</div>\n} @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>","import { Component } 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    host: {\n        'class': 'ecl-featured-item__description',\n    },\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n})\nexport class EclFeaturedItemDescriptionComponent extends ECLBaseDirective {}\n","<ng-content></ng-content>\n","import { EclFeaturedComponent } from './ecl-featured.component';\nimport { EclFeaturedItemComponent } from './ecl-featured-item.component';\nimport { EclFeaturedItemDescriptionComponent } from './ecl-featured-item-description.component';\nimport { EclFeaturedItemLinkDirective, EclFeaturedMediaAnchorDirective } from './ecl-featured-item-link.directive';\n\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    EclFeaturedMediaAnchorDirective,\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-layout-wrapper.mjs

@@ -52,7 +52,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
  *
  * @example
  * ```html
- * <a eclLayoutWrapperViewAll eclLink [standalone]="true" icon="arrow-left">View all</a>
+ * <a eclLayoutWrapperViewAll eclLink icon="arrow-left">View all</a>
  * ```
  */
 class EclLayoutWrapperViewAllDirective {
@@ -119,7 +119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
  *   <div eclLayoutItem><article eclCard>...</article></div>
  *   <div eclLayoutItem><article eclCard>...</article></div>
  *
- *   <a eclLayoutWrapperViewAll eclLink [standalone]="true" icon="arrow-left">View all</a>
+ *   <a eclLayoutWrapperViewAll eclLink icon="arrow-left">View all</a>
  * </div>
  * ```
  */

package/fesm2022/eui-ecl-components-ecl-layout-wrapper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"eui-ecl-components-ecl-layout-wrapper.mjs","sources":["../../components/ecl-layout-wrapper/ecl-layout-wrapper.directives.ts","../../components/ecl-layout-wrapper/ecl-layout-wrapper.component.ts","../../components/ecl-layout-wrapper/ecl-layout-wrapper.component.html","../../components/ecl-layout-wrapper/index.ts","../../components/ecl-layout-wrapper/eui-ecl-components-ecl-layout-wrapper.ts"],"sourcesContent":["import { computed, Directive, ElementRef, inject, signal } from '@angular/core';\n\n/**\n * Directive for the layout wrapper title.\n * Applies the `ecl-layout-wrapper__title` class to the host element.\n *\n * @example\n * ```html\n * <h2 eclLayoutWrapperTitle>Heading</h2>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperTitle]',\n    host: {\n        class: 'ecl-layout-wrapper__title',\n    },\n})\nexport class EclLayoutWrapperTitleDirective {}\n\n/**\n * Directive for the layout wrapper description.\n * Applies the `ecl-layout-wrapper__description` class to the host element.\n *\n * @example\n * ```html\n * <div eclLayoutWrapperDescription>Lorem ipsum...</div>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperDescription]',\n    host: {\n        class: 'ecl-layout-wrapper__description',\n    },\n})\nexport class EclLayoutWrapperDescriptionDirective {}\n\n/**\n * Directive for the layout wrapper \"view all\" link.\n * Applies the `ecl-layout-wrapper__view-all-link` class to the link element.\n *\n * @example\n * ```html\n * <a eclLayoutWrapperViewAll eclLink [standalone]=\"true\" icon=\"arrow-left\">View all</a>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperViewAll]',\n    host: {\n        class: 'ecl-layout-wrapper__view-all-link',\n    },\n})\nexport class EclLayoutWrapperViewAllDirective {}\n\n/**\n * Directive for individual items inside the layout wrapper grid.\n * Wraps each content element (e.g., card) and applies positional CSS classes.\n *\n * The index is automatically assigned by the parent `EclLayoutWrapperComponent`.\n *\n * @example\n * ```html\n * <div eclLayoutItem><article eclCard>...</article></div>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutItem]',\n    host: {\n        '[class]': 'cssClasses()',\n    },\n})\nexport class EclLayoutItemDirective {\n\n    /** Positional index (1-based), assigned by the parent layout wrapper. */\n    readonly index = signal(0);\n\n    /** Computed CSS classes based on the assigned index. */\n    readonly cssClasses = computed(() => {\n        const idx = this.index();\n        return idx > 0 ? `ecl-layout-item ecl-layout-item--${idx}` : 'ecl-layout-item';\n    });\n}\n","import { booleanAttribute, Component, contentChild, contentChildren, effect, input, numberAttribute } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclLayoutItemDirective, EclLayoutWrapperViewAllDirective } from './ecl-layout-wrapper.directives';\n\n/**\n * ECL Layout Wrapper component.\n * Arranges projected content into a responsive grid layout with configurable columns.\n * Includes optional title, description, and \"view all\" link areas.\n *\n * @example\n * ```html\n * <div eclLayoutWrapper [columns]=\"3\" direction=\"horizontal\">\n *   <h2 eclLayoutWrapperTitle>Heading</h2>\n *   <div eclLayoutWrapperDescription>Description text</div>\n *\n *   <div eclLayoutItem><article eclCard>...</article></div>\n *   <div eclLayoutItem><article eclCard>...</article></div>\n *   <div eclLayoutItem><article eclCard>...</article></div>\n *\n *   <a eclLayoutWrapperViewAll eclLink [standalone]=\"true\" icon=\"arrow-left\">View all</a>\n * </div>\n * ```\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'div[eclLayoutWrapper]',\n    templateUrl: './ecl-layout-wrapper.component.html',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclLayoutWrapperComponent extends ECLBaseDirective {\n    /** Number of columns for the grid layout. Accepts 2, 3, or 4. Defaults to 3. */\n    columns = input(3, { transform: numberAttribute });\n\n    /** Position of the info block (title + description). */\n    infoPosition = input<'top' | 'side'>('top');\n\n    /** Force column number instead of dynamic management. Use with caution. */\n    forcedColumn = input(false, { transform: booleanAttribute });\n\n    /** Flow of items. */\n    direction = input<'horizontal' | 'vertical'>('horizontal');\n\n    /** Display all the elements at full height. */\n    fullHeight = input(true, { transform: booleanAttribute });\n\n    /** Whether a view-all link is projected. */\n    protected hasViewAll = contentChild(EclLayoutWrapperViewAllDirective);\n\n    /** Projected layout items that will be auto-indexed. */\n    private items = contentChildren(EclLayoutItemDirective);\n\n    /** Host CSS classes based on inputs. */\n    // TODO: change this to computed, when the BaseDirective is migrated to signals.\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-layout-wrapper'),\n            `ecl-layout-wrapper--col-${this.columns()}`,\n            this.infoPosition() === 'side' ? 'ecl-layout-wrapper--info-side' : '',\n            this.direction() === 'vertical' ? 'ecl-layout-wrapper--vertical' : '',\n            this.fullHeight() ? '' : 'ecl-layout-wrapper--height-auto',\n            this.forcedColumn() ? 'ecl-layout-wrapper--forced' : '',\n        ].filter(Boolean).join(' ');\n    }\n\n    constructor() {\n        super();\n        effect(() => {\n            const items = this.items();\n            items.forEach((item, i) => item.index.set(i + 1));\n        });\n    }\n}\n","<div class=\"ecl-layout-wrapper__grid\">\n    <div class=\"ecl-layout-wrapper__info\">\n        <ng-content select=\"[eclLayoutWrapperTitle]\" />\n        <ng-content select=\"[eclLayoutWrapperDescription]\" />\n    </div>\n    <div class=\"ecl-layout-wrapper__container\">\n        <div class=\"ecl-layout-wrapper__content\">\n            <ng-content select=\"[eclLayoutItem]\" />\n        </div>\n        @if (hasViewAll()) {\n            <div class=\"ecl-layout-wrapper__view-all\">\n                <ng-content select=\"[eclLayoutWrapperViewAll]\" />\n            </div>\n        }\n    </div>\n</div>\n","import { EclLayoutWrapperComponent } from './ecl-layout-wrapper.component';\nimport {\n    EclLayoutItemDirective,\n    EclLayoutWrapperDescriptionDirective,\n    EclLayoutWrapperTitleDirective,\n    EclLayoutWrapperViewAllDirective,\n} from './ecl-layout-wrapper.directives';\n\nexport * from './ecl-layout-wrapper.component';\nexport * from './ecl-layout-wrapper.directives';\n\nexport const EUI_ECL_LAYOUT_WRAPPER = [\n    EclLayoutWrapperComponent,\n    EclLayoutItemDirective,\n    EclLayoutWrapperTitleDirective,\n    EclLayoutWrapperDescriptionDirective,\n    EclLayoutWrapperViewAllDirective,\n] as const;\n","/**\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-layout-wrapper.mjs","sources":["../../components/ecl-layout-wrapper/ecl-layout-wrapper.directives.ts","../../components/ecl-layout-wrapper/ecl-layout-wrapper.component.ts","../../components/ecl-layout-wrapper/ecl-layout-wrapper.component.html","../../components/ecl-layout-wrapper/index.ts","../../components/ecl-layout-wrapper/eui-ecl-components-ecl-layout-wrapper.ts"],"sourcesContent":["import { computed, Directive, ElementRef, inject, signal } from '@angular/core';\n\n/**\n * Directive for the layout wrapper title.\n * Applies the `ecl-layout-wrapper__title` class to the host element.\n *\n * @example\n * ```html\n * <h2 eclLayoutWrapperTitle>Heading</h2>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperTitle]',\n    host: {\n        class: 'ecl-layout-wrapper__title',\n    },\n})\nexport class EclLayoutWrapperTitleDirective {}\n\n/**\n * Directive for the layout wrapper description.\n * Applies the `ecl-layout-wrapper__description` class to the host element.\n *\n * @example\n * ```html\n * <div eclLayoutWrapperDescription>Lorem ipsum...</div>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperDescription]',\n    host: {\n        class: 'ecl-layout-wrapper__description',\n    },\n})\nexport class EclLayoutWrapperDescriptionDirective {}\n\n/**\n * Directive for the layout wrapper \"view all\" link.\n * Applies the `ecl-layout-wrapper__view-all-link` class to the link element.\n *\n * @example\n * ```html\n * <a eclLayoutWrapperViewAll eclLink icon=\"arrow-left\">View all</a>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperViewAll]',\n    host: {\n        class: 'ecl-layout-wrapper__view-all-link',\n    },\n})\nexport class EclLayoutWrapperViewAllDirective {}\n\n/**\n * Directive for individual items inside the layout wrapper grid.\n * Wraps each content element (e.g., card) and applies positional CSS classes.\n *\n * The index is automatically assigned by the parent `EclLayoutWrapperComponent`.\n *\n * @example\n * ```html\n * <div eclLayoutItem><article eclCard>...</article></div>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutItem]',\n    host: {\n        '[class]': 'cssClasses()',\n    },\n})\nexport class EclLayoutItemDirective {\n\n    /** Positional index (1-based), assigned by the parent layout wrapper. */\n    readonly index = signal(0);\n\n    /** Computed CSS classes based on the assigned index. */\n    readonly cssClasses = computed(() => {\n        const idx = this.index();\n        return idx > 0 ? `ecl-layout-item ecl-layout-item--${idx}` : 'ecl-layout-item';\n    });\n}\n","import { booleanAttribute, Component, contentChild, contentChildren, effect, input, numberAttribute } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclLayoutItemDirective, EclLayoutWrapperViewAllDirective } from './ecl-layout-wrapper.directives';\n\n/**\n * ECL Layout Wrapper component.\n * Arranges projected content into a responsive grid layout with configurable columns.\n * Includes optional title, description, and \"view all\" link areas.\n *\n * @example\n * ```html\n * <div eclLayoutWrapper [columns]=\"3\" direction=\"horizontal\">\n *   <h2 eclLayoutWrapperTitle>Heading</h2>\n *   <div eclLayoutWrapperDescription>Description text</div>\n *\n *   <div eclLayoutItem><article eclCard>...</article></div>\n *   <div eclLayoutItem><article eclCard>...</article></div>\n *   <div eclLayoutItem><article eclCard>...</article></div>\n *\n *   <a eclLayoutWrapperViewAll eclLink icon=\"arrow-left\">View all</a>\n * </div>\n * ```\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'div[eclLayoutWrapper]',\n    templateUrl: './ecl-layout-wrapper.component.html',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclLayoutWrapperComponent extends ECLBaseDirective {\n    /** Number of columns for the grid layout. Accepts 2, 3, or 4. Defaults to 3. */\n    columns = input(3, { transform: numberAttribute });\n\n    /** Position of the info block (title + description). */\n    infoPosition = input<'top' | 'side'>('top');\n\n    /** Force column number instead of dynamic management. Use with caution. */\n    forcedColumn = input(false, { transform: booleanAttribute });\n\n    /** Flow of items. */\n    direction = input<'horizontal' | 'vertical'>('horizontal');\n\n    /** Display all the elements at full height. */\n    fullHeight = input(true, { transform: booleanAttribute });\n\n    /** Whether a view-all link is projected. */\n    protected hasViewAll = contentChild(EclLayoutWrapperViewAllDirective);\n\n    /** Projected layout items that will be auto-indexed. */\n    private items = contentChildren(EclLayoutItemDirective);\n\n    /** Host CSS classes based on inputs. */\n    // TODO: change this to computed, when the BaseDirective is migrated to signals.\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-layout-wrapper'),\n            `ecl-layout-wrapper--col-${this.columns()}`,\n            this.infoPosition() === 'side' ? 'ecl-layout-wrapper--info-side' : '',\n            this.direction() === 'vertical' ? 'ecl-layout-wrapper--vertical' : '',\n            this.fullHeight() ? '' : 'ecl-layout-wrapper--height-auto',\n            this.forcedColumn() ? 'ecl-layout-wrapper--forced' : '',\n        ].filter(Boolean).join(' ');\n    }\n\n    constructor() {\n        super();\n        effect(() => {\n            const items = this.items();\n            items.forEach((item, i) => item.index.set(i + 1));\n        });\n    }\n}\n","<div class=\"ecl-layout-wrapper__grid\">\n    <div class=\"ecl-layout-wrapper__info\">\n        <ng-content select=\"[eclLayoutWrapperTitle]\" />\n        <ng-content select=\"[eclLayoutWrapperDescription]\" />\n    </div>\n    <div class=\"ecl-layout-wrapper__container\">\n        <div class=\"ecl-layout-wrapper__content\">\n            <ng-content select=\"[eclLayoutItem]\" />\n        </div>\n        @if (hasViewAll()) {\n            <div class=\"ecl-layout-wrapper__view-all\">\n                <ng-content select=\"[eclLayoutWrapperViewAll]\" />\n            </div>\n        }\n    </div>\n</div>\n","import { EclLayoutWrapperComponent } from './ecl-layout-wrapper.component';\nimport {\n    EclLayoutItemDirective,\n    EclLayoutWrapperDescriptionDirective,\n    EclLayoutWrapperTitleDirective,\n    EclLayoutWrapperViewAllDirective,\n} from './ecl-layout-wrapper.directives';\n\nexport * from './ecl-layout-wrapper.component';\nexport * from './ecl-layout-wrapper.directives';\n\nexport const EUI_ECL_LAYOUT_WRAPPER = [\n    EclLayoutWrapperComponent,\n    EclLayoutItemDirective,\n    EclLayoutWrapperTitleDirective,\n    EclLayoutWrapperDescriptionDirective,\n    EclLayoutWrapperViewAllDirective,\n] as const;\n","/**\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-multiselect.mjs

@@ -352,7 +352,7 @@ class EclMultiselectOptionComponent extends ECLBaseDirective {
         return crypto.randomUUID();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMultiselectOptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclMultiselectOptionComponent, isStandalone: true, selector: "div[eclMultiselectOption]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isChecked: { classPropertyName: "isChecked", publicName: "isChecked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isChecked: "isCheckedChange", optionClick: "optionClick", optionKeydown: "optionKeydown" }, host: { properties: { "class": "cssClasses", "class.ecl-checkbox--disabled": "disabled()", "attr.disabled": "disabled() || null", "style.display": "display()" } }, viewQueries: [{ propertyName: "eclCheckboxInput", first: true, predicate: ["checkboxInput"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1$1.EclCheckboxDirective }], ngImport: i0, template: "<input\n    eclCheckboxInput\n    type=\"checkbox\"\n    [id]=\"id\"\n    [value]=\"value()\"\n    (click)=\"onOptionClick()\"\n    (keydown)=\"onOptionKeydown($event)\"\n    [checked]=\"isChecked()\"\n    [disabled]=\"disabled()\"\n    #checkboxInput />\n<label [for]=\"id\" eclCheckboxLabel><span [innerHTML]=\"label() | boldText: keyword\"></span></label>\n", dependencies: [{ kind: "component", type: i1$1.EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled", "isRequired"] }, { kind: "directive", type: i1$1.EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "pipe", type: BoldTextPipe, name: "boldText" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclMultiselectOptionComponent, isStandalone: true, selector: "div[eclMultiselectOption]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isChecked: { classPropertyName: "isChecked", publicName: "isChecked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isChecked: "isCheckedChange", optionClick: "optionClick", optionKeydown: "optionKeydown" }, host: { properties: { "class": "cssClasses", "class.ecl-checkbox--disabled": "disabled()", "attr.disabled": "disabled() || null", "style.display": "display()" } }, viewQueries: [{ propertyName: "eclCheckboxInput", first: true, predicate: ["checkboxInput"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1$1.EclCheckboxDirective }], ngImport: i0, template: "<input\n    eclCheckboxInput\n    type=\"checkbox\"\n    [id]=\"id\"\n    [value]=\"value()\"\n    (click)=\"onOptionClick()\"\n    (keydown)=\"onOptionKeydown($event)\"\n    [checked]=\"isChecked()\"\n    [disabled]=\"disabled()\"\n    #checkboxInput />\n<label [for]=\"id\" eclCheckboxLabel><span [innerHTML]=\"label() | boldText: keyword\"></span></label>\n", dependencies: [{ kind: "component", type: i1$1.EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isRequired"] }, { kind: "directive", type: i1$1.EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "pipe", type: BoldTextPipe, name: "boldText" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMultiselectOptionComponent, decorators: [{
             type: Component,
@@ -951,7 +951,7 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
                 useExisting: forwardRef(() => EclMultiselectDropdownComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "eclMultiselectInput", first: true, predicate: ["eclMultiselectInput"], descendants: true, isSignal: true }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true, isSignal: true }, { propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "clearAllBtn", first: true, predicate: ["clearAllBtn"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "multiOptionComponents", predicate: EclMultiselectOptionComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div eclMultiselectInput #eclMultiselectInput [inputPlaceholder]=\"mainInputPlaceholder()\" [selectedItemsLabels]=\"selectedItemsLabels()\"\n    (mainInputClick)=\"onClickMainInput($event)\" (mainInputKeydown)=\"onKeydownMainInput($event)\" [isDisabled]=\"disabled()\"\n    [ariaDescribedby]=\"ariaDescribedby()\" [toggleLabel]=\"toggleLabel()\" [ariaControls]=\"dropdownId\" [isInvalid]=\"isInvalid()\"\n    [isDropdownExpanded]=\"isShowMultiselectDropdown\" [eclSize]=\"eclSize()\" [toggleId]=\"toggleId\" [counterLabel]=\"counterLabel()\"></div>\n<div\n    [style.display]=\"isShowMultiselectDropdown ? 'block' : 'none'\"\n    class=\"ecl-select__multiple-dropdown ecl-select__container ecl-select__container--{{eclSize()}}\"\n    [id]=\"dropdownId\">\n    @if(hasSearchBox()) {\n    <input class=\"ecl-text-input\" type=\"search\" #searchInput [placeholder]=\"searchFieldPlaceholder()\"\n        (input)=\"onSearch($event.target)\" (keydown.enter)=\"onEnterSearch($event)\" [attr.aria-label]=\"searchFieldPlaceholder()\"\n        (keydown.arrowup)=\"onArrowUpSearch($event)\" (keydown.arrowdown)=\"onArrowDownSearch($event)\" />\n    }\n    @if(hasSelectAll()) {\n    <div eclCheckbox [isDisabled]=\"isSelectAllDisabled\" class=\"ecl-select__multiple-all\">\n        <input eclCheckboxInput #selectAllCheckbox [id]=\"selectAllId\" type=\"checkbox\" [attr.disabled]=\"isSelectAllDisabled\"\n            (click)=\"onSelectAll()\" (keydown.arrowup)=\"onArrowUpSelectAll($event)\"\n            (keydown.arrowdown)=\"onArrowDownSelectAll($event)\" (keydown.enter)=\"onEnterSelectAll($event)\" />\n        <label [for]=\"selectAllId\" eclCheckboxLabel> {{ 'ecl.multiselect.SELECT-ALL' | translate }} ({{ optionsCount }})\n        </label>\n    </div>\n    }\n    <div class=\"ecl-select__multiple-options\" aria-live=\"polite\">\n        @for (item of multiOptionDirectives(); track item.label()) {\n                @if (item.isOptGroup()) {\n                    <fieldset eclMultiselectOptgroup [label]=\"item.label()\">\n                        @for (elem of item.eclOptionItems(); track elem.label()) {\n                            <div\n                                eclMultiselectOption\n                                [value]=\"elem.value()\"\n                                [label]=\"elem.label()\"\n                                [disabled]=\"elem.disabled()\"\n                                [isChecked]=\"elem.selected()\"\n                                [class]=\"elem.class()\"\n                                (optionClick)=\"onOptionSelected($event)\"\n                                (optionKeydown)=\"onKeydownOption($event)\"></div>\n                        }\n                    </fieldset>\n                } @else if (!item.isOptGroup()) {\n                    <div\n                        eclMultiselectOption\n                        [value]=\"item.value()\"\n                        [label]=\"item.label()\"\n                        [disabled]=\"item.disabled()\"\n                        [isChecked]=\"item.selected()\"\n                        [class]=\"item.class()\"\n                        (optionClick)=\"onOptionSelected($event)\"\n                        (optionKeydown)=\"onKeydownOption($event)\"></div>\n                }\n        }\n\n\n        @if (isShowNoResultsFound) {\n            <div class=\"ecl-select__multiple-no-results\">\n                <span>{{ 'ecl.multiselect.NO-RESULTS-FOUND' | translate }}</span>\n            </div>\n        }\n\n    </div>\n    @if (isShowToolbar()) {\n        <div class=\"ecl-select-multiple-toolbar\">\n            <button\n                eclButton\n                variant=\"primary\"\n                #closeBtn\n                [type]=\"isSubmitOnApply() ? 'submit' : 'button'\"\n                (keydown.arrowup)=\"onArrowUpClose($event)\"\n                (keydown.arrowDown)=\"onArrowDownClose($event)\"\n                (keydown.tab)=\"onTabClose($event)\"\n                (click)=\"onClickClose($event)\">\n                {{ 'ecl.common.APPLY' | translate }}\n            </button>\n            <button\n                eclButton\n                variant=\"tertiary\"\n                #clearAllBtn\n                (keydown.arrowup)=\"onArrowUpClear($event)\"\n                (keydown.arrowDown)=\"onArrowDownClear($event)\"\n                (keydown.tab)=\"onTabClear($event)\"\n                (keydown.enter)=\"onEnterClear($event)\"\n                (click)=\"onClickClearAll($event)\">\n                {{ 'ecl.multiselect.CLEAR-ALL' | translate }}\n            </button>\n        </div>\n    }\n</div>\n", dependencies: [{ kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "component", type: EclMultiselectOptionComponent, selector: "div[eclMultiselectOption]", inputs: ["value", "label", "disabled", "isChecked"], outputs: ["isCheckedChange", "optionClick", "optionKeydown"] }, { kind: "component", type: EclMultiselectOptgroupComponent, selector: "fieldset[eclMultiselectOptgroup]", inputs: ["label"] }, { kind: "component", type: EclMultiselectInputComponent, selector: "div[eclMultiselectInput]", inputs: ["eclSize", "counterLabel", "toggleId", "toggleLabel", "isDisabled", "isInvalid", "inputPlaceholder", "selectedItemsLabels", "isDropdownExpanded", "ariaControls", "ariaDescribedby"], outputs: ["mainInputClick", "mainInputKeydown"] }, { kind: "component", type: i1$1.EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled", "isRequired"] }, { kind: "directive", type: i1$1.EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "directive", type: i1$1.EclCheckboxDirective, selector: "[eclCheckbox]", inputs: ["isDisabled", "isInvalid", "isSingle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "eclMultiselectInput", first: true, predicate: ["eclMultiselectInput"], descendants: true, isSignal: true }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true, isSignal: true }, { propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "clearAllBtn", first: true, predicate: ["clearAllBtn"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "multiOptionComponents", predicate: EclMultiselectOptionComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div eclMultiselectInput #eclMultiselectInput [inputPlaceholder]=\"mainInputPlaceholder()\" [selectedItemsLabels]=\"selectedItemsLabels()\"\n    (mainInputClick)=\"onClickMainInput($event)\" (mainInputKeydown)=\"onKeydownMainInput($event)\" [isDisabled]=\"disabled()\"\n    [ariaDescribedby]=\"ariaDescribedby()\" [toggleLabel]=\"toggleLabel()\" [ariaControls]=\"dropdownId\" [isInvalid]=\"isInvalid()\"\n    [isDropdownExpanded]=\"isShowMultiselectDropdown\" [eclSize]=\"eclSize()\" [toggleId]=\"toggleId\" [counterLabel]=\"counterLabel()\"></div>\n<div\n    [style.display]=\"isShowMultiselectDropdown ? 'block' : 'none'\"\n    class=\"ecl-select__multiple-dropdown ecl-select__container ecl-select__container--{{eclSize()}}\"\n    [id]=\"dropdownId\">\n    @if(hasSearchBox()) {\n    <input class=\"ecl-text-input\" type=\"search\" #searchInput [placeholder]=\"searchFieldPlaceholder()\"\n        (input)=\"onSearch($event.target)\" (keydown.enter)=\"onEnterSearch($event)\" [attr.aria-label]=\"searchFieldPlaceholder()\"\n        (keydown.arrowup)=\"onArrowUpSearch($event)\" (keydown.arrowdown)=\"onArrowDownSearch($event)\" />\n    }\n    @if(hasSelectAll()) {\n    <div eclCheckbox [isDisabled]=\"isSelectAllDisabled\" class=\"ecl-select__multiple-all\">\n        <input eclCheckboxInput #selectAllCheckbox [id]=\"selectAllId\" type=\"checkbox\" [attr.disabled]=\"isSelectAllDisabled\"\n            (click)=\"onSelectAll()\" (keydown.arrowup)=\"onArrowUpSelectAll($event)\"\n            (keydown.arrowdown)=\"onArrowDownSelectAll($event)\" (keydown.enter)=\"onEnterSelectAll($event)\" />\n        <label [for]=\"selectAllId\" eclCheckboxLabel> {{ 'ecl.multiselect.SELECT-ALL' | translate }} ({{ optionsCount }})\n        </label>\n    </div>\n    }\n    <div class=\"ecl-select__multiple-options\" aria-live=\"polite\">\n        @for (item of multiOptionDirectives(); track item.label()) {\n                @if (item.isOptGroup()) {\n                    <fieldset eclMultiselectOptgroup [label]=\"item.label()\">\n                        @for (elem of item.eclOptionItems(); track elem.label()) {\n                            <div\n                                eclMultiselectOption\n                                [value]=\"elem.value()\"\n                                [label]=\"elem.label()\"\n                                [disabled]=\"elem.disabled()\"\n                                [isChecked]=\"elem.selected()\"\n                                [class]=\"elem.class()\"\n                                (optionClick)=\"onOptionSelected($event)\"\n                                (optionKeydown)=\"onKeydownOption($event)\"></div>\n                        }\n                    </fieldset>\n                } @else if (!item.isOptGroup()) {\n                    <div\n                        eclMultiselectOption\n                        [value]=\"item.value()\"\n                        [label]=\"item.label()\"\n                        [disabled]=\"item.disabled()\"\n                        [isChecked]=\"item.selected()\"\n                        [class]=\"item.class()\"\n                        (optionClick)=\"onOptionSelected($event)\"\n                        (optionKeydown)=\"onKeydownOption($event)\"></div>\n                }\n        }\n\n\n        @if (isShowNoResultsFound) {\n            <div class=\"ecl-select__multiple-no-results\">\n                <span>{{ 'ecl.multiselect.NO-RESULTS-FOUND' | translate }}</span>\n            </div>\n        }\n\n    </div>\n    @if (isShowToolbar()) {\n        <div class=\"ecl-select-multiple-toolbar\">\n            <button\n                eclButton\n                variant=\"primary\"\n                #closeBtn\n                [type]=\"isSubmitOnApply() ? 'submit' : 'button'\"\n                (keydown.arrowup)=\"onArrowUpClose($event)\"\n                (keydown.arrowDown)=\"onArrowDownClose($event)\"\n                (keydown.tab)=\"onTabClose($event)\"\n                (click)=\"onClickClose($event)\">\n                {{ 'ecl.common.APPLY' | translate }}\n            </button>\n            <button\n                eclButton\n                variant=\"tertiary\"\n                #clearAllBtn\n                (keydown.arrowup)=\"onArrowUpClear($event)\"\n                (keydown.arrowDown)=\"onArrowDownClear($event)\"\n                (keydown.tab)=\"onTabClear($event)\"\n                (keydown.enter)=\"onEnterClear($event)\"\n                (click)=\"onClickClearAll($event)\">\n                {{ 'ecl.multiselect.CLEAR-ALL' | translate }}\n            </button>\n        </div>\n    }\n</div>\n", dependencies: [{ kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "component", type: EclMultiselectOptionComponent, selector: "div[eclMultiselectOption]", inputs: ["value", "label", "disabled", "isChecked"], outputs: ["isCheckedChange", "optionClick", "optionKeydown"] }, { kind: "component", type: EclMultiselectOptgroupComponent, selector: "fieldset[eclMultiselectOptgroup]", inputs: ["label"] }, { kind: "component", type: EclMultiselectInputComponent, selector: "div[eclMultiselectInput]", inputs: ["eclSize", "counterLabel", "toggleId", "toggleLabel", "isDisabled", "isInvalid", "inputPlaceholder", "selectedItemsLabels", "isDropdownExpanded", "ariaControls", "ariaDescribedby"], outputs: ["mainInputClick", "mainInputKeydown"] }, { kind: "component", type: i1$1.EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isRequired"] }, { kind: "directive", type: i1$1.EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "directive", type: i1$1.EclCheckboxDirective, selector: "[eclCheckbox]", inputs: ["isDisabled", "isInvalid", "isSingle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMultiselectDropdownComponent, decorators: [{
             type: Component,