@weeehaoooz/talos-ui 0.1.0

package/fesm2022/weeehaoooz-talos-ui-layout.mjs

@@ -0,0 +1,851 @@
+import * as i0 from '@angular/core';
+import { signal, computed, Injectable, input, output, Component, inject, Directive, NgModule, forwardRef, effect, DestroyRef, model, ContentChild } from '@angular/core';
+import { NgComponentOutlet } from '@angular/common';
+import { TalosButtonDirective } from '@weeehaoooz/talos-ui/button/button';
+import { LucideX, LucideChevronDown } from '@lucide/angular';
+
+class LayoutService {
+    // Reactive Signals for layout state
+    isLeftNavCollapsed = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLeftNavCollapsed" }] : /* istanbul ignore next */ []));
+    isRightPanelOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRightPanelOpen" }] : /* istanbul ignore next */ []));
+    isMainContentExpanded = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMainContentExpanded" }] : /* istanbul ignore next */ []));
+    // Dynamic component injection signals
+    rightPanelComponent = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rightPanelComponent" }] : /* istanbul ignore next */ []));
+    rightPanelInputs = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rightPanelInputs" }] : /* istanbul ignore next */ []));
+    rightPanelOptions = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rightPanelOptions" }] : /* istanbul ignore next */ []));
+    // Computed state for backdrop blur
+    shouldBlurMainContent = computed(() => {
+        return (this.isRightPanelOpen() &&
+            (this.rightPanelOptions().mode ?? 'overlay') === 'overlay' &&
+            !!this.rightPanelOptions().blurBackdrop);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shouldBlurMainContent" }] : /* istanbul ignore next */ []));
+    // Computed state for inline panel mode
+    isRightPanelInline = computed(() => {
+        return this.isRightPanelOpen() && this.rightPanelOptions().mode === 'inline';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRightPanelInline" }] : /* istanbul ignore next */ []));
+    // Action methods
+    toggleLeftNav() {
+        this.isLeftNavCollapsed.update((state) => !state);
+    }
+    setLeftNavCollapsed(collapsed) {
+        this.isLeftNavCollapsed.set(collapsed);
+    }
+    toggleMainContentExpanded() {
+        this.isMainContentExpanded.update((state) => !state);
+    }
+    setMainContentExpanded(expanded) {
+        this.isMainContentExpanded.set(expanded);
+    }
+    closeTimeout = null;
+    /**
+     * Dynamically open the right side panel with a specified component and inputs.
+     */
+    openRightPanel(component, inputs = {}, options = {}) {
+        if (this.closeTimeout) {
+            clearTimeout(this.closeTimeout);
+            this.closeTimeout = null;
+        }
+        this.rightPanelComponent.set(component);
+        this.rightPanelInputs.set(inputs);
+        this.rightPanelOptions.set({
+            mode: 'overlay',
+            closeOnBackdropClick: true,
+            ...options
+        });
+        this.isRightPanelOpen.set(true);
+    }
+    /**
+     * Close the right side panel and clear injected component state after animation completes.
+     */
+    closeRightPanel() {
+        this.isRightPanelOpen.set(false);
+        if (this.closeTimeout) {
+            clearTimeout(this.closeTimeout);
+        }
+        this.closeTimeout = setTimeout(() => {
+            this.rightPanelComponent.set(null);
+            this.rightPanelInputs.set({});
+            this.rightPanelOptions.set({});
+            this.closeTimeout = null;
+        }, 300);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: LayoutService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: LayoutService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class SidePanelComponent {
+    /** Whether the panel is currently open and visible */
+    isOpen = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    /** Panel title displayed in header */
+    title = input('Details', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Custom panel width (e.g. '380px', '500px', '100%') */
+    width = input('380px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /** Panel mode: 'overlay' (floating) or 'inline' (push content) */
+    mode = input('overlay', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Dynamic component to instantiate via NgComponentOutlet */
+    component = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "component" }] : /* istanbul ignore next */ []));
+    /** Inputs object to pass to the dynamically injected component */
+    componentInputs = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "componentInputs" }] : /* istanbul ignore next */ []));
+    /** Event emitted when the close button is clicked */
+    close = output();
+    onClose() {
+        this.close.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SidePanelComponent, isStandalone: true, selector: "talos-side-panel", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: false, transformFunction: null }, componentInputs: { classPropertyName: "componentInputs", publicName: "componentInputs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, host: { attributes: { "role": "complementary" }, properties: { "class.is-open": "isOpen()", "class.is-overlay": "mode() === \"overlay\"", "class.is-inline": "mode() === \"inline\"", "style.--panel-width": "width()", "attr.aria-label": "title() || \"Details Panel\"" }, classAttribute: "side-panel-host" }, ngImport: i0, template: "<div class=\"side-panel-inner\">\n  <div class=\"side-panel-header\">\n    <h3 class=\"side-panel-title\">\n      {{ title() }}\n    </h3>\n    <button type=\"button\" talosButton variant=\"ghost\" size=\"sm\" [iconOnly]=\"true\" class=\"side-panel-close-btn\"\n      (click)=\"onClose()\" aria-label=\"Close details panel\">\n      <svg lucideX [size]=\"16\"></svg>\n    </button>\n  </div>\n  <div class=\"side-panel-body\">\n    @if (component()) {\n    <ng-container *ngComponentOutlet=\"component()!; inputs: componentInputs()\" />\n    }\n    <ng-content />\n  </div>\n</div>", styles: [":host{display:flex;flex-direction:column;background:var(--talos-right-panel-bg, var(--talos-card-bg, var(--card-bg, #ffffff)));border-left:1px solid var(--talos-right-panel-border, var(--talos-border-color, var(--border-color, #e2e8f0)));box-sizing:border-box;overflow:hidden;transition:width .3s cubic-bezier(.16,1,.3,1),max-width .3s cubic-bezier(.16,1,.3,1),opacity .25s ease,transform .3s cubic-bezier(.16,1,.3,1),visibility .3s,border-left-color .3s}:host.is-overlay{position:absolute;top:0;right:0;bottom:0;z-index:40;width:var(--panel-width, 380px);box-shadow:-8px 0 24px #00000026;transform:translate(100%);opacity:0;visibility:hidden;pointer-events:none}:host.is-overlay.is-open{transform:translate(0);opacity:1;visibility:visible;pointer-events:auto}:host.is-inline{position:relative;height:100%;z-index:10;flex-shrink:0;width:0;max-width:0;opacity:0;visibility:hidden;pointer-events:none;border-left-color:transparent}:host.is-inline.is-open{width:var(--panel-width, 380px);max-width:var(--panel-width, 380px);opacity:1;visibility:visible;pointer-events:auto;border-left-color:var(--talos-right-panel-border, var(--right-panel-border, #e2e8f0))}.side-panel-inner{display:flex;flex-direction:column;width:var(--panel-width, 380px);height:100%;box-sizing:border-box}.side-panel-inner .side-panel-header{height:60px;min-height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--talos-right-panel-border, var(--right-panel-border, #e2e8f0))}.side-panel-inner .side-panel-header .side-panel-title{margin:0;font-size:16px;font-weight:600;color:var(--talos-text-color, var(--panel-title-color, #0f172a))}.side-panel-inner .side-panel-body{flex:1;overflow-y:auto;padding:20px}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: TalosButtonDirective, selector: "button[talosButton], a[talosButton], button[talos-btn], a[talos-btn]", inputs: ["variant", "size", "iconOnly", "fullWidth", "pill", "loading", "disabled", "animation", "spinning", "popping", "feedback"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SidePanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-side-panel', imports: [NgComponentOutlet, TalosButtonDirective, LucideX], host: {
+                        'role': 'complementary',
+                        'class': 'side-panel-host',
+                        '[class.is-open]': 'isOpen()',
+                        '[class.is-overlay]': 'mode() === "overlay"',
+                        '[class.is-inline]': 'mode() === "inline"',
+                        '[style.--panel-width]': 'width()',
+                        '[attr.aria-label]': 'title() || "Details Panel"'
+                    }, template: "<div class=\"side-panel-inner\">\n  <div class=\"side-panel-header\">\n    <h3 class=\"side-panel-title\">\n      {{ title() }}\n    </h3>\n    <button type=\"button\" talosButton variant=\"ghost\" size=\"sm\" [iconOnly]=\"true\" class=\"side-panel-close-btn\"\n      (click)=\"onClose()\" aria-label=\"Close details panel\">\n      <svg lucideX [size]=\"16\"></svg>\n    </button>\n  </div>\n  <div class=\"side-panel-body\">\n    @if (component()) {\n    <ng-container *ngComponentOutlet=\"component()!; inputs: componentInputs()\" />\n    }\n    <ng-content />\n  </div>\n</div>", styles: [":host{display:flex;flex-direction:column;background:var(--talos-right-panel-bg, var(--talos-card-bg, var(--card-bg, #ffffff)));border-left:1px solid var(--talos-right-panel-border, var(--talos-border-color, var(--border-color, #e2e8f0)));box-sizing:border-box;overflow:hidden;transition:width .3s cubic-bezier(.16,1,.3,1),max-width .3s cubic-bezier(.16,1,.3,1),opacity .25s ease,transform .3s cubic-bezier(.16,1,.3,1),visibility .3s,border-left-color .3s}:host.is-overlay{position:absolute;top:0;right:0;bottom:0;z-index:40;width:var(--panel-width, 380px);box-shadow:-8px 0 24px #00000026;transform:translate(100%);opacity:0;visibility:hidden;pointer-events:none}:host.is-overlay.is-open{transform:translate(0);opacity:1;visibility:visible;pointer-events:auto}:host.is-inline{position:relative;height:100%;z-index:10;flex-shrink:0;width:0;max-width:0;opacity:0;visibility:hidden;pointer-events:none;border-left-color:transparent}:host.is-inline.is-open{width:var(--panel-width, 380px);max-width:var(--panel-width, 380px);opacity:1;visibility:visible;pointer-events:auto;border-left-color:var(--talos-right-panel-border, var(--right-panel-border, #e2e8f0))}.side-panel-inner{display:flex;flex-direction:column;width:var(--panel-width, 380px);height:100%;box-sizing:border-box}.side-panel-inner .side-panel-header{height:60px;min-height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--talos-right-panel-border, var(--right-panel-border, #e2e8f0))}.side-panel-inner .side-panel-header .side-panel-title{margin:0;font-size:16px;font-weight:600;color:var(--talos-text-color, var(--panel-title-color, #0f172a))}.side-panel-inner .side-panel-body{flex:1;overflow-y:auto;padding:20px}\n"] }]
+        }], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: false }] }], componentInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentInputs", required: false }] }], close: [{ type: i0.Output, args: ["close"] }] } });
+
+class MainLayoutComponent {
+    layoutService = inject(LayoutService);
+    onBackdropClick() {
+        if (this.layoutService.rightPanelOptions().closeOnBackdropClick) {
+            this.layoutService.closeRightPanel();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: MainLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: MainLayoutComponent, isStandalone: true, selector: "talos-main-layout", host: { properties: { "class.left-nav-collapsed": "layoutService.isLeftNavCollapsed()", "class.right-panel-open": "layoutService.isRightPanelOpen()", "class.right-panel-inline": "layoutService.isRightPanelInline()", "class.main-content-expanded": "layoutService.isMainContentExpanded()", "class.blur-backdrop": "layoutService.shouldBlurMainContent()" }, classAttribute: "talos-main-layout-host" }, ngImport: i0, template: "<!-- Top Header Slot (Spanning 100% full width across top of viewport) -->\n<ng-content select=\"talos-top-nav, app-header, header, [top-nav], [header]\" />\n\n<div class=\"layout-body-wrapper\">\n  <!-- Side Nav Slot (Accepts talos-side-nav, app-side-nav, or elements with [side-nav]) -->\n  <ng-content select=\"talos-side-nav, app-side-nav, [side-nav]\" />\n\n  <!-- Main Content Container Area -->\n  <div class=\"main-content-wrapper\">\n    <main class=\"main-content-container\" role=\"main\">\n      <ng-content />\n    </main>\n\n    <!-- Optional Blur Backdrop Overlay -->\n    @if (layoutService.shouldBlurMainContent()) {\n    <div class=\"main-backdrop-overlay\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n    }\n  </div>\n\n  <!-- Dynamic Right Side Panel Drawer Component -->\n  <talos-side-panel [isOpen]=\"layoutService.isRightPanelOpen()\"\n    [title]=\"layoutService.rightPanelOptions().title ?? 'Details'\"\n    [width]=\"layoutService.rightPanelOptions().width ?? '380px'\"\n    [mode]=\"layoutService.rightPanelOptions().mode ?? 'overlay'\" [component]=\"layoutService.rightPanelComponent()\"\n    [componentInputs]=\"layoutService.rightPanelInputs()\" (close)=\"layoutService.closeRightPanel()\" />\n</div>", styles: [":host{display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden;box-sizing:border-box;--sidebar-width: 260px;--sidebar-collapsed-width: 64px;--right-panel-default-width: 380px;--main-padding: 24px;--main-padding-expanded: 8px}:host.main-content-expanded{--main-padding: var(--main-padding-expanded)}:host:has(.is-fullscreen) .top-nav-bar,:host:has(.is-fullscreen) ::ng-deep talos-top-nav,:host:has(.is-fullscreen) ::ng-deep .talos-top-nav-host{z-index:1}:host:has(.is-fullscreen) .layout-body-wrapper{z-index:100000;overflow:visible}.top-nav-bar{height:60px;min-height:60px;display:flex;align-items:center;padding:0 20px;background:var(--talos-header-bg, var(--header-bg, #ffffff));border-bottom:1px solid var(--talos-header-border-color, var(--header-border-color, #e2e8f0));z-index:20}.layout-body-wrapper{display:flex;flex:1;overflow:hidden;position:relative;min-height:0}.main-content-wrapper{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;overflow:hidden}.main-content-container{flex:1;padding:var(--main-padding);transition:padding .25s cubic-bezier(.4,0,.2,1),filter .25s cubic-bezier(.4,0,.2,1);overflow-y:auto}:host.blur-backdrop .main-content-container{filter:blur(4px);pointer-events:none;-webkit-user-select:none;user-select:none}.main-backdrop-overlay{position:absolute;inset:0;background:#0f172a33;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:30;cursor:pointer;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "component", type: SidePanelComponent, selector: "talos-side-panel", inputs: ["isOpen", "title", "width", "mode", "component", "componentInputs"], outputs: ["close"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: MainLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-main-layout', imports: [SidePanelComponent], host: {
+                        'class': 'talos-main-layout-host',
+                        '[class.left-nav-collapsed]': 'layoutService.isLeftNavCollapsed()',
+                        '[class.right-panel-open]': 'layoutService.isRightPanelOpen()',
+                        '[class.right-panel-inline]': 'layoutService.isRightPanelInline()',
+                        '[class.main-content-expanded]': 'layoutService.isMainContentExpanded()',
+                        '[class.blur-backdrop]': 'layoutService.shouldBlurMainContent()'
+                    }, template: "<!-- Top Header Slot (Spanning 100% full width across top of viewport) -->\n<ng-content select=\"talos-top-nav, app-header, header, [top-nav], [header]\" />\n\n<div class=\"layout-body-wrapper\">\n  <!-- Side Nav Slot (Accepts talos-side-nav, app-side-nav, or elements with [side-nav]) -->\n  <ng-content select=\"talos-side-nav, app-side-nav, [side-nav]\" />\n\n  <!-- Main Content Container Area -->\n  <div class=\"main-content-wrapper\">\n    <main class=\"main-content-container\" role=\"main\">\n      <ng-content />\n    </main>\n\n    <!-- Optional Blur Backdrop Overlay -->\n    @if (layoutService.shouldBlurMainContent()) {\n    <div class=\"main-backdrop-overlay\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n    }\n  </div>\n\n  <!-- Dynamic Right Side Panel Drawer Component -->\n  <talos-side-panel [isOpen]=\"layoutService.isRightPanelOpen()\"\n    [title]=\"layoutService.rightPanelOptions().title ?? 'Details'\"\n    [width]=\"layoutService.rightPanelOptions().width ?? '380px'\"\n    [mode]=\"layoutService.rightPanelOptions().mode ?? 'overlay'\" [component]=\"layoutService.rightPanelComponent()\"\n    [componentInputs]=\"layoutService.rightPanelInputs()\" (close)=\"layoutService.closeRightPanel()\" />\n</div>", styles: [":host{display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden;box-sizing:border-box;--sidebar-width: 260px;--sidebar-collapsed-width: 64px;--right-panel-default-width: 380px;--main-padding: 24px;--main-padding-expanded: 8px}:host.main-content-expanded{--main-padding: var(--main-padding-expanded)}:host:has(.is-fullscreen) .top-nav-bar,:host:has(.is-fullscreen) ::ng-deep talos-top-nav,:host:has(.is-fullscreen) ::ng-deep .talos-top-nav-host{z-index:1}:host:has(.is-fullscreen) .layout-body-wrapper{z-index:100000;overflow:visible}.top-nav-bar{height:60px;min-height:60px;display:flex;align-items:center;padding:0 20px;background:var(--talos-header-bg, var(--header-bg, #ffffff));border-bottom:1px solid var(--talos-header-border-color, var(--header-border-color, #e2e8f0));z-index:20}.layout-body-wrapper{display:flex;flex:1;overflow:hidden;position:relative;min-height:0}.main-content-wrapper{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;overflow:hidden}.main-content-container{flex:1;padding:var(--main-padding);transition:padding .25s cubic-bezier(.4,0,.2,1),filter .25s cubic-bezier(.4,0,.2,1);overflow-y:auto}:host.blur-backdrop .main-content-container{filter:blur(4px);pointer-events:none;-webkit-user-select:none;user-select:none}.main-backdrop-overlay{position:absolute;inset:0;background:#0f172a33;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:30;cursor:pointer;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
+        }] });
+
+class TalosCardTitleDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TalosCardTitleDirective, isStandalone: true, selector: "talos-card-title, [talosCardTitle]", host: { classAttribute: "talos-card-title" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCardTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'talos-card-title, [talosCardTitle]',
+                    host: {
+                        'class': 'talos-card-title'
+                    }
+                }]
+        }] });
+class TalosCardSubtitleDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCardSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TalosCardSubtitleDirective, isStandalone: true, selector: "talos-card-subtitle, [talosCardSubtitle]", host: { classAttribute: "talos-card-subtitle" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCardSubtitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'talos-card-subtitle, [talosCardSubtitle]',
+                    host: {
+                        'class': 'talos-card-subtitle'
+                    }
+                }]
+        }] });
+class TalosCardAvatarDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCardAvatarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TalosCardAvatarDirective, isStandalone: true, selector: "[talosCardAvatar], [talosCardIcon]", host: { classAttribute: "talos-card-avatar" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCardAvatarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[talosCardAvatar], [talosCardIcon]',
+                    host: {
+                        'class': 'talos-card-avatar'
+                    }
+                }]
+        }] });
+class TalosCardActionsDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCardActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TalosCardActionsDirective, isStandalone: true, selector: "talos-card-actions, [talosCardActions]", host: { classAttribute: "talos-card-actions" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCardActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'talos-card-actions, [talosCardActions]',
+                    host: {
+                        'class': 'talos-card-actions'
+                    }
+                }]
+        }] });
+class TalosCardMediaDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCardMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TalosCardMediaDirective, isStandalone: true, selector: "talos-card-media, [talosCardMedia]", host: { classAttribute: "talos-card-media" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCardMediaDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'talos-card-media, [talosCardMedia]',
+                    host: {
+                        'class': 'talos-card-media'
+                    }
+                }]
+        }] });
+
+class TalosCardComponent {
+    /** Visual style variant of the card */
+    variant = input('elevated', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Inner padding size of the card container */
+    padding = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    /** Adds hover elevation lift and animated border glow */
+    hoverable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverable" }] : /* istanbul ignore next */ []));
+    /** Enables interactive pointer cursor, active state, and keyboard focus */
+    clickable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clickable" }] : /* istanbul ignore next */ []));
+    /** Indicates if card is in an active selected state */
+    selected = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    /** Disables interactions and reduces opacity */
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Emitted when the card is clicked or triggered via keyboard */
+    cardClick = output();
+    isClickable = computed(() => this.clickable() && !this.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isClickable" }] : /* istanbul ignore next */ []));
+    role = computed(() => {
+        if (this.clickable()) {
+            return 'button';
+        }
+        return undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    tabIndex = computed(() => {
+        if (this.disabled()) {
+            return -1;
+        }
+        if (this.clickable()) {
+            return 0;
+        }
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    onClick(event) {
+        if (this.disabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        if (this.clickable()) {
+            this.cardClick.emit(event);
+        }
+    }
+    onKeydown(event) {
+        if (this.disabled() || !this.clickable()) {
+            return;
+        }
+        const key = event instanceof KeyboardEvent ? event.key : '';
+        if (key === 'Enter' || key === ' ') {
+            event.preventDefault();
+            this.cardClick.emit(event);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: TalosCardComponent, isStandalone: true, selector: "talos-card, [talosCard]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onKeydown($event)", "keydown.space": "onKeydown($event)" }, properties: { "class.talos-card-elevated": "variant() === \"elevated\"", "class.talos-card-outlined": "variant() === \"outlined\"", "class.talos-card-flat": "variant() === \"flat\"", "class.talos-card-filled": "variant() === \"filled\"", "class.talos-card-padding-none": "padding() === \"none\"", "class.talos-card-padding-sm": "padding() === \"sm\"", "class.talos-card-padding-md": "padding() === \"md\"", "class.talos-card-padding-lg": "padding() === \"lg\"", "class.is-hoverable": "hoverable()", "class.is-clickable": "isClickable()", "class.is-selected": "selected()", "class.is-disabled": "disabled()", "attr.role": "role()", "attr.tabindex": "tabIndex()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-selected": "selected() ? \"true\" : null" }, classAttribute: "talos-card-host" }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:flex;flex-direction:column;position:relative;box-sizing:border-box;background-color:var(--talos-card-bg, var(--card-bg, #ffffff));color:var(--talos-text-color, var(--text-color, #0f172a));border-radius:var(--talos-card-radius, var(--border-radius-lg, .75rem));transition:background-color .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1);overflow:hidden}:host.talos-card-padding-none{padding:0}:host.talos-card-padding-sm{padding:.75rem 1rem;gap:.75rem}:host.talos-card-padding-md{padding:1.25rem 1.5rem;gap:1.125rem}:host.talos-card-padding-lg{padding:1.75rem 2rem;gap:1.5rem}:host.talos-card-elevated{background-color:var(--talos-card-bg, var(--card-bg, #ffffff));border:1px solid var(--talos-border-color, var(--border-color, #e2e8f0));box-shadow:var(--talos-card-shadow, 0 4px 6px -1px rgba(0, 0, 0, .04), 0 2px 4px -2px rgba(0, 0, 0, .03))}:host.talos-card-outlined{background-color:var(--talos-card-bg, var(--card-bg, #ffffff));border:1px solid var(--talos-border-color, var(--border-color, #e2e8f0));box-shadow:none}:host.talos-card-flat{background-color:transparent;border:1px solid transparent;box-shadow:none}:host.talos-card-filled{background-color:var(--talos-bg-subtle, var(--bg-subtle, #f8fafc));border:1px solid var(--talos-border-color, var(--border-color, #e2e8f0));box-shadow:none}:host.is-hoverable:not(.is-disabled):hover{box-shadow:var(--talos-card-shadow-hover, 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .04));border-color:var(--talos-border-hover, var(--border-hover, #cbd5e1));transform:translateY(-2px)}:host.is-clickable:not(.is-disabled){cursor:pointer;-webkit-user-select:none;user-select:none}:host.is-clickable:not(.is-disabled):hover{border-color:var(--talos-primary-color, #2563eb)}:host.is-clickable:not(.is-disabled):focus-visible{outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .25));border-color:var(--talos-primary-color, #2563eb)}:host.is-clickable:not(.is-disabled):active{transform:translateY(0);box-shadow:0 1px 2px #0000000d}:host.is-selected:not(.is-disabled){border-color:var(--talos-primary-color, #2563eb);box-shadow:0 0 0 2px var(--talos-primary-color, #2563eb);background-color:var(--talos-primary-light, rgba(37, 99, 235, .04))}:host.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-card, [talosCard]', host: {
+                        'class': 'talos-card-host',
+                        '[class.talos-card-elevated]': 'variant() === "elevated"',
+                        '[class.talos-card-outlined]': 'variant() === "outlined"',
+                        '[class.talos-card-flat]': 'variant() === "flat"',
+                        '[class.talos-card-filled]': 'variant() === "filled"',
+                        '[class.talos-card-padding-none]': 'padding() === "none"',
+                        '[class.talos-card-padding-sm]': 'padding() === "sm"',
+                        '[class.talos-card-padding-md]': 'padding() === "md"',
+                        '[class.talos-card-padding-lg]': 'padding() === "lg"',
+                        '[class.is-hoverable]': 'hoverable()',
+                        '[class.is-clickable]': 'isClickable()',
+                        '[class.is-selected]': 'selected()',
+                        '[class.is-disabled]': 'disabled()',
+                        '[attr.role]': 'role()',
+                        '[attr.tabindex]': 'tabIndex()',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.aria-selected]': 'selected() ? "true" : null',
+                        '(click)': 'onClick($event)',
+                        '(keydown.enter)': 'onKeydown($event)',
+                        '(keydown.space)': 'onKeydown($event)'
+                    }, template: "<ng-content />\n", styles: [":host{display:flex;flex-direction:column;position:relative;box-sizing:border-box;background-color:var(--talos-card-bg, var(--card-bg, #ffffff));color:var(--talos-text-color, var(--text-color, #0f172a));border-radius:var(--talos-card-radius, var(--border-radius-lg, .75rem));transition:background-color .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1);overflow:hidden}:host.talos-card-padding-none{padding:0}:host.talos-card-padding-sm{padding:.75rem 1rem;gap:.75rem}:host.talos-card-padding-md{padding:1.25rem 1.5rem;gap:1.125rem}:host.talos-card-padding-lg{padding:1.75rem 2rem;gap:1.5rem}:host.talos-card-elevated{background-color:var(--talos-card-bg, var(--card-bg, #ffffff));border:1px solid var(--talos-border-color, var(--border-color, #e2e8f0));box-shadow:var(--talos-card-shadow, 0 4px 6px -1px rgba(0, 0, 0, .04), 0 2px 4px -2px rgba(0, 0, 0, .03))}:host.talos-card-outlined{background-color:var(--talos-card-bg, var(--card-bg, #ffffff));border:1px solid var(--talos-border-color, var(--border-color, #e2e8f0));box-shadow:none}:host.talos-card-flat{background-color:transparent;border:1px solid transparent;box-shadow:none}:host.talos-card-filled{background-color:var(--talos-bg-subtle, var(--bg-subtle, #f8fafc));border:1px solid var(--talos-border-color, var(--border-color, #e2e8f0));box-shadow:none}:host.is-hoverable:not(.is-disabled):hover{box-shadow:var(--talos-card-shadow-hover, 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .04));border-color:var(--talos-border-hover, var(--border-hover, #cbd5e1));transform:translateY(-2px)}:host.is-clickable:not(.is-disabled){cursor:pointer;-webkit-user-select:none;user-select:none}:host.is-clickable:not(.is-disabled):hover{border-color:var(--talos-primary-color, #2563eb)}:host.is-clickable:not(.is-disabled):focus-visible{outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .25));border-color:var(--talos-primary-color, #2563eb)}:host.is-clickable:not(.is-disabled):active{transform:translateY(0);box-shadow:0 1px 2px #0000000d}:host.is-selected:not(.is-disabled){border-color:var(--talos-primary-color, #2563eb);box-shadow:0 0 0 2px var(--talos-primary-color, #2563eb);background-color:var(--talos-primary-light, rgba(37, 99, 235, .04))}:host.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }] } });
+
+class TalosCardHeaderComponent {
+    /** Optional title text displayed in the header */
+    title = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Optional subtitle text displayed beneath the title */
+    subtitle = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    /** Adds a divider border beneath the header */
+    bordered = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosCardHeaderComponent, isStandalone: true, selector: "talos-card-header, [talosCardHeader]", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-bordered": "bordered()" }, classAttribute: "talos-card-header-host" }, ngImport: i0, template: "<div class=\"talos-card-header-main\">\n  <div class=\"talos-card-header-leading\">\n    <ng-content select=\"[talosCardAvatar], [talosCardIcon], [avatar], [icon]\" />\n  </div>\n\n  @if (title() || subtitle()) {\n    <div class=\"talos-card-header-titles\">\n      @if (title()) {\n        <h3 class=\"talos-card-title\">{{ title() }}</h3>\n      }\n      @if (subtitle()) {\n        <p class=\"talos-card-subtitle\">{{ subtitle() }}</p>\n      }\n    </div>\n  }\n\n  <div class=\"talos-card-header-custom-titles\">\n    <ng-content select=\"talos-card-title, [talosCardTitle], [title]\" />\n    <ng-content select=\"talos-card-subtitle, [talosCardSubtitle], [subtitle]\" />\n  </div>\n\n  <div class=\"talos-card-header-content\">\n    <ng-content />\n  </div>\n</div>\n\n<div class=\"talos-card-header-actions\">\n  <ng-content select=\"talos-card-actions, [talosCardActions], [actions]\" />\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%;box-sizing:border-box}:host.is-bordered{padding-bottom:.875rem;border-bottom:1px solid var(--talos-card-header-border, var(--talos-border-color, #e2e8f0))}.talos-card-header-main{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}.talos-card-header-leading{display:flex;align-items:center;justify-content:center;flex-shrink:0}.talos-card-header-leading:empty{display:none}.talos-card-header-titles,.talos-card-header-custom-titles{display:flex;flex-direction:column;gap:.125rem;min-width:0}.talos-card-header-custom-titles:empty{display:none}.talos-card-header-content{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}.talos-card-header-content:empty{display:none}.talos-card-title{margin:0;font-size:1.0625rem;font-weight:700;line-height:1.35;letter-spacing:-.015em;color:var(--talos-text-color, var(--text-color, #0f172a));white-space:normal;overflow-wrap:break-word}.talos-card-subtitle{margin:0;font-size:.8125rem;font-weight:400;line-height:1.4;color:var(--talos-text-muted, var(--text-muted, #64748b));white-space:normal;overflow-wrap:break-word}.talos-card-header-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.talos-card-header-actions:empty{display:none}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCardHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-card-header, [talosCardHeader]', host: {
+                        'class': 'talos-card-header-host',
+                        '[class.is-bordered]': 'bordered()'
+                    }, template: "<div class=\"talos-card-header-main\">\n  <div class=\"talos-card-header-leading\">\n    <ng-content select=\"[talosCardAvatar], [talosCardIcon], [avatar], [icon]\" />\n  </div>\n\n  @if (title() || subtitle()) {\n    <div class=\"talos-card-header-titles\">\n      @if (title()) {\n        <h3 class=\"talos-card-title\">{{ title() }}</h3>\n      }\n      @if (subtitle()) {\n        <p class=\"talos-card-subtitle\">{{ subtitle() }}</p>\n      }\n    </div>\n  }\n\n  <div class=\"talos-card-header-custom-titles\">\n    <ng-content select=\"talos-card-title, [talosCardTitle], [title]\" />\n    <ng-content select=\"talos-card-subtitle, [talosCardSubtitle], [subtitle]\" />\n  </div>\n\n  <div class=\"talos-card-header-content\">\n    <ng-content />\n  </div>\n</div>\n\n<div class=\"talos-card-header-actions\">\n  <ng-content select=\"talos-card-actions, [talosCardActions], [actions]\" />\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%;box-sizing:border-box}:host.is-bordered{padding-bottom:.875rem;border-bottom:1px solid var(--talos-card-header-border, var(--talos-border-color, #e2e8f0))}.talos-card-header-main{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}.talos-card-header-leading{display:flex;align-items:center;justify-content:center;flex-shrink:0}.talos-card-header-leading:empty{display:none}.talos-card-header-titles,.talos-card-header-custom-titles{display:flex;flex-direction:column;gap:.125rem;min-width:0}.talos-card-header-custom-titles:empty{display:none}.talos-card-header-content{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}.talos-card-header-content:empty{display:none}.talos-card-title{margin:0;font-size:1.0625rem;font-weight:700;line-height:1.35;letter-spacing:-.015em;color:var(--talos-text-color, var(--text-color, #0f172a));white-space:normal;overflow-wrap:break-word}.talos-card-subtitle{margin:0;font-size:.8125rem;font-weight:400;line-height:1.4;color:var(--talos-text-muted, var(--text-muted, #64748b));white-space:normal;overflow-wrap:break-word}.talos-card-header-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.talos-card-header-actions:empty{display:none}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }] } });
+
+class TalosCardBodyComponent {
+    /** Optional override for body padding */
+    padding = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCardBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: TalosCardBodyComponent, isStandalone: true, selector: "talos-card-body, talos-card-content, [talosCardBody], [talosCardContent]", inputs: { padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.talos-card-body-padding-none": "padding() === \"none\"", "class.talos-card-body-padding-sm": "padding() === \"sm\"", "class.talos-card-body-padding-md": "padding() === \"md\"", "class.talos-card-body-padding-lg": "padding() === \"lg\"" }, classAttribute: "talos-card-body-host" }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;width:100%;box-sizing:border-box;flex:1;color:var(--talos-text-color, var(--text-color, #0f172a));line-height:1.5}:host.talos-card-body-padding-none{padding:0}:host.talos-card-body-padding-sm{padding:.75rem 0}:host.talos-card-body-padding-md{padding:1rem 0}:host.talos-card-body-padding-lg{padding:1.5rem 0}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCardBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-card-body, talos-card-content, [talosCardBody], [talosCardContent]', host: {
+                        'class': 'talos-card-body-host',
+                        '[class.talos-card-body-padding-none]': 'padding() === "none"',
+                        '[class.talos-card-body-padding-sm]': 'padding() === "sm"',
+                        '[class.talos-card-body-padding-md]': 'padding() === "md"',
+                        '[class.talos-card-body-padding-lg]': 'padding() === "lg"'
+                    }, template: "<ng-content />\n", styles: [":host{display:block;width:100%;box-sizing:border-box;flex:1;color:var(--talos-text-color, var(--text-color, #0f172a));line-height:1.5}:host.talos-card-body-padding-none{padding:0}:host.talos-card-body-padding-sm{padding:.75rem 0}:host.talos-card-body-padding-md{padding:1rem 0}:host.talos-card-body-padding-lg{padding:1.5rem 0}\n"] }]
+        }], propDecorators: { padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }] } });
+
+class TalosCardFooterComponent {
+    /** Adds a divider border above the footer */
+    bordered = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
+    /** Horizontal alignment of elements within the footer */
+    align = input('end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: TalosCardFooterComponent, isStandalone: true, selector: "talos-card-footer, [talosCardFooter]", inputs: { bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-bordered": "bordered()", "class.align-start": "align() === \"start\"", "class.align-center": "align() === \"center\"", "class.align-end": "align() === \"end\"", "class.align-between": "align() === \"between\"" }, classAttribute: "talos-card-footer-host" }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:flex;align-items:center;gap:.75rem;width:100%;box-sizing:border-box;flex-wrap:wrap}:host.is-bordered{padding-top:.875rem;border-top:1px solid var(--talos-card-footer-border, var(--talos-border-color, #e2e8f0))}:host.align-start{justify-content:flex-start}:host.align-center{justify-content:center}:host.align-end{justify-content:flex-end}:host.align-between{justify-content:space-between}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCardFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-card-footer, [talosCardFooter]', host: {
+                        'class': 'talos-card-footer-host',
+                        '[class.is-bordered]': 'bordered()',
+                        '[class.align-start]': 'align() === "start"',
+                        '[class.align-center]': 'align() === "center"',
+                        '[class.align-end]': 'align() === "end"',
+                        '[class.align-between]': 'align() === "between"'
+                    }, template: "<ng-content />\n", styles: [":host{display:flex;align-items:center;gap:.75rem;width:100%;box-sizing:border-box;flex-wrap:wrap}:host.is-bordered{padding-top:.875rem;border-top:1px solid var(--talos-card-footer-border, var(--talos-border-color, #e2e8f0))}:host.align-start{justify-content:flex-start}:host.align-center{justify-content:center}:host.align-end{justify-content:flex-end}:host.align-between{justify-content:space-between}\n"] }]
+        }], propDecorators: { bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
+
+const CARD_DECLARATIONS = [
+    TalosCardComponent,
+    TalosCardHeaderComponent,
+    TalosCardBodyComponent,
+    TalosCardFooterComponent,
+    TalosCardTitleDirective,
+    TalosCardSubtitleDirective,
+    TalosCardAvatarDirective,
+    TalosCardActionsDirective,
+    TalosCardMediaDirective
+];
+class TalosCardModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosCardModule, imports: [TalosCardComponent,
+            TalosCardHeaderComponent,
+            TalosCardBodyComponent,
+            TalosCardFooterComponent,
+            TalosCardTitleDirective,
+            TalosCardSubtitleDirective,
+            TalosCardAvatarDirective,
+            TalosCardActionsDirective,
+            TalosCardMediaDirective], exports: [TalosCardComponent,
+            TalosCardHeaderComponent,
+            TalosCardBodyComponent,
+            TalosCardFooterComponent,
+            TalosCardTitleDirective,
+            TalosCardSubtitleDirective,
+            TalosCardAvatarDirective,
+            TalosCardActionsDirective,
+            TalosCardMediaDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCardModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...CARD_DECLARATIONS],
+                    exports: [...CARD_DECLARATIONS]
+                }]
+        }] });
+
+class TalosExpansionPanelTitleDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosExpansionPanelTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TalosExpansionPanelTitleDirective, isStandalone: true, selector: "talos-expansion-panel-title, [talosExpansionPanelTitle], [expansionPanelTitle]", host: { classAttribute: "talos-expansion-panel-title" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosExpansionPanelTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'talos-expansion-panel-title, [talosExpansionPanelTitle], [expansionPanelTitle]',
+                    host: {
+                        'class': 'talos-expansion-panel-title'
+                    }
+                }]
+        }] });
+class TalosExpansionPanelDescriptionDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosExpansionPanelDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TalosExpansionPanelDescriptionDirective, isStandalone: true, selector: "talos-expansion-panel-description, [talosExpansionPanelDescription], [expansionPanelDescription]", host: { classAttribute: "talos-expansion-panel-description" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosExpansionPanelDescriptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'talos-expansion-panel-description, [talosExpansionPanelDescription], [expansionPanelDescription]',
+                    host: {
+                        'class': 'talos-expansion-panel-description'
+                    }
+                }]
+        }] });
+class TalosExpansionPanelIconDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosExpansionPanelIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TalosExpansionPanelIconDirective, isStandalone: true, selector: "[talosExpansionPanelIcon], [talosExpansionPanelAvatar], [expansionPanelIcon]", host: { classAttribute: "talos-expansion-panel-icon" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosExpansionPanelIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[talosExpansionPanelIcon], [talosExpansionPanelAvatar], [expansionPanelIcon]',
+                    host: {
+                        'class': 'talos-expansion-panel-icon'
+                    }
+                }]
+        }] });
+class TalosExpansionPanelActionsDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosExpansionPanelActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TalosExpansionPanelActionsDirective, isStandalone: true, selector: "talos-expansion-panel-actions, [talosExpansionPanelActions], [expansionPanelActions]", host: { classAttribute: "talos-expansion-panel-actions" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosExpansionPanelActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'talos-expansion-panel-actions, [talosExpansionPanelActions], [expansionPanelActions]',
+                    host: {
+                        'class': 'talos-expansion-panel-actions'
+                    }
+                }]
+        }] });
+class TalosExpansionPanelToggleDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosExpansionPanelToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TalosExpansionPanelToggleDirective, isStandalone: true, selector: "talos-expansion-panel-toggle, [talosExpansionPanelToggle], [expansionPanelToggle]", host: { classAttribute: "talos-expansion-panel-custom-toggle" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosExpansionPanelToggleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'talos-expansion-panel-toggle, [talosExpansionPanelToggle], [expansionPanelToggle]',
+                    host: {
+                        'class': 'talos-expansion-panel-custom-toggle'
+                    }
+                }]
+        }] });
+class TalosExpansionPanelContentDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosExpansionPanelContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TalosExpansionPanelContentDirective, isStandalone: true, selector: "ng-template[talosExpansionPanelContent], ng-template[expansionPanelContent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosExpansionPanelContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[talosExpansionPanelContent], ng-template[expansionPanelContent]',
+                }]
+        }] });
+
+class TalosExpansionPanelBodyComponent {
+    panel = inject(forwardRef(() => TalosExpansionPanelComponent), { optional: true });
+    /** Padding size inside the expansion panel body */
+    padding = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    effectivePadding = computed(() => {
+        if (this.padding() !== undefined) {
+            return this.padding();
+        }
+        return this.panel ? this.panel.effectivePadding() : 'md';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectivePadding" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosExpansionPanelBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: TalosExpansionPanelBodyComponent, isStandalone: true, selector: "talos-expansion-panel-body, [talosExpansionPanelBody], talos-expansion-panel-content", inputs: { padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.padding-none": "effectivePadding() === \"none\"", "class.padding-sm": "effectivePadding() === \"sm\"", "class.padding-md": "effectivePadding() === \"md\"", "class.padding-lg": "effectivePadding() === \"lg\"" }, classAttribute: "talos-expansion-panel-body-host" }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;box-sizing:border-box;font-family:var(--talos-font-sans, inherit);font-size:var(--talos-font-size-sm, .8125rem);color:var(--talos-text-secondary, #334155);line-height:var(--talos-line-height-relaxed, 1.625)}:host.padding-none{padding:0}:host.padding-sm{padding:.625rem 1.25rem .875rem}:host.padding-md{padding:.875rem 1.25rem 1.25rem}:host.padding-lg{padding:1.25rem 1.5rem 1.75rem}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosExpansionPanelBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-expansion-panel-body, [talosExpansionPanelBody], talos-expansion-panel-content', host: {
+                        'class': 'talos-expansion-panel-body-host',
+                        '[class.padding-none]': 'effectivePadding() === "none"',
+                        '[class.padding-sm]': 'effectivePadding() === "sm"',
+                        '[class.padding-md]': 'effectivePadding() === "md"',
+                        '[class.padding-lg]': 'effectivePadding() === "lg"'
+                    }, template: "<ng-content />\n", styles: [":host{display:block;box-sizing:border-box;font-family:var(--talos-font-sans, inherit);font-size:var(--talos-font-size-sm, .8125rem);color:var(--talos-text-secondary, #334155);line-height:var(--talos-line-height-relaxed, 1.625)}:host.padding-none{padding:0}:host.padding-sm{padding:.625rem 1.25rem .875rem}:host.padding-md{padding:.875rem 1.25rem 1.25rem}:host.padding-lg{padding:1.25rem 1.5rem 1.75rem}\n"] }]
+        }], propDecorators: { padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }] } });
+
+class TalosExpansionPanelGroupComponent {
+    /** Whether multiple panels can be expanded simultaneously */
+    multi = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multi" }] : /* istanbul ignore next */ []));
+    /** Unified visual variant for child panels */
+    variant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Unified body padding for child panels */
+    padding = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    /** Whether the entire group of panels is disabled */
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Whether panels have separation spacing instead of contiguous borders */
+    separated = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separated" }] : /* istanbul ignore next */ []));
+    panels = new Set();
+    constructor() {
+        // When multi mode is toggled off, ensure only at most one panel remains open
+        effect(() => {
+            const isMulti = this.multi();
+            if (!isMulti) {
+                let hasOpenPanel = false;
+                for (const panel of this.panels) {
+                    if (panel.expanded()) {
+                        if (hasOpenPanel) {
+                            panel.close();
+                        }
+                        else {
+                            hasOpenPanel = true;
+                        }
+                    }
+                }
+            }
+        });
+    }
+    registerPanel(panel) {
+        this.panels.add(panel);
+        if (!this.multi() && panel.expanded()) {
+            for (const existing of this.panels) {
+                if (existing !== panel && existing.expanded()) {
+                    existing.close();
+                }
+            }
+        }
+    }
+    unregisterPanel(panel) {
+        this.panels.delete(panel);
+    }
+    onPanelExpanded(expandedPanel) {
+        if (!this.multi()) {
+            for (const panel of this.panels) {
+                if (panel !== expandedPanel && panel.expanded()) {
+                    panel.close();
+                }
+            }
+        }
+    }
+    /** Expand all registered panels (only valid when multi-expand is enabled) */
+    expandAll() {
+        if (this.disabled() || !this.multi())
+            return;
+        for (const panel of this.panels) {
+            panel.open();
+        }
+    }
+    /** Collapse all registered panels */
+    collapseAll() {
+        for (const panel of this.panels) {
+            panel.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosExpansionPanelGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: TalosExpansionPanelGroupComponent, isStandalone: true, selector: "talos-expansion-panel-group, [talosExpansionPanelGroup], talos-accordion, [talosAccordion]", inputs: { multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, separated: { classPropertyName: "separated", publicName: "separated", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-separated": "separated() || variant() === \"separated\"", "class.is-joined": "!separated() && variant() !== \"separated\"", "class.is-disabled": "disabled()" }, classAttribute: "talos-expansion-panel-group-host" }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%}:host.is-separated{gap:.75rem}:host.is-joined{gap:0}:host.is-joined ::ng-deep>talos-expansion-panel,:host.is-joined ::ng-deep>[talosExpansionPanel]{border-radius:0}:host.is-joined ::ng-deep>talos-expansion-panel:not(:first-of-type),:host.is-joined ::ng-deep>[talosExpansionPanel]:not(:first-of-type){margin-top:-1px}:host.is-joined ::ng-deep>talos-expansion-panel:first-of-type,:host.is-joined ::ng-deep>[talosExpansionPanel]:first-of-type{border-top-left-radius:var(--talos-radius-lg, .5rem);border-top-right-radius:var(--talos-radius-lg, .5rem)}:host.is-joined ::ng-deep>talos-expansion-panel:last-of-type,:host.is-joined ::ng-deep>[talosExpansionPanel]:last-of-type{border-bottom-left-radius:var(--talos-radius-lg, .5rem);border-bottom-right-radius:var(--talos-radius-lg, .5rem)}:host.is-disabled{pointer-events:none;opacity:.6}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosExpansionPanelGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-expansion-panel-group, [talosExpansionPanelGroup], talos-accordion, [talosAccordion]', host: {
+                        'class': 'talos-expansion-panel-group-host',
+                        '[class.is-separated]': 'separated() || variant() === "separated"',
+                        '[class.is-joined]': '!separated() && variant() !== "separated"',
+                        '[class.is-disabled]': 'disabled()'
+                    }, template: "<ng-content />\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%}:host.is-separated{gap:.75rem}:host.is-joined{gap:0}:host.is-joined ::ng-deep>talos-expansion-panel,:host.is-joined ::ng-deep>[talosExpansionPanel]{border-radius:0}:host.is-joined ::ng-deep>talos-expansion-panel:not(:first-of-type),:host.is-joined ::ng-deep>[talosExpansionPanel]:not(:first-of-type){margin-top:-1px}:host.is-joined ::ng-deep>talos-expansion-panel:first-of-type,:host.is-joined ::ng-deep>[talosExpansionPanel]:first-of-type{border-top-left-radius:var(--talos-radius-lg, .5rem);border-top-right-radius:var(--talos-radius-lg, .5rem)}:host.is-joined ::ng-deep>talos-expansion-panel:last-of-type,:host.is-joined ::ng-deep>[talosExpansionPanel]:last-of-type{border-bottom-left-radius:var(--talos-radius-lg, .5rem);border-bottom-right-radius:var(--talos-radius-lg, .5rem)}:host.is-disabled{pointer-events:none;opacity:.6}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], separated: [{ type: i0.Input, args: [{ isSignal: true, alias: "separated", required: false }] }] } });
+
+let uniqueIdCounter = 0;
+class TalosExpansionPanelComponent {
+    group = inject(forwardRef(() => TalosExpansionPanelGroupComponent), { optional: true });
+    destroyRef = inject(DestroyRef);
+    id = `talos-expansion-panel-${++uniqueIdCounter}`;
+    contentId = `${this.id}-content`;
+    headerId = `${this.id}-header`;
+    /** Two-way bindable expanded state */
+    expanded = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    /** Whether the panel is disabled */
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Visual variant of the panel */
+    variant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Padding for the panel body */
+    padding = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    /** Whether to hide the expand toggle indicator */
+    hideToggle = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideToggle" }] : /* istanbul ignore next */ []));
+    /** Toggle indicator position */
+    togglePosition = input('right', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "togglePosition" }] : /* istanbul ignore next */ []));
+    /** Quick declarative title */
+    title = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Quick declarative subtitle/description */
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** Emitted when the panel opens */
+    opened = output();
+    /** Emitted when the panel closes */
+    closed = output();
+    customHeader;
+    customBody;
+    effectiveVariant = computed(() => {
+        if (this.variant() !== undefined) {
+            return this.variant();
+        }
+        if (this.group && this.group.variant() !== undefined) {
+            return this.group.variant();
+        }
+        return 'outlined';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveVariant" }] : /* istanbul ignore next */ []));
+    effectivePadding = computed(() => {
+        if (this.padding() !== undefined) {
+            return this.padding();
+        }
+        if (this.group && this.group.padding() !== undefined) {
+            return this.group.padding();
+        }
+        return 'md';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectivePadding" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => {
+        if (this.disabled()) {
+            return true;
+        }
+        return this.group ? this.group.disabled() : false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        if (this.group) {
+            this.group.registerPanel(this);
+            this.destroyRef.onDestroy(() => {
+                this.group?.unregisterPanel(this);
+            });
+        }
+    }
+    open() {
+        if (!this.effectiveDisabled() && !this.expanded()) {
+            this.expanded.set(true);
+            this.opened.emit();
+            this.group?.onPanelExpanded(this);
+        }
+    }
+    close() {
+        if (!this.effectiveDisabled() && this.expanded()) {
+            this.expanded.set(false);
+            this.closed.emit();
+        }
+    }
+    toggle() {
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        if (this.expanded()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosExpansionPanelComponent, isStandalone: true, selector: "talos-expansion-panel, [talosExpansionPanel]", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", 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 }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, hideToggle: { classPropertyName: "hideToggle", publicName: "hideToggle", isSignal: true, isRequired: false, transformFunction: null }, togglePosition: { classPropertyName: "togglePosition", publicName: "togglePosition", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", opened: "opened", closed: "closed" }, host: { properties: { "class.talos-expansion-panel-elevated": "effectiveVariant() === \"elevated\"", "class.talos-expansion-panel-outlined": "effectiveVariant() === \"outlined\"", "class.talos-expansion-panel-filled": "effectiveVariant() === \"filled\"", "class.talos-expansion-panel-flat": "effectiveVariant() === \"flat\"", "class.talos-expansion-panel-separated": "effectiveVariant() === \"separated\"", "class.is-expanded": "expanded()", "class.is-disabled": "effectiveDisabled()", "attr.id": "id", "attr.aria-disabled": "effectiveDisabled() ? \"true\" : null" }, classAttribute: "talos-expansion-panel-host" }, queries: [{ propertyName: "customHeader", first: true, predicate: TalosExpansionPanelHeaderComponent, descendants: true }, { propertyName: "customBody", first: true, predicate: TalosExpansionPanelBodyComponent, descendants: true }], ngImport: i0, template: "@if (!customHeader && (title() || description())) {\n  <talos-expansion-panel-header [title]=\"title()\" [description]=\"description()\" />\n} @else {\n  <ng-content select=\"talos-expansion-panel-header, [talosExpansionPanelHeader]\" />\n}\n\n<div\n  class=\"talos-expansion-panel-collapse\"\n  [class.is-expanded]=\"expanded()\"\n  [attr.id]=\"contentId\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"headerId\">\n  <div class=\"talos-expansion-panel-collapse-inner\">\n    @if (customBody) {\n      <ng-content select=\"talos-expansion-panel-body, [talosExpansionPanelBody], talos-expansion-panel-content\" />\n    } @else {\n      <div\n        class=\"talos-expansion-panel-default-body\"\n        [class.padding-none]=\"effectivePadding() === 'none'\"\n        [class.padding-sm]=\"effectivePadding() === 'sm'\"\n        [class.padding-md]=\"effectivePadding() === 'md'\"\n        [class.padding-lg]=\"effectivePadding() === 'lg'\">\n        <ng-content />\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--talos-bg-surface, #ffffff);color:var(--talos-text-primary, #0f172a);border-radius:var(--talos-radius-lg, .5rem);border:1px solid var(--talos-border-color, #cbd5e1);overflow:hidden;transition:background-color var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1)),border-color var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1)),box-shadow var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1))}:host.talos-expansion-panel-elevated{background-color:var(--talos-bg-surface, #ffffff);border:1px solid var(--talos-border-color, #e2e8f0);box-shadow:var(--talos-shadow-sm, 0 1px 3px 0 rgba(0, 0, 0, .06), 0 1px 2px -1px rgba(0, 0, 0, .04))}:host.talos-expansion-panel-elevated.is-expanded{box-shadow:var(--talos-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .04))}:host.talos-expansion-panel-outlined{background-color:var(--talos-bg-surface, #ffffff);border:1px solid var(--talos-border-color, #cbd5e1);box-shadow:none}:host.talos-expansion-panel-filled{background-color:var(--talos-bg-subtle, #f1f5f9);border:1px solid var(--talos-border-subtle, #e2e8f0);box-shadow:none}:host.talos-expansion-panel-flat{background-color:transparent;border:none;border-bottom:1px solid var(--talos-border-color, #e2e8f0);border-radius:0;box-shadow:none}:host.talos-expansion-panel-separated{background-color:var(--talos-bg-surface, #ffffff);border:1px solid var(--talos-border-color, #cbd5e1);box-shadow:var(--talos-shadow-xs, 0 1px 2px 0 rgba(0, 0, 0, .04))}:host.is-expanded ::ng-deep .talos-expansion-panel-header-host{border-bottom:1px solid var(--talos-border-subtle, rgba(0, 0, 0, .06))}:host.is-disabled{opacity:.6;pointer-events:none}.talos-expansion-panel-collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s cubic-bezier(.4,0,.2,1)}.talos-expansion-panel-collapse.is-expanded{grid-template-rows:1fr}.talos-expansion-panel-collapse-inner{overflow:hidden;min-height:0}.talos-expansion-panel-default-body{box-sizing:border-box;font-family:var(--talos-font-sans, inherit);font-size:var(--talos-font-size-sm, .8125rem);color:var(--talos-text-secondary, #334155);line-height:var(--talos-line-height-relaxed, 1.625)}.talos-expansion-panel-default-body.padding-none{padding:0}.talos-expansion-panel-default-body.padding-sm{padding:.625rem 1.25rem .875rem}.talos-expansion-panel-default-body.padding-md{padding:.875rem 1.25rem 1.25rem}.talos-expansion-panel-default-body.padding-lg{padding:1.25rem 1.5rem 1.75rem}\n"], dependencies: [{ kind: "component", type: TalosExpansionPanelHeaderComponent, selector: "talos-expansion-panel-header, [talosExpansionPanelHeader]", inputs: ["title", "description", "hideToggle", "togglePosition", "disabled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosExpansionPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-expansion-panel, [talosExpansionPanel]', imports: [TalosExpansionPanelHeaderComponent], host: {
+                        'class': 'talos-expansion-panel-host',
+                        '[class.talos-expansion-panel-elevated]': 'effectiveVariant() === "elevated"',
+                        '[class.talos-expansion-panel-outlined]': 'effectiveVariant() === "outlined"',
+                        '[class.talos-expansion-panel-filled]': 'effectiveVariant() === "filled"',
+                        '[class.talos-expansion-panel-flat]': 'effectiveVariant() === "flat"',
+                        '[class.talos-expansion-panel-separated]': 'effectiveVariant() === "separated"',
+                        '[class.is-expanded]': 'expanded()',
+                        '[class.is-disabled]': 'effectiveDisabled()',
+                        '[attr.id]': 'id',
+                        '[attr.aria-disabled]': 'effectiveDisabled() ? "true" : null'
+                    }, template: "@if (!customHeader && (title() || description())) {\n  <talos-expansion-panel-header [title]=\"title()\" [description]=\"description()\" />\n} @else {\n  <ng-content select=\"talos-expansion-panel-header, [talosExpansionPanelHeader]\" />\n}\n\n<div\n  class=\"talos-expansion-panel-collapse\"\n  [class.is-expanded]=\"expanded()\"\n  [attr.id]=\"contentId\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"headerId\">\n  <div class=\"talos-expansion-panel-collapse-inner\">\n    @if (customBody) {\n      <ng-content select=\"talos-expansion-panel-body, [talosExpansionPanelBody], talos-expansion-panel-content\" />\n    } @else {\n      <div\n        class=\"talos-expansion-panel-default-body\"\n        [class.padding-none]=\"effectivePadding() === 'none'\"\n        [class.padding-sm]=\"effectivePadding() === 'sm'\"\n        [class.padding-md]=\"effectivePadding() === 'md'\"\n        [class.padding-lg]=\"effectivePadding() === 'lg'\">\n        <ng-content />\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--talos-bg-surface, #ffffff);color:var(--talos-text-primary, #0f172a);border-radius:var(--talos-radius-lg, .5rem);border:1px solid var(--talos-border-color, #cbd5e1);overflow:hidden;transition:background-color var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1)),border-color var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1)),box-shadow var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1))}:host.talos-expansion-panel-elevated{background-color:var(--talos-bg-surface, #ffffff);border:1px solid var(--talos-border-color, #e2e8f0);box-shadow:var(--talos-shadow-sm, 0 1px 3px 0 rgba(0, 0, 0, .06), 0 1px 2px -1px rgba(0, 0, 0, .04))}:host.talos-expansion-panel-elevated.is-expanded{box-shadow:var(--talos-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .04))}:host.talos-expansion-panel-outlined{background-color:var(--talos-bg-surface, #ffffff);border:1px solid var(--talos-border-color, #cbd5e1);box-shadow:none}:host.talos-expansion-panel-filled{background-color:var(--talos-bg-subtle, #f1f5f9);border:1px solid var(--talos-border-subtle, #e2e8f0);box-shadow:none}:host.talos-expansion-panel-flat{background-color:transparent;border:none;border-bottom:1px solid var(--talos-border-color, #e2e8f0);border-radius:0;box-shadow:none}:host.talos-expansion-panel-separated{background-color:var(--talos-bg-surface, #ffffff);border:1px solid var(--talos-border-color, #cbd5e1);box-shadow:var(--talos-shadow-xs, 0 1px 2px 0 rgba(0, 0, 0, .04))}:host.is-expanded ::ng-deep .talos-expansion-panel-header-host{border-bottom:1px solid var(--talos-border-subtle, rgba(0, 0, 0, .06))}:host.is-disabled{opacity:.6;pointer-events:none}.talos-expansion-panel-collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s cubic-bezier(.4,0,.2,1)}.talos-expansion-panel-collapse.is-expanded{grid-template-rows:1fr}.talos-expansion-panel-collapse-inner{overflow:hidden;min-height:0}.talos-expansion-panel-default-body{box-sizing:border-box;font-family:var(--talos-font-sans, inherit);font-size:var(--talos-font-size-sm, .8125rem);color:var(--talos-text-secondary, #334155);line-height:var(--talos-line-height-relaxed, 1.625)}.talos-expansion-panel-default-body.padding-none{padding:0}.talos-expansion-panel-default-body.padding-sm{padding:.625rem 1.25rem .875rem}.talos-expansion-panel-default-body.padding-md{padding:.875rem 1.25rem 1.25rem}.talos-expansion-panel-default-body.padding-lg{padding:1.25rem 1.5rem 1.75rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], hideToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideToggle", required: false }] }], togglePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "togglePosition", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], customHeader: [{
+                type: ContentChild,
+                args: [TalosExpansionPanelHeaderComponent]
+            }], customBody: [{
+                type: ContentChild,
+                args: [TalosExpansionPanelBodyComponent]
+            }] } });
+
+class TalosExpansionPanelHeaderComponent {
+    LucideChevronDown = LucideChevronDown;
+    panel = inject(forwardRef(() => TalosExpansionPanelComponent), { optional: true });
+    /** Optional direct title text */
+    title = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Optional direct description/subtitle text */
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** Whether to hide the expansion toggle indicator */
+    hideToggle = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideToggle" }] : /* istanbul ignore next */ []));
+    /** Toggle indicator position ('left' | 'right' | 'none') */
+    togglePosition = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "togglePosition" }] : /* istanbul ignore next */ []));
+    /** Whether the header is disabled */
+    disabled = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    isExpanded = computed(() => {
+        return this.panel ? this.panel.expanded() : false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => {
+        if (this.disabled() !== undefined) {
+            return !!this.disabled();
+        }
+        return this.panel ? this.panel.disabled() : false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    shouldHideToggle = computed(() => {
+        if (this.hideToggle() !== undefined) {
+            return !!this.hideToggle();
+        }
+        return this.panel ? this.panel.hideToggle() : false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shouldHideToggle" }] : /* istanbul ignore next */ []));
+    effectiveTogglePosition = computed(() => {
+        if (this.shouldHideToggle()) {
+            return 'none';
+        }
+        if (this.togglePosition() !== undefined) {
+            return this.togglePosition();
+        }
+        return this.panel ? this.panel.togglePosition() : 'right';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveTogglePosition" }] : /* istanbul ignore next */ []));
+    onClick(event) {
+        if (this.isDisabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        this.panel?.toggle();
+    }
+    onKeydown(event) {
+        if (this.isDisabled()) {
+            return;
+        }
+        event.preventDefault();
+        this.panel?.toggle();
+    }
+    onActionsClick(event) {
+        // Prevent clicking on action buttons or custom interactive controls from toggling the panel
+        event.stopPropagation();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosExpansionPanelHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosExpansionPanelHeaderComponent, isStandalone: true, selector: "talos-expansion-panel-header, [talosExpansionPanelHeader]", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, hideToggle: { classPropertyName: "hideToggle", publicName: "hideToggle", isSignal: true, isRequired: false, transformFunction: null }, togglePosition: { classPropertyName: "togglePosition", publicName: "togglePosition", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "button" }, listeners: { "click": "onClick($event)", "keydown.enter": "onKeydown($event)", "keydown.space": "onKeydown($event)" }, properties: { "class.is-expanded": "isExpanded()", "class.is-disabled": "isDisabled()", "class.toggle-position-left": "effectiveTogglePosition() === \"left\"", "class.toggle-position-right": "effectiveTogglePosition() === \"right\"", "attr.tabindex": "isDisabled() ? -1 : 0", "attr.aria-expanded": "isExpanded()", "attr.aria-disabled": "isDisabled() ? \"true\" : null" }, classAttribute: "talos-expansion-panel-header-host" }, ngImport: i0, template: "@if (effectiveTogglePosition() === 'left') {\n  <div class=\"talos-expansion-panel-toggle-wrapper talos-expansion-panel-toggle-left\" [class.is-rotated]=\"isExpanded()\">\n    <ng-content select=\"talos-expansion-panel-toggle, [talosExpansionPanelToggle], [expansionPanelToggle]\">\n      <svg lucideChevronDown [size]=\"16\" class=\"talos-expansion-panel-chevron\" aria-hidden=\"true\"></svg>\n    </ng-content>\n  </div>\n}\n\n<div class=\"talos-expansion-panel-header-leading\">\n  <ng-content select=\"[talosExpansionPanelIcon], [talosExpansionPanelAvatar], [expansionPanelIcon], [avatar], [icon]\" />\n</div>\n\n<div class=\"talos-expansion-panel-header-titles\">\n  @if (title()) {\n    <span class=\"talos-expansion-panel-title-text\">{{ title() }}</span>\n  }\n  <ng-content select=\"talos-expansion-panel-title, [talosExpansionPanelTitle], [expansionPanelTitle], [title]\" />\n\n  @if (description()) {\n    <span class=\"talos-expansion-panel-description-text\">{{ description() }}</span>\n  }\n  <ng-content select=\"talos-expansion-panel-description, [talosExpansionPanelDescription], [expansionPanelDescription], [description]\" />\n</div>\n\n<div class=\"talos-expansion-panel-header-custom-content\">\n  <ng-content />\n</div>\n\n<div class=\"talos-expansion-panel-header-actions\" (click)=\"onActionsClick($event)\">\n  <ng-content select=\"talos-expansion-panel-actions, [talosExpansionPanelActions], [expansionPanelActions], [actions]\" />\n</div>\n\n@if (effectiveTogglePosition() === 'right') {\n  <div class=\"talos-expansion-panel-toggle-wrapper talos-expansion-panel-toggle-right\" [class.is-rotated]=\"isExpanded()\">\n    <ng-content select=\"talos-expansion-panel-toggle, [talosExpansionPanelToggle], [expansionPanelToggle]\">\n      <svg lucideChevronDown [size]=\"16\" class=\"talos-expansion-panel-chevron\" aria-hidden=\"true\"></svg>\n    </ng-content>\n  </div>\n}\n", styles: [":host{display:flex;align-items:center;gap:.875rem;padding:.875rem 1.25rem;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:transparent;color:var(--talos-text-primary, #0f172a);font-family:var(--talos-font-sans, inherit);transition:background-color var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1)),color var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1));outline:none;min-height:3rem;box-sizing:border-box}:host:hover:not(.is-disabled){background-color:var(--talos-bg-subtle, rgba(0, 0, 0, .02))}:host:focus-visible{box-shadow:inset 0 0 0 2px var(--talos-border-focus, #2563eb)}:host.is-disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.talos-expansion-panel-header-leading{display:flex;align-items:center;justify-content:center;flex-shrink:0}.talos-expansion-panel-header-leading:empty{display:none}.talos-expansion-panel-header-leading ::ng-deep svg{width:1.125rem;height:1.125rem;color:var(--talos-text-secondary, #334155)}.talos-expansion-panel-header-titles{display:flex;flex-direction:column;gap:.125rem;flex:1 1 auto;min-width:0}.talos-expansion-panel-header-titles .talos-expansion-panel-title-text{font-size:var(--talos-font-size-base, .875rem);font-weight:var(--talos-font-weight-semibold, 600);color:var(--talos-text-primary, #0f172a);line-height:var(--talos-line-height-snug, 1.375);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.talos-expansion-panel-header-titles .talos-expansion-panel-description-text{font-size:var(--talos-font-size-xs, .75rem);color:var(--talos-text-muted, #64748b);line-height:var(--talos-line-height-normal, 1.5)}::ng-deep .talos-expansion-panel-title{font-size:var(--talos-font-size-base, .875rem);font-weight:var(--talos-font-weight-semibold, 600);color:var(--talos-text-primary, #0f172a)}::ng-deep .talos-expansion-panel-description{font-size:var(--talos-font-size-xs, .75rem);color:var(--talos-text-muted, #64748b)}.talos-expansion-panel-header-custom-content{display:flex;align-items:center;gap:.75rem}.talos-expansion-panel-header-custom-content:empty{display:none}.talos-expansion-panel-header-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex-shrink:0}.talos-expansion-panel-header-actions:empty{display:none}.talos-expansion-panel-toggle-wrapper{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--talos-text-muted, #64748b);transition:transform var(--talos-transition, .2s cubic-bezier(.4, 0, .2, 1)),color var(--talos-transition, .2s cubic-bezier(.4, 0, .2, 1))}.talos-expansion-panel-toggle-wrapper .talos-expansion-panel-chevron{width:1.125rem;height:1.125rem;display:block;transition:transform var(--talos-transition, .2s cubic-bezier(.4, 0, .2, 1))}.talos-expansion-panel-toggle-wrapper.is-rotated .talos-expansion-panel-chevron{transform:rotate(180deg)}.talos-expansion-panel-toggle-wrapper.talos-expansion-panel-toggle-left{margin-right:.125rem}.talos-expansion-panel-toggle-wrapper.talos-expansion-panel-toggle-right{margin-left:.5rem}:host(:hover:not(.is-disabled)) .talos-expansion-panel-toggle-wrapper{color:var(--talos-text-primary, #0f172a)}\n"], dependencies: [{ kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosExpansionPanelHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-expansion-panel-header, [talosExpansionPanelHeader]', imports: [LucideChevronDown], host: {
+                        'class': 'talos-expansion-panel-header-host',
+                        '[class.is-expanded]': 'isExpanded()',
+                        '[class.is-disabled]': 'isDisabled()',
+                        '[class.toggle-position-left]': 'effectiveTogglePosition() === "left"',
+                        '[class.toggle-position-right]': 'effectiveTogglePosition() === "right"',
+                        'role': 'button',
+                        '[attr.tabindex]': 'isDisabled() ? -1 : 0',
+                        '[attr.aria-expanded]': 'isExpanded()',
+                        '[attr.aria-disabled]': 'isDisabled() ? "true" : null',
+                        '(click)': 'onClick($event)',
+                        '(keydown.enter)': 'onKeydown($event)',
+                        '(keydown.space)': 'onKeydown($event)'
+                    }, template: "@if (effectiveTogglePosition() === 'left') {\n  <div class=\"talos-expansion-panel-toggle-wrapper talos-expansion-panel-toggle-left\" [class.is-rotated]=\"isExpanded()\">\n    <ng-content select=\"talos-expansion-panel-toggle, [talosExpansionPanelToggle], [expansionPanelToggle]\">\n      <svg lucideChevronDown [size]=\"16\" class=\"talos-expansion-panel-chevron\" aria-hidden=\"true\"></svg>\n    </ng-content>\n  </div>\n}\n\n<div class=\"talos-expansion-panel-header-leading\">\n  <ng-content select=\"[talosExpansionPanelIcon], [talosExpansionPanelAvatar], [expansionPanelIcon], [avatar], [icon]\" />\n</div>\n\n<div class=\"talos-expansion-panel-header-titles\">\n  @if (title()) {\n    <span class=\"talos-expansion-panel-title-text\">{{ title() }}</span>\n  }\n  <ng-content select=\"talos-expansion-panel-title, [talosExpansionPanelTitle], [expansionPanelTitle], [title]\" />\n\n  @if (description()) {\n    <span class=\"talos-expansion-panel-description-text\">{{ description() }}</span>\n  }\n  <ng-content select=\"talos-expansion-panel-description, [talosExpansionPanelDescription], [expansionPanelDescription], [description]\" />\n</div>\n\n<div class=\"talos-expansion-panel-header-custom-content\">\n  <ng-content />\n</div>\n\n<div class=\"talos-expansion-panel-header-actions\" (click)=\"onActionsClick($event)\">\n  <ng-content select=\"talos-expansion-panel-actions, [talosExpansionPanelActions], [expansionPanelActions], [actions]\" />\n</div>\n\n@if (effectiveTogglePosition() === 'right') {\n  <div class=\"talos-expansion-panel-toggle-wrapper talos-expansion-panel-toggle-right\" [class.is-rotated]=\"isExpanded()\">\n    <ng-content select=\"talos-expansion-panel-toggle, [talosExpansionPanelToggle], [expansionPanelToggle]\">\n      <svg lucideChevronDown [size]=\"16\" class=\"talos-expansion-panel-chevron\" aria-hidden=\"true\"></svg>\n    </ng-content>\n  </div>\n}\n", styles: [":host{display:flex;align-items:center;gap:.875rem;padding:.875rem 1.25rem;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:transparent;color:var(--talos-text-primary, #0f172a);font-family:var(--talos-font-sans, inherit);transition:background-color var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1)),color var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1));outline:none;min-height:3rem;box-sizing:border-box}:host:hover:not(.is-disabled){background-color:var(--talos-bg-subtle, rgba(0, 0, 0, .02))}:host:focus-visible{box-shadow:inset 0 0 0 2px var(--talos-border-focus, #2563eb)}:host.is-disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.talos-expansion-panel-header-leading{display:flex;align-items:center;justify-content:center;flex-shrink:0}.talos-expansion-panel-header-leading:empty{display:none}.talos-expansion-panel-header-leading ::ng-deep svg{width:1.125rem;height:1.125rem;color:var(--talos-text-secondary, #334155)}.talos-expansion-panel-header-titles{display:flex;flex-direction:column;gap:.125rem;flex:1 1 auto;min-width:0}.talos-expansion-panel-header-titles .talos-expansion-panel-title-text{font-size:var(--talos-font-size-base, .875rem);font-weight:var(--talos-font-weight-semibold, 600);color:var(--talos-text-primary, #0f172a);line-height:var(--talos-line-height-snug, 1.375);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.talos-expansion-panel-header-titles .talos-expansion-panel-description-text{font-size:var(--talos-font-size-xs, .75rem);color:var(--talos-text-muted, #64748b);line-height:var(--talos-line-height-normal, 1.5)}::ng-deep .talos-expansion-panel-title{font-size:var(--talos-font-size-base, .875rem);font-weight:var(--talos-font-weight-semibold, 600);color:var(--talos-text-primary, #0f172a)}::ng-deep .talos-expansion-panel-description{font-size:var(--talos-font-size-xs, .75rem);color:var(--talos-text-muted, #64748b)}.talos-expansion-panel-header-custom-content{display:flex;align-items:center;gap:.75rem}.talos-expansion-panel-header-custom-content:empty{display:none}.talos-expansion-panel-header-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex-shrink:0}.talos-expansion-panel-header-actions:empty{display:none}.talos-expansion-panel-toggle-wrapper{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--talos-text-muted, #64748b);transition:transform var(--talos-transition, .2s cubic-bezier(.4, 0, .2, 1)),color var(--talos-transition, .2s cubic-bezier(.4, 0, .2, 1))}.talos-expansion-panel-toggle-wrapper .talos-expansion-panel-chevron{width:1.125rem;height:1.125rem;display:block;transition:transform var(--talos-transition, .2s cubic-bezier(.4, 0, .2, 1))}.talos-expansion-panel-toggle-wrapper.is-rotated .talos-expansion-panel-chevron{transform:rotate(180deg)}.talos-expansion-panel-toggle-wrapper.talos-expansion-panel-toggle-left{margin-right:.125rem}.talos-expansion-panel-toggle-wrapper.talos-expansion-panel-toggle-right{margin-left:.5rem}:host(:hover:not(.is-disabled)) .talos-expansion-panel-toggle-wrapper{color:var(--talos-text-primary, #0f172a)}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], hideToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideToggle", required: false }] }], togglePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "togglePosition", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+const EXPANSION_PANEL_DECLARATIONS = [
+    TalosExpansionPanelComponent,
+    TalosExpansionPanelHeaderComponent,
+    TalosExpansionPanelBodyComponent,
+    TalosExpansionPanelGroupComponent,
+    TalosExpansionPanelTitleDirective,
+    TalosExpansionPanelDescriptionDirective,
+    TalosExpansionPanelIconDirective,
+    TalosExpansionPanelActionsDirective,
+    TalosExpansionPanelToggleDirective,
+    TalosExpansionPanelContentDirective
+];
+class TalosExpansionPanelModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosExpansionPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosExpansionPanelModule, imports: [TalosExpansionPanelComponent,
+            TalosExpansionPanelHeaderComponent,
+            TalosExpansionPanelBodyComponent,
+            TalosExpansionPanelGroupComponent,
+            TalosExpansionPanelTitleDirective,
+            TalosExpansionPanelDescriptionDirective,
+            TalosExpansionPanelIconDirective,
+            TalosExpansionPanelActionsDirective,
+            TalosExpansionPanelToggleDirective,
+            TalosExpansionPanelContentDirective], exports: [TalosExpansionPanelComponent,
+            TalosExpansionPanelHeaderComponent,
+            TalosExpansionPanelBodyComponent,
+            TalosExpansionPanelGroupComponent,
+            TalosExpansionPanelTitleDirective,
+            TalosExpansionPanelDescriptionDirective,
+            TalosExpansionPanelIconDirective,
+            TalosExpansionPanelActionsDirective,
+            TalosExpansionPanelToggleDirective,
+            TalosExpansionPanelContentDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosExpansionPanelModule, imports: [TalosExpansionPanelComponent,
+            TalosExpansionPanelHeaderComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosExpansionPanelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...EXPANSION_PANEL_DECLARATIONS],
+                    exports: [...EXPANSION_PANEL_DECLARATIONS]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LayoutService, MainLayoutComponent, SidePanelComponent, TalosCardActionsDirective, TalosCardAvatarDirective, TalosCardBodyComponent, TalosCardComponent, TalosCardFooterComponent, TalosCardHeaderComponent, TalosCardMediaDirective, TalosCardModule, TalosCardSubtitleDirective, TalosCardTitleDirective, TalosExpansionPanelActionsDirective, TalosExpansionPanelBodyComponent, TalosExpansionPanelComponent, TalosExpansionPanelContentDirective, TalosExpansionPanelDescriptionDirective, TalosExpansionPanelGroupComponent, TalosExpansionPanelHeaderComponent, TalosExpansionPanelIconDirective, TalosExpansionPanelModule, TalosExpansionPanelTitleDirective, TalosExpansionPanelToggleDirective };
+//# sourceMappingURL=weeehaoooz-talos-ui-layout.mjs.map