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

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

@@ -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