npm - @design-factory/angular - Versions diffs - 21.1.0-next.1 → 22.0.0-next.0 - Mend

@design-factory/angular 21.1.0-next.1 → 22.0.0-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (331) hide show

package/fesm2022/design-factory-angular-accordion.mjs ADDED Viewed

@@ -0,0 +1,1153 @@
+import { AgnosWidgetDirective, callWidgetFactory, auBooleanAttribute, UseDirective, useDirectiveForHost, provideDfComponentConfig, injectDfComponentConfig } from '@design-factory/angular/internals';
+import * as i0 from '@angular/core';
+import { output, input, Directive, ViewEncapsulation, Component, contentChild, TemplateRef, inject, afterNextRender, computed, forwardRef } from '@angular/core';
+import { createAccordion } from '@design-factory/core/components/accordion';
+import { NgTemplateOutlet } from '@angular/common';
+import { DfIconButton } from '@design-factory/angular/button';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+const DF_ACCORDION_I18N_DEFAULTS = {
+    ariaToggleButtonLabel: $localize `:@@df.accordion.toggle:Toggle item`
+};
+/**
+ * Input transform that coerces a string or number value into a valid HTML heading level (1–6).
+ *
+ * Accepts both static template attributes (`itemHeadingLevel="3"`) and bound values (`[itemHeadingLevel]="3"`).
+ *
+ * Noninteger or out-of-range values fall back to `2`.
+ */
+function dfHeadingLevelAttribute(value) {
+    const num = +value;
+    return num >= 1 && num <= 6 && Number.isInteger(num) ? num : 2;
+}
+/**
+ * Abstract base class for accordion variants.
+ *
+ * Provides the shared inputs, outputs and methods common to all accordion types.
+ *
+ * @internal
+ */
+class DfAccordionBase extends AgnosWidgetDirective {
+    constructor() {
+        super(callWidgetFactory(createAccordion, {
+            defaultConfig: {
+                ...DF_ACCORDION_I18N_DEFAULTS
+            },
+            events: {
+                onItemShown: (id) => this.itemShown.emit(id),
+                onItemHidden: (id) => this.itemHidden.emit(id)
+            }
+        }));
+        /**
+         * An event fired when an item is shown.
+         *
+         * Event payload is the id of the item.
+         */
+        this.itemShown = output();
+        /**
+         * An event fired when an item is hidden.
+         *
+         * Event payload is the id of the item.
+         */
+        this.itemHidden = output();
+        /**
+         * If `true`, the accordion-item body container will be removed from the DOM when the accordion-item is collapsed. It will be just hidden otherwise.
+         *
+         * @defaultValue `true`
+         */
+        this.itemDestroyOnHide = input(undefined, { ...(ngDevMode ? { debugName: "itemDestroyOnHide" } : /* istanbul ignore next */ {}), transform: auBooleanAttribute });
+        /**
+         * If `true`, accordion-item will be animated.
+         *
+         * @defaultValue `true`
+         */
+        this.animated = input(undefined, { ...(ngDevMode ? { debugName: "animated" } : /* istanbul ignore next */ {}), transform: auBooleanAttribute });
+        /**
+         * The HTML heading level to use for the accordion-item-header.
+         *
+         * Should be an integer between 1 and 6, if an invalid value is provided, it will default to 2.
+         * @defaultValue 2
+         */
+        this.itemHeadingLevel = input.required({ ...(ngDevMode ? { debugName: "itemHeadingLevel" } : /* istanbul ignore next */ {}), transform: dfHeadingLevelAttribute });
+        /**
+         * The size of the accordion.
+         *
+         * @defaultValue `'md'`
+         */
+        this.size = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * Position of the expandable icon on the accordion header.
+         *
+         * @defaultValue `'end'`
+         */
+        this.arrowPosition = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "arrowPosition" }] : /* istanbul ignore next */ []));
+        /**
+         * Addon type to show on the left side of the accordion header.
+         *
+         * Only valid for 'default' and 'interactive' variant.
+         *
+         * @defaultValue `'none'`
+         */
+        this.addon = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "addon" }] : /* istanbul ignore next */ []));
+        /**
+         * In case of subtitle, defines how the subtitle is displayed.
+         *
+         * Only valid for 'default' and 'interactive'.
+         *
+         * On an interactive variant, subtitle is always displayed as inline.
+         *
+         * @defaultValue `'none'`
+         */
+        this.subtitleType = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "subtitleType" }] : /* istanbul ignore next */ []));
+        /**
+         * When an item is visible (a.k.a. expanded), a separator line is shown below the item header.
+         *
+         * @defaultValue `false`
+         */
+        this.separator = input(undefined, { ...(ngDevMode ? { debugName: "separator" } : /* istanbul ignore next */ {}), transform: auBooleanAttribute });
+    }
+    /**
+     *  Toggles an item with the given id.
+     *
+     *  It will toggle an item, even if it is disabled.
+     */
+    async toggle(itemId) {
+        await this.api.toggle(itemId);
+    }
+    /**
+     *  Expands an item with the given id.
+     *
+     *  If closeOthers is true, it will collapse other panels.
+     */
+    async expand(itemId) {
+        await this.api.expand(itemId);
+    }
+    /**
+     *  Expands all items.
+     *
+     *  If closeOthers is true and all items are closed, it will open the first one. Otherwise, it will keep the opened one.
+     */
+    async expandAll() {
+        await this.api.expandAll();
+    }
+    /**
+     * Checks if an item with the given id is expanded.
+     *
+     * If the itemId does not correspond to any item, it returns false.
+     */
+    isExpanded(itemId) {
+        return (this.state
+            .itemWidgets()
+            .find((item) => item.state$.get().id === itemId)
+            ?.state$.get().visible || false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfAccordionBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: DfAccordionBase, isStandalone: true, inputs: { itemDestroyOnHide: { classPropertyName: "itemDestroyOnHide", publicName: "itemDestroyOnHide", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, itemHeadingLevel: { classPropertyName: "itemHeadingLevel", publicName: "itemHeadingLevel", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, arrowPosition: { classPropertyName: "arrowPosition", publicName: "arrowPosition", isSignal: true, isRequired: false, transformFunction: null }, addon: { classPropertyName: "addon", publicName: "addon", isSignal: true, isRequired: false, transformFunction: null }, subtitleType: { classPropertyName: "subtitleType", publicName: "subtitleType", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemShown: "itemShown", itemHidden: "itemHidden" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfAccordionBase, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { itemShown: [{ type: i0.Output, args: ["itemShown"] }], itemHidden: [{ type: i0.Output, args: ["itemHidden"] }], itemDestroyOnHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDestroyOnHide", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], itemHeadingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeadingLevel", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], arrowPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowPosition", required: false }] }], addon: [{ type: i0.Input, args: [{ isSignal: true, alias: "addon", required: false }] }], subtitleType: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitleType", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }] } });
+/**
+ * An accordion is a vertically stacked list of headers that reveal or hide associated sections of content
+ *
+ * Each header and content section is called an accordion-item.
+ *
+ * This component is a container for these items and provides an API to handle them.
+ *
+ * @since 22.0.0
+ */
+class DfAccordion extends DfAccordionBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * If `true`, only one accordion-item at the time can stay open.
+         *
+         * @defaultValue `false`
+         */
+        this.closeOthers = input(undefined, { ...(ngDevMode ? { debugName: "closeOthers" } : /* istanbul ignore next */ {}), transform: auBooleanAttribute });
+    }
+    /**
+     * Collapses an item with the given id.
+     *
+     * Has no effect if the itemId does not correspond to any item.
+     */
+    async collapse(itemId) {
+        await this.api.collapse(itemId);
+    }
+    /**
+     * Collapses all items.
+     */
+    async collapseAll() {
+        await this.api.collapseAll();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfAccordion, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DfAccordion, isStandalone: true, selector: "df-accordion", inputs: { closeOthers: { classPropertyName: "closeOthers", publicName: "closeOthers", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <div [dfUse]="directives.accordionDirective" class="df-accordion {{ state.accordionClassName() }}" role="region">
+      <ng-content />
+    </div>
+  `, isInline: true, styles: [".df-accordion .df-collapse-hide{display:none}.df-accordion .df-collapse-show{display:block}.df-accordion .df-collapse-collapsing{display:block;overflow:hidden;transition:height .35s ease}@media(prefers-reduced-motion:reduce){.df-accordion .df-collapse-collapsing{transition:none}}.df-accordion .df-accordion-item{display:block;color:var(--df-color-neutral-alt-default-foreground);background-color:var(--df-color-neutral-alt-default-background);border:1px solid var(--df-color-inert-neutral-main-border)}.df-accordion .df-accordion-item:first-of-type>.df-accordion-header .df-accordion-button{border-top-left-radius:calc(var(--df-borderRadius-main-medium) - 1px);border-top-right-radius:calc(var(--df-borderRadius-main-medium) - 1px)}.df-accordion .df-accordion-item:not(:first-of-type){border-top:0}.df-accordion .df-accordion-item:last-of-type{border-bottom-right-radius:var(--df-borderRadius-main-medium);border-bottom-left-radius:var(--df-borderRadius-main-medium)}.df-accordion .df-accordion-item:last-of-type>.df-accordion-header .df-accordion-button.df-collapsed{border-bottom-right-radius:calc(var(--df-borderRadius-main-medium) - 1px);border-bottom-left-radius:calc(var(--df-borderRadius-main-medium) - 1px)}.df-accordion .df-accordion-item:last-of-type>.df-accordion-collapse{border-bottom-right-radius:var(--df-borderRadius-main-medium);border-bottom-left-radius:var(--df-borderRadius-main-medium)}.df-accordion .df-accordion-item .df-accordion-header{margin-bottom:0}.df-accordion .df-accordion-item .df-accordion-icon{margin-inline-end:var(--df-spacing-3)}.df-accordion .df-accordion-item .df-accordion-number{margin-inline-end:var(--df-spacing-1);color:var(--df-color-neutral-alt-default-foreground);font-weight:var(--df-typo-weight-regular)}.df-accordion .df-accordion-item :is(.df-accordion-title-block,.df-accordion-title-inline){text-align:start}.df-accordion .df-accordion-item .df-accordion-title-block{margin-bottom:var(--df-spacing-2)}.df-accordion .df-accordion-item .df-accordion-title-inline{flex-grow:1}.df-accordion .df-accordion-item .df-accordion-subtitle-block{text-align:start}.df-accordion .df-accordion-item :is(.df-accordion-subtitle-block,.df-accordion-subtitle-inline){color:var(--df-color-subtext-foreground);font-weight:var(--df-typo-weight-regular)}.df-accordion .df-accordion-item .df-accordion-subtitle-inline{margin-inline-end:var(--df-spacing-5)}.df-accordion .df-accordion-item .df-accordion-button:has(>.df-accordion-toggle-left) .df-accordion-subtitle-inline{margin-inline-end:0}.df-accordion .df-accordion-item .df-accordion-body{padding:var(--df-spacing-5)}.df-accordion .df-accordion-toggle-left{margin-inline-end:var(--df-spacing-3)}.df-accordion.df-accordion-separator .df-accordion-button:not(.df-collapsed){border-bottom-width:1px}.df-accordion .df-accordion-button{padding-block:.75rem;font-size:var(--df-typo-sizing-default)}.df-accordion .df-accordion-button>.df-accordion-chevron{font-size:var(--df-icons-sizing-default)}.df-accordion .df-accordion-body{font-size:var(--df-typo-sizing-default)}.df-accordion .df-accordion-item:first-of-type{border-top-left-radius:var(--df-borderRadius-main-medium);border-top-right-radius:var(--df-borderRadius-main-medium)}.df-accordion .df-accordion-item:first-of-type .df-accordion-button{border-top-left-radius:calc(var(--df-borderRadius-main-medium) - 1px);border-top-right-radius:calc(var(--df-borderRadius-main-medium) - 1px)}.df-accordion .df-accordion-item:last-of-type{border-bottom-left-radius:var(--df-borderRadius-main-medium);border-bottom-right-radius:var(--df-borderRadius-main-medium)}.df-accordion .df-accordion-item:last-of-type>.df-accordion-header .df-accordion-button.collapsed{border-bottom-left-radius:calc(var(--df-borderRadius-main-medium) - 1px);border-bottom-right-radius:calc(var(--df-borderRadius-main-medium) - 1px)}.df-accordion .df-accordion-item:last-of-type>.df-accordion-collapse{border-bottom-left-radius:var(--df-borderRadius-main-medium);border-bottom-right-radius:var(--df-borderRadius-main-medium)}.df-accordion.df-accordion-radio .df-accordion-item:last-of-type>.df-accordion-header.collapsed>.df-accordion-button{border-bottom-left-radius:calc(var(--df-borderRadius-main-medium) - 1px);border-bottom-right-radius:calc(var(--df-borderRadius-main-medium) - 1px)}.df-accordion.df-accordion-sm .df-accordion-button{padding-block:.65625rem;font-size:var(--df-typo-sizing-small)}.df-accordion.df-accordion-sm .df-accordion-button>.df-accordion-chevron{font-size:var(--df-icons-sizing-small)}.df-accordion.df-accordion-sm .df-accordion-body{font-size:var(--df-typo-sizing-small)}.df-accordion.df-accordion-sm .df-accordion-item:first-of-type{border-top-left-radius:var(--df-borderRadius-main-small);border-top-right-radius:var(--df-borderRadius-main-small)}.df-accordion.df-accordion-sm .df-accordion-item:first-of-type .df-accordion-button{border-top-left-radius:calc(var(--df-borderRadius-main-small) - 1px);border-top-right-radius:calc(var(--df-borderRadius-main-small) - 1px)}.df-accordion.df-accordion-sm .df-accordion-item:last-of-type{border-bottom-left-radius:var(--df-borderRadius-main-small);border-bottom-right-radius:var(--df-borderRadius-main-small)}.df-accordion.df-accordion-sm .df-accordion-item:last-of-type>.df-accordion-header .df-accordion-button.collapsed{border-bottom-left-radius:calc(var(--df-borderRadius-main-small) - 1px);border-bottom-right-radius:calc(var(--df-borderRadius-main-small) - 1px)}.df-accordion.df-accordion-sm .df-accordion-item:last-of-type>.df-accordion-collapse{border-bottom-left-radius:var(--df-borderRadius-main-small);border-bottom-right-radius:var(--df-borderRadius-main-small)}.df-accordion.df-accordion-sm.df-accordion-radio .df-accordion-item:last-of-type>.df-accordion-header.collapsed>.df-accordion-button{border-bottom-left-radius:calc(var(--df-borderRadius-main-small) - 1px);border-bottom-right-radius:calc(var(--df-borderRadius-main-small) - 1px)}.df-accordion.df-accordion-lg .df-accordion-button{padding-block:.84375rem;font-size:var(--df-typo-sizing-large)}.df-accordion.df-accordion-lg .df-accordion-button>.df-accordion-chevron{font-size:var(--df-icons-sizing-large)}.df-accordion.df-accordion-lg .df-accordion-body{font-size:var(--df-typo-sizing-large)}.df-accordion.df-accordion-lg .df-accordion-item:first-of-type{border-top-left-radius:var(--df-borderRadius-main-large);border-top-right-radius:var(--df-borderRadius-main-large)}.df-accordion.df-accordion-lg .df-accordion-item:first-of-type .df-accordion-button{border-top-left-radius:calc(var(--df-borderRadius-main-large) - 1px);border-top-right-radius:calc(var(--df-borderRadius-main-large) - 1px)}.df-accordion.df-accordion-lg .df-accordion-item:last-of-type{border-bottom-left-radius:var(--df-borderRadius-main-large);border-bottom-right-radius:var(--df-borderRadius-main-large)}.df-accordion.df-accordion-lg .df-accordion-item:last-of-type>.df-accordion-header .df-accordion-button.collapsed{border-bottom-left-radius:calc(var(--df-borderRadius-main-large) - 1px);border-bottom-right-radius:calc(var(--df-borderRadius-main-large) - 1px)}.df-accordion.df-accordion-lg .df-accordion-item:last-of-type>.df-accordion-collapse{border-bottom-left-radius:var(--df-borderRadius-main-large);border-bottom-right-radius:var(--df-borderRadius-main-large)}.df-accordion.df-accordion-lg.df-accordion-radio .df-accordion-item:last-of-type>.df-accordion-header.collapsed>.df-accordion-button{border-bottom-left-radius:calc(var(--df-borderRadius-main-large) - 1px);border-bottom-right-radius:calc(var(--df-borderRadius-main-large) - 1px)}\n"], dependencies: [{ kind: "directive", type: UseDirective, selector: "[dfUse]", inputs: ["dfUse"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfAccordion, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-accordion', imports: [UseDirective], encapsulation: ViewEncapsulation.None, template: `
+    <div [dfUse]="directives.accordionDirective" class="df-accordion {{ state.accordionClassName() }}" role="region">
+      <ng-content />
+    </div>
+  `, styles: [".df-accordion .df-collapse-hide{display:none}.df-accordion .df-collapse-show{display:block}.df-accordion .df-collapse-collapsing{display:block;overflow:hidden;transition:height .35s ease}@media(prefers-reduced-motion:reduce){.df-accordion .df-collapse-collapsing{transition:none}}.df-accordion .df-accordion-item{display:block;color:var(--df-color-neutral-alt-default-foreground);background-color:var(--df-color-neutral-alt-default-background);border:1px solid var(--df-color-inert-neutral-main-border)}.df-accordion .df-accordion-item:first-of-type>.df-accordion-header .df-accordion-button{border-top-left-radius:calc(var(--df-borderRadius-main-medium) - 1px);border-top-right-radius:calc(var(--df-borderRadius-main-medium) - 1px)}.df-accordion .df-accordion-item:not(:first-of-type){border-top:0}.df-accordion .df-accordion-item:last-of-type{border-bottom-right-radius:var(--df-borderRadius-main-medium);border-bottom-left-radius:var(--df-borderRadius-main-medium)}.df-accordion .df-accordion-item:last-of-type>.df-accordion-header .df-accordion-button.df-collapsed{border-bottom-right-radius:calc(var(--df-borderRadius-main-medium) - 1px);border-bottom-left-radius:calc(var(--df-borderRadius-main-medium) - 1px)}.df-accordion .df-accordion-item:last-of-type>.df-accordion-collapse{border-bottom-right-radius:var(--df-borderRadius-main-medium);border-bottom-left-radius:var(--df-borderRadius-main-medium)}.df-accordion .df-accordion-item .df-accordion-header{margin-bottom:0}.df-accordion .df-accordion-item .df-accordion-icon{margin-inline-end:var(--df-spacing-3)}.df-accordion .df-accordion-item .df-accordion-number{margin-inline-end:var(--df-spacing-1);color:var(--df-color-neutral-alt-default-foreground);font-weight:var(--df-typo-weight-regular)}.df-accordion .df-accordion-item :is(.df-accordion-title-block,.df-accordion-title-inline){text-align:start}.df-accordion .df-accordion-item .df-accordion-title-block{margin-bottom:var(--df-spacing-2)}.df-accordion .df-accordion-item .df-accordion-title-inline{flex-grow:1}.df-accordion .df-accordion-item .df-accordion-subtitle-block{text-align:start}.df-accordion .df-accordion-item :is(.df-accordion-subtitle-block,.df-accordion-subtitle-inline){color:var(--df-color-subtext-foreground);font-weight:var(--df-typo-weight-regular)}.df-accordion .df-accordion-item .df-accordion-subtitle-inline{margin-inline-end:var(--df-spacing-5)}.df-accordion .df-accordion-item .df-accordion-button:has(>.df-accordion-toggle-left) .df-accordion-subtitle-inline{margin-inline-end:0}.df-accordion .df-accordion-item .df-accordion-body{padding:var(--df-spacing-5)}.df-accordion .df-accordion-toggle-left{margin-inline-end:var(--df-spacing-3)}.df-accordion.df-accordion-separator .df-accordion-button:not(.df-collapsed){border-bottom-width:1px}.df-accordion .df-accordion-button{padding-block:.75rem;font-size:var(--df-typo-sizing-default)}.df-accordion .df-accordion-button>.df-accordion-chevron{font-size:var(--df-icons-sizing-default)}.df-accordion .df-accordion-body{font-size:var(--df-typo-sizing-default)}.df-accordion .df-accordion-item:first-of-type{border-top-left-radius:var(--df-borderRadius-main-medium);border-top-right-radius:var(--df-borderRadius-main-medium)}.df-accordion .df-accordion-item:first-of-type .df-accordion-button{border-top-left-radius:calc(var(--df-borderRadius-main-medium) - 1px);border-top-right-radius:calc(var(--df-borderRadius-main-medium) - 1px)}.df-accordion .df-accordion-item:last-of-type{border-bottom-left-radius:var(--df-borderRadius-main-medium);border-bottom-right-radius:var(--df-borderRadius-main-medium)}.df-accordion .df-accordion-item:last-of-type>.df-accordion-header .df-accordion-button.collapsed{border-bottom-left-radius:calc(var(--df-borderRadius-main-medium) - 1px);border-bottom-right-radius:calc(var(--df-borderRadius-main-medium) - 1px)}.df-accordion .df-accordion-item:last-of-type>.df-accordion-collapse{border-bottom-left-radius:var(--df-borderRadius-main-medium);border-bottom-right-radius:var(--df-borderRadius-main-medium)}.df-accordion.df-accordion-radio .df-accordion-item:last-of-type>.df-accordion-header.collapsed>.df-accordion-button{border-bottom-left-radius:calc(var(--df-borderRadius-main-medium) - 1px);border-bottom-right-radius:calc(var(--df-borderRadius-main-medium) - 1px)}.df-accordion.df-accordion-sm .df-accordion-button{padding-block:.65625rem;font-size:var(--df-typo-sizing-small)}.df-accordion.df-accordion-sm .df-accordion-button>.df-accordion-chevron{font-size:var(--df-icons-sizing-small)}.df-accordion.df-accordion-sm .df-accordion-body{font-size:var(--df-typo-sizing-small)}.df-accordion.df-accordion-sm .df-accordion-item:first-of-type{border-top-left-radius:var(--df-borderRadius-main-small);border-top-right-radius:var(--df-borderRadius-main-small)}.df-accordion.df-accordion-sm .df-accordion-item:first-of-type .df-accordion-button{border-top-left-radius:calc(var(--df-borderRadius-main-small) - 1px);border-top-right-radius:calc(var(--df-borderRadius-main-small) - 1px)}.df-accordion.df-accordion-sm .df-accordion-item:last-of-type{border-bottom-left-radius:var(--df-borderRadius-main-small);border-bottom-right-radius:var(--df-borderRadius-main-small)}.df-accordion.df-accordion-sm .df-accordion-item:last-of-type>.df-accordion-header .df-accordion-button.collapsed{border-bottom-left-radius:calc(var(--df-borderRadius-main-small) - 1px);border-bottom-right-radius:calc(var(--df-borderRadius-main-small) - 1px)}.df-accordion.df-accordion-sm .df-accordion-item:last-of-type>.df-accordion-collapse{border-bottom-left-radius:var(--df-borderRadius-main-small);border-bottom-right-radius:var(--df-borderRadius-main-small)}.df-accordion.df-accordion-sm.df-accordion-radio .df-accordion-item:last-of-type>.df-accordion-header.collapsed>.df-accordion-button{border-bottom-left-radius:calc(var(--df-borderRadius-main-small) - 1px);border-bottom-right-radius:calc(var(--df-borderRadius-main-small) - 1px)}.df-accordion.df-accordion-lg .df-accordion-button{padding-block:.84375rem;font-size:var(--df-typo-sizing-large)}.df-accordion.df-accordion-lg .df-accordion-button>.df-accordion-chevron{font-size:var(--df-icons-sizing-large)}.df-accordion.df-accordion-lg .df-accordion-body{font-size:var(--df-typo-sizing-large)}.df-accordion.df-accordion-lg .df-accordion-item:first-of-type{border-top-left-radius:var(--df-borderRadius-main-large);border-top-right-radius:var(--df-borderRadius-main-large)}.df-accordion.df-accordion-lg .df-accordion-item:first-of-type .df-accordion-button{border-top-left-radius:calc(var(--df-borderRadius-main-large) - 1px);border-top-right-radius:calc(var(--df-borderRadius-main-large) - 1px)}.df-accordion.df-accordion-lg .df-accordion-item:last-of-type{border-bottom-left-radius:var(--df-borderRadius-main-large);border-bottom-right-radius:var(--df-borderRadius-main-large)}.df-accordion.df-accordion-lg .df-accordion-item:last-of-type>.df-accordion-header .df-accordion-button.collapsed{border-bottom-left-radius:calc(var(--df-borderRadius-main-large) - 1px);border-bottom-right-radius:calc(var(--df-borderRadius-main-large) - 1px)}.df-accordion.df-accordion-lg .df-accordion-item:last-of-type>.df-accordion-collapse{border-bottom-left-radius:var(--df-borderRadius-main-large);border-bottom-right-radius:var(--df-borderRadius-main-large)}.df-accordion.df-accordion-lg.df-accordion-radio .df-accordion-item:last-of-type>.df-accordion-header.collapsed>.df-accordion-button{border-bottom-left-radius:calc(var(--df-borderRadius-main-large) - 1px);border-bottom-right-radius:calc(var(--df-borderRadius-main-large) - 1px)}\n"] }]
+        }], propDecorators: { closeOthers: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOthers", required: false }] }] } });
+/**
+ * A directive to define a template containing the body content of the accordion item.
+ * @since 22.0.0
+ * */
+class DfAccordionItemBody {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfAccordionItemBody, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: DfAccordionItemBody, isStandalone: true, selector: "ng-template[dfAccordionItemBody]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfAccordionItemBody, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[dfAccordionItemBody]'
+                }]
+        }] });
+/**
+ * A directive to define a template containing the title of the accordion item.
+ * @since 22.0.0
+ * */
+class DfAccordionItemTitle {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfAccordionItemTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: DfAccordionItemTitle, isStandalone: true, selector: "ng-template[dfAccordionItemTitle]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfAccordionItemTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[dfAccordionItemTitle]'
+                }]
+        }] });
+/**
+ *
+ * An accordion item is a group of a header and a collapsible content section.
+ *
+ * It is used within an accordion component to display and hide content.
+ *
+ * This is the basic template for an accordion item. See {@link DfAccordionItemInteractive} for a template with interactive elements in the header.
+ *
+ * As its content, it accepts two directives:
+ * - `dfAccordionItemTitle`: to define the title of the accordion item.
+ * - `dfAccordionItemBody`: to define the body content of the accordion item.
+ * @since 22.0.0
+ */
+class DfAccordionItem extends AgnosWidgetDirective {
+    constructor() {
+        super(callWidgetFactory((arg) => this.accordion['api'].registerItem(arg), {
+            events: {
+                onVisibleChange: (visible) => this.visibleChange.emit(visible),
+                onHidden: () => this.hidden.emit(),
+                onShown: () => this.shown.emit()
+            },
+            afterInit: (widget) => {
+                useDirectiveForHost(widget.directives.itemDirective);
+            }
+        }));
+        /**
+         * The id of the accordion-item. It can be used for controlling the accordion-item via the accordion api.
+         *
+         * @defaultValue `'dfId-[number]'`
+         */
+        this.id = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * If `true`, the accordion-item body container will be removed from the DOM when the accordion-item is collapsed. It will be just hidden otherwise.
+         *
+         * @defaultValue `true`
+         */
+        this.destroyOnHide = input(undefined, { ...(ngDevMode ? { debugName: "destroyOnHide" } : /* istanbul ignore next */ {}), transform: auBooleanAttribute });
+        /**
+         * If `true`, the accordion-item will be disabled.
+         *
+         * It will not react to user's clicks, but still will be possible to toggle programmatically.
+         *
+         * @defaultValue `false`
+         */
+        this.disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: auBooleanAttribute });
+        /**
+         * If `true`, the accordion-item will be visible (expanded). Otherwise, it will be hidden (collapsed).
+         *
+         * @defaultValue `false`
+         */
+        this.visible = input(undefined, { ...(ngDevMode ? { debugName: "visible" } : /* istanbul ignore next */ {}), transform: auBooleanAttribute });
+        /**
+         * An event fired when an item is shown.
+         */
+        this.shown = output();
+        /**
+         * An event fired when an item is hidden.
+         */
+        this.hidden = output();
+        /**
+         * An event fired when the `visible` value changes.
+         *
+         * Event payload is the new value of visible.
+         */
+        this.visibleChange = output();
+        /**
+         * Optional input only valid if the accordion's subtitleType is 'inline' or 'block' to set custom subtitle
+         *
+         * @defaultValue `undefined`
+         * */
+        this.subtitle = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "subtitle" }] : /* istanbul ignore next */ []));
+        /**
+         * Optional input only valid for Icon variant to set custom icon class
+         *
+         * @defaultValue `undefined`
+         * */
+        this.iconClass = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "iconClass" }] : /* istanbul ignore next */ []));
+        /**
+         * Optional input only valid for addon number variant to set the custom number
+         *
+         * @defaultValue `undefined`
+         * */
+        this.number = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "number" }] : /* istanbul ignore next */ []));
+        this.title = contentChild(DfAccordionItemTitle, { ...(ngDevMode ? { debugName: "title" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.body = contentChild(DfAccordionItemBody, { ...(ngDevMode ? { debugName: "body" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.accordion = inject(DfAccordion);
+        afterNextRender(() => this.api.initDone());
+    }
+    /**
+     *  Toggles the item.
+     *
+     *  It will toggle the item, even if it is disabled.
+     */
+    async toggle() {
+        await this.api.toggle();
+    }
+    /**
+     *  Expands the item.
+     *
+     *  If closeOthers is true, it will collapse other panels.
+     */
+    async expand() {
+        await this.api.expand();
+    }
+    /**
+     * Collapses the item.
+     * */
+    async collapse() {
+        await this.api.collapse();
+    }
+    /**
+     * Checks if the item is expanded.
+     *
+     * */
+    isExpanded() {
+        return this.state.visible();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DfAccordionItem, isStandalone: true, selector: "df-accordion-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, destroyOnHide: { classPropertyName: "destroyOnHide", publicName: "destroyOnHide", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null }, number: { classPropertyName: "number", publicName: "number", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { shown: "shown", hidden: "hidden", visibleChange: "visibleChange" }, host: { properties: { "id": "[state.id()]" }, classAttribute: "df-accordion-item" }, queries: [{ propertyName: "title", first: true, predicate: DfAccordionItemTitle, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "body", first: true, predicate: DfAccordionItemBody, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <div
+      [attr.aria-level]="accordion['state'].itemHeadingLevel()"
+      [dfUse]="directives.headerDirective"
+      class="df-accordion-header"
+      role="heading"
+    >
+      <button [dfUse]="directives.buttonDirective" class="df-accordion-button" type="button">
+        @if (accordion['state'].arrowPosition() === 'start') {
+          <span
+            class="df-accordion-chevron df-accordion-toggle-left fal fa-icon fa-chevron-down"
+            aria-hidden="true"
+          ></span>
+        }
+        <div class="df-accordion-button-content">
+          @let subtitleType = accordion['state'].subtitleType();
+          @if (subtitleType === 'block' && subtitle()) {
+            <ng-template [ngTemplateOutlet]="addon" />
+            <div class="df-accordion-title-block">
+              <ng-template [ngTemplateOutlet]="title()" />
+            </div>
+            <div class="df-accordion-subtitle-block">{{ subtitle() }}</div>
+          } @else if (subtitleType === 'inline' && subtitle()) {
+            <ng-template [ngTemplateOutlet]="addon" />
+            <div class="df-accordion-title-inline">
+              <ng-template [ngTemplateOutlet]="title()" />
+            </div>
+            <div class="df-accordion-subtitle-inline">{{ subtitle() }}</div>
+          } @else {
+            <ng-template [ngTemplateOutlet]="addon" />
+            <ng-template [ngTemplateOutlet]="title()" />
+          }
+        </div>
+        @if (accordion['state'].arrowPosition() !== 'start') {
+          <span class="df-accordion-chevron fa-icon fal fa-chevron-down" aria-hidden="true"></span>
+        }
+      </button>
+    </div>
+    @if (state.shouldBeInDOM()) {
+      <div [dfUse]="directives.bodyContainerDirective" class="df-accordion-collapse">
+        <div class="df-accordion-body" [dfUse]="directives.bodyDirective">
+          <ng-template [ngTemplateOutlet]="body()" />
+        </div>
+      </div>
+    }
+    <ng-template #addon>
+      @if (accordion['state'].addon() === 'icon' && iconClass()) {
+        <span class="{{ iconClass() }} df-accordion-icon"></span>
+      } @else if (accordion['state'].addon() === 'number' && number()) {
+        <span class="df-accordion-number">{{ number() }}.</span>
+      }
+    </ng-template>
+  `, isInline: true, styles: [".df-accordion .df-accordion-item .df-accordion-button{--df-inner-box-shadow-color: var(--df-color-inert-neutral-main-pageBackground);display:flex;align-items:center;width:100%;margin:0;padding:var(--df-spacing-4) var(--df-spacing-5);font-weight:var(--df-typo-weight-bold);color:var(--df-color-neutral-alt-default-foreground);background-color:var(--df-color-neutral-alt-default-background);border:0 solid var(--df-color-inert-neutral-main-border)}.df-accordion .df-accordion-item .df-accordion-button>.df-accordion-chevron{color:var(--df-color-primary-alt-default-foreground);transition:transform .2s ease-in-out}@media(prefers-reduced-motion:reduce){.df-accordion .df-accordion-item .df-accordion-button>.df-accordion-chevron{transition:none}}.df-accordion .df-accordion-item .df-accordion-button:not(.df-collapsed)>.df-accordion-chevron{transform:rotate(-180deg)}.df-accordion .df-accordion-item .df-accordion-button .df-accordion-button-content{display:flex;align-items:center;flex-grow:1;min-width:0}.df-accordion .df-accordion-item .df-accordion-button .df-accordion-button-content:has(>.df-accordion-subtitle-block){display:grid;grid-template-columns:auto 1fr;align-items:center}.df-accordion .df-accordion-item .df-accordion-button .df-accordion-button-content:has(>.df-accordion-subtitle-block)>.df-accordion-title-block{grid-column:2}.df-accordion .df-accordion-item .df-accordion-button .df-accordion-button-content:has(>.df-accordion-subtitle-block)>.df-accordion-subtitle-block{grid-column:2}.df-accordion .df-accordion-item .df-accordion-button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--df-inner-box-shadow-color),inset 0 0 0 4px var(--df-color-neutral-alt-default-foreground)}.df-accordion .df-accordion-item .df-accordion-button:hover{cursor:pointer;--df-inner-box-shadow-color: var(--df-color-primary-alt-hovered-background);background-color:var(--df-color-primary-alt-hovered-background);color:var(--df-color-neutral-alt-hovered-foreground)}.df-accordion .df-accordion-item .df-accordion-button:hover :is(.df-accordion-subtitle-block,.df-accordion-subtitle-inline){color:var(--df-color-neutral-alt-hovered-foreground)}.df-accordion .df-accordion-item .df-accordion-button:hover>.df-accordion-chevron{color:var(--df-color-primary-alt-hovered-foreground)}.df-accordion .df-accordion-item .df-accordion-button:active>.df-accordion-chevron{color:var(--df-color-primary-alt-pressed-foreground)}.df-accordion .df-accordion-item .df-accordion-button:active :is(.df-accordion-subtitle-block,.df-accordion-subtitle-inline){color:var(--df-color-neutral-alt-pressed-foreground)}.df-accordion .df-accordion-item .df-accordion-button:disabled{cursor:not-allowed;color:var(--df-color-disabled-main-foreground);background-color:var(--df-color-disabled-main-background)}.df-accordion .df-accordion-item .df-accordion-button:disabled :is(.df-accordion-subtitle-block,.df-accordion-subtitle-inline,.df-accordion-number){color:var(--df-color-disabled-main-foreground)}.df-accordion .df-accordion-item .df-accordion-button:disabled>.df-accordion-chevron{color:var(--df-color-disabled-main-foreground)}\n"], dependencies: [{ kind: "directive", type: UseDirective, selector: "[dfUse]", inputs: ["dfUse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfAccordionItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-accordion-item', host: {
+                        class: 'df-accordion-item',
+                        '[id]': '[state.id()]'
+                    }, imports: [UseDirective, NgTemplateOutlet], encapsulation: ViewEncapsulation.None, template: `
+    <div
+      [attr.aria-level]="accordion['state'].itemHeadingLevel()"
+      [dfUse]="directives.headerDirective"
+      class="df-accordion-header"
+      role="heading"
+    >
+      <button [dfUse]="directives.buttonDirective" class="df-accordion-button" type="button">
+        @if (accordion['state'].arrowPosition() === 'start') {
+          <span
+            class="df-accordion-chevron df-accordion-toggle-left fal fa-icon fa-chevron-down"
+            aria-hidden="true"
+          ></span>
+        }
+        <div class="df-accordion-button-content">
+          @let subtitleType = accordion['state'].subtitleType();
+          @if (subtitleType === 'block' && subtitle()) {
+            <ng-template [ngTemplateOutlet]="addon" />
+            <div class="df-accordion-title-block">
+              <ng-template [ngTemplateOutlet]="title()" />
+            </div>
+            <div class="df-accordion-subtitle-block">{{ subtitle() }}</div>
+          } @else if (subtitleType === 'inline' && subtitle()) {
+            <ng-template [ngTemplateOutlet]="addon" />
+            <div class="df-accordion-title-inline">
+              <ng-template [ngTemplateOutlet]="title()" />
+            </div>
+            <div class="df-accordion-subtitle-inline">{{ subtitle() }}</div>
+          } @else {
+            <ng-template [ngTemplateOutlet]="addon" />
+            <ng-template [ngTemplateOutlet]="title()" />
+          }
+        </div>
+        @if (accordion['state'].arrowPosition() !== 'start') {
+          <span class="df-accordion-chevron fa-icon fal fa-chevron-down" aria-hidden="true"></span>
+        }
+      </button>
+    </div>
+    @if (state.shouldBeInDOM()) {
+      <div [dfUse]="directives.bodyContainerDirective" class="df-accordion-collapse">
+        <div class="df-accordion-body" [dfUse]="directives.bodyDirective">
+          <ng-template [ngTemplateOutlet]="body()" />
+        </div>
+      </div>
+    }
+    <ng-template #addon>
+      @if (accordion['state'].addon() === 'icon' && iconClass()) {
+        <span class="{{ iconClass() }} df-accordion-icon"></span>
+      } @else if (accordion['state'].addon() === 'number' && number()) {
+        <span class="df-accordion-number">{{ number() }}.</span>
+      }
+    </ng-template>
+  `, styles: [".df-accordion .df-accordion-item .df-accordion-button{--df-inner-box-shadow-color: var(--df-color-inert-neutral-main-pageBackground);display:flex;align-items:center;width:100%;margin:0;padding:var(--df-spacing-4) var(--df-spacing-5);font-weight:var(--df-typo-weight-bold);color:var(--df-color-neutral-alt-default-foreground);background-color:var(--df-color-neutral-alt-default-background);border:0 solid var(--df-color-inert-neutral-main-border)}.df-accordion .df-accordion-item .df-accordion-button>.df-accordion-chevron{color:var(--df-color-primary-alt-default-foreground);transition:transform .2s ease-in-out}@media(prefers-reduced-motion:reduce){.df-accordion .df-accordion-item .df-accordion-button>.df-accordion-chevron{transition:none}}.df-accordion .df-accordion-item .df-accordion-button:not(.df-collapsed)>.df-accordion-chevron{transform:rotate(-180deg)}.df-accordion .df-accordion-item .df-accordion-button .df-accordion-button-content{display:flex;align-items:center;flex-grow:1;min-width:0}.df-accordion .df-accordion-item .df-accordion-button .df-accordion-button-content:has(>.df-accordion-subtitle-block){display:grid;grid-template-columns:auto 1fr;align-items:center}.df-accordion .df-accordion-item .df-accordion-button .df-accordion-button-content:has(>.df-accordion-subtitle-block)>.df-accordion-title-block{grid-column:2}.df-accordion .df-accordion-item .df-accordion-button .df-accordion-button-content:has(>.df-accordion-subtitle-block)>.df-accordion-subtitle-block{grid-column:2}.df-accordion .df-accordion-item .df-accordion-button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--df-inner-box-shadow-color),inset 0 0 0 4px var(--df-color-neutral-alt-default-foreground)}.df-accordion .df-accordion-item .df-accordion-button:hover{cursor:pointer;--df-inner-box-shadow-color: var(--df-color-primary-alt-hovered-background);background-color:var(--df-color-primary-alt-hovered-background);color:var(--df-color-neutral-alt-hovered-foreground)}.df-accordion .df-accordion-item .df-accordion-button:hover :is(.df-accordion-subtitle-block,.df-accordion-subtitle-inline){color:var(--df-color-neutral-alt-hovered-foreground)}.df-accordion .df-accordion-item .df-accordion-button:hover>.df-accordion-chevron{color:var(--df-color-primary-alt-hovered-foreground)}.df-accordion .df-accordion-item .df-accordion-button:active>.df-accordion-chevron{color:var(--df-color-primary-alt-pressed-foreground)}.df-accordion .df-accordion-item .df-accordion-button:active :is(.df-accordion-subtitle-block,.df-accordion-subtitle-inline){color:var(--df-color-neutral-alt-pressed-foreground)}.df-accordion .df-accordion-item .df-accordion-button:disabled{cursor:not-allowed;color:var(--df-color-disabled-main-foreground);background-color:var(--df-color-disabled-main-background)}.df-accordion .df-accordion-item .df-accordion-button:disabled :is(.df-accordion-subtitle-block,.df-accordion-subtitle-inline,.df-accordion-number){color:var(--df-color-disabled-main-foreground)}.df-accordion .df-accordion-item .df-accordion-button:disabled>.df-accordion-chevron{color:var(--df-color-disabled-main-foreground)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], destroyOnHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "destroyOnHide", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], shown: [{ type: i0.Output, args: ["shown"] }], hidden: [{ type: i0.Output, args: ["hidden"] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], iconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconClass", required: false }] }], number: [{ type: i0.Input, args: [{ isSignal: true, alias: "number", required: false }] }], title: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfAccordionItemTitle), { ...{ read: TemplateRef }, isSignal: true }] }], body: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfAccordionItemBody), { ...{ read: TemplateRef }, isSignal: true }] }] } });
+/**
+ * A directive to define a template containing an interactive element inside the accordion item header.
+ * @since 22.0.0
+ * */
+class DfAccordionItemInteractiveSection {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfAccordionItemInteractiveSection, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: DfAccordionItemInteractiveSection, isStandalone: true, selector: "ng-template[dfAccordionItemInteractiveSection]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfAccordionItemInteractiveSection, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[dfAccordionItemInteractiveSection]'
+                }]
+        }] });
+/**
+ *
+ * An accordion item is a group of a header and a collapsible content section.
+ *
+ * It is used within an accordion component to display and hide content.
+ *
+ * This template is for the case when it is needed an interactive section inside the header.
+ *
+ * As its content, it accepts three directives:
+ * - `dfAccordionItemTitle`: to define the title of the accordion item.
+ * - `DfAccordionItemInteractiveSection`: to define a template containing an interactive element.
+ * - `dfAccordionItemBody`: to define the body content of the accordion item.
+ * @since 22.0.0
+ */
+class DfAccordionItemInteractive extends AgnosWidgetDirective {
+    constructor() {
+        super(callWidgetFactory((arg) => this.accordion['api'].registerItem(arg), {
+            events: {
+                onVisibleChange: (visible) => this.visibleChange.emit(visible),
+                onHidden: () => this.hidden.emit(),
+                onShown: () => this.shown.emit()
+            },
+            afterInit: (widget) => {
+                useDirectiveForHost(widget.directives.itemDirective);
+            }
+        }));
+        /**
+         * The id of the accordion-item. It can be used for controlling the accordion-item via the accordion api.
+         *
+         * @defaultValue `'dfId-[number]'`
+         */
+        this.id = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * If `true`, the accordion-item body container will be removed from the DOM when the accordion-item is collapsed. It will be just hidden otherwise.
+         *
+         * @defaultValue `true`
+         */
+        this.destroyOnHide = input(undefined, { ...(ngDevMode ? { debugName: "destroyOnHide" } : /* istanbul ignore next */ {}), transform: auBooleanAttribute });
+        /**
+         * If `true`, the accordion-item will be disabled.
+         *
+         * It will not react to user's clicks, but still will be possible to toggle programmatically.
+         *
+         * @defaultValue `false`
+         */
+        this.disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: auBooleanAttribute });
+        /**
+         * If `true`, the accordion-item will be visible (expanded). Otherwise, it will be hidden (collapsed).
+         *
+         * @defaultValue `false`
+         */
+        this.visible = input(undefined, { ...(ngDevMode ? { debugName: "visible" } : /* istanbul ignore next */ {}), transform: auBooleanAttribute });
+        /**
+         * An event fired when an item is shown.
+         */
+        this.shown = output();
+        /**
+         * An event fired when an item is hidden.
+         */
+        this.hidden = output();
+        /**
+         * An event fired when the `visible` value changes.
+         *
+         * Event payload is the new value of visible.
+         */
+        this.visibleChange = output();
+        /**
+         * Optional input only valid if the accordion's subtitleType is 'inline' or 'block' to set custom subtitle
+         * */
+        this.subtitle = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "subtitle" }] : /* istanbul ignore next */ []));
+        /**
+         * Optional input only valid for Icon variant to set custom icon class
+         * */
+        this.iconClass = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "iconClass" }] : /* istanbul ignore next */ []));
+        /**
+         * Optional input only valid for addon number variant to set custom the number
+         * */
+        this.number = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "number" }] : /* istanbul ignore next */ []));
+        this.title = contentChild(DfAccordionItemTitle, { ...(ngDevMode ? { debugName: "title" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.interactiveSection = contentChild(DfAccordionItemInteractiveSection, { ...(ngDevMode ? { debugName: "interactiveSection" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.body = contentChild(DfAccordionItemBody, { ...(ngDevMode ? { debugName: "body" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.accordion = inject(DfAccordion);
+        afterNextRender(() => {
+            this.api.initDone();
+        });
+    }
+    /**
+     *  Toggles the item
+     *
+     *  It will toggle the item, even if it is disabled.
+     */
+    async toggle() {
+        await this.api.toggle();
+    }
+    /**
+     *  Expands an item.
+     *
+     *  If closeOthers is true, it will collapse other panels.
+     */
+    async expand() {
+        await this.api.expand();
+    }
+    /**
+     * Collapses the item.
+     * */
+    async collapse() {
+        await this.api.collapse();
+    }
+    /**
+     * Checks if the item is expanded.
+     *
+     * */
+    isExpanded() {
+        return this.state.visible();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfAccordionItemInteractive, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DfAccordionItemInteractive, isStandalone: true, selector: "df-accordion-item-interactive", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, destroyOnHide: { classPropertyName: "destroyOnHide", publicName: "destroyOnHide", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null }, number: { classPropertyName: "number", publicName: "number", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { shown: "shown", hidden: "hidden", visibleChange: "visibleChange" }, host: { properties: { "id": "[state.id()]" }, classAttribute: "df-accordion-item" }, queries: [{ propertyName: "title", first: true, predicate: DfAccordionItemTitle, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "interactiveSection", first: true, predicate: DfAccordionItemInteractiveSection, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "body", first: true, predicate: DfAccordionItemBody, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <div
+      class="df-accordion-header df-accordion-interactive-header"
+      [class.df-disabled]="state.disabled()"
+      [attr.aria-disabled]="state.disabled() ? 'true' : null"
+    >
+      @if (accordion['state'].arrowPosition() === 'start') {
+        <ng-template [ngTemplateOutlet]="toggleBtn" />
+      }
+      <div class="df-accordion-interactive-content">
+        <div class="df-accordion-interactive-inner">
+          <ng-template [ngTemplateOutlet]="addon" />
+          <div role="heading" [attr.aria-level]="accordion['state'].itemHeadingLevel()">
+            <ng-template [ngTemplateOutlet]="title()" />
+          </div>
+          @if (accordion['state'].subtitleType() === 'block' && subtitle()) {
+            <div class="df-accordion-subtitle-block">{{ subtitle() }}</div>
+          }
+        </div>
+        <ng-template [ngTemplateOutlet]="interactiveSection()" />
+      </div>
+      @if (accordion['state'].arrowPosition() === 'end') {
+        <ng-template [ngTemplateOutlet]="toggleBtn" />
+      }
+    </div>
+    @if (state.shouldBeInDOM()) {
+      <div [dfUse]="directives.bodyContainerDirective" class="df-accordion-collapse">
+        <div class="df-accordion-body" [dfUse]="directives.bodyDirective">
+          <ng-template [ngTemplateOutlet]="body()" />
+        </div>
+      </div>
+    }
+    <ng-template #addon>
+      @if (accordion['state'].addon() === 'icon' && iconClass()) {
+        <span class="{{ iconClass() }} df-accordion-icon"></span>
+      } @else if (accordion['state'].addon() === 'number' && number()) {
+        <span class="df-accordion-number">{{ number() }}.</span>
+      }
+    </ng-template>
+    <ng-template #toggleBtn>
+      <button
+        [disabled]="state.disabled()"
+        [dfUse]="directives.toggleDirective"
+        dfIconButton
+        appearance="text"
+        transparent
+        [attr.aria-label]="accordion['state'].ariaToggleButtonLabel()"
+        class="df-accordion-toggle fal fa-chevron-down {{
+          accordion['state'].arrowPosition() === 'start' ? ' df-accordion-toggle-left' : ' df-accordion-toggle-right'
+        }}"
+      ></button>
+    </ng-template>
+  `, isInline: true, styles: [".df-accordion .df-accordion-interactive-header{display:flex;align-items:center;padding:var(--df-spacing-3) var(--df-spacing-5)}.df-accordion .df-accordion-interactive-header.df-disabled{cursor:not-allowed;color:var(--df-color-disabled-main-foreground);background-color:var(--df-color-disabled-main-background)}.df-accordion .df-accordion-interactive-content{display:flex;flex-grow:1;align-items:center;justify-content:space-between}.df-accordion .df-accordion-interactive-inner{font-weight:var(--df-typo-weight-bold);display:flex;align-items:center}.df-accordion .df-accordion-interactive-inner:has(>.df-accordion-subtitle-block){display:grid;grid-template-columns:auto 1fr;align-items:center}.df-accordion .df-accordion-interactive-inner:has(>.df-accordion-subtitle-block)>.df-accordion-title-block,.df-accordion .df-accordion-interactive-inner:has(>.df-accordion-subtitle-block)>.df-accordion-subtitle-block{grid-column:2}.df-accordion .df-accordion-toggle-right{margin-inline-start:var(--df-spacing-3)}.df-accordion .df-accordion-toggle:before{transition:transform .35s ease-in-out}@media(prefers-reduced-motion:reduce){.df-accordion .df-accordion-toggle:before{transition:none}}.df-accordion .df-accordion-toggle:not(.df-collapsed):before{transform:rotate(-180deg)}.df-accordion .form-check.form-switch{display:flex;align-items:center;min-height:calc(var(--df-typo-sizing-default) * 1.5);margin-bottom:0;padding-inline-start:0}.df-accordion .form-switch .form-check-input[type=checkbox]{flex-shrink:0;width:3em;height:1.5em;margin:0;vertical-align:top;appearance:none;background-color:var(--df-color-neutral-alt-default-background);background-image:none;border:.09375rem solid var(--df-color-toggle-border);border-radius:.75em;-webkit-print-color-adjust:exact;print-color-adjust:exact;cursor:pointer;position:relative;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.df-accordion .form-switch .form-check-input[type=checkbox]:after{content:\"\";position:absolute;inset:0;background-color:var(--df-color-toggle-background);-webkit-mask-image:url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='black'/></svg>\");mask-image:url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='black'/></svg>\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:left center;mask-position:left center;transition:mask-position .15s ease-in-out}.df-accordion .form-switch .form-check-input[type=checkbox]:checked{background-color:var(--df-color-primary-main-default-background);border-color:var(--df-color-primary-main-default-border)}.df-accordion .form-switch .form-check-input[type=checkbox]:checked:focus-visible{box-shadow:0 0 0 2px var(--df-body-bg),0 0 0 4px var(--df-color-primary-main-default-border)}.df-accordion .form-switch .form-check-input[type=checkbox]:checked:after{-webkit-mask-position:right center;mask-position:right center;background-color:var(--df-color-primary-main-default-foreground)}.df-accordion .form-switch .form-check-input[type=checkbox]:focus{border-color:var(--df-color-input-border);outline:0;box-shadow:none}.df-accordion .form-switch .form-check-input[type=checkbox]:focus-visible{outline:none;box-shadow:0 0 0 2px var(--df-body-bg),0 0 0 4px var(--df-color-toggle-border)}.df-accordion .form-switch .form-check-input[type=checkbox]:focus-visible:not(:checked,:disabled,.is-invalid,.ng-invalid.ng-touched){--df-box-shadow-color: var(--df-color-toggle-border)}.df-accordion .form-switch .form-check-input[type=checkbox]:active{filter:none}.df-accordion .form-switch .form-check-input[type=checkbox]:disabled{pointer-events:none;cursor:not-allowed;border-color:var(--df-color-disabled-main-border)}.df-accordion .form-switch .form-check-input[type=checkbox]:disabled:checked{background-color:var(--df-color-disabled-alt-background)}.df-accordion .form-switch .form-check-input[type=checkbox]:disabled:checked:after{background-color:var(--df-color-disabled-main-background)}.df-accordion .form-switch .form-check-input[type=checkbox]:disabled:not(:checked){background-color:var(--df-color-disabled-main-background)}.df-accordion .form-switch .form-check-input[type=checkbox]:disabled:not(:checked):after{background-color:var(--df-color-disabled-alt-background)}.df-accordion .form-switch .form-check-input[type=checkbox]:disabled~.form-check-label{color:var(--df-color-inert-neutral-main-foreground);cursor:default}.df-accordion .form-switch .df-switch-success:checked:not(:disabled){background-color:var(--df-color-success-main-default-background);border-color:var(--df-color-success-main-default-border)}.df-accordion .form-switch .df-switch-success.form-check-input:focus-visible{box-shadow:0 0 0 2px var(--df-body-bg),0 0 0 4px var(--df-color-success-main-default-border)}.df-accordion .form-switch .df-switch-primary:checked:not(:disabled){background-color:var(--df-color-primary-main-default-background);border-color:var(--df-color-primary-main-default-border)}.df-accordion .form-switch .df-switch-primary.form-check-input:focus-visible{box-shadow:0 0 0 2px red,0 0 0 4px green}.df-accordion .form-switch .form-check-label{color:var(--df-color-neutral-alt-default-foreground);cursor:pointer;padding-inline-start:var(--df-spacing-3);font-weight:var(--df-typo-weight-medium)}.df-accordion .form-switch .df-form-switch-name{font-weight:var(--df-typo-weight-medium);padding-inline-start:0}.df-accordion .form-switch .df-form-switch-name.df-form-switch-name-disabled{color:var(--df-color-inert-neutral-main-foreground);cursor:not-allowed}.df-accordion .form-switch .df-form-switch-name .df-form-switch-container{display:flex;align-items:center;margin-top:var(--df-spacing-3)}\n"], dependencies: [{ kind: "directive", type: UseDirective, selector: "[dfUse]", inputs: ["dfUse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DfIconButton, selector: "button[dfIconButton], a[dfIconButton]" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfAccordionItemInteractive, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-accordion-item-interactive', host: {
+                        class: 'df-accordion-item',
+                        '[id]': '[state.id()]'
+                    }, imports: [UseDirective, NgTemplateOutlet, DfIconButton], encapsulation: ViewEncapsulation.None, template: `
+    <div
+      class="df-accordion-header df-accordion-interactive-header"
+      [class.df-disabled]="state.disabled()"
+      [attr.aria-disabled]="state.disabled() ? 'true' : null"
+    >
+      @if (accordion['state'].arrowPosition() === 'start') {
+        <ng-template [ngTemplateOutlet]="toggleBtn" />
+      }
+      <div class="df-accordion-interactive-content">
+        <div class="df-accordion-interactive-inner">
+          <ng-template [ngTemplateOutlet]="addon" />
+          <div role="heading" [attr.aria-level]="accordion['state'].itemHeadingLevel()">
+            <ng-template [ngTemplateOutlet]="title()" />
+          </div>
+          @if (accordion['state'].subtitleType() === 'block' && subtitle()) {
+            <div class="df-accordion-subtitle-block">{{ subtitle() }}</div>
+          }
+        </div>
+        <ng-template [ngTemplateOutlet]="interactiveSection()" />
+      </div>
+      @if (accordion['state'].arrowPosition() === 'end') {
+        <ng-template [ngTemplateOutlet]="toggleBtn" />
+      }
+    </div>
+    @if (state.shouldBeInDOM()) {
+      <div [dfUse]="directives.bodyContainerDirective" class="df-accordion-collapse">
+        <div class="df-accordion-body" [dfUse]="directives.bodyDirective">
+          <ng-template [ngTemplateOutlet]="body()" />
+        </div>
+      </div>
+    }
+    <ng-template #addon>
+      @if (accordion['state'].addon() === 'icon' && iconClass()) {
+        <span class="{{ iconClass() }} df-accordion-icon"></span>
+      } @else if (accordion['state'].addon() === 'number' && number()) {
+        <span class="df-accordion-number">{{ number() }}.</span>
+      }
+    </ng-template>
+    <ng-template #toggleBtn>
+      <button
+        [disabled]="state.disabled()"
+        [dfUse]="directives.toggleDirective"
+        dfIconButton
+        appearance="text"
+        transparent
+        [attr.aria-label]="accordion['state'].ariaToggleButtonLabel()"
+        class="df-accordion-toggle fal fa-chevron-down {{
+          accordion['state'].arrowPosition() === 'start' ? ' df-accordion-toggle-left' : ' df-accordion-toggle-right'
+        }}"
+      ></button>
+    </ng-template>
+  `, styles: [".df-accordion .df-accordion-interactive-header{display:flex;align-items:center;padding:var(--df-spacing-3) var(--df-spacing-5)}.df-accordion .df-accordion-interactive-header.df-disabled{cursor:not-allowed;color:var(--df-color-disabled-main-foreground);background-color:var(--df-color-disabled-main-background)}.df-accordion .df-accordion-interactive-content{display:flex;flex-grow:1;align-items:center;justify-content:space-between}.df-accordion .df-accordion-interactive-inner{font-weight:var(--df-typo-weight-bold);display:flex;align-items:center}.df-accordion .df-accordion-interactive-inner:has(>.df-accordion-subtitle-block){display:grid;grid-template-columns:auto 1fr;align-items:center}.df-accordion .df-accordion-interactive-inner:has(>.df-accordion-subtitle-block)>.df-accordion-title-block,.df-accordion .df-accordion-interactive-inner:has(>.df-accordion-subtitle-block)>.df-accordion-subtitle-block{grid-column:2}.df-accordion .df-accordion-toggle-right{margin-inline-start:var(--df-spacing-3)}.df-accordion .df-accordion-toggle:before{transition:transform .35s ease-in-out}@media(prefers-reduced-motion:reduce){.df-accordion .df-accordion-toggle:before{transition:none}}.df-accordion .df-accordion-toggle:not(.df-collapsed):before{transform:rotate(-180deg)}.df-accordion .form-check.form-switch{display:flex;align-items:center;min-height:calc(var(--df-typo-sizing-default) * 1.5);margin-bottom:0;padding-inline-start:0}.df-accordion .form-switch .form-check-input[type=checkbox]{flex-shrink:0;width:3em;height:1.5em;margin:0;vertical-align:top;appearance:none;background-color:var(--df-color-neutral-alt-default-background);background-image:none;border:.09375rem solid var(--df-color-toggle-border);border-radius:.75em;-webkit-print-color-adjust:exact;print-color-adjust:exact;cursor:pointer;position:relative;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.df-accordion .form-switch .form-check-input[type=checkbox]:after{content:\"\";position:absolute;inset:0;background-color:var(--df-color-toggle-background);-webkit-mask-image:url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='black'/></svg>\");mask-image:url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='black'/></svg>\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:left center;mask-position:left center;transition:mask-position .15s ease-in-out}.df-accordion .form-switch .form-check-input[type=checkbox]:checked{background-color:var(--df-color-primary-main-default-background);border-color:var(--df-color-primary-main-default-border)}.df-accordion .form-switch .form-check-input[type=checkbox]:checked:focus-visible{box-shadow:0 0 0 2px var(--df-body-bg),0 0 0 4px var(--df-color-primary-main-default-border)}.df-accordion .form-switch .form-check-input[type=checkbox]:checked:after{-webkit-mask-position:right center;mask-position:right center;background-color:var(--df-color-primary-main-default-foreground)}.df-accordion .form-switch .form-check-input[type=checkbox]:focus{border-color:var(--df-color-input-border);outline:0;box-shadow:none}.df-accordion .form-switch .form-check-input[type=checkbox]:focus-visible{outline:none;box-shadow:0 0 0 2px var(--df-body-bg),0 0 0 4px var(--df-color-toggle-border)}.df-accordion .form-switch .form-check-input[type=checkbox]:focus-visible:not(:checked,:disabled,.is-invalid,.ng-invalid.ng-touched){--df-box-shadow-color: var(--df-color-toggle-border)}.df-accordion .form-switch .form-check-input[type=checkbox]:active{filter:none}.df-accordion .form-switch .form-check-input[type=checkbox]:disabled{pointer-events:none;cursor:not-allowed;border-color:var(--df-color-disabled-main-border)}.df-accordion .form-switch .form-check-input[type=checkbox]:disabled:checked{background-color:var(--df-color-disabled-alt-background)}.df-accordion .form-switch .form-check-input[type=checkbox]:disabled:checked:after{background-color:var(--df-color-disabled-main-background)}.df-accordion .form-switch .form-check-input[type=checkbox]:disabled:not(:checked){background-color:var(--df-color-disabled-main-background)}.df-accordion .form-switch .form-check-input[type=checkbox]:disabled:not(:checked):after{background-color:var(--df-color-disabled-alt-background)}.df-accordion .form-switch .form-check-input[type=checkbox]:disabled~.form-check-label{color:var(--df-color-inert-neutral-main-foreground);cursor:default}.df-accordion .form-switch .df-switch-success:checked:not(:disabled){background-color:var(--df-color-success-main-default-background);border-color:var(--df-color-success-main-default-border)}.df-accordion .form-switch .df-switch-success.form-check-input:focus-visible{box-shadow:0 0 0 2px var(--df-body-bg),0 0 0 4px var(--df-color-success-main-default-border)}.df-accordion .form-switch .df-switch-primary:checked:not(:disabled){background-color:var(--df-color-primary-main-default-background);border-color:var(--df-color-primary-main-default-border)}.df-accordion .form-switch .df-switch-primary.form-check-input:focus-visible{box-shadow:0 0 0 2px red,0 0 0 4px green}.df-accordion .form-switch .form-check-label{color:var(--df-color-neutral-alt-default-foreground);cursor:pointer;padding-inline-start:var(--df-spacing-3);font-weight:var(--df-typo-weight-medium)}.df-accordion .form-switch .df-form-switch-name{font-weight:var(--df-typo-weight-medium);padding-inline-start:0}.df-accordion .form-switch .df-form-switch-name.df-form-switch-name-disabled{color:var(--df-color-inert-neutral-main-foreground);cursor:not-allowed}.df-accordion .form-switch .df-form-switch-name .df-form-switch-container{display:flex;align-items:center;margin-top:var(--df-spacing-3)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], destroyOnHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "destroyOnHide", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], shown: [{ type: i0.Output, args: ["shown"] }], hidden: [{ type: i0.Output, args: ["hidden"] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], iconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconClass", required: false }] }], number: [{ type: i0.Input, args: [{ isSignal: true, alias: "number", required: false }] }], title: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfAccordionItemTitle), { ...{ read: TemplateRef }, isSignal: true }] }], interactiveSection: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfAccordionItemInteractiveSection), { ...{
+                            read: TemplateRef
+                        }, isSignal: true }] }], body: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfAccordionItemBody), { ...{ read: TemplateRef }, isSignal: true }] }] } });
+/**
+ * A selectable accordion is a vertically stacked list of headers with built-in radio inputs,
+ * following the radio-group pattern. Expanding an item selects it.
+ *
+ * Each header and content section is a selectable accordion-item.
+ *
+ * This component is a container for these items and provides an API to handle them.
+ * It always enforces `closeOthers` behavior (only one item open at a time)
+ * and uses `role="radiogroup"` for accessibility.
+ *
+ * @since 22.0.0
+ */
+class DfAccordionSelectable extends DfAccordionBase {
+    constructor() {
+        super();
+        /**
+         * The id of the accordion. Used to derive the radio group name for selectable items.
+         */
+        this.id = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * Accessible label for the radiogroup.
+         * Use when there is no visible heading that can be referenced by `ariaLabelledBy`.
+         */
+        this.ariaLabel = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * ID of an element that labels this radiogroup.
+         * Preferred over `ariaLabel` when a visible heading exists.
+         */
+        this.ariaLabelledBy = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
+        this._agnosWidget.patch({ selectable: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfAccordionSelectable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DfAccordionSelectable, isStandalone: true, selector: "df-accordion-selectable", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <div
+      [dfUse]="directives.accordionDirective"
+      class="df-accordion df-accordion-selectable {{ state.accordionClassName() }}"
+      role="radiogroup"
+      [attr.aria-label]="ariaLabel() || null"
+      [attr.aria-labelledby]="ariaLabelledBy() || null"
+    >
+      <ng-content />
+    </div>
+  `, isInline: true, styles: [".df-accordion .df-collapse-hide{display:none}.df-accordion .df-collapse-show{display:block}.df-accordion .df-collapse-collapsing{display:block;overflow:hidden;transition:height .35s ease}@media(prefers-reduced-motion:reduce){.df-accordion .df-collapse-collapsing{transition:none}}.df-accordion .df-accordion-item{display:block;color:var(--df-color-neutral-alt-default-foreground);background-color:var(--df-color-neutral-alt-default-background);border:1px solid var(--df-color-inert-neutral-main-border)}.df-accordion .df-accordion-item:first-of-type>.df-accordion-header .df-accordion-button{border-top-left-radius:calc(var(--df-borderRadius-main-medium) - 1px);border-top-right-radius:calc(var(--df-borderRadius-main-medium) - 1px)}.df-accordion .df-accordion-item:not(:first-of-type){border-top:0}.df-accordion .df-accordion-item:last-of-type{border-bottom-right-radius:var(--df-borderRadius-main-medium);border-bottom-left-radius:var(--df-borderRadius-main-medium)}.df-accordion .df-accordion-item:last-of-type>.df-accordion-header .df-accordion-button.df-collapsed{border-bottom-right-radius:calc(var(--df-borderRadius-main-medium) - 1px);border-bottom-left-radius:calc(var(--df-borderRadius-main-medium) - 1px)}.df-accordion .df-accordion-item:last-of-type>.df-accordion-collapse{border-bottom-right-radius:var(--df-borderRadius-main-medium);border-bottom-left-radius:var(--df-borderRadius-main-medium)}.df-accordion .df-accordion-item .df-accordion-header{margin-bottom:0}.df-accordion .df-accordion-item .df-accordion-icon{margin-inline-end:var(--df-spacing-3)}.df-accordion .df-accordion-item .df-accordion-number{margin-inline-end:var(--df-spacing-1);color:var(--df-color-neutral-alt-default-foreground);font-weight:var(--df-typo-weight-regular)}.df-accordion .df-accordion-item :is(.df-accordion-title-block,.df-accordion-title-inline){text-align:start}.df-accordion .df-accordion-item .df-accordion-title-block{margin-bottom:var(--df-spacing-2)}.df-accordion .df-accordion-item .df-accordion-title-inline{flex-grow:1}.df-accordion .df-accordion-item .df-accordion-subtitle-block{text-align:start}.df-accordion .df-accordion-item :is(.df-accordion-subtitle-block,.df-accordion-subtitle-inline){color:var(--df-color-subtext-foreground);font-weight:var(--df-typo-weight-regular)}.df-accordion .df-accordion-item .df-accordion-subtitle-inline{margin-inline-end:var(--df-spacing-5)}.df-accordion .df-accordion-item .df-accordion-button:has(>.df-accordion-toggle-left) .df-accordion-subtitle-inline{margin-inline-end:0}.df-accordion .df-accordion-item .df-accordion-body{padding:var(--df-spacing-5)}.df-accordion .df-accordion-toggle-left{margin-inline-end:var(--df-spacing-3)}.df-accordion.df-accordion-separator .df-accordion-button:not(.df-collapsed){border-bottom-width:1px}.df-accordion .df-accordion-button{padding-block:.75rem;font-size:var(--df-typo-sizing-default)}.df-accordion .df-accordion-button>.df-accordion-chevron{font-size:var(--df-icons-sizing-default)}.df-accordion .df-accordion-body{font-size:var(--df-typo-sizing-default)}.df-accordion .df-accordion-item:first-of-type{border-top-left-radius:var(--df-borderRadius-main-medium);border-top-right-radius:var(--df-borderRadius-main-medium)}.df-accordion .df-accordion-item:first-of-type .df-accordion-button{border-top-left-radius:calc(var(--df-borderRadius-main-medium) - 1px);border-top-right-radius:calc(var(--df-borderRadius-main-medium) - 1px)}.df-accordion .df-accordion-item:last-of-type{border-bottom-left-radius:var(--df-borderRadius-main-medium);border-bottom-right-radius:var(--df-borderRadius-main-medium)}.df-accordion .df-accordion-item:last-of-type>.df-accordion-header .df-accordion-button.collapsed{border-bottom-left-radius:calc(var(--df-borderRadius-main-medium) - 1px);border-bottom-right-radius:calc(var(--df-borderRadius-main-medium) - 1px)}.df-accordion .df-accordion-item:last-of-type>.df-accordion-collapse{border-bottom-left-radius:var(--df-borderRadius-main-medium);border-bottom-right-radius:var(--df-borderRadius-main-medium)}.df-accordion.df-accordion-radio .df-accordion-item:last-of-type>.df-accordion-header.collapsed>.df-accordion-button{border-bottom-left-radius:calc(var(--df-borderRadius-main-medium) - 1px);border-bottom-right-radius:calc(var(--df-borderRadius-main-medium) - 1px)}.df-accordion.df-accordion-sm .df-accordion-button{padding-block:.65625rem;font-size:var(--df-typo-sizing-small)}.df-accordion.df-accordion-sm .df-accordion-button>.df-accordion-chevron{font-size:var(--df-icons-sizing-small)}.df-accordion.df-accordion-sm .df-accordion-body{font-size:var(--df-typo-sizing-small)}.df-accordion.df-accordion-sm .df-accordion-item:first-of-type{border-top-left-radius:var(--df-borderRadius-main-small);border-top-right-radius:var(--df-borderRadius-main-small)}.df-accordion.df-accordion-sm .df-accordion-item:first-of-type .df-accordion-button{border-top-left-radius:calc(var(--df-borderRadius-main-small) - 1px);border-top-right-radius:calc(var(--df-borderRadius-main-small) - 1px)}.df-accordion.df-accordion-sm .df-accordion-item:last-of-type{border-bottom-left-radius:var(--df-borderRadius-main-small);border-bottom-right-radius:var(--df-borderRadius-main-small)}.df-accordion.df-accordion-sm .df-accordion-item:last-of-type>.df-accordion-header .df-accordion-button.collapsed{border-bottom-left-radius:calc(var(--df-borderRadius-main-small) - 1px);border-bottom-right-radius:calc(var(--df-borderRadius-main-small) - 1px)}.df-accordion.df-accordion-sm .df-accordion-item:last-of-type>.df-accordion-collapse{border-bottom-left-radius:var(--df-borderRadius-main-small);border-bottom-right-radius:var(--df-borderRadius-main-small)}.df-accordion.df-accordion-sm.df-accordion-radio .df-accordion-item:last-of-type>.df-accordion-header.collapsed>.df-accordion-button{border-bottom-left-radius:calc(var(--df-borderRadius-main-small) - 1px);border-bottom-right-radius:calc(var(--df-borderRadius-main-small) - 1px)}.df-accordion.df-accordion-lg .df-accordion-button{padding-block:.84375rem;font-size:var(--df-typo-sizing-large)}.df-accordion.df-accordion-lg .df-accordion-button>.df-accordion-chevron{font-size:var(--df-icons-sizing-large)}.df-accordion.df-accordion-lg .df-accordion-body{font-size:var(--df-typo-sizing-large)}.df-accordion.df-accordion-lg .df-accordion-item:first-of-type{border-top-left-radius:var(--df-borderRadius-main-large);border-top-right-radius:var(--df-borderRadius-main-large)}.df-accordion.df-accordion-lg .df-accordion-item:first-of-type .df-accordion-button{border-top-left-radius:calc(var(--df-borderRadius-main-large) - 1px);border-top-right-radius:calc(var(--df-borderRadius-main-large) - 1px)}.df-accordion.df-accordion-lg .df-accordion-item:last-of-type{border-bottom-left-radius:var(--df-borderRadius-main-large);border-bottom-right-radius:var(--df-borderRadius-main-large)}.df-accordion.df-accordion-lg .df-accordion-item:last-of-type>.df-accordion-header .df-accordion-button.collapsed{border-bottom-left-radius:calc(var(--df-borderRadius-main-large) - 1px);border-bottom-right-radius:calc(var(--df-borderRadius-main-large) - 1px)}.df-accordion.df-accordion-lg .df-accordion-item:last-of-type>.df-accordion-collapse{border-bottom-left-radius:var(--df-borderRadius-main-large);border-bottom-right-radius:var(--df-borderRadius-main-large)}.df-accordion.df-accordion-lg.df-accordion-radio .df-accordion-item:last-of-type>.df-accordion-header.collapsed>.df-accordion-button{border-bottom-left-radius:calc(var(--df-borderRadius-main-large) - 1px);border-bottom-right-radius:calc(var(--df-borderRadius-main-large) - 1px)}\n"], dependencies: [{ kind: "directive", type: UseDirective, selector: "[dfUse]", inputs: ["dfUse"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfAccordionSelectable, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-accordion-selectable', imports: [UseDirective], encapsulation: ViewEncapsulation.None, template: `
+    <div
+      [dfUse]="directives.accordionDirective"
+      class="df-accordion df-accordion-selectable {{ state.accordionClassName() }}"
+      role="radiogroup"
+      [attr.aria-label]="ariaLabel() || null"
+      [attr.aria-labelledby]="ariaLabelledBy() || null"
+    >
+      <ng-content />
+    </div>
+  `, styles: [".df-accordion .df-collapse-hide{display:none}.df-accordion .df-collapse-show{display:block}.df-accordion .df-collapse-collapsing{display:block;overflow:hidden;transition:height .35s ease}@media(prefers-reduced-motion:reduce){.df-accordion .df-collapse-collapsing{transition:none}}.df-accordion .df-accordion-item{display:block;color:var(--df-color-neutral-alt-default-foreground);background-color:var(--df-color-neutral-alt-default-background);border:1px solid var(--df-color-inert-neutral-main-border)}.df-accordion .df-accordion-item:first-of-type>.df-accordion-header .df-accordion-button{border-top-left-radius:calc(var(--df-borderRadius-main-medium) - 1px);border-top-right-radius:calc(var(--df-borderRadius-main-medium) - 1px)}.df-accordion .df-accordion-item:not(:first-of-type){border-top:0}.df-accordion .df-accordion-item:last-of-type{border-bottom-right-radius:var(--df-borderRadius-main-medium);border-bottom-left-radius:var(--df-borderRadius-main-medium)}.df-accordion .df-accordion-item:last-of-type>.df-accordion-header .df-accordion-button.df-collapsed{border-bottom-right-radius:calc(var(--df-borderRadius-main-medium) - 1px);border-bottom-left-radius:calc(var(--df-borderRadius-main-medium) - 1px)}.df-accordion .df-accordion-item:last-of-type>.df-accordion-collapse{border-bottom-right-radius:var(--df-borderRadius-main-medium);border-bottom-left-radius:var(--df-borderRadius-main-medium)}.df-accordion .df-accordion-item .df-accordion-header{margin-bottom:0}.df-accordion .df-accordion-item .df-accordion-icon{margin-inline-end:var(--df-spacing-3)}.df-accordion .df-accordion-item .df-accordion-number{margin-inline-end:var(--df-spacing-1);color:var(--df-color-neutral-alt-default-foreground);font-weight:var(--df-typo-weight-regular)}.df-accordion .df-accordion-item :is(.df-accordion-title-block,.df-accordion-title-inline){text-align:start}.df-accordion .df-accordion-item .df-accordion-title-block{margin-bottom:var(--df-spacing-2)}.df-accordion .df-accordion-item .df-accordion-title-inline{flex-grow:1}.df-accordion .df-accordion-item .df-accordion-subtitle-block{text-align:start}.df-accordion .df-accordion-item :is(.df-accordion-subtitle-block,.df-accordion-subtitle-inline){color:var(--df-color-subtext-foreground);font-weight:var(--df-typo-weight-regular)}.df-accordion .df-accordion-item .df-accordion-subtitle-inline{margin-inline-end:var(--df-spacing-5)}.df-accordion .df-accordion-item .df-accordion-button:has(>.df-accordion-toggle-left) .df-accordion-subtitle-inline{margin-inline-end:0}.df-accordion .df-accordion-item .df-accordion-body{padding:var(--df-spacing-5)}.df-accordion .df-accordion-toggle-left{margin-inline-end:var(--df-spacing-3)}.df-accordion.df-accordion-separator .df-accordion-button:not(.df-collapsed){border-bottom-width:1px}.df-accordion .df-accordion-button{padding-block:.75rem;font-size:var(--df-typo-sizing-default)}.df-accordion .df-accordion-button>.df-accordion-chevron{font-size:var(--df-icons-sizing-default)}.df-accordion .df-accordion-body{font-size:var(--df-typo-sizing-default)}.df-accordion .df-accordion-item:first-of-type{border-top-left-radius:var(--df-borderRadius-main-medium);border-top-right-radius:var(--df-borderRadius-main-medium)}.df-accordion .df-accordion-item:first-of-type .df-accordion-button{border-top-left-radius:calc(var(--df-borderRadius-main-medium) - 1px);border-top-right-radius:calc(var(--df-borderRadius-main-medium) - 1px)}.df-accordion .df-accordion-item:last-of-type{border-bottom-left-radius:var(--df-borderRadius-main-medium);border-bottom-right-radius:var(--df-borderRadius-main-medium)}.df-accordion .df-accordion-item:last-of-type>.df-accordion-header .df-accordion-button.collapsed{border-bottom-left-radius:calc(var(--df-borderRadius-main-medium) - 1px);border-bottom-right-radius:calc(var(--df-borderRadius-main-medium) - 1px)}.df-accordion .df-accordion-item:last-of-type>.df-accordion-collapse{border-bottom-left-radius:var(--df-borderRadius-main-medium);border-bottom-right-radius:var(--df-borderRadius-main-medium)}.df-accordion.df-accordion-radio .df-accordion-item:last-of-type>.df-accordion-header.collapsed>.df-accordion-button{border-bottom-left-radius:calc(var(--df-borderRadius-main-medium) - 1px);border-bottom-right-radius:calc(var(--df-borderRadius-main-medium) - 1px)}.df-accordion.df-accordion-sm .df-accordion-button{padding-block:.65625rem;font-size:var(--df-typo-sizing-small)}.df-accordion.df-accordion-sm .df-accordion-button>.df-accordion-chevron{font-size:var(--df-icons-sizing-small)}.df-accordion.df-accordion-sm .df-accordion-body{font-size:var(--df-typo-sizing-small)}.df-accordion.df-accordion-sm .df-accordion-item:first-of-type{border-top-left-radius:var(--df-borderRadius-main-small);border-top-right-radius:var(--df-borderRadius-main-small)}.df-accordion.df-accordion-sm .df-accordion-item:first-of-type .df-accordion-button{border-top-left-radius:calc(var(--df-borderRadius-main-small) - 1px);border-top-right-radius:calc(var(--df-borderRadius-main-small) - 1px)}.df-accordion.df-accordion-sm .df-accordion-item:last-of-type{border-bottom-left-radius:var(--df-borderRadius-main-small);border-bottom-right-radius:var(--df-borderRadius-main-small)}.df-accordion.df-accordion-sm .df-accordion-item:last-of-type>.df-accordion-header .df-accordion-button.collapsed{border-bottom-left-radius:calc(var(--df-borderRadius-main-small) - 1px);border-bottom-right-radius:calc(var(--df-borderRadius-main-small) - 1px)}.df-accordion.df-accordion-sm .df-accordion-item:last-of-type>.df-accordion-collapse{border-bottom-left-radius:var(--df-borderRadius-main-small);border-bottom-right-radius:var(--df-borderRadius-main-small)}.df-accordion.df-accordion-sm.df-accordion-radio .df-accordion-item:last-of-type>.df-accordion-header.collapsed>.df-accordion-button{border-bottom-left-radius:calc(var(--df-borderRadius-main-small) - 1px);border-bottom-right-radius:calc(var(--df-borderRadius-main-small) - 1px)}.df-accordion.df-accordion-lg .df-accordion-button{padding-block:.84375rem;font-size:var(--df-typo-sizing-large)}.df-accordion.df-accordion-lg .df-accordion-button>.df-accordion-chevron{font-size:var(--df-icons-sizing-large)}.df-accordion.df-accordion-lg .df-accordion-body{font-size:var(--df-typo-sizing-large)}.df-accordion.df-accordion-lg .df-accordion-item:first-of-type{border-top-left-radius:var(--df-borderRadius-main-large);border-top-right-radius:var(--df-borderRadius-main-large)}.df-accordion.df-accordion-lg .df-accordion-item:first-of-type .df-accordion-button{border-top-left-radius:calc(var(--df-borderRadius-main-large) - 1px);border-top-right-radius:calc(var(--df-borderRadius-main-large) - 1px)}.df-accordion.df-accordion-lg .df-accordion-item:last-of-type{border-bottom-left-radius:var(--df-borderRadius-main-large);border-bottom-right-radius:var(--df-borderRadius-main-large)}.df-accordion.df-accordion-lg .df-accordion-item:last-of-type>.df-accordion-header .df-accordion-button.collapsed{border-bottom-left-radius:calc(var(--df-borderRadius-main-large) - 1px);border-bottom-right-radius:calc(var(--df-borderRadius-main-large) - 1px)}.df-accordion.df-accordion-lg .df-accordion-item:last-of-type>.df-accordion-collapse{border-bottom-left-radius:var(--df-borderRadius-main-large);border-bottom-right-radius:var(--df-borderRadius-main-large)}.df-accordion.df-accordion-lg.df-accordion-radio .df-accordion-item:last-of-type>.df-accordion-header.collapsed>.df-accordion-button{border-bottom-left-radius:calc(var(--df-borderRadius-main-large) - 1px);border-bottom-right-radius:calc(var(--df-borderRadius-main-large) - 1px)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }] } });
+/**
+ * A directive to define a template containing a subsection element inside the selectable accordion item header.
+ * @since 22.0.0
+ */
+class DfAccordionItemSelectableSubsection {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfAccordionItemSelectableSubsection, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: DfAccordionItemSelectableSubsection, isStandalone: true, selector: "ng-template[dfAccordionItemSelectableSubsection]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfAccordionItemSelectableSubsection, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[dfAccordionItemSelectableSubsection]'
+                }]
+        }] });
+/**
+ * An accordion item with a built-in radio input in the header.
+ * Implements {@link ControlValueAccessor} so it can be used with `formControlName` or `ngModel`.
+ * All selectable items sharing the same form control act as a radio group:
+ * expanding an item selects its {@link DfAccordionItemSelectable#value | value}.
+ *
+ * As its content, it accepts two directives:
+ * - `dfAccordionItemTitle`: to define the title of the accordion item.
+ * - `dfAccordionItemBody`: to define the body content of the accordion item.
+ *
+ * Optionally:
+ * - `dfAccordionItemSelectableSubsection`: to define a subsection element inside the header.
+ * @since 22.0.0
+ */
+class DfAccordionItemSelectable extends AgnosWidgetDirective {
+    constructor() {
+        super(callWidgetFactory((arg) => this.accordion['api'].registerItem(arg), {
+            events: {
+                onVisibleChange: (visible) => {
+                    this.visibleChange.emit(visible);
+                    if (visible) {
+                        this.onChange(this.value());
+                        this.onTouched();
+                    }
+                },
+                onHidden: () => this.hidden.emit(),
+                onShown: () => this.shown.emit()
+            },
+            afterInit: (widget) => {
+                useDirectiveForHost(widget.directives.itemDirective);
+            }
+        }));
+        /**
+         * The id of the accordion-item. It can be used for controlling the accordion-item via the accordion api.
+         *
+         * @defaultValue `'dfId-[number]'`
+         */
+        this.id = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * If `true`, the accordion-item body container will be removed from the DOM when the accordion-item is collapsed. It will be just hidden otherwise.
+         *
+         * @defaultValue `true`
+         */
+        this.destroyOnHide = input(undefined, { ...(ngDevMode ? { debugName: "destroyOnHide" } : /* istanbul ignore next */ {}), transform: auBooleanAttribute });
+        /**
+         * If `true`, the accordion-item will be visible (expanded). Otherwise, it will be hidden (collapsed).
+         *
+         * @defaultValue `false`
+         */
+        this.visible = input(undefined, { ...(ngDevMode ? { debugName: "visible" } : /* istanbul ignore next */ {}), transform: auBooleanAttribute });
+        /**
+         * The value this item represents in the radio group.
+         * When the item is expanded, this value is emitted to the form control.
+         */
+        this.value = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+        /**
+         * An event fired when an item is shown.
+         */
+        this.shown = output();
+        /**
+         * An event fired when an item is hidden.
+         */
+        this.hidden = output();
+        /**
+         * An event fired when the `visible` value changes.
+         *
+         * Event payload is the new value of visible.
+         */
+        this.visibleChange = output();
+        /**
+         * Optional input only valid if the accordion's subtitleType is 'inline' or 'block' to set custom subtitle.
+         */
+        this.subtitle = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "subtitle" }] : /* istanbul ignore next */ []));
+        /**
+         * Optional input only valid for Icon variant to set custom icon class.
+         */
+        this.iconClass = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "iconClass" }] : /* istanbul ignore next */ []));
+        /**
+         * Optional input only valid for addon number variant to set the number.
+         */
+        this.number = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "number" }] : /* istanbul ignore next */ []));
+        /**
+         * In case of subtitle, defines how the subtitle is displayed.
+         * Only valid for 'default' and 'card'.
+         * On a card variant, subtitle is always displayed as inline.
+         */
+        this.subtitleType = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "subtitleType" }] : /* istanbul ignore next */ []));
+        this.title = contentChild(DfAccordionItemTitle, { ...(ngDevMode ? { debugName: "title" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.body = contentChild(DfAccordionItemBody, { ...(ngDevMode ? { debugName: "body" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.subsection = contentChild(DfAccordionItemSelectableSubsection, { ...(ngDevMode ? { debugName: "subsection" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.accordion = inject(DfAccordionSelectable);
+        this.subtitleComputed = computed(() => {
+            return this.subtitleType() ?? this.accordion['state'].subtitleType();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "subtitleComputed" }] : /* istanbul ignore next */ []));
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        afterNextRender(() => {
+            this.api.initDone();
+        });
+    }
+    /** @internal */
+    writeValue(val) {
+        if (val === this.value()) {
+            this._agnosWidget.patch({ visible: true });
+        }
+    }
+    /** @internal */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /** @internal */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /** @internal */
+    setDisabledState(isDisabled) {
+        this._agnosWidget.patch({ disabled: isDisabled });
+    }
+    /**
+     * Toggles the item.
+     *
+     * It will toggle the item, even if it is disabled.
+     */
+    async toggle() {
+        await this.api.toggle();
+    }
+    /**
+     * Expands the item.
+     *
+     * Since the parent accordion has closeOthers, it will collapse other panels.
+     */
+    async expand() {
+        await this.api.expand();
+    }
+    /**
+     * Collapses the item.
+     */
+    async collapse() {
+        await this.api.collapse();
+    }
+    /**
+     * Checks if the item is expanded.
+     */
+    isExpanded() {
+        return this.state.visible();
+    }
+    /** Expand the item when the label is clicked (expand-only, no toggle). */
+    onLabelClick(event) {
+        event.preventDefault();
+        if (!this.state.disabled()) {
+            void this.api.expand();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfAccordionItemSelectable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DfAccordionItemSelectable, isStandalone: true, selector: "df-accordion-item-selectable", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, destroyOnHide: { classPropertyName: "destroyOnHide", publicName: "destroyOnHide", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null }, number: { classPropertyName: "number", publicName: "number", isSignal: true, isRequired: false, transformFunction: null }, subtitleType: { classPropertyName: "subtitleType", publicName: "subtitleType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { shown: "shown", hidden: "hidden", visibleChange: "visibleChange" }, host: { properties: { "id": "[state.id()]" }, classAttribute: "df-accordion-item" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DfAccordionItemSelectable),
+                multi: true
+            }
+        ], queries: [{ propertyName: "title", first: true, predicate: DfAccordionItemTitle, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "body", first: true, predicate: DfAccordionItemBody, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "subsection", first: true, predicate: DfAccordionItemSelectableSubsection, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <div
+      [attr.aria-level]="accordion['state'].itemHeadingLevel()"
+      [dfUse]="directives.headerDirective"
+      class="df-accordion-header"
+      role="heading"
+    >
+      <label
+        class="df-accordion-button"
+        [class.df-collapsed]="!state.visible()"
+        [class.df-disabled]="state.disabled()"
+        [for]="state.id() + '-input'"
+        [id]="state.id() + '-toggle'"
+      >
+        <div class="df-accordion-title-container">
+          <input
+            type="radio"
+            (click)="onLabelClick($event)"
+            [name]="accordion['state'].id() + '-radio'"
+            [value]="value()"
+            [checked]="state.visible()"
+            [attr.disabled]="state.disabled() || null"
+            [id]="state.id() + '-input'"
+          />
+          @let computedSubtitle = subtitleComputed();
+          @if (computedSubtitle === 'block' && subtitle()) {
+            <div class="df-accordion-title-block-wrapper">
+              <ng-template [ngTemplateOutlet]="addon" />
+              <div class="df-accordion-title-block">
+                <ng-template [ngTemplateOutlet]="title()" />
+              </div>
+              <div class="df-accordion-subtitle-block">{{ subtitle() }}</div>
+            </div>
+          } @else if (computedSubtitle === 'inline' && subtitle()) {
+            <ng-template [ngTemplateOutlet]="addon" />
+            <div class="df-accordion-title-inline">
+              <ng-template [ngTemplateOutlet]="title()" />
+            </div>
+            <div class="df-accordion-subtitle-inline">{{ subtitle() }}</div>
+          } @else {
+            <ng-template [ngTemplateOutlet]="addon" />
+            <ng-template [ngTemplateOutlet]="title()" />
+          }
+        </div>
+        @if (subsection()) {
+          <ng-template [ngTemplateOutlet]="subsection()" />
+        }
+      </label>
+    </div>
+    @if (state.shouldBeInDOM()) {
+      <div [dfUse]="directives.bodyContainerDirective" class="df-accordion-collapse">
+        <div class="df-accordion-body" [dfUse]="directives.bodyDirective">
+          <ng-template [ngTemplateOutlet]="body()" />
+        </div>
+      </div>
+    }
+    <ng-template #addon>
+      @if (accordion['state'].addon() === 'icon' && iconClass()) {
+        <span class="{{ iconClass() }} df-accordion-icon"></span>
+      } @else if (accordion['state'].addon() === 'number' && number()) {
+        <span class="df-accordion-number">{{ number() }}.</span>
+      }
+    </ng-template>
+  `, isInline: true, styles: [".df-accordion.df-accordion-selectable input[type=radio]{flex-shrink:0;width:1em;height:1em;margin:0;margin-inline-end:var(--df-spacing-3);vertical-align:top;appearance:none;background-color:var(--df-color-neutral-alt-default-background);border:2px solid var(--df-color-input-border);border-radius:50%;-webkit-print-color-adjust:exact;print-color-adjust:exact;cursor:pointer}.df-accordion.df-accordion-selectable input[type=radio]:checked{background-color:var(--df-color-primary-main-default-background);border-color:var(--df-color-primary-main-default-border);background-image:none;position:relative}.df-accordion.df-accordion-selectable input[type=radio]:checked:after{content:\"\";position:absolute;inset:0;background-color:var(--df-color-neutral-alt-default-background);background-image:none;-webkit-mask-image:url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2.5' fill='black'/></svg>\");mask-image:url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2.5' fill='black'/></svg>\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.df-accordion.df-accordion-selectable input[type=radio]:focus{outline:0;box-shadow:none}.df-accordion.df-accordion-selectable input[type=radio]:disabled{pointer-events:auto;cursor:not-allowed;border-color:var(--df-color-disabled-main-border);background-color:var(--df-color-disabled-main-background)}.df-accordion.df-accordion-selectable input[type=radio]:disabled:checked{background-color:var(--df-color-disabled-alt-background)}.df-accordion.df-accordion-selectable input[type=radio]:disabled:checked:after{background-color:var(--df-color-neutral-alt-default-background)}.df-accordion.df-accordion-selectable .df-accordion-subtitle-inline{margin-inline-end:0}.df-accordion.df-accordion-selectable .df-accordion-button{width:auto;display:block;padding-inline:var(--df-spacing-5)}.df-accordion.df-accordion-selectable .df-accordion-button:has(input[type=radio]:checked):hover{cursor:pointer;--df-inner-box-shadow-color: var(--df-color-primary-alt-hovered-background);background-color:var(--df-color-primary-alt-hovered-background);color:var(--df-color-neutral-alt-hovered-foreground)}.df-accordion.df-accordion-selectable .df-accordion-button:has(input[type=radio]:checked){background-color:var(--df-color-primary-alt-active-background);color:var(--df-color-neutral-alt-active-foreground);--df-inner-box-shadow-color: var(--df-color-primary-alt-active-background)}.df-accordion.df-accordion-selectable .df-accordion-button:has(input[type=radio]:checked) :is(.df-accordion-subtitle-block,.df-accordion-subtitle-inline){color:var(--df-color-neutral-alt-active-foreground)}.df-accordion.df-accordion-selectable .df-accordion-button:hover{cursor:pointer;--df-inner-box-shadow-color: var(--df-color-primary-alt-hovered-background);background-color:var(--df-color-primary-alt-hovered-background);color:var(--df-color-neutral-alt-hovered-foreground)}.df-accordion.df-accordion-selectable .df-accordion-button:hover :is(.df-accordion-subtitle-block,.df-accordion-subtitle-inline){color:var(--df-color-neutral-alt-hovered-foreground)}.df-accordion.df-accordion-selectable .df-accordion-button.df-disabled{cursor:not-allowed;color:var(--df-color-disabled-main-foreground);background-color:var(--df-color-disabled-main-background)}.df-accordion.df-accordion-selectable .df-accordion-button .df-accordion-title-container{font-weight:var(--df-typo-weight-bold);display:flex;align-items:center;flex-grow:1}.df-accordion.df-accordion-selectable .df-accordion-button .df-accordion-title-block-wrapper{display:grid;grid-template-columns:auto 1fr;align-items:center}.df-accordion.df-accordion-selectable .df-accordion-button .df-accordion-title-block-wrapper>.df-accordion-title-block,.df-accordion.df-accordion-selectable .df-accordion-button .df-accordion-title-block-wrapper>.df-accordion-subtitle-block{grid-column:2}.df-accordion.df-accordion-selectable .df-accordion-button:has(:focus-visible){outline:none;box-shadow:inset 0 0 0 2px var(--df-inner-box-shadow-color),inset 0 0 0 4px var(--df-color-neutral-alt-default-foreground)}\n"], dependencies: [{ kind: "directive", type: UseDirective, selector: "[dfUse]", inputs: ["dfUse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfAccordionItemSelectable, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-accordion-item-selectable', host: {
+                        class: 'df-accordion-item',
+                        '[id]': '[state.id()]'
+                    }, imports: [UseDirective, NgTemplateOutlet], encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DfAccordionItemSelectable),
+                            multi: true
+                        }
+                    ], template: `
+    <div
+      [attr.aria-level]="accordion['state'].itemHeadingLevel()"
+      [dfUse]="directives.headerDirective"
+      class="df-accordion-header"
+      role="heading"
+    >
+      <label
+        class="df-accordion-button"
+        [class.df-collapsed]="!state.visible()"
+        [class.df-disabled]="state.disabled()"
+        [for]="state.id() + '-input'"
+        [id]="state.id() + '-toggle'"
+      >
+        <div class="df-accordion-title-container">
+          <input
+            type="radio"
+            (click)="onLabelClick($event)"
+            [name]="accordion['state'].id() + '-radio'"
+            [value]="value()"
+            [checked]="state.visible()"
+            [attr.disabled]="state.disabled() || null"
+            [id]="state.id() + '-input'"
+          />
+          @let computedSubtitle = subtitleComputed();
+          @if (computedSubtitle === 'block' && subtitle()) {
+            <div class="df-accordion-title-block-wrapper">
+              <ng-template [ngTemplateOutlet]="addon" />
+              <div class="df-accordion-title-block">
+                <ng-template [ngTemplateOutlet]="title()" />
+              </div>
+              <div class="df-accordion-subtitle-block">{{ subtitle() }}</div>
+            </div>
+          } @else if (computedSubtitle === 'inline' && subtitle()) {
+            <ng-template [ngTemplateOutlet]="addon" />
+            <div class="df-accordion-title-inline">
+              <ng-template [ngTemplateOutlet]="title()" />
+            </div>
+            <div class="df-accordion-subtitle-inline">{{ subtitle() }}</div>
+          } @else {
+            <ng-template [ngTemplateOutlet]="addon" />
+            <ng-template [ngTemplateOutlet]="title()" />
+          }
+        </div>
+        @if (subsection()) {
+          <ng-template [ngTemplateOutlet]="subsection()" />
+        }
+      </label>
+    </div>
+    @if (state.shouldBeInDOM()) {
+      <div [dfUse]="directives.bodyContainerDirective" class="df-accordion-collapse">
+        <div class="df-accordion-body" [dfUse]="directives.bodyDirective">
+          <ng-template [ngTemplateOutlet]="body()" />
+        </div>
+      </div>
+    }
+    <ng-template #addon>
+      @if (accordion['state'].addon() === 'icon' && iconClass()) {
+        <span class="{{ iconClass() }} df-accordion-icon"></span>
+      } @else if (accordion['state'].addon() === 'number' && number()) {
+        <span class="df-accordion-number">{{ number() }}.</span>
+      }
+    </ng-template>
+  `, styles: [".df-accordion.df-accordion-selectable input[type=radio]{flex-shrink:0;width:1em;height:1em;margin:0;margin-inline-end:var(--df-spacing-3);vertical-align:top;appearance:none;background-color:var(--df-color-neutral-alt-default-background);border:2px solid var(--df-color-input-border);border-radius:50%;-webkit-print-color-adjust:exact;print-color-adjust:exact;cursor:pointer}.df-accordion.df-accordion-selectable input[type=radio]:checked{background-color:var(--df-color-primary-main-default-background);border-color:var(--df-color-primary-main-default-border);background-image:none;position:relative}.df-accordion.df-accordion-selectable input[type=radio]:checked:after{content:\"\";position:absolute;inset:0;background-color:var(--df-color-neutral-alt-default-background);background-image:none;-webkit-mask-image:url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2.5' fill='black'/></svg>\");mask-image:url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2.5' fill='black'/></svg>\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.df-accordion.df-accordion-selectable input[type=radio]:focus{outline:0;box-shadow:none}.df-accordion.df-accordion-selectable input[type=radio]:disabled{pointer-events:auto;cursor:not-allowed;border-color:var(--df-color-disabled-main-border);background-color:var(--df-color-disabled-main-background)}.df-accordion.df-accordion-selectable input[type=radio]:disabled:checked{background-color:var(--df-color-disabled-alt-background)}.df-accordion.df-accordion-selectable input[type=radio]:disabled:checked:after{background-color:var(--df-color-neutral-alt-default-background)}.df-accordion.df-accordion-selectable .df-accordion-subtitle-inline{margin-inline-end:0}.df-accordion.df-accordion-selectable .df-accordion-button{width:auto;display:block;padding-inline:var(--df-spacing-5)}.df-accordion.df-accordion-selectable .df-accordion-button:has(input[type=radio]:checked):hover{cursor:pointer;--df-inner-box-shadow-color: var(--df-color-primary-alt-hovered-background);background-color:var(--df-color-primary-alt-hovered-background);color:var(--df-color-neutral-alt-hovered-foreground)}.df-accordion.df-accordion-selectable .df-accordion-button:has(input[type=radio]:checked){background-color:var(--df-color-primary-alt-active-background);color:var(--df-color-neutral-alt-active-foreground);--df-inner-box-shadow-color: var(--df-color-primary-alt-active-background)}.df-accordion.df-accordion-selectable .df-accordion-button:has(input[type=radio]:checked) :is(.df-accordion-subtitle-block,.df-accordion-subtitle-inline){color:var(--df-color-neutral-alt-active-foreground)}.df-accordion.df-accordion-selectable .df-accordion-button:hover{cursor:pointer;--df-inner-box-shadow-color: var(--df-color-primary-alt-hovered-background);background-color:var(--df-color-primary-alt-hovered-background);color:var(--df-color-neutral-alt-hovered-foreground)}.df-accordion.df-accordion-selectable .df-accordion-button:hover :is(.df-accordion-subtitle-block,.df-accordion-subtitle-inline){color:var(--df-color-neutral-alt-hovered-foreground)}.df-accordion.df-accordion-selectable .df-accordion-button.df-disabled{cursor:not-allowed;color:var(--df-color-disabled-main-foreground);background-color:var(--df-color-disabled-main-background)}.df-accordion.df-accordion-selectable .df-accordion-button .df-accordion-title-container{font-weight:var(--df-typo-weight-bold);display:flex;align-items:center;flex-grow:1}.df-accordion.df-accordion-selectable .df-accordion-button .df-accordion-title-block-wrapper{display:grid;grid-template-columns:auto 1fr;align-items:center}.df-accordion.df-accordion-selectable .df-accordion-button .df-accordion-title-block-wrapper>.df-accordion-title-block,.df-accordion.df-accordion-selectable .df-accordion-button .df-accordion-title-block-wrapper>.df-accordion-subtitle-block{grid-column:2}.df-accordion.df-accordion-selectable .df-accordion-button:has(:focus-visible){outline:none;box-shadow:inset 0 0 0 2px var(--df-inner-box-shadow-color),inset 0 0 0 4px var(--df-color-neutral-alt-default-foreground)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], destroyOnHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "destroyOnHide", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], shown: [{ type: i0.Output, args: ["shown"] }], hidden: [{ type: i0.Output, args: ["hidden"] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], iconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconClass", required: false }] }], number: [{ type: i0.Input, args: [{ isSignal: true, alias: "number", required: false }] }], subtitleType: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitleType", required: false }] }], title: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfAccordionItemTitle), { ...{ read: TemplateRef }, isSignal: true }] }], body: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfAccordionItemBody), { ...{ read: TemplateRef }, isSignal: true }] }], subsection: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfAccordionItemSelectableSubsection), { ...{ read: TemplateRef }, isSignal: true }] }] } });
+// the key of the accordion config in the global DF config
+const ACCORDION_CONFIG_KEY = 'accordion';
+/**
+ * Provides the configuration for the accordion component.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   providers: [provideDfAccordionConfig({ animated: false })]
+ * })
+ * export class MyHomeComponent {}
+ * ```
+ *
+ * @param config - Partial configuration or a function that receives the parent configuration and returns a partial configuration.
+ */
+const provideDfAccordionConfig = provideDfComponentConfig(ACCORDION_CONFIG_KEY);
+/**
+ * Injects the configuration for the accordion component.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   providers: [provideDfAccordionConfig()]
+ * })
+ * export class MyAccordionComponent {
+ *   readonly accordionConfig = injectDfAccordionConfig();
+ * }
+ * ```
+ *
+ * @returns A writable signal containing the accordion configuration.
+ */
+const injectDfAccordionConfig = injectDfComponentConfig(ACCORDION_CONFIG_KEY);
+/**
+ * Generated bundle index. Do not edit.
+ */
+export { ACCORDION_CONFIG_KEY, DfAccordion, DfAccordionItem, DfAccordionItemBody, DfAccordionItemInteractive, DfAccordionItemInteractiveSection, DfAccordionItemSelectable, DfAccordionItemSelectableSubsection, DfAccordionItemTitle, DfAccordionSelectable, injectDfAccordionConfig, provideDfAccordionConfig };
+//# sourceMappingURL=design-factory-angular-accordion.mjs.map