@cute-widgets/base 20.0.1

package/fesm2022/cute-widgets-base-expansion.mjs

@@ -0,0 +1,623 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, TemplateRef, Directive, ViewContainerRef, DOCUMENT, NgZone, ElementRef, Renderer2, EventEmitter, ViewChild, ContentChild, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, ChangeDetectorRef, HostAttributeToken, numberAttribute, QueryList, booleanAttribute, ContentChildren, NgModule } from '@angular/core';
+import { CdkAccordionItem, CdkAccordion } from '@angular/cdk/accordion';
+import { FocusMonitor, FocusKeyManager } from '@angular/cdk/a11y';
+import { ENTER, hasModifierKey, SPACE } from '@angular/cdk/keycodes';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
+import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
+import { Subject, startWith, filter, take, Subscription, EMPTY, merge } from 'rxjs';
+import { _animationsDisabled } from '@cute-widgets/base/core';
+import { CommonModule } from '@angular/common';
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+/**
+ * Token used to provide a `CuteAccordion` to `CuteExpansionPanel`.
+ * Used primarily to avoid circular imports between `CuteAccordion` and `CuteExpansionPanel`.
+ */
+const CUTE_ACCORDION = new InjectionToken('CUTE_ACCORDION');
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+/**
+ * Token used to provide a `CuteExpansionPanel` to `CuteExpansionPanelContent`.
+ * Used to avoid circular imports between `CuteExpansionPanel` and `CuteExpansionPanelContent`.
+ */
+const CUTE_EXPANSION_PANEL = new InjectionToken('CUTE_EXPANSION_PANEL');
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+/**
+ * Expansion panel content that will be rendered lazily
+ * after the panel is opened for the first time.
+ */
+class CuteExpansionPanelContent {
+    constructor() {
+        this._template = inject(TemplateRef);
+        this._expansionPanel = inject(CUTE_EXPANSION_PANEL, { optional: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteExpansionPanelContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteExpansionPanelContent, isStandalone: true, selector: "ng-template[cuteExpansionPanelContent]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteExpansionPanelContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[cuteExpansionPanelContent]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+/** Counter for generating unique element ids. */
+let uniqueId = 0;
+/**
+ * Injection token that can be used to configure the default
+ * options for the expansion panel component.
+ */
+const CUTE_EXPANSION_PANEL_DEFAULT_OPTIONS = new InjectionToken('CUTE_EXPANSION_PANEL_DEFAULT_OPTIONS');
+/**
+ * This component can be used as a single element to show expandable content, or as one of
+ * multiple children of an element with the CuteAccordion directive attached.
+ */
+class CuteExpansionPanel extends CdkAccordionItem {
+    /** Whether the toggle indicator should be hidden. */
+    get hideToggle() { return this._hideToggle || (this.accordion && this.accordion.hideToggle); }
+    set hideToggle(value) {
+        this._hideToggle = coerceBooleanProperty(value);
+    }
+    /** The position of the expansion indicator. */
+    get togglePosition() {
+        return this._togglePosition || (this.accordion && this.accordion.togglePosition);
+    }
+    set togglePosition(value) {
+        this._togglePosition = value;
+    }
+    constructor() {
+        super();
+        this._viewContainerRef = inject(ViewContainerRef);
+        this._animationsDisabled = _animationsDisabled();
+        this._document = inject(DOCUMENT);
+        this._ngZone = inject(NgZone);
+        this._elementRef = inject(ElementRef);
+        this._renderer = inject(Renderer2);
+        this._hideToggle = false;
+        /** An event emitted after the body's expansion animation happens. */
+        this.afterExpand = new EventEmitter();
+        /** An event emitted after the body's collapse animation happens. */
+        this.afterCollapse = new EventEmitter();
+        /** Stream that emits for changes in `@Input` properties. */
+        this._inputChanges = new Subject();
+        /** Optionally defined accordion the expansion panel belongs to. */
+        this.accordion = inject(CUTE_ACCORDION, { optional: true, skipSelf: true });
+        /** Portal holding the user's content. */
+        this._portal = null;
+        /** ID for the associated header element. Used for a11y labelling. */
+        this._headerId = `cute-expansion-panel-header-${uniqueId++}`;
+        this._contentId = this._headerId.replace("header", "content");
+        //private _transitionEndListener = ({target, propertyName}: TransitionEvent) => {
+        this._transitionEndListener = (event) => {
+            // CWT: we change `_bodyWrapper` to `_body` since our template's markup differs from original
+            if (event.target === this._body?.nativeElement && event.propertyName === 'grid-template-rows') {
+                // if (event.propertyName==="transform" && event.pseudoElement==="::after") {
+                this._ngZone.run(() => {
+                    if (this.expanded) {
+                        this.afterExpand.emit();
+                    }
+                    else {
+                        this.afterCollapse.emit();
+                    }
+                });
+            }
+        };
+        const defaultOptions = inject(CUTE_EXPANSION_PANEL_DEFAULT_OPTIONS, { optional: true });
+        this._expansionDispatcher = inject(UniqueSelectionDispatcher);
+        if (defaultOptions) {
+            this.hideToggle = defaultOptions.hideToggle;
+        }
+    }
+    /** Determines whether the expansion panel should have spacing between it and its siblings. */
+    _hasSpacing() {
+        if (this.accordion) {
+            return this.expanded && this.accordion.displayMode === 'default';
+        }
+        return false;
+    }
+    /** Gets the expanded state string. */
+    _getExpandedState() {
+        return this.expanded ? 'expanded' : 'collapsed';
+    }
+    /** Toggles the expanded state of the expansion panel. */
+    toggle() {
+        this.expanded = !this.expanded;
+    }
+    /** Sets the expanded state of the expansion panel to false. */
+    close() {
+        this.expanded = false;
+    }
+    /** Sets the expanded state of the expansion panel to true. */
+    open() {
+        this.expanded = true;
+    }
+    ngAfterContentInit() {
+        if (this._lazyContent && this._lazyContent._expansionPanel === this) {
+            // Render the content as soon as the panel becomes open.
+            this.opened
+                .pipe(startWith(null), filter(() => this.expanded && !this._portal), take(1))
+                .subscribe(() => {
+                this._portal = new TemplatePortal(this._lazyContent._template, this._viewContainerRef);
+            });
+        }
+        this._setupAnimationEvents();
+    }
+    ngOnChanges(changes) {
+        this._inputChanges.next(changes);
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._cleanupTransitionEnd?.();
+        this._inputChanges.complete();
+    }
+    /** Checks whether the expansion panel's content contains the currently focused element. */
+    _containsFocus() {
+        if (this._body) {
+            const focusedElement = this._document.activeElement;
+            const bodyElement = this._body.nativeElement;
+            return focusedElement === bodyElement || bodyElement.contains(focusedElement);
+        }
+        return false;
+    }
+    _setupAnimationEvents() {
+        // This method is defined separately, because we need to
+        // disable this logic in some internal components.
+        this._ngZone.runOutsideAngular(() => {
+            if (this._animationsDisabled) {
+                this.opened.subscribe(() => this._ngZone.run(() => this.afterExpand.emit()));
+                this.closed.subscribe(() => this._ngZone.run(() => this.afterCollapse.emit()));
+            }
+            else {
+                setTimeout(() => {
+                    const element = this._elementRef.nativeElement;
+                    this._cleanupTransitionEnd = this._renderer.listen(element, 'transitionend', this._transitionEndListener);
+                    element.classList.add('cute-expansion-panel-animations-enabled');
+                }, 200);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteExpansionPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CuteExpansionPanel, isStandalone: true, selector: "cute-expansion-panel", inputs: { hideToggle: "hideToggle", togglePosition: "togglePosition" }, outputs: { afterExpand: "afterExpand", afterCollapse: "afterCollapse" }, host: { properties: { "class.accordion-item": "accordion", "class.accordion": "!accordion", "class.cute-expanded": "expanded" }, classAttribute: "cute-expansion-panel" }, providers: [
+            // Provide CuteAccordion as undefined to prevent nested expansion panels from registering
+            // to the same accordion.
+            { provide: CUTE_ACCORDION, useValue: undefined },
+            { provide: CUTE_EXPANSION_PANEL, useExisting: CuteExpansionPanel },
+        ], queries: [{ propertyName: "_lazyContent", first: true, predicate: CuteExpansionPanelContent, descendants: true }], viewQueries: [{ propertyName: "_body", first: true, predicate: ["body"], descendants: true }, { propertyName: "_bodyWrapper", first: true, predicate: ["bodyWrapper"], descendants: true }], exportAs: ["cuteExpansionPanel"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"cute-expansion-panel-content-wrapper\"\r\n     [class.accordion-item]=\"!accordion\"\r\n     [class.accordion-header]=\"accordion\"\r\n     #bodyWrapper>\r\n\r\n  <ng-content select=\"cute-expansion-panel-header\"></ng-content>\r\n  <div class=\"cute-expansion-panel-content accordion-collapse\"\r\n       [class]=\"expanded ? 'expanded' : 'collapsed'\"\r\n       [attr.aria-expanded]=\"expanded\"\r\n       [attr.aria-labelledby]=\"_headerId\"\r\n       role=\"region\"\r\n       [attr.id]=\"_contentId\"\r\n       #body>\r\n    <div class=\"cute-expansion-panel-body accordion-body\">\r\n      <ng-content></ng-content>\r\n      <ng-template [cdkPortalOutlet]=\"_portal\"></ng-template>\r\n    </div>\r\n    <ng-content select=\"cute-action-row\"></ng-content>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".cute-expansion-panel{display:block;box-sizing:content-box;margin:0;position:relative}.cute-expansion-panel .cute-expansion-panel-content{display:grid;grid-template-rows:0fr;overflow:hidden}.cute-expansion-panel .cute-expansion-panel-content .cute-expansion-panel-body{min-height:0;overflow:hidden;transition:display .1s;transition-timing-function:ease-in-out;transition-behavior:allow-discrete;display:none}.cute-expansion-panel .cute-expansion-panel-content.expanded{grid-template-rows:1fr}.cute-expansion-panel .cute-expansion-panel-content.expanded .cute-expansion-panel-body{display:block}.cute-expansion-panel .cute-expansion-panel-content.collapsed{grid-template-rows:0fr}.cute-expansion-panel .cute-expansion-panel-content.collapsed .cute-expansion-panel-body{display:none}.cute-expansion-panel.cute-expansion-panel-animations-enabled .cute-expansion-panel-content{transition:grid-template-rows .2s}.cute-expansion-panel.accordion.cute-expansion-panel-separated,.cute-expansion-panel.accordion.cute-expansion-panel-separated .accordion-item{border:0}.cute-expansion-panel.accordion.cute-expansion-panel-separated .accordion-button{border:var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);border-radius:var(--bs-accordion-border-radius)}.cute-expansion-panel.accordion.cute-expansion-panel-separated .accordion-button:not(:focus):not(.collapsed){box-shadow:none}.cute-expansion-panel.accordion.cute-expansion-panel-separated .accordion-collapse{margin-top:4px;border:var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);border-radius:var(--bs-accordion-border-radius)}.cute-expansion-panel.accordion.cute-expansion-panel-separated .accordion-collapse.collapsed{margin-top:0;border:0}@media (forced-colors: active){.cute-accordion .cute-expansion-panel{outline:solid 1px}}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteExpansionPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'cute-expansion-panel', exportAs: 'cuteExpansionPanel', host: {
+                        'class': 'cute-expansion-panel',
+                        '[class.accordion-item]': 'accordion',
+                        '[class.accordion]': '!accordion',
+                        '[class.cute-expanded]': 'expanded',
+                    }, imports: [CdkPortalOutlet], providers: [
+                        // Provide CuteAccordion as undefined to prevent nested expansion panels from registering
+                        // to the same accordion.
+                        { provide: CUTE_ACCORDION, useValue: undefined },
+                        { provide: CUTE_EXPANSION_PANEL, useExisting: CuteExpansionPanel },
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cute-expansion-panel-content-wrapper\"\r\n     [class.accordion-item]=\"!accordion\"\r\n     [class.accordion-header]=\"accordion\"\r\n     #bodyWrapper>\r\n\r\n  <ng-content select=\"cute-expansion-panel-header\"></ng-content>\r\n  <div class=\"cute-expansion-panel-content accordion-collapse\"\r\n       [class]=\"expanded ? 'expanded' : 'collapsed'\"\r\n       [attr.aria-expanded]=\"expanded\"\r\n       [attr.aria-labelledby]=\"_headerId\"\r\n       role=\"region\"\r\n       [attr.id]=\"_contentId\"\r\n       #body>\r\n    <div class=\"cute-expansion-panel-body accordion-body\">\r\n      <ng-content></ng-content>\r\n      <ng-template [cdkPortalOutlet]=\"_portal\"></ng-template>\r\n    </div>\r\n    <ng-content select=\"cute-action-row\"></ng-content>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".cute-expansion-panel{display:block;box-sizing:content-box;margin:0;position:relative}.cute-expansion-panel .cute-expansion-panel-content{display:grid;grid-template-rows:0fr;overflow:hidden}.cute-expansion-panel .cute-expansion-panel-content .cute-expansion-panel-body{min-height:0;overflow:hidden;transition:display .1s;transition-timing-function:ease-in-out;transition-behavior:allow-discrete;display:none}.cute-expansion-panel .cute-expansion-panel-content.expanded{grid-template-rows:1fr}.cute-expansion-panel .cute-expansion-panel-content.expanded .cute-expansion-panel-body{display:block}.cute-expansion-panel .cute-expansion-panel-content.collapsed{grid-template-rows:0fr}.cute-expansion-panel .cute-expansion-panel-content.collapsed .cute-expansion-panel-body{display:none}.cute-expansion-panel.cute-expansion-panel-animations-enabled .cute-expansion-panel-content{transition:grid-template-rows .2s}.cute-expansion-panel.accordion.cute-expansion-panel-separated,.cute-expansion-panel.accordion.cute-expansion-panel-separated .accordion-item{border:0}.cute-expansion-panel.accordion.cute-expansion-panel-separated .accordion-button{border:var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);border-radius:var(--bs-accordion-border-radius)}.cute-expansion-panel.accordion.cute-expansion-panel-separated .accordion-button:not(:focus):not(.collapsed){box-shadow:none}.cute-expansion-panel.accordion.cute-expansion-panel-separated .accordion-collapse{margin-top:4px;border:var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);border-radius:var(--bs-accordion-border-radius)}.cute-expansion-panel.accordion.cute-expansion-panel-separated .accordion-collapse.collapsed{margin-top:0;border:0}@media (forced-colors: active){.cute-accordion .cute-expansion-panel{outline:solid 1px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { hideToggle: [{
+                type: Input
+            }], togglePosition: [{
+                type: Input
+            }], afterExpand: [{
+                type: Output
+            }], afterCollapse: [{
+                type: Output
+            }], _lazyContent: [{
+                type: ContentChild,
+                args: [CuteExpansionPanelContent]
+            }], _body: [{
+                type: ViewChild,
+                args: ['body']
+            }], _bodyWrapper: [{
+                type: ViewChild,
+                args: ['bodyWrapper']
+            }] } });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+class CuteExpansionPanelHeader {
+    constructor() {
+        this.panel = inject(CuteExpansionPanel, { host: true });
+        this._element = inject(ElementRef);
+        this._focusMonitor = inject(FocusMonitor);
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._parentChangeSubscription = Subscription.EMPTY;
+        /** Tab index of the header. */
+        this.tabIndex = 0;
+        const panel = this.panel;
+        const defaultOptions = inject(CUTE_EXPANSION_PANEL_DEFAULT_OPTIONS, { optional: true });
+        const tabIndex = inject(new HostAttributeToken('tabindex'), { optional: true });
+        const accordionHideToggleChange = panel.accordion
+            ? panel.accordion._stateChanges.pipe(filter(changes => !!(changes['hideToggle'] || changes['togglePosition'])))
+            : EMPTY;
+        this.tabIndex = parseInt(tabIndex || '') || 0;
+        // Since the toggle state depends on an @Input on the panel, we
+        // need to subscribe and trigger change detection manually.
+        this._parentChangeSubscription = merge(panel.opened, panel.closed, accordionHideToggleChange, panel._inputChanges.pipe(filter(changes => {
+            return !!(changes['hideToggle'] || changes['disabled'] || changes['togglePosition']);
+        }))).subscribe(() => this._changeDetectorRef.markForCheck());
+        // Avoids focus being lost if the panel contained the focused element and was closed.
+        panel.closed
+            .pipe(filter(() => panel._containsFocus()))
+            .subscribe(() => this._focusMonitor.focusVia(this._element, 'program'));
+        if (defaultOptions) {
+            this.expandedHeight = defaultOptions.expandedHeight;
+            this.collapsedHeight = defaultOptions.collapsedHeight;
+        }
+    }
+    /** Whether the associated panel is disabled. Implemented as a part of `FocusableOption`. */
+    get disabled() {
+        return this.panel.disabled;
+    }
+    /** Toggles the expanded state of the panel. */
+    _toggle() {
+        if (!this.disabled) {
+            this.panel.toggle();
+        }
+    }
+    /** Gets whether the panel is expanded. */
+    _isExpanded() {
+        return this.panel.expanded;
+    }
+    /** Gets the expanded state string of the panel. */
+    _getExpandedState() {
+        return this.panel._getExpandedState();
+    }
+    /** Gets the panel id. */
+    _getPanelId() {
+        return this.panel.id;
+    }
+    /** Gets the toggle position for the header. */
+    _getTogglePosition() {
+        return this.panel.togglePosition;
+    }
+    /** Gets whether the expanded indicator should be shown. */
+    _showToggle() {
+        return !this.panel.hideToggle && !this.panel.disabled;
+    }
+    /**
+     * Gets the current height of the header. Null if no custom height has been
+     * specified, and if the default height from the stylesheet should be used.
+     */
+    _getHeaderHeight() {
+        const isExpanded = this._isExpanded();
+        if (isExpanded && this.expandedHeight) {
+            return this.expandedHeight;
+        }
+        else if (!isExpanded && this.collapsedHeight) {
+            return this.collapsedHeight;
+        }
+        return null;
+    }
+    /** Handle keydown event calling to toggle() if appropriate. */
+    _keydown(event) {
+        switch (event.keyCode) {
+            // Toggle for space and enter keys.
+            case SPACE:
+            case ENTER:
+                if (!hasModifierKey(event)) {
+                    event.preventDefault();
+                    this._toggle();
+                }
+                break;
+            default:
+                if (this.panel.accordion) {
+                    this.panel.accordion._handleHeaderKeydown(event);
+                }
+                return;
+        }
+    }
+    /**
+     * Focuses the panel header. Implemented as a part of `FocusableOption`.
+     * @param origin Origin of the action that triggered the focus.
+     * @param options FocusOptions
+     */
+    focus(origin, options) {
+        if (origin) {
+            this._focusMonitor.focusVia(this._element, origin, options);
+        }
+        else {
+            this._element.nativeElement.focus(options);
+        }
+    }
+    ngAfterViewInit() {
+        this._focusMonitor.monitor(this._element).subscribe(origin => {
+            if (origin && this.panel.accordion) {
+                this.panel.accordion._handleHeaderFocus(this);
+            }
+        });
+    }
+    ngOnDestroy() {
+        this._parentChangeSubscription.unsubscribe();
+        this._focusMonitor.stopMonitoring(this._element);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteExpansionPanelHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.15", type: CuteExpansionPanelHeader, isStandalone: true, selector: "cute-expansion-panel-header", inputs: { tabIndex: ["tabIndex", "tabIndex", (value) => (value == null ? 0 : numberAttribute(value))], expandedHeight: "expandedHeight", collapsedHeight: "collapsedHeight" }, host: { attributes: { "role": "button" }, listeners: { "click": "_toggle()", "keydown": "_keydown($event)" }, properties: { "class.accordion-header": "!panel.accordion", "class.cute-expanded": "_isExpanded()", "attr.id": "panel._headerId", "attr.tabindex": "-1", "attr.aria-expanded": "_isExpanded()", "attr.aria-disabled": "panel.disabled", "style.height": "_getHeaderHeight()" }, classAttribute: "cute-expansion-panel-header" }, exportAs: ["cuteExpansionPanelHeader"], ngImport: i0, template: "<button class=\"accordion-button\" type=\"button\"\r\n        [class.accordion-button-indicator-before]=\"_getTogglePosition()=='before'\"\r\n        [class.accordion-button-hide-indicator]=\"!_showToggle()\"\r\n        [class.text-body-tertiary]=\"disabled\"\r\n        [class.collapsed]=\"!_isExpanded()\"\r\n        [attr.aria-expanded]=\"_isExpanded()\"\r\n        [attr.aria-controls]=\"panel._contentId\"\r\n        [disabled]=\"disabled || null\"\r\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\r\n>\r\n        <span class=\"cute-expansion-panel-header-content\">\r\n            <ng-content select=\"cute-panel-title\"></ng-content>\r\n            <ng-content select=\"cute-panel-description\"></ng-content>\r\n            <ng-content></ng-content>\r\n        </span>\r\n</button>\r\n", styles: [".cute-expansion-panel-header{display:flex;flex-direction:row;align-items:center}.cute-expansion-panel-header .cute-expansion-panel-header-content{display:flex;flex-direction:row;flex:1;overflow:hidden;align-items:start}.cute-expansion-panel-header .cute-expansion-panel-header-title,.cute-expansion-panel-header .cute-expansion-panel-header-description{display:flex;flex-grow:1;flex-basis:0;margin-right:16px;align-items:center}[dir=rtl] .cute-expansion-panel-header .cute-expansion-panel-header-title,[dir=rtl] .cute-expansion-panel-header .cute-expansion-panel-header-description{margin-right:0;margin-left:16px}.cute-expansion-panel-header .cute-expansion-panel-header-description{flex-grow:2}.cute-expansion-panel-header .accordion-button{align-items:start}.cute-expansion-panel-header .accordion-button:after{margin-top:3px}.cute-expansion-panel-header .accordion-button:disabled:after{filter:opacity(.35)}.cute-expansion-panel-header .accordion-button.accordion-button-hide-indicator:after{visibility:hidden}.cute-expansion-panel-header .accordion-button.accordion-button-indicator-before{flex-direction:row-reverse;gap:16px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteExpansionPanelHeader, decorators: [{
+            type: Component,
+            args: [{ selector: 'cute-expansion-panel-header', exportAs: 'cuteExpansionPanelHeader', inputs: ['tabIndex'], host: {
+                        'class': 'cute-expansion-panel-header',
+                        '[class.accordion-header]': '!panel.accordion',
+                        '[class.cute-expanded]': '_isExpanded()',
+                        // '[class.cute-expansion-toggle-indicator-after]': `_getTogglePosition() === 'after'`,
+                        // '[class.cute-expansion-toggle-indicator-before]': `_getTogglePosition() === 'before'`,
+                        'role': 'button',
+                        '[attr.id]': 'panel._headerId',
+                        // CWT: we apply 'tabindex' rule on the nested '.accordion-button' element
+                        '[attr.tabindex]': '-1', /*'disabled ? -1 : tabIndex',*/
+                        // CWT: we apply 'aria-controls' on the nested '.accordion-button' element
+                        // '[attr.aria-controls]': '_getPanelId()',
+                        '[attr.aria-expanded]': '_isExpanded()',
+                        '[attr.aria-disabled]': 'panel.disabled', //'disabled',
+                        '[style.height]': '_getHeaderHeight()',
+                        '(click)': '_toggle()',
+                        '(keydown)': '_keydown($event)',
+                    }, standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"accordion-button\" type=\"button\"\r\n        [class.accordion-button-indicator-before]=\"_getTogglePosition()=='before'\"\r\n        [class.accordion-button-hide-indicator]=\"!_showToggle()\"\r\n        [class.text-body-tertiary]=\"disabled\"\r\n        [class.collapsed]=\"!_isExpanded()\"\r\n        [attr.aria-expanded]=\"_isExpanded()\"\r\n        [attr.aria-controls]=\"panel._contentId\"\r\n        [disabled]=\"disabled || null\"\r\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\r\n>\r\n        <span class=\"cute-expansion-panel-header-content\">\r\n            <ng-content select=\"cute-panel-title\"></ng-content>\r\n            <ng-content select=\"cute-panel-description\"></ng-content>\r\n            <ng-content></ng-content>\r\n        </span>\r\n</button>\r\n", styles: [".cute-expansion-panel-header{display:flex;flex-direction:row;align-items:center}.cute-expansion-panel-header .cute-expansion-panel-header-content{display:flex;flex-direction:row;flex:1;overflow:hidden;align-items:start}.cute-expansion-panel-header .cute-expansion-panel-header-title,.cute-expansion-panel-header .cute-expansion-panel-header-description{display:flex;flex-grow:1;flex-basis:0;margin-right:16px;align-items:center}[dir=rtl] .cute-expansion-panel-header .cute-expansion-panel-header-title,[dir=rtl] .cute-expansion-panel-header .cute-expansion-panel-header-description{margin-right:0;margin-left:16px}.cute-expansion-panel-header .cute-expansion-panel-header-description{flex-grow:2}.cute-expansion-panel-header .accordion-button{align-items:start}.cute-expansion-panel-header .accordion-button:after{margin-top:3px}.cute-expansion-panel-header .accordion-button:disabled:after{filter:opacity(.35)}.cute-expansion-panel-header .accordion-button.accordion-button-hide-indicator:after{visibility:hidden}.cute-expansion-panel-header .accordion-button.accordion-button-indicator-before{flex-direction:row-reverse;gap:16px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { expandedHeight: [{
+                type: Input
+            }], collapsedHeight: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input,
+                args: [{
+                        transform: (value) => (value == null ? 0 : numberAttribute(value)),
+                    }]
+            }] } });
+/**
+ * Description element of a `<cute-expansion-panel-header>`.
+ */
+class CuteExpansionPanelDescription {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteExpansionPanelDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteExpansionPanelDescription, isStandalone: true, selector: "cute-panel-description", host: { classAttribute: "cute-expansion-panel-header-description text-secondary " }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteExpansionPanelDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'cute-panel-description',
+                    host: {
+                        class: 'cute-expansion-panel-header-description text-secondary ',
+                    },
+                    standalone: true,
+                }]
+        }] });
+/**
+ * Title element of a `<cute-expansion-panel-header>`.
+ */
+class CuteExpansionPanelTitle {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteExpansionPanelTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteExpansionPanelTitle, isStandalone: true, selector: "cute-panel-title", host: { classAttribute: "cute-expansion-panel-header-title" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteExpansionPanelTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'cute-panel-title',
+                    host: {
+                        class: 'cute-expansion-panel-header-title',
+                    },
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+let nextId = -1;
+class CuteAccordion extends CdkAccordion {
+    constructor() {
+        super(...arguments);
+        /** Headers belonging to this accordion. */
+        this._ownHeaders = new QueryList();
+        /** Whether the expansion indicator should be hidden. */
+        this.hideToggle = false;
+        /**
+         * Display mode used for all expansion panels in the accordion. Currently two display
+         * modes exist:
+         *  default - a gutter-like spacing is placed around any expanded panel, placing the expanded
+         *     panel at a different elevation from the rest of the accordion.
+         *  flush - removes some borders and rounded corners to render expansion panels edge-to-edge with their parent container.
+         */
+        this.displayMode = 'default';
+        /** The position of the expansion indicator. */
+        this.togglePosition = 'after';
+    }
+    ngAfterContentInit() {
+        this._headers?.changes
+            .pipe(startWith(this._headers))
+            .subscribe((headers) => {
+            this._ownHeaders.reset(headers.filter(header => header.panel.accordion === this));
+            this._ownHeaders.notifyOnChanges();
+        });
+        this._keyManager = new FocusKeyManager(this._ownHeaders).withWrap().withHomeAndEnd();
+    }
+    /** Handles keyboard events coming in from the panel headers. */
+    _handleHeaderKeydown(event) {
+        this._keyManager?.onKeydown(event);
+    }
+    _handleHeaderFocus(header) {
+        this._keyManager?.updateActiveItem(header);
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._keyManager?.destroy();
+        this._ownHeaders.destroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteAccordion, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.15", type: CuteAccordion, isStandalone: true, selector: "cute-accordion", inputs: { hideToggle: ["hideToggle", "hideToggle", booleanAttribute], displayMode: "displayMode", togglePosition: "togglePosition" }, host: { properties: { "class.accordion-flush": "displayMode == \"flush\"", "id": "id" }, classAttribute: "cute-accordion accordion d-block" }, providers: [{ provide: CUTE_ACCORDION, useExisting: CuteAccordion }], queries: [{ propertyName: "_headers", predicate: CuteExpansionPanelHeader, descendants: true }], exportAs: ["cuteAccordion"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteAccordion, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'cute-accordion',
+                    exportAs: 'cuteAccordion',
+                    host: {
+                        'class': 'cute-accordion accordion d-block',
+                        '[class.accordion-flush]': 'displayMode == "flush"',
+                        '[id]': 'id',
+                    },
+                    providers: [{ provide: CUTE_ACCORDION, useExisting: CuteAccordion }],
+                }]
+        }], propDecorators: { _headers: [{
+                type: ContentChildren,
+                args: [CuteExpansionPanelHeader, { descendants: true }]
+            }], hideToggle: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], displayMode: [{
+                type: Input
+            }], togglePosition: [{
+                type: Input
+            }] } });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+/**
+ * Actions of a `<cute-expansion-panel>`.
+ */
+class CuteExpansionPanelActionRow {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteExpansionPanelActionRow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteExpansionPanelActionRow, isStandalone: true, selector: "cute-action-row", host: { classAttribute: "cute-action-row" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteExpansionPanelActionRow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'cute-action-row',
+                    host: {
+                        class: 'cute-action-row',
+                    },
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ */
+class CuteExpansionModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteExpansionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: CuteExpansionModule, imports: [CommonModule,
+            CuteAccordion,
+            CuteExpansionPanel,
+            CuteExpansionPanelContent,
+            CuteExpansionPanelHeader,
+            CuteExpansionPanelActionRow,
+            CuteExpansionPanelTitle,
+            CuteExpansionPanelDescription], exports: [CuteAccordion,
+            CuteExpansionPanel,
+            CuteExpansionPanelContent,
+            CuteExpansionPanelHeader,
+            CuteExpansionPanelActionRow,
+            CuteExpansionPanelTitle,
+            CuteExpansionPanelDescription] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteExpansionModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteExpansionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule,
+                        CuteAccordion,
+                        CuteExpansionPanel,
+                        CuteExpansionPanelContent,
+                        CuteExpansionPanelHeader,
+                        CuteExpansionPanelActionRow,
+                        CuteExpansionPanelTitle,
+                        CuteExpansionPanelDescription,
+                    ],
+                    exports: [
+                        CuteAccordion,
+                        CuteExpansionPanel,
+                        CuteExpansionPanelContent,
+                        CuteExpansionPanelHeader,
+                        CuteExpansionPanelActionRow,
+                        CuteExpansionPanelTitle,
+                        CuteExpansionPanelDescription,
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CUTE_EXPANSION_PANEL_DEFAULT_OPTIONS, CuteAccordion, CuteExpansionModule, CuteExpansionPanel, CuteExpansionPanelActionRow, CuteExpansionPanelContent, CuteExpansionPanelDescription, CuteExpansionPanelHeader, CuteExpansionPanelTitle };
+//# sourceMappingURL=cute-widgets-base-expansion.mjs.map