@eui/ecl 21.3.2 → 21.3.3-snapshot-1782381806158

package/docs/miscellaneous/variables.html

@@ -151,6 +151,9 @@
                         <li>
                             <a href="#EUI_ECL_ADD_TO_CALENDAR" title="packages/ecl/components/ecl-add-to-calendar/index.ts" ><b>EUI_ECL_ADD_TO_CALENDAR</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</a>
                         </li>
+                        <li>
+                            <a href="#EUI_ECL_ANIMATED_NUMBERS" title="packages/ecl/components/ecl-animated-numbers/index.ts" ><b>EUI_ECL_ANIMATED_NUMBERS</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</a>
+                        </li>
                         <li>
                             <a href="#EUI_ECL_APP" title="packages/ecl/components/ecl-app/index.ts" ><b>EUI_ECL_APP</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</a>
                         </li>
@@ -274,6 +277,9 @@
                         <li>
                             <a href="#EUI_ECL_PAGE_INFORMATION" title="packages/ecl/components/ecl-page-information/index.ts" ><b>EUI_ECL_PAGE_INFORMATION</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</a>
                         </li>
+                        <li>
+                            <a href="#EUI_ECL_PAGE_SUMMARY" title="packages/ecl/components/ecl-page-summary/index.ts" ><b>EUI_ECL_PAGE_SUMMARY</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</a>
+                        </li>
                         <li>
                             <a href="#EUI_ECL_PAGINATION" title="packages/ecl/components/ecl-pagination/index.ts" ><b>EUI_ECL_PAGINATION</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</a>
                         </li>
@@ -331,6 +337,9 @@
                         <li>
                             <a href="#EUI_ECL_TEXT_INPUT" title="packages/ecl/components/ecl-text-input/index.ts" ><b>EUI_ECL_TEXT_INPUT</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</a>
                         </li>
+                        <li>
+                            <a href="#EUI_ECL_TEXT_MEDIA" title="packages/ecl/components/ecl-text-media/index.ts" ><b>EUI_ECL_TEXT_MEDIA</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</a>
+                        </li>
                         <li>
                             <a href="#EUI_ECL_TIMELINE" title="packages/ecl/components/ecl-timeline/index.ts" ><b>EUI_ECL_TIMELINE</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</a>
                         </li>
@@ -663,6 +672,43 @@
                 </tr>
 
 
+        </tbody>
+    </table>
+</section>
+    <h3>packages/ecl/components/ecl-animated-numbers/index.ts</h3>
+    <section data-compodoc="block-properties">
+    <h3></h3>    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="EUI_ECL_ANIMATED_NUMBERS"></a>
+                    <span class="name">
+                        <span ><b>EUI_ECL_ANIMATED_NUMBERS</b></span>
+                        <a href="#EUI_ECL_ANIMATED_NUMBERS"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>unknown</code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>[
+    EclAnimatedNumbersComponent,
+    EclAnimatedNumbersItemsDirective,
+    EclAnimatedNumbersSourcesListDirective,
+    EclAnimatedNumbersSourcesItemDirective,
+    EclAnimatedNumbersSourceDirective,
+    EclAnimatedNumbersItemComponent,
+    EclAnimatedNumbersIconDirective,
+] as const</code>
+                    </td>
+                </tr>
+
+
         </tbody>
     </table>
 </section>
@@ -2067,6 +2113,37 @@
                 </tr>
 
 
+        </tbody>
+    </table>
+</section>
+    <h3>packages/ecl/components/ecl-page-summary/index.ts</h3>
+    <section data-compodoc="block-properties">
+    <h3></h3>    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="EUI_ECL_PAGE_SUMMARY"></a>
+                    <span class="name">
+                        <span ><b>EUI_ECL_PAGE_SUMMARY</b></span>
+                        <a href="#EUI_ECL_PAGE_SUMMARY"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>unknown</code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>[
+    EclPageSummaryComponent,
+] as const</code>
+                    </td>
+                </tr>
+
+
         </tbody>
     </table>
 </section>
@@ -2158,6 +2235,7 @@
                         <i>Default value : </i><code>[
   EclQuizComponent,
   EclQuizCardComponent,
+  EclQuizListDirective,
 ] as const</code>
                     </td>
                 </tr>
@@ -2721,6 +2799,43 @@
                 </tr>
 
 
+        </tbody>
+    </table>
+</section>
+    <h3>packages/ecl/components/ecl-text-media/index.ts</h3>
+    <section data-compodoc="block-properties">
+    <h3></h3>    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="EUI_ECL_TEXT_MEDIA"></a>
+                    <span class="name">
+                        <span ><b>EUI_ECL_TEXT_MEDIA</b></span>
+                        <a href="#EUI_ECL_TEXT_MEDIA"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>unknown</code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>[
+    EclTextMediaComponent,
+    EclTextMediaMicroTitleDirective,
+    EclTextMediaTitleDirective,
+    EclTextMediaDescriptionDirective,
+    EclTextMediaLinkDirective,
+    EclTextMediaMediaAnchorDirective,
+    EclTextMediaContainerDirective,
+] as const</code>
+                    </td>
+                </tr>
+
+
         </tbody>
     </table>
 </section>

package/docs/overview.html

@@ -122,7 +122,7 @@
             <div class="card text-center">
                 <div class="card-block">
                     <h4 class="card-title"><span class="icon ion-md-cog"></span></h4>
-                    <p class="card-text">119 Components</p>
+                    <p class="card-text">123 Components</p>
                 </div>
             </div>
         </div>
@@ -130,7 +130,7 @@
             <div class="card text-center">
                 <div class="card-block">
                     <h4 class="card-title"><span class="icon ion-md-code-working"></span></h4>
-                    <p class="card-text">181 Directives</p>
+                    <p class="card-text">193 Directives</p>
                 </div>
             </div>
         </div>

package/docs/properties.html

@@ -121,7 +121,7 @@
     </ol>
     <ul class="properties-list">
         <li>
-            <b>Version</b> : 21.3.2</li>
+            <b>Version</b> : 21.3.3-snapshot-1782381806158</li>
     </ul>
 
 

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

@@ -58,6 +58,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  *
  * @property {string} cssClasses - Returns a string of CSS classes applied to the host element.
  *                                 The main class is `ecl-accordion`, which can be extended with additional classes.
+ *
  */
 class EclAccordionDirective {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"eui-ecl-components-ecl-accordion.mjs","sources":["../../components/ecl-accordion/ecl-accordion-item-new.directive.ts","../../components/ecl-accordion/ecl-accordion-summary.component.ts","../../components/ecl-accordion/ecl-accordion-summary.component.html","../../components/ecl-accordion/ecl-accordion.directive.ts","../../components/ecl-accordion/events/ecl-accordion-toggle.event.ts","../../components/ecl-accordion/index.ts","../../components/ecl-accordion/eui-ecl-components-ecl-accordion.ts"],"sourcesContent":["import { Directive } from \"@angular/core\";\n\n@Directive({\n  selector: 'details[eclAccordionItem]',\n  host: {\n    class: 'ecl-accordion__item',\n  },\n})\nexport class EclAccordionItemDirective {}\n\n@Directive({\n  selector: 'div[eclAccordionContent]',\n  host: {\n    class: 'ecl-accordion__content',\n  },\n})\nexport class EclAccordionContentDirective {}","import {\n    Component\n} from '@angular/core';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\n\n/**\n * Represents an individual item within an ECL Accordion.\n */\n@Component({\n    selector: 'summary[eclAccordionToggle]',\n    templateUrl: './ecl-accordion-summary.component.html',\n    imports: [...EUI_ECL_ICON],\n    host: {\n        class: 'ecl-accordion__toggle',\n    },\n})\nexport class EclAccordionSummaryComponent {}\n","<ng-content></ng-content>\n<ecl-icon icon=\"plus\" size=\"s\" class=\"ecl-accordion__toggle-icon\" ariaHidden=\"true\">\n</ecl-icon>\n<ecl-icon icon=\"minus\" size=\"s\" class=\"ecl-accordion__toggle-icon\" ariaHidden=\"true\">\n</ecl-icon>","import {\n    afterNextRender,\n    ContentChildren,\n    Directive,\n    ElementRef,\n    forwardRef,\n    HostBinding,\n    inject,\n    QueryList,\n    Renderer2\n} from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { Subject, takeUntil } from 'rxjs';\nimport { EclAccordionItemDirective } from './ecl-accordion-item-new.directive';\n\n/**\n * Accordion component that manages the expansion and collapsing state of accordion items.\n * Uses the `ECLBaseDirective` to apply appropriate CSS classes and manage the visual styling.\n *\n * @description\n * This is the main component for the accordion container, responsible for managing the expansion\n * of individual items within the accordion. It provides the functionality to group and organize content\n * in expandable sections.\n *\n * @property {string} cssClasses - Returns a string of CSS classes applied to the host element.\n *                                 The main class is `ecl-accordion`, which can be extended with additional classes.\n */\n@Directive({\n    selector: 'div[eclAccordion]',\n    hostDirectives: [\n        {\n            directive: ECLBaseDirective,\n        },\n    ],\n})\nexport class EclAccordionDirective {\n    baseDirective = inject(ECLBaseDirective);\n    private renderer = inject(Renderer2);\n\n    @ContentChildren(forwardRef(() => EclAccordionItemDirective), { read: ElementRef })\n    items!: QueryList<ElementRef>;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n\n    /**\n     * @description\n     * Retrieves and returns the CSS classes for the component based on its current state.\n     * Uses `baseDirective` to fetch the appropriate CSS classes.\n     *\n     * @returns {string} - A string of CSS class names.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [this.baseDirective.getCssClasses('ecl-accordion')].join(' ').trim();\n    }\n\n    constructor() {\n        afterNextRender(() => {\n            this.setFirstAndLastClasses();\n            this.items.changes\n                .pipe(takeUntil(this.destroy$))\n                .subscribe(() => this.setFirstAndLastClasses());\n        });\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    private setFirstAndLastClasses(): void {\n        const elements = this.items.toArray();\n\n        if (elements.length === 0) return;\n\n        elements.forEach((el) => {\n            this.renderer.removeClass(el.nativeElement, 'is-first');\n            this.renderer.removeClass(el.nativeElement, 'is-last');\n        });\n\n        this.renderer.addClass(elements[0].nativeElement, 'is-first');\n        this.renderer.addClass(elements[elements.length - 1].nativeElement, 'is-last');\n    }\n}\n","import { EclBaseEvent } from '@eui/ecl/core';\n\nexport class EclAccordionToggleEvent extends EclBaseEvent {\n\tconstructor(public isExpanded: boolean) {\n\t\tsuper();\n\t}\n}","\nimport { EclAccordionContentDirective, EclAccordionItemDirective } from './ecl-accordion-item-new.directive';\nimport { EclAccordionSummaryComponent } from './ecl-accordion-summary.component';\nimport { EclAccordionDirective } from './ecl-accordion.directive';\n\nexport * from './ecl-accordion-item-new.directive';\nexport * from './ecl-accordion-summary.component';\nexport * from './ecl-accordion.directive';\nexport * from './events/ecl-accordion-toggle.event';\n\nexport const EUI_ECL_ACCORDION = [\n  EclAccordionContentDirective,\n  EclAccordionItemDirective,\n  EclAccordionSummaryComponent,\n  EclAccordionDirective,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}
+{"version":3,"file":"eui-ecl-components-ecl-accordion.mjs","sources":["../../components/ecl-accordion/ecl-accordion-item-new.directive.ts","../../components/ecl-accordion/ecl-accordion-summary.component.ts","../../components/ecl-accordion/ecl-accordion-summary.component.html","../../components/ecl-accordion/ecl-accordion.directive.ts","../../components/ecl-accordion/events/ecl-accordion-toggle.event.ts","../../components/ecl-accordion/index.ts","../../components/ecl-accordion/eui-ecl-components-ecl-accordion.ts"],"sourcesContent":["import { Directive } from \"@angular/core\";\n\n@Directive({\n  selector: 'details[eclAccordionItem]',\n  host: {\n    class: 'ecl-accordion__item',\n  },\n})\nexport class EclAccordionItemDirective {}\n\n@Directive({\n  selector: 'div[eclAccordionContent]',\n  host: {\n    class: 'ecl-accordion__content',\n  },\n})\nexport class EclAccordionContentDirective {}","import {\n    Component\n} from '@angular/core';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\n\n/**\n * Represents an individual item within an ECL Accordion.\n */\n@Component({\n    selector: 'summary[eclAccordionToggle]',\n    templateUrl: './ecl-accordion-summary.component.html',\n    imports: [...EUI_ECL_ICON],\n    host: {\n        class: 'ecl-accordion__toggle',\n    },\n})\nexport class EclAccordionSummaryComponent {}\n","<ng-content></ng-content>\n<ecl-icon icon=\"plus\" size=\"s\" class=\"ecl-accordion__toggle-icon\" ariaHidden=\"true\">\n</ecl-icon>\n<ecl-icon icon=\"minus\" size=\"s\" class=\"ecl-accordion__toggle-icon\" ariaHidden=\"true\">\n</ecl-icon>","import {\n    afterNextRender,\n    ContentChildren,\n    Directive,\n    ElementRef,\n    forwardRef,\n    HostBinding,\n    inject,\n    QueryList,\n    Renderer2\n} from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { Subject, takeUntil } from 'rxjs';\nimport { EclAccordionItemDirective } from './ecl-accordion-item-new.directive';\n\n/**\n * Accordion component that manages the expansion and collapsing state of accordion items.\n * Uses the `ECLBaseDirective` to apply appropriate CSS classes and manage the visual styling.\n *\n * @description\n * This is the main component for the accordion container, responsible for managing the expansion\n * of individual items within the accordion. It provides the functionality to group and organize content\n * in expandable sections.\n *\n * @property {string} cssClasses - Returns a string of CSS classes applied to the host element.\n *                                 The main class is `ecl-accordion`, which can be extended with additional classes.\n *\n */\n@Directive({\n    selector: 'div[eclAccordion]',\n    hostDirectives: [\n        {\n            directive: ECLBaseDirective,\n        },\n    ],\n})\nexport class EclAccordionDirective {\n    baseDirective = inject(ECLBaseDirective);\n    private renderer = inject(Renderer2);\n\n    @ContentChildren(forwardRef(() => EclAccordionItemDirective), { read: ElementRef })\n    items!: QueryList<ElementRef>;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n\n    /**\n     * @description\n     * Retrieves and returns the CSS classes for the component based on its current state.\n     * Uses `baseDirective` to fetch the appropriate CSS classes.\n     *\n     * @returns {string} - A string of CSS class names.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [this.baseDirective.getCssClasses('ecl-accordion')].join(' ').trim();\n    }\n\n    constructor() {\n        afterNextRender(() => {\n            this.setFirstAndLastClasses();\n            this.items.changes\n                .pipe(takeUntil(this.destroy$))\n                .subscribe(() => this.setFirstAndLastClasses());\n        });\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    private setFirstAndLastClasses(): void {\n        const elements = this.items.toArray();\n\n        if (elements.length === 0) return;\n\n        elements.forEach((el) => {\n            this.renderer.removeClass(el.nativeElement, 'is-first');\n            this.renderer.removeClass(el.nativeElement, 'is-last');\n        });\n\n        this.renderer.addClass(elements[0].nativeElement, 'is-first');\n        this.renderer.addClass(elements[elements.length - 1].nativeElement, 'is-last');\n    }\n}\n","import { EclBaseEvent } from '@eui/ecl/core';\n\nexport class EclAccordionToggleEvent extends EclBaseEvent {\n\tconstructor(public isExpanded: boolean) {\n\t\tsuper();\n\t}\n}","\nimport { EclAccordionContentDirective, EclAccordionItemDirective } from './ecl-accordion-item-new.directive';\nimport { EclAccordionSummaryComponent } from './ecl-accordion-summary.component';\nimport { EclAccordionDirective } from './ecl-accordion.directive';\n\nexport * from './ecl-accordion-item-new.directive';\nexport * from './ecl-accordion-summary.component';\nexport * from './ecl-accordion.directive';\nexport * from './events/ecl-accordion-toggle.event';\n\nexport const EUI_ECL_ACCORDION = [\n  EclAccordionContentDirective,\n  EclAccordionItemDirective,\n  EclAccordionSummaryComponent,\n  EclAccordionDirective,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}

package/fesm2022/eui-ecl-components-ecl-animated-numbers.mjs

@@ -0,0 +1,359 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, ChangeDetectionStrategy, Component, Directive, computed, viewChild, inject, ElementRef, NgZone, afterNextRender, effect } from '@angular/core';
+import { ECLBaseDirective } from '@eui/ecl/core';
+
+/**
+ * Container component for the ECL Animated Numbers pattern.
+ * Wraps animated number items and an optional sources footer.
+ *
+ * @example
+ * ```html
+ * <div eclAnimatedNumbers [sourcesLabel]="'Sources:'">
+ *     <div eclAnimatedNumbersItems>
+ *         <div eclAnimatedNumbersItem [eclValue]="'213'" [category]="'Revenue'">
+ *             <ecl-icon eclAnimatedNumbersIcon icon="users" iconSet="phosphor"></ecl-icon>
+ *         </div>
+ *     </div>
+ *     <ul eclAnimatedNumbersSourcesList>
+ *         <li eclAnimatedNumbersSourcesItem>
+ *             <a eclLink eclAnimatedNumbersSource href="/example">Eurostat</a>
+ *         </li>
+ *     </ul>
+ * </div>
+ * ```
+ */
+class EclAnimatedNumbersComponent extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        /** Applies a dark background to the component. */
+        this.hasDarkBackground = input(false, { ...(ngDevMode ? { debugName: "hasDarkBackground" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Adds a left border to the animated number items. */
+        this.hasLeftBorder = input(false, { ...(ngDevMode ? { debugName: "hasLeftBorder" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Applies a colour to the counter values. */
+        this.hasContentColor = input(false, { ...(ngDevMode ? { debugName: "hasContentColor" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Label displayed before the sources list. */
+        this.sourcesLabel = input('Sources:', ...(ngDevMode ? [{ debugName: "sourcesLabel" }] : /* istanbul ignore next */ []));
+    }
+    get cssClasses() {
+        return [super.getCssClasses('ecl-animated-numbers'),
+            this.hasDarkBackground() ? 'ecl-animated-numbers--with-background' : '',
+            this.hasLeftBorder() ? 'ecl-animated-numbers--border' : '',
+            this.hasContentColor() && !this.hasDarkBackground() ? 'ecl-animated-numbers--counter-color' : '',
+        ].filter(Boolean).join(' ');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EclAnimatedNumbersComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: EclAnimatedNumbersComponent, isStandalone: true, selector: "div[eclAnimatedNumbers]", inputs: { hasDarkBackground: { classPropertyName: "hasDarkBackground", publicName: "hasDarkBackground", isSignal: true, isRequired: false, transformFunction: null }, hasLeftBorder: { classPropertyName: "hasLeftBorder", publicName: "hasLeftBorder", isSignal: true, isRequired: false, transformFunction: null }, hasContentColor: { classPropertyName: "hasContentColor", publicName: "hasContentColor", isSignal: true, isRequired: false, transformFunction: null }, sourcesLabel: { classPropertyName: "sourcesLabel", publicName: "sourcesLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-container\">\n    <ng-content select=\"[eclAnimatedNumbersItems]\"></ng-content>\n    <div class=\"ecl-animated-numbers__sources\">\n        <span class=\"ecl-animated-numbers__sources-label\">{{ sourcesLabel() }}</span>\n        <ng-content select=\"[eclAnimatedNumbersSourcesList]\"></ng-content>\n    </div>\n</div>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EclAnimatedNumbersComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'div[eclAnimatedNumbers]', host: {
+                        '[class]': 'cssClasses',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ecl-container\">\n    <ng-content select=\"[eclAnimatedNumbersItems]\"></ng-content>\n    <div class=\"ecl-animated-numbers__sources\">\n        <span class=\"ecl-animated-numbers__sources-label\">{{ sourcesLabel() }}</span>\n        <ng-content select=\"[eclAnimatedNumbersSourcesList]\"></ng-content>\n    </div>\n</div>" }]
+        }], propDecorators: { hasDarkBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDarkBackground", required: false }] }], hasLeftBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasLeftBorder", required: false }] }], hasContentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasContentColor", required: false }] }], sourcesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourcesLabel", required: false }] }] } });
+
+/**
+ * Wraps the grid of animated number items.
+ * Applies the `ecl-animated-numbers__items` layout class.
+ *
+ * @example
+ * ```html
+ * <div eclAnimatedNumbersItems>
+ *     <div eclAnimatedNumbersItem ...></div>
+ * </div>
+ * ```
+ */
+class EclAnimatedNumbersItemsDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EclAnimatedNumbersItemsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: EclAnimatedNumbersItemsDirective, isStandalone: true, selector: "[eclAnimatedNumbersItems]", host: { classAttribute: "ecl-animated-numbers__items" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EclAnimatedNumbersItemsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclAnimatedNumbersItems]',
+                    host: {
+                        class: 'ecl-animated-numbers__items',
+                    },
+                }]
+        }] });
+/**
+ * Wraps the list of source links.
+ * Applies the `ecl-animated-numbers__sources-list` class.
+ *
+ * @example
+ * ```html
+ * <ul eclAnimatedNumbersSourcesList>
+ *     <li eclAnimatedNumbersSourcesItem>...</li>
+ * </ul>
+ * ```
+ */
+class EclAnimatedNumbersSourcesListDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EclAnimatedNumbersSourcesListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: EclAnimatedNumbersSourcesListDirective, isStandalone: true, selector: "[eclAnimatedNumbersSourcesList]", host: { classAttribute: "ecl-animated-numbers__sources-list" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EclAnimatedNumbersSourcesListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclAnimatedNumbersSourcesList]',
+                    host: {
+                        class: 'ecl-animated-numbers__sources-list',
+                    },
+                }]
+        }] });
+/**
+ * Marks a list item as a source entry.
+ * Applies the `ecl-animated-numbers__sources-item` class.
+ *
+ * @example
+ * ```html
+ * <li eclAnimatedNumbersSourcesItem>
+ *     <a eclLink eclAnimatedNumbersSource href="/example">Eurostat</a>
+ * </li>
+ * ```
+ */
+class EclAnimatedNumbersSourcesItemDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EclAnimatedNumbersSourcesItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: EclAnimatedNumbersSourcesItemDirective, isStandalone: true, selector: "[eclAnimatedNumbersSourcesItem]", host: { classAttribute: "ecl-animated-numbers__sources-item" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EclAnimatedNumbersSourcesItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclAnimatedNumbersSourcesItem]',
+                    host: {
+                        class: 'ecl-animated-numbers__sources-item',
+                    },
+                }]
+        }] });
+/**
+ * Marks a link as a source reference within the animated numbers component.
+ * Applies the `ecl-animated-numbers__source` styling class.
+ *
+ * @example
+ * ```html
+ * <a eclLink eclAnimatedNumbersSource href="/example">Eurostat</a>
+ * ```
+ */
+class EclAnimatedNumbersSourceDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EclAnimatedNumbersSourceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: EclAnimatedNumbersSourceDirective, isStandalone: true, selector: "[eclAnimatedNumbersSource]", host: { classAttribute: "ecl-animated-numbers__source" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EclAnimatedNumbersSourceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclAnimatedNumbersSource]',
+                    host: {
+                        class: 'ecl-animated-numbers__source',
+                    },
+                }]
+        }] });
+
+/**
+ * Represents an individual animated number item.
+ * Displays a numeric value that animates from 0 to the target when scrolled into view.
+ * Uses an IntersectionObserver to trigger animation on viewport visibility and
+ * requestAnimationFrame for smooth count-up with cubic ease-out.
+ *
+ * @example
+ * ```html
+ * <div eclAnimatedNumbersItem
+ *      [eclValue]="'1250'"
+ *      [category]="'Revenue'"
+ *      [prefix]="'€'"
+ *      [suffix]="'billions'"
+ *      [description]="'Annual revenue growth'">
+ *     <ecl-icon eclAnimatedNumbersIcon icon="trend-up" iconSet="phosphor"></ecl-icon>
+ * </div>
+ * ```
+ */
+class EclAnimatedNumbersItemComponent extends ECLBaseDirective {
+    constructor() {
+        super();
+        /** Category label displayed in the item header. */
+        this.category = input(...(ngDevMode ? [undefined, { debugName: "category" }] : /* istanbul ignore next */ []));
+        /** Descriptive text displayed below the number. */
+        this.description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
+        /** The target numeric value to animate to. Accepts strings with non-numeric characters (they are stripped). */
+        this.eclValue = input(...(ngDevMode ? [undefined, { debugName: "eclValue" }] : /* istanbul ignore next */ []));
+        /** Text displayed after the animated number (e.g. '€', 'billions'). */
+        this.suffix = input(...(ngDevMode ? [undefined, { debugName: "suffix" }] : /* istanbul ignore next */ []));
+        /** Text displayed before the animated number (e.g. '€', 'billion'). */
+        this.prefix = input(...(ngDevMode ? [undefined, { debugName: "prefix" }] : /* istanbul ignore next */ []));
+        this.animationDuration = 1000;
+        this.animationStyle = 'linear';
+        this.animateOnVisible = true;
+        /** Parsed numeric target from the eclValue input. */
+        this.targetValue = computed(() => {
+            const raw = this.eclValue();
+            if (!raw)
+                return 0;
+            const cleaned = raw.replace(/[^\d.-]/g, '');
+            return cleaned ? parseFloat(cleaned) : 0;
+        }, ...(ngDevMode ? [{ debugName: "targetValue" }] : /* istanbul ignore next */ []));
+        this.valueEl = viewChild('valueEl', ...(ngDevMode ? [{ debugName: "valueEl" }] : /* istanbul ignore next */ []));
+        this.elementRef = inject(ElementRef);
+        this.ngZone = inject(NgZone);
+        this.animationId = null;
+        this.observer = null;
+        this.hasBeenVisible = false;
+        this.isRendered = false;
+        afterNextRender(() => {
+            this.isRendered = true;
+            // Set initial display to 0
+            const el = this.valueEl()?.nativeElement;
+            if (el) {
+                el.textContent = '0';
+            }
+            if (this.animateOnVisible) {
+                this.setupIntersectionObserver();
+            }
+            else {
+                this.startAnimation(this.targetValue());
+            }
+        });
+        // React to eclValue changes — only re-animate if already visible and rendered
+        effect(() => {
+            const target = this.targetValue();
+            if (this.hasBeenVisible && this.isRendered) {
+                queueMicrotask(() => this.startAnimation(target));
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.cleanup();
+    }
+    setupIntersectionObserver() {
+        this.observer = new IntersectionObserver((entries) => {
+            const entry = entries[0];
+            if (entry.isIntersecting) {
+                this.hasBeenVisible = true;
+                this.startAnimation(this.targetValue());
+            }
+            else if (this.hasBeenVisible) {
+                // Reset to 0 when scrolled out of view
+                if (this.animationId !== null) {
+                    cancelAnimationFrame(this.animationId);
+                    this.animationId = null;
+                }
+                const el = this.valueEl()?.nativeElement;
+                if (el) {
+                    el.textContent = '0';
+                    el.style.width = '';
+                }
+            }
+        }, { threshold: 0.1 });
+        this.observer.observe(this.elementRef.nativeElement);
+    }
+    startAnimation(to) {
+        if (this.animationId !== null) {
+            cancelAnimationFrame(this.animationId);
+            this.animationId = null;
+        }
+        const valueElement = this.valueEl()?.nativeElement;
+        if (!valueElement)
+            return;
+        // Lock width to prevent layout shift during animation
+        valueElement.textContent = to.toString();
+        const finalWidth = valueElement.offsetWidth;
+        valueElement.textContent = '0';
+        valueElement.style.width = `${finalWidth}px`;
+        this.ngZone.runOutsideAngular(() => {
+            const duration = this.animationDuration;
+            let startTime = null;
+            let lastUpdateTime = 0;
+            let lastValue = null;
+            const tick = (now) => {
+                if (startTime === null) {
+                    startTime = now;
+                }
+                const elapsed = now - startTime;
+                const progress = Math.min(elapsed / duration, 1);
+                // Throttle updates (~50ms)
+                if (now - lastUpdateTime < 50 && progress < 1) {
+                    this.animationId = requestAnimationFrame(tick);
+                    return;
+                }
+                lastUpdateTime = now;
+                let value;
+                if (this.animationStyle === 'random') {
+                    value = Math.floor(Math.random() * (to + 1));
+                }
+                else {
+                    // Cubic ease-out
+                    const eased = 1 - Math.pow(1 - progress, 3);
+                    value = eased * to;
+                }
+                const rounded = Math.floor(value);
+                if (rounded !== lastValue) {
+                    valueElement.textContent = rounded.toString();
+                    lastValue = rounded;
+                }
+                if (progress < 1) {
+                    this.animationId = requestAnimationFrame(tick);
+                }
+                else {
+                    valueElement.textContent = to.toString();
+                    valueElement.style.width = '';
+                    this.animationId = null;
+                }
+            };
+            this.animationId = requestAnimationFrame(tick);
+        });
+    }
+    cleanup() {
+        if (this.animationId !== null) {
+            cancelAnimationFrame(this.animationId);
+            this.animationId = null;
+        }
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EclAnimatedNumbersItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: EclAnimatedNumbersItemComponent, isStandalone: true, selector: "[eclAnimatedNumbersItem]", inputs: { category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, eclValue: { classPropertyName: "eclValue", publicName: "eclValue", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ecl-animated-number" }, viewQueries: [{ propertyName: "valueEl", first: true, predicate: ["valueEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-animated-number__header\">\n    <div class=\"ecl-animated-number__category\">{{ category() }}</div>\n    <ng-content select=\"[eclAnimatedNumbersIcon]\"></ng-content>\n</div>\n<div class=\"ecl-animated-number__content\">\n    <div class=\"ecl-animated-number__number\">\n        <span class=\"ecl-animated-number__prefix\">{{ prefix() }}</span>\n        <div class=\"ecl-animated-number__value\" #valueEl></div>\n        <div class=\"ecl-animated-number__suffix\">{{ suffix() }}</div>\n    </div>\n</div>\n<div class=\"ecl-animated-number__description\">{{ description() }}</div>" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EclAnimatedNumbersItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[eclAnimatedNumbersItem]', host: {
+                        'class': 'ecl-animated-number',
+                    }, template: "<div class=\"ecl-animated-number__header\">\n    <div class=\"ecl-animated-number__category\">{{ category() }}</div>\n    <ng-content select=\"[eclAnimatedNumbersIcon]\"></ng-content>\n</div>\n<div class=\"ecl-animated-number__content\">\n    <div class=\"ecl-animated-number__number\">\n        <span class=\"ecl-animated-number__prefix\">{{ prefix() }}</span>\n        <div class=\"ecl-animated-number__value\" #valueEl></div>\n        <div class=\"ecl-animated-number__suffix\">{{ suffix() }}</div>\n    </div>\n</div>\n<div class=\"ecl-animated-number__description\">{{ description() }}</div>" }]
+        }], ctorParameters: () => [], propDecorators: { category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], eclValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclValue", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], valueEl: [{ type: i0.ViewChild, args: ['valueEl', { isSignal: true }] }] } });
+
+/**
+ * Marks an icon element as the animated number item's icon.
+ * Applies the `ecl-animated-number__icon` positioning class.
+ *
+ * @example
+ * ```html
+ * <ecl-icon eclAnimatedNumbersIcon icon="users" iconSet="phosphor"></ecl-icon>
+ * ```
+ */
+class EclAnimatedNumbersIconDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EclAnimatedNumbersIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: EclAnimatedNumbersIconDirective, isStandalone: true, selector: "[eclAnimatedNumbersIcon]", host: { classAttribute: "ecl-animated-number__icon" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EclAnimatedNumbersIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclAnimatedNumbersIcon]',
+                    host: {
+                        'class': 'ecl-animated-number__icon',
+                    },
+                }]
+        }] });
+
+const EUI_ECL_ANIMATED_NUMBERS = [
+    EclAnimatedNumbersComponent,
+    EclAnimatedNumbersItemsDirective,
+    EclAnimatedNumbersSourcesListDirective,
+    EclAnimatedNumbersSourcesItemDirective,
+    EclAnimatedNumbersSourceDirective,
+    EclAnimatedNumbersItemComponent,
+    EclAnimatedNumbersIconDirective,
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EUI_ECL_ANIMATED_NUMBERS, EclAnimatedNumbersComponent, EclAnimatedNumbersIconDirective, EclAnimatedNumbersItemComponent, EclAnimatedNumbersItemsDirective, EclAnimatedNumbersSourceDirective, EclAnimatedNumbersSourcesItemDirective, EclAnimatedNumbersSourcesListDirective };
+//# sourceMappingURL=eui-ecl-components-ecl-animated-numbers.mjs.map