codexly-ui 0.14.3 → 0.15.0

package/fesm2022/codexly-ui.mjs

@@ -10,6 +10,8 @@ import * as i1 from '@angular/cdk/overlay';
 import { ScrollStrategyOptions, OverlayModule } from '@angular/cdk/overlay';
 import { ScrollingModule, CdkScrollable } from '@angular/cdk/scrolling';
 import { Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
+import * as i1$2 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 
 // ── Parse 'red' | 'red-500' → { color, shade } ───────────────────────────────
 function parseColorInput(input) {
@@ -2147,6 +2149,9 @@ class ClxProgressBarComponent {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     showValue = input(false, ...(ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []));
     valueFormat = input('percent', ...(ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []));
+    /** Only read when variant()==='segmented' — ignores value()/max() entirely, each segment's
+     *  width is its own value as a fraction of the segments' combined total. */
+    segments = input([], ...(ngDevMode ? [{ debugName: "segments" }] : /* istanbul ignore next */ []));
     _pct = computed(() => {
         const m = this.max();
         if (!m)
@@ -2177,8 +2182,17 @@ class ClxProgressBarComponent {
             cls += ' clx-pb-striped';
         return cls;
     }, ...(ngDevMode ? [{ debugName: "_fillCls" }] : /* istanbul ignore next */ []));
+    _segmentPcts = computed(() => {
+        const segs = this.segments();
+        const total = segs.reduce((sum, s) => sum + s.value, 0) || 1;
+        return segs.map(s => ({
+            pct: (s.value / total) * 100,
+            cls: resolveColor(s.color).bg,
+            label: s.label,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "_segmentPcts" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxProgressBarComponent, isStandalone: true, selector: "clx-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex flex-col gap-1.5 w-full" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxProgressBarComponent, isStandalone: true, selector: "clx-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex flex-col gap-1.5 w-full" }, ngImport: i0, template: `
     @if (label() || showValue()) {
       <div class="flex items-center justify-between gap-2">
         @if (label()) {
@@ -2192,23 +2206,42 @@ class ClxProgressBarComponent {
       </div>
     }
 
-    <!-- Track -->
-    <div
-      class="w-full overflow-hidden rounded-full bg-clx-surface-2"
-      [class]="_trackH()"
-      role="progressbar"
-      [attr.aria-valuenow]="variant() === 'indeterminate' ? null : value()"
-      [attr.aria-valuemin]="0"
-      [attr.aria-valuemax]="max()"
-      [attr.aria-label]="label() || null">
-
-      <!-- Fill -->
+    @if (variant() === 'segmented') {
+      <!-- Track: one flex child per segment, own color each, widths normalized to the segments'
+           own value sum — independent of value()/max(), which this variant ignores. -->
       <div
-        class="h-full rounded-full transition-[width,background-color] duration-500 ease-out"
-        [class]="_fillCls()"
-        [style.width]="variant() === 'indeterminate' ? '40%' : _pct() + '%'">
+        class="w-full flex overflow-hidden rounded-full bg-clx-surface-2 gap-0.5"
+        [class]="_trackH()"
+        role="img"
+        [attr.aria-label]="label() || null">
+        @for (seg of _segmentPcts(); track $index) {
+          <div
+            class="h-full first:rounded-l-full last:rounded-r-full"
+            [class]="seg.cls"
+            [style.width.%]="seg.pct"
+            [attr.title]="seg.label">
+          </div>
+        }
       </div>
-    </div>
+    } @else {
+      <!-- Track -->
+      <div
+        class="w-full overflow-hidden rounded-full bg-clx-surface-2"
+        [class]="_trackH()"
+        role="progressbar"
+        [attr.aria-valuenow]="variant() === 'indeterminate' ? null : value()"
+        [attr.aria-valuemin]="0"
+        [attr.aria-valuemax]="max()"
+        [attr.aria-label]="label() || null">
+
+        <!-- Fill -->
+        <div
+          class="h-full rounded-full transition-[width,background-color] duration-500 ease-out"
+          [class]="_fillCls()"
+          [style.width]="variant() === 'indeterminate' ? '40%' : _pct() + '%'">
+        </div>
+      </div>
+    }
   `, isInline: true, styles: ["@keyframes clx-pb-indeterminate{0%{transform:translate(-100%) scaleX(.4)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.4)}}.clx-pb-indeterminate{animation:clx-pb-indeterminate 1.4s ease-in-out infinite}@keyframes clx-pb-stripe{0%{background-position:1rem 0}to{background-position:0 0}}.clx-pb-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.18) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.18) 75%,transparent 75%,transparent);background-size:1rem 1rem;animation:clx-pb-stripe 1s linear infinite}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxProgressBarComponent, decorators: [{
@@ -2227,25 +2260,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       </div>
     }
 
-    <!-- Track -->
-    <div
-      class="w-full overflow-hidden rounded-full bg-clx-surface-2"
-      [class]="_trackH()"
-      role="progressbar"
-      [attr.aria-valuenow]="variant() === 'indeterminate' ? null : value()"
-      [attr.aria-valuemin]="0"
-      [attr.aria-valuemax]="max()"
-      [attr.aria-label]="label() || null">
-
-      <!-- Fill -->
+    @if (variant() === 'segmented') {
+      <!-- Track: one flex child per segment, own color each, widths normalized to the segments'
+           own value sum — independent of value()/max(), which this variant ignores. -->
       <div
-        class="h-full rounded-full transition-[width,background-color] duration-500 ease-out"
-        [class]="_fillCls()"
-        [style.width]="variant() === 'indeterminate' ? '40%' : _pct() + '%'">
+        class="w-full flex overflow-hidden rounded-full bg-clx-surface-2 gap-0.5"
+        [class]="_trackH()"
+        role="img"
+        [attr.aria-label]="label() || null">
+        @for (seg of _segmentPcts(); track $index) {
+          <div
+            class="h-full first:rounded-l-full last:rounded-r-full"
+            [class]="seg.cls"
+            [style.width.%]="seg.pct"
+            [attr.title]="seg.label">
+          </div>
+        }
       </div>
-    </div>
+    } @else {
+      <!-- Track -->
+      <div
+        class="w-full overflow-hidden rounded-full bg-clx-surface-2"
+        [class]="_trackH()"
+        role="progressbar"
+        [attr.aria-valuenow]="variant() === 'indeterminate' ? null : value()"
+        [attr.aria-valuemin]="0"
+        [attr.aria-valuemax]="max()"
+        [attr.aria-label]="label() || null">
+
+        <!-- Fill -->
+        <div
+          class="h-full rounded-full transition-[width,background-color] duration-500 ease-out"
+          [class]="_fillCls()"
+          [style.width]="variant() === 'indeterminate' ? '40%' : _pct() + '%'">
+        </div>
+      </div>
+    }
   `, styles: ["@keyframes clx-pb-indeterminate{0%{transform:translate(-100%) scaleX(.4)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.4)}}.clx-pb-indeterminate{animation:clx-pb-indeterminate 1.4s ease-in-out infinite}@keyframes clx-pb-stripe{0%{background-position:1rem 0}to{background-position:0 0}}.clx-pb-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.18) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.18) 75%,transparent 75%,transparent);background-size:1rem 1rem;animation:clx-pb-stripe 1s linear infinite}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: false }] }] } });
 
 class ClxRatingComponent {
     _themeSvc = inject(ClxThemeService);
@@ -4505,6 +4557,12 @@ class ClxNumberComponent {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     // ── Internal state ───────────────────────────────────────────────────────
     _value = signal(0, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+    /** What the native input actually shows while the user is typing — kept separate from _value so
+     *  a trailing "." or "," (valid mid-edit, not yet a complete number) isn't stomped by re-rendering
+     *  the parsed numeric value on every keystroke; see _handleInput's own comment. Resynced from
+     *  _value only on programmatic changes (writeValue, the value() input, +/-, blur), never while the
+     *  user is actively typing a valid partial number. */
+    _displayText = signal('0', ...(ngDevMode ? [{ debugName: "_displayText" }] : /* istanbul ignore next */ []));
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
     _cardDisabled = inject(CLX_CARD_DISABLED_CONTEXT, { optional: true });
     _cvaConnected = false;
@@ -4512,7 +4570,7 @@ class ClxNumberComponent {
     _valueEffect = effect(() => {
         const v = this.value();
         if (!this._cvaConnected)
-            untracked(() => this._value.set(v));
+            untracked(() => { this._value.set(v); this._displayText.set(String(v)); });
     }, ...(ngDevMode ? [{ debugName: "_valueEffect" }] : /* istanbul ignore next */ []));
     _onChange = () => { };
     _onTouched = () => { };
@@ -4557,6 +4615,7 @@ class ClxNumberComponent {
     writeValue(val) {
         this._cvaConnected = true;
         this._value.set(val ?? 0);
+        this._displayText.set(String(val ?? 0));
     }
     registerOnChange(fn) {
         this._onChange = fn;
@@ -4568,9 +4627,44 @@ class ClxNumberComponent {
         this._cvaDisabled.set(disabled);
     }
     // ── Handlers ─────────────────────────────────────────────────────────────
+    /** Allows only digits, a single decimal separator (. or ,) and a leading minus — anything else
+     *  typed (letters, a second dot, a stray minus mid-string) is dropped. This is the type="text"
+     *  replacement for the browser's own type="number" filtering, needed because the native one keys
+     *  off the BROWSER's locale for which decimal separator it accepts and silently rejects the other,
+     *  blocking that key outright for users whose input doesn't match. */
+    _sanitizeTyped(raw) {
+        let out = '';
+        let seenDot = false;
+        for (let i = 0; i < raw.length; i++) {
+            const ch = raw[i];
+            if (ch === '-' && i === 0) {
+                out += ch;
+                continue;
+            }
+            if ((ch === '.' || ch === ',') && !seenDot) {
+                seenDot = true;
+                out += '.';
+                continue;
+            }
+            if (ch >= '0' && ch <= '9') {
+                out += ch;
+            }
+        }
+        return out;
+    }
     _handleInput(event) {
-        const raw = event.target.value;
-        const num = raw === '' ? 0 : parseFloat(raw);
+        const input = event.target;
+        const sanitized = this._sanitizeTyped(input.value);
+        if (sanitized !== input.value)
+            input.value = sanitized;
+        this._displayText.set(sanitized);
+        // A bare "-", "." or a trailing "." (e.g. "2.") is a valid mid-edit state but not yet a
+        // complete number — don't push it through onChange/clamping until it parses, and don't touch
+        // _value (which would re-render _displayText via nothing, since nothing reads _value for the
+        // input anymore, but would desync the two if left stale).
+        if (sanitized === '' || sanitized === '-' || sanitized.endsWith('.'))
+            return;
+        const num = parseFloat(sanitized);
         if (isNaN(num))
             return;
         let clamped = num;
@@ -4580,20 +4674,23 @@ class ClxNumberComponent {
             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.
+        // Reflect the clamp back into both the native input and _displayText immediately — otherwise
+        // the DOM would keep showing the raw out-of-range digits the user typed until blur.
         if (clamped !== num) {
-            event.target.value = String(clamped);
+            input.value = String(clamped);
+            this._displayText.set(String(clamped));
         }
     }
     _handleBlur() {
-        // Clamp to min/max on blur
+        // Clamp to min/max on blur, and resolve any incomplete typed state (trailing ".", bare "-")
+        // back to the last valid numeric value.
         let v = this._value();
         if (this.min() !== null)
             v = Math.max(v, this.min());
         if (this.max() !== null)
             v = Math.min(v, this.max());
         this._value.set(v);
+        this._displayText.set(String(v));
         this._onChange(v);
         this._onTouched();
     }
@@ -4621,6 +4718,7 @@ class ClxNumberComponent {
     }
     _applyValue(v) {
         this._value.set(v);
+        this._displayText.set(String(v));
         this._onChange(v);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -4650,16 +4748,17 @@ class ClxNumberComponent {
           </div>
         }
 
-        <!-- Native number input -->
+        <!-- type="text" + inputmode="decimal" instead of type="number": a native number input
+             rejects a comma decimal separator outright (event.target.value silently becomes '' while
+             the typed text is invalid), which stomps whatever the user typed on every keystroke and
+             resets the caret to 0 — see _handleInput's own comment for the parse side of this fix. -->
         <input
-          type="number"
+          type="text"
+          inputmode="decimal"
           [id]="_inputId"
           [name]="_inputId"
           [class]="_inputClass()"
-          [value]="_value()"
-          [min]="min() ?? ''"
-          [max]="max() ?? ''"
-          [step]="step()"
+          [value]="_displayText()"
           [disabled]="_disabled()"
           [placeholder]="placeholder()"
           (input)="_handleInput($event)"
@@ -4767,16 +4866,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           </div>
         }
 
-        <!-- Native number input -->
+        <!-- type="text" + inputmode="decimal" instead of type="number": a native number input
+             rejects a comma decimal separator outright (event.target.value silently becomes '' while
+             the typed text is invalid), which stomps whatever the user typed on every keystroke and
+             resets the caret to 0 — see _handleInput's own comment for the parse side of this fix. -->
         <input
-          type="number"
+          type="text"
+          inputmode="decimal"
           [id]="_inputId"
           [name]="_inputId"
           [class]="_inputClass()"
-          [value]="_value()"
-          [min]="min() ?? ''"
-          [max]="max() ?? ''"
-          [step]="step()"
+          [value]="_displayText()"
           [disabled]="_disabled()"
           [placeholder]="placeholder()"
           (input)="_handleInput($event)"
@@ -10501,6 +10601,9 @@ class ClxWizardComponent {
     prevLabel = input('Anterior', ...(ngDevMode ? [{ debugName: "prevLabel" }] : /* istanbul ignore next */ []));
     nextLabel = input('Siguiente', ...(ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []));
     finishLabel = input('Finalizar', ...(ngDevMode ? [{ debugName: "finishLabel" }] : /* istanbul ignore next */ []));
+    /** Shows a spinner on the finish button and disables it — for an async (finish) handler that
+     *  takes a moment (an HTTP call), so the consumer doesn't need its own separate loading label. */
+    finishLoading = input(false, ...(ngDevMode ? [{ debugName: "finishLoading" }] : /* istanbul ignore next */ []));
     // ── Outputs ────────────────────────────────────────────────────────────────
     stepChange = output();
     finish = output();
@@ -10609,7 +10712,7 @@ class ClxWizardComponent {
         return `${base} border-2 border-clx-border text-clx-text-subtle bg-clx-surface ${ptr}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxWizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxWizardComponent, isStandalone: true, selector: "clx-wizard", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, activeTextColor: { classPropertyName: "activeTextColor", publicName: "activeTextColor", isSignal: true, isRequired: false, transformFunction: null }, underlineColor: { classPropertyName: "underlineColor", publicName: "underlineColor", isSignal: true, isRequired: false, transformFunction: null }, stepColor: { classPropertyName: "stepColor", publicName: "stepColor", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, prevLabel: { classPropertyName: "prevLabel", publicName: "prevLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, finishLabel: { classPropertyName: "finishLabel", publicName: "finishLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepChange: "stepChange", finish: "finish" }, queries: [{ propertyName: "_stepQuery", predicate: ClxStepComponent }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxWizardComponent, isStandalone: true, selector: "clx-wizard", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, activeTextColor: { classPropertyName: "activeTextColor", publicName: "activeTextColor", isSignal: true, isRequired: false, transformFunction: null }, underlineColor: { classPropertyName: "underlineColor", publicName: "underlineColor", isSignal: true, isRequired: false, transformFunction: null }, stepColor: { classPropertyName: "stepColor", publicName: "stepColor", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, prevLabel: { classPropertyName: "prevLabel", publicName: "prevLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, finishLabel: { classPropertyName: "finishLabel", publicName: "finishLabel", isSignal: true, isRequired: false, transformFunction: null }, finishLoading: { classPropertyName: "finishLoading", publicName: "finishLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepChange: "stepChange", finish: "finish" }, queries: [{ propertyName: "_stepQuery", predicate: ClxStepComponent }], ngImport: i0, template: `
     <div [class]="_rootClass()">
 
       <!-- ══ HORIZONTAL: clx-tabs indicator ═══════════════════════════════ -->
@@ -10707,7 +10810,8 @@ class ClxWizardComponent {
               size="sm"
               icon="check_circle"
               iconPosition="right"
-              [disabled]="!_currentStepValid()"
+              [disabled]="!_currentStepValid() || finishLoading()"
+              [loading]="finishLoading()"
               (click)="_onFinish()"
             >{{ finishLabel() }}</button>
           }
@@ -10816,7 +10920,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
               size="sm"
               icon="check_circle"
               iconPosition="right"
-              [disabled]="!_currentStepValid()"
+              [disabled]="!_currentStepValid() || finishLoading()"
+              [loading]="finishLoading()"
               (click)="_onFinish()"
             >{{ finishLabel() }}</button>
           }
@@ -10824,7 +10929,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       </div>
     </div>
   `, styles: ["@keyframes clx-wizard-fade-slide{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}.clx-wizard-step-enter{animation:clx-wizard-fade-slide .22s cubic-bezier(.4,0,.2,1) both}@keyframes clx-wizard-fill{0%{width:0%}to{width:100%}}.clx-wizard-connector-fill{animation:clx-wizard-fill .3s ease both}clx-step[data-active=false]{display:none}\n"] }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], activeTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTextColor", required: false }] }], underlineColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "underlineColor", required: false }] }], stepColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepColor", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], prevLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], finishLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "finishLabel", required: false }] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }], finish: [{ type: i0.Output, args: ["finish"] }], _stepQuery: [{
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], activeTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTextColor", required: false }] }], underlineColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "underlineColor", required: false }] }], stepColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepColor", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], prevLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], finishLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "finishLabel", required: false }] }], finishLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "finishLoading", required: false }] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }], finish: [{ type: i0.Output, args: ["finish"] }], _stepQuery: [{
                 type: ContentChildren,
                 args: [ClxStepComponent]
             }] } });
@@ -15844,13 +15949,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], retryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "retryLabel", required: false }] }], backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], errorId: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorId", required: false }] }], retry: [{ type: i0.Output, args: ["retry"] }], back: [{ type: i0.Output, args: ["back"] }] } });
 
 class ClxStatCardComponent {
+    _themeSvc = inject(ClxThemeService);
     metric = input.required(...(ngDevMode ? [{ debugName: "metric" }] : /* istanbul ignore next */ []));
     chartData = input([30, 45, 28, 60, 40, 70, 55, 80, 50, 90], ...(ngDevMode ? [{ debugName: "chartData" }] : /* istanbul ignore next */ []));
     color = input('indigo', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     layout = input('horizontal', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
     _hostClass = computed(() => {
         const border = resolveColor(this.color()).borderLight;
-        const base = `bg-white rounded-xl shadow-md border ${border} p-5 w-full overflow-hidden min-w-[260px]`;
+        const radius = resolveContainerRadius(this._themeSvc.config().borderRadius);
+        const base = `bg-clx-surface ${radius} shadow-md border ${border} p-5 w-full overflow-hidden min-w-[260px]`;
         return `flex items-center gap-4 ${base}`;
     }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
     _barHeights = computed(() => {
@@ -15878,7 +15985,7 @@ class ClxStatCardComponent {
     }, ...(ngDevMode ? [{ debugName: "_trendArrowIcon" }] : /* istanbul ignore next */ []));
     _trendTextClass = computed(() => {
         const d = this.metric().trendDirection;
-        return d === 'up' ? 'text-green-500' : d === 'down' ? 'text-red-500' : 'text-slate-400';
+        return d === 'up' ? 'text-green-500' : d === 'down' ? 'text-red-500' : 'text-clx-text-subtle';
     }, ...(ngDevMode ? [{ debugName: "_trendTextClass" }] : /* istanbul ignore next */ []));
     _trendIcon = computed(() => {
         const d = this.metric().trendDirection;
@@ -15941,8 +16048,8 @@ class ClxStatCardComponent {
 
       <!-- Text block -->
       <div class="flex flex-col gap-1 min-w-0 flex-1">
-        <span class="text-sm text-slate-500 truncate">{{ metric().title }}</span>
-        <span class="text-2xl font-semibold text-slate-900 leading-tight">
+        <span class="text-sm text-clx-text-muted truncate">{{ metric().title }}</span>
+        <span class="text-2xl font-semibold text-clx-text leading-tight">
           {{ _formattedValue() }}
         </span>
         <span clx-badge
@@ -15978,8 +16085,8 @@ class ClxStatCardComponent {
         <div class="w-11 h-11 rounded-full flex items-center justify-center mb-2" [class]="_iconBgSubtle()">
           <span clx-icon [name]="metric().icon" size="md" [class]="_iconTextBase()"></span>
         </div>
-        <span class="text-sm text-slate-500 truncate">{{ metric().title }}</span>
-        <span class="text-2xl font-semibold text-slate-900 leading-tight">{{ _formattedValue() }}</span>
+        <span class="text-sm text-clx-text-muted truncate">{{ metric().title }}</span>
+        <span class="text-2xl font-semibold text-clx-text leading-tight">{{ _formattedValue() }}</span>
       </div>
 
       <!-- Col derecha: barras + tendencia -->
@@ -15994,7 +16101,7 @@ class ClxStatCardComponent {
           }
         </div>
         <!-- Tendencia -->
-        <div class="flex items-center gap-1 text-xs text-slate-400 whitespace-nowrap">
+        <div class="flex items-center gap-1 text-xs text-clx-text-subtle whitespace-nowrap">
           {{ metric().trendDirection === 'up' ? 'Increased By' : 'Decreased By' }}
           <span class="font-semibold" [class]="_trendTextClass()">{{ metric().trend }}</span>
           <span clx-icon [name]="_trendArrowIcon()" size="sm" [class]="_trendTextClass()"></span>
@@ -16013,8 +16120,8 @@ class ClxStatCardComponent {
           <span clx-icon [name]="_trendIcon()" size="xxs"></span>
           {{ metric().trend }}
         </span>
-        <span class="text-2xl font-semibold text-slate-900 leading-tight">{{ _formattedValue() }}</span>
-        <span class="text-xs font-semibold tracking-widest text-slate-400 uppercase">{{ metric().title }}</span>
+        <span class="text-2xl font-semibold text-clx-text leading-tight">{{ _formattedValue() }}</span>
+        <span class="text-xs font-semibold tracking-widest text-clx-text-subtle uppercase">{{ metric().title }}</span>
       </div>
 
       <!-- Col derecha: solo icono -->
@@ -16044,8 +16151,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 
       <!-- Text block -->
       <div class="flex flex-col gap-1 min-w-0 flex-1">
-        <span class="text-sm text-slate-500 truncate">{{ metric().title }}</span>
-        <span class="text-2xl font-semibold text-slate-900 leading-tight">
+        <span class="text-sm text-clx-text-muted truncate">{{ metric().title }}</span>
+        <span class="text-2xl font-semibold text-clx-text leading-tight">
           {{ _formattedValue() }}
         </span>
         <span clx-badge
@@ -16081,8 +16188,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         <div class="w-11 h-11 rounded-full flex items-center justify-center mb-2" [class]="_iconBgSubtle()">
           <span clx-icon [name]="metric().icon" size="md" [class]="_iconTextBase()"></span>
         </div>
-        <span class="text-sm text-slate-500 truncate">{{ metric().title }}</span>
-        <span class="text-2xl font-semibold text-slate-900 leading-tight">{{ _formattedValue() }}</span>
+        <span class="text-sm text-clx-text-muted truncate">{{ metric().title }}</span>
+        <span class="text-2xl font-semibold text-clx-text leading-tight">{{ _formattedValue() }}</span>
       </div>
 
       <!-- Col derecha: barras + tendencia -->
@@ -16097,7 +16204,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           }
         </div>
         <!-- Tendencia -->
-        <div class="flex items-center gap-1 text-xs text-slate-400 whitespace-nowrap">
+        <div class="flex items-center gap-1 text-xs text-clx-text-subtle whitespace-nowrap">
           {{ metric().trendDirection === 'up' ? 'Increased By' : 'Decreased By' }}
           <span class="font-semibold" [class]="_trendTextClass()">{{ metric().trend }}</span>
           <span clx-icon [name]="_trendArrowIcon()" size="sm" [class]="_trendTextClass()"></span>
@@ -16116,8 +16223,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           <span clx-icon [name]="_trendIcon()" size="xxs"></span>
           {{ metric().trend }}
         </span>
-        <span class="text-2xl font-semibold text-slate-900 leading-tight">{{ _formattedValue() }}</span>
-        <span class="text-xs font-semibold tracking-widest text-slate-400 uppercase">{{ metric().title }}</span>
+        <span class="text-2xl font-semibold text-clx-text leading-tight">{{ _formattedValue() }}</span>
+        <span class="text-xs font-semibold tracking-widest text-clx-text-subtle uppercase">{{ metric().title }}</span>
       </div>
 
       <!-- Col derecha: solo icono -->
@@ -16129,6 +16236,469 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { metric: [{ type: i0.Input, args: [{ isSignal: true, alias: "metric", required: true }] }], chartData: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartData", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }] } });
 
+/** Standard chrome for any dashboard widget (stat card, chart, table, list...) — header with
+ *  title + an optional drag handle + an overlay menu for per-widget actions (configure, resize,
+ *  remove), plus shared loading/empty/error states so individual widgets never re-implement them.
+ *  Widget content itself is projected via the default <ng-content>; callers keep full control of
+ *  what renders inside once state() is 'ready'. */
+class ClxWidgetCardComponent {
+    _themeSvc = inject(ClxThemeService);
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    state = input('ready', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    draggable = input(false, ...(ngDevMode ? [{ debugName: "draggable" }] : /* istanbul ignore next */ []));
+    menuActions = input([], ...(ngDevMode ? [{ debugName: "menuActions" }] : /* istanbul ignore next */ []));
+    menuLabel = input('Opciones del widget', ...(ngDevMode ? [{ debugName: "menuLabel" }] : /* istanbul ignore next */ []));
+    emptyMessage = input('Sin datos en el rango seleccionado', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    errorMessage = input('No se pudo cargar este widget', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    retryLabel = input('Reintentar', ...(ngDevMode ? [{ debugName: "retryLabel" }] : /* istanbul ignore next */ []));
+    menuAction = output();
+    retry = output();
+    _sso = inject(ScrollStrategyOptions);
+    _scrollStrategy = this._sso.reposition();
+    _positions = [
+        { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+        { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
+    ];
+    _menuOpen = signal(false, ...(ngDevMode ? [{ debugName: "_menuOpen" }] : /* istanbul ignore next */ []));
+    _menuPanelClass = computed(() => {
+        const t = resolveColor(this._themeSvc.cardBorderColor());
+        return `w-48 p-1.5 bg-clx-surface rounded-xl shadow-xl border ${t.borderLight} overflow-hidden mt-1`;
+    }, ...(ngDevMode ? [{ debugName: "_menuPanelClass" }] : /* istanbul ignore next */ []));
+    _hostClass = computed(() => {
+        const t = resolveColor(this._themeSvc.cardBorderColor());
+        const radius = resolveContainerRadius(this._themeSvc.config().borderRadius);
+        return `flex flex-col bg-clx-surface ${radius} border ${t.borderLight} shadow-sm overflow-hidden h-full`;
+    }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
+    _toggleMenu() { this._menuOpen.update(v => !v); }
+    _closeMenu() { this._menuOpen.set(false); }
+    _onMenuKeydown(event) {
+        if (event.key === 'Escape')
+            this._closeMenu();
+    }
+    _onMenuAction(action) {
+        this.menuAction.emit(action);
+        this._closeMenu();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxWidgetCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxWidgetCardComponent, isStandalone: true, selector: "clx-widget-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, menuActions: { classPropertyName: "menuActions", publicName: "menuActions", isSignal: true, isRequired: false, transformFunction: null }, menuLabel: { classPropertyName: "menuLabel", publicName: "menuLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, retryLabel: { classPropertyName: "retryLabel", publicName: "retryLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuAction: "menuAction", retry: "retry" }, host: { properties: { "class": "_hostClass()" } }, ngImport: i0, template: `
+    <div class="flex items-center justify-between gap-2 px-4 py-3 border-b border-clx-border-soft shrink-0">
+      <div class="flex items-center gap-2 min-w-0">
+        @if (draggable()) {
+          <span clx-icon name="drag_indicator" size="sm" class="text-clx-text-subtle cursor-grab shrink-0"></span>
+        }
+        <p class="text-sm font-semibold text-clx-text-label truncate">{{ title() }}</p>
+      </div>
+
+      @if (menuActions().length) {
+        <button
+          #origin="cdkOverlayOrigin"
+          cdkOverlayOrigin
+          type="button"
+          class="shrink-0 w-7 h-7 rounded-lg flex items-center justify-center text-clx-text-subtle hover:bg-clx-surface-2 cursor-pointer"
+          [attr.aria-label]="menuLabel()"
+          (click)="_toggleMenu()">
+          <span clx-icon name="more_vert" size="sm"></span>
+        </button>
+
+        <ng-template
+          cdkConnectedOverlay
+          [cdkConnectedOverlayOrigin]="origin"
+          [cdkConnectedOverlayOpen]="_menuOpen()"
+          [cdkConnectedOverlayPositions]="_positions"
+          [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
+          [cdkConnectedOverlayPush]="true"
+          (overlayOutsideClick)="_closeMenu()"
+          (overlayKeydown)="_onMenuKeydown($event)">
+          <div [class]="_menuPanelClass()">
+            @for (item of menuActions(); track item.action) {
+              <button
+                type="button"
+                class="w-full text-left px-3 py-2 rounded-lg text-sm flex items-center gap-2 hover:bg-clx-surface-2 cursor-pointer"
+                [class]="item.danger ? 'text-red-600' : 'text-clx-text-label'"
+                (click)="_onMenuAction(item.action)">
+                <span clx-icon [name]="item.icon" size="sm" [class]="item.danger ? 'text-red-600' : 'text-clx-text-subtle'"></span>
+                {{ item.label }}
+              </button>
+            }
+          </div>
+        </ng-template>
+      }
+    </div>
+
+    <div class="flex-1 min-h-0 overflow-auto">
+      @switch (state()) {
+        @case ('loading') {
+          <div class="h-full flex flex-col gap-3 justify-center p-4">
+            <clx-skeleton variant="text" width="100%" height="12px" />
+            <clx-skeleton variant="text" width="85%" height="12px" />
+            <clx-skeleton variant="text" width="92%" height="12px" />
+          </div>
+        }
+        @case ('empty') {
+          <div class="h-full flex flex-col items-center justify-center gap-2 p-6 text-center">
+            <div class="w-11 h-11 rounded-xl bg-clx-surface-2 flex items-center justify-center">
+              <span clx-icon name="inbox" size="md" class="text-clx-text-subtle"></span>
+            </div>
+            <p class="text-xs text-clx-text-subtle">{{ emptyMessage() }}</p>
+          </div>
+        }
+        @case ('error') {
+          <div class="h-full flex flex-col items-center justify-center gap-3 p-6 text-center">
+            <div class="w-11 h-11 rounded-xl bg-red-50 flex items-center justify-center">
+              <span clx-icon name="error" size="md" class="text-red-600"></span>
+            </div>
+            <p class="text-xs text-clx-text-subtle">{{ errorMessage() }}</p>
+            <button
+              type="button"
+              class="text-xs font-semibold px-3 py-1.5 rounded-lg border border-clx-border text-clx-text-label hover:bg-clx-surface-2 cursor-pointer"
+              (click)="retry.emit()">
+              {{ retryLabel() }}
+            </button>
+          </div>
+        }
+        @default {
+          <ng-content />
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxWidgetCardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clx-widget-card',
+                    standalone: true,
+                    imports: [OverlayModule, ClxIconComponent, ClxSkeletonComponent],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { '[class]': '_hostClass()' },
+                    template: `
+    <div class="flex items-center justify-between gap-2 px-4 py-3 border-b border-clx-border-soft shrink-0">
+      <div class="flex items-center gap-2 min-w-0">
+        @if (draggable()) {
+          <span clx-icon name="drag_indicator" size="sm" class="text-clx-text-subtle cursor-grab shrink-0"></span>
+        }
+        <p class="text-sm font-semibold text-clx-text-label truncate">{{ title() }}</p>
+      </div>
+
+      @if (menuActions().length) {
+        <button
+          #origin="cdkOverlayOrigin"
+          cdkOverlayOrigin
+          type="button"
+          class="shrink-0 w-7 h-7 rounded-lg flex items-center justify-center text-clx-text-subtle hover:bg-clx-surface-2 cursor-pointer"
+          [attr.aria-label]="menuLabel()"
+          (click)="_toggleMenu()">
+          <span clx-icon name="more_vert" size="sm"></span>
+        </button>
+
+        <ng-template
+          cdkConnectedOverlay
+          [cdkConnectedOverlayOrigin]="origin"
+          [cdkConnectedOverlayOpen]="_menuOpen()"
+          [cdkConnectedOverlayPositions]="_positions"
+          [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
+          [cdkConnectedOverlayPush]="true"
+          (overlayOutsideClick)="_closeMenu()"
+          (overlayKeydown)="_onMenuKeydown($event)">
+          <div [class]="_menuPanelClass()">
+            @for (item of menuActions(); track item.action) {
+              <button
+                type="button"
+                class="w-full text-left px-3 py-2 rounded-lg text-sm flex items-center gap-2 hover:bg-clx-surface-2 cursor-pointer"
+                [class]="item.danger ? 'text-red-600' : 'text-clx-text-label'"
+                (click)="_onMenuAction(item.action)">
+                <span clx-icon [name]="item.icon" size="sm" [class]="item.danger ? 'text-red-600' : 'text-clx-text-subtle'"></span>
+                {{ item.label }}
+              </button>
+            }
+          </div>
+        </ng-template>
+      }
+    </div>
+
+    <div class="flex-1 min-h-0 overflow-auto">
+      @switch (state()) {
+        @case ('loading') {
+          <div class="h-full flex flex-col gap-3 justify-center p-4">
+            <clx-skeleton variant="text" width="100%" height="12px" />
+            <clx-skeleton variant="text" width="85%" height="12px" />
+            <clx-skeleton variant="text" width="92%" height="12px" />
+          </div>
+        }
+        @case ('empty') {
+          <div class="h-full flex flex-col items-center justify-center gap-2 p-6 text-center">
+            <div class="w-11 h-11 rounded-xl bg-clx-surface-2 flex items-center justify-center">
+              <span clx-icon name="inbox" size="md" class="text-clx-text-subtle"></span>
+            </div>
+            <p class="text-xs text-clx-text-subtle">{{ emptyMessage() }}</p>
+          </div>
+        }
+        @case ('error') {
+          <div class="h-full flex flex-col items-center justify-center gap-3 p-6 text-center">
+            <div class="w-11 h-11 rounded-xl bg-red-50 flex items-center justify-center">
+              <span clx-icon name="error" size="md" class="text-red-600"></span>
+            </div>
+            <p class="text-xs text-clx-text-subtle">{{ errorMessage() }}</p>
+            <button
+              type="button"
+              class="text-xs font-semibold px-3 py-1.5 rounded-lg border border-clx-border text-clx-text-label hover:bg-clx-surface-2 cursor-pointer"
+              (click)="retry.emit()">
+              {{ retryLabel() }}
+            </button>
+          </div>
+        }
+        @default {
+          <ng-content />
+        }
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], menuActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuActions", required: false }] }], menuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuLabel", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], retryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "retryLabel", required: false }] }], menuAction: [{ type: i0.Output, args: ["menuAction"] }], retry: [{ type: i0.Output, args: ["retry"] }] } });
+
+/** Drop-in cell for a `clxCell` table column: label + inline progress bar + trailing value —
+ *  e.g. "Canadá [████████░░] 6,192" rows in a "sales by country/branch" dashboard widget. Mount it
+ *  inside `<ng-template clxCell let-row>` instead of hand-building the flex row each time. */
+class ClxTableProgressCellComponent {
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Optional leading glyph (e.g. a flag emoji) shown before the label. */
+    leadingIcon = input(undefined, ...(ngDevMode ? [{ debugName: "leadingIcon" }] : /* istanbul ignore next */ []));
+    /** Overrides the trailing number's text (e.g. a formatted "6,192") — falls back to the raw value(). */
+    displayValue = input(undefined, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTableProgressCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxTableProgressCellComponent, isStandalone: true, selector: "clx-table-progress-cell", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex items-center gap-2.5 w-full" }, ngImport: i0, template: `
+    @if (leadingIcon()) {
+      <span class="text-base shrink-0">{{ leadingIcon() }}</span>
+    }
+    <span class="text-sm text-clx-text-label shrink-0 w-24 truncate">{{ label() }}</span>
+    <div class="flex-1 min-w-0">
+      <clx-progress-bar [value]="value()" [max]="max()" [color]="color()" size="xs" />
+    </div>
+    <span class="text-sm font-semibold text-clx-text tabular-nums shrink-0">{{ displayValue() ?? value() }}</span>
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxProgressBarComponent, selector: "clx-progress-bar", inputs: ["value", "max", "color", "size", "variant", "label", "showValue", "valueFormat", "segments"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTableProgressCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clx-table-progress-cell',
+                    standalone: true,
+                    imports: [ClxProgressBarComponent],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'flex items-center gap-2.5 w-full' },
+                    template: `
+    @if (leadingIcon()) {
+      <span class="text-base shrink-0">{{ leadingIcon() }}</span>
+    }
+    <span class="text-sm text-clx-text-label shrink-0 w-24 truncate">{{ label() }}</span>
+    <div class="flex-1 min-w-0">
+      <clx-progress-bar [value]="value()" [max]="max()" [color]="color()" size="xs" />
+    </div>
+    <span class="text-sm font-semibold text-clx-text tabular-nums shrink-0">{{ displayValue() ?? value() }}</span>
+  `,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], displayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayValue", required: false }] }] } });
+
+/** Drop-in cell for a `clxCell` table column: avatar (or initials) + label on the left, a status
+ *  pill on the right — e.g. a "recent orders" dashboard widget row like "Orden #4582 ⋯ Entregado".
+ *  Mount it inside `<ng-template clxCell let-row>` instead of hand-building the flex row each time. */
+class ClxTableStatusCellComponent {
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    avatarSrc = input(null, ...(ngDevMode ? [{ debugName: "avatarSrc" }] : /* istanbul ignore next */ []));
+    avatarInitials = input(null, ...(ngDevMode ? [{ debugName: "avatarInitials" }] : /* istanbul ignore next */ []));
+    avatarColor = input(undefined, ...(ngDevMode ? [{ debugName: "avatarColor" }] : /* istanbul ignore next */ []));
+    statusLabel = input.required(...(ngDevMode ? [{ debugName: "statusLabel" }] : /* istanbul ignore next */ []));
+    statusColor = input('slate', ...(ngDevMode ? [{ debugName: "statusColor" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTableStatusCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: ClxTableStatusCellComponent, isStandalone: true, selector: "clx-table-status-cell", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, avatarSrc: { classPropertyName: "avatarSrc", publicName: "avatarSrc", isSignal: true, isRequired: false, transformFunction: null }, avatarInitials: { classPropertyName: "avatarInitials", publicName: "avatarInitials", isSignal: true, isRequired: false, transformFunction: null }, avatarColor: { classPropertyName: "avatarColor", publicName: "avatarColor", isSignal: true, isRequired: false, transformFunction: null }, statusLabel: { classPropertyName: "statusLabel", publicName: "statusLabel", isSignal: true, isRequired: true, transformFunction: null }, statusColor: { classPropertyName: "statusColor", publicName: "statusColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex items-center justify-between gap-3 w-full" }, ngImport: i0, template: `
+    <div class="flex items-center gap-2.5 min-w-0">
+      <clx-avatar [src]="avatarSrc()" [initials]="avatarInitials()" [color]="avatarColor()" size="xs" />
+      <span class="text-sm text-clx-text-label truncate">{{ label() }}</span>
+    </div>
+    <span clx-badge [color]="statusColor()" variant="light" shape="pill" size="xs" class="shrink-0">
+      {{ statusLabel() }}
+    </span>
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxAvatarComponent, selector: "clx-avatar", inputs: ["src", "initials", "iconName", "color", "size", "shape", "alt"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTableStatusCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clx-table-status-cell',
+                    standalone: true,
+                    imports: [ClxAvatarComponent, ClxBadgeComponent],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'flex items-center justify-between gap-3 w-full' },
+                    template: `
+    <div class="flex items-center gap-2.5 min-w-0">
+      <clx-avatar [src]="avatarSrc()" [initials]="avatarInitials()" [color]="avatarColor()" size="xs" />
+      <span class="text-sm text-clx-text-label truncate">{{ label() }}</span>
+    </div>
+    <span clx-badge [color]="statusColor()" variant="light" shape="pill" size="xs" class="shrink-0">
+      {{ statusLabel() }}
+    </span>
+  `,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], avatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSrc", required: false }] }], avatarInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarInitials", required: false }] }], avatarColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarColor", required: false }] }], statusLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusLabel", required: true }] }], statusColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusColor", required: false }] }] } });
+
+/** Content template for one grid cell — `<ng-template clxGridItem let-item>...</ng-template>`,
+ *  mirroring the `clxCell`/`clxColumn` convention ClxTableComponent already uses for projected
+ *  per-row templates. Typically a <clx-widget-card> wrapping whatever the widget actually renders. */
+class ClxGridItemDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxGridItemDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: ClxGridItemDirective, isStandalone: true, selector: "ng-template[clxGridItem]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxGridItemDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[clxGridItem]', standalone: true }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+/** Content-agnostic configurable dashboard grid: positions/sizes projected widgets on a CSS grid
+ *  using column/row units, supports drag-to-reorder (via Angular CDK's CdkDropList/CdkDrag — no
+ *  new dependency, @angular/cdk is already pulled in by ClxProfileComponent/ClxWidgetCardComponent's
+ *  overlay usage) and resize-by-dragging a corner handle. Persistence is the caller's job: listen
+ *  to (layoutChange) and save the resulting ClxGridItem[] (e.g. to rp_dashboard_layouts.layout). */
+class ClxDashboardGridComponent {
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    columns = input(4, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    rowHeight = input(92, ...(ngDevMode ? [{ debugName: "rowHeight" }] : /* istanbul ignore next */ []));
+    gap = input(16, ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
+    editable = input(false, ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
+    layoutChange = output();
+    itemResize = output();
+    _itemTemplate = contentChild(ClxGridItemDirective, ...(ngDevMode ? [{ debugName: "_itemTemplate" }] : /* istanbul ignore next */ []));
+    _gridCols = computed(() => `repeat(${this.columns()}, minmax(0, 1fr))`, ...(ngDevMode ? [{ debugName: "_gridCols" }] : /* istanbul ignore next */ []));
+    _resizing = null;
+    _onDrop(event) {
+        const next = [...this.items()];
+        moveItemInArray(next, event.previousIndex, event.currentIndex);
+        this.layoutChange.emit(next);
+    }
+    _onDragMoved(_event) {
+        // Reordering is handled by cdkDropListDropped above; this hook exists for future free-form
+        // (x/y pixel) positioning if a consumer needs it — not required for a reorderable column grid.
+    }
+    _startResize(event, item) {
+        event.preventDefault();
+        event.stopPropagation();
+        this._resizing = { item, startX: event.clientX, startY: event.clientY, startW: item.w, startH: item.h };
+        const cellW = event.target.closest('[style*="grid-column"]')?.clientWidth
+            ?? (this.rowHeight() * 2);
+        const onMove = (e) => {
+            if (!this._resizing)
+                return;
+            const dx = e.clientX - this._resizing.startX;
+            const dy = e.clientY - this._resizing.startY;
+            const deltaCols = Math.round(dx / (cellW / this._resizing.startW || 1));
+            const deltaRows = Math.round(dy / this.rowHeight());
+            const nextW = Math.max(item.minW ?? 1, this._resizing.startW + deltaCols);
+            const nextH = Math.max(item.minH ?? 1, this._resizing.startH + deltaRows);
+            if (nextW !== item.w || nextH !== item.h) {
+                item.w = nextW;
+                item.h = nextH;
+                this.itemResize.emit({ id: item.id, w: nextW, h: nextH });
+            }
+        };
+        const onUp = () => {
+            this._resizing = null;
+            this.layoutChange.emit([...this.items()]);
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onUp);
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxDashboardGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxDashboardGridComponent, isStandalone: true, selector: "clx-dashboard-grid", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layoutChange: "layoutChange", itemResize: "itemResize" }, host: { classAttribute: "block w-full" }, queries: [{ propertyName: "_itemTemplate", first: true, predicate: ClxGridItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      cdkDropList
+      [cdkDropListDisabled]="!editable()"
+      (cdkDropListDropped)="_onDrop($event)"
+      class="grid w-full"
+      [style.grid-template-columns]="_gridCols()"
+      [style.grid-auto-rows.px]="rowHeight()"
+      [style.gap.px]="gap()">
+      @for (item of items(); track item.id) {
+        <div
+          cdkDrag
+          [cdkDragDisabled]="!editable()"
+          [cdkDragData]="item"
+          (cdkDragMoved)="_onDragMoved($event)"
+          class="relative min-w-0"
+          [class.cursor-grab]="editable()"
+          [style.grid-column]="'span ' + item.w"
+          [style.grid-row]="'span ' + item.h">
+
+          <ng-container
+            [ngTemplateOutlet]="_itemTemplate()?.templateRef ?? null"
+            [ngTemplateOutletContext]="{ $implicit: item }">
+          </ng-container>
+
+          @if (editable()) {
+            <div
+              class="absolute -right-1 -bottom-1 w-3.5 h-3.5 rounded bg-clx-primary border-2 border-clx-surface shadow cursor-nwse-resize"
+              (pointerdown)="_startResize($event, item)">
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxDashboardGridComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clx-dashboard-grid',
+                    standalone: true,
+                    imports: [NgTemplateOutlet, DragDropModule],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block w-full' },
+                    template: `
+    <div
+      cdkDropList
+      [cdkDropListDisabled]="!editable()"
+      (cdkDropListDropped)="_onDrop($event)"
+      class="grid w-full"
+      [style.grid-template-columns]="_gridCols()"
+      [style.grid-auto-rows.px]="rowHeight()"
+      [style.gap.px]="gap()">
+      @for (item of items(); track item.id) {
+        <div
+          cdkDrag
+          [cdkDragDisabled]="!editable()"
+          [cdkDragData]="item"
+          (cdkDragMoved)="_onDragMoved($event)"
+          class="relative min-w-0"
+          [class.cursor-grab]="editable()"
+          [style.grid-column]="'span ' + item.w"
+          [style.grid-row]="'span ' + item.h">
+
+          <ng-container
+            [ngTemplateOutlet]="_itemTemplate()?.templateRef ?? null"
+            [ngTemplateOutletContext]="{ $implicit: item }">
+          </ng-container>
+
+          @if (editable()) {
+            <div
+              class="absolute -right-1 -bottom-1 w-3.5 h-3.5 rounded bg-clx-primary border-2 border-clx-surface shadow cursor-nwse-resize"
+              (pointerdown)="_startResize($event, item)">
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], layoutChange: [{ type: i0.Output, args: ["layoutChange"] }], itemResize: [{ type: i0.Output, args: ["itemResize"] }], _itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxGridItemDirective), { isSignal: true }] }] } });
+
 const PRODUCT_TAG_LABEL = {
     'new': 'Nuevo',
     'sale': 'Oferta',
@@ -18732,5 +19302,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardExpiryInputComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCardNumberInputComponent, ClxCardValidators, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxCollapseComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorImageModalComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxMenuItemTrailingDirective, ClxModalComponent, ClxModalService, ClxNativeOverlayService, ClxNavGroupComponent, ClxNotificationComponent, ClxNumberComponent, ClxOtpComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProductQuickViewComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSearchComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSocialIconComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableActionsComponent, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, detectClxCardBrand, isClxCardExpired, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
+export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardExpiryInputComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCardNumberInputComponent, ClxCardValidators, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxCollapseComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDashboardGridComponent, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorImageModalComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxGridItemDirective, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxMenuItemTrailingDirective, ClxModalComponent, ClxModalService, ClxNativeOverlayService, ClxNavGroupComponent, ClxNotificationComponent, ClxNumberComponent, ClxOtpComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProductQuickViewComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSearchComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSocialIconComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableActionsComponent, ClxTableComponent, ClxTableProgressCellComponent, ClxTableStatusCellComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWidgetCardComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, detectClxCardBrand, isClxCardExpired, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
 //# sourceMappingURL=codexly-ui.mjs.map