codexly-ui 0.0.90 → 0.0.92

package/fesm2022/codexly-ui.mjs

@@ -12313,7 +12313,7 @@ class ClxTableComponent {
     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 }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", 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: `
     <!-- ── Toolbar: búsqueda ──────────────────────────────────────────────── -->
-    @if (searchable() && !loading()) {
+    @if (searchable() && !loading() && _filteredData().length > 0) {
       <div class="mb-3 max-w-80 min-w-40">
         <clx-input
           placeholder="Buscar..."
@@ -12327,14 +12327,14 @@ class ClxTableComponent {
 
     @if (loading()) {
       <!-- ── Loading State ───────────────────────────────────────────────── -->
-      <div class="flex flex-col gap-3 min-h-[calc(100vh-220px)]">
-        @for (row of [1, 2, 3, 4, 5, 6, 7, 8]; track row) {
+      <div class="space-y-3">
+        @for (row of [1, 2, 3, 4, 5]; track row) {
           <div class="flex items-center gap-4">
             @if (selectable()) {
               <clx-skeleton variant="circular" size="xs"></clx-skeleton>
             }
             @for (col of columns(); track col.key) {
-              <clx-skeleton variant="text" size="md" [style.width]="col.width || '120px'"></clx-skeleton>
+              <clx-skeleton variant="text" size="md" [style.flex]="'1'"></clx-skeleton>
             }
           </div>
         }
@@ -12465,7 +12465,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     ],
                     template: `
     <!-- ── Toolbar: búsqueda ──────────────────────────────────────────────── -->
-    @if (searchable() && !loading()) {
+    @if (searchable() && !loading() && _filteredData().length > 0) {
       <div class="mb-3 max-w-80 min-w-40">
         <clx-input
           placeholder="Buscar..."
@@ -12479,14 +12479,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 
     @if (loading()) {
       <!-- ── Loading State ───────────────────────────────────────────────── -->
-      <div class="flex flex-col gap-3 min-h-[calc(100vh-220px)]">
-        @for (row of [1, 2, 3, 4, 5, 6, 7, 8]; track row) {
+      <div class="space-y-3">
+        @for (row of [1, 2, 3, 4, 5]; track row) {
           <div class="flex items-center gap-4">
             @if (selectable()) {
               <clx-skeleton variant="circular" size="xs"></clx-skeleton>
             }
             @for (col of columns(); track col.key) {
-              <clx-skeleton variant="text" size="md" [style.width]="col.width || '120px'"></clx-skeleton>
+              <clx-skeleton variant="text" size="md" [style.flex]="'1'"></clx-skeleton>
             }
           </div>
         }