@ethlete/cdk 4.53.5 → 4.54.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ethlete/cdk
 
+## 4.54.0
+
+### Minor Changes
+
+- [#2587](https://github.com/ethlete-io/ethdk/pull/2587) [`fe51b05`](https://github.com/ethlete-io/ethdk/commit/fe51b05889db5822679b0892434e37a1933d86a8) Thanks [@nicks-passiert](https://github.com/nicks-passiert)! - Change accordion to signal structure
+
 ## 4.53.5
 
 ### Patch Changes

package/fesm2022/ethlete-cdk.mjs

@@ -1,15 +1,15 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Directive, inject, input, booleanAttribute, computed, isDevMode, model, contentChild, effect, untracked, Component, ViewEncapsulation, ChangeDetectionStrategy, contentChildren, ElementRef, Injector, Input, HostBinding, numberAttribute, PLATFORM_ID, Renderer2, DestroyRef, signal, viewChild, viewChildren, ContentChild, Injectable, ChangeDetectorRef, TemplateRef, ViewContainerRef, ViewChild, ContentChildren, assertInInjectionContext, forwardRef, EventEmitter, Output, ViewChildren, runInInjectionContext, Optional, Inject, SkipSelf, HostListener, NgZone, NgModule, isSignal, Attribute } from '@angular/core';
 import * as i1 from '@angular/cdk/portal';
 import { CdkPortal, PortalModule, ComponentPortal, TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
-import { AsyncPipe, isPlatformBrowser, NgComponentOutlet, NgClass, NgTemplateOutlet, DOCUMENT, Location, NgStyle } from '@angular/common';
-import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, booleanAttribute, computed, isDevMode, Directive, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ContentChild, ContentChildren, ElementRef, Injector, HostBinding, numberAttribute, PLATFORM_ID, Renderer2, effect, DestroyRef, signal, contentChildren, viewChild, viewChildren, Injectable, ChangeDetectorRef, TemplateRef, ViewContainerRef, ViewChild, assertInInjectionContext, forwardRef, EventEmitter, Output, ViewChildren, contentChild, runInInjectionContext, Optional, Inject, SkipSelf, HostListener, untracked, NgZone, NgModule, isSignal, Attribute } from '@angular/core';
-import { BehaviorSubject, startWith, map, switchMap, combineLatest, pairwise, tap, takeUntil, skip, of, merge, timer, takeWhile, filter, fromEvent, Subject, Observable, debounceTime, withLatestFrom, distinctUntilChanged, take, skipUntil, skipWhile, catchError, throwError, defer, partition, from, finalize, Subscription } from 'rxjs';
 import { DomSanitizer, Title } from '@angular/platform-browser';
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import * as i1$1 from '@ethlete/core';
-import { createDestroy, Memo, createComponentId, signalHostAttributes, signalHostClasses, previousSignalValue, signalHostStyles, nextFrame, syncSignal, signalStyles, injectHostElement, ObserveVisibilityDirective, signalVisibilityChangeClasses, IS_EMAIL, MUST_MATCH, IS_ARRAY_NOT_EMPTY, AT_LEAST_ONE_REQUIRED, equal, switchQueryListChanges, controlValueSignal, signalAttributes, ResizeObserverService, createFlipAnimation, AnimatedOverlayDirective, RuntimeError, SelectionModel, ActiveSelectionModel, KeyPressManager, signalClasses, scrollToElement, isEmptyArray, isObjectArray, isPrimitiveArray, ClickOutsideDirective, ANIMATED_LIFECYCLE_TOKEN, AnimatedLifecycleDirective, ObserveContentDirective, clamp, DELAYABLE_TOKEN, ObserveResizeDirective, SmartBlockScrollStrategy, signalElementDimensions, signalElementScrollState, createIsRenderedSignal, createCanAnimateSignal, useCursorDragScroll, signalElementIntersection, signalElementChildren, getIntersectionInfo, getElementScrollCoordinates, ClickObserverService, RootBoundaryDirective, elementCanScroll, cloneFormGroup, getFormGroupValue, ViewportService, injectRoute, ROOT_BOUNDARY_TOKEN, injectQueryParam, RouterStateService, fromNextFrame, isElementVisible, AnimatedIfDirective, FocusVisibleService, inferMimeType, TypedQueryList } from '@ethlete/core';
+import { toObservable, takeUntilDestroyed, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
+import { map, switchMap, combineLatest, pairwise, tap, BehaviorSubject, takeUntil, skip, of, merge, timer, takeWhile, filter, fromEvent, Subject, Observable, startWith, debounceTime, withLatestFrom, distinctUntilChanged, take, skipUntil, skipWhile, catchError, throwError, defer, partition, from, finalize, Subscription } from 'rxjs';
 import { __decorate, __metadata } from 'tslib';
-import { toSignal, toObservable, takeUntilDestroyed, outputFromObservable } from '@angular/core/rxjs-interop';
+import { AsyncPipe, isPlatformBrowser, NgComponentOutlet, NgClass, NgTemplateOutlet, DOCUMENT, Location, NgStyle } from '@angular/common';
+import * as i1$1 from '@ethlete/core';
+import { Memo, createComponentId, signalHostAttributes, signalHostClasses, createDestroy, previousSignalValue, signalHostStyles, nextFrame, syncSignal, signalStyles, injectHostElement, ObserveVisibilityDirective, signalVisibilityChangeClasses, IS_EMAIL, MUST_MATCH, IS_ARRAY_NOT_EMPTY, AT_LEAST_ONE_REQUIRED, equal, switchQueryListChanges, controlValueSignal, signalAttributes, ResizeObserverService, createFlipAnimation, AnimatedOverlayDirective, RuntimeError, SelectionModel, ActiveSelectionModel, KeyPressManager, signalClasses, scrollToElement, isEmptyArray, isObjectArray, isPrimitiveArray, ClickOutsideDirective, ANIMATED_LIFECYCLE_TOKEN, AnimatedLifecycleDirective, ObserveContentDirective, clamp, DELAYABLE_TOKEN, ObserveResizeDirective, SmartBlockScrollStrategy, signalElementDimensions, signalElementScrollState, createIsRenderedSignal, createCanAnimateSignal, useCursorDragScroll, signalElementIntersection, signalElementChildren, getIntersectionInfo, getElementScrollCoordinates, ClickObserverService, RootBoundaryDirective, elementCanScroll, cloneFormGroup, getFormGroupValue, ViewportService, injectRoute, ROOT_BOUNDARY_TOKEN, injectQueryParam, RouterStateService, fromNextFrame, isElementVisible, AnimatedIfDirective, FocusVisibleService, inferMimeType, TypedQueryList } from '@ethlete/core';
 import { extractQuery, isQueryStateSuccess, isQueryStateFailure, isQueryStateLoading, QueryDirective, queryComputed, switchQueryState, shouldRetryRequest, ExperimentalQuery, isClassValidatorError, isSymfonyFormViolationListError, isSymfonyListError } from '@ethlete/query';
 import * as i1$2 from '@angular/cdk/a11y';
 import { FocusMonitor, FocusKeyManager, InputModalityDetector, FocusTrapFactory, InteractivityChecker, AriaDescriber, A11yModule } from '@angular/cdk/a11y';
@@ -33,6 +33,72 @@ import * as i1$4 from '@angular/cdk/table';
 import { CdkColumnDef, CDK_TABLE, CdkTable, _COALESCED_STYLE_SCHEDULER, _CoalescedStyleScheduler, STICKY_POSITIONING_LISTENER, HeaderRowOutlet, DataRowOutlet, NoDataRowOutlet, FooterRowOutlet, CdkCell, CdkCellDef, CdkFooterCell, CdkFooterCellDef, CdkHeaderCell, CdkHeaderCellDef, CdkTextColumn, TEXT_COLUMN_OPTIONS, CdkFooterRow, CdkTableModule, CDK_ROW_TEMPLATE, CdkFooterRowDef, CdkHeaderRow, CdkHeaderRowDef, CdkNoDataRow, CdkRow, CdkRowDef } from '@angular/cdk/table';
 import { CdkScrollableModule, ViewportRuler as ViewportRuler$1 } from '@angular/cdk/scrolling';
 
+const ACCORDION_HINT_WRAPPER_DIRECTIVE = new InjectionToken('AccordionHintWrapperDirective');
+class AccordionHintWrapperDirective extends CdkPortal {
+    constructor(templateRef, viewContainerRef) {
+        super(templateRef, viewContainerRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AccordionHintWrapperDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.5", type: AccordionHintWrapperDirective, isStandalone: true, selector: "ng-template[et-accordion-hint-wrapper]", providers: [{ provide: ACCORDION_HINT_WRAPPER_DIRECTIVE, useExisting: AccordionHintWrapperDirective }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AccordionHintWrapperDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[et-accordion-hint-wrapper]',
+                    providers: [{ provide: ACCORDION_HINT_WRAPPER_DIRECTIVE, useExisting: AccordionHintWrapperDirective }],
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }] });
+
+class AccordionHintDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AccordionHintDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.5", type: AccordionHintDirective, isStandalone: true, selector: "[et-accordion-hint]", host: { classAttribute: "et-accordion-hint" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AccordionHintDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[et-accordion-hint]',
+                    standalone: true,
+                    host: {
+                        class: 'et-accordion-hint',
+                    },
+                }]
+        }] });
+
+const ACCORDION_LABEL_WRAPPER_DIRECTIVE = new InjectionToken('AccordionLabelWrapperDirective');
+class AccordionLabelWrapperDirective extends CdkPortal {
+    constructor(templateRef, viewContainerRef) {
+        super(templateRef, viewContainerRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AccordionLabelWrapperDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.5", type: AccordionLabelWrapperDirective, isStandalone: true, selector: "ng-template[et-accordion-label-wrapper]", providers: [{ provide: ACCORDION_LABEL_WRAPPER_DIRECTIVE, useExisting: AccordionLabelWrapperDirective }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AccordionLabelWrapperDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[et-accordion-label-wrapper]',
+                    providers: [{ provide: ACCORDION_LABEL_WRAPPER_DIRECTIVE, useExisting: AccordionLabelWrapperDirective }],
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }] });
+
+class AccordionLabelDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AccordionLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.5", type: AccordionLabelDirective, isStandalone: true, selector: "[et-accordion-label]", host: { classAttribute: "et-accordion-label" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AccordionLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[et-accordion-label]',
+                    standalone: true,
+                    host: {
+                        class: 'et-accordion-label',
+                    },
+                }]
+        }] });
+
+const ACCORDION_COMPONENT = new InjectionToken('AccordionComponent');
+
 // Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.
 const CHEVRON_ICON = {
     name: 'et-chevron',
@@ -131,57 +197,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-const ACCORDION_HINT_WRAPPER_DIRECTIVE = new InjectionToken('AccordionHintWrapperDirective');
-
-class AccordionHintWrapperDirective extends CdkPortal {
-    constructor(templateRef, viewContainerRef) {
-        super(templateRef, viewContainerRef);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AccordionHintWrapperDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.5", type: AccordionHintWrapperDirective, isStandalone: true, selector: "ng-template[et-accordion-hint-wrapper]", providers: [{ provide: ACCORDION_HINT_WRAPPER_DIRECTIVE, useExisting: AccordionHintWrapperDirective }], usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AccordionHintWrapperDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[et-accordion-hint-wrapper]',
-                    providers: [{ provide: ACCORDION_HINT_WRAPPER_DIRECTIVE, useExisting: AccordionHintWrapperDirective }],
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }] });
-
-class AccordionLabelDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AccordionLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.5", type: AccordionLabelDirective, isStandalone: true, selector: "[et-accordion-label]", host: { classAttribute: "et-accordion-label" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AccordionLabelDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[et-accordion-label]',
-                    standalone: true,
-                    host: {
-                        class: 'et-accordion-label',
-                    },
-                }]
-        }] });
-
-const ACCORDION_LABEL_WRAPPER_DIRECTIVE = new InjectionToken('AccordionLabelWrapperDirective');
-
-class AccordionLabelWrapperDirective extends CdkPortal {
-    constructor(templateRef, viewContainerRef) {
-        super(templateRef, viewContainerRef);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AccordionLabelWrapperDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.5", type: AccordionLabelWrapperDirective, isStandalone: true, selector: "ng-template[et-accordion-label-wrapper]", providers: [{ provide: ACCORDION_LABEL_WRAPPER_DIRECTIVE, useExisting: AccordionLabelWrapperDirective }], usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AccordionLabelWrapperDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[et-accordion-label-wrapper]',
-                    providers: [{ provide: ACCORDION_LABEL_WRAPPER_DIRECTIVE, useExisting: AccordionLabelWrapperDirective }],
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }] });
-
 const accordionAnimations = {
     animateOpenClose: trigger('animateOpenClose', [
         state('close, void', style({ height: '0px', visibility: 'hidden' })),
@@ -190,125 +205,76 @@ const accordionAnimations = {
     ]),
 };
 
-const ACCORDION_COMPONENT = new InjectionToken('AccordionComponent');
-
 let accordionId = 0;
 class AccordionComponent {
     constructor() {
-        this._id = `et-accordion-${accordionId++}`;
-        this.isOpenByDefault = false;
-        this.disabled = false;
-        this.label = '';
-        this.bodyId = `${this._id}-body`;
-        this.headerId = `${this._id}-header`;
-        this._isFirst = false;
-        this._isLast = false;
-        this._isOpen$ = new BehaviorSubject(false);
-    }
-    get isOpen$() {
-        return this._isOpen$.asObservable();
-    }
-    get isOpen() {
-        return this._isOpen$.value;
-    }
-    ngOnInit() {
-        this._isOpen$.next(this.isOpenByDefault);
+        this.isOpenByDefault = input(false, { transform: booleanAttribute });
+        this.disabled = input(false, { transform: booleanAttribute });
+        this.label = input('');
+        this.isOpen = model(false);
+        this.isOpen$ = toObservable(this.isOpen);
+        this.templateLabel = contentChild(ACCORDION_LABEL_WRAPPER_DIRECTIVE);
+        this.templateHint = contentChild(ACCORDION_HINT_WRAPPER_DIRECTIVE);
+        this.ID = `et-accordion-${accordionId++}`;
+        this.BODY_ID = `${this.ID}-body`;
+        this.HEADER_ID = `${this.ID}-header`;
+        const ref = effect(() => {
+            const isOpenByDefault = this.isOpenByDefault();
+            untracked(() => {
+                this.isOpen.set(isOpenByDefault);
+                ref.destroy();
+            });
+        });
     }
     toggleAccordionOpen() {
-        this._isOpen$.next(!this._isOpen$.value);
+        this.isOpen.set(!this.isOpen());
     }
     open() {
-        this._isOpen$.next(true);
+        this.isOpen.set(true);
     }
     close() {
-        this._isOpen$.next(false);
+        this.isOpen.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AccordionComponent, isStandalone: true, selector: "et-accordion", inputs: { isOpenByDefault: ["isOpenByDefault", "isOpenByDefault", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], label: "label" }, host: { classAttribute: "et-accordion" }, providers: [{ provide: ACCORDION_COMPONENT, useExisting: AccordionComponent }, provideIcons(CHEVRON_ICON)], queries: [{ propertyName: "templateLabel", first: true, predicate: ACCORDION_LABEL_WRAPPER_DIRECTIVE, descendants: true }, { propertyName: "templateHint", first: true, predicate: ACCORDION_HINT_WRAPPER_DIRECTIVE, descendants: true }], ngImport: i0, template: "@let isOpen = _isOpen$ | async;\n\n<div class=\"et-accordion-container\">\n  <h3 class=\"et-accordion-header-wrapper\">\n    <button\n      [disabled]=\"disabled\"\n      [id]=\"headerId\"\n      [attr.aria-controls]=\"bodyId\"\n      [attr.aria-expanded]=\"isOpen\"\n      [class.et-accordion-has-hint]=\"!!templateHint\"\n      (click)=\"toggleAccordionOpen()\"\n      class=\"et-accordion-header\"\n      type=\"button\"\n    >\n      <div>\n        @if (templateLabel) {\n          <ng-template [cdkPortalOutlet]=\"templateLabel\" />\n        } @else {\n          <span et-accordion-label>{{ label }} </span>\n        }\n      </div>\n\n      @if (templateHint) {\n        <ng-template [cdkPortalOutlet]=\"templateHint\" />\n      }\n\n      <i etIcon=\"et-chevron\"> </i>\n    </button>\n  </h3>\n  <div\n    [@animateOpenClose]=\"isOpen ? 'open' : 'close'\"\n    [attr.aria-labelledby]=\"headerId\"\n    [id]=\"bodyId\"\n    class=\"et-accordion-body\"\n    role=\"region\"\n  >\n    <div class=\"et-accordion-body-container\">\n      <ng-content />\n    </div>\n  </div>\n  <hr class=\"et-accordion-separator\" />\n</div>\n", styles: [":where(.et-accordion){--chevron-size: 15px}.et-accordion .et-accordion-container{position:relative;z-index:1}.et-accordion .et-icon--et-chevron{display:block;transform:rotate(180deg);transition:transform .3s var(--ease-5);inline-size:var(--chevron-size);block-size:var(--chevron-size)}.et-accordion [aria-expanded=true] .et-icon--et-chevron{transform:rotate(0)}.et-accordion .et-accordion-header{display:grid;grid-template-columns:1fr auto;inline-size:100%;block-size:100%;text-align:left;background-color:transparent;border:none;align-items:center;padding:0;gap:15px}.et-accordion .et-accordion-header:not(:disabled){cursor:pointer}.et-accordion .et-accordion-header.et-accordion-has-hint{grid-template-columns:1fr auto auto}.et-accordion .et-accordion-header-wrapper{margin:0}.et-accordion .et-accordion-body{overflow:hidden}.et-accordion .et-accordion-separator{position:relative;z-index:-1}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: AccordionLabelDirective, selector: "[et-accordion-label]" }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "allowHardcodedColor"] }], animations: [accordionAnimations.animateOpenClose], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AccordionComponent, isStandalone: true, selector: "et-accordion", inputs: { isOpenByDefault: { classPropertyName: "isOpenByDefault", publicName: "isOpenByDefault", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange" }, host: { classAttribute: "et-accordion" }, providers: [{ provide: ACCORDION_COMPONENT, useExisting: AccordionComponent }, provideIcons(CHEVRON_ICON)], queries: [{ propertyName: "templateLabel", first: true, predicate: ACCORDION_LABEL_WRAPPER_DIRECTIVE, descendants: true, isSignal: true }, { propertyName: "templateHint", first: true, predicate: ACCORDION_HINT_WRAPPER_DIRECTIVE, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"et-accordion-container\">\n  <h3 class=\"et-accordion-header-wrapper\">\n    <button\n      [disabled]=\"disabled()\"\n      [id]=\"HEADER_ID\"\n      [attr.aria-controls]=\"BODY_ID\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [class.et-accordion-has-hint]=\"!!templateHint\"\n      (click)=\"toggleAccordionOpen()\"\n      class=\"et-accordion-header\"\n      type=\"button\"\n    >\n      <div>\n        @if (templateLabel(); as templateLabel) {\n          <ng-template [cdkPortalOutlet]=\"templateLabel\" />\n        } @else {\n          <span et-accordion-label>{{ label() }} </span>\n        }\n      </div>\n\n      @if (templateHint(); as templateHint) {\n        <ng-template [cdkPortalOutlet]=\"templateHint\" />\n      }\n\n      <i etIcon=\"et-chevron\"> </i>\n    </button>\n  </h3>\n  <div\n    [@animateOpenClose]=\"isOpen() ? 'open' : 'close'\"\n    [attr.aria-labelledby]=\"HEADER_ID\"\n    [id]=\"BODY_ID\"\n    class=\"et-accordion-body\"\n    role=\"region\"\n  >\n    <div class=\"et-accordion-body-container\">\n      <ng-content />\n    </div>\n  </div>\n  <hr class=\"et-accordion-separator\" />\n</div>\n", styles: [":where(.et-accordion){--chevron-size: 15px}.et-accordion .et-accordion-container{position:relative;z-index:1}.et-accordion .et-icon--et-chevron{display:block;transform:rotate(180deg);transition:transform .3s var(--ease-5);inline-size:var(--chevron-size);block-size:var(--chevron-size)}.et-accordion [aria-expanded=true] .et-icon--et-chevron{transform:rotate(0)}.et-accordion .et-accordion-header{display:grid;grid-template-columns:1fr auto;inline-size:100%;block-size:100%;text-align:left;background-color:transparent;border:none;align-items:center;padding:0;gap:15px}.et-accordion .et-accordion-header:not(:disabled){cursor:pointer}.et-accordion .et-accordion-header.et-accordion-has-hint{grid-template-columns:1fr auto auto}.et-accordion .et-accordion-header-wrapper{margin:0}.et-accordion .et-accordion-body{overflow:hidden}.et-accordion .et-accordion-separator{position:relative;z-index:-1}\n"], dependencies: [{ kind: "directive", type: AccordionLabelDirective, selector: "[et-accordion-label]" }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "allowHardcodedColor"] }], animations: [accordionAnimations.animateOpenClose], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AccordionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'et-accordion', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: ACCORDION_COMPONENT, useExisting: AccordionComponent }, provideIcons(CHEVRON_ICON)], imports: [AsyncPipe, AccordionLabelDirective, PortalModule, IconDirective], animations: [accordionAnimations.animateOpenClose], host: {
+            args: [{ selector: 'et-accordion', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: ACCORDION_COMPONENT, useExisting: AccordionComponent }, provideIcons(CHEVRON_ICON)], imports: [AccordionLabelDirective, PortalModule, IconDirective], animations: [accordionAnimations.animateOpenClose], host: {
                         class: 'et-accordion',
-                    }, template: "@let isOpen = _isOpen$ | async;\n\n<div class=\"et-accordion-container\">\n  <h3 class=\"et-accordion-header-wrapper\">\n    <button\n      [disabled]=\"disabled\"\n      [id]=\"headerId\"\n      [attr.aria-controls]=\"bodyId\"\n      [attr.aria-expanded]=\"isOpen\"\n      [class.et-accordion-has-hint]=\"!!templateHint\"\n      (click)=\"toggleAccordionOpen()\"\n      class=\"et-accordion-header\"\n      type=\"button\"\n    >\n      <div>\n        @if (templateLabel) {\n          <ng-template [cdkPortalOutlet]=\"templateLabel\" />\n        } @else {\n          <span et-accordion-label>{{ label }} </span>\n        }\n      </div>\n\n      @if (templateHint) {\n        <ng-template [cdkPortalOutlet]=\"templateHint\" />\n      }\n\n      <i etIcon=\"et-chevron\"> </i>\n    </button>\n  </h3>\n  <div\n    [@animateOpenClose]=\"isOpen ? 'open' : 'close'\"\n    [attr.aria-labelledby]=\"headerId\"\n    [id]=\"bodyId\"\n    class=\"et-accordion-body\"\n    role=\"region\"\n  >\n    <div class=\"et-accordion-body-container\">\n      <ng-content />\n    </div>\n  </div>\n  <hr class=\"et-accordion-separator\" />\n</div>\n", styles: [":where(.et-accordion){--chevron-size: 15px}.et-accordion .et-accordion-container{position:relative;z-index:1}.et-accordion .et-icon--et-chevron{display:block;transform:rotate(180deg);transition:transform .3s var(--ease-5);inline-size:var(--chevron-size);block-size:var(--chevron-size)}.et-accordion [aria-expanded=true] .et-icon--et-chevron{transform:rotate(0)}.et-accordion .et-accordion-header{display:grid;grid-template-columns:1fr auto;inline-size:100%;block-size:100%;text-align:left;background-color:transparent;border:none;align-items:center;padding:0;gap:15px}.et-accordion .et-accordion-header:not(:disabled){cursor:pointer}.et-accordion .et-accordion-header.et-accordion-has-hint{grid-template-columns:1fr auto auto}.et-accordion .et-accordion-header-wrapper{margin:0}.et-accordion .et-accordion-body{overflow:hidden}.et-accordion .et-accordion-separator{position:relative;z-index:-1}\n"] }]
-        }], propDecorators: { isOpenByDefault: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], label: [{
-                type: Input
-            }], templateLabel: [{
-                type: ContentChild,
-                args: [ACCORDION_LABEL_WRAPPER_DIRECTIVE]
-            }], templateHint: [{
-                type: ContentChild,
-                args: [ACCORDION_HINT_WRAPPER_DIRECTIVE]
-            }] } });
+                    }, template: "<div class=\"et-accordion-container\">\n  <h3 class=\"et-accordion-header-wrapper\">\n    <button\n      [disabled]=\"disabled()\"\n      [id]=\"HEADER_ID\"\n      [attr.aria-controls]=\"BODY_ID\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [class.et-accordion-has-hint]=\"!!templateHint\"\n      (click)=\"toggleAccordionOpen()\"\n      class=\"et-accordion-header\"\n      type=\"button\"\n    >\n      <div>\n        @if (templateLabel(); as templateLabel) {\n          <ng-template [cdkPortalOutlet]=\"templateLabel\" />\n        } @else {\n          <span et-accordion-label>{{ label() }} </span>\n        }\n      </div>\n\n      @if (templateHint(); as templateHint) {\n        <ng-template [cdkPortalOutlet]=\"templateHint\" />\n      }\n\n      <i etIcon=\"et-chevron\"> </i>\n    </button>\n  </h3>\n  <div\n    [@animateOpenClose]=\"isOpen() ? 'open' : 'close'\"\n    [attr.aria-labelledby]=\"HEADER_ID\"\n    [id]=\"BODY_ID\"\n    class=\"et-accordion-body\"\n    role=\"region\"\n  >\n    <div class=\"et-accordion-body-container\">\n      <ng-content />\n    </div>\n  </div>\n  <hr class=\"et-accordion-separator\" />\n</div>\n", styles: [":where(.et-accordion){--chevron-size: 15px}.et-accordion .et-accordion-container{position:relative;z-index:1}.et-accordion .et-icon--et-chevron{display:block;transform:rotate(180deg);transition:transform .3s var(--ease-5);inline-size:var(--chevron-size);block-size:var(--chevron-size)}.et-accordion [aria-expanded=true] .et-icon--et-chevron{transform:rotate(0)}.et-accordion .et-accordion-header{display:grid;grid-template-columns:1fr auto;inline-size:100%;block-size:100%;text-align:left;background-color:transparent;border:none;align-items:center;padding:0;gap:15px}.et-accordion .et-accordion-header:not(:disabled){cursor:pointer}.et-accordion .et-accordion-header.et-accordion-has-hint{grid-template-columns:1fr auto auto}.et-accordion .et-accordion-header-wrapper{margin:0}.et-accordion .et-accordion-body{overflow:hidden}.et-accordion .et-accordion-separator{position:relative;z-index:-1}\n"] }]
+        }], ctorParameters: () => [] });
 
 class AccordionGroupComponent {
     constructor() {
-        this._destroy$ = createDestroy();
-        this.autoCloseOthers = false;
-    }
-    ngAfterContentInit() {
-        if (!this._accordions) {
-            return;
-        }
-        this._accordions.changes
-            .pipe(startWith(this._accordions), map((accordions) => accordions
-            ?.toArray()
-            .filter((a) => !!a)
-            .map((a) => a.isOpen$) ?? []), switchMap((d) => combineLatest(d)), pairwise(), tap(([prev, curr]) => {
-            if (!this.autoCloseOthers) {
+        this.autoCloseOthers = input(false, { transform: booleanAttribute });
+        this.accordions = contentChildren(ACCORDION_COMPONENT);
+        toObservable(this.accordions)
+            .pipe(map((accordions) => accordions.map((a) => a.isOpen$)), switchMap((d) => combineLatest(d)), pairwise(), tap(([prev, curr]) => {
+            if (!this.autoCloseOthers()) {
                 return;
             }
             const isOpenedNow = curr.findIndex((a, i) => a && !prev[i]);
             if (isOpenedNow === -1) {
                 return;
             }
-            for (const [i, item] of this._accordions
-                ?.toArray()
-                .filter((a) => !!a)
-                .entries() ?? [].entries()) {
-                if (i !== isOpenedNow && item.isOpen) {
+            for (const [i, item] of this.accordions().entries()) {
+                if (i !== isOpenedNow && item.isOpen()) {
                     item.close();
                 }
             }
-        }), takeUntil(this._destroy$))
+        }), takeUntilDestroyed())
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AccordionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.5", type: AccordionGroupComponent, isStandalone: true, selector: "et-accordion-group", inputs: { autoCloseOthers: ["autoCloseOthers", "autoCloseOthers", booleanAttribute] }, host: { classAttribute: "et-accordion-group" }, queries: [{ propertyName: "_accordions", predicate: ACCORDION_COMPONENT }], ngImport: i0, template: "<ng-content select=\"et-accordion\" />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.5", type: AccordionGroupComponent, isStandalone: true, selector: "et-accordion-group", inputs: { autoCloseOthers: { classPropertyName: "autoCloseOthers", publicName: "autoCloseOthers", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-accordion-group" }, queries: [{ propertyName: "accordions", predicate: ACCORDION_COMPONENT, isSignal: true }], ngImport: i0, template: "<ng-content select=\"et-accordion\" />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AccordionGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-accordion-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
                         class: 'et-accordion-group',
                     }, template: "<ng-content select=\"et-accordion\" />\n" }]
-        }], propDecorators: { autoCloseOthers: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], _accordions: [{
-                type: ContentChildren,
-                args: [ACCORDION_COMPONENT]
-            }] } });
-
-class AccordionHintDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AccordionHintDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.5", type: AccordionHintDirective, isStandalone: true, selector: "[et-accordion-hint]", host: { classAttribute: "et-accordion-hint" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AccordionHintDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[et-accordion-hint]',
-                    standalone: true,
-                    host: {
-                        class: 'et-accordion-hint',
-                    },
-                }]
-        }] });
+        }], ctorParameters: () => [] });
 
 const AccordionImports = [
     AccordionHintDirective,