@eduboxpro/studio 0.1.27 → 0.1.30

package/fesm2022/eduboxpro-studio.mjs

@@ -5453,9 +5453,8 @@ class PaginationComponent {
     firstLabel = input('Первая', ...(ngDevMode ? [{ debugName: "firstLabel" }] : []));
     lastLabel = input('Последняя', ...(ngDevMode ? [{ debugName: "lastLabel" }] : []));
     infoTemplate = input('Показано {from}-{to} из {total}', ...(ngDevMode ? [{ debugName: "infoTemplate" }] : []));
-    // Outputs
-    pageChange = output();
-    pageSizeChange = output();
+    // Note: pageChange and pageSizeChange events are automatically created by model()
+    // They emit the new value directly (number), not event objects
     // Computed values
     totalPages = computed(() => {
         const total = this.totalItems();
@@ -5522,7 +5521,7 @@ class PaginationComponent {
             return;
         }
         this.page.set(pageNum);
-        this.emitPageChange();
+        // model() automatically emits pageChange with the new value
     }
     goToFirst() {
         this.goToPage(1);
@@ -5546,22 +5545,10 @@ class PaginationComponent {
         const newPage = Math.ceil(currentFirstItem / newSizeNum);
         this.pageSize.set(newSizeNum);
         this.page.set(Math.max(1, Math.min(newPage, Math.ceil(this.totalItems() / newSizeNum))));
-        this.pageSizeChange.emit({
-            pageSize: newSizeNum,
-            previousPageSize: previousSize,
-        });
-        this.emitPageChange();
-    }
-    emitPageChange() {
-        this.pageChange.emit({
-            page: this.page(),
-            pageSize: this.pageSize(),
-            totalItems: this.totalItems(),
-            totalPages: this.totalPages(),
-        });
+        // model() automatically emits pageSizeChange and pageChange with new values
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: PaginationComponent, isStandalone: true, selector: "studio-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, maxVisiblePages: { classPropertyName: "maxVisiblePages", publicName: "maxVisiblePages", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, showPageNumbers: { classPropertyName: "showPageNumbers", publicName: "showPageNumbers", isSignal: true, isRequired: false, transformFunction: null }, showInfo: { classPropertyName: "showInfo", publicName: "showInfo", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, pageSizeLabel: { classPropertyName: "pageSizeLabel", publicName: "pageSizeLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, firstLabel: { classPropertyName: "firstLabel", publicName: "firstLabel", isSignal: true, isRequired: false, transformFunction: null }, lastLabel: { classPropertyName: "lastLabel", publicName: "lastLabel", isSignal: true, isRequired: false, transformFunction: null }, infoTemplate: { classPropertyName: "infoTemplate", publicName: "infoTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: PaginationComponent, isStandalone: true, selector: "studio-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, maxVisiblePages: { classPropertyName: "maxVisiblePages", publicName: "maxVisiblePages", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, showPageNumbers: { classPropertyName: "showPageNumbers", publicName: "showPageNumbers", isSignal: true, isRequired: false, transformFunction: null }, showInfo: { classPropertyName: "showInfo", publicName: "showInfo", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, pageSizeLabel: { classPropertyName: "pageSizeLabel", publicName: "pageSizeLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, firstLabel: { classPropertyName: "firstLabel", publicName: "firstLabel", isSignal: true, isRequired: false, transformFunction: null }, lastLabel: { classPropertyName: "lastLabel", publicName: "lastLabel", isSignal: true, isRequired: false, transformFunction: null }, infoTemplate: { classPropertyName: "infoTemplate", publicName: "infoTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
     <div class="studio-pagination__container">
       <!-- Page size selector -->
       @if (showPageSizeSelector()) {
@@ -5774,7 +5761,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
       </div>
     </div>
   `, styles: [":host{display:block;font-family:var(--studio-font-family)}.studio-pagination__container{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.studio-pagination__page-size{display:flex;align-items:center;gap:.5rem}.studio-pagination__label{font-size:.875rem;color:var(--studio-text-secondary);white-space:nowrap}.studio-pagination__select{padding:.375rem .75rem;font-size:.875rem;border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md);background:var(--studio-bg-primary);color:var(--studio-text-primary);cursor:pointer;outline:none;transition:border-color var(--studio-transition-fast)}.studio-pagination__select:hover{border-color:var(--studio-border-hover, var(--studio-border-primary))}.studio-pagination__select:focus{border-color:var(--studio-color-primary);box-shadow:0 0 0 2px var(--studio-color-primary-alpha, rgba(59, 130, 246, .2))}.studio-pagination__info{font-size:.875rem;color:var(--studio-text-secondary);white-space:nowrap}.studio-pagination__nav{display:flex;align-items:center;gap:.25rem}.studio-pagination__btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md);background:var(--studio-bg-primary);color:var(--studio-text-primary);cursor:pointer;transition:all var(--studio-transition-fast)}.studio-pagination__btn:hover:not(:disabled){background:var(--studio-bg-secondary);border-color:var(--studio-border-hover, var(--studio-border-primary))}.studio-pagination__btn:active:not(:disabled){transform:scale(.95)}.studio-pagination__btn:disabled{opacity:.5;cursor:not-allowed}.studio-pagination__btn--nav{padding:.375rem}.studio-pagination__btn--page{min-width:2rem;padding:.375rem .5rem;font-size:.875rem}.studio-pagination__btn--active{background:var(--studio-color-primary);border-color:var(--studio-color-primary);color:#fff}.studio-pagination__btn--active:hover:not(:disabled){background:var(--studio-color-primary-hover, var(--studio-color-primary));border-color:var(--studio-color-primary-hover, var(--studio-color-primary))}.studio-pagination__pages{display:flex;align-items:center;gap:.25rem}.studio-pagination__ellipsis{padding:0 .5rem;color:var(--studio-text-secondary)}.studio-pagination__indicator{padding:0 .75rem;font-size:.875rem;color:var(--studio-text-secondary);white-space:nowrap}:host(.pagination--sm) .studio-pagination__label,:host(.pagination--sm) .studio-pagination__info,:host(.pagination--sm) .studio-pagination__indicator{font-size:.75rem}:host(.pagination--sm) .studio-pagination__select{padding:.25rem .5rem;font-size:.75rem}:host(.pagination--sm) .studio-pagination__btn--nav{padding:.25rem}:host(.pagination--sm) .studio-pagination__btn--page{min-width:1.75rem;padding:.25rem .375rem;font-size:.75rem}:host(.pagination--lg) .studio-pagination__label,:host(.pagination--lg) .studio-pagination__info,:host(.pagination--lg) .studio-pagination__indicator{font-size:1rem}:host(.pagination--lg) .studio-pagination__select{padding:.5rem 1rem;font-size:1rem}:host(.pagination--lg) .studio-pagination__btn--nav{padding:.5rem}:host(.pagination--lg) .studio-pagination__btn--page{min-width:2.5rem;padding:.5rem .75rem;font-size:1rem}:host(.pagination--minimal) .studio-pagination__btn{border:none;background:transparent}:host(.pagination--minimal) .studio-pagination__btn:hover:not(:disabled){background:var(--studio-bg-secondary)}:host(.pagination--minimal) .studio-pagination__btn--active{background:var(--studio-color-primary);color:#fff}:host(.pagination--compact) .studio-pagination__container{gap:.5rem}:host(.pagination--compact) .studio-pagination__nav,:host(.pagination--compact) .studio-pagination__pages{gap:.125rem}\n"] }]
-        }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], maxVisiblePages: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisiblePages", required: false }] }], showPageSizeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSizeSelector", required: false }] }], showPageNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageNumbers", required: false }] }], showInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInfo", required: false }] }], showFirstLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLast", required: false }] }], pageSizeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], firstLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstLabel", required: false }] }], lastLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastLabel", required: false }] }], infoTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "infoTemplate", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }] } });
+        }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], maxVisiblePages: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisiblePages", required: false }] }], showPageSizeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSizeSelector", required: false }] }], showPageNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageNumbers", required: false }] }], showInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInfo", required: false }] }], showFirstLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLast", required: false }] }], pageSizeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], firstLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstLabel", required: false }] }], lastLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastLabel", required: false }] }], infoTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "infoTemplate", required: false }] }] } });
 
 /**
  * Pagination component types
@@ -6219,13 +6206,13 @@ class TableComponent {
         });
     }
     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 });
+    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 $index) {\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"] }]
+                    }, 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 $index) {\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"] }] } });
 
 /**
@@ -6662,6 +6649,148 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                     }, template: "<div class=\"studio-textarea-container\">\n  <!-- Label (static or floating) -->\n  @if (label() && !floatingLabel()) {\n    <label\n      [for]=\"textareaId()\"\n      class=\"studio-textarea-label\"\n      [class.studio-textarea-label--required]=\"required()\"\n    >\n      {{ label() }}\n      @if (required()) {\n        <span class=\"studio-textarea-label__required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Textarea wrapper -->\n  <div class=\"studio-textarea-input-wrapper\">\n    <!-- Floating label -->\n    @if (floatingLabel() && label()) {\n      <label\n        [for]=\"textareaId()\"\n        class=\"studio-textarea-label studio-textarea-label--floating\"\n        [class.studio-textarea-label--floating-up]=\"showFloatingLabelUp()\"\n        [class.studio-textarea-label--required]=\"required()\"\n      >\n        {{ label() }}\n        @if (required()) {\n          <span class=\"studio-textarea-label__required\">*</span>\n        }\n      </label>\n    }\n\n    <!-- Textarea element -->\n    <textarea\n      #textarea\n      [id]=\"textareaId()\"\n      [class]=\"textareaClasses()\"\n      [value]=\"internalValue()\"\n      [placeholder]=\"computedPlaceholder()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [rows]=\"rows()\"\n      [attr.maxlength]=\"maxLength()\"\n      [attr.minlength]=\"minLength()\"\n      [required]=\"required()\"\n      [name]=\"name()\"\n      [autocomplete]=\"autocomplete()\"\n      [spellcheck]=\"spellcheck()\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-required]=\"required()\"\n      [attr.aria-invalid]=\"error()\"\n      [attr.aria-describedby]=\"showHint() || showError() ? textareaId() + '-description' : undefined\"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"\n      (keypress)=\"handleKeyPress($event)\"\n    ></textarea>\n\n    <!-- Clear button -->\n    @if (clearable() && internalValue().length > 0 && !disabled() && !readonly()) {\n      <button\n        type=\"button\"\n        class=\"studio-textarea-clear\"\n        [attr.aria-label]=\"'Clear textarea'\"\n        (click)=\"handleClear()\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n        </svg>\n      </button>\n    }\n\n    <!-- Loading indicator -->\n    @if (loading()) {\n      <div class=\"studio-textarea-loading\">\n        <svg\n          class=\"studio-textarea-spinner\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n        >\n          <circle\n            class=\"opacity-25\"\n            cx=\"12\"\n            cy=\"12\"\n            r=\"10\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n          ></circle>\n          <path\n            class=\"opacity-75\"\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n          ></path>\n        </svg>\n      </div>\n    }\n\n    <!-- Character counter -->\n    @if (showCharCount()) {\n      <div\n        class=\"studio-textarea-char-count\"\n        [class.studio-textarea-char-count--exceeded]=\"isCharLimitExceeded()\"\n        [attr.data-position]=\"charCountPosition()\"\n      >\n        {{ charCountText() }}\n      </div>\n    }\n  </div>\n\n  <!-- Helper text / Error message -->\n  @if (showError()) {\n    <div\n      class=\"studio-textarea-message studio-textarea-message--error\"\n      [id]=\"textareaId() + '-description'\"\n      role=\"alert\"\n    >\n      {{ errorMessage() }}\n    </div>\n  } @else if (showHint()) {\n    <div\n      class=\"studio-textarea-message studio-textarea-message--hint\"\n      [id]=\"textareaId() + '-description'\"\n    >\n      {{ hint() }}\n    </div>\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;gap:.375rem;font-family:var(--studio-font-family)}:host(.studio-textarea-wrapper--full-width){width:100%}.studio-textarea-label{display:block;font-size:.875rem;font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary);margin-bottom:.25rem}.studio-textarea-label__required{color:var(--studio-error);margin-left:.125rem}.studio-textarea-label--floating{position:absolute;top:.75rem;left:.75rem;pointer-events:none;background:transparent;padding:0 .25rem;z-index:1;transition:all .2s ease}.studio-textarea-label--floating-up{top:-.5rem;font-size:.75rem;background:var(--studio-background);color:var(--studio-primary)}.studio-textarea-input-wrapper{position:relative;display:flex;flex-direction:column;transition:all var(--studio-transition-fast)}.studio-textarea{width:100%;padding:.75rem;font-size:1rem;font-family:inherit;color:var(--studio-text-primary);background:transparent;border:none;outline:none;resize:vertical;transition:all var(--studio-transition-fast)}.studio-textarea::placeholder{color:var(--studio-text-tertiary)}.studio-textarea:disabled{cursor:not-allowed;opacity:.6}.studio-textarea:read-only{cursor:default}.studio-textarea-clear,.studio-textarea-loading{position:absolute;top:.5rem;right:.5rem;display:flex;align-items:center;justify-content:center}.studio-textarea-clear{padding:.25rem;background:none;border:none;color:var(--studio-text-secondary);cursor:pointer;border-radius:var(--studio-radius-sm);transition:all var(--studio-transition-fast)}.studio-textarea-clear:hover{background:var(--studio-background-hover);color:var(--studio-text-primary)}.studio-textarea-clear svg{width:1rem;height:1rem}.studio-textarea-spinner{width:1rem;height:1rem;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.studio-textarea-char-count{position:absolute;bottom:.5rem;font-size:.75rem;color:var(--studio-text-muted);pointer-events:none}.studio-textarea-char-count[data-position=bottom-right]{right:.75rem}.studio-textarea-char-count[data-position=bottom-left]{left:.75rem}.studio-textarea-char-count--exceeded{color:var(--studio-error);font-weight:500}.studio-textarea-message{font-size:.75rem;line-height:1.4}.studio-textarea-message--hint{color:var(--studio-text-secondary)}.studio-textarea-message--error{color:var(--studio-error)}:host(.studio-textarea-wrapper--outline) .studio-textarea-input-wrapper{border:1px solid var(--studio-border-primary);background:var(--studio-bg-primary);border-radius:var(--studio-radius-md)}:host(.studio-textarea-wrapper--outline) .studio-textarea-input-wrapper:hover:not(:has(.studio-textarea:disabled)){border-color:var(--studio-primary)}:host(.studio-textarea-wrapper--outline.studio-textarea-wrapper--focused) .studio-textarea-input-wrapper{border-color:var(--studio-primary);box-shadow:0 0 0 3px var(--studio-primary-bg)}:host(.studio-textarea-wrapper--outline.studio-textarea-wrapper--error) .studio-textarea-input-wrapper{border-color:var(--studio-error)}:host(.studio-textarea-wrapper--outline.studio-textarea-wrapper--error) .studio-textarea-input-wrapper:hover{border-color:var(--studio-error)}:host(.studio-textarea-wrapper--outline.studio-textarea-wrapper--disabled) .studio-textarea-input-wrapper{background:var(--studio-bg-secondary);border-color:var(--studio-border-secondary)}:host(.studio-textarea-wrapper--filled) .studio-textarea-input-wrapper{background:var(--studio-bg-secondary);border:none;border-bottom:2px solid var(--studio-border-primary);border-radius:var(--studio-radius-md) var(--studio-radius-md) 0 0}:host(.studio-textarea-wrapper--filled) .studio-textarea-input-wrapper:hover:not(:has(.studio-textarea:disabled)){background:var(--studio-bg-tertiary)}:host(.studio-textarea-wrapper--filled.studio-textarea-wrapper--focused) .studio-textarea-input-wrapper{border-bottom-color:var(--studio-primary);background:var(--studio-bg-tertiary)}:host(.studio-textarea-wrapper--filled.studio-textarea-wrapper--error) .studio-textarea-input-wrapper{border-bottom-color:var(--studio-error)}:host(.studio-textarea-wrapper--filled.studio-textarea-wrapper--disabled) .studio-textarea-input-wrapper{background:var(--studio-bg-secondary);opacity:.6}:host(.studio-textarea-wrapper--underline) .studio-textarea-input-wrapper{background:transparent;border:none;border-bottom:2px solid var(--studio-border-primary);border-radius:0}:host(.studio-textarea-wrapper--underline) .studio-textarea-input-wrapper .studio-textarea{padding-left:0;padding-right:0}:host(.studio-textarea-wrapper--underline) .studio-textarea-input-wrapper:hover:not(:has(.studio-textarea:disabled)){border-bottom-color:var(--studio-primary)}:host(.studio-textarea-wrapper--underline.studio-textarea-wrapper--focused) .studio-textarea-input-wrapper{border-bottom-color:var(--studio-primary)}:host(.studio-textarea-wrapper--underline.studio-textarea-wrapper--error) .studio-textarea-input-wrapper{border-bottom-color:var(--studio-error)}:host(.studio-textarea-wrapper--sm) .studio-textarea{padding:.5rem .75rem;font-size:.875rem}:host(.studio-textarea-wrapper--md) .studio-textarea{padding:.75rem;font-size:1rem}:host(.studio-textarea-wrapper--lg) .studio-textarea{padding:1rem;font-size:1.125rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], minRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCharCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCharCount", required: false }] }], charCountPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "charCountPosition", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], spellcheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "spellcheck", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], keyPressed: [{ type: i0.Output, args: ["keyPressed"] }], textareaEl: [{ type: i0.ViewChild, args: ['textarea', { isSignal: true }] }] } });
 
+class ToastService {
+    _messages = signal([], ...(ngDevMode ? [{ debugName: "_messages" }] : []));
+    messages = this._messages.asReadonly();
+    defaultLife = 5000;
+    counter = 0;
+    generateId() {
+        return `toast-${++this.counter}-${Date.now()}`;
+    }
+    show(severity, summary, detail, config) {
+        const message = {
+            id: this.generateId(),
+            severity,
+            summary,
+            detail,
+            life: config?.life ?? this.defaultLife,
+            sticky: false,
+            closable: config?.closable ?? true
+        };
+        this._messages.update(msgs => [...msgs, message]);
+        if (!message.sticky && message.life) {
+            setTimeout(() => {
+                this.remove(message.id);
+            }, message.life);
+        }
+    }
+    success(summary, detail, config) {
+        this.show('success', summary, detail, config);
+    }
+    info(summary, detail, config) {
+        this.show('info', summary, detail, config);
+    }
+    warning(summary, detail, config) {
+        this.show('warning', summary, detail, config);
+    }
+    error(summary, detail, config) {
+        this.show('error', summary, detail, config);
+    }
+    remove(id) {
+        this._messages.update(msgs => msgs.filter(m => m.id !== id));
+    }
+    clear() {
+        this._messages.set([]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ToastService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class ToastComponent {
+    toastService = inject(ToastService);
+    position = input('top-right', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    hostClasses = computed(() => classNames('studio-toast', 'toast--' + this.position()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    getIcon(severity) {
+        const icons = {
+            success: 'check-circle',
+            info: 'info',
+            warning: 'alert-triangle',
+            error: 'alert-circle'
+        };
+        return icons[severity];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: ToastComponent, isStandalone: true, selector: "studio-toast", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    <div class="studio-toast__container">
+      @for (message of toastService.messages(); track message.id) {
+        <div
+          class="studio-toast__item"
+          [class.studio-toast__item--success]="message.severity === 'success'"
+          [class.studio-toast__item--info]="message.severity === 'info'"
+          [class.studio-toast__item--warning]="message.severity === 'warning'"
+          [class.studio-toast__item--error]="message.severity === 'error'"
+          role="alert"
+        >
+          <div class="studio-toast__icon">
+            <studio-icon [name]="getIcon(message.severity)" [size]="20" />
+          </div>
+          <div class="studio-toast__content">
+            <div class="studio-toast__summary">{{ message.summary }}</div>
+            @if (message.detail) {
+              <div class="studio-toast__detail">{{ message.detail }}</div>
+            }
+          </div>
+          @if (message.closable) {
+            <button
+              type="button"
+              class="studio-toast__close"
+              (click)="toastService.remove(message.id)"
+              aria-label="Close"
+            >
+              <studio-icon name="x" [size]="16" />
+            </button>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{position:fixed;z-index:var(--studio-z-toast, 9999);pointer-events:none}:host(.toast--top-right){top:1rem;right:1rem}:host(.toast--top-left){top:1rem;left:1rem}:host(.toast--bottom-right){bottom:1rem;right:1rem}:host(.toast--bottom-left){bottom:1rem;left:1rem}:host(.toast--top-center){top:1rem;left:50%;transform:translate(-50%)}:host(.toast--bottom-center){bottom:1rem;left:50%;transform:translate(-50%)}.studio-toast__container{display:flex;flex-direction:column;gap:.75rem;min-width:320px;max-width:420px}.studio-toast__item{display:flex;align-items:flex-start;gap:.75rem;padding:1rem;border-radius:var(--studio-radius-lg, .75rem);background:var(--studio-bg-primary, #ffffff);box-shadow:var(--studio-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1));border:1px solid var(--studio-border-primary, #e5e7eb);pointer-events:auto;animation:slideIn .2s ease-out}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.studio-toast__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:var(--studio-radius-full, 9999px)}.studio-toast__item--success .studio-toast__icon{background:#dcfce7;color:#16a34a}.studio-toast__item--info .studio-toast__icon{background:#dbeafe;color:#2563eb}.studio-toast__item--warning .studio-toast__icon{background:#fef3c7;color:#d97706}.studio-toast__item--error .studio-toast__icon{background:#fee2e2;color:#dc2626}.studio-toast__content{flex:1;min-width:0}.studio-toast__summary{font-weight:var(--studio-font-weight-semibold, 600);font-size:.875rem;color:var(--studio-text-primary, #111827)}.studio-toast__detail{margin-top:.25rem;font-size:.875rem;color:var(--studio-text-secondary, #6b7280)}.studio-toast__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;background:none;border:none;border-radius:var(--studio-radius-sm, .25rem);color:var(--studio-text-tertiary, #9ca3af);cursor:pointer;transition:all var(--studio-transition-fast, .15s)}.studio-toast__close:hover{background:var(--studio-bg-secondary, #f3f4f6);color:var(--studio-text-secondary, #6b7280)}\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: ToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-toast', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()'
+                    }, template: `
+    <div class="studio-toast__container">
+      @for (message of toastService.messages(); track message.id) {
+        <div
+          class="studio-toast__item"
+          [class.studio-toast__item--success]="message.severity === 'success'"
+          [class.studio-toast__item--info]="message.severity === 'info'"
+          [class.studio-toast__item--warning]="message.severity === 'warning'"
+          [class.studio-toast__item--error]="message.severity === 'error'"
+          role="alert"
+        >
+          <div class="studio-toast__icon">
+            <studio-icon [name]="getIcon(message.severity)" [size]="20" />
+          </div>
+          <div class="studio-toast__content">
+            <div class="studio-toast__summary">{{ message.summary }}</div>
+            @if (message.detail) {
+              <div class="studio-toast__detail">{{ message.detail }}</div>
+            }
+          </div>
+          @if (message.closable) {
+            <button
+              type="button"
+              class="studio-toast__close"
+              (click)="toastService.remove(message.id)"
+              aria-label="Close"
+            >
+              <studio-icon name="x" [size]="16" />
+            </button>
+          }
+        </div>
+      }
+    </div>
+  `, styles: [":host{position:fixed;z-index:var(--studio-z-toast, 9999);pointer-events:none}:host(.toast--top-right){top:1rem;right:1rem}:host(.toast--top-left){top:1rem;left:1rem}:host(.toast--bottom-right){bottom:1rem;right:1rem}:host(.toast--bottom-left){bottom:1rem;left:1rem}:host(.toast--top-center){top:1rem;left:50%;transform:translate(-50%)}:host(.toast--bottom-center){bottom:1rem;left:50%;transform:translate(-50%)}.studio-toast__container{display:flex;flex-direction:column;gap:.75rem;min-width:320px;max-width:420px}.studio-toast__item{display:flex;align-items:flex-start;gap:.75rem;padding:1rem;border-radius:var(--studio-radius-lg, .75rem);background:var(--studio-bg-primary, #ffffff);box-shadow:var(--studio-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1));border:1px solid var(--studio-border-primary, #e5e7eb);pointer-events:auto;animation:slideIn .2s ease-out}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.studio-toast__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:var(--studio-radius-full, 9999px)}.studio-toast__item--success .studio-toast__icon{background:#dcfce7;color:#16a34a}.studio-toast__item--info .studio-toast__icon{background:#dbeafe;color:#2563eb}.studio-toast__item--warning .studio-toast__icon{background:#fef3c7;color:#d97706}.studio-toast__item--error .studio-toast__icon{background:#fee2e2;color:#dc2626}.studio-toast__content{flex:1;min-width:0}.studio-toast__summary{font-weight:var(--studio-font-weight-semibold, 600);font-size:.875rem;color:var(--studio-text-primary, #111827)}.studio-toast__detail{margin-top:.25rem;font-size:.875rem;color:var(--studio-text-secondary, #6b7280)}.studio-toast__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;background:none;border:none;border-radius:var(--studio-radius-sm, .25rem);color:var(--studio-text-tertiary, #9ca3af);cursor:pointer;transition:all var(--studio-transition-fast, .15s)}.studio-toast__close:hover{background:var(--studio-bg-secondary, #f3f4f6);color:var(--studio-text-secondary, #6b7280)}\n"] }]
+        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
+
 class TooltipComponent {
     content = input.required(...(ngDevMode ? [{ debugName: "content" }] : []));
     trigger = input('hover', ...(ngDevMode ? [{ debugName: "trigger" }] : []));
@@ -6729,6 +6858,168 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
   `, styles: [":host{display:inline-block}\n"] }]
         }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], openDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDelay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], arrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrow", required: false }] }], arrowSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowSize", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
+class ConfirmDialogService {
+    _config = signal(null, ...(ngDevMode ? [{ debugName: "_config" }] : []));
+    _visible = signal(false, ...(ngDevMode ? [{ debugName: "_visible" }] : []));
+    config = this._config.asReadonly();
+    visible = this._visible.asReadonly();
+    confirm(config) {
+        this._config.set({
+            confirmText: 'Подтвердить',
+            cancelText: 'Отмена',
+            variant: 'default',
+            ...config
+        });
+        this._visible.set(true);
+    }
+    accept() {
+        const config = this._config();
+        if (config?.onConfirm) {
+            config.onConfirm();
+        }
+        this.close();
+    }
+    reject() {
+        const config = this._config();
+        if (config?.onCancel) {
+            config.onCancel();
+        }
+        this.close();
+    }
+    close() {
+        this._visible.set(false);
+        this._config.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ConfirmDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ConfirmDialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ConfirmDialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class ConfirmDialogComponent {
+    confirmService = inject(ConfirmDialogService);
+    config = this.confirmService.config;
+    handleEscape() {
+        if (this.confirmService.visible()) {
+            this.confirmService.reject();
+        }
+    }
+    getIcon() {
+        const config = this.config();
+        if (config?.icon)
+            return config.icon;
+        switch (config?.variant) {
+            case 'danger':
+                return 'alert-triangle';
+            case 'warning':
+                return 'alert-circle';
+            default:
+                return 'help-circle';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: ConfirmDialogComponent, isStandalone: true, selector: "studio-confirm-dialog", host: { listeners: { "document:keydown.escape": "handleEscape()" } }, ngImport: i0, template: `
+    @if (confirmService.visible()) {
+      <!-- Overlay -->
+      <div
+        class="studio-confirm__overlay"
+        (click)="confirmService.reject()"
+      ></div>
+
+      <!-- Dialog -->
+      <div
+        class="studio-confirm__dialog"
+        [class.studio-confirm__dialog--danger]="config()?.variant === 'danger'"
+        [class.studio-confirm__dialog--warning]="config()?.variant === 'warning'"
+        role="alertdialog"
+        aria-modal="true"
+      >
+        <!-- Icon -->
+        <div class="studio-confirm__icon">
+          <studio-icon [name]="getIcon()" [size]="24" />
+        </div>
+
+        <!-- Content -->
+        <div class="studio-confirm__content">
+          <h3 class="studio-confirm__title">{{ config()?.title }}</h3>
+          <p class="studio-confirm__message">{{ config()?.message }}</p>
+        </div>
+
+        <!-- Actions -->
+        <div class="studio-confirm__actions">
+          <studio-button
+            variant="outline"
+            (clicked)="confirmService.reject()"
+          >
+            {{ config()?.cancelText }}
+          </studio-button>
+          <studio-button
+            [color]="config()?.variant === 'danger' ? 'error' : 'primary'"
+            (clicked)="confirmService.accept()"
+          >
+            {{ config()?.confirmText }}
+          </studio-button>
+        </div>
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:contents}.studio-confirm__overlay{position:fixed;inset:0;background:#00000080;z-index:var(--studio-z-modal-backdrop, 1040);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.studio-confirm__dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:var(--studio-z-modal, 1050);width:90%;max-width:400px;padding:1.5rem;background:var(--studio-bg-primary, #ffffff);border-radius:var(--studio-radius-xl, 1rem);box-shadow:var(--studio-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, .1));animation:scaleIn .2s ease}@keyframes scaleIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.studio-confirm__icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;margin:0 auto 1rem;border-radius:var(--studio-radius-full, 9999px);background:#dbeafe;color:#2563eb}.studio-confirm__dialog--danger .studio-confirm__icon{background:#fee2e2;color:#dc2626}.studio-confirm__dialog--warning .studio-confirm__icon{background:#fef3c7;color:#d97706}.studio-confirm__content{text-align:center;margin-bottom:1.5rem}.studio-confirm__title{margin:0 0 .5rem;font-size:1.125rem;font-weight:var(--studio-font-weight-semibold, 600);color:var(--studio-text-primary, #111827)}.studio-confirm__message{margin:0;font-size:.875rem;color:var(--studio-text-secondary, #6b7280);line-height:1.5}.studio-confirm__actions{display:flex;gap:.75rem;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: ConfirmDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-confirm-dialog', standalone: true, imports: [CommonModule, IconComponent, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (confirmService.visible()) {
+      <!-- Overlay -->
+      <div
+        class="studio-confirm__overlay"
+        (click)="confirmService.reject()"
+      ></div>
+
+      <!-- Dialog -->
+      <div
+        class="studio-confirm__dialog"
+        [class.studio-confirm__dialog--danger]="config()?.variant === 'danger'"
+        [class.studio-confirm__dialog--warning]="config()?.variant === 'warning'"
+        role="alertdialog"
+        aria-modal="true"
+      >
+        <!-- Icon -->
+        <div class="studio-confirm__icon">
+          <studio-icon [name]="getIcon()" [size]="24" />
+        </div>
+
+        <!-- Content -->
+        <div class="studio-confirm__content">
+          <h3 class="studio-confirm__title">{{ config()?.title }}</h3>
+          <p class="studio-confirm__message">{{ config()?.message }}</p>
+        </div>
+
+        <!-- Actions -->
+        <div class="studio-confirm__actions">
+          <studio-button
+            variant="outline"
+            (clicked)="confirmService.reject()"
+          >
+            {{ config()?.cancelText }}
+          </studio-button>
+          <studio-button
+            [color]="config()?.variant === 'danger' ? 'error' : 'primary'"
+            (clicked)="confirmService.accept()"
+          >
+            {{ config()?.confirmText }}
+          </studio-button>
+        </div>
+      </div>
+    }
+  `, styles: [":host{display:contents}.studio-confirm__overlay{position:fixed;inset:0;background:#00000080;z-index:var(--studio-z-modal-backdrop, 1040);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.studio-confirm__dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:var(--studio-z-modal, 1050);width:90%;max-width:400px;padding:1.5rem;background:var(--studio-bg-primary, #ffffff);border-radius:var(--studio-radius-xl, 1rem);box-shadow:var(--studio-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, .1));animation:scaleIn .2s ease}@keyframes scaleIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.studio-confirm__icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;margin:0 auto 1rem;border-radius:var(--studio-radius-full, 9999px);background:#dbeafe;color:#2563eb}.studio-confirm__dialog--danger .studio-confirm__icon{background:#fee2e2;color:#dc2626}.studio-confirm__dialog--warning .studio-confirm__icon{background:#fef3c7;color:#d97706}.studio-confirm__content{text-align:center;margin-bottom:1.5rem}.studio-confirm__title{margin:0 0 .5rem;font-size:1.125rem;font-weight:var(--studio-font-weight-semibold, 600);color:var(--studio-text-primary, #111827)}.studio-confirm__message{margin:0;font-size:.875rem;color:var(--studio-text-secondary, #6b7280);line-height:1.5}.studio-confirm__actions{display:flex;gap:.75rem;justify-content:center}\n"] }]
+        }], propDecorators: { handleEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
 /**
  * Primitives (Atoms)
  * Basic building blocks
@@ -7629,5 +7920,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, COUNTRY_OPTIONS, CardComponent, ChatComponent, ChatInputComponent, ChatMessageComponent, CheckboxComponent, ColorPickerCompactComponent, ColorPickerComponent, DEFAULT_COLOR_PRESETS, DrawerComponent, DrawerService, DropdownComponent, IconComponent, InputComponent, InspectorComponent, MASK_PRESETS, MaskDirective, MaskEngine, MenuComponent, ModalComponent, NavbarComponent, PaginationComponent, PhoneInputComponent, PopoverComponent, RadioButtonComponent, STUDIO_CONFIG, SelectComponent, SidebarComponent, StudioConfigService, SwitchComponent, TableColumnDirective, TableComponent, TabsComponent, TextareaComponent, ThemeSwitchComponent, TooltipComponent, classNames, isSafeUrl, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
+export { BadgeComponent, BadgeWrapperComponent, BottomNavigationComponent, ButtonComponent, ButtonGroupComponent, ButtonToggleGroupComponent, COUNTRY_OPTIONS, CardComponent, ChatComponent, ChatInputComponent, ChatMessageComponent, CheckboxComponent, ColorPickerCompactComponent, ColorPickerComponent, ConfirmDialogComponent, ConfirmDialogService, DEFAULT_COLOR_PRESETS, DrawerComponent, DrawerService, DropdownComponent, IconComponent, InputComponent, InspectorComponent, MASK_PRESETS, MaskDirective, MaskEngine, MenuComponent, ModalComponent, NavbarComponent, PaginationComponent, PhoneInputComponent, PopoverComponent, RadioButtonComponent, STUDIO_CONFIG, SelectComponent, SidebarComponent, StudioConfigService, SwitchComponent, TableColumnDirective, TableComponent, TabsComponent, TextareaComponent, ThemeSwitchComponent, ToastComponent, ToastService, TooltipComponent, classNames, isSafeUrl, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
 //# sourceMappingURL=eduboxpro-studio.mjs.map