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

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Directive, EventEmitter, HostListener, Output, Component, input, booleanAttribute, model, contentChild, forwardRef, ElementRef, viewChild, inject, Renderer2, ViewEncapsulation, contentChildren } from '@angular/core';
+import { Directive, output, Component, input, booleanAttribute, model, linkedSignal, contentChild, forwardRef, computed, ElementRef, inject, Injector, Renderer2, effect, afterNextRender, ViewEncapsulation, contentChildren } from '@angular/core';
 import { ECLBaseDirective, EclBaseEvent } from '@eui/ecl/core';
 import { NgTemplateOutlet } from '@angular/common';
 import * as i2 from '@eui/ecl/components/ecl-button';
@@ -7,8 +7,6 @@ import { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';
 import * as i1 from '@eui/ecl/components/ecl-icon';
 import { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';
 import { EclLinkDirective } from '@eui/ecl/components/ecl-link';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 
 /**
  * Directive that applies the `ecl-timeline__label` class to an element.
@@ -23,17 +21,17 @@ class EclTimelineItemLabelDirective extends ECLBaseDirective {
         return [super.getCssClasses('ecl-timeline__label')].join(' ').trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTimelineItemLabelDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclTimelineItemLabelDirective, isStandalone: true, selector: "[eclTimelineItemLabel]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclTimelineItemLabelDirective, isStandalone: true, selector: "[eclTimelineItemLabel]", host: { properties: { "class": "cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTimelineItemLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclTimelineItemLabel]',
+                    host: {
+                        '[class]': 'cssClasses',
+                    },
                 }]
-        }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 
 /**
  * Directive that applies the `ecl-timeline__title` class to an element.
@@ -48,17 +46,17 @@ class EclTimelineItemTitleDirective extends ECLBaseDirective {
         return [super.getCssClasses('ecl-timeline__title')].join(' ').trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTimelineItemTitleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclTimelineItemTitleDirective, isStandalone: true, selector: "[eclTimelineItemTitle]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclTimelineItemTitleDirective, isStandalone: true, selector: "[eclTimelineItemTitle]", host: { properties: { "class": "cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTimelineItemTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclTimelineItemTitle]',
+                    host: {
+                        '[class]': 'cssClasses',
+                    },
                 }]
-        }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 
 /**
  * Component representing a toggler inside a timeline item.
@@ -71,8 +69,7 @@ class EclTimelineItemTogglerComponent extends ECLBaseDirective {
          * Event emitted when the toggler is activated (clicked).
          * Used to trigger expand/collapse behavior in the parent timeline item.
          */
-        // eslint-disable-next-line
-        this.toggle = new EventEmitter();
+        this.toggle = output();
     }
     /**
      * Handles click events on the toggler element and emits the `toggle` event.
@@ -81,17 +78,14 @@ class EclTimelineItemTogglerComponent extends ECLBaseDirective {
         this.toggle.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTimelineItemTogglerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EclTimelineItemTogglerComponent, isStandalone: true, selector: "ecl-timeline-item-toggler, li[eclTimelineItemToggler]", outputs: { toggle: "toggle" }, host: { listeners: { "click": "onTogglerClick()" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EclTimelineItemTogglerComponent, isStandalone: true, selector: "li[eclTimelineItemToggler]", outputs: { toggle: "toggle" }, host: { listeners: { "click": "onTogglerClick()" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTimelineItemTogglerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-timeline-item-toggler, li[eclTimelineItemToggler]', template: "<ng-content></ng-content>\n" }]
-        }], propDecorators: { toggle: [{
-                type: Output
-            }], onTogglerClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
+            args: [{ selector: 'li[eclTimelineItemToggler]', host: {
+                        '(click)': 'onTogglerClick()',
+                    }, template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { toggle: [{ type: i0.Output, args: ["toggle"] }] } });
 
 /**
  * Event emitted when a timeline item is toggled (expanded or collapsed).
@@ -114,7 +108,7 @@ class EclTimelineItemToggleEvent extends EclBaseEvent {
 
 class EclTimelineItemComponent extends ECLBaseDirective {
     constructor() {
-        super(...arguments);
+        super();
         /**
          * Text label shown when the item is collapsed and can be expanded.
          * Defaults to `'Expand'`.
@@ -134,31 +128,23 @@ class EclTimelineItemComponent extends ECLBaseDirective {
          */
         this.isTogglerExpanded = model(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isTogglerExpanded" }] : /* istanbul ignore next */ []));
-        // @HostBinding('attr.style') customStyle = '';
         /**
-         * Reference to a projected custom toggler component.
+         * Whether the item is initially collapsed.
+         * Applies the `ecl-timeline__item--collapsed` CSS class when true.
          */
-        this.timelineItemToggler = contentChild(forwardRef(() => EclTimelineItemTogglerComponent), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "timelineItemToggler" }] : /* istanbul ignore next */ []));
-        this.timelineTitle = contentChild(forwardRef(() => EclTimelineItemTitleDirective), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "timelineTitle" }] : /* istanbul ignore next */ []));
-        /**
-         * Reference to a projected ECL link, used for setting focus after toggle.
-         */
-        this.eclLink = contentChild(forwardRef(() => EclLinkDirective), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "eclLink" }] : /* istanbul ignore next */ []));
+        this.isCollapsed = input(false, { ...(ngDevMode ? { debugName: "isCollapsed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * Reference to a projected label for the item. Used to set height, when item has no content and title.
+         * Live collapsed state of the item.
+         *
+         * Seeded from the `isCollapsed` input but writable at runtime, so the parent
+         * `EclTimelineComponent` can expand or collapse grouped items in response to
+         * a toggler interaction. Resets to the input value if the input changes.
          */
-        this.eclTimelineItemLabel = contentChild(forwardRef(() => EclTimelineItemLabelDirective), { ...(ngDevMode ? { debugName: "eclTimelineItemLabel" } : /* istanbul ignore next */ {}), read: ElementRef });
-        /**
-         * Whether the item is collapsed.
-         * Adds the `ecl-timeline__item--collapsed` CSS class when true.
-         */
-        this.isCollapsed = input(false, { ...(ngDevMode ? { debugName: "isCollapsed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isCollapsedState = linkedSignal(() => this.isCollapsed(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCollapsedState" }] : /* istanbul ignore next */ []));
         /**
          * Whether the item is a toggler (e.g. expands/collapses related items).
-         * Adds the `ecl-timeline__item--toggle` CSS class when true.
+         * Applies the `ecl-timeline__item--toggle` CSS class when true.
          */
         this.isToggler = input(false, { ...(ngDevMode ? { debugName: "isToggler" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
@@ -171,42 +157,66 @@ class EclTimelineItemComponent extends ECLBaseDirective {
          * Event emitted when the toggler is clicked.
          * Consumers can call `preventDefault()` on the event to cancel toggle behavior.
          */
-        // eslint-disable-next-line
-        this.toggle = new EventEmitter();
-        this.contentSlotRef = viewChild('contentSlot', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "contentSlotRef" }] : /* istanbul ignore next */ []));
-        this.destroy$ = new Subject();
-        this.hasContent = false;
-        this.hasHeight = false;
-        this.renderer = inject(Renderer2);
-        this.host = inject((ElementRef));
-    }
-    /**
-     * Adds the `ecl-timeline__item` class to the host element.
-     */
-    get cssClasses() {
-        return [
+        this.toggle = output();
+        /**
+         * Reference to a projected ECL link, used for setting focus after toggle.
+         * Read by the parent `EclTimelineComponent` to move focus after a toggle.
+         */
+        this.eclLink = contentChild(forwardRef(() => EclLinkDirective), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclLink" }] : /* istanbul ignore next */ []));
+        /**
+         * Host CSS classes for the timeline item.
+         *
+         * Each modifier is derived by invoking the corresponding signal, so the
+         * classes reflect the actual input / runtime values. Binding the signal
+         * directly through `@HostBinding('class.x')` would always evaluate the
+         * signal function as truthy and apply every modifier unconditionally.
+         */
+        this.cssClasses = computed(() => [
             super.getCssClasses('ecl-timeline__item'),
             this.isHeadline() ? 'ecl-timeline__item--headline' : '',
-        ].join(' ');
-    }
-    ngAfterViewChecked() {
-        if (!this.hasHeight) {
-            setTimeout(() => {
-                const node = this.contentSlotRef()?.nativeElement;
-                if (node) {
-                    this.hasContent =
-                        (node.textContent?.trim().length ?? 0) > 0 || node.children.length > 0;
-                }
-                const eclTimelineItemLabel = this.eclTimelineItemLabel();
-                if (!this.isToggler() && eclTimelineItemLabel) {
-                    const labelHeight = eclTimelineItemLabel.nativeElement.getBoundingClientRect().height;
-                    this.hasHeight = labelHeight > 0;
-                    this.host.nativeElement.style.setProperty('--ecl-timeline-label-height', `${labelHeight}px`);
-                    this.renderer.setStyle(this.host.nativeElement, 'box-sizing', 'unset');
-                }
-            });
-        }
+            this.isCollapsedState() ? 'ecl-timeline__item--collapsed' : '',
+            this.isToggler() ? 'ecl-timeline__item--toggle' : '',
+        ].join(' '), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cssClasses" }] : /* istanbul ignore next */ []));
+        /**
+         * Reference to a projected custom toggler component.
+         */
+        this.timelineItemToggler = contentChild(forwardRef(() => EclTimelineItemTogglerComponent), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "timelineItemToggler" }] : /* istanbul ignore next */ []));
+        /**
+         * Reference to a projected label for the item. Used to set height, when item has no content and title.
+         */
+        this.eclTimelineItemLabel = contentChild(forwardRef(() => EclTimelineItemLabelDirective), { ...(ngDevMode ? { debugName: "eclTimelineItemLabel" } : /* istanbul ignore next */ {}), read: ElementRef });
+        this.injector = inject(Injector);
+        this.renderer = inject(Renderer2);
+        this.host = inject((ElementRef));
+        this.hasMeasuredLabelHeight = false;
+        // Measure the label height once the item is actually displayed, and expose
+        // it as the `--ecl-timeline-label-height` custom property. A collapsed item
+        // is `display: none` and therefore has no measurable height, so the
+        // measurement is deferred until the item becomes visible. Reacting to
+        // `isCollapsedState` ensures items revealed by a toggler are measured too.
+        effect(() => {
+            const isMeasurable = !this.isToggler() && !this.isCollapsedState();
+            if (!isMeasurable || this.hasMeasuredLabelHeight) {
+                return;
+            }
+            let labelHeight = 0;
+            afterNextRender({
+                earlyRead: () => {
+                    const labelElement = this.eclTimelineItemLabel();
+                    labelHeight = labelElement?.nativeElement.getBoundingClientRect().height ?? 0;
+                },
+                write: () => {
+                    if (labelHeight > 0) {
+                        this.hasMeasuredLabelHeight = true;
+                        this.host.nativeElement.style.setProperty('--ecl-timeline-label-height', `${labelHeight}px`);
+                        this.renderer.setStyle(this.host.nativeElement, 'box-sizing', 'unset');
+                    }
+                },
+            }, { injector: this.injector });
+        });
     }
     /**
      * Lifecycle hook that sets up event subscriptions after content is initialized.
@@ -214,7 +224,7 @@ class EclTimelineItemComponent extends ECLBaseDirective {
     ngAfterContentInit() {
         const timelineItemToggler = this.timelineItemToggler();
         if (timelineItemToggler) {
-            timelineItemToggler.toggle.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this.togglerSubscription = timelineItemToggler.toggle.subscribe(() => {
                 this.handleToggler();
             });
         }
@@ -223,8 +233,7 @@ class EclTimelineItemComponent extends ECLBaseDirective {
      * Lifecycle hook called on component destruction to clean up subscriptions.
      */
     ngOnDestroy() {
-        this.destroy$.next(true);
-        this.destroy$.unsubscribe();
+        this.togglerSubscription?.unsubscribe();
     }
     /**
      * True if the expand label should be visible.
@@ -247,95 +256,86 @@ class EclTimelineItemComponent extends ECLBaseDirective {
     }
     /**
      * Handles click events from the default toggler element.
-     *
-     * @param evt The mouse click event.
      */
-    onTogglerClick(evt) {
+    onTogglerClick() {
         this.handleToggler();
     }
     handleToggler() {
         const nextExpandedState = !this.isTogglerExpanded();
         const event = new EclTimelineItemToggleEvent(nextExpandedState, this.toggleGroup());
         if (!event.defaultPrevented) {
-            this.toggle.next(event);
+            this.toggle.emit(event);
             this.isTogglerExpanded.set(nextExpandedState);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTimelineItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclTimelineItemComponent, isStandalone: true, selector: "ecl-timeline-item, li[eclTimelineItem]", inputs: { expandLabel: { classPropertyName: "expandLabel", publicName: "expandLabel", isSignal: true, isRequired: false, transformFunction: null }, collapseLabel: { classPropertyName: "collapseLabel", publicName: "collapseLabel", isSignal: true, isRequired: false, transformFunction: null }, isHeadline: { classPropertyName: "isHeadline", publicName: "isHeadline", isSignal: true, isRequired: false, transformFunction: null }, isTogglerExpanded: { classPropertyName: "isTogglerExpanded", publicName: "isTogglerExpanded", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, isToggler: { classPropertyName: "isToggler", publicName: "isToggler", isSignal: true, isRequired: false, transformFunction: null }, toggleGroup: { classPropertyName: "toggleGroup", publicName: "toggleGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isTogglerExpanded: "isTogglerExpandedChange", toggle: "toggle" }, host: { properties: { "class": "this.cssClasses", "class.ecl-timeline__item--collapsed": "this.isCollapsed", "class.ecl-timeline__item--toggle": "this.isToggler" } }, queries: [{ propertyName: "timelineItemToggler", first: true, predicate: i0.forwardRef(() => EclTimelineItemTogglerComponent), descendants: true, isSignal: true }, { propertyName: "timelineTitle", first: true, predicate: i0.forwardRef(() => EclTimelineItemTitleDirective), descendants: true, isSignal: true }, { propertyName: "eclLink", first: true, predicate: i0.forwardRef(() => EclLinkDirective), descendants: true, isSignal: true }, { propertyName: "eclTimelineItemLabel", first: true, predicate: i0.forwardRef(() => EclTimelineItemLabelDirective), descendants: true, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "contentSlotRef", first: true, predicate: ["contentSlot"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (isToggler()) {\n    <div class=\"ecl-timeline__content\">\n        @if (hasDefaultToggler()) {\n            <button eclButton (click)=\"onTogglerClick($event)\" variant=\"secondary\">\n             @if (isShowExpandLabel) {\n                 <span eclButtonLabel> {{ expandLabel() }} </span>\n             }\n             @if (isShowCollapseLabel) {\n                 <span eclButtonLabel> {{ collapseLabel() }} </span>\n             }\n             <ecl-icon icon=\"corner-arrow\" size=\"fluid\" [transform]=\"!isTogglerExpanded() ? 'rotate-180' : ''\"></ecl-icon>\n            </button>\n        }\n\n\n        <ng-content select=\"ecl-timeline-item-toggler\"></ng-content>\n\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n}\n@else {\n    <div class=\"ecl-timeline__tooltip\">\n        <div class=\"ecl-timeline__tooltip-arrow\"></div>\n        <ng-content select=\"[eclTimelineItemLabel]\"></ng-content>\n\n        <ng-content select=\"[eclTimelineItemTitle]\"></ng-content>\n\n        <div class=\"ecl-timeline__content\" #contentSlot>\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", styles: ["ecl-timeline-item{display:list-item}\n"], dependencies: [{ kind: "component", type: i1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: i2.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "directive", type: i2.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclTimelineItemComponent, isStandalone: true, selector: "li[eclTimelineItem]", inputs: { expandLabel: { classPropertyName: "expandLabel", publicName: "expandLabel", isSignal: true, isRequired: false, transformFunction: null }, collapseLabel: { classPropertyName: "collapseLabel", publicName: "collapseLabel", isSignal: true, isRequired: false, transformFunction: null }, isHeadline: { classPropertyName: "isHeadline", publicName: "isHeadline", isSignal: true, isRequired: false, transformFunction: null }, isTogglerExpanded: { classPropertyName: "isTogglerExpanded", publicName: "isTogglerExpanded", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, isToggler: { classPropertyName: "isToggler", publicName: "isToggler", isSignal: true, isRequired: false, transformFunction: null }, toggleGroup: { classPropertyName: "toggleGroup", publicName: "toggleGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isTogglerExpanded: "isTogglerExpandedChange", toggle: "toggle" }, host: { properties: { "class": "cssClasses()" } }, queries: [{ propertyName: "eclLink", first: true, predicate: i0.forwardRef(() => EclLinkDirective), descendants: true, isSignal: true }, { propertyName: "timelineItemToggler", first: true, predicate: i0.forwardRef(() => EclTimelineItemTogglerComponent), descendants: true, isSignal: true }, { propertyName: "eclTimelineItemLabel", first: true, predicate: i0.forwardRef(() => EclTimelineItemLabelDirective), descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (isToggler()) {\n    <div class=\"ecl-timeline__content\">\n        @if (hasDefaultToggler()) {\n            <button eclButton (click)=\"onTogglerClick()\" variant=\"secondary\">\n             @if (isShowExpandLabel) {\n                 <span eclButtonLabel> {{ expandLabel() }} </span>\n             }\n             @if (isShowCollapseLabel) {\n                 <span eclButtonLabel> {{ collapseLabel() }} </span>\n             }\n             <ecl-icon icon=\"corner-arrow\" size=\"fluid\" [transform]=\"!isTogglerExpanded() ? 'rotate-180' : ''\"></ecl-icon>\n            </button>\n        }\n\n\n        <ng-content select=\"ecl-timeline-item-toggler\"></ng-content>\n\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n}\n@else {\n    <div class=\"ecl-timeline__tooltip\">\n        <div class=\"ecl-timeline__tooltip-arrow\"></div>\n        <ng-content select=\"[eclTimelineItemLabel]\"></ng-content>\n\n        <ng-content select=\"[eclTimelineItemTitle]\"></ng-content>\n\n        <div class=\"ecl-timeline__content\" #contentSlot>\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "component", type: i1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: i2.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "directive", type: i2.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTimelineItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-timeline-item, li[eclTimelineItem]', imports: [...EUI_ECL_ICON, ...EUI_ECL_BUTTON, NgTemplateOutlet], encapsulation: ViewEncapsulation.None, template: "@if (isToggler()) {\n    <div class=\"ecl-timeline__content\">\n        @if (hasDefaultToggler()) {\n            <button eclButton (click)=\"onTogglerClick($event)\" variant=\"secondary\">\n             @if (isShowExpandLabel) {\n                 <span eclButtonLabel> {{ expandLabel() }} </span>\n             }\n             @if (isShowCollapseLabel) {\n                 <span eclButtonLabel> {{ collapseLabel() }} </span>\n             }\n             <ecl-icon icon=\"corner-arrow\" size=\"fluid\" [transform]=\"!isTogglerExpanded() ? 'rotate-180' : ''\"></ecl-icon>\n            </button>\n        }\n\n\n        <ng-content select=\"ecl-timeline-item-toggler\"></ng-content>\n\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n}\n@else {\n    <div class=\"ecl-timeline__tooltip\">\n        <div class=\"ecl-timeline__tooltip-arrow\"></div>\n        <ng-content select=\"[eclTimelineItemLabel]\"></ng-content>\n\n        <ng-content select=\"[eclTimelineItemTitle]\"></ng-content>\n\n        <div class=\"ecl-timeline__content\" #contentSlot>\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", styles: ["ecl-timeline-item{display:list-item}\n"] }]
-        }], propDecorators: { expandLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandLabel", required: false }] }], collapseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseLabel", required: false }] }], isHeadline: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHeadline", required: false }] }], isTogglerExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTogglerExpanded", required: false }] }, { type: i0.Output, args: ["isTogglerExpandedChange"] }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], timelineItemToggler: [{ type: i0.ContentChild, args: [forwardRef(() => EclTimelineItemTogglerComponent), { isSignal: true }] }], timelineTitle: [{ type: i0.ContentChild, args: [forwardRef(() => EclTimelineItemTitleDirective), { isSignal: true }] }], eclLink: [{ type: i0.ContentChild, args: [forwardRef(() => EclLinkDirective), { isSignal: true }] }], eclTimelineItemLabel: [{ type: i0.ContentChild, args: [forwardRef(() => EclTimelineItemLabelDirective), { ...{ read: ElementRef }, isSignal: true }] }], isCollapsed: [{
-                type: HostBinding,
-                args: ['class.ecl-timeline__item--collapsed']
-            }], isToggler: [{
-                type: HostBinding,
-                args: ['class.ecl-timeline__item--toggle']
-            }], toggleGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleGroup", required: false }] }], toggle: [{
-                type: Output
-            }], contentSlotRef: [{ type: i0.ViewChild, args: ['contentSlot', { isSignal: true }] }] } });
+            args: [{ selector: 'li[eclTimelineItem]', imports: [...EUI_ECL_ICON, ...EUI_ECL_BUTTON, NgTemplateOutlet], host: {
+                        '[class]': 'cssClasses()',
+                    }, encapsulation: ViewEncapsulation.None, template: "@if (isToggler()) {\n    <div class=\"ecl-timeline__content\">\n        @if (hasDefaultToggler()) {\n            <button eclButton (click)=\"onTogglerClick()\" variant=\"secondary\">\n             @if (isShowExpandLabel) {\n                 <span eclButtonLabel> {{ expandLabel() }} </span>\n             }\n             @if (isShowCollapseLabel) {\n                 <span eclButtonLabel> {{ collapseLabel() }} </span>\n             }\n             <ecl-icon icon=\"corner-arrow\" size=\"fluid\" [transform]=\"!isTogglerExpanded() ? 'rotate-180' : ''\"></ecl-icon>\n            </button>\n        }\n\n\n        <ng-content select=\"ecl-timeline-item-toggler\"></ng-content>\n\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n}\n@else {\n    <div class=\"ecl-timeline__tooltip\">\n        <div class=\"ecl-timeline__tooltip-arrow\"></div>\n        <ng-content select=\"[eclTimelineItemLabel]\"></ng-content>\n\n        <ng-content select=\"[eclTimelineItemTitle]\"></ng-content>\n\n        <div class=\"ecl-timeline__content\" #contentSlot>\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { expandLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandLabel", required: false }] }], collapseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseLabel", required: false }] }], isHeadline: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHeadline", required: false }] }], isTogglerExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTogglerExpanded", required: false }] }, { type: i0.Output, args: ["isTogglerExpandedChange"] }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }], isToggler: [{ type: i0.Input, args: [{ isSignal: true, alias: "isToggler", required: false }] }], toggleGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleGroup", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }], eclLink: [{ type: i0.ContentChild, args: [forwardRef(() => EclLinkDirective), { isSignal: true }] }], timelineItemToggler: [{ type: i0.ContentChild, args: [forwardRef(() => EclTimelineItemTogglerComponent), { isSignal: true }] }], eclTimelineItemLabel: [{ type: i0.ContentChild, args: [forwardRef(() => EclTimelineItemLabelDirective), { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 /**
  * Directive that applies the `ecl-timeline-set` class to an element.
  */
 class EclTimelineSetDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.hasClass = true;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTimelineSetDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclTimelineSetDirective, isStandalone: true, selector: "[eclTimelineSet]", host: { properties: { "class.ecl-timeline-set": "this.hasClass" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclTimelineSetDirective, isStandalone: true, selector: "[eclTimelineSet]", host: { classAttribute: "ecl-timeline-set" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTimelineSetDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclTimelineSet]',
+                    host: {
+                        'class': 'ecl-timeline-set',
+                    },
                 }]
-        }], propDecorators: { hasClass: [{
-                type: HostBinding,
-                args: ['class.ecl-timeline-set']
-            }] } });
+        }] });
 
 class EclTimelineComponent extends ECLBaseDirective {
     constructor() {
         super(...arguments);
         this.isExpanded = null;
+        /**
+         * Host CSS classes for the timeline.
+         *
+         * Adds the `ecl-timeline--has-headline` modifier when the projected content
+         * includes a headline item.
+         */
+        this.cssClasses = computed(() => [
+            super.getCssClasses('ecl-timeline'),
+            this.hasHeadlineItem() ? 'ecl-timeline--has-headline' : '',
+        ].join(' '), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cssClasses" }] : /* istanbul ignore next */ []));
         /**
          * List of projected `EclTimelineItemComponent` instances.
          * Collected using `@ContentChildren`.
          */
         this.timelineItems = contentChildren(forwardRef(() => EclTimelineItemComponent), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "timelineItems" }] : /* istanbul ignore next */ []));
-        this.destroy$ = new Subject();
+        /**
+         * Whether any projected item is marked as a headline.
+         */
+        this.hasHeadlineItem = computed(() => this.timelineItems().some((item) => item.isHeadline()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasHeadlineItem" }] : /* istanbul ignore next */ []));
+        this.togglerSubscriptions = [];
         this.isFirstExpandedLinkFocused = false;
-        this.hasHeadlineItem = false;
-    }
-    /**
-     * Applies the `ecl-timeline` CSS class to the host element.
-     */
-    get cssClasses() {
-        return [
-            super.getCssClasses('ecl-timeline'),
-            this.hasHeadlineItem ? 'ecl-timeline--has-headline' : '',
-        ].join(' ');
     }
     /**
      * Lifecycle hook that is called after content (child components)
      * has been fully initialized.
      *
-     * It sets up toggle event subscriptions for `isToggler` items and
-     * collapses/expands related content items accordingly.
+     * Sets up toggle event subscriptions for `isToggler` items and
+     * collapses/expands related items in the same toggle group accordingly.
      */
     ngAfterContentInit() {
         this.timelineItems()
             .filter((item) => item.isToggler())
             .forEach((it) => {
-            it.toggle.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+            const subscription = it.toggle.subscribe((evt) => {
                 if (evt.isExpanded) {
                     this.isExpanded = true;
                 }
@@ -348,22 +348,22 @@ class EclTimelineComponent extends ECLBaseDirective {
                         .filter((item) => item.toggleGroup() === evt.toggleGroup)
                         .filter((item) => !item.isToggler())
                         .forEach((item) => {
-                        // item.isCollapsed = !item.isCollapsed;
+                        // An expanded toggler reveals the grouped items,
+                        // a collapsed toggler hides them again.
+                        item.isCollapsedState.set(!evt.isExpanded);
                         this.onFocusFirstExpandedLink(item);
                     });
                 }
             });
+            this.togglerSubscriptions.push(subscription);
         });
-        if (this.timelineItems()?.find(item => item.isHeadline()) !== undefined)
-            this.hasHeadlineItem = true;
     }
     /**
      * Lifecycle hook called when the component is destroyed.
      * Cleans up subscriptions.
      */
     ngOnDestroy() {
-        this.destroy$.next(true);
-        this.destroy$.unsubscribe();
+        this.togglerSubscriptions.forEach((subscription) => subscription.unsubscribe());
     }
     /**
      * Focuses the first link in the expanded timeline item,
@@ -372,7 +372,7 @@ class EclTimelineComponent extends ECLBaseDirective {
      * @param item The timeline item to check and potentially focus.
      */
     onFocusFirstExpandedLink(item) {
-        if (!item.isCollapsed()) {
+        if (!item.isCollapsedState()) {
             if (!this.isFirstExpandedLinkFocused && item.eclLink()) {
                 setTimeout(() => item.eclLink().onFocus());
                 this.isFirstExpandedLinkFocused = true;
@@ -383,15 +383,14 @@ class EclTimelineComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTimelineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclTimelineComponent, isStandalone: true, selector: "ecl-timeline, ol[eclTimeline]", host: { attributes: { "role": "list" }, properties: { "attr.data-ecl-timeline-expanded": "isExpanded", "class": "cssClasses" } }, queries: [{ propertyName: "timelineItems", predicate: i0.forwardRef(() => EclTimelineItemComponent), isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclTimelineComponent, isStandalone: true, selector: "ol[eclTimeline]", host: { properties: { "attr.data-ecl-timeline-expanded": "isExpanded", "class": "cssClasses()" } }, queries: [{ propertyName: "timelineItems", predicate: i0.forwardRef(() => EclTimelineItemComponent), isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTimelineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-timeline, ol[eclTimeline]', host: {
-                        role: 'list',
+            args: [{ selector: 'ol[eclTimeline]', host: {
                         '[attr.data-ecl-timeline-expanded]': 'isExpanded',
-                        '[class]': 'cssClasses',
-                    }, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
+                        '[class]': 'cssClasses()',
+                    }, template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { timelineItems: [{ type: i0.ContentChildren, args: [forwardRef(() => EclTimelineItemComponent), { isSignal: true }] }] } });
 
 const EUI_ECL_TIMELINE = [