ngx-com 0.0.1 → 0.0.4

package/fesm2022/ngx-com-components-collapsible.mjs

@@ -0,0 +1,612 @@
+import { cva } from 'class-variance-authority';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, model, input, booleanAttribute, computed, contentChild, ChangeDetectionStrategy, Component, signal, effect } from '@angular/core';
+import { mergeClasses } from 'ngx-com/utils';
+import { NgTemplateOutlet } from '@angular/common';
+
+/**
+ * CVA variants for the collapsible shell (root directive).
+ *
+ * @tokens `--color-border`, `--color-background`, `--color-foreground`, `--shadow-xs`, `--radius-collapsible`
+ */
+const collapsibleVariants = cva(
+// Base — structural only
+'com-collapsible block', {
+    variants: {
+        variant: {
+            card: 'rounded-collapsible border border-border bg-background text-foreground shadow-xs',
+            bordered: 'rounded-collapsible border border-border',
+            flush: 'border-b border-border',
+            ghost: '',
+            unstyled: '',
+        },
+    },
+    defaultVariants: {
+        variant: 'ghost',
+    },
+});
+
+/**
+ * CVA variants for the collapsible trigger directive.
+ *
+ * @tokens `--color-foreground`, `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`,
+ *         `--color-ring`, `--color-disabled-foreground`, `--radius-collapsible`
+ */
+const collapsibleTriggerVariants = cva([
+    'com-collapsible-trigger',
+    'flex w-full items-center justify-between',
+    'cursor-pointer select-none',
+    'text-sm font-medium',
+    'transition-colors',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+    'disabled:pointer-events-none disabled:text-disabled-foreground',
+    '[&>svg]:transition-transform [&>svg]:duration-200',
+    '[&>svg.com-collapsible-icon]:data-[state=open]:rotate-180',
+].join(' '), {
+    variants: {
+        variant: {
+            ghost: 'rounded-collapsible text-foreground hover:bg-muted hover:text-muted-foreground',
+            filled: 'rounded-collapsible bg-muted text-muted-foreground hover:bg-muted-hover',
+            header: 'text-foreground hover:text-muted-foreground',
+            unstyled: '',
+        },
+        size: {
+            sm: 'px-2 py-1 text-xs gap-1',
+            default: 'px-3 py-2 text-sm gap-2',
+            lg: 'px-4 py-3 text-base gap-3',
+        },
+    },
+    defaultVariants: {
+        variant: 'ghost',
+        size: 'default',
+    },
+});
+
+/**
+ * Directive to mark a template as the custom trigger layout template.
+ * Replaces the inner content of the trigger while preserving ARIA and keyboard handling.
+ *
+ * @example
+ * ```html
+ * <button comCollapsibleTrigger>
+ *   <ng-template comCollapsibleTriggerTpl let-open let-toggle="toggle" let-disabled="disabled">
+ *     <div class="flex items-center gap-3 w-full">
+ *       <span class="h-2 w-2 rounded-full" [class]="open ? 'bg-success' : 'bg-muted'"></span>
+ *       <span class="font-medium">Notifications</span>
+ *       <svg class="com-collapsible-icon h-4 w-4" [attr.data-state]="open ? 'open' : 'closed'">
+ *         <!-- chevron icon -->
+ *       </svg>
+ *     </div>
+ *   </ng-template>
+ * </button>
+ * ```
+ */
+class ComCollapsibleTriggerTpl {
+    /** Reference to the template. */
+    templateRef = inject(TemplateRef);
+    /**
+     * Static type guard for template type checking.
+     * Enables type-safe access to context properties in templates.
+     */
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCollapsibleTriggerTpl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComCollapsibleTriggerTpl, isStandalone: true, selector: "ng-template[comCollapsibleTriggerTpl]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCollapsibleTriggerTpl, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[comCollapsibleTriggerTpl]',
+                }]
+        }] });
+
+/**
+ * Directive to mark a template as the custom content chrome template.
+ * Wraps the content with custom chrome (headers, footers, padding).
+ * The grid animation still applies on the host.
+ *
+ * @example
+ * ```html
+ * <com-collapsible-content>
+ *   <ng-template comCollapsibleContentTpl let-open="open">
+ *     <div class="border-t border-border">
+ *       <div class="p-4 space-y-3">
+ *         <!-- Content here -->
+ *       </div>
+ *       <div class="flex justify-end gap-2 px-4 py-3 border-t border-border-subtle bg-muted">
+ *         <button>Reset</button>
+ *         <button>Apply</button>
+ *       </div>
+ *     </div>
+ *   </ng-template>
+ * </com-collapsible-content>
+ * ```
+ */
+class ComCollapsibleContentTpl {
+    /** Reference to the template. */
+    templateRef = inject(TemplateRef);
+    /**
+     * Static type guard for template type checking.
+     * Enables type-safe access to context properties in templates.
+     */
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCollapsibleContentTpl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComCollapsibleContentTpl, isStandalone: true, selector: "ng-template[comCollapsibleContentTpl]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCollapsibleContentTpl, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[comCollapsibleContentTpl]',
+                }]
+        }] });
+
+/**
+ * Directive to mark a template as the custom icon template.
+ * Replaces only the chevron icon inside the default trigger layout.
+ *
+ * @example
+ * ```html
+ * <button comCollapsibleTrigger>
+ *   Settings
+ *   <ng-template comCollapsibleIcon let-open="open">
+ *     <span class="text-muted-foreground text-xs">{{ open ? '▲' : '▼' }}</span>
+ *   </ng-template>
+ * </button>
+ * ```
+ */
+class ComCollapsibleIconTpl {
+    /** Reference to the template. */
+    templateRef = inject(TemplateRef);
+    /**
+     * Static type guard for template type checking.
+     * Enables type-safe access to context properties in templates.
+     */
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCollapsibleIconTpl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComCollapsibleIconTpl, isStandalone: true, selector: "ng-template[comCollapsibleIcon]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCollapsibleIconTpl, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[comCollapsibleIcon]',
+                }]
+        }] });
+
+/**
+ * Structural directive for lazy content rendering.
+ * Content is only instantiated on first expand, preserving state on subsequent toggles.
+ *
+ * @example
+ * ```html
+ * <com-collapsible-content>
+ *   <ng-template comCollapsibleLazy>
+ *     <app-heavy-chart [data]="chartData()" />
+ *   </ng-template>
+ * </com-collapsible-content>
+ * ```
+ */
+class ComCollapsibleLazy {
+    /** Reference to the template. */
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCollapsibleLazy, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComCollapsibleLazy, isStandalone: true, selector: "ng-template[comCollapsibleLazy]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCollapsibleLazy, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[comCollapsibleLazy]',
+                }]
+        }] });
+
+let collapsibleIdCounter = 0;
+/**
+ * Generates a unique ID for collapsible components.
+ * @returns A unique string ID
+ */
+function generateCollapsibleId() {
+    return `com-collapsible-${++collapsibleIdCounter}`;
+}
+
+/**
+ * Root collapsible directive — manages state and provides shell styling.
+ *
+ * Works as a DI anchor for child directives (trigger, content).
+ * Exposes programmatic control via template reference.
+ *
+ * @tokens `--color-border`, `--color-background`, `--color-foreground`, `--shadow-xs`
+ *
+ * @example Basic usage
+ * ```html
+ * <div comCollapsible variant="card">
+ *   <button comCollapsibleTrigger>Section Title</button>
+ *   <com-collapsible-content>
+ *     <div class="p-4">Content here.</div>
+ *   </com-collapsible-content>
+ * </div>
+ * ```
+ *
+ * @example Two-way binding with external control
+ * ```html
+ * <div comCollapsible [(open)]="sectionOpen" #section="comCollapsible">
+ *   <button comCollapsibleTrigger>Advanced</button>
+ *   <com-collapsible-content>...</com-collapsible-content>
+ * </div>
+ * <button (click)="section.toggle()">Toggle externally</button>
+ * ```
+ */
+class ComCollapsible {
+    /** Unique ID for the collapsible instance. */
+    id = generateCollapsibleId();
+    /** ID for the trigger element (used for aria-labelledby). */
+    triggerId = `${this.id}-trigger`;
+    /** ID for the content panel (used for aria-controls). */
+    contentId = `${this.id}-content`;
+    // ============ INPUTS ============
+    /** Two-way bound open state. */
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    /** Disables the collapsible, preventing state changes. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    /** Shell preset variant. */
+    variant = input('ghost', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Consumer CSS classes — merged with variant classes. */
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    // ============ COMPUTED STATE ============
+    /** @internal Computed host class from CVA + consumer overrides. */
+    computedClass = computed(() => mergeClasses(collapsibleVariants({ variant: this.variant() }), this.userClass()), ...(ngDevMode ? [{ debugName: "computedClass" }] : []));
+    // ============ PUBLIC API ============
+    /** Returns the current open state. */
+    isOpen() {
+        return this.open();
+    }
+    /** Returns the current disabled state. */
+    isDisabled() {
+        return this.disabled();
+    }
+    /** Toggles the open state (if not disabled). */
+    toggle() {
+        if (this.disabled())
+            return;
+        this.open.update((v) => !v);
+    }
+    /** Expands the collapsible (if not disabled). */
+    expand() {
+        if (this.disabled())
+            return;
+        this.open.set(true);
+    }
+    /** Collapses the collapsible (if not disabled). */
+    collapse() {
+        if (this.disabled())
+            return;
+        this.open.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCollapsible, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ComCollapsible, isStandalone: true, selector: "[comCollapsible]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "class": "computedClass()", "attr.data-state": "isOpen() ? \"open\" : \"closed\"" } }, exportAs: ["comCollapsible"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCollapsible, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comCollapsible]',
+                    exportAs: 'comCollapsible',
+                    host: {
+                        '[class]': 'computedClass()',
+                        '[attr.data-state]': 'isOpen() ? "open" : "closed"',
+                    },
+                }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Collapsible trigger component — handles toggle interaction, ARIA, keyboard, and template rendering.
+ *
+ * Uses attribute selector so it can be applied to `<button>` or any focusable element.
+ * Injects the parent `ComCollapsible` directive to access state.
+ * Supports custom trigger layout via `comCollapsibleTriggerTpl` and custom icon via `comCollapsibleIcon`.
+ *
+ * @tokens `--color-foreground`, `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`,
+ *         `--color-ring`, `--color-disabled-foreground`
+ *
+ * @example Default trigger with auto icon
+ * ```html
+ * <button comCollapsibleTrigger>Section Title</button>
+ * ```
+ *
+ * @example Without icon
+ * ```html
+ * <button comCollapsibleTrigger [showIcon]="false">Section Title</button>
+ * ```
+ *
+ * @example With custom icon
+ * ```html
+ * <button comCollapsibleTrigger>
+ *   Settings
+ *   <ng-template comCollapsibleIcon let-open="open">
+ *     <span class="text-xs text-muted-foreground">{{ open ? '▲' : '▼' }}</span>
+ *   </ng-template>
+ * </button>
+ * ```
+ *
+ * @example Full trigger layout override
+ * ```html
+ * <button comCollapsibleTrigger>
+ *   <ng-template comCollapsibleTriggerTpl let-open let-toggle="toggle">
+ *     <div class="flex items-center gap-3 w-full">
+ *       <span class="h-2 w-2 rounded-full" [class]="open ? 'bg-success' : 'bg-muted'"></span>
+ *       <span class="font-medium">Notifications</span>
+ *       <svg class="com-collapsible-icon h-4 w-4" [attr.data-state]="open ? 'open' : 'closed'">
+ *         <!-- chevron -->
+ *       </svg>
+ *     </div>
+ *   </ng-template>
+ * </button>
+ * ```
+ */
+class ComCollapsibleTrigger {
+    /** Parent collapsible directive (provides state). */
+    collapsible = inject(ComCollapsible);
+    /** Custom trigger layout template (replaces inner content). */
+    triggerTpl = contentChild(ComCollapsibleTriggerTpl, ...(ngDevMode ? [{ debugName: "triggerTpl" }] : []));
+    /** Custom icon template (replaces default chevron). */
+    iconTpl = contentChild(ComCollapsibleIconTpl, ...(ngDevMode ? [{ debugName: "iconTpl" }] : []));
+    // ============ INPUTS ============
+    /** Trigger preset variant. */
+    variant = input('ghost', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Trigger size. */
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Show/hide the toggle icon. */
+    showIcon = input(true, { ...(ngDevMode ? { debugName: "showIcon" } : {}), transform: booleanAttribute });
+    /** Consumer CSS classes — merged with variant classes. */
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    // ============ COMPUTED STATE ============
+    /** @internal Computed host class from CVA + consumer overrides. */
+    computedClass = computed(() => mergeClasses(collapsibleTriggerVariants({
+        variant: this.variant(),
+        size: this.size(),
+    }), this.userClass()), ...(ngDevMode ? [{ debugName: "computedClass" }] : []));
+    /** Context for trigger template. */
+    triggerContext = computed(() => ({
+        $implicit: this.collapsible.isOpen(),
+        open: this.collapsible.isOpen(),
+        disabled: this.collapsible.isDisabled(),
+        toggle: () => this.collapsible.toggle(),
+    }), ...(ngDevMode ? [{ debugName: "triggerContext" }] : []));
+    /** Context for icon template. */
+    iconContext = computed(() => ({
+        $implicit: this.collapsible.isOpen(),
+        open: this.collapsible.isOpen(),
+    }), ...(ngDevMode ? [{ debugName: "iconContext" }] : []));
+    // ============ EVENT HANDLERS ============
+    /** @internal */
+    onClick(event) {
+        event.preventDefault();
+        this.collapsible.toggle();
+    }
+    /** @internal */
+    onKeydown(event) {
+        event.preventDefault();
+        this.collapsible.toggle();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCollapsibleTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComCollapsibleTrigger, isStandalone: true, selector: "[comCollapsibleTrigger]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onKeydown($event)", "keydown.space": "onKeydown($event)" }, properties: { "class": "computedClass()", "attr.id": "collapsible.triggerId", "attr.type": "\"button\"", "attr.aria-expanded": "collapsible.isOpen()", "attr.aria-controls": "collapsible.contentId", "attr.aria-disabled": "collapsible.isDisabled() || null", "attr.data-state": "collapsible.isOpen() ? \"open\" : \"closed\"", "attr.disabled": "collapsible.isDisabled() || null", "tabindex": "collapsible.isDisabled() ? -1 : 0" } }, queries: [{ propertyName: "triggerTpl", first: true, predicate: ComCollapsibleTriggerTpl, descendants: true, isSignal: true }, { propertyName: "iconTpl", first: true, predicate: ComCollapsibleIconTpl, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (triggerTpl()) {
+      <ng-container
+        [ngTemplateOutlet]="triggerTpl()!.templateRef"
+        [ngTemplateOutletContext]="triggerContext()"
+      />
+    } @else {
+      <span class="flex-1 truncate text-left">
+        <ng-content />
+      </span>
+      @if (showIcon()) {
+        @if (iconTpl()) {
+          <ng-container
+            [ngTemplateOutlet]="iconTpl()!.templateRef"
+            [ngTemplateOutletContext]="iconContext()"
+          />
+        } @else {
+          <svg
+            class="com-collapsible-icon h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
+            [attr.data-state]="collapsible.isOpen() ? 'open' : 'closed'"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+        }
+      }
+    }
+  `, isInline: true, styles: [":host{display:flex}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCollapsibleTrigger, decorators: [{
+            type: Component,
+            args: [{ selector: '[comCollapsibleTrigger]', template: `
+    @if (triggerTpl()) {
+      <ng-container
+        [ngTemplateOutlet]="triggerTpl()!.templateRef"
+        [ngTemplateOutletContext]="triggerContext()"
+      />
+    } @else {
+      <span class="flex-1 truncate text-left">
+        <ng-content />
+      </span>
+      @if (showIcon()) {
+        @if (iconTpl()) {
+          <ng-container
+            [ngTemplateOutlet]="iconTpl()!.templateRef"
+            [ngTemplateOutletContext]="iconContext()"
+          />
+        } @else {
+          <svg
+            class="com-collapsible-icon h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
+            [attr.data-state]="collapsible.isOpen() ? 'open' : 'closed'"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+        }
+      }
+    }
+  `, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'computedClass()',
+                        '[attr.id]': 'collapsible.triggerId',
+                        '[attr.type]': '"button"',
+                        '[attr.aria-expanded]': 'collapsible.isOpen()',
+                        '[attr.aria-controls]': 'collapsible.contentId',
+                        '[attr.aria-disabled]': 'collapsible.isDisabled() || null',
+                        '[attr.data-state]': 'collapsible.isOpen() ? "open" : "closed"',
+                        '[attr.disabled]': 'collapsible.isDisabled() || null',
+                        '[tabindex]': 'collapsible.isDisabled() ? -1 : 0',
+                        '(click)': 'onClick($event)',
+                        '(keydown.enter)': 'onKeydown($event)',
+                        '(keydown.space)': 'onKeydown($event)',
+                    }, styles: [":host{display:flex}\n"] }]
+        }], propDecorators: { triggerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComCollapsibleTriggerTpl), { isSignal: true }] }], iconTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComCollapsibleIconTpl), { isSignal: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Collapsible content component — animated panel with region role.
+ *
+ * Uses CSS grid technique for smooth height animation without JS measurement.
+ * Supports lazy rendering via `comCollapsibleLazy` directive.
+ *
+ * @tokens None (structural only — styling is applied via templates or consumer classes)
+ *
+ * @example Basic usage
+ * ```html
+ * <com-collapsible-content>
+ *   <div class="p-4">Content here.</div>
+ * </com-collapsible-content>
+ * ```
+ *
+ * @example With custom duration
+ * ```html
+ * <com-collapsible-content [duration]="300">
+ *   <div class="p-4">Slower animation.</div>
+ * </com-collapsible-content>
+ * ```
+ *
+ * @example With content chrome template
+ * ```html
+ * <com-collapsible-content>
+ *   <ng-template comCollapsibleContentTpl let-open="open">
+ *     <div class="border-t border-border p-4">
+ *       <!-- Content with custom chrome -->
+ *     </div>
+ *   </ng-template>
+ * </com-collapsible-content>
+ * ```
+ *
+ * @example Lazy content
+ * ```html
+ * <com-collapsible-content>
+ *   <ng-template comCollapsibleLazy>
+ *     <app-heavy-component />
+ *   </ng-template>
+ * </com-collapsible-content>
+ * ```
+ */
+class ComCollapsibleContent {
+    /** Parent collapsible directive (provides state). */
+    collapsible = inject(ComCollapsible);
+    /** Custom content chrome template. */
+    contentTpl = contentChild(ComCollapsibleContentTpl, ...(ngDevMode ? [{ debugName: "contentTpl" }] : []));
+    /** Lazy content template. */
+    lazyTpl = contentChild(ComCollapsibleLazy, ...(ngDevMode ? [{ debugName: "lazyTpl" }] : []));
+    /** Track if collapsible has ever been opened (for lazy rendering). */
+    hasBeenOpened = signal(false, ...(ngDevMode ? [{ debugName: "hasBeenOpened" }] : []));
+    // ============ INPUTS ============
+    /** Transition duration in milliseconds. */
+    duration = input(200, ...(ngDevMode ? [{ debugName: "duration" }] : []));
+    /** Consumer CSS classes for the inner wrapper. */
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    // ============ COMPUTED STATE ============
+    /** @internal Computed inner wrapper class. */
+    innerClass = computed(() => mergeClasses('com-collapsible-content-inner', this.userClass()), ...(ngDevMode ? [{ debugName: "innerClass" }] : []));
+    /** Context for content template. */
+    templateContext = computed(() => ({
+        $implicit: this.collapsible.isOpen(),
+        open: this.collapsible.isOpen(),
+    }), ...(ngDevMode ? [{ debugName: "templateContext" }] : []));
+    constructor() {
+        // Track first open for lazy rendering
+        effect(() => {
+            if (this.collapsible.isOpen() && !this.hasBeenOpened()) {
+                this.hasBeenOpened.set(true);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCollapsibleContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComCollapsibleContent, isStandalone: true, selector: "com-collapsible-content", inputs: { duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--duration.ms": "duration()", "attr.id": "collapsible.contentId", "attr.role": "\"region\"", "attr.aria-labelledby": "collapsible.triggerId", "attr.data-state": "collapsible.isOpen() ? \"open\" : \"closed\"", "attr.inert": "!collapsible.isOpen() || null" }, classAttribute: "com-collapsible-content" }, queries: [{ propertyName: "contentTpl", first: true, predicate: ComCollapsibleContentTpl, descendants: true, isSignal: true }, { propertyName: "lazyTpl", first: true, predicate: ComCollapsibleLazy, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (contentTpl()) {
+      <div class="com-collapsible-content-inner" [class]="innerClass()">
+        <ng-container
+          [ngTemplateOutlet]="contentTpl()!.templateRef"
+          [ngTemplateOutletContext]="templateContext()"
+        />
+      </div>
+    } @else if (lazyTpl()) {
+      @if (hasBeenOpened()) {
+        <div class="com-collapsible-content-inner" [class]="innerClass()">
+          <ng-container [ngTemplateOutlet]="lazyTpl()!.templateRef" />
+        </div>
+      }
+    } @else {
+      <div class="com-collapsible-content-inner" [class]="innerClass()">
+        <ng-content />
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--duration, .2s) ease}:host([data-state=\"open\"]){grid-template-rows:1fr}.com-collapsible-content-inner{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCollapsibleContent, decorators: [{
+            type: Component,
+            args: [{ selector: 'com-collapsible-content', template: `
+    @if (contentTpl()) {
+      <div class="com-collapsible-content-inner" [class]="innerClass()">
+        <ng-container
+          [ngTemplateOutlet]="contentTpl()!.templateRef"
+          [ngTemplateOutletContext]="templateContext()"
+        />
+      </div>
+    } @else if (lazyTpl()) {
+      @if (hasBeenOpened()) {
+        <div class="com-collapsible-content-inner" [class]="innerClass()">
+          <ng-container [ngTemplateOutlet]="lazyTpl()!.templateRef" />
+        </div>
+      }
+    } @else {
+      <div class="com-collapsible-content-inner" [class]="innerClass()">
+        <ng-content />
+      </div>
+    }
+  `, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'com-collapsible-content',
+                        '[style.--duration.ms]': 'duration()',
+                        '[attr.id]': 'collapsible.contentId',
+                        '[attr.role]': '"region"',
+                        '[attr.aria-labelledby]': 'collapsible.triggerId',
+                        '[attr.data-state]': 'collapsible.isOpen() ? "open" : "closed"',
+                        '[attr.inert]': '!collapsible.isOpen() || null',
+                    }, styles: [":host{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--duration, .2s) ease}:host([data-state=\"open\"]){grid-template-rows:1fr}.com-collapsible-content-inner{overflow:hidden}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { contentTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComCollapsibleContentTpl), { isSignal: true }] }], lazyTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComCollapsibleLazy), { isSignal: true }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+// Public API for the collapsible component
+// Variants
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ComCollapsible, ComCollapsibleContent, ComCollapsibleContentTpl, ComCollapsibleIconTpl, ComCollapsibleLazy, ComCollapsibleTrigger, ComCollapsibleTriggerTpl, collapsibleTriggerVariants, collapsibleVariants };
+//# sourceMappingURL=ngx-com-components-collapsible.mjs.map