codexly-ui 0.5.8 → 0.6.0

package/fesm2022/codexly-ui.mjs

@@ -4424,7 +4424,7 @@ class ClxRadioComponent {
             return `${base} border-clx-border bg-clx-surface`;
         const t = resolveColor(this._color());
         if (this._variant() === 'solid')
-            return `${base} ${t.bg} ${t.border}`;
+            return `${base} bg-clx-surface ${t.border}`;
         return `${base} ${t.bgSubtle} ${t.borderLight}`;
     }, ...(ngDevMode ? [{ debugName: "_ringClass" }] : /* istanbul ignore next */ []));
     _dotClass = computed(() => {
@@ -4435,7 +4435,7 @@ class ClxRadioComponent {
             return `${base} scale-100 bg-clx-surface`;
         const t = resolveColor(this._color());
         if (this._variant() === 'solid')
-            return `${base} scale-100 ${t.text}`;
+            return `${base} scale-100 ${t.bg}`;
         return `${base} scale-100 ${t.textSubtle}`;
     }, ...(ngDevMode ? [{ debugName: "_dotClass" }] : /* istanbul ignore next */ []));
     _labelClass = computed(() => {
@@ -11323,7 +11323,10 @@ class ClxPaginationComponent {
         return items;
     }, ...(ngDevMode ? [{ debugName: "_pageItems" }] : /* istanbul ignore next */ []));
     // ── Clases ─────────────────────────────────────────────────────────────────
-    _wrapClass = computed(() => `flex flex-wrap items-center justify-between ${this._cfg().gap}`, ...(ngDevMode ? [{ debugName: "_wrapClass" }] : /* istanbul ignore next */ []));
+    _wrapClass = computed(() => {
+        const { color } = parseColorInput(this._color());
+        return `flex flex-wrap items-center justify-between ${this._cfg().gap} bg-clx-surface rounded-lg border border-${color}-200 px-4 py-3`;
+    }, ...(ngDevMode ? [{ debugName: "_wrapClass" }] : /* istanbul ignore next */ []));
     _infoClass = computed(() => `${this._cfg().text} text-clx-text-muted whitespace-nowrap`, ...(ngDevMode ? [{ debugName: "_infoClass" }] : /* istanbul ignore next */ []));
     _ellipsisClass = computed(() => {
         const sizes = {
@@ -12189,7 +12192,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 const TABLE_BASE_CLASS = 'w-full text-left border-collapse text-sm';
 const TABLE_HEADER_CELL_CLASS = 'px-4 py-3 font-semibold whitespace-nowrap';
 const TABLE_CELL_CLASS = 'px-4 py-3 border-b border-clx-border-soft text-clx-text-label';
-const TABLE_ROW_CLASS = '';
+const TABLE_ROW_CLASS = 'bg-clx-surface';
 // ── Alignment ────────────────────────────────────────────────────────────────
 const TABLE_ALIGN_MAP = {
     left: 'text-left',
@@ -12394,11 +12397,11 @@ class ClxTableComponent {
         this.pageChange.emit({ pageIndex: idx, pageSize: this.pageSize() });
     }
     // ── Computed ───────────────────────────────────────────────────────────────
-    _tableClass = computed(() => {
+    _tableWrapperClass = computed(() => {
         const { color } = parseColorInput(this._color());
-        const stripe = `[&_tbody_tr:nth-child(even)]:bg-${color}-50/50`;
-        return `${TABLE_BASE_CLASS} ${stripe}`;
-    }, ...(ngDevMode ? [{ debugName: "_tableClass" }] : /* istanbul ignore next */ []));
+        return `overflow-x-auto overflow-y-hidden rounded-lg border border-${color}-200`;
+    }, ...(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}`;
@@ -12550,15 +12553,12 @@ class ClxTableComponent {
       </div>
     } @else {
       <!-- ── Tabla ───────────────────────────────────────────────────────── -->
-      <div class="overflow-x-auto">
+      <div [class]="_tableWrapperClass()">
         <table [class]="_tableClass()">
           <thead>
             <tr [class]="_headerClass()">
               @if (selectable()) {
-                <th [class]="_headerCellClass()"
-                    [class.rounded-tl-lg]="true"
-                    [class.rounded-bl-lg]="true"
-                    class="w-10 text-center">
+                <th [class]="_headerCellClass()" class="w-10 text-center">
                   @if (!singleSelect()) {
                     <clx-checkbox
                       [color]="_color()"
@@ -12569,13 +12569,9 @@ class ClxTableComponent {
                 </th>
               }
 
-              @for (col of columns(); track col.key; let first = $first; let last = $last) {
+              @for (col of columns(); track col.key) {
                 <th
                   [class]="_getHeaderCellClass(col)"
-                  [class.rounded-tl-lg]="first && !selectable()"
-                  [class.rounded-bl-lg]="first && !selectable()"
-                  [class.rounded-tr-lg]="last"
-                  [class.rounded-br-lg]="last"
                   [style.width]="col.width"
                   (click)="col.sortable && _handleSort(col.key)">
                   <div class="flex items-center gap-1.5"
@@ -12636,7 +12632,7 @@ class ClxTableComponent {
 
       <!-- ── Footer: clx-pagination ────────────────────────────────────────── -->
       @if (pagination()) {
-        <div class="border-t border-clx-border-soft pt-3">
+        <div class="mt-3">
           <clx-pagination
             size="sm"
             [totalItems]="_totalItems()"
@@ -12704,15 +12700,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       </div>
     } @else {
       <!-- ── Tabla ───────────────────────────────────────────────────────── -->
-      <div class="overflow-x-auto">
+      <div [class]="_tableWrapperClass()">
         <table [class]="_tableClass()">
           <thead>
             <tr [class]="_headerClass()">
               @if (selectable()) {
-                <th [class]="_headerCellClass()"
-                    [class.rounded-tl-lg]="true"
-                    [class.rounded-bl-lg]="true"
-                    class="w-10 text-center">
+                <th [class]="_headerCellClass()" class="w-10 text-center">
                   @if (!singleSelect()) {
                     <clx-checkbox
                       [color]="_color()"
@@ -12723,13 +12716,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 </th>
               }
 
-              @for (col of columns(); track col.key; let first = $first; let last = $last) {
+              @for (col of columns(); track col.key) {
                 <th
                   [class]="_getHeaderCellClass(col)"
-                  [class.rounded-tl-lg]="first && !selectable()"
-                  [class.rounded-bl-lg]="first && !selectable()"
-                  [class.rounded-tr-lg]="last"
-                  [class.rounded-br-lg]="last"
                   [style.width]="col.width"
                   (click)="col.sortable && _handleSort(col.key)">
                   <div class="flex items-center gap-1.5"
@@ -12790,7 +12779,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 
       <!-- ── Footer: clx-pagination ────────────────────────────────────────── -->
       @if (pagination()) {
-        <div class="border-t border-clx-border-soft pt-3">
+        <div class="mt-3">
           <clx-pagination
             size="sm"
             [totalItems]="_totalItems()"