codexly-ui 0.5.9 → 0.6.1

package/fesm2022/codexly-ui.mjs

@@ -3346,9 +3346,19 @@ class ClxNumberComponent {
     _handleInput(event) {
         const raw = event.target.value;
         const num = raw === '' ? 0 : parseFloat(raw);
-        if (!isNaN(num)) {
-            this._value.set(num);
-            this._onChange(num);
+        if (isNaN(num))
+            return;
+        let clamped = num;
+        if (this.min() !== null)
+            clamped = Math.max(clamped, this.min());
+        if (this.max() !== null)
+            clamped = Math.min(clamped, this.max());
+        this._value.set(clamped);
+        this._onChange(clamped);
+        // Reflect the clamp back into the native input immediately — otherwise the DOM would keep
+        // showing the raw out-of-range digits the user typed until blur re-renders the value.
+        if (clamped !== num) {
+            event.target.value = String(clamped);
         }
     }
     _handleBlur() {
@@ -11323,7 +11333,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 +12202,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 +12407,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 +12563,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 +12579,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 +12642,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 +12710,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 +12726,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 +12789,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()"