codexly-ui 0.10.102 → 0.10.104

package/fesm2022/codexly-ui.mjs

@@ -603,6 +603,18 @@ class ClxThemeService {
     timelineTitleStyle = computed(() => ({
         weight: this._config().timelineTitle?.weight ?? 600,
     }), ...(ngDevMode ? [{ debugName: "timelineTitleStyle" }] : /* istanbul ignore next */ []));
+    /** Resolved style for ClxTableComponent — falls back to primaryColor's subtle tint header /
+     *  no shadow / bordered. Per-instance `[headerColor]`/`[shadow]`/`[bordered]` inputs on
+     *  clx-table itself still take precedence over this theme-wide default. */
+    tableStyle = computed(() => {
+        const t = this._config().table;
+        return {
+            headerColor: t?.headerColor ?? this._config().primaryColor,
+            headerTextColor: t?.headerTextColor ?? t?.headerColor ?? this._config().primaryColor,
+            shadow: t?.shadow ?? 'none',
+            bordered: t?.bordered ?? true,
+        };
+    }, ...(ngDevMode ? [{ debugName: "tableStyle" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             if (!this._isBrowser)
@@ -10085,7 +10097,7 @@ class ClxAppLayoutComponent {
       aria-label="Navegación principal">
 
       <!-- Brand slot -->
-      <div class="border-b border-slate-700/50 shrink-0 overflow-hidden">
+      <div class="border-b border-clx-border shrink-0 overflow-hidden">
         <ng-content select="clx-brand"></ng-content>
       </div>
 
@@ -10147,7 +10159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       aria-label="Navegación principal">
 
       <!-- Brand slot -->
-      <div class="border-b border-slate-700/50 shrink-0 overflow-hidden">
+      <div class="border-b border-clx-border shrink-0 overflow-hidden">
         <ng-content select="clx-brand"></ng-content>
       </div>
 
@@ -13644,6 +13656,21 @@ class ClxTableComponent {
     emptyIcon = input('table_chart', ...(ngDevMode ? [{ debugName: "emptyIcon" }] : /* istanbul ignore next */ []));
     emptyTitle = input('', ...(ngDevMode ? [{ debugName: "emptyTitle" }] : /* istanbul ignore next */ []));
     emptyDescription = input('', ...(ngDevMode ? [{ debugName: "emptyDescription" }] : /* istanbul ignore next */ []));
+    /** Per-instance overrides — each falls back to ClxThemeService.tableStyle (the app-wide table
+     *  theme configured in Editar tema → Tablas) when unset. */
+    headerColor = input(undefined, ...(ngDevMode ? [{ debugName: "headerColor" }] : /* istanbul ignore next */ []));
+    headerTextColor = input(undefined, ...(ngDevMode ? [{ debugName: "headerTextColor" }] : /* istanbul ignore next */ []));
+    shadow = input(undefined, ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
+    bordered = input(undefined, ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
+    _tableStyle = computed(() => {
+        const theme = this._themeSvc.tableStyle();
+        return {
+            headerColor: this.headerColor() ?? theme.headerColor,
+            headerTextColor: this.headerTextColor() ?? theme.headerTextColor,
+            shadow: this.shadow() ?? theme.shadow,
+            bordered: this.bordered() ?? theme.bordered,
+        };
+    }, ...(ngDevMode ? [{ debugName: "_tableStyle" }] : /* istanbul ignore next */ []));
     // ── Models ─────────────────────────────────────────────────────────────────
     sortKey = model(null, ...(ngDevMode ? [{ debugName: "sortKey" }] : /* istanbul ignore next */ []));
     sortDir = model(null, ...(ngDevMode ? [{ debugName: "sortDir" }] : /* istanbul ignore next */ []));
@@ -13664,14 +13691,22 @@ class ClxTableComponent {
         this.pageChange.emit({ pageIndex: idx, pageSize: this.pageSize() });
     }
     // ── Computed ───────────────────────────────────────────────────────────────
+    static _SHADOW_CLASS = {
+        none: '', sm: 'shadow-sm', md: 'shadow-md', lg: 'shadow-lg', xl: 'shadow-xl',
+    };
     _tableWrapperClass = computed(() => {
-        const { color } = parseColorInput(this._color());
-        return `overflow-x-auto overflow-y-hidden rounded-lg border border-${color}-200`;
+        const s = this._tableStyle();
+        const { color } = parseColorInput(s.headerColor);
+        const border = s.bordered ? `border border-${color}-200` : '';
+        const shadow = ClxTableComponent._SHADOW_CLASS[s.shadow];
+        return `overflow-x-auto overflow-y-hidden rounded-lg ${border} ${shadow}`.trim();
     }, ...(ngDevMode ? [{ debugName: "_tableWrapperClass" }] : /* istanbul ignore next */ []));
     _tableClass = computed(() => TABLE_BASE_CLASS, ...(ngDevMode ? [{ debugName: "_tableClass" }] : /* istanbul ignore next */ []));
     _headerClass = computed(() => {
-        const t = resolveColor(this._color());
-        return `${t.bgSubtle} ${t.textSubtle}`;
+        const s = this._tableStyle();
+        const bg = resolveColor(s.headerColor).bgSubtle;
+        const text = resolveColor(s.headerTextColor).textSubtle;
+        return `${bg} ${text}`;
     }, ...(ngDevMode ? [{ debugName: "_headerClass" }] : /* istanbul ignore next */ []));
     _headerCellClass = computed(() => TABLE_HEADER_CELL_CLASS, ...(ngDevMode ? [{ debugName: "_headerCellClass" }] : /* istanbul ignore next */ []));
     _cellClass = computed(() => TABLE_CELL_CLASS, ...(ngDevMode ? [{ debugName: "_cellClass" }] : /* istanbul ignore next */ []));
@@ -13788,7 +13823,7 @@ class ClxTableComponent {
         this.selectionChange.emit({ selected: this.selectedItems(), allSelected: false });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxTableComponent, isStandalone: true, selector: "clx-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, singleSelect: { classPropertyName: "singleSelect", publicName: "singleSelect", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, serverSide: { classPropertyName: "serverSide", publicName: "serverSide", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyDescription: { classPropertyName: "emptyDescription", publicName: "emptyDescription", isSignal: true, isRequired: false, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null }, sortDir: { classPropertyName: "sortDir", publicName: "sortDir", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, _currentPage: { classPropertyName: "_currentPage", publicName: "_currentPage", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortKey: "sortKeyChange", sortDir: "sortDirChange", pageIndex: "pageIndexChange", pageSize: "pageSizeChange", _currentPage: "_currentPageChange", searchQuery: "searchQueryChange", selectedItems: "selectedItemsChange", sortChange: "sortChange", pageChange: "pageChange", selectionChange: "selectionChange" }, host: { classAttribute: "block" }, queries: [{ propertyName: "_columnDefs", predicate: ClxColumnDefDirective, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxTableComponent, isStandalone: true, selector: "clx-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, singleSelect: { classPropertyName: "singleSelect", publicName: "singleSelect", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, serverSide: { classPropertyName: "serverSide", publicName: "serverSide", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyDescription: { classPropertyName: "emptyDescription", publicName: "emptyDescription", isSignal: true, isRequired: false, transformFunction: null }, headerColor: { classPropertyName: "headerColor", publicName: "headerColor", isSignal: true, isRequired: false, transformFunction: null }, headerTextColor: { classPropertyName: "headerTextColor", publicName: "headerTextColor", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null }, sortDir: { classPropertyName: "sortDir", publicName: "sortDir", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, _currentPage: { classPropertyName: "_currentPage", publicName: "_currentPage", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortKey: "sortKeyChange", sortDir: "sortDirChange", pageIndex: "pageIndexChange", pageSize: "pageSizeChange", _currentPage: "_currentPageChange", searchQuery: "searchQueryChange", selectedItems: "selectedItemsChange", sortChange: "sortChange", pageChange: "pageChange", selectionChange: "selectionChange" }, host: { classAttribute: "block" }, queries: [{ propertyName: "_columnDefs", predicate: ClxColumnDefDirective, isSignal: true }], ngImport: i0, template: `
     <!-- ── Toolbar: búsqueda ──────────────────────────────────────────────── -->
     @if (searchable() && !serverSide() && !loading() && _filteredData().length > 0) {
       <div class="mb-3 max-w-80 min-w-40">
@@ -14070,7 +14105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block' },
                 }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], singleSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleSelect", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], serverSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverSide", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], emptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyIcon", required: false }] }], emptyTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTitle", required: false }] }], emptyDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDescription", required: false }] }], sortKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortKey", required: false }] }, { type: i0.Output, args: ["sortKeyChange"] }], sortDir: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDir", required: false }] }, { type: i0.Output, args: ["sortDirChange"] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }, { type: i0.Output, args: ["pageIndexChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], _currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "_currentPage", required: false }] }, { type: i0.Output, args: ["_currentPageChange"] }], searchQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchQuery", required: false }] }, { type: i0.Output, args: ["searchQueryChange"] }], selectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItems", required: false }] }, { type: i0.Output, args: ["selectedItemsChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], _columnDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ClxColumnDefDirective), { isSignal: true }] }] } });
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], singleSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleSelect", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], serverSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverSide", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], emptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyIcon", required: false }] }], emptyTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTitle", required: false }] }], emptyDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDescription", required: false }] }], headerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerColor", required: false }] }], headerTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTextColor", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], sortKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortKey", required: false }] }, { type: i0.Output, args: ["sortKeyChange"] }], sortDir: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDir", required: false }] }, { type: i0.Output, args: ["sortDirChange"] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }, { type: i0.Output, args: ["pageIndexChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], _currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "_currentPage", required: false }] }, { type: i0.Output, args: ["_currentPageChange"] }], searchQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchQuery", required: false }] }, { type: i0.Output, args: ["searchQueryChange"] }], selectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItems", required: false }] }, { type: i0.Output, args: ["selectedItemsChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], _columnDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ClxColumnDefDirective), { isSignal: true }] }] } });
 
 class ClxPageNotFoundComponent {
     title = input('Página no encontrada', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));