@eui/ecl 22.0.0-alpha.5 → 22.0.0-alpha.7

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eui documentation
 
-> Generated by compodoc 2.0.0 at 2026-09-11T17:21:59.518Z, llm-md export.
+> Generated by compodoc 2.0.0 at 2026-09-21T09:13:14.249Z, llm-md export.
 
 ## Modules
 
@@ -526,7 +526,6 @@ Methods:
 
 File: `packages/ecl/components/ecl-list/ecl-description-list-definition/ecl-description-list-definition.component.ts`
 Selector: `[eclDescriptionListDefinition]`
-Standalone: yes
 
 Description: Component for a definition item within an ECL description list. Supports variants (link, inline, taxonomy, tag) and collapsible functionality with maxVisibleItems control.
 
@@ -537,7 +536,7 @@ Inputs:
 - `tabindex: number`
 
 Properties:
-- `domReady: unknown = signal(false)` — Signal indicating whether the DOM is ready for manipulation. Set to true after first render to ensure projected content exists.
+- `domReady: unknown = signal(false)` — Signal indicating whether the DOM is ready for manipulation. Set to true after first render to ensure the projected exists before the see-more link is inserted into it. Defers DOM writes in the effect.
 - `hasSeeAll: unknown = computed(() => { const max = this.maxVisibleItems(); const total = this.currentItemsNumber(); return !!max && total > 0 && max < total; })` — Computed signal that determines if "See all" link should be shown. Returns true when maxVisibleItems is set and less than total items.
 - `maxVisibleItems: unknown = signal<number | null>(null)` — Maximum number of items to display before showing "See all" link. Controlled by parent EclDescriptionListDirective.
 
@@ -1179,6 +1178,8 @@ Properties:
 - `eclIllustrationPicture: unknown = contentChild(forwardRef(() => EclListIllustrationPictureDirective))`
 - `hasDivider: unknown = signal(false)` — A special class needs to be added, if an icon list has dividers between items.
 - `hasPicture: Signal<boolean> = computed(() => this.eclIllustrationPicture() !== undefined)`
+- `hasTitle: unknown = computed(() => Boolean(this.eclTitle()) || this.eclIllustrationIcon() !== undefined)` — Returns true if the item has a title or any projected icons.
+- `hasValue: unknown = computed(() => Boolean(this.eclValue()))` — Returns true if the item has a value.
 - `isVerticalPicture: unknown = signal(false)` — A special class needs to be added, for vertical lists with picture.
 - `role: string = 'listitem'` — Applies ARIA role for list items.
 
@@ -4145,8 +4146,8 @@ Inputs:
 - `tabindex: number`
 
 Properties:
-- `isHidden: unknown = false` — Internal state used to hide the item when exceeding the visible limit.
-- `isLastVisible: unknown = false` — Indicates whether this is the last item visible before the "see all" action is triggered.
+- `isHidden: unknown = signal(false)` — Internal state used to hide the item when exceeding the visible limit.
+- `isLastVisible: unknown = signal(false)` — Indicates whether this is the last item visible before the "see all" action is triggered.
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -4163,9 +4164,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `cmpClass: unknown = true` — Applies the ECL list container class.
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -4860,7 +4858,6 @@ Selector: `iframe[eclMediaContainerIframe]`
 Description: Adds styling and attributes to the iframe element.
 
 Inputs:
-- `ratio: string`
 - `height = undefined`
 - `width = undefined`
 - `class: string`

package/docs/properties.html

@@ -128,7 +128,7 @@
     </ol>
     <ul class="properties-list">
         <li>
-            <b>Version</b> : 22.0.0-alpha.5</li>
+            <b>Version</b> : 22.0.0-alpha.7</li>
     </ul>
 
 

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, HostBinding, Directive } from '@angular/core';
+import { input, Directive } from '@angular/core';
 import { ECLBaseDirective } from '@eui/ecl/core';
 
 /**
@@ -32,17 +32,17 @@ class EclLabelDirective extends ECLBaseDirective {
         return [super.getCssClasses('ecl-label'), `ecl-label--${this.variant()}`].join(' ').trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclLabelDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: EclLabelDirective, isStandalone: true, selector: "[eclLabel]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: EclLabelDirective, isStandalone: true, selector: "[eclLabel]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclLabel]',
+                    host: {
+                        '[class]': 'cssClasses',
+                    },
                 }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 const EUI_ECL_LABEL = [
     EclLabelDirective,

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

@@ -1 +1 @@
-{"version":3,"file":"eui-ecl-components-ecl-label.mjs","sources":["../../components/ecl-label/ecl-label.directive.ts","../../components/ecl-label/index.ts","../../components/ecl-label/eui-ecl-components-ecl-label.ts"],"sourcesContent":["import { Directive, HostBinding, input } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive for applying ECL label styles.\n *\n * Supports multiple visual variants based on importance or context.\n * Adds appropriate ECL classes dynamically.\n */\n@Directive({\n    selector: '[eclLabel]',\n})\nexport class EclLabelDirective extends ECLBaseDirective {\n    /**\n     * Defines the visual variant of the label.\n     * \n     * - `'low'` – default styling\n     * - `'medium'` – medium emphasis\n     * - `'high'` – high emphasis\n     * - `'highlight'` – special highlight\n     *\n     * @default 'low'\n     */\n    readonly variant = input<'low' | 'medium' | 'high' | 'highlight'>('low');\n\n    /**\n     * CSS classes applied to the host element.\n     * Combines base ECL label class with the variant modifier.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-label'), `ecl-label--${this.variant()}`].join(' ').trim();\n    }\n}\n","import { EclLabelDirective } from './ecl-label.directive';\n\nexport * from './ecl-label.directive';\n\nexport const EUI_ECL_LABEL = [\n    EclLabelDirective,\n] as const;","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAGA;;;;;AAKG;AAIG,MAAO,iBAAkB,SAAQ,gBAAgB,CAAA;AAHvD,IAAA,WAAA,GAAA;;AAII;;;;;;;;;AASG;QACM,IAAA,CAAA,OAAO,GAAG,KAAK,CAA0C,KAAK;oFAAC;AAU3E,IAAA;AARG;;;AAGG;AACH,IAAA,IACI,UAAU,GAAA;QACV,OAAO,CAAC,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE,CAAA,WAAA,EAAc,IAAI,CAAC,OAAO,EAAE,CAAA,CAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE;IAC9F;8GApBS,iBAAiB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAH7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,YAAY;AACzB,iBAAA;;sBAkBI,WAAW;uBAAC,OAAO;;;ACzBjB,MAAM,aAAa,GAAG;IACzB,iBAAiB;;;ACLrB;;AAEG;;;;"}
+{"version":3,"file":"eui-ecl-components-ecl-label.mjs","sources":["../../components/ecl-label/ecl-label.directive.ts","../../components/ecl-label/index.ts","../../components/ecl-label/eui-ecl-components-ecl-label.ts"],"sourcesContent":["import { Directive, input } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive for applying ECL label styles.\n *\n * Supports multiple visual variants based on importance or context.\n * Adds appropriate ECL classes dynamically.\n */\n@Directive({\n    selector: '[eclLabel]',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclLabelDirective extends ECLBaseDirective {\n    /**\n     * Defines the visual variant of the label.\n     * \n     * - `'low'` – default styling\n     * - `'medium'` – medium emphasis\n     * - `'high'` – high emphasis\n     * - `'highlight'` – special highlight\n     *\n     * @default 'low'\n     */\n    readonly variant = input<'low' | 'medium' | 'high' | 'highlight'>('low');\n\n    /**\n     * CSS classes applied to the host element.\n     * Combines base ECL label class with the variant modifier.\n     */\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-label'), `ecl-label--${this.variant()}`].join(' ').trim();\n    }\n}\n","import { EclLabelDirective } from './ecl-label.directive';\n\nexport * from './ecl-label.directive';\n\nexport const EUI_ECL_LABEL = [\n    EclLabelDirective,\n] as const;","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAGA;;;;;AAKG;AAOG,MAAO,iBAAkB,SAAQ,gBAAgB,CAAA;AANvD,IAAA,WAAA,GAAA;;AAOI;;;;;;;;;AASG;QACM,IAAA,CAAA,OAAO,GAAG,KAAK,CAA0C,KAAK;oFAAC;AAS3E,IAAA;AAPG;;;AAGG;AACH,IAAA,IAAI,UAAU,GAAA;QACV,OAAO,CAAC,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE,CAAA,WAAA,EAAc,IAAI,CAAC,OAAO,EAAE,CAAA,CAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE;IAC9F;8GAnBS,iBAAiB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,YAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAN7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,YAAY;AACtB,oBAAA,IAAI,EAAE;AACF,wBAAA,SAAS,EAAE,YAAY;AAC1B,qBAAA;AACJ,iBAAA;;;ACVM,MAAM,aAAa,GAAG;IACzB,iBAAiB;;;ACLrB;;AAEG;;;;"}

package/fesm2022/eui-ecl-components-ecl-list-illustration.mjs

@@ -149,25 +149,23 @@ class EclListIllustrationItemComponent extends ECLBaseDirective {
         ...(ngDevMode ? [{ debugName: "hasDivider" }] : /* istanbul ignore next */ []));
         this.hasPicture = computed(() => this.eclIllustrationPicture() !== undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasPicture" }] : /* istanbul ignore next */ []));
-    }
-    /**
-     * Returns `true` if the item has a title or any projected icons.
-     */
-    get hasTitle() {
-        return Boolean(this.eclTitle()) || this.eclIllustrationIcon() !== undefined;
-    }
-    /**
-     * Returns `true` if the item has a value.
-     */
-    get hasValue() {
-        return Boolean(this.eclValue());
+        /**
+         * Returns `true` if the item has a title or any projected icons.
+         */
+        this.hasTitle = computed(() => Boolean(this.eclTitle()) || this.eclIllustrationIcon() !== undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasTitle" }] : /* istanbul ignore next */ []));
+        /**
+         * Returns `true` if the item has a value.
+         */
+        this.hasValue = computed(() => Boolean(this.eclValue()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclListIllustrationItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclListIllustrationItemComponent, isStandalone: true, selector: "ecl-list-illustration-item, li[eclListIllustrationItem]", inputs: { eclTitle: { classPropertyName: "eclTitle", publicName: "eclTitle", isSignal: true, isRequired: false, transformFunction: null }, eclValue: { classPropertyName: "eclValue", publicName: "eclValue", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "this.role", "class.ecl-list-illustration__item": "this.className" } }, queries: [{ propertyName: "eclIllustrationIcon", first: true, predicate: i0.forwardRef(() => EclListIllustrationIconDirective), descendants: true, isSignal: true }, { propertyName: "eclIllustrationPicture", first: true, predicate: i0.forwardRef(() => EclListIllustrationPictureDirective), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-list-illustration__item-content\" [class.ecl-list-illustration__item-content--row]=\"isVerticalPicture()\"\n    [class.ecl-list-illustration__divider]=\"hasDivider()\">\n    <ng-content select=\"[eclListIllustrationImage],[eclListIllustrationPicture],[eclListIllustrationIcon]\"></ng-content>\n    <div class=\"ecl-list-illustration__detail\">\n        @if (hasTitle || hasValue) {\n        <div class=\"ecl-list-illustration__title-container\">\n            @if (hasValue) {\n            <div class=\"ecl-list-illustration__value\">{{ eclValue() }}</div>\n            }\n            <div class=\"ecl-list-illustration__title\">{{ eclTitle() }}</div>\n        </div>\n        }\n\n        <div class=\"ecl-list-illustration__description\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclListIllustrationItemComponent, isStandalone: true, selector: "ecl-list-illustration-item, li[eclListIllustrationItem]", inputs: { eclTitle: { classPropertyName: "eclTitle", publicName: "eclTitle", isSignal: true, isRequired: false, transformFunction: null }, eclValue: { classPropertyName: "eclValue", publicName: "eclValue", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "this.role", "class.ecl-list-illustration__item": "this.className" } }, queries: [{ propertyName: "eclIllustrationIcon", first: true, predicate: i0.forwardRef(() => EclListIllustrationIconDirective), descendants: true, isSignal: true }, { propertyName: "eclIllustrationPicture", first: true, predicate: i0.forwardRef(() => EclListIllustrationPictureDirective), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-list-illustration__item-content\" [class.ecl-list-illustration__item-content--row]=\"isVerticalPicture()\"\n    [class.ecl-list-illustration__divider]=\"hasDivider()\">\n    <ng-content select=\"[eclListIllustrationImage],[eclListIllustrationPicture],[eclListIllustrationIcon]\"></ng-content>\n    <div class=\"ecl-list-illustration__detail\">\n        @if (hasTitle() || hasValue()) {\n        <div class=\"ecl-list-illustration__title-container\">\n            @if (hasValue()) {\n            <div class=\"ecl-list-illustration__value\">{{ eclValue() }}</div>\n            }\n            <div class=\"ecl-list-illustration__title\">{{ eclTitle() }}</div>\n        </div>\n        }\n\n        <div class=\"ecl-list-illustration__description\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclListIllustrationItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-list-illustration-item, li[eclListIllustrationItem]', template: "<div class=\"ecl-list-illustration__item-content\" [class.ecl-list-illustration__item-content--row]=\"isVerticalPicture()\"\n    [class.ecl-list-illustration__divider]=\"hasDivider()\">\n    <ng-content select=\"[eclListIllustrationImage],[eclListIllustrationPicture],[eclListIllustrationIcon]\"></ng-content>\n    <div class=\"ecl-list-illustration__detail\">\n        @if (hasTitle || hasValue) {\n        <div class=\"ecl-list-illustration__title-container\">\n            @if (hasValue) {\n            <div class=\"ecl-list-illustration__value\">{{ eclValue() }}</div>\n            }\n            <div class=\"ecl-list-illustration__title\">{{ eclTitle() }}</div>\n        </div>\n        }\n\n        <div class=\"ecl-list-illustration__description\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>" }]
+            args: [{ selector: 'ecl-list-illustration-item, li[eclListIllustrationItem]', template: "<div class=\"ecl-list-illustration__item-content\" [class.ecl-list-illustration__item-content--row]=\"isVerticalPicture()\"\n    [class.ecl-list-illustration__divider]=\"hasDivider()\">\n    <ng-content select=\"[eclListIllustrationImage],[eclListIllustrationPicture],[eclListIllustrationIcon]\"></ng-content>\n    <div class=\"ecl-list-illustration__detail\">\n        @if (hasTitle() || hasValue()) {\n        <div class=\"ecl-list-illustration__title-container\">\n            @if (hasValue()) {\n            <div class=\"ecl-list-illustration__value\">{{ eclValue() }}</div>\n            }\n            <div class=\"ecl-list-illustration__title\">{{ eclTitle() }}</div>\n        </div>\n        }\n\n        <div class=\"ecl-list-illustration__description\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>" }]
         }], propDecorators: { eclTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclTitle", required: false }] }], eclValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclValue", required: false }] }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
@@ -227,8 +225,7 @@ class EclListIllustrationComponent extends ECLBaseDirective {
         /** If this is an icon-list, it can have dividers between each item. */
         this.hasDividers = input(false, { ...(ngDevMode ? { debugName: "hasDividers" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** If we have a number-list, the user can set the start of the counter. */
-        this.counterStart = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "counterStart" }] : /* istanbul ignore next */ []));
+        this.counterStart = input(null, { ...(ngDevMode ? { debugName: "counterStart" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         this.eclIllustrationItems = contentChildren(forwardRef(() => EclListIllustrationItemComponent), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "eclIllustrationItems" }] : /* istanbul ignore next */ []));
         /**
@@ -276,26 +273,18 @@ class EclListIllustrationComponent extends ECLBaseDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclListIllustrationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclListIllustrationComponent, isStandalone: true, selector: "ecl-list-illustration, ul[eclListIllustration], ol[eclListIllustration]", inputs: { isZebra: { classPropertyName: "isZebra", publicName: "isZebra", isSignal: true, isRequired: false, transformFunction: null }, horizontalColumns: { classPropertyName: "horizontalColumns", publicName: "horizontalColumns", isSignal: true, isRequired: false, transformFunction: null }, fontSize: { classPropertyName: "fontSize", publicName: "fontSize", isSignal: true, isRequired: false, transformFunction: null }, isCentered: { classPropertyName: "isCentered", publicName: "isCentered", isSignal: true, isRequired: false, transformFunction: null }, isIconInline: { classPropertyName: "isIconInline", publicName: "isIconInline", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, hasDividers: { classPropertyName: "hasDividers", publicName: "hasDividers", isSignal: true, isRequired: false, transformFunction: null }, counterStart: { classPropertyName: "counterStart", publicName: "counterStart", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "elementDisplayStyle()", "attr.role": "this.role", "class": "this.cssClasses", "style.--ecl-list-illustration-counter-start": "this.counterStartStyle", "attr.start": "this.startAttr" } }, queries: [{ propertyName: "eclIllustrationItems", predicate: i0.forwardRef(() => EclListIllustrationItemComponent), isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclListIllustrationComponent, isStandalone: true, selector: "ecl-list-illustration, ul[eclListIllustration], ol[eclListIllustration]", inputs: { isZebra: { classPropertyName: "isZebra", publicName: "isZebra", isSignal: true, isRequired: false, transformFunction: null }, horizontalColumns: { classPropertyName: "horizontalColumns", publicName: "horizontalColumns", isSignal: true, isRequired: false, transformFunction: null }, fontSize: { classPropertyName: "fontSize", publicName: "fontSize", isSignal: true, isRequired: false, transformFunction: null }, isCentered: { classPropertyName: "isCentered", publicName: "isCentered", isSignal: true, isRequired: false, transformFunction: null }, isIconInline: { classPropertyName: "isIconInline", publicName: "isIconInline", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, hasDividers: { classPropertyName: "hasDividers", publicName: "hasDividers", isSignal: true, isRequired: false, transformFunction: null }, counterStart: { classPropertyName: "counterStart", publicName: "counterStart", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "role", "class": "cssClasses", "style.display": "elementDisplayStyle()", "style.--ecl-list-illustration-counter-start": "counterStartStyle", "attr.start": "startAttr" } }, queries: [{ propertyName: "eclIllustrationItems", predicate: i0.forwardRef(() => EclListIllustrationItemComponent), isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclListIllustrationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-list-illustration, ul[eclListIllustration], ol[eclListIllustration]', host: {
+                        '[attr.role]': 'role',
+                        '[class]': 'cssClasses',
                         '[style.display]': 'elementDisplayStyle()',
+                        '[style.--ecl-list-illustration-counter-start]': 'counterStartStyle',
+                        '[attr.start]': 'startAttr',
                     }, template: "<ng-content></ng-content>" }]
-        }], ctorParameters: () => [], propDecorators: { isZebra: [{ type: i0.Input, args: [{ isSignal: true, alias: "isZebra", required: false }] }], horizontalColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontalColumns", required: false }] }], fontSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fontSize", required: false }] }], isCentered: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCentered", required: false }] }], isIconInline: [{ type: i0.Input, args: [{ isSignal: true, alias: "isIconInline", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], hasDividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDividers", required: false }] }], counterStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "counterStart", required: false }] }], eclIllustrationItems: [{ type: i0.ContentChildren, args: [forwardRef(() => EclListIllustrationItemComponent), { isSignal: true }] }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], counterStartStyle: [{
-                type: HostBinding,
-                args: ['style.--ecl-list-illustration-counter-start']
-            }], startAttr: [{
-                type: HostBinding,
-                args: ['attr.start']
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { isZebra: [{ type: i0.Input, args: [{ isSignal: true, alias: "isZebra", required: false }] }], horizontalColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontalColumns", required: false }] }], fontSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fontSize", required: false }] }], isCentered: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCentered", required: false }] }], isIconInline: [{ type: i0.Input, args: [{ isSignal: true, alias: "isIconInline", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], hasDividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDividers", required: false }] }], counterStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "counterStart", required: false }] }], eclIllustrationItems: [{ type: i0.ContentChildren, args: [forwardRef(() => EclListIllustrationItemComponent), { isSignal: true }] }] } });
 
 const EUI_ECL_LIST_ILUSTRATION = [
     EclListIllustrationComponent,

package/fesm2022/eui-ecl-components-ecl-list-illustration.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"eui-ecl-components-ecl-list-illustration.mjs","sources":["../../components/ecl-list-illustration/ecl-list-illustration-icon.directive.ts","../../components/ecl-list-illustration/ecl-list-illustration-picture.directive.ts","../../components/ecl-list-illustration/ecl-list-illustration-item.component.ts","../../components/ecl-list-illustration/ecl-list-illustration-item.component.html","../../components/ecl-list-illustration/ecl-list-illustration.component.ts","../../components/ecl-list-illustration/ecl-list-illustration.component.html","../../components/ecl-list-illustration/index.ts","../../components/ecl-list-illustration/eui-ecl-components-ecl-list-illustration.ts"],"sourcesContent":["import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive representing an icon within an ECL illustration list item.\n *\n * Applies the correct ECL class for list item icons.\n */\n@Directive({\n    selector: '[eclListIllustrationIcon]',\n})\nexport class EclListIllustrationIconDirective extends ECLBaseDirective {\n    /**\n     * Applies the ECL class for illustration item icons.\n     */\n    @HostBinding('class.ecl-list-illustration__icon') className = true;\n}\n","import { Directive, HostBinding, booleanAttribute, forwardRef, AfterContentInit, input, contentChild } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive applied to `<picture>` elements within ECL list illustrations.\n *\n * Adds the necessary ECL CSS classes for illustration pictures.\n */\n@Directive({\n    selector: 'picture[eclListIllustrationPicture]',\n})\nexport class EclListIllustrationPictureDirective extends ECLBaseDirective implements AfterContentInit {\n\n    /**\n     * If true, image is styled with square dimensions.\n     */\n    readonly isSquare = input(false, { transform: booleanAttribute });\n\n    readonly eclIllustrationImage = contentChild.required(forwardRef(() => EclListIllustrationImageDirective));\n\n    /**\n     * Applies the base ECL picture classes for list illustration pictures.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-picture ecl-list-illustration__picture'),\n            this.isSquare() ? 'ecl-list-illustration__picture--square' : '',\n        ].join(' ').trim();\n    }\n\n    ngAfterContentInit(): void {\n        this.eclIllustrationImage().isSquare = this.isSquare();\n    }\n}\n\n/**\n * Directive applied to `<img>` elements within ECL list illustrations.\n *\n * Supports square variant and size options for image styling.\n */\n@Directive({\n    selector: 'img[eclListIllustrationImage]',\n})\nexport class EclListIllustrationImageDirective extends ECLBaseDirective {\n    /**\n     * If true, image is styled with square dimensions.\n     */\n    isSquare = false;\n\n    /**\n     * Defines the size variant of the image.\n     * Possible values: `'s'`, `'m'`, `'l'`.\n     */\n    readonly size = input<'s' | 'm' | 'l'>('m');\n\n    /**\n     * Computes the appropriate ECL CSS classes for the image.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-list-illustration__image'),\n            this.isSquare ? 'ecl-list-illustration__image--square' : '',\n            this.isSquare ? `ecl-list-illustration__image--${this.size()}` : '',\n        ]\n            .join(' ')\n            .trim();\n    }\n}\n","import {\n    Component,\n    computed,\n    forwardRef,\n    HostBinding,\n    Signal,\n    signal,\n    input,\n    contentChild,\n} from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclListIllustrationIconDirective } from './ecl-list-illustration-icon.directive';\nimport { EclListIllustrationPictureDirective } from './ecl-list-illustration-picture.directive';\n\n/**\n * Component representing a single item in an ECL illustration list.\n *\n * Displays optional title, value, and one or more illustration icons.\n */\n@Component({\n    selector: 'ecl-list-illustration-item, li[eclListIllustrationItem]',\n    templateUrl: './ecl-list-illustration-item.component.html',\n})\nexport class EclListIllustrationItemComponent extends ECLBaseDirective {\n    /**\n     * Text displayed as the item title.\n     */\n    readonly eclTitle = input('');\n\n    /**\n     * Text displayed as the item value.\n     */\n    readonly eclValue = input('');\n\n    /**\n     * Applies ARIA role for list items.\n     */\n    @HostBinding('attr.role') role = 'listitem';\n\n    /**\n     * Applies ECL class for illustration list item.\n     */\n    @HostBinding('class.ecl-list-illustration__item') className = true;\n\n    readonly eclIllustrationIcon = contentChild(forwardRef(() => EclListIllustrationIconDirective));\n\n    readonly eclIllustrationPicture = contentChild(forwardRef(() => EclListIllustrationPictureDirective));\n\n    /** A special class needs to be added, for vertical lists with picture. */\n    isVerticalPicture = signal(false);\n\n    /** A special class needs to be added, if an icon list has dividers between items. */\n    hasDivider = signal(false);\n\n    hasPicture: Signal<boolean> = computed(() => this.eclIllustrationPicture() !== undefined);\n\n    /**\n     * Returns `true` if the item has a title or any projected icons.\n     */\n    get hasTitle(): boolean {\n        return Boolean(this.eclTitle()) || this.eclIllustrationIcon() !== undefined;\n    }\n\n    /**\n     * Returns `true` if the item has a value.\n     */\n    get hasValue(): boolean {\n        return Boolean(this.eclValue());\n    }\n}\n","<div class=\"ecl-list-illustration__item-content\" [class.ecl-list-illustration__item-content--row]=\"isVerticalPicture()\"\n    [class.ecl-list-illustration__divider]=\"hasDivider()\">\n    <ng-content select=\"[eclListIllustrationImage],[eclListIllustrationPicture],[eclListIllustrationIcon]\"></ng-content>\n    <div class=\"ecl-list-illustration__detail\">\n        @if (hasTitle || hasValue) {\n        <div class=\"ecl-list-illustration__title-container\">\n            @if (hasValue) {\n            <div class=\"ecl-list-illustration__value\">{{ eclValue() }}</div>\n            }\n            <div class=\"ecl-list-illustration__title\">{{ eclTitle() }}</div>\n        </div>\n        }\n\n        <div class=\"ecl-list-illustration__description\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>","import { Component, HostBinding, booleanAttribute, numberAttribute, afterNextRender, inject, forwardRef, AfterContentInit, Signal, computed, input, effect, signal, contentChildren } from '@angular/core';\nimport { BreakpointObserver } from '@angular/cdk/layout';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclListIllustrationItemComponent } from './ecl-list-illustration-item.component';\n\n/**\n * Component representing a list using ECL illustration styles.\n *\n * Supports zebra styling, responsive horizontal layout, and font size options.\n */\n@Component({\n    selector: 'ecl-list-illustration, ul[eclListIllustration], ol[eclListIllustration]',\n    templateUrl: './ecl-list-illustration.component.html',\n    host: {\n        '[style.display]': 'elementDisplayStyle()',\n    },\n})\nexport class EclListIllustrationComponent extends ECLBaseDirective implements AfterContentInit {\n    /**\n     * Enables zebra style (alternating background colors for list items).\n     */\n    readonly isZebra = input(false, { transform: booleanAttribute });\n\n    /**\n     * Number of horizontal columns. If greater than `0`, items are displayed in a grid layout.\n     */\n    horizontalColumns = input(0, { transform: numberAttribute });\n\n    /**\n     * Font size for list content.\n     * Possible values:\n     * - `'m'` – medium\n     * - `'l'` – large (default)\n     */\n    readonly fontSize = input<'m' | 'l'>('l');\n\n    /** If content should be centered */\n    readonly isCentered = input(false, { transform: booleanAttribute });\n\n    /** If the icon should be on the same row as title - for list with icons */\n    readonly isIconInline = input(false, { transform: booleanAttribute });\n\n    /** Two variants available: icon-list and number-list. */\n    readonly variant = input<'icon-list' | 'number-list' | null>(null);\n\n    /** If this is an icon-list, it can have dividers between each item. */\n    readonly hasDividers = input(false, { transform: booleanAttribute });\n\n    /** If we have a number-list, the user can set the start of the counter. */\n    counterStart = input<number | null>(null);\n\n    readonly eclIllustrationItems = contentChildren(forwardRef(() => EclListIllustrationItemComponent));\n\n    /**\n     * Applies ARIA role for list elements.\n     */\n    @HostBinding('attr.role') role = 'list';\n\n    /**\n     * Applies the appropriate ECL CSS classes to the host element.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-list-illustration'),\n            this.isZebra() ? 'ecl-list-illustration--zebra' : '',\n            this.horizontalColumns() > 0 ? `ecl-list-illustration--col-${this.horizontalColumns()}` : '',\n            this.fontSize() === 'm' ? 'ecl-list-illustration--font-m' : '',\n            this.isCentered() ? 'ecl-list-illustration--centered' : '',\n            this.isIconInline() ? 'ecl-list-illustration--icon-inline' : '',\n            this.variant() === 'icon-list' ? 'ecl-list-illustration--icon-list' : '',\n            this.variant() === 'number-list' ? 'ecl-list-illustration--number-list ecl-list-illustration--number-list-reset': '',\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    /**\n     * Controls `display` style of the host element based on breakpoint and column count.\n     */\n    elementDisplayStyle = computed(() =>\n        this.horizontalColumns() > 0 && this.isTabletBreakpoint() ? null : 'block'\n    );\n\n    @HostBinding('style.--ecl-list-illustration-counter-start')\n    counterStartStyle = '';\n\n    @HostBinding('attr.start')\n    startAttr: string | null = null;\n\n    private isTabletBreakpoint = signal(false);\n    private cdkBreakpointObserver = inject(BreakpointObserver);\n\n    constructor() {\n        super();\n        afterNextRender(() => {\n            this.observeBreakpointChanges();\n        });\n        effect(() => {\n            const value = this.counterStart();\n            const stringValue = value != null ? `${value}` : null;\n\n            this.startAttr = stringValue;\n            this.counterStartStyle = stringValue ?? '';\n        });\n    }\n\n    ngAfterContentInit(): void {\n        if (this.horizontalColumns() === 0) {\n            this.eclIllustrationItems()?.forEach(item => {\n                if (item.hasPicture()) item.isVerticalPicture.set(true);\n            });\n        }\n\n        if (this.variant() === 'icon-list' && this.hasDividers()) {\n            this.eclIllustrationItems()?.forEach(item => {\n                item.hasDivider.set(true);\n            });\n        }\n    }\n\n    private observeBreakpointChanges(): void {\n        this.cdkBreakpointObserver\n            .observe(['(min-width: 768px)'])\n            .subscribe((result) => {\n                this.isTabletBreakpoint.set(result.matches);\n            });\n    }\n}\n","<ng-content></ng-content>","import { EclListIllustrationIconDirective } from './ecl-list-illustration-icon.directive';\nimport { EclListIllustrationItemComponent } from './ecl-list-illustration-item.component';\nimport { EclListIllustrationImageDirective, EclListIllustrationPictureDirective } from './ecl-list-illustration-picture.directive';\nimport { EclListIllustrationComponent } from './ecl-list-illustration.component';\n\nexport * from './ecl-list-illustration-item.component';\nexport * from './ecl-list-illustration-icon.directive';\nexport * from './ecl-list-illustration-picture.directive';\nexport * from './ecl-list-illustration.component';\n\nexport const EUI_ECL_LIST_ILUSTRATION = [\n    EclListIllustrationComponent,\n    EclListIllustrationItemComponent,\n    EclListIllustrationIconDirective,\n    EclListIllustrationPictureDirective,\n    EclListIllustrationImageDirective,\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-list-illustration.mjs","sources":["../../components/ecl-list-illustration/ecl-list-illustration-icon.directive.ts","../../components/ecl-list-illustration/ecl-list-illustration-picture.directive.ts","../../components/ecl-list-illustration/ecl-list-illustration-item.component.ts","../../components/ecl-list-illustration/ecl-list-illustration-item.component.html","../../components/ecl-list-illustration/ecl-list-illustration.component.ts","../../components/ecl-list-illustration/ecl-list-illustration.component.html","../../components/ecl-list-illustration/index.ts","../../components/ecl-list-illustration/eui-ecl-components-ecl-list-illustration.ts"],"sourcesContent":["import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive representing an icon within an ECL illustration list item.\n *\n * Applies the correct ECL class for list item icons.\n */\n@Directive({\n    selector: '[eclListIllustrationIcon]',\n})\nexport class EclListIllustrationIconDirective extends ECLBaseDirective {\n    /**\n     * Applies the ECL class for illustration item icons.\n     */\n    @HostBinding('class.ecl-list-illustration__icon') className = true;\n}\n","import { Directive, HostBinding, booleanAttribute, forwardRef, AfterContentInit, input, contentChild } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive applied to `<picture>` elements within ECL list illustrations.\n *\n * Adds the necessary ECL CSS classes for illustration pictures.\n */\n@Directive({\n    selector: 'picture[eclListIllustrationPicture]',\n})\nexport class EclListIllustrationPictureDirective extends ECLBaseDirective implements AfterContentInit {\n\n    /**\n     * If true, image is styled with square dimensions.\n     */\n    readonly isSquare = input(false, { transform: booleanAttribute });\n\n    readonly eclIllustrationImage = contentChild.required(forwardRef(() => EclListIllustrationImageDirective));\n\n    /**\n     * Applies the base ECL picture classes for list illustration pictures.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-picture ecl-list-illustration__picture'),\n            this.isSquare() ? 'ecl-list-illustration__picture--square' : '',\n        ].join(' ').trim();\n    }\n\n    ngAfterContentInit(): void {\n        this.eclIllustrationImage().isSquare = this.isSquare();\n    }\n}\n\n/**\n * Directive applied to `<img>` elements within ECL list illustrations.\n *\n * Supports square variant and size options for image styling.\n */\n@Directive({\n    selector: 'img[eclListIllustrationImage]',\n})\nexport class EclListIllustrationImageDirective extends ECLBaseDirective {\n    /**\n     * If true, image is styled with square dimensions.\n     */\n    isSquare = false;\n\n    /**\n     * Defines the size variant of the image.\n     * Possible values: `'s'`, `'m'`, `'l'`.\n     */\n    readonly size = input<'s' | 'm' | 'l'>('m');\n\n    /**\n     * Computes the appropriate ECL CSS classes for the image.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-list-illustration__image'),\n            this.isSquare ? 'ecl-list-illustration__image--square' : '',\n            this.isSquare ? `ecl-list-illustration__image--${this.size()}` : '',\n        ]\n            .join(' ')\n            .trim();\n    }\n}\n","import {\n    Component,\n    computed,\n    forwardRef,\n    HostBinding,\n    Signal,\n    signal,\n    input,\n    contentChild,\n} from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclListIllustrationIconDirective } from './ecl-list-illustration-icon.directive';\nimport { EclListIllustrationPictureDirective } from './ecl-list-illustration-picture.directive';\n\n/**\n * Component representing a single item in an ECL illustration list.\n *\n * Displays optional title, value, and one or more illustration icons.\n */\n@Component({\n    selector: 'ecl-list-illustration-item, li[eclListIllustrationItem]',\n    templateUrl: './ecl-list-illustration-item.component.html',\n})\nexport class EclListIllustrationItemComponent extends ECLBaseDirective {\n    /**\n     * Text displayed as the item title.\n     */\n    readonly eclTitle = input('');\n\n    /**\n     * Text displayed as the item value.\n     */\n    readonly eclValue = input('');\n\n    /**\n     * Applies ARIA role for list items.\n     */\n    @HostBinding('attr.role') role = 'listitem';\n\n    /**\n     * Applies ECL class for illustration list item.\n     */\n    @HostBinding('class.ecl-list-illustration__item') className = true;\n\n    readonly eclIllustrationIcon = contentChild(forwardRef(() => EclListIllustrationIconDirective));\n\n    readonly eclIllustrationPicture = contentChild(forwardRef(() => EclListIllustrationPictureDirective));\n\n    /** A special class needs to be added, for vertical lists with picture. */\n    isVerticalPicture = signal(false);\n\n    /** A special class needs to be added, if an icon list has dividers between items. */\n    hasDivider = signal(false);\n\n    hasPicture: Signal<boolean> = computed(() => this.eclIllustrationPicture() !== undefined);\n\n    /**\n     * Returns `true` if the item has a title or any projected icons.\n     */\n    readonly hasTitle = computed(() => Boolean(this.eclTitle()) || this.eclIllustrationIcon() !== undefined);\n\n    /**\n     * Returns `true` if the item has a value.\n     */\n    readonly hasValue = computed(() => Boolean(this.eclValue()));\n}\n","<div class=\"ecl-list-illustration__item-content\" [class.ecl-list-illustration__item-content--row]=\"isVerticalPicture()\"\n    [class.ecl-list-illustration__divider]=\"hasDivider()\">\n    <ng-content select=\"[eclListIllustrationImage],[eclListIllustrationPicture],[eclListIllustrationIcon]\"></ng-content>\n    <div class=\"ecl-list-illustration__detail\">\n        @if (hasTitle() || hasValue()) {\n        <div class=\"ecl-list-illustration__title-container\">\n            @if (hasValue()) {\n            <div class=\"ecl-list-illustration__value\">{{ eclValue() }}</div>\n            }\n            <div class=\"ecl-list-illustration__title\">{{ eclTitle() }}</div>\n        </div>\n        }\n\n        <div class=\"ecl-list-illustration__description\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>","import { Component, booleanAttribute, numberAttribute, afterNextRender, inject, forwardRef, AfterContentInit, Signal, computed, input, effect, signal, contentChildren } from '@angular/core';\nimport { BreakpointObserver } from '@angular/cdk/layout';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclListIllustrationItemComponent } from './ecl-list-illustration-item.component';\n\n/**\n * Component representing a list using ECL illustration styles.\n *\n * Supports zebra styling, responsive horizontal layout, and font size options.\n */\n@Component({\n    selector: 'ecl-list-illustration, ul[eclListIllustration], ol[eclListIllustration]',\n    templateUrl: './ecl-list-illustration.component.html',\n    host: {\n        '[attr.role]': 'role',\n        '[class]': 'cssClasses',\n        '[style.display]': 'elementDisplayStyle()',\n        '[style.--ecl-list-illustration-counter-start]': 'counterStartStyle',\n        '[attr.start]': 'startAttr',\n    },\n})\nexport class EclListIllustrationComponent extends ECLBaseDirective implements AfterContentInit {\n    /**\n     * Enables zebra style (alternating background colors for list items).\n     */\n    readonly isZebra = input(false, { transform: booleanAttribute });\n\n    /**\n     * Number of horizontal columns. If greater than `0`, items are displayed in a grid layout.\n     */\n    horizontalColumns = input(0, { transform: numberAttribute });\n\n    /**\n     * Font size for list content.\n     * Possible values:\n     * - `'m'` – medium\n     * - `'l'` – large (default)\n     */\n    readonly fontSize = input<'m' | 'l'>('l');\n\n    /** If content should be centered */\n    readonly isCentered = input(false, { transform: booleanAttribute });\n\n    /** If the icon should be on the same row as title - for list with icons */\n    readonly isIconInline = input(false, { transform: booleanAttribute });\n\n    /** Two variants available: icon-list and number-list. */\n    readonly variant = input<'icon-list' | 'number-list' | null>(null);\n\n    /** If this is an icon-list, it can have dividers between each item. */\n    readonly hasDividers = input(false, { transform: booleanAttribute });\n\n    /** If we have a number-list, the user can set the start of the counter. */\n    counterStart = input<number | null, unknown>(null, { transform: numberAttribute });\n\n    readonly eclIllustrationItems = contentChildren(forwardRef(() => EclListIllustrationItemComponent));\n\n    /**\n     * Applies ARIA role for list elements.\n     */\n    role = 'list';\n\n    /**\n     * Applies the appropriate ECL CSS classes to the host element.\n     */\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-list-illustration'),\n            this.isZebra() ? 'ecl-list-illustration--zebra' : '',\n            this.horizontalColumns() > 0 ? `ecl-list-illustration--col-${this.horizontalColumns()}` : '',\n            this.fontSize() === 'm' ? 'ecl-list-illustration--font-m' : '',\n            this.isCentered() ? 'ecl-list-illustration--centered' : '',\n            this.isIconInline() ? 'ecl-list-illustration--icon-inline' : '',\n            this.variant() === 'icon-list' ? 'ecl-list-illustration--icon-list' : '',\n            this.variant() === 'number-list' ? 'ecl-list-illustration--number-list ecl-list-illustration--number-list-reset': '',\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    /**\n     * Controls `display` style of the host element based on breakpoint and column count.\n     */\n    elementDisplayStyle = computed(() =>\n        this.horizontalColumns() > 0 && this.isTabletBreakpoint() ? null : 'block'\n    );\n\n    counterStartStyle = '';\n\n    startAttr: string | null = null;\n\n    private isTabletBreakpoint = signal(false);\n    private cdkBreakpointObserver = inject(BreakpointObserver);\n\n    constructor() {\n        super();\n        afterNextRender(() => {\n            this.observeBreakpointChanges();\n        });\n        effect(() => {\n            const value = this.counterStart();\n            const stringValue = value != null ? `${value}` : null;\n\n            this.startAttr = stringValue;\n            this.counterStartStyle = stringValue ?? '';\n        });\n    }\n\n    ngAfterContentInit(): void {\n        if (this.horizontalColumns() === 0) {\n            this.eclIllustrationItems()?.forEach(item => {\n                if (item.hasPicture()) item.isVerticalPicture.set(true);\n            });\n        }\n\n        if (this.variant() === 'icon-list' && this.hasDividers()) {\n            this.eclIllustrationItems()?.forEach(item => {\n                item.hasDivider.set(true);\n            });\n        }\n    }\n\n    private observeBreakpointChanges(): void {\n        this.cdkBreakpointObserver\n            .observe(['(min-width: 768px)'])\n            .subscribe((result) => {\n                this.isTabletBreakpoint.set(result.matches);\n            });\n    }\n}\n","<ng-content></ng-content>","import { EclListIllustrationIconDirective } from './ecl-list-illustration-icon.directive';\nimport { EclListIllustrationItemComponent } from './ecl-list-illustration-item.component';\nimport { EclListIllustrationImageDirective, EclListIllustrationPictureDirective } from './ecl-list-illustration-picture.directive';\nimport { EclListIllustrationComponent } from './ecl-list-illustration.component';\n\nexport * from './ecl-list-illustration-item.component';\nexport * from './ecl-list-illustration-icon.directive';\nexport * from './ecl-list-illustration-picture.directive';\nexport * from './ecl-list-illustration.component';\n\nexport const EUI_ECL_LIST_ILUSTRATION = [\n    EclListIllustrationComponent,\n    EclListIllustrationItemComponent,\n    EclListIllustrationIconDirective,\n    EclListIllustrationPictureDirective,\n    EclListIllustrationImageDirective,\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-list.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Directive, input, signal, contentChildren, viewChild, inject, ElementRef, ApplicationRef, DestroyRef, computed, afterNextRender, effect, Component, booleanAttribute, numberAttribute, ChangeDetectorRef } from '@angular/core';
+import { signal, Directive, input, contentChildren, viewChild, inject, ElementRef, ApplicationRef, DestroyRef, computed, afterNextRender, effect, Component, HostBinding, booleanAttribute, numberAttribute, ChangeDetectorRef } from '@angular/core';
 import { ECLBaseDirective } from '@eui/ecl/core';
 import * as i1 from '@eui/ecl/components/ecl-link';
 import { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';
@@ -16,11 +16,13 @@ class EclDescriptionListDefinitionItemDirective extends ECLBaseDirective {
         /**
          * Internal state used to hide the item when exceeding the visible limit.
          */
-        this.isHidden = false;
+        this.isHidden = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isHidden" }] : /* istanbul ignore next */ []));
         /**
          * Indicates whether this is the last item visible before the "see all" action is triggered.
          */
-        this.isLastVisible = false;
+        this.isLastVisible = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isLastVisible" }] : /* istanbul ignore next */ []));
     }
     /**
      * Applies appropriate ECL classes based on visibility state.
@@ -28,47 +30,40 @@ class EclDescriptionListDefinitionItemDirective extends ECLBaseDirective {
     get cssClasses() {
         return [
             super.getCssClasses('ecl-description-list__definition-item'),
-            this.isHidden ? 'ecl-description-list__definition-item--hidden' : '',
-            this.isLastVisible ? 'ecl-description-list__definition-item--last-visible' : '',
+            this.isHidden() ? 'ecl-description-list__definition-item--hidden' : '',
+            this.isLastVisible() ? 'ecl-description-list__definition-item--last-visible' : '',
         ].join(' ');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclDescriptionListDefinitionItemDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclDescriptionListDefinitionItemDirective, isStandalone: true, selector: "[eclDescriptionListDefinitionItem]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclDescriptionListDefinitionItemDirective, isStandalone: true, selector: "[eclDescriptionListDefinitionItem]", host: { properties: { "class": "cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclDescriptionListDefinitionItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclDescriptionListDefinitionItem]',
+                    host: {
+                        '[class]': 'cssClasses',
+                    },
                 }]
-        }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 /**
  * Directive representing a container for definition list items within an ECL description list.
  *
  * Applies the ECL-specific class for the list wrapper.
  */
 class EclDescriptionListDefinitionListDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        /**
-         * Applies the ECL list container class.
-         */
-        this.cmpClass = true;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclDescriptionListDefinitionListDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclDescriptionListDefinitionListDirective, isStandalone: true, selector: "[eclDescriptionListDefinitionList]", host: { properties: { "class.ecl-description-list__definition-list": "this.cmpClass" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclDescriptionListDefinitionListDirective, isStandalone: true, selector: "[eclDescriptionListDefinitionList]", host: { classAttribute: "ecl-description-list__definition-list" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclDescriptionListDefinitionListDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclDescriptionListDefinitionList]',
+                    host: {
+                        class: 'ecl-description-list__definition-list',
+                    },
                 }]
-        }], propDecorators: { cmpClass: [{
-                type: HostBinding,
-                args: ['class.ecl-description-list__definition-list']
-            }] } });
+        }] });
 
 /**
  * Component for a definition item within an ECL description list.
@@ -104,10 +99,10 @@ class EclDescriptionListDefinitionComponent extends ECLBaseDirective {
         this.appRef = inject(ApplicationRef);
         this.destroyRef = inject(DestroyRef);
         this.appended = false;
-        // we use this to defer "append into <ul>" until the DOM exists
         /**
          * Signal indicating whether the DOM is ready for manipulation.
-         * Set to true after first render to ensure projected content exists.
+         * Set to true after first render to ensure the projected <ul> exists before
+         * the see-more link is inserted into it. Defers DOM writes in the effect.
          */
         this.domReady = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "domReady" }] : /* istanbul ignore next */ []));
@@ -128,9 +123,18 @@ class EclDescriptionListDefinitionComponent extends ECLBaseDirective {
         ...(ngDevMode ? [{ debugName: "hasSeeAll" }] : /* istanbul ignore next */ []));
         // Mark DOM ready AFTER first render (projected <ul> will exist)
         afterNextRender(() => this.domReady.set(true));
-        // TODO: This needs to be refactored in the next version (v22/v23). I am adding this solution, for adding /removing the
-        // 'See all' link now, to be dynamically handled via DOM manipulation, to avoid breaking changes. Can be done in an easier way,
-        // but with minimal change in the way the component is used. To be refactored.
+        // The "See more" link must render as a sibling <li> INSIDE the consumer-authored
+        // <ul eclDescriptionListDefinitionList>, because ECL's CSS targets it as a direct
+        // child of that list. Angular has no declarative way to project content into an
+        // element the consumer owns (ng-content only projects into this component's own
+        // template), so the link is inserted into the projected <ul> via controlled DOM
+        // manipulation. This is intentional: keeping the natural <ul><li> markup in the
+        // consumer template is preferred over an API that would force bare <li> authoring.
+        //
+        // This effect keeps two things in sync with reactive state:
+        //   1. Per-item visibility (isHidden / isLastVisible signals) based on maxVisibleItems.
+        //   2. Presence of the "See more" <li> in the projected <ul>, driven by hasSeeAll().
+        // DOM writes are deferred until domReady() so the projected <ul> exists.
         effect(() => {
             const items = this.eclListItems();
             // If DOM not ready yet, only do state updates (no DOM querying/appending)
@@ -138,8 +142,8 @@ class EclDescriptionListDefinitionComponent extends ECLBaseDirective {
             if (!this.hasSeeAll()) {
                 // show all items
                 items.forEach((it) => {
-                    it.isHidden = false;
-                    it.isLastVisible = false;
+                    it.isHidden.set(false);
+                    it.isLastVisible.set(false);
                 });
                 if (ready)
                     this.removeSeeMoreFromDom();
@@ -148,12 +152,12 @@ class EclDescriptionListDefinitionComponent extends ECLBaseDirective {
             // "See all" needed → hide beyond max
             const max = this.maxVisibleItems();
             items.forEach((it, idx) => {
-                it.isHidden = idx >= max;
-                it.isLastVisible = false;
+                it.isHidden.set(idx >= max);
+                it.isLastVisible.set(false);
             });
             const last = items[max - 1];
             if (last)
-                last.isLastVisible = true;
+                last.isLastVisible.set(true);
             if (ready)
                 this.ensureSeeMoreInsideProjectedUl();
         });
@@ -173,8 +177,8 @@ class EclDescriptionListDefinitionComponent extends ECLBaseDirective {
      */
     showAllInternal() {
         const items = this.eclListItems();
-        items.forEach((item) => (item.isHidden = false));
-        items.forEach((item) => (item.isLastVisible = false));
+        items.forEach((item) => item.isHidden.set(false));
+        items.forEach((item) => item.isLastVisible.set(false));
     }
     /**
      * Ensures the "See all" link is appended inside the projected <ul> element.
@@ -223,21 +227,20 @@ class EclDescriptionListDefinitionComponent extends ECLBaseDirective {
      * Returns null if not found.
      */
     findProjectedUl() {
-        // your projected UL uses this attribute directive
+        // The consumer-authored list carries the eclDescriptionListDefinitionList directive.
         return this.host.nativeElement.querySelector('ul[eclDescriptionListDefinitionList]');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclDescriptionListDefinitionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclDescriptionListDefinitionComponent, isStandalone: true, selector: "[eclDescriptionListDefinition]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclListItems", predicate: EclDescriptionListDefinitionItemDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "seeMoreTpl", first: true, predicate: ["seeMoreTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n\n<ng-template #seeMoreTpl>\n  <li class=\"ecl-description-list__see_more\">\n    <a eclLink variant=\"standalone\" href (click)=\"onShowAllItems($event)\">\n      {{ 'ecl.SHOW-MORE-ITEMS' | translate }}\n    </a>\n  </li>\n</ng-template>", dependencies: [{ kind: "directive", type: i1.EclLinkDirective, selector: "[eclLink]", inputs: ["extraAttributes", "isInverted", "isIconOnly", "isHighlight", "isNoVisited", "isBranded", "variant"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclDescriptionListDefinitionComponent, isStandalone: true, selector: "[eclDescriptionListDefinition]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cssClasses" } }, queries: [{ propertyName: "eclListItems", predicate: EclDescriptionListDefinitionItemDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "seeMoreTpl", first: true, predicate: ["seeMoreTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n\n<ng-template #seeMoreTpl>\n  <li class=\"ecl-description-list__see_more\">\n    <a eclLink variant=\"standalone\" href (click)=\"onShowAllItems($event)\">\n      {{ 'ecl.SHOW-MORE-ITEMS' | translate }}\n    </a>\n  </li>\n</ng-template>", dependencies: [{ kind: "directive", type: i1.EclLinkDirective, selector: "[eclLink]", inputs: ["extraAttributes", "isInverted", "isIconOnly", "isHighlight", "isNoVisited", "isBranded", "variant"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclDescriptionListDefinitionComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[eclDescriptionListDefinition]', standalone: true, imports: [...EUI_ECL_LINK, TranslatePipe], template: "<ng-content></ng-content>\n\n<ng-template #seeMoreTpl>\n  <li class=\"ecl-description-list__see_more\">\n    <a eclLink variant=\"standalone\" href (click)=\"onShowAllItems($event)\">\n      {{ 'ecl.SHOW-MORE-ITEMS' | translate }}\n    </a>\n  </li>\n</ng-template>" }]
+            args: [{ selector: '[eclDescriptionListDefinition]', imports: [...EUI_ECL_LINK, TranslatePipe], host: {
+                        '[class]': 'cssClasses',
+                    }, template: "<ng-content></ng-content>\n\n<ng-template #seeMoreTpl>\n  <li class=\"ecl-description-list__see_more\">\n    <a eclLink variant=\"standalone\" href (click)=\"onShowAllItems($event)\">\n      {{ 'ecl.SHOW-MORE-ITEMS' | translate }}\n    </a>\n  </li>\n</ng-template>" }]
         }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], eclListItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => EclDescriptionListDefinitionItemDirective), { ...{
                             descendants: true,
-                        }, isSignal: true }] }], seeMoreTpl: [{ type: i0.ViewChild, args: ['seeMoreTpl', { isSignal: true }] }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+                        }, isSignal: true }] }], seeMoreTpl: [{ type: i0.ViewChild, args: ['seeMoreTpl', { isSignal: true }] }] } });
 
 /**
  * Directive representing an ordered list using ECL styles.