@eduboxpro/studio 0.1.15 → 0.1.17

package/fesm2022/eduboxpro-studio.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, signal, effect, Injectable, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, input, computed, ChangeDetectionStrategy, Component, output, PLATFORM_ID, ElementRef, forwardRef, viewChild, DOCUMENT as DOCUMENT$1, DestroyRef, Injector, contentChild, model, afterNextRender, HostListener, Renderer2, Directive } from '@angular/core';
+import { InjectionToken, inject, signal, effect, Injectable, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, input, computed, ChangeDetectionStrategy, Component, output, PLATFORM_ID, ElementRef, contentChild, viewChild, forwardRef, DOCUMENT as DOCUMENT$1, DestroyRef, Injector, model, afterNextRender, HostListener, TemplateRef, ContentChild, Input, Directive, contentChildren, Renderer2 } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { DOCUMENT, CommonModule, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import * as LucideIcons from 'lucide-angular';
@@ -8,7 +8,7 @@ import * as i1 from '@angular/router';
 import { Router, NavigationEnd, RouterModule, RouterLink, RouterLinkActive } from '@angular/router';
 import { filter } from 'rxjs/operators';
 import * as i1$2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS } from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { autoUpdate, offset, flip, shift, arrow, computePosition } from '@floating-ui/dom';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 
@@ -1267,6 +1267,656 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                     }, template: `<ng-content select="studio-button" />`, styles: [":host{display:inline-flex;align-items:center;position:relative}:host(.studio-button-group--horizontal){flex-direction:row}:host(.studio-button-group--vertical){flex-direction:column}:host(.studio-button-group--spacing-none){gap:0}:host(.studio-button-group--spacing-xs){gap:var(--studio-spacing-xs)}:host(.studio-button-group--spacing-sm){gap:var(--studio-spacing-sm)}:host(.studio-button-group--spacing-md){gap:var(--studio-spacing-md)}:host(.studio-button-group--spacing-lg){gap:var(--studio-spacing-lg)}:host(.studio-button-group--align-start){justify-content:flex-start}:host(.studio-button-group--align-center){justify-content:center}:host(.studio-button-group--align-end){justify-content:flex-end}:host(.studio-button-group--align-stretch){align-items:stretch}:host(.studio-button-group--align-stretch) ::ng-deep studio-button{flex:1}:host(.studio-button-group--full){width:100%}:host(.studio-button-group--full) ::ng-deep studio-button{flex:1}:host(.studio-button-group--attached){gap:0}:host(.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--attached{margin:0;position:relative}:host(.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--middle{border-radius:0}:host(.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--first:not(.studio-button-group__item--last){border-top-right-radius:0;border-bottom-right-radius:0}:host(.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--last:not(.studio-button-group__item--first){border-top-left-radius:0;border-bottom-left-radius:0}:host(.studio-button-group--attached).studio-button-group--horizontal ::ng-deep studio-button.studio-button-group__item--attached:not(:last-child){border-right:1px solid rgba(0,0,0,.1)}:host(.studio-button-group--attached).studio-button-group--horizontal ::ng-deep studio-button.studio-button-group__item--attached.studio-button--outline:not(:last-child){margin-right:-1px}:host(.studio-button-group--vertical){align-items:stretch}:host(.studio-button-group--vertical) ::ng-deep studio-button{width:100%;justify-content:flex-start}:host(.studio-button-group--vertical.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--first:not(.studio-button-group__item--last){border-top-right-radius:var(--studio-radius-sm);border-bottom-right-radius:0;border-top-left-radius:var(--studio-radius-sm);border-bottom-left-radius:0}:host(.studio-button-group--vertical.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--last:not(.studio-button-group__item--first){border-top-left-radius:0;border-bottom-left-radius:var(--studio-radius-sm);border-top-right-radius:0;border-bottom-right-radius:var(--studio-radius-sm)}:host(.studio-button-group--vertical.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--attached:not(:last-child){border-right:none;border-bottom:1px solid rgba(255,255,255,.2)}:host(.studio-button-group--vertical.studio-button-group--attached) ::ng-deep studio-button.studio-button-group__item--middle{border-radius:0}:host(.studio-button-group--vertical.studio-button-group--full) ::ng-deep studio-button{width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { orientationInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], sizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variantInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], colorInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], radiusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], attached: [{ type: i0.Input, args: [{ isSignal: true, alias: "attached", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }] } });
 
+/**
+ * Card component for displaying content in a container
+ *
+ * @example
+ * <studio-card variant="elevated" color="primary">
+ *   <div card-header>Header</div>
+ *   <div card-body>Content</div>
+ *   <div card-footer>Footer</div>
+ * </studio-card>
+ */
+class CardComponent {
+    configService = inject(StudioConfigService);
+    cardDefaults = computed(() => this.configService.config().components?.card, ...(ngDevMode ? [{ debugName: "cardDefaults" }] : []));
+    // Style inputs with config defaults
+    variantInput = input(undefined, ...(ngDevMode ? [{ debugName: "variantInput", alias: 'variant' }] : [{ alias: 'variant' }]));
+    sizeInput = input(undefined, ...(ngDevMode ? [{ debugName: "sizeInput", alias: 'size' }] : [{ alias: 'size' }]));
+    colorInput = input(undefined, ...(ngDevMode ? [{ debugName: "colorInput", alias: 'color' }] : [{ alias: 'color' }]));
+    radiusInput = input(undefined, ...(ngDevMode ? [{ debugName: "radiusInput", alias: 'radius' }] : [{ alias: 'radius' }]));
+    shadowInput = input(undefined, ...(ngDevMode ? [{ debugName: "shadowInput", alias: 'shadow' }] : [{ alias: 'shadow' }]));
+    paddingInput = input(undefined, ...(ngDevMode ? [{ debugName: "paddingInput", alias: 'padding' }] : [{ alias: 'padding' }]));
+    variant = withConfigDefault(this.variantInput, computed(() => this.cardDefaults()?.variant), 'elevated');
+    size = withConfigDefault(this.sizeInput, computed(() => this.cardDefaults()?.size), 'md');
+    color = withConfigDefault(this.colorInput, computed(() => this.cardDefaults()?.color), 'default');
+    radius = withConfigDefault(this.radiusInput, computed(() => this.cardDefaults()?.radius), 'lg');
+    shadow = withConfigDefault(this.shadowInput, computed(() => this.cardDefaults()?.shadow), 'md');
+    padding = withConfigDefault(this.paddingInput, computed(() => this.cardDefaults()?.padding), 'md');
+    // Layout inputs
+    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    imagePosition = input('top', ...(ngDevMode ? [{ debugName: "imagePosition" }] : []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    fullHeight = input(false, ...(ngDevMode ? [{ debugName: "fullHeight" }] : []));
+    // Content inputs
+    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+    subtitle = input(...(ngDevMode ? [undefined, { debugName: "subtitle" }] : []));
+    avatar = input(...(ngDevMode ? [undefined, { debugName: "avatar" }] : []));
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    image = input(...(ngDevMode ? [undefined, { debugName: "image" }] : []));
+    imageAlt = input('', ...(ngDevMode ? [{ debugName: "imageAlt" }] : []));
+    imageFit = input('cover', ...(ngDevMode ? [{ debugName: "imageFit" }] : []));
+    // Visibility inputs
+    showHeader = input(true, ...(ngDevMode ? [{ debugName: "showHeader" }] : []));
+    showMedia = input(true, ...(ngDevMode ? [{ debugName: "showMedia" }] : []));
+    showFooter = input(true, ...(ngDevMode ? [{ debugName: "showFooter" }] : []));
+    divider = input(false, ...(ngDevMode ? [{ debugName: "divider" }] : []));
+    // Interaction inputs
+    hoverable = input(false, ...(ngDevMode ? [{ debugName: "hoverable" }] : []));
+    pressable = input(false, ...(ngDevMode ? [{ debugName: "pressable" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : []));
+    target = input('_self', ...(ngDevMode ? [{ debugName: "target" }] : []));
+    // Effects
+    blurred = input(false, ...(ngDevMode ? [{ debugName: "blurred" }] : []));
+    blurredFooter = input(false, ...(ngDevMode ? [{ debugName: "blurredFooter" }] : []));
+    animated = input(false, ...(ngDevMode ? [{ debugName: "animated" }] : []));
+    // Outputs
+    clicked = output();
+    headerAction = output();
+    // Template refs
+    headerTemplate = contentChild('cardHeader', ...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
+    headerActionsTemplate = contentChild('cardHeaderActions', ...(ngDevMode ? [{ debugName: "headerActionsTemplate" }] : []));
+    mediaTemplate = contentChild('cardMedia', ...(ngDevMode ? [{ debugName: "mediaTemplate" }] : []));
+    bodyTemplate = contentChild('cardBody', ...(ngDevMode ? [{ debugName: "bodyTemplate" }] : []));
+    footerTemplate = contentChild('cardFooter', ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
+    // Computed
+    iconSize = computed(() => {
+        const sizeMap = { sm: 18, md: 20, lg: 24 };
+        return sizeMap[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
+    hostClasses = computed(() => classNames('studio-card', `studio-card--${this.variant()}`, `studio-card--${this.size()}`, `studio-card--${this.color()}`, `studio-card--radius-${this.radius()}`, `studio-card--shadow-${this.shadow()}`, `studio-card--padding-${this.padding()}`, `studio-card--${this.orientation()}`, this.imagePosition() !== 'top' && `studio-card--image-${this.imagePosition()}`, this.fullWidth() && 'studio-card--full-width', this.fullHeight() && 'studio-card--full-height', this.hoverable() && 'studio-card--hoverable', this.pressable() && 'studio-card--pressable', this.disabled() && 'studio-card--disabled', this.loading() && 'studio-card--loading', this.blurred() && 'studio-card--blurred', this.blurredFooter() && 'studio-card--blurred-footer', this.animated() && 'studio-card--animated', this.divider() && 'studio-card--divider', this.href() && 'studio-card--clickable'), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    handleClick(event) {
+        if (this.disabled() || this.loading()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        const url = this.href();
+        if (url) {
+            const safeUrl = sanitizeUrl(url);
+            if (safeUrl === '#') {
+                return;
+            }
+            const target = this.target();
+            if (target === '_blank') {
+                window.open(safeUrl, '_blank', 'noopener,noreferrer');
+            }
+            else {
+                window.location.href = safeUrl;
+            }
+        }
+        this.clicked.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: CardComponent, isStandalone: true, selector: "studio-card", inputs: { variantInput: { classPropertyName: "variantInput", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, sizeInput: { classPropertyName: "sizeInput", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, colorInput: { classPropertyName: "colorInput", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, radiusInput: { classPropertyName: "radiusInput", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, shadowInput: { classPropertyName: "shadowInput", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, paddingInput: { classPropertyName: "paddingInput", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, imagePosition: { classPropertyName: "imagePosition", publicName: "imagePosition", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, imageAlt: { classPropertyName: "imageAlt", publicName: "imageAlt", isSignal: true, isRequired: false, transformFunction: null }, imageFit: { classPropertyName: "imageFit", publicName: "imageFit", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, showMedia: { classPropertyName: "showMedia", publicName: "showMedia", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, pressable: { classPropertyName: "pressable", publicName: "pressable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, blurred: { classPropertyName: "blurred", publicName: "blurred", isSignal: true, isRequired: false, transformFunction: null }, blurredFooter: { classPropertyName: "blurredFooter", publicName: "blurredFooter", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", headerAction: "headerAction" }, host: { listeners: { "click": "handleClick($event)" }, properties: { "class": "hostClasses()", "attr.href": "href()", "attr.target": "href() ? target() : null", "attr.rel": "href() && target() === \"_blank\" ? \"noopener noreferrer\" : null", "attr.disabled": "disabled() ? \"\" : null" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["cardHeader"], descendants: true, isSignal: true }, { propertyName: "headerActionsTemplate", first: true, predicate: ["cardHeaderActions"], descendants: true, isSignal: true }, { propertyName: "mediaTemplate", first: true, predicate: ["cardMedia"], descendants: true, isSignal: true }, { propertyName: "bodyTemplate", first: true, predicate: ["cardBody"], descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["cardFooter"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="studio-card__container">
+      <!-- Header -->
+      @if (showHeader() && (headerTemplate() || title() || subtitle())) {
+        <div class="studio-card__header">
+          @if (headerTemplate()) {
+            <ng-container *ngTemplateOutlet="headerTemplate()!" />
+          } @else {
+            <div class="studio-card__header-content">
+              @if (avatar()) {
+                <img [src]="avatar()!" alt="" class="studio-card__avatar" />
+              }
+              @if (icon() && !avatar()) {
+                <div class="studio-card__icon-wrapper">
+                  <studio-icon [name]="icon()!" [size]="iconSize()" />
+                </div>
+              }
+              <div class="studio-card__header-text">
+                @if (title()) {
+                  <h3 class="studio-card__title">{{ title() }}</h3>
+                }
+                @if (subtitle()) {
+                  <p class="studio-card__subtitle">{{ subtitle() }}</p>
+                }
+              </div>
+            </div>
+            @if (headerActionsTemplate()) {
+              <div class="studio-card__header-actions">
+                <ng-container *ngTemplateOutlet="headerActionsTemplate()!" />
+              </div>
+            }
+          }
+        </div>
+      }
+
+      <!-- Media -->
+      @if (showMedia() && (mediaTemplate() || image())) {
+        <div class="studio-card__media">
+          @if (mediaTemplate()) {
+            <ng-container *ngTemplateOutlet="mediaTemplate()!" />
+          } @else if (image()) {
+            <img
+              [src]="image()!"
+              [alt]="imageAlt()"
+              class="studio-card__image"
+              [class.studio-card__image--cover]="imageFit() === 'cover'"
+              [class.studio-card__image--contain]="imageFit() === 'contain'"
+            />
+          }
+        </div>
+      }
+
+      <!-- Body -->
+      <div class="studio-card__body">
+        @if (bodyTemplate()) {
+          <ng-container *ngTemplateOutlet="bodyTemplate()!" />
+        } @else {
+          <ng-content />
+        }
+      </div>
+
+      <!-- Footer -->
+      @if (showFooter() && footerTemplate()) {
+        <div class="studio-card__footer">
+          <ng-container *ngTemplateOutlet="footerTemplate()!" />
+        </div>
+      }
+
+      <!-- Loading overlay -->
+      @if (loading()) {
+        <div class="studio-card__loading">
+          <studio-icon name="loader-2" [size]="24" class="studio-card__spinner" />
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--studio-font-family);position:relative;transition:all var(--studio-transition-normal)}.studio-card__container{display:flex;flex-direction:column;height:100%;overflow:hidden;position:relative}:host(.studio-card--sm) .studio-card__container{min-height:8rem}:host(.studio-card--md) .studio-card__container{min-height:12rem}:host(.studio-card--lg) .studio-card__container{min-height:16rem}:host(.studio-card--radius-none) .studio-card__container{border-radius:var(--studio-radius-none)}:host(.studio-card--radius-sm) .studio-card__container{border-radius:var(--studio-radius-sm)}:host(.studio-card--radius-md) .studio-card__container{border-radius:var(--studio-radius-md)}:host(.studio-card--radius-lg) .studio-card__container{border-radius:var(--studio-radius-lg)}:host(.studio-card--radius-xl) .studio-card__container{border-radius:var(--studio-radius-xl)}:host(.studio-card--shadow-none) .studio-card__container{box-shadow:none}:host(.studio-card--shadow-sm) .studio-card__container{box-shadow:var(--studio-shadow-sm)}:host(.studio-card--shadow-md) .studio-card__container{box-shadow:var(--studio-shadow-md)}:host(.studio-card--shadow-lg) .studio-card__container{box-shadow:var(--studio-shadow-lg)}:host(.studio-card--shadow-xl) .studio-card__container{box-shadow:var(--studio-shadow-xl)}:host(.studio-card--elevated.studio-card--default) .studio-card__container{background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary)}:host(.studio-card--filled.studio-card--default) .studio-card__container{background:var(--studio-bg-secondary);border:1px solid transparent}:host(.studio-card--outlined.studio-card--default) .studio-card__container{background:transparent;border:2px solid var(--studio-border-primary)}:host(.studio-card--ghost.studio-card--default) .studio-card__container{background:transparent;border:1px solid transparent}:host(.studio-card--elevated.studio-card--primary) .studio-card__container{background:var(--studio-primary-bg);border:1px solid var(--studio-primary)}:host(.studio-card--filled.studio-card--primary) .studio-card__container{background:var(--studio-primary);color:#fff;border:1px solid transparent}:host(.studio-card--outlined.studio-card--primary) .studio-card__container{background:transparent;border:2px solid var(--studio-primary);color:var(--studio-primary)}:host(.studio-card--ghost.studio-card--primary) .studio-card__container{background:var(--studio-primary-bg);border:1px solid transparent;color:var(--studio-primary)}:host(.studio-card--elevated.studio-card--secondary) .studio-card__container{background:var(--studio-bg-primary);border:1px solid var(--studio-text-secondary)}:host(.studio-card--filled.studio-card--secondary) .studio-card__container{background:var(--studio-text-secondary);color:#fff;border:1px solid transparent}:host(.studio-card--outlined.studio-card--secondary) .studio-card__container{background:transparent;border:2px solid var(--studio-text-secondary);color:var(--studio-text-secondary)}:host(.studio-card--ghost.studio-card--secondary) .studio-card__container{background:var(--studio-bg-secondary);border:1px solid transparent;color:var(--studio-text-secondary)}:host(.studio-card--elevated.studio-card--success) .studio-card__container{background:var(--studio-success-bg);border:1px solid var(--studio-success)}:host(.studio-card--filled.studio-card--success) .studio-card__container{background:var(--studio-success);color:#fff;border:1px solid transparent}:host(.studio-card--outlined.studio-card--success) .studio-card__container{background:transparent;border:2px solid var(--studio-success);color:var(--studio-success)}:host(.studio-card--ghost.studio-card--success) .studio-card__container{background:var(--studio-success-bg);border:1px solid transparent;color:var(--studio-success)}:host(.studio-card--elevated.studio-card--error) .studio-card__container{background:var(--studio-error-bg);border:1px solid var(--studio-error)}:host(.studio-card--filled.studio-card--error) .studio-card__container{background:var(--studio-error);color:#fff;border:1px solid transparent}:host(.studio-card--outlined.studio-card--error) .studio-card__container{background:transparent;border:2px solid var(--studio-error);color:var(--studio-error)}:host(.studio-card--ghost.studio-card--error) .studio-card__container{background:var(--studio-error-bg);border:1px solid transparent;color:var(--studio-error)}:host(.studio-card--elevated.studio-card--warning) .studio-card__container{background:var(--studio-warning-bg);border:1px solid var(--studio-warning)}:host(.studio-card--filled.studio-card--warning) .studio-card__container{background:var(--studio-warning);color:#fff;border:1px solid transparent}:host(.studio-card--outlined.studio-card--warning) .studio-card__container{background:transparent;border:2px solid var(--studio-warning);color:var(--studio-warning)}:host(.studio-card--ghost.studio-card--warning) .studio-card__container{background:var(--studio-warning-bg);border:1px solid transparent;color:var(--studio-warning)}:host(.studio-card--elevated.studio-card--neutral) .studio-card__container{background:var(--studio-bg-tertiary);border:1px solid var(--studio-border-secondary)}:host(.studio-card--filled.studio-card--neutral) .studio-card__container{background:var(--studio-bg-secondary);border:1px solid transparent}:host(.studio-card--outlined.studio-card--neutral) .studio-card__container{background:transparent;border:2px solid var(--studio-border-secondary)}:host(.studio-card--ghost.studio-card--neutral) .studio-card__container{background:transparent;border:1px solid transparent}:host(.studio-card--padding-none) .studio-card__header,:host(.studio-card--padding-none) .studio-card__body,:host(.studio-card--padding-none) .studio-card__footer{padding:0}:host(.studio-card--padding-sm) .studio-card__header,:host(.studio-card--padding-sm) .studio-card__footer{padding:var(--studio-spacing-sm)}:host(.studio-card--padding-sm) .studio-card__body{padding:var(--studio-spacing-sm)}:host(.studio-card--padding-md) .studio-card__header,:host(.studio-card--padding-md) .studio-card__footer{padding:var(--studio-spacing-md)}:host(.studio-card--padding-md) .studio-card__body{padding:var(--studio-spacing-md)}:host(.studio-card--padding-lg) .studio-card__header,:host(.studio-card--padding-lg) .studio-card__footer{padding:var(--studio-spacing-lg)}:host(.studio-card--padding-lg) .studio-card__body{padding:var(--studio-spacing-lg)}.studio-card__header{display:flex;align-items:center;justify-content:space-between;gap:var(--studio-spacing-md);flex-shrink:0}:host(.studio-card--divider) .studio-card__header{border-bottom:1px solid var(--studio-border-primary)}.studio-card__header-content{display:flex;align-items:center;gap:var(--studio-spacing-md);flex:1;min-width:0}.studio-card__avatar{width:2.5rem;height:2.5rem;border-radius:50%;object-fit:cover;flex-shrink:0}.studio-card__icon-wrapper{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--studio-bg-secondary);flex-shrink:0}.studio-card__header-text{flex:1;min-width:0}.studio-card__title{margin:0;font-size:var(--studio-font-size-lg);font-weight:var(--studio-font-weight-semibold);color:var(--studio-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-card__subtitle{margin:.25rem 0 0;font-size:var(--studio-font-size-sm);color:var(--studio-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-card__header-actions{display:flex;align-items:center;gap:var(--studio-spacing-sm);flex-shrink:0}.studio-card__media{flex-shrink:0;overflow:hidden;position:relative}:host(.studio-card--padding-none) .studio-card__media{margin:0}:host(.studio-card--padding-sm) .studio-card__media{margin:var(--studio-spacing-sm);margin-top:0}:host(.studio-card--padding-md) .studio-card__media{margin:var(--studio-spacing-md);margin-top:0}:host(.studio-card--padding-lg) .studio-card__media{margin:var(--studio-spacing-lg);margin-top:0}.studio-card__image{width:100%;height:auto;display:block;border-radius:var(--studio-radius-sm)}.studio-card__image--cover{object-fit:cover;height:12rem}.studio-card__image--contain{object-fit:contain;max-height:16rem}.studio-card__body{flex:1;overflow-y:auto}.studio-card__footer{display:flex;align-items:center;gap:var(--studio-spacing-md);flex-shrink:0}:host(.studio-card--divider) .studio-card__footer{border-top:1px solid var(--studio-border-primary)}:host(.studio-card--blurred-footer) .studio-card__footer{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border-top:1px solid rgba(255,255,255,.2)}:host(.studio-card--horizontal) .studio-card__container{flex-direction:row}:host(.studio-card--horizontal) .studio-card__media{width:40%;margin:0}:host(.studio-card--horizontal) .studio-card__body{flex:1}:host(.studio-card--full-width){width:100%}:host(.studio-card--full-height){height:100%}:host(.studio-card--full-height) .studio-card__container{height:100%}:host(.studio-card--hoverable) .studio-card__container{cursor:pointer;transition:all var(--studio-transition-normal)}:host(.studio-card--hoverable:hover:not(.studio-card--disabled)) .studio-card__container{transform:translateY(-2px);box-shadow:var(--studio-shadow-lg)}:host(.studio-card--pressable) .studio-card__container{cursor:pointer;transition:all var(--studio-transition-fast)}:host(.studio-card--pressable:active:not(.studio-card--disabled)) .studio-card__container{transform:scale(.98)}:host(.studio-card--clickable) .studio-card__container{cursor:pointer}:host(.studio-card--disabled){pointer-events:none;opacity:.5}:host(.studio-card--blurred) .studio-card__container{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)}:host(.studio-card--animated){animation:cardFadeIn .3s ease-out}@keyframes cardFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.studio-card__loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffe6;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:10}.studio-card__spinner{animation:spin 1s linear infinite;color:var(--studio-primary)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host(.studio-card--loading) .studio-card__container{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth", "showFallback", "fallbackIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-card', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.href]': 'href()',
+                        '[attr.target]': 'href() ? target() : null',
+                        '[attr.rel]': 'href() && target() === "_blank" ? "noopener noreferrer" : null',
+                        '[attr.disabled]': 'disabled() ? "" : null',
+                        '(click)': 'handleClick($event)'
+                    }, template: `
+    <div class="studio-card__container">
+      <!-- Header -->
+      @if (showHeader() && (headerTemplate() || title() || subtitle())) {
+        <div class="studio-card__header">
+          @if (headerTemplate()) {
+            <ng-container *ngTemplateOutlet="headerTemplate()!" />
+          } @else {
+            <div class="studio-card__header-content">
+              @if (avatar()) {
+                <img [src]="avatar()!" alt="" class="studio-card__avatar" />
+              }
+              @if (icon() && !avatar()) {
+                <div class="studio-card__icon-wrapper">
+                  <studio-icon [name]="icon()!" [size]="iconSize()" />
+                </div>
+              }
+              <div class="studio-card__header-text">
+                @if (title()) {
+                  <h3 class="studio-card__title">{{ title() }}</h3>
+                }
+                @if (subtitle()) {
+                  <p class="studio-card__subtitle">{{ subtitle() }}</p>
+                }
+              </div>
+            </div>
+            @if (headerActionsTemplate()) {
+              <div class="studio-card__header-actions">
+                <ng-container *ngTemplateOutlet="headerActionsTemplate()!" />
+              </div>
+            }
+          }
+        </div>
+      }
+
+      <!-- Media -->
+      @if (showMedia() && (mediaTemplate() || image())) {
+        <div class="studio-card__media">
+          @if (mediaTemplate()) {
+            <ng-container *ngTemplateOutlet="mediaTemplate()!" />
+          } @else if (image()) {
+            <img
+              [src]="image()!"
+              [alt]="imageAlt()"
+              class="studio-card__image"
+              [class.studio-card__image--cover]="imageFit() === 'cover'"
+              [class.studio-card__image--contain]="imageFit() === 'contain'"
+            />
+          }
+        </div>
+      }
+
+      <!-- Body -->
+      <div class="studio-card__body">
+        @if (bodyTemplate()) {
+          <ng-container *ngTemplateOutlet="bodyTemplate()!" />
+        } @else {
+          <ng-content />
+        }
+      </div>
+
+      <!-- Footer -->
+      @if (showFooter() && footerTemplate()) {
+        <div class="studio-card__footer">
+          <ng-container *ngTemplateOutlet="footerTemplate()!" />
+        </div>
+      }
+
+      <!-- Loading overlay -->
+      @if (loading()) {
+        <div class="studio-card__loading">
+          <studio-icon name="loader-2" [size]="24" class="studio-card__spinner" />
+        </div>
+      }
+    </div>
+  `, styles: [":host{display:block;font-family:var(--studio-font-family);position:relative;transition:all var(--studio-transition-normal)}.studio-card__container{display:flex;flex-direction:column;height:100%;overflow:hidden;position:relative}:host(.studio-card--sm) .studio-card__container{min-height:8rem}:host(.studio-card--md) .studio-card__container{min-height:12rem}:host(.studio-card--lg) .studio-card__container{min-height:16rem}:host(.studio-card--radius-none) .studio-card__container{border-radius:var(--studio-radius-none)}:host(.studio-card--radius-sm) .studio-card__container{border-radius:var(--studio-radius-sm)}:host(.studio-card--radius-md) .studio-card__container{border-radius:var(--studio-radius-md)}:host(.studio-card--radius-lg) .studio-card__container{border-radius:var(--studio-radius-lg)}:host(.studio-card--radius-xl) .studio-card__container{border-radius:var(--studio-radius-xl)}:host(.studio-card--shadow-none) .studio-card__container{box-shadow:none}:host(.studio-card--shadow-sm) .studio-card__container{box-shadow:var(--studio-shadow-sm)}:host(.studio-card--shadow-md) .studio-card__container{box-shadow:var(--studio-shadow-md)}:host(.studio-card--shadow-lg) .studio-card__container{box-shadow:var(--studio-shadow-lg)}:host(.studio-card--shadow-xl) .studio-card__container{box-shadow:var(--studio-shadow-xl)}:host(.studio-card--elevated.studio-card--default) .studio-card__container{background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary)}:host(.studio-card--filled.studio-card--default) .studio-card__container{background:var(--studio-bg-secondary);border:1px solid transparent}:host(.studio-card--outlined.studio-card--default) .studio-card__container{background:transparent;border:2px solid var(--studio-border-primary)}:host(.studio-card--ghost.studio-card--default) .studio-card__container{background:transparent;border:1px solid transparent}:host(.studio-card--elevated.studio-card--primary) .studio-card__container{background:var(--studio-primary-bg);border:1px solid var(--studio-primary)}:host(.studio-card--filled.studio-card--primary) .studio-card__container{background:var(--studio-primary);color:#fff;border:1px solid transparent}:host(.studio-card--outlined.studio-card--primary) .studio-card__container{background:transparent;border:2px solid var(--studio-primary);color:var(--studio-primary)}:host(.studio-card--ghost.studio-card--primary) .studio-card__container{background:var(--studio-primary-bg);border:1px solid transparent;color:var(--studio-primary)}:host(.studio-card--elevated.studio-card--secondary) .studio-card__container{background:var(--studio-bg-primary);border:1px solid var(--studio-text-secondary)}:host(.studio-card--filled.studio-card--secondary) .studio-card__container{background:var(--studio-text-secondary);color:#fff;border:1px solid transparent}:host(.studio-card--outlined.studio-card--secondary) .studio-card__container{background:transparent;border:2px solid var(--studio-text-secondary);color:var(--studio-text-secondary)}:host(.studio-card--ghost.studio-card--secondary) .studio-card__container{background:var(--studio-bg-secondary);border:1px solid transparent;color:var(--studio-text-secondary)}:host(.studio-card--elevated.studio-card--success) .studio-card__container{background:var(--studio-success-bg);border:1px solid var(--studio-success)}:host(.studio-card--filled.studio-card--success) .studio-card__container{background:var(--studio-success);color:#fff;border:1px solid transparent}:host(.studio-card--outlined.studio-card--success) .studio-card__container{background:transparent;border:2px solid var(--studio-success);color:var(--studio-success)}:host(.studio-card--ghost.studio-card--success) .studio-card__container{background:var(--studio-success-bg);border:1px solid transparent;color:var(--studio-success)}:host(.studio-card--elevated.studio-card--error) .studio-card__container{background:var(--studio-error-bg);border:1px solid var(--studio-error)}:host(.studio-card--filled.studio-card--error) .studio-card__container{background:var(--studio-error);color:#fff;border:1px solid transparent}:host(.studio-card--outlined.studio-card--error) .studio-card__container{background:transparent;border:2px solid var(--studio-error);color:var(--studio-error)}:host(.studio-card--ghost.studio-card--error) .studio-card__container{background:var(--studio-error-bg);border:1px solid transparent;color:var(--studio-error)}:host(.studio-card--elevated.studio-card--warning) .studio-card__container{background:var(--studio-warning-bg);border:1px solid var(--studio-warning)}:host(.studio-card--filled.studio-card--warning) .studio-card__container{background:var(--studio-warning);color:#fff;border:1px solid transparent}:host(.studio-card--outlined.studio-card--warning) .studio-card__container{background:transparent;border:2px solid var(--studio-warning);color:var(--studio-warning)}:host(.studio-card--ghost.studio-card--warning) .studio-card__container{background:var(--studio-warning-bg);border:1px solid transparent;color:var(--studio-warning)}:host(.studio-card--elevated.studio-card--neutral) .studio-card__container{background:var(--studio-bg-tertiary);border:1px solid var(--studio-border-secondary)}:host(.studio-card--filled.studio-card--neutral) .studio-card__container{background:var(--studio-bg-secondary);border:1px solid transparent}:host(.studio-card--outlined.studio-card--neutral) .studio-card__container{background:transparent;border:2px solid var(--studio-border-secondary)}:host(.studio-card--ghost.studio-card--neutral) .studio-card__container{background:transparent;border:1px solid transparent}:host(.studio-card--padding-none) .studio-card__header,:host(.studio-card--padding-none) .studio-card__body,:host(.studio-card--padding-none) .studio-card__footer{padding:0}:host(.studio-card--padding-sm) .studio-card__header,:host(.studio-card--padding-sm) .studio-card__footer{padding:var(--studio-spacing-sm)}:host(.studio-card--padding-sm) .studio-card__body{padding:var(--studio-spacing-sm)}:host(.studio-card--padding-md) .studio-card__header,:host(.studio-card--padding-md) .studio-card__footer{padding:var(--studio-spacing-md)}:host(.studio-card--padding-md) .studio-card__body{padding:var(--studio-spacing-md)}:host(.studio-card--padding-lg) .studio-card__header,:host(.studio-card--padding-lg) .studio-card__footer{padding:var(--studio-spacing-lg)}:host(.studio-card--padding-lg) .studio-card__body{padding:var(--studio-spacing-lg)}.studio-card__header{display:flex;align-items:center;justify-content:space-between;gap:var(--studio-spacing-md);flex-shrink:0}:host(.studio-card--divider) .studio-card__header{border-bottom:1px solid var(--studio-border-primary)}.studio-card__header-content{display:flex;align-items:center;gap:var(--studio-spacing-md);flex:1;min-width:0}.studio-card__avatar{width:2.5rem;height:2.5rem;border-radius:50%;object-fit:cover;flex-shrink:0}.studio-card__icon-wrapper{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--studio-bg-secondary);flex-shrink:0}.studio-card__header-text{flex:1;min-width:0}.studio-card__title{margin:0;font-size:var(--studio-font-size-lg);font-weight:var(--studio-font-weight-semibold);color:var(--studio-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-card__subtitle{margin:.25rem 0 0;font-size:var(--studio-font-size-sm);color:var(--studio-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-card__header-actions{display:flex;align-items:center;gap:var(--studio-spacing-sm);flex-shrink:0}.studio-card__media{flex-shrink:0;overflow:hidden;position:relative}:host(.studio-card--padding-none) .studio-card__media{margin:0}:host(.studio-card--padding-sm) .studio-card__media{margin:var(--studio-spacing-sm);margin-top:0}:host(.studio-card--padding-md) .studio-card__media{margin:var(--studio-spacing-md);margin-top:0}:host(.studio-card--padding-lg) .studio-card__media{margin:var(--studio-spacing-lg);margin-top:0}.studio-card__image{width:100%;height:auto;display:block;border-radius:var(--studio-radius-sm)}.studio-card__image--cover{object-fit:cover;height:12rem}.studio-card__image--contain{object-fit:contain;max-height:16rem}.studio-card__body{flex:1;overflow-y:auto}.studio-card__footer{display:flex;align-items:center;gap:var(--studio-spacing-md);flex-shrink:0}:host(.studio-card--divider) .studio-card__footer{border-top:1px solid var(--studio-border-primary)}:host(.studio-card--blurred-footer) .studio-card__footer{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border-top:1px solid rgba(255,255,255,.2)}:host(.studio-card--horizontal) .studio-card__container{flex-direction:row}:host(.studio-card--horizontal) .studio-card__media{width:40%;margin:0}:host(.studio-card--horizontal) .studio-card__body{flex:1}:host(.studio-card--full-width){width:100%}:host(.studio-card--full-height){height:100%}:host(.studio-card--full-height) .studio-card__container{height:100%}:host(.studio-card--hoverable) .studio-card__container{cursor:pointer;transition:all var(--studio-transition-normal)}:host(.studio-card--hoverable:hover:not(.studio-card--disabled)) .studio-card__container{transform:translateY(-2px);box-shadow:var(--studio-shadow-lg)}:host(.studio-card--pressable) .studio-card__container{cursor:pointer;transition:all var(--studio-transition-fast)}:host(.studio-card--pressable:active:not(.studio-card--disabled)) .studio-card__container{transform:scale(.98)}:host(.studio-card--clickable) .studio-card__container{cursor:pointer}:host(.studio-card--disabled){pointer-events:none;opacity:.5}:host(.studio-card--blurred) .studio-card__container{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)}:host(.studio-card--animated){animation:cardFadeIn .3s ease-out}@keyframes cardFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.studio-card__loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffe6;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:10}.studio-card__spinner{animation:spin 1s linear infinite;color:var(--studio-primary)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host(.studio-card--loading) .studio-card__container{pointer-events:none}\n"] }]
+        }], propDecorators: { variantInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], sizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], colorInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], radiusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], shadowInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], paddingInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], imagePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "imagePosition", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], fullHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullHeight", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], avatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatar", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], imageAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageAlt", required: false }] }], imageFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageFit", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], showMedia: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMedia", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], pressable: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], blurred: [{ type: i0.Input, args: [{ isSignal: true, alias: "blurred", required: false }] }], blurredFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "blurredFooter", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], headerAction: [{ type: i0.Output, args: ["headerAction"] }], headerTemplate: [{ type: i0.ContentChild, args: ['cardHeader', { isSignal: true }] }], headerActionsTemplate: [{ type: i0.ContentChild, args: ['cardHeaderActions', { isSignal: true }] }], mediaTemplate: [{ type: i0.ContentChild, args: ['cardMedia', { isSignal: true }] }], bodyTemplate: [{ type: i0.ContentChild, args: ['cardBody', { isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: ['cardFooter', { isSignal: true }] }] } });
+
+/**
+ * Card component types
+ */
+
+class ChatMessageComponent {
+    message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
+    currentUserId = input.required(...(ngDevMode ? [{ debugName: "currentUserId" }] : []));
+    showAvatar = input(true, ...(ngDevMode ? [{ debugName: "showAvatar" }] : []));
+    showTimestamp = input(true, ...(ngDevMode ? [{ debugName: "showTimestamp" }] : []));
+    showUserName = input(true, ...(ngDevMode ? [{ debugName: "showUserName" }] : []));
+    compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : []));
+    isOwn = computed(() => this.message().userId === this.currentUserId(), ...(ngDevMode ? [{ debugName: "isOwn" }] : []));
+    hostClasses = computed(() => {
+        const classes = ['studio-chat-message'];
+        if (this.isOwn())
+            classes.push('chat-message--own');
+        if (this.message().type === 'system')
+            classes.push('chat-message--system');
+        if (this.compact())
+            classes.push('chat-message--compact');
+        if (this.message().status === 'read')
+            classes.push('chat-message--status-read');
+        if (this.message().status === 'error')
+            classes.push('chat-message--status-error');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    getInitials(name) {
+        return name
+            .split(' ')
+            .map(n => n[0])
+            .slice(0, 2)
+            .join('')
+            .toUpperCase();
+    }
+    formatTime(date) {
+        const now = new Date();
+        const messageDate = new Date(date);
+        const diff = now.getTime() - messageDate.getTime();
+        const minutes = Math.floor(diff / 60000);
+        const hours = Math.floor(diff / 3600000);
+        const days = Math.floor(diff / 86400000);
+        if (minutes < 1)
+            return 'Just now';
+        if (minutes < 60)
+            return `${minutes}m ago`;
+        if (hours < 24)
+            return `${hours}h ago`;
+        if (days === 1)
+            return 'Yesterday';
+        if (days < 7)
+            return `${days}d ago`;
+        return messageDate.toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric'
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: ChatMessageComponent, isStandalone: true, selector: "studio-chat-message", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, currentUserId: { classPropertyName: "currentUserId", publicName: "currentUserId", isSignal: true, isRequired: true, transformFunction: null }, showAvatar: { classPropertyName: "showAvatar", publicName: "showAvatar", isSignal: true, isRequired: false, transformFunction: null }, showTimestamp: { classPropertyName: "showTimestamp", publicName: "showTimestamp", isSignal: true, isRequired: false, transformFunction: null }, showUserName: { classPropertyName: "showUserName", publicName: "showUserName", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    <div class="chat-message__container">
+      @if (showAvatar() && !isOwn()) {
+        <div class="chat-message__avatar">
+          @if (message().userAvatar) {
+            <img [src]="message().userAvatar" [alt]="message().userName" />
+          } @else {
+            <div class="chat-message__avatar-fallback">
+              {{ getInitials(message().userName) }}
+            </div>
+          }
+        </div>
+      }
+
+      <div class="chat-message__content-wrapper">
+        @if (!isOwn() && showUserName()) {
+          <div class="chat-message__user-name">{{ message().userName }}</div>
+        }
+
+        <div class="chat-message__bubble">
+          @if (message().type === 'system') {
+            <div class="chat-message__system">{{ message().content }}</div>
+          } @else {
+            <div class="chat-message__text">{{ message().content }}</div>
+          }
+
+          @if (message().edited) {
+            <span class="chat-message__edited">(edited)</span>
+          }
+        </div>
+
+        <div class="chat-message__meta">
+          @if (showTimestamp()) {
+            <span class="chat-message__time">{{ formatTime(message().timestamp) }}</span>
+          }
+
+          @if (isOwn() && message().status && message().status !== 'sending') {
+            <span class="chat-message__status">
+              @if (message().status === 'sent') {
+                <studio-icon name="check" [size]="12" />
+              }
+              @if (message().status === 'delivered' || message().status === 'read') {
+                <studio-icon name="check-check" [size]="12" />
+              }
+              @if (message().status === 'error') {
+                <studio-icon name="alert-circle" [size]="12" />
+              }
+            </span>
+          }
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;margin-bottom:.75rem}:host(.chat-message--own) .chat-message__container{justify-content:flex-end}:host(.chat-message--own) .chat-message__bubble{background:var(--studio-primary);color:#fff}:host(.chat-message--own) .chat-message__meta{justify-content:flex-end}:host(.chat-message--system){text-align:center;margin:1rem 0}:host(.chat-message--system) .chat-message__system{display:inline-block;padding:.25rem .75rem;background:var(--studio-bg-secondary);color:var(--studio-text-secondary);border-radius:var(--studio-radius-full);font-size:.75rem}:host(.chat-message--compact){margin-bottom:.25rem}.chat-message__container{display:flex;gap:.75rem;align-items:flex-end}.chat-message__avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0}.chat-message__avatar img{width:100%;height:100%;object-fit:cover}.chat-message__avatar-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--studio-primary);color:#fff;font-size:.75rem;font-weight:600}.chat-message__content-wrapper{max-width:70%;display:flex;flex-direction:column;gap:.25rem}.chat-message__user-name{font-size:.75rem;font-weight:500;color:var(--studio-text-secondary);padding-left:.75rem}.chat-message__bubble{padding:.625rem .875rem;border-radius:var(--studio-radius-lg);background:var(--studio-bg-secondary);color:var(--studio-text-primary);word-wrap:break-word;position:relative}.chat-message__text{white-space:pre-wrap;line-height:1.5}.chat-message__edited{font-size:.6875rem;color:var(--studio-text-tertiary);margin-left:.25rem}.chat-message__meta{display:flex;align-items:center;gap:.25rem;padding:0 .75rem}.chat-message__time{font-size:.6875rem;color:var(--studio-text-tertiary)}.chat-message__status{display:flex;align-items:center;color:var(--studio-text-tertiary)}:host(.chat-message--own) .chat-message__status{color:var(--studio-text-tertiary)}:host(.chat-message--status-read) .chat-message__status{color:var(--studio-primary)}:host(.chat-message--status-error) .chat-message__status{color:var(--studio-error)}:host(.chat-message--compact) .chat-message__avatar{width:24px;height:24px}:host(.chat-message--compact) .chat-message__bubble{padding:.5rem .75rem;font-size:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth", "showFallback", "fallbackIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ChatMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-chat-message', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()'
+                    }, template: `
+    <div class="chat-message__container">
+      @if (showAvatar() && !isOwn()) {
+        <div class="chat-message__avatar">
+          @if (message().userAvatar) {
+            <img [src]="message().userAvatar" [alt]="message().userName" />
+          } @else {
+            <div class="chat-message__avatar-fallback">
+              {{ getInitials(message().userName) }}
+            </div>
+          }
+        </div>
+      }
+
+      <div class="chat-message__content-wrapper">
+        @if (!isOwn() && showUserName()) {
+          <div class="chat-message__user-name">{{ message().userName }}</div>
+        }
+
+        <div class="chat-message__bubble">
+          @if (message().type === 'system') {
+            <div class="chat-message__system">{{ message().content }}</div>
+          } @else {
+            <div class="chat-message__text">{{ message().content }}</div>
+          }
+
+          @if (message().edited) {
+            <span class="chat-message__edited">(edited)</span>
+          }
+        </div>
+
+        <div class="chat-message__meta">
+          @if (showTimestamp()) {
+            <span class="chat-message__time">{{ formatTime(message().timestamp) }}</span>
+          }
+
+          @if (isOwn() && message().status && message().status !== 'sending') {
+            <span class="chat-message__status">
+              @if (message().status === 'sent') {
+                <studio-icon name="check" [size]="12" />
+              }
+              @if (message().status === 'delivered' || message().status === 'read') {
+                <studio-icon name="check-check" [size]="12" />
+              }
+              @if (message().status === 'error') {
+                <studio-icon name="alert-circle" [size]="12" />
+              }
+            </span>
+          }
+        </div>
+      </div>
+    </div>
+  `, styles: [":host{display:block;margin-bottom:.75rem}:host(.chat-message--own) .chat-message__container{justify-content:flex-end}:host(.chat-message--own) .chat-message__bubble{background:var(--studio-primary);color:#fff}:host(.chat-message--own) .chat-message__meta{justify-content:flex-end}:host(.chat-message--system){text-align:center;margin:1rem 0}:host(.chat-message--system) .chat-message__system{display:inline-block;padding:.25rem .75rem;background:var(--studio-bg-secondary);color:var(--studio-text-secondary);border-radius:var(--studio-radius-full);font-size:.75rem}:host(.chat-message--compact){margin-bottom:.25rem}.chat-message__container{display:flex;gap:.75rem;align-items:flex-end}.chat-message__avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0}.chat-message__avatar img{width:100%;height:100%;object-fit:cover}.chat-message__avatar-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--studio-primary);color:#fff;font-size:.75rem;font-weight:600}.chat-message__content-wrapper{max-width:70%;display:flex;flex-direction:column;gap:.25rem}.chat-message__user-name{font-size:.75rem;font-weight:500;color:var(--studio-text-secondary);padding-left:.75rem}.chat-message__bubble{padding:.625rem .875rem;border-radius:var(--studio-radius-lg);background:var(--studio-bg-secondary);color:var(--studio-text-primary);word-wrap:break-word;position:relative}.chat-message__text{white-space:pre-wrap;line-height:1.5}.chat-message__edited{font-size:.6875rem;color:var(--studio-text-tertiary);margin-left:.25rem}.chat-message__meta{display:flex;align-items:center;gap:.25rem;padding:0 .75rem}.chat-message__time{font-size:.6875rem;color:var(--studio-text-tertiary)}.chat-message__status{display:flex;align-items:center;color:var(--studio-text-tertiary)}:host(.chat-message--own) .chat-message__status{color:var(--studio-text-tertiary)}:host(.chat-message--status-read) .chat-message__status{color:var(--studio-primary)}:host(.chat-message--status-error) .chat-message__status{color:var(--studio-error)}:host(.chat-message--compact) .chat-message__avatar{width:24px;height:24px}:host(.chat-message--compact) .chat-message__bubble{padding:.5rem .75rem;font-size:.875rem}\n"] }]
+        }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], currentUserId: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentUserId", required: true }] }], showAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAvatar", required: false }] }], showTimestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimestamp", required: false }] }], showUserName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUserName", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }] } });
+
+class ChatInputComponent {
+    placeholder = input('Type a message...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : []));
+    messageSubmit = output();
+    typing = output();
+    inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
+    textareaRef = viewChild('textareaRef', ...(ngDevMode ? [{ debugName: "textareaRef" }] : []));
+    typingTimeout;
+    canSend = computed(() => this.inputValue().trim().length > 0 && !this.disabled(), ...(ngDevMode ? [{ debugName: "canSend" }] : []));
+    hostClasses = computed(() => {
+        const classes = ['studio-chat-input'];
+        if (this.compact())
+            classes.push('chat-input--compact');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    constructor() {
+        // Auto-resize textarea
+        effect(() => {
+            const textarea = this.textareaRef()?.nativeElement;
+            if (textarea) {
+                textarea.style.height = 'auto';
+                textarea.style.height = textarea.scrollHeight + 'px';
+            }
+        });
+    }
+    onKeyDown(event) {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            this.handleSubmit();
+        }
+    }
+    onInput() {
+        // Emit typing indicator
+        this.typing.emit(true);
+        // Clear previous timeout
+        if (this.typingTimeout) {
+            clearTimeout(this.typingTimeout);
+        }
+        // Set new timeout to stop typing after 1 second
+        this.typingTimeout = setTimeout(() => {
+            this.typing.emit(false);
+        }, 1000);
+        // Auto-resize
+        const textarea = this.textareaRef()?.nativeElement;
+        if (textarea) {
+            textarea.style.height = 'auto';
+            textarea.style.height = textarea.scrollHeight + 'px';
+        }
+    }
+    handleSubmit() {
+        const content = this.inputValue().trim();
+        if (content && !this.disabled()) {
+            this.messageSubmit.emit({ content });
+            this.inputValue.set('');
+            // Reset textarea height
+            const textarea = this.textareaRef()?.nativeElement;
+            if (textarea) {
+                textarea.style.height = 'auto';
+            }
+            // Stop typing indicator
+            if (this.typingTimeout) {
+                clearTimeout(this.typingTimeout);
+            }
+            this.typing.emit(false);
+        }
+    }
+    focus() {
+        this.textareaRef()?.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ChatInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.12", type: ChatInputComponent, isStandalone: true, selector: "studio-chat-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { messageSubmit: "messageSubmit", typing: "typing" }, host: { properties: { "class": "hostClasses()" } }, viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textareaRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="chat-input__container">
+      <textarea
+        #textareaRef
+        class="chat-input__textarea"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [(ngModel)]="inputValue"
+        (keydown)="onKeyDown($event)"
+        (input)="onInput()"
+        rows="1"
+      ></textarea>
+
+      <studio-button
+        variant="ghost"
+        size="sm"
+        [disabled]="!canSend()"
+        (click)="handleSubmit()"
+        class="chat-input__send-button"
+      >
+        <studio-icon name="send" [size]="20" />
+      </studio-button>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.chat-input__container{display:flex;align-items:flex-end;gap:.5rem;padding:1rem;background:var(--studio-bg-primary);border-top:1px solid var(--studio-border-primary)}.chat-input__textarea{flex:1;min-height:40px;max-height:120px;padding:.625rem .875rem;border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md);background:var(--studio-bg-primary);color:var(--studio-text-primary);font-family:inherit;font-size:.875rem;line-height:1.5;resize:none;overflow-y:auto;transition:border-color .15s ease}.chat-input__textarea:focus{outline:none;border-color:var(--studio-primary)}.chat-input__textarea:disabled{opacity:.5;cursor:not-allowed}.chat-input__textarea::placeholder{color:var(--studio-text-tertiary)}.chat-input__send-button{flex-shrink:0}:host(.chat-input--compact) .chat-input__container{padding:.75rem}:host(.chat-input--compact) .chat-input__textarea{padding:.5rem .75rem;font-size:.8125rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth", "showFallback", "fallbackIcon"] }, { kind: "component", type: ButtonComponent, selector: "studio-button", inputs: ["variant", "size", "color", "radius", "shadow", "compact", "disabled", "loading", "loadingText", "fullWidth", "type", "icon", "iconPosition", "href", "target", "badge", "badgeColor", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ChatInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-chat-input', standalone: true, imports: [CommonModule, FormsModule, IconComponent, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()'
+                    }, template: `
+    <div class="chat-input__container">
+      <textarea
+        #textareaRef
+        class="chat-input__textarea"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [(ngModel)]="inputValue"
+        (keydown)="onKeyDown($event)"
+        (input)="onInput()"
+        rows="1"
+      ></textarea>
+
+      <studio-button
+        variant="ghost"
+        size="sm"
+        [disabled]="!canSend()"
+        (click)="handleSubmit()"
+        class="chat-input__send-button"
+      >
+        <studio-icon name="send" [size]="20" />
+      </studio-button>
+    </div>
+  `, styles: [":host{display:block}.chat-input__container{display:flex;align-items:flex-end;gap:.5rem;padding:1rem;background:var(--studio-bg-primary);border-top:1px solid var(--studio-border-primary)}.chat-input__textarea{flex:1;min-height:40px;max-height:120px;padding:.625rem .875rem;border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md);background:var(--studio-bg-primary);color:var(--studio-text-primary);font-family:inherit;font-size:.875rem;line-height:1.5;resize:none;overflow-y:auto;transition:border-color .15s ease}.chat-input__textarea:focus{outline:none;border-color:var(--studio-primary)}.chat-input__textarea:disabled{opacity:.5;cursor:not-allowed}.chat-input__textarea::placeholder{color:var(--studio-text-tertiary)}.chat-input__send-button{flex-shrink:0}:host(.chat-input--compact) .chat-input__container{padding:.75rem}:host(.chat-input--compact) .chat-input__textarea{padding:.5rem .75rem;font-size:.8125rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], messageSubmit: [{ type: i0.Output, args: ["messageSubmit"] }], typing: [{ type: i0.Output, args: ["typing"] }], textareaRef: [{ type: i0.ViewChild, args: ['textareaRef', { isSignal: true }] }] } });
+
+/**
+ * Chat component - Flexible chat/messaging component
+ *
+ * @example
+ * <studio-chat
+ *   [messages]="messages"
+ *   [currentUserId]="currentUser.id"
+ *   variant="default"
+ *   (messageSubmit)="handleMessage($event)"
+ * />
+ */
+class ChatComponent {
+    // ========== Required ==========
+    messages = input.required(...(ngDevMode ? [{ debugName: "messages" }] : []));
+    currentUserId = input.required(...(ngDevMode ? [{ debugName: "currentUserId" }] : []));
+    // ========== Appearance ==========
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    height = input('600px', ...(ngDevMode ? [{ debugName: "height" }] : []));
+    // ========== Behavior ==========
+    placeholder = input('Type a message...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    showAvatars = input(true, ...(ngDevMode ? [{ debugName: "showAvatars" }] : []));
+    showTimestamps = input(true, ...(ngDevMode ? [{ debugName: "showTimestamps" }] : []));
+    showUserNames = input(true, ...(ngDevMode ? [{ debugName: "showUserNames" }] : []));
+    enableAutoScroll = input(true, ...(ngDevMode ? [{ debugName: "enableAutoScroll" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    // ========== Customization ==========
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    // ========== Outputs ==========
+    messageSubmit = output();
+    typing = output();
+    // ========== State ==========
+    messagesContainerRef = viewChild('messagesContainer', ...(ngDevMode ? [{ debugName: "messagesContainerRef" }] : []));
+    isScrolledUp = signal(false, ...(ngDevMode ? [{ debugName: "isScrolledUp" }] : []));
+    shouldAutoScroll = signal(true, ...(ngDevMode ? [{ debugName: "shouldAutoScroll" }] : []));
+    hostClasses = computed(() => {
+        const classes = ['studio-chat'];
+        classes.push(`studio-chat--${this.variant()}`);
+        classes.push(`studio-chat--${this.size()}`);
+        if (this.disabled())
+            classes.push('studio-chat--disabled');
+        if (this.class())
+            classes.push(this.class());
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    isCompact = computed(() => this.variant() === 'compact' || this.variant() === 'minimal', ...(ngDevMode ? [{ debugName: "isCompact" }] : []));
+    constructor() {
+        // Auto-scroll when new messages arrive
+        effect(() => {
+            const messages = this.messages();
+            if (messages.length > 0 && this.shouldAutoScroll() && this.enableAutoScroll()) {
+                setTimeout(() => this.scrollToBottom(), 0);
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.scrollToBottom();
+    }
+    onScroll() {
+        const container = this.messagesContainerRef()?.nativeElement;
+        if (!container)
+            return;
+        const isAtBottom = container.scrollHeight - container.scrollTop - container.clientHeight < 50;
+        this.isScrolledUp.set(!isAtBottom);
+        this.shouldAutoScroll.set(isAtBottom);
+    }
+    onMessageSubmit(event) {
+        this.messageSubmit.emit(event);
+        this.shouldAutoScroll.set(true);
+    }
+    scrollToBottom() {
+        const container = this.messagesContainerRef()?.nativeElement;
+        if (container) {
+            container.scrollTop = container.scrollHeight;
+            this.isScrolledUp.set(false);
+            this.shouldAutoScroll.set(true);
+        }
+    }
+    onTyping(typing) {
+        this.typing.emit(typing);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: ChatComponent, isStandalone: true, selector: "studio-chat", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: true, transformFunction: null }, currentUserId: { classPropertyName: "currentUserId", publicName: "currentUserId", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showAvatars: { classPropertyName: "showAvatars", publicName: "showAvatars", isSignal: true, isRequired: false, transformFunction: null }, showTimestamps: { classPropertyName: "showTimestamps", publicName: "showTimestamps", isSignal: true, isRequired: false, transformFunction: null }, showUserNames: { classPropertyName: "showUserNames", publicName: "showUserNames", isSignal: true, isRequired: false, transformFunction: null }, enableAutoScroll: { classPropertyName: "enableAutoScroll", publicName: "enableAutoScroll", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { messageSubmit: "messageSubmit", typing: "typing" }, host: { properties: { "class": "hostClasses()", "style.height": "height()" } }, viewQueries: [{ propertyName: "messagesContainerRef", first: true, predicate: ["messagesContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"chat__container\">\n  <div\n    #messagesContainer\n    class=\"chat__messages\"\n    (scroll)=\"onScroll()\"\n  >\n    @if (messages().length === 0) {\n      <div class=\"chat__empty\">\n        <studio-icon name=\"message-circle\" [size]=\"48\" />\n        <p>No messages yet</p>\n        <small>Start a conversation</small>\n      </div>\n    } @else {\n      @for (message of messages(); track message.id || $index) {\n        <studio-chat-message\n          [message]=\"message\"\n          [currentUserId]=\"currentUserId()\"\n          [showAvatar]=\"showAvatars()\"\n          [showTimestamp]=\"showTimestamps()\"\n          [showUserName]=\"showUserNames()\"\n          [compact]=\"isCompact()\"\n        />\n      }\n    }\n  </div>\n\n  @if (isScrolledUp()) {\n    <button\n      class=\"chat__scroll-button\"\n      (click)=\"scrollToBottom()\"\n      type=\"button\"\n    >\n      <studio-icon name=\"arrow-down\" [size]=\"20\" />\n    </button>\n  }\n\n  <studio-chat-input\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [compact]=\"isCompact()\"\n    (messageSubmit)=\"onMessageSubmit($event)\"\n    (typing)=\"onTyping($event)\"\n  />\n</div>\n", styles: [":host{display:block;position:relative;background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-lg);overflow:hidden}.chat__container{display:flex;flex-direction:column;height:100%}.chat__messages{flex:1;overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;scroll-behavior:smooth}.chat__messages::-webkit-scrollbar{width:6px}.chat__messages::-webkit-scrollbar-track{background:var(--studio-bg-secondary)}.chat__messages::-webkit-scrollbar-thumb{background:var(--studio-border-primary);border-radius:var(--studio-radius-full)}.chat__messages::-webkit-scrollbar-thumb:hover{background:var(--studio-text-tertiary)}.chat__empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;color:var(--studio-text-secondary);padding:3rem 1.5rem}.chat__empty p{margin:0;font-size:1rem;font-weight:500}.chat__empty small{font-size:.875rem;color:var(--studio-text-tertiary)}.chat__scroll-button{position:absolute;bottom:100px;right:1.5rem;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary);border-radius:50%;box-shadow:0 2px 8px #0000001a;cursor:pointer;transition:all .15s ease;color:var(--studio-text-primary);z-index:10}.chat__scroll-button:hover{background:var(--studio-bg-hover);transform:scale(1.05)}.chat__scroll-button:active{transform:scale(.95)}:host(.studio-chat--compact) .chat__messages{padding:1rem}:host(.studio-chat--compact) .chat__scroll-button{bottom:80px}:host(.studio-chat--minimal){border:none;background:transparent}:host(.studio-chat--minimal) .chat__messages{padding:1rem}:host(.studio-chat--bubbles) .chat__messages{padding:1rem}:host(.studio-chat--sm) .chat__messages{padding:1rem;font-size:.875rem}:host(.studio-chat--sm) .chat__scroll-button{width:36px;height:36px;bottom:90px}:host(.studio-chat--lg) .chat__messages{padding:2rem;font-size:1rem}:host(.studio-chat--lg) .chat__scroll-button{width:44px;height:44px;bottom:110px}:host(.studio-chat--disabled){opacity:.6;pointer-events:none}@media (max-width: 640px){.chat__messages{padding:1rem}.chat__scroll-button{bottom:90px;right:1rem}}@media (prefers-reduced-motion: reduce){.chat__messages{scroll-behavior:auto}.chat__scroll-button{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ChatMessageComponent, selector: "studio-chat-message", inputs: ["message", "currentUserId", "showAvatar", "showTimestamp", "showUserName", "compact"] }, { kind: "component", type: ChatInputComponent, selector: "studio-chat-input", inputs: ["placeholder", "disabled", "compact"], outputs: ["messageSubmit", "typing"] }, { kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth", "showFallback", "fallbackIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ChatComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-chat', standalone: true, imports: [
+                        CommonModule,
+                        ChatMessageComponent,
+                        ChatInputComponent,
+                        IconComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                        '[style.height]': 'height()'
+                    }, template: "<div class=\"chat__container\">\n  <div\n    #messagesContainer\n    class=\"chat__messages\"\n    (scroll)=\"onScroll()\"\n  >\n    @if (messages().length === 0) {\n      <div class=\"chat__empty\">\n        <studio-icon name=\"message-circle\" [size]=\"48\" />\n        <p>No messages yet</p>\n        <small>Start a conversation</small>\n      </div>\n    } @else {\n      @for (message of messages(); track message.id || $index) {\n        <studio-chat-message\n          [message]=\"message\"\n          [currentUserId]=\"currentUserId()\"\n          [showAvatar]=\"showAvatars()\"\n          [showTimestamp]=\"showTimestamps()\"\n          [showUserName]=\"showUserNames()\"\n          [compact]=\"isCompact()\"\n        />\n      }\n    }\n  </div>\n\n  @if (isScrolledUp()) {\n    <button\n      class=\"chat__scroll-button\"\n      (click)=\"scrollToBottom()\"\n      type=\"button\"\n    >\n      <studio-icon name=\"arrow-down\" [size]=\"20\" />\n    </button>\n  }\n\n  <studio-chat-input\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [compact]=\"isCompact()\"\n    (messageSubmit)=\"onMessageSubmit($event)\"\n    (typing)=\"onTyping($event)\"\n  />\n</div>\n", styles: [":host{display:block;position:relative;background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-lg);overflow:hidden}.chat__container{display:flex;flex-direction:column;height:100%}.chat__messages{flex:1;overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;scroll-behavior:smooth}.chat__messages::-webkit-scrollbar{width:6px}.chat__messages::-webkit-scrollbar-track{background:var(--studio-bg-secondary)}.chat__messages::-webkit-scrollbar-thumb{background:var(--studio-border-primary);border-radius:var(--studio-radius-full)}.chat__messages::-webkit-scrollbar-thumb:hover{background:var(--studio-text-tertiary)}.chat__empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;color:var(--studio-text-secondary);padding:3rem 1.5rem}.chat__empty p{margin:0;font-size:1rem;font-weight:500}.chat__empty small{font-size:.875rem;color:var(--studio-text-tertiary)}.chat__scroll-button{position:absolute;bottom:100px;right:1.5rem;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary);border-radius:50%;box-shadow:0 2px 8px #0000001a;cursor:pointer;transition:all .15s ease;color:var(--studio-text-primary);z-index:10}.chat__scroll-button:hover{background:var(--studio-bg-hover);transform:scale(1.05)}.chat__scroll-button:active{transform:scale(.95)}:host(.studio-chat--compact) .chat__messages{padding:1rem}:host(.studio-chat--compact) .chat__scroll-button{bottom:80px}:host(.studio-chat--minimal){border:none;background:transparent}:host(.studio-chat--minimal) .chat__messages{padding:1rem}:host(.studio-chat--bubbles) .chat__messages{padding:1rem}:host(.studio-chat--sm) .chat__messages{padding:1rem;font-size:.875rem}:host(.studio-chat--sm) .chat__scroll-button{width:36px;height:36px;bottom:90px}:host(.studio-chat--lg) .chat__messages{padding:2rem;font-size:1rem}:host(.studio-chat--lg) .chat__scroll-button{width:44px;height:44px;bottom:110px}:host(.studio-chat--disabled){opacity:.6;pointer-events:none}@media (max-width: 640px){.chat__messages{padding:1rem}.chat__scroll-button{bottom:90px;right:1rem}}@media (prefers-reduced-motion: reduce){.chat__messages{scroll-behavior:auto}.chat__scroll-button{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: true }] }], currentUserId: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentUserId", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showAvatars: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAvatars", required: false }] }], showTimestamps: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimestamps", required: false }] }], showUserNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUserNames", required: false }] }], enableAutoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableAutoScroll", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], messageSubmit: [{ type: i0.Output, args: ["messageSubmit"] }], typing: [{ type: i0.Output, args: ["typing"] }], messagesContainerRef: [{ type: i0.ViewChild, args: ['messagesContainer', { isSignal: true }] }] } });
+
 /**
  * Checkbox component for selecting boolean values
  *
@@ -4379,6 +5029,452 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Switch component
  */
 
+/**
+ * Directive for declarative column definition
+ *
+ * @example
+ * <studio-table-column
+ *   key="name"
+ *   label="Name"
+ *   [sortable]="true">
+ *   <ng-template let-row>{{ row.name }}</ng-template>
+ * </studio-table-column>
+ */
+class TableColumnDirective {
+    key;
+    label;
+    field;
+    width;
+    minWidth;
+    maxWidth;
+    sortable;
+    sortFn;
+    filterable;
+    align;
+    fixed;
+    hideOnMobile;
+    priority;
+    cellClass;
+    headerClass;
+    formatter;
+    resizable;
+    template;
+    /**
+     * Convert directive inputs to TableColumn config
+     */
+    toColumnConfig() {
+        return {
+            key: this.key,
+            label: this.label,
+            field: this.field,
+            width: this.width,
+            minWidth: this.minWidth,
+            maxWidth: this.maxWidth,
+            sortable: this.sortable,
+            sortFn: this.sortFn,
+            filterable: this.filterable,
+            align: this.align,
+            fixed: this.fixed,
+            hideOnMobile: this.hideOnMobile,
+            priority: this.priority,
+            cellTemplate: this.template,
+            cellClass: this.cellClass,
+            headerClass: this.headerClass,
+            formatter: this.formatter,
+            resizable: this.resizable
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: TableColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: TableColumnDirective, isStandalone: true, selector: "studio-table-column", inputs: { key: "key", label: "label", field: "field", width: "width", minWidth: "minWidth", maxWidth: "maxWidth", sortable: "sortable", sortFn: "sortFn", filterable: "filterable", align: "align", fixed: "fixed", hideOnMobile: "hideOnMobile", priority: "priority", cellClass: "cellClass", headerClass: "headerClass", formatter: "formatter", resizable: "resizable" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: TableColumnDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'studio-table-column',
+                    standalone: true
+                }]
+        }], propDecorators: { key: [{
+                type: Input,
+                args: [{ required: true }]
+            }], label: [{
+                type: Input,
+                args: [{ required: true }]
+            }], field: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], minWidth: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }], sortable: [{
+                type: Input
+            }], sortFn: [{
+                type: Input
+            }], filterable: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], fixed: [{
+                type: Input
+            }], hideOnMobile: [{
+                type: Input
+            }], priority: [{
+                type: Input
+            }], cellClass: [{
+                type: Input
+            }], headerClass: [{
+                type: Input
+            }], formatter: [{
+                type: Input
+            }], resizable: [{
+                type: Input
+            }], template: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }] } });
+
+/**
+ * Enterprise-grade Table component with full feature set
+ *
+ * @example
+ * <studio-table
+ *   [data]="users"
+ *   [columns]="columns"
+ *   selectionMode="multiple"
+ *   [(selected)]="selectedUsers">
+ * </studio-table>
+ */
+class TableComponent {
+    configService = inject(StudioConfigService);
+    tableDefaults = computed(() => this.configService.config().components?.table, ...(ngDevMode ? [{ debugName: "tableDefaults" }] : []));
+    // Config inputs with defaults
+    variantInput = input(undefined, ...(ngDevMode ? [{ debugName: "variantInput", alias: 'variant' }] : [{ alias: 'variant' }]));
+    densityInput = input(undefined, ...(ngDevMode ? [{ debugName: "densityInput", alias: 'density' }] : [{ alias: 'density' }]));
+    variant = withConfigDefault(this.variantInput, computed(() => this.tableDefaults()?.variant), 'default');
+    density = withConfigDefault(this.densityInput, computed(() => this.tableDefaults()?.density), 'comfortable');
+    // Data inputs
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    rowKey = input('id', ...(ngDevMode ? [{ debugName: "rowKey" }] : []));
+    // Column directives (declarative mode)
+    columnDirectives = contentChildren(TableColumnDirective, ...(ngDevMode ? [{ debugName: "columnDirectives" }] : []));
+    // Features
+    selectionMode = input('none', ...(ngDevMode ? [{ debugName: "selectionMode" }] : []));
+    sortable = input(true, ...(ngDevMode ? [{ debugName: "sortable" }] : []));
+    sortMode = input('client', ...(ngDevMode ? [{ debugName: "sortMode" }] : []));
+    hoverable = input(true, ...(ngDevMode ? [{ debugName: "hoverable" }] : []));
+    stickyHeader = input(false, ...(ngDevMode ? [{ debugName: "stickyHeader" }] : []));
+    showHeader = input(true, ...(ngDevMode ? [{ debugName: "showHeader" }] : []));
+    // Row expansion
+    expandable = input(false, ...(ngDevMode ? [{ debugName: "expandable" }] : []));
+    expandedRowTemplate = contentChild('expandedRow', ...(ngDevMode ? [{ debugName: "expandedRowTemplate" }] : []));
+    expandMultiple = input(false, ...(ngDevMode ? [{ debugName: "expandMultiple" }] : []));
+    // Loading & Empty states
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    loadingRows = input(5, ...(ngDevMode ? [{ debugName: "loadingRows" }] : []));
+    emptyState = input({
+        icon: 'inbox',
+        title: 'No data',
+        message: 'No data available to display'
+    }, ...(ngDevMode ? [{ debugName: "emptyState" }] : []));
+    // Row actions
+    rowActions = input([], ...(ngDevMode ? [{ debugName: "rowActions" }] : []));
+    // Responsive
+    responsive = input(true, ...(ngDevMode ? [{ debugName: "responsive" }] : []));
+    mobileBreakpoint = input(768, ...(ngDevMode ? [{ debugName: "mobileBreakpoint" }] : []));
+    // State models
+    selected = model([], ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    sort = model(null, ...(ngDevMode ? [{ debugName: "sort" }] : []));
+    expanded = model(new Set(), ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    // Outputs
+    sortChange = output();
+    selectionChange = output();
+    rowClick = output();
+    rowDblClick = output();
+    // Internal state
+    currentSort = signal(null, ...(ngDevMode ? [{ debugName: "currentSort" }] : []));
+    selectedRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedRows" }] : []));
+    expandedRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedRows" }] : []));
+    // Computed columns (merge programmatic + declarative)
+    finalColumns = computed(() => {
+        const programmatic = this.columns();
+        const declarative = this.columnDirectives().map(dir => dir.toColumnConfig());
+        return declarative.length > 0 ? declarative : programmatic;
+    }, ...(ngDevMode ? [{ debugName: "finalColumns" }] : []));
+    // Computed data (sorted, filtered)
+    processedData = computed(() => {
+        let result = [...this.data()];
+        // Apply sorting (client-side only)
+        if (this.sortMode() === 'client' && this.currentSort()) {
+            result = this.applySorting(result);
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "processedData" }] : []));
+    // Selection helpers
+    allSelected = computed(() => {
+        const data = this.processedData();
+        const selected = this.selectedRows();
+        return data.length > 0 && data.every(row => selected.has(this.getRowKey(row)));
+    }, ...(ngDevMode ? [{ debugName: "allSelected" }] : []));
+    someSelected = computed(() => {
+        const data = this.processedData();
+        const selected = this.selectedRows();
+        return data.some(row => selected.has(this.getRowKey(row))) && !this.allSelected();
+    }, ...(ngDevMode ? [{ debugName: "someSelected" }] : []));
+    hostClasses = computed(() => classNames('studio-table', `studio-table--${this.variant()}`, `studio-table--${this.density()}`, this.hoverable() && 'studio-table--hoverable', this.stickyHeader() && 'studio-table--sticky-header', this.loading() && 'studio-table--loading', this.responsive() && 'studio-table--responsive'), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    constructor() {
+        // Sync model signals
+        effect(() => {
+            const sortVal = this.sort();
+            if (sortVal)
+                this.currentSort.set(sortVal);
+        });
+        effect(() => {
+            const current = this.currentSort();
+            if (current)
+                this.sort.set(current);
+        });
+        effect(() => {
+            const selected = this.selected();
+            const keys = new Set(selected.map(row => this.getRowKey(row)));
+            this.selectedRows.set(keys);
+        });
+        effect(() => {
+            const expanded = this.expanded();
+            this.expandedRows.set(expanded);
+        });
+    }
+    // Public API
+    sortBy(column, direction) {
+        if (!column.sortable && !this.sortable())
+            return;
+        const currentSort = this.currentSort();
+        const prevDirection = currentSort?.column === column.key ? currentSort.direction : null;
+        // Toggle: asc -> desc -> null
+        let newDirection = direction || 'asc';
+        if (!direction) {
+            if (prevDirection === 'asc')
+                newDirection = 'desc';
+            else if (prevDirection === 'desc')
+                newDirection = null;
+        }
+        if (newDirection) {
+            this.currentSort.set({ column: column.key, direction: newDirection });
+            this.sortChange.emit({
+                column,
+                direction: newDirection,
+                previousDirection: prevDirection
+            });
+        }
+        else {
+            this.currentSort.set(null);
+        }
+    }
+    selectRow(row) {
+        if (this.selectionMode() === 'none')
+            return;
+        const rowKey = this.getRowKey(row);
+        const selected = new Set(this.selectedRows());
+        if (this.selectionMode() === 'single') {
+            selected.clear();
+            selected.add(rowKey);
+        }
+        else {
+            if (selected.has(rowKey)) {
+                selected.delete(rowKey);
+            }
+            else {
+                selected.add(rowKey);
+            }
+        }
+        this.selectedRows.set(selected);
+        this.updateSelectedModel();
+        this.selectionChange.emit({
+            selected: this.getSelectedRows(),
+            row,
+            isSelected: selected.has(rowKey)
+        });
+    }
+    selectAll(select) {
+        if (this.selectionMode() !== 'multiple')
+            return;
+        const selected = new Set();
+        if (select) {
+            this.processedData().forEach(row => {
+                selected.add(this.getRowKey(row));
+            });
+        }
+        this.selectedRows.set(selected);
+        this.updateSelectedModel();
+        this.selectionChange.emit({
+            selected: this.getSelectedRows(),
+            isSelected: select
+        });
+    }
+    toggleRowExpansion(row) {
+        if (!this.expandable())
+            return;
+        const rowKey = this.getRowKey(row);
+        const expanded = new Set(this.expandedRows());
+        if (!this.expandMultiple()) {
+            expanded.clear();
+        }
+        if (expanded.has(rowKey)) {
+            expanded.delete(rowKey);
+        }
+        else {
+            expanded.add(rowKey);
+        }
+        this.expandedRows.set(expanded);
+        this.expanded.set(expanded);
+    }
+    isRowExpanded(row) {
+        return this.expandedRows().has(this.getRowKey(row));
+    }
+    isRowSelected(row) {
+        return this.selectedRows().has(this.getRowKey(row));
+    }
+    getCellValue(row, column) {
+        if (column.field) {
+            if (typeof column.field === 'function') {
+                return column.field(row);
+            }
+            return row[column.field];
+        }
+        return row[column.key];
+    }
+    getHeaderClass(column) {
+        const classes = ['studio-table__th'];
+        if (column.headerClass)
+            classes.push(column.headerClass);
+        if (column.sortable)
+            classes.push('studio-table__th--sortable');
+        if (this.currentSort()?.column === column.key)
+            classes.push('studio-table__th--sorted');
+        const align = column.align || 'left';
+        classes.push(`studio-table__th--align-${align}`);
+        if (column.fixed)
+            classes.push(`studio-table__th--fixed-${column.fixed}`);
+        if (column.hideOnMobile)
+            classes.push('studio-table__th--hide-mobile');
+        return classes.join(' ');
+    }
+    getCellClass(row, column) {
+        if (typeof column.cellClass === 'function') {
+            return column.cellClass(row);
+        }
+        return column.cellClass || '';
+    }
+    getFullCellClass(row, column) {
+        const classes = ['studio-table__td'];
+        const customClass = this.getCellClass(row, column);
+        if (customClass)
+            classes.push(customClass);
+        const align = column.align || 'left';
+        classes.push(`studio-table__td--align-${align}`);
+        if (column.fixed)
+            classes.push(`studio-table__td--fixed-${column.fixed}`);
+        if (column.hideOnMobile)
+            classes.push('studio-table__td--hide-mobile');
+        return classes.join(' ');
+    }
+    getCellContext(row, column, index) {
+        const value = this.getCellValue(row, column);
+        return {
+            $implicit: value,
+            row,
+            column,
+            index
+        };
+    }
+    getHeaderContext(column) {
+        const currentSort = this.currentSort();
+        return {
+            column,
+            sorted: currentSort?.column === column.key,
+            direction: currentSort?.column === column.key ? currentSort.direction : null
+        };
+    }
+    getSortIcon(column) {
+        const currentSort = this.currentSort();
+        if (currentSort?.column !== column.key)
+            return 'arrow-up-down';
+        return currentSort.direction === 'asc' ? 'arrow-up' : 'arrow-down';
+    }
+    handleRowClick(row, event) {
+        if (event.target.closest('.studio-table__actions'))
+            return;
+        this.rowClick.emit(row);
+    }
+    handleRowDblClick(row) {
+        this.rowDblClick.emit(row);
+    }
+    executeRowAction(action, row, event) {
+        event.stopPropagation();
+        if (action.disabled && action.disabled(row))
+            return;
+        action.handler(row);
+    }
+    isActionVisible(action, row) {
+        return !action.visible || action.visible(row);
+    }
+    isActionDisabled(action, row) {
+        return action.disabled ? action.disabled(row) : false;
+    }
+    // Public helpers for template
+    getRowKey(row) {
+        const keyFn = this.rowKey();
+        if (typeof keyFn === 'function') {
+            return keyFn(row);
+        }
+        return row[keyFn];
+    }
+    getSelectedRows() {
+        const selected = this.selectedRows();
+        return this.processedData().filter(row => selected.has(this.getRowKey(row)));
+    }
+    updateSelectedModel() {
+        this.selected.set(this.getSelectedRows());
+    }
+    applySorting(data) {
+        const sortConfig = this.currentSort();
+        if (!sortConfig)
+            return data;
+        const column = this.finalColumns().find(col => col.key === sortConfig.column);
+        if (!column)
+            return data;
+        return [...data].sort((a, b) => {
+            if (column.sortFn) {
+                return column.sortFn(a, b, sortConfig.direction);
+            }
+            const aVal = this.getCellValue(a, column);
+            const bVal = this.getCellValue(b, column);
+            if (aVal === bVal)
+                return 0;
+            if (aVal == null)
+                return 1;
+            if (bVal == null)
+                return -1;
+            const comparison = aVal < bVal ? -1 : 1;
+            return sortConfig.direction === 'asc' ? comparison : -comparison;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: TableComponent, isStandalone: true, selector: "studio-table", inputs: { variantInput: { classPropertyName: "variantInput", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, densityInput: { classPropertyName: "densityInput", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, sortMode: { classPropertyName: "sortMode", publicName: "sortMode", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expandMultiple: { classPropertyName: "expandMultiple", publicName: "expandMultiple", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingRows: { classPropertyName: "loadingRows", publicName: "loadingRows", isSignal: true, isRequired: false, transformFunction: null }, emptyState: { classPropertyName: "emptyState", publicName: "emptyState", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", sort: "sortChange", expanded: "expandedChange", sortChange: "sortChange", selectionChange: "selectionChange", rowClick: "rowClick", rowDblClick: "rowDblClick" }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "columnDirectives", predicate: TableColumnDirective, isSignal: true }, { propertyName: "expandedRowTemplate", first: true, predicate: ["expandedRow"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"studio-table__wrapper\">\n  <!-- Loading Overlay -->\n  @if (loading()) {\n    <div class=\"studio-table__loading-overlay\">\n      <studio-icon name=\"loader-2\" [size]=\"32\" class=\"studio-table__spinner\" />\n    </div>\n  }\n\n  <!-- Table Container -->\n  <div class=\"studio-table__container\">\n    <table class=\"studio-table__table\">\n      <!-- Header -->\n      @if (showHeader()) {\n        <thead class=\"studio-table__thead\">\n          <tr class=\"studio-table__header-row\">\n            <!-- Selection Column -->\n            @if (selectionMode() === 'multiple') {\n              <th class=\"studio-table__th studio-table__th--selection\">\n                <studio-checkbox\n                  [value]=\"allSelected()\"\n                  [indeterminate]=\"someSelected()\"\n                  (changed)=\"selectAll($event)\"\n                />\n              </th>\n            }\n\n            <!-- Expansion Column -->\n            @if (expandable()) {\n              <th class=\"studio-table__th studio-table__th--expand\"></th>\n            }\n\n            <!-- Data Columns -->\n            @for (column of finalColumns(); track column.key) {\n              <th\n                [class]=\"getHeaderClass(column)\"\n                [style.width]=\"column.width\"\n                [style.min-width]=\"column.minWidth\"\n                [style.max-width]=\"column.maxWidth\"\n                (click)=\"column.sortable && sortBy(column)\">\n\n                <div class=\"studio-table__header-content\">\n                  @if (column.headerTemplate) {\n                    <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: getHeaderContext(column)\" />\n                  } @else {\n                    <span>{{ column.label }}</span>\n                    @if (column.sortable && sortable()) {\n                      <studio-icon\n                        [name]=\"getSortIcon(column)\"\n                        [size]=\"16\"\n                        class=\"studio-table__sort-icon\"\n                      />\n                    }\n                  }\n                </div>\n              </th>\n            }\n\n            <!-- Actions Column -->\n            @if (rowActions().length > 0) {\n              <th class=\"studio-table__th studio-table__th--actions\">Actions</th>\n            }\n          </tr>\n        </thead>\n      }\n\n      <!-- Body -->\n      <tbody class=\"studio-table__tbody\">\n        <!-- Loading Skeleton -->\n        @if (loading()) {\n          @for (i of [].constructor(loadingRows()); track i) {\n            <tr class=\"studio-table__row studio-table__row--loading\">\n              @if (selectionMode() === 'multiple') {\n                <td class=\"studio-table__td\">\n                  <div class=\"studio-table__skeleton studio-table__skeleton--checkbox\"></div>\n                </td>\n              }\n              @if (expandable()) {\n                <td class=\"studio-table__td\">\n                  <div class=\"studio-table__skeleton studio-table__skeleton--icon\"></div>\n                </td>\n              }\n              @for (column of finalColumns(); track column.key) {\n                <td class=\"studio-table__td\" [class.studio-table__th--hide-mobile]=\"column.hideOnMobile\">\n                  <div class=\"studio-table__skeleton\"></div>\n                </td>\n              }\n              @if (rowActions().length > 0) {\n                <td class=\"studio-table__td\">\n                  <div class=\"studio-table__skeleton studio-table__skeleton--icon\"></div>\n                </td>\n              }\n            </tr>\n          }\n        }\n\n        <!-- Empty State -->\n        @if (!loading() && processedData().length === 0) {\n          <tr class=\"studio-table__row studio-table__row--empty\">\n            <td [attr.colspan]=\"finalColumns().length + (selectionMode() === 'multiple' ? 1 : 0) + (expandable() ? 1 : 0) + (rowActions().length > 0 ? 1 : 0)\" class=\"studio-table__td\">\n              <div class=\"studio-table__empty\">\n                <studio-icon [name]=\"emptyState().icon || 'inbox'\" [size]=\"48\" class=\"studio-table__empty-icon\" />\n                <h3 class=\"studio-table__empty-title\">{{ emptyState().title }}</h3>\n                <p class=\"studio-table__empty-message\">{{ emptyState().message }}</p>\n                @if (emptyState().action) {\n                  <studio-button\n                    size=\"sm\"\n                    (clicked)=\"emptyState().action!.handler()\">\n                    {{ emptyState().action!.label }}\n                  </studio-button>\n                }\n              </div>\n            </td>\n          </tr>\n        }\n\n        <!-- Data Rows -->\n        @if (!loading()) {\n          @for (row of processedData(); track getRowKey(row); let rowIndex = $index) {\n            <!-- Main Row -->\n            <tr\n              class=\"studio-table__row\"\n              [class.studio-table__row--selected]=\"isRowSelected(row)\"\n              [class.studio-table__row--expanded]=\"isRowExpanded(row)\"\n              [class.studio-table__row--clickable]=\"selectionMode() === 'single'\"\n              (click)=\"selectionMode() === 'single' && selectRow(row); handleRowClick(row, $event)\"\n              (dblclick)=\"handleRowDblClick(row)\">\n\n              <!-- Selection Cell -->\n              @if (selectionMode() === 'multiple') {\n                <td class=\"studio-table__td studio-table__td--selection\">\n                  <studio-checkbox\n                    [value]=\"isRowSelected(row)\"\n                    (changed)=\"selectRow(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                  />\n                </td>\n              }\n\n              <!-- Expansion Cell -->\n              @if (expandable()) {\n                <td class=\"studio-table__td studio-table__td--expand\">\n                  <studio-button\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    iconPosition=\"only\"\n                    [icon]=\"isRowExpanded(row) ? 'chevron-down' : 'chevron-right'\"\n                    (clicked)=\"toggleRowExpansion(row); $event.stopPropagation()\"\n                  />\n                </td>\n              }\n\n              <!-- Data Cells -->\n              @for (column of finalColumns(); track column.key) {\n                <td\n                  [class]=\"getFullCellClass(row, column)\"\n                  [attr.data-label]=\"column.label\">\n\n                  @if (column.cellTemplate) {\n                    <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: getCellContext(row, column, rowIndex)\" />\n                  } @else {\n                    <span>{{ column.formatter ? column.formatter(getCellValue(row, column), row) : getCellValue(row, column) }}</span>\n                  }\n                </td>\n              }\n\n              <!-- Actions Cell -->\n              @if (rowActions().length > 0) {\n                <td class=\"studio-table__td studio-table__td--actions\">\n                  <div class=\"studio-table__actions\">\n                    @for (action of rowActions(); track action.label) {\n                      @if (isActionVisible(action, row)) {\n                        @if (action.divider) {\n                          <div class=\"studio-table__action-divider\"></div>\n                        }\n                        <studio-button\n                          variant=\"ghost\"\n                          size=\"sm\"\n                          [icon]=\"action.icon\"\n                          [disabled]=\"isActionDisabled(action, row)\"\n                          [color]=\"action.variant === 'danger' ? 'error' : 'primary'\"\n                          (clicked)=\"executeRowAction(action, row, $event)\">\n                          {{ action.label }}\n                        </studio-button>\n                      }\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n\n            <!-- Expanded Row -->\n            @if (expandable() && isRowExpanded(row) && expandedRowTemplate()) {\n              <tr class=\"studio-table__row studio-table__row--expansion\">\n                <td [attr.colspan]=\"finalColumns().length + (selectionMode() === 'multiple' ? 1 : 0) + (expandable() ? 1 : 0) + (rowActions().length > 0 ? 1 : 0)\" class=\"studio-table__td\">\n                  <div class=\"studio-table__expansion-content\">\n                    <ng-container *ngTemplateOutlet=\"expandedRowTemplate(); context: { $implicit: row, index: rowIndex }\" />\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n", styles: [":host{display:block;font-family:var(--studio-font-family);position:relative}.studio-table__wrapper{position:relative;width:100%;overflow:hidden}.studio-table__container{width:100%;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}.studio-table__container::-webkit-scrollbar{height:8px}.studio-table__container::-webkit-scrollbar-track{background:var(--studio-bg-secondary);border-radius:var(--studio-radius-sm)}.studio-table__container::-webkit-scrollbar-thumb{background:var(--studio-border-primary);border-radius:var(--studio-radius-sm)}.studio-table__container::-webkit-scrollbar-thumb:hover{background:var(--studio-text-tertiary)}.studio-table__table{width:100%;border-collapse:separate;border-spacing:0;background:var(--studio-bg-primary)}.studio-table__thead{background:var(--studio-bg-secondary)}.studio-table__header-row{border-bottom:1px solid var(--studio-border-primary)}.studio-table__th{padding:.75rem 1rem;text-align:left;font-weight:var(--studio-font-weight-semibold);font-size:var(--studio-font-size-sm);color:var(--studio-text-primary);white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative}.studio-table__th--sortable{cursor:pointer;transition:background-color var(--studio-transition-fast)}.studio-table__th--sortable:hover{background:var(--studio-bg-tertiary)}.studio-table__th--sorted{color:var(--studio-primary)}.studio-table__th--selection,.studio-table__th--expand{width:48px;padding:.75rem .5rem}.studio-table__th--actions{width:auto;min-width:100px}.studio-table__th--align-center{text-align:center}.studio-table__th--align-right{text-align:right}.studio-table__th--fixed-left{position:sticky;left:0;z-index:2;background:var(--studio-bg-secondary);box-shadow:2px 0 4px #0000000d}.studio-table__th--fixed-right{position:sticky;right:0;z-index:2;background:var(--studio-bg-secondary);box-shadow:-2px 0 4px #0000000d}.studio-table__header-content{display:flex;align-items:center;gap:.5rem}.studio-table__sort-icon{flex-shrink:0;color:var(--studio-text-tertiary);transition:color var(--studio-transition-fast)}.studio-table__th--sorted .studio-table__sort-icon{color:var(--studio-primary)}.studio-table__row{border-bottom:1px solid var(--studio-border-primary);transition:background-color var(--studio-transition-fast)}.studio-table__row--clickable{cursor:pointer}.studio-table__row--selected{background:var(--studio-primary-bg)}.studio-table__row--expansion{background:var(--studio-bg-secondary)}.studio-table__row--loading{pointer-events:none}.studio-table__td{padding:.75rem 1rem;font-size:var(--studio-font-size-base);color:var(--studio-text-primary);vertical-align:middle}.studio-table__td--selection,.studio-table__td--expand{width:48px;padding:.75rem .5rem}.studio-table__td--actions{width:auto}.studio-table__td--align-center{text-align:center}.studio-table__td--align-right{text-align:right}.studio-table__td--fixed-left{position:sticky;left:0;z-index:1;background:var(--studio-bg-primary);box-shadow:2px 0 4px #0000000d}.studio-table__row--selected .studio-table__td--fixed-left{background:var(--studio-primary-bg)}.studio-table__td--fixed-right{position:sticky;right:0;z-index:1;background:var(--studio-bg-primary);box-shadow:-2px 0 4px #0000000d}.studio-table__row--selected .studio-table__td--fixed-right{background:var(--studio-primary-bg)}:host(.studio-table--compact) .studio-table__th,:host(.studio-table--compact) .studio-table__td{padding:.5rem .75rem}:host(.studio-table--compact) .studio-table__th{font-size:.813rem}:host(.studio-table--compact) .studio-table__td{font-size:.875rem}:host(.studio-table--spacious) .studio-table__th,:host(.studio-table--spacious) .studio-table__td{padding:1rem 1.5rem}:host(.studio-table--spacious) .studio-table__th{font-size:var(--studio-font-size-base)}:host(.studio-table--spacious) .studio-table__td{font-size:var(--studio-font-size-lg)}:host(.studio-table--striped) .studio-table__row:nth-child(2n){background:var(--studio-bg-secondary)}:host(.studio-table--bordered) .studio-table__table{border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md)}:host(.studio-table--bordered) .studio-table__th,:host(.studio-table--bordered) .studio-table__td{border-right:1px solid var(--studio-border-primary)}:host(.studio-table--bordered) .studio-table__th:last-child,:host(.studio-table--bordered) .studio-table__td:last-child{border-right:none}:host(.studio-table--minimal) .studio-table__thead{background:transparent}:host(.studio-table--minimal) .studio-table__header-row{border-bottom:2px solid var(--studio-border-primary)}:host(.studio-table--minimal) .studio-table__row{border-bottom-style:dashed}:host(.studio-table--hoverable) .studio-table__row:not(.studio-table__row--empty):not(.studio-table__row--loading):not(.studio-table__row--expansion):hover{background:var(--studio-bg-secondary)}:host(.studio-table--hoverable) .studio-table__row--selected:hover{background:var(--studio-primary-bg);filter:brightness(.98)}:host(.studio-table--sticky-header) .studio-table__thead{position:sticky;top:0;z-index:3;box-shadow:0 2px 4px #0000000d}.studio-table__actions{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap}.studio-table__action-divider{width:1px;height:1.5rem;background:var(--studio-border-primary);margin:0 .25rem}.studio-table__expansion-content{padding:1rem;background:var(--studio-bg-tertiary);border-radius:var(--studio-radius-sm)}.studio-table__loading-overlay{position:absolute;inset:0;background:#fffc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:10}.studio-table__spinner{animation:spin 1s linear infinite;color:var(--studio-primary)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.studio-table__skeleton{height:1rem;background:linear-gradient(90deg,var(--studio-bg-secondary) 0%,var(--studio-bg-tertiary) 50%,var(--studio-bg-secondary) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--studio-radius-sm)}.studio-table__skeleton--checkbox{width:1.25rem;height:1.25rem}.studio-table__skeleton--icon{width:2rem;height:1rem}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.studio-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;text-align:center}.studio-table__empty-icon{color:var(--studio-text-tertiary);margin-bottom:1rem}.studio-table__empty-title{margin:0 0 .5rem;font-size:var(--studio-font-size-lg);font-weight:var(--studio-font-weight-semibold);color:var(--studio-text-primary)}.studio-table__empty-message{margin:0 0 1.5rem;font-size:var(--studio-font-size-base);color:var(--studio-text-secondary)}@media (max-width: 768px){:host(.studio-table--responsive) .studio-table__container{overflow-x:visible}:host(.studio-table--responsive) .studio-table__table{display:block}:host(.studio-table--responsive) .studio-table__thead{display:none}:host(.studio-table--responsive) .studio-table__tbody{display:block}:host(.studio-table--responsive) .studio-table__row{display:block;margin-bottom:1rem;border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md);box-shadow:var(--studio-shadow-sm);overflow:hidden}:host(.studio-table--responsive) .studio-table__row--empty,:host(.studio-table--responsive) .studio-table__row--loading{display:table-row}:host(.studio-table--responsive) .studio-table__row--expansion{margin-top:-1rem;border-top:none;border-top-left-radius:0;border-top-right-radius:0}:host(.studio-table--responsive) .studio-table__td{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--studio-border-primary)}:host(.studio-table--responsive) .studio-table__td:last-child{border-bottom:none}:host(.studio-table--responsive) .studio-table__td:before{content:attr(data-label);font-weight:var(--studio-font-weight-semibold);color:var(--studio-text-secondary);min-width:100px;flex-shrink:0}:host(.studio-table--responsive) .studio-table__td--selection,:host(.studio-table--responsive) .studio-table__td--expand{display:flex;justify-content:center;padding:.5rem 1rem}:host(.studio-table--responsive) .studio-table__td--selection:before,:host(.studio-table--responsive) .studio-table__td--expand:before{display:none}:host(.studio-table--responsive) .studio-table__td--actions{display:block;padding:.75rem 1rem}:host(.studio-table--responsive) .studio-table__td--actions:before{display:block;margin-bottom:.5rem}:host(.studio-table--responsive) .studio-table__td--actions .studio-table__actions{justify-content:flex-start}:host(.studio-table--responsive) .studio-table__td--hide-mobile{display:none!important}:host(.studio-table--responsive) .studio-table__expansion-content{padding:.75rem 1rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth", "showFallback", "fallbackIcon"] }, { kind: "component", type: CheckboxComponent, selector: "studio-checkbox", inputs: ["size", "color", "variant", "radius", "label", "labelPosition", "description", "hint", "required", "error", "errorMessage", "disabled", "readonly", "indeterminate", "name", "tabIndex", "value"], outputs: ["changed"] }, { kind: "component", type: ButtonComponent, selector: "studio-button", inputs: ["variant", "size", "color", "radius", "shadow", "compact", "disabled", "loading", "loadingText", "fullWidth", "type", "icon", "iconPosition", "href", "target", "badge", "badgeColor", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-table', standalone: true, imports: [CommonModule, IconComponent, CheckboxComponent, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                    }, template: "<div class=\"studio-table__wrapper\">\n  <!-- Loading Overlay -->\n  @if (loading()) {\n    <div class=\"studio-table__loading-overlay\">\n      <studio-icon name=\"loader-2\" [size]=\"32\" class=\"studio-table__spinner\" />\n    </div>\n  }\n\n  <!-- Table Container -->\n  <div class=\"studio-table__container\">\n    <table class=\"studio-table__table\">\n      <!-- Header -->\n      @if (showHeader()) {\n        <thead class=\"studio-table__thead\">\n          <tr class=\"studio-table__header-row\">\n            <!-- Selection Column -->\n            @if (selectionMode() === 'multiple') {\n              <th class=\"studio-table__th studio-table__th--selection\">\n                <studio-checkbox\n                  [value]=\"allSelected()\"\n                  [indeterminate]=\"someSelected()\"\n                  (changed)=\"selectAll($event)\"\n                />\n              </th>\n            }\n\n            <!-- Expansion Column -->\n            @if (expandable()) {\n              <th class=\"studio-table__th studio-table__th--expand\"></th>\n            }\n\n            <!-- Data Columns -->\n            @for (column of finalColumns(); track column.key) {\n              <th\n                [class]=\"getHeaderClass(column)\"\n                [style.width]=\"column.width\"\n                [style.min-width]=\"column.minWidth\"\n                [style.max-width]=\"column.maxWidth\"\n                (click)=\"column.sortable && sortBy(column)\">\n\n                <div class=\"studio-table__header-content\">\n                  @if (column.headerTemplate) {\n                    <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: getHeaderContext(column)\" />\n                  } @else {\n                    <span>{{ column.label }}</span>\n                    @if (column.sortable && sortable()) {\n                      <studio-icon\n                        [name]=\"getSortIcon(column)\"\n                        [size]=\"16\"\n                        class=\"studio-table__sort-icon\"\n                      />\n                    }\n                  }\n                </div>\n              </th>\n            }\n\n            <!-- Actions Column -->\n            @if (rowActions().length > 0) {\n              <th class=\"studio-table__th studio-table__th--actions\">Actions</th>\n            }\n          </tr>\n        </thead>\n      }\n\n      <!-- Body -->\n      <tbody class=\"studio-table__tbody\">\n        <!-- Loading Skeleton -->\n        @if (loading()) {\n          @for (i of [].constructor(loadingRows()); track i) {\n            <tr class=\"studio-table__row studio-table__row--loading\">\n              @if (selectionMode() === 'multiple') {\n                <td class=\"studio-table__td\">\n                  <div class=\"studio-table__skeleton studio-table__skeleton--checkbox\"></div>\n                </td>\n              }\n              @if (expandable()) {\n                <td class=\"studio-table__td\">\n                  <div class=\"studio-table__skeleton studio-table__skeleton--icon\"></div>\n                </td>\n              }\n              @for (column of finalColumns(); track column.key) {\n                <td class=\"studio-table__td\" [class.studio-table__th--hide-mobile]=\"column.hideOnMobile\">\n                  <div class=\"studio-table__skeleton\"></div>\n                </td>\n              }\n              @if (rowActions().length > 0) {\n                <td class=\"studio-table__td\">\n                  <div class=\"studio-table__skeleton studio-table__skeleton--icon\"></div>\n                </td>\n              }\n            </tr>\n          }\n        }\n\n        <!-- Empty State -->\n        @if (!loading() && processedData().length === 0) {\n          <tr class=\"studio-table__row studio-table__row--empty\">\n            <td [attr.colspan]=\"finalColumns().length + (selectionMode() === 'multiple' ? 1 : 0) + (expandable() ? 1 : 0) + (rowActions().length > 0 ? 1 : 0)\" class=\"studio-table__td\">\n              <div class=\"studio-table__empty\">\n                <studio-icon [name]=\"emptyState().icon || 'inbox'\" [size]=\"48\" class=\"studio-table__empty-icon\" />\n                <h3 class=\"studio-table__empty-title\">{{ emptyState().title }}</h3>\n                <p class=\"studio-table__empty-message\">{{ emptyState().message }}</p>\n                @if (emptyState().action) {\n                  <studio-button\n                    size=\"sm\"\n                    (clicked)=\"emptyState().action!.handler()\">\n                    {{ emptyState().action!.label }}\n                  </studio-button>\n                }\n              </div>\n            </td>\n          </tr>\n        }\n\n        <!-- Data Rows -->\n        @if (!loading()) {\n          @for (row of processedData(); track getRowKey(row); let rowIndex = $index) {\n            <!-- Main Row -->\n            <tr\n              class=\"studio-table__row\"\n              [class.studio-table__row--selected]=\"isRowSelected(row)\"\n              [class.studio-table__row--expanded]=\"isRowExpanded(row)\"\n              [class.studio-table__row--clickable]=\"selectionMode() === 'single'\"\n              (click)=\"selectionMode() === 'single' && selectRow(row); handleRowClick(row, $event)\"\n              (dblclick)=\"handleRowDblClick(row)\">\n\n              <!-- Selection Cell -->\n              @if (selectionMode() === 'multiple') {\n                <td class=\"studio-table__td studio-table__td--selection\">\n                  <studio-checkbox\n                    [value]=\"isRowSelected(row)\"\n                    (changed)=\"selectRow(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                  />\n                </td>\n              }\n\n              <!-- Expansion Cell -->\n              @if (expandable()) {\n                <td class=\"studio-table__td studio-table__td--expand\">\n                  <studio-button\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    iconPosition=\"only\"\n                    [icon]=\"isRowExpanded(row) ? 'chevron-down' : 'chevron-right'\"\n                    (clicked)=\"toggleRowExpansion(row); $event.stopPropagation()\"\n                  />\n                </td>\n              }\n\n              <!-- Data Cells -->\n              @for (column of finalColumns(); track column.key) {\n                <td\n                  [class]=\"getFullCellClass(row, column)\"\n                  [attr.data-label]=\"column.label\">\n\n                  @if (column.cellTemplate) {\n                    <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: getCellContext(row, column, rowIndex)\" />\n                  } @else {\n                    <span>{{ column.formatter ? column.formatter(getCellValue(row, column), row) : getCellValue(row, column) }}</span>\n                  }\n                </td>\n              }\n\n              <!-- Actions Cell -->\n              @if (rowActions().length > 0) {\n                <td class=\"studio-table__td studio-table__td--actions\">\n                  <div class=\"studio-table__actions\">\n                    @for (action of rowActions(); track action.label) {\n                      @if (isActionVisible(action, row)) {\n                        @if (action.divider) {\n                          <div class=\"studio-table__action-divider\"></div>\n                        }\n                        <studio-button\n                          variant=\"ghost\"\n                          size=\"sm\"\n                          [icon]=\"action.icon\"\n                          [disabled]=\"isActionDisabled(action, row)\"\n                          [color]=\"action.variant === 'danger' ? 'error' : 'primary'\"\n                          (clicked)=\"executeRowAction(action, row, $event)\">\n                          {{ action.label }}\n                        </studio-button>\n                      }\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n\n            <!-- Expanded Row -->\n            @if (expandable() && isRowExpanded(row) && expandedRowTemplate()) {\n              <tr class=\"studio-table__row studio-table__row--expansion\">\n                <td [attr.colspan]=\"finalColumns().length + (selectionMode() === 'multiple' ? 1 : 0) + (expandable() ? 1 : 0) + (rowActions().length > 0 ? 1 : 0)\" class=\"studio-table__td\">\n                  <div class=\"studio-table__expansion-content\">\n                    <ng-container *ngTemplateOutlet=\"expandedRowTemplate(); context: { $implicit: row, index: rowIndex }\" />\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n", styles: [":host{display:block;font-family:var(--studio-font-family);position:relative}.studio-table__wrapper{position:relative;width:100%;overflow:hidden}.studio-table__container{width:100%;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}.studio-table__container::-webkit-scrollbar{height:8px}.studio-table__container::-webkit-scrollbar-track{background:var(--studio-bg-secondary);border-radius:var(--studio-radius-sm)}.studio-table__container::-webkit-scrollbar-thumb{background:var(--studio-border-primary);border-radius:var(--studio-radius-sm)}.studio-table__container::-webkit-scrollbar-thumb:hover{background:var(--studio-text-tertiary)}.studio-table__table{width:100%;border-collapse:separate;border-spacing:0;background:var(--studio-bg-primary)}.studio-table__thead{background:var(--studio-bg-secondary)}.studio-table__header-row{border-bottom:1px solid var(--studio-border-primary)}.studio-table__th{padding:.75rem 1rem;text-align:left;font-weight:var(--studio-font-weight-semibold);font-size:var(--studio-font-size-sm);color:var(--studio-text-primary);white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative}.studio-table__th--sortable{cursor:pointer;transition:background-color var(--studio-transition-fast)}.studio-table__th--sortable:hover{background:var(--studio-bg-tertiary)}.studio-table__th--sorted{color:var(--studio-primary)}.studio-table__th--selection,.studio-table__th--expand{width:48px;padding:.75rem .5rem}.studio-table__th--actions{width:auto;min-width:100px}.studio-table__th--align-center{text-align:center}.studio-table__th--align-right{text-align:right}.studio-table__th--fixed-left{position:sticky;left:0;z-index:2;background:var(--studio-bg-secondary);box-shadow:2px 0 4px #0000000d}.studio-table__th--fixed-right{position:sticky;right:0;z-index:2;background:var(--studio-bg-secondary);box-shadow:-2px 0 4px #0000000d}.studio-table__header-content{display:flex;align-items:center;gap:.5rem}.studio-table__sort-icon{flex-shrink:0;color:var(--studio-text-tertiary);transition:color var(--studio-transition-fast)}.studio-table__th--sorted .studio-table__sort-icon{color:var(--studio-primary)}.studio-table__row{border-bottom:1px solid var(--studio-border-primary);transition:background-color var(--studio-transition-fast)}.studio-table__row--clickable{cursor:pointer}.studio-table__row--selected{background:var(--studio-primary-bg)}.studio-table__row--expansion{background:var(--studio-bg-secondary)}.studio-table__row--loading{pointer-events:none}.studio-table__td{padding:.75rem 1rem;font-size:var(--studio-font-size-base);color:var(--studio-text-primary);vertical-align:middle}.studio-table__td--selection,.studio-table__td--expand{width:48px;padding:.75rem .5rem}.studio-table__td--actions{width:auto}.studio-table__td--align-center{text-align:center}.studio-table__td--align-right{text-align:right}.studio-table__td--fixed-left{position:sticky;left:0;z-index:1;background:var(--studio-bg-primary);box-shadow:2px 0 4px #0000000d}.studio-table__row--selected .studio-table__td--fixed-left{background:var(--studio-primary-bg)}.studio-table__td--fixed-right{position:sticky;right:0;z-index:1;background:var(--studio-bg-primary);box-shadow:-2px 0 4px #0000000d}.studio-table__row--selected .studio-table__td--fixed-right{background:var(--studio-primary-bg)}:host(.studio-table--compact) .studio-table__th,:host(.studio-table--compact) .studio-table__td{padding:.5rem .75rem}:host(.studio-table--compact) .studio-table__th{font-size:.813rem}:host(.studio-table--compact) .studio-table__td{font-size:.875rem}:host(.studio-table--spacious) .studio-table__th,:host(.studio-table--spacious) .studio-table__td{padding:1rem 1.5rem}:host(.studio-table--spacious) .studio-table__th{font-size:var(--studio-font-size-base)}:host(.studio-table--spacious) .studio-table__td{font-size:var(--studio-font-size-lg)}:host(.studio-table--striped) .studio-table__row:nth-child(2n){background:var(--studio-bg-secondary)}:host(.studio-table--bordered) .studio-table__table{border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md)}:host(.studio-table--bordered) .studio-table__th,:host(.studio-table--bordered) .studio-table__td{border-right:1px solid var(--studio-border-primary)}:host(.studio-table--bordered) .studio-table__th:last-child,:host(.studio-table--bordered) .studio-table__td:last-child{border-right:none}:host(.studio-table--minimal) .studio-table__thead{background:transparent}:host(.studio-table--minimal) .studio-table__header-row{border-bottom:2px solid var(--studio-border-primary)}:host(.studio-table--minimal) .studio-table__row{border-bottom-style:dashed}:host(.studio-table--hoverable) .studio-table__row:not(.studio-table__row--empty):not(.studio-table__row--loading):not(.studio-table__row--expansion):hover{background:var(--studio-bg-secondary)}:host(.studio-table--hoverable) .studio-table__row--selected:hover{background:var(--studio-primary-bg);filter:brightness(.98)}:host(.studio-table--sticky-header) .studio-table__thead{position:sticky;top:0;z-index:3;box-shadow:0 2px 4px #0000000d}.studio-table__actions{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap}.studio-table__action-divider{width:1px;height:1.5rem;background:var(--studio-border-primary);margin:0 .25rem}.studio-table__expansion-content{padding:1rem;background:var(--studio-bg-tertiary);border-radius:var(--studio-radius-sm)}.studio-table__loading-overlay{position:absolute;inset:0;background:#fffc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:10}.studio-table__spinner{animation:spin 1s linear infinite;color:var(--studio-primary)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.studio-table__skeleton{height:1rem;background:linear-gradient(90deg,var(--studio-bg-secondary) 0%,var(--studio-bg-tertiary) 50%,var(--studio-bg-secondary) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--studio-radius-sm)}.studio-table__skeleton--checkbox{width:1.25rem;height:1.25rem}.studio-table__skeleton--icon{width:2rem;height:1rem}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.studio-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;text-align:center}.studio-table__empty-icon{color:var(--studio-text-tertiary);margin-bottom:1rem}.studio-table__empty-title{margin:0 0 .5rem;font-size:var(--studio-font-size-lg);font-weight:var(--studio-font-weight-semibold);color:var(--studio-text-primary)}.studio-table__empty-message{margin:0 0 1.5rem;font-size:var(--studio-font-size-base);color:var(--studio-text-secondary)}@media (max-width: 768px){:host(.studio-table--responsive) .studio-table__container{overflow-x:visible}:host(.studio-table--responsive) .studio-table__table{display:block}:host(.studio-table--responsive) .studio-table__thead{display:none}:host(.studio-table--responsive) .studio-table__tbody{display:block}:host(.studio-table--responsive) .studio-table__row{display:block;margin-bottom:1rem;border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md);box-shadow:var(--studio-shadow-sm);overflow:hidden}:host(.studio-table--responsive) .studio-table__row--empty,:host(.studio-table--responsive) .studio-table__row--loading{display:table-row}:host(.studio-table--responsive) .studio-table__row--expansion{margin-top:-1rem;border-top:none;border-top-left-radius:0;border-top-right-radius:0}:host(.studio-table--responsive) .studio-table__td{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--studio-border-primary)}:host(.studio-table--responsive) .studio-table__td:last-child{border-bottom:none}:host(.studio-table--responsive) .studio-table__td:before{content:attr(data-label);font-weight:var(--studio-font-weight-semibold);color:var(--studio-text-secondary);min-width:100px;flex-shrink:0}:host(.studio-table--responsive) .studio-table__td--selection,:host(.studio-table--responsive) .studio-table__td--expand{display:flex;justify-content:center;padding:.5rem 1rem}:host(.studio-table--responsive) .studio-table__td--selection:before,:host(.studio-table--responsive) .studio-table__td--expand:before{display:none}:host(.studio-table--responsive) .studio-table__td--actions{display:block;padding:.75rem 1rem}:host(.studio-table--responsive) .studio-table__td--actions:before{display:block;margin-bottom:.5rem}:host(.studio-table--responsive) .studio-table__td--actions .studio-table__actions{justify-content:flex-start}:host(.studio-table--responsive) .studio-table__td--hide-mobile{display:none!important}:host(.studio-table--responsive) .studio-table__expansion-content{padding:.75rem 1rem}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { variantInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], densityInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], columnDirectives: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TableColumnDirective), { isSignal: true }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], sortMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortMode", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], expandedRowTemplate: [{ type: i0.ContentChild, args: ['expandedRow', { isSignal: true }] }], expandMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandMultiple", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingRows", required: false }] }], emptyState: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyState", required: false }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], mobileBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileBreakpoint", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDblClick: [{ type: i0.Output, args: ["rowDblClick"] }] } });
+
+/**
+ * Table component types and interfaces
+ * Enterprise-grade type-safe table with full feature set
+ */
+
 class TabsComponent {
     tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : []));
     activeTab = signal('', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
@@ -5775,5 +6871,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BadgeComponent, BadgeWrapperComponent, BottomNavigationComponent, ButtonComponent, ButtonGroupComponent, ButtonToggleGroupComponent, CheckboxComponent, ColorPickerCompactComponent, ColorPickerComponent, DEFAULT_COLOR_PRESETS, DrawerComponent, DrawerService, DropdownComponent, IconComponent, InputComponent, InspectorComponent, MASK_PRESETS, MaskDirective, MaskEngine, MenuComponent, ModalComponent, NavbarComponent, PopoverComponent, RadioButtonComponent, STUDIO_CONFIG, SelectComponent, SidebarComponent, StudioConfigService, SwitchComponent, TabsComponent, TextareaComponent, ThemeSwitchComponent, TooltipComponent, classNames, isSafeUrl, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
+export { BadgeComponent, BadgeWrapperComponent, BottomNavigationComponent, ButtonComponent, ButtonGroupComponent, ButtonToggleGroupComponent, CardComponent, ChatComponent, ChatInputComponent, ChatMessageComponent, CheckboxComponent, ColorPickerCompactComponent, ColorPickerComponent, DEFAULT_COLOR_PRESETS, DrawerComponent, DrawerService, DropdownComponent, IconComponent, InputComponent, InspectorComponent, MASK_PRESETS, MaskDirective, MaskEngine, MenuComponent, ModalComponent, NavbarComponent, PopoverComponent, RadioButtonComponent, STUDIO_CONFIG, SelectComponent, SidebarComponent, StudioConfigService, SwitchComponent, TableColumnDirective, TableComponent, TabsComponent, TextareaComponent, ThemeSwitchComponent, TooltipComponent, classNames, isSafeUrl, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
 //# sourceMappingURL=eduboxpro-studio.mjs.map