@eduboxpro/studio 0.1.30 → 0.1.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5922,6 +5922,7 @@ class TableComponent {
|
|
|
5922
5922
|
}, ...(ngDevMode ? [{ debugName: "emptyState" }] : []));
|
|
5923
5923
|
// Row actions
|
|
5924
5924
|
rowActions = input([], ...(ngDevMode ? [{ debugName: "rowActions" }] : []));
|
|
5925
|
+
compactActions = input(false, ...(ngDevMode ? [{ debugName: "compactActions" }] : []));
|
|
5925
5926
|
// Responsive
|
|
5926
5927
|
responsive = input(true, ...(ngDevMode ? [{ debugName: "responsive" }] : []));
|
|
5927
5928
|
mobileBreakpoint = input(768, ...(ngDevMode ? [{ debugName: "mobileBreakpoint" }] : []));
|
|
@@ -5964,7 +5965,7 @@ class TableComponent {
|
|
|
5964
5965
|
const selected = this.selectedRows();
|
|
5965
5966
|
return data.some(row => selected.has(this.getRowKey(row))) && !this.allSelected();
|
|
5966
5967
|
}, ...(ngDevMode ? [{ debugName: "someSelected" }] : []));
|
|
5967
|
-
hostClasses = computed(() => classNames('studio-table', `studio-table--${this.variant()}`, `studio-table--${this.density()}`, this.hoverable() && 'studio-table--hoverable', this.stickyHeader() && 'studio-table--sticky-header', this.loading() && 'studio-table--loading', this.responsive() && 'studio-table--responsive'), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
|
|
5968
|
+
hostClasses = computed(() => classNames('studio-table', `studio-table--${this.variant()}`, `studio-table--${this.density()}`, this.hoverable() && 'studio-table--hoverable', this.stickyHeader() && 'studio-table--sticky-header', this.loading() && 'studio-table--loading', this.responsive() && 'studio-table--responsive', this.compactActions() && 'studio-table--compact-actions'), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
|
|
5968
5969
|
constructor() {
|
|
5969
5970
|
// Sync model signals
|
|
5970
5971
|
effect(() => {
|
|
@@ -6206,14 +6207,14 @@ class TableComponent {
|
|
|
6206
6207
|
});
|
|
6207
6208
|
}
|
|
6208
6209
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6209
|
-
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 });
|
|
6210
|
+
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 }, compactActions: { classPropertyName: "compactActions", publicName: "compactActions", 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 [iconPosition]=\"compactActions() ? 'only' : 'left'\"\n [disabled]=\"isActionDisabled(action, row)\"\n [color]=\"action.variant === 'danger' ? 'error' : 'primary'\"\n [attr.title]=\"compactActions() ? action.label : null\"\n (clicked)=\"executeRowAction(action, row, $event)\">\n @if (!compactActions()) {\n {{ action.label }}\n }\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)}:host(.studio-table--compact-actions) .studio-table__actions{gap:.125rem}:host(.studio-table--compact-actions) .studio-table__th--actions{width:auto;min-width:auto}@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:flex;justify-content:flex-end;padding:.75rem 1rem;background:var(--studio-bg-secondary)}:host(.studio-table--responsive) .studio-table__td--actions:before{display:none}:host(.studio-table--responsive) .studio-table__td--actions .studio-table__actions{justify-content:flex-end;gap:.5rem}: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 });
|
|
6210
6211
|
}
|
|
6211
6212
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: TableComponent, decorators: [{
|
|
6212
6213
|
type: Component,
|
|
6213
6214
|
args: [{ selector: 'studio-table', standalone: true, imports: [CommonModule, IconComponent, CheckboxComponent, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
6214
6215
|
'[class]': 'hostClasses()',
|
|
6215
|
-
}, 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"] }]
|
|
6216
|
-
}], 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"] }] } });
|
|
6216
|
+
}, 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 [iconPosition]=\"compactActions() ? 'only' : 'left'\"\n [disabled]=\"isActionDisabled(action, row)\"\n [color]=\"action.variant === 'danger' ? 'error' : 'primary'\"\n [attr.title]=\"compactActions() ? action.label : null\"\n (clicked)=\"executeRowAction(action, row, $event)\">\n @if (!compactActions()) {\n {{ action.label }}\n }\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)}:host(.studio-table--compact-actions) .studio-table__actions{gap:.125rem}:host(.studio-table--compact-actions) .studio-table__th--actions{width:auto;min-width:auto}@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:flex;justify-content:flex-end;padding:.75rem 1rem;background:var(--studio-bg-secondary)}:host(.studio-table--responsive) .studio-table__td--actions:before{display:none}:host(.studio-table--responsive) .studio-table__td--actions .studio-table__actions{justify-content:flex-end;gap:.5rem}:host(.studio-table--responsive) .studio-table__td--hide-mobile{display:none!important}:host(.studio-table--responsive) .studio-table__expansion-content{padding:.75rem 1rem}}\n"] }]
|
|
6217
|
+
}], 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 }] }], compactActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactActions", 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"] }] } });
|
|
6217
6218
|
|
|
6218
6219
|
/**
|
|
6219
6220
|
* Table component types and interfaces
|