codexly-ui 0.14.4 → 0.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codexly-ui",
-  "version": "0.14.4",
+  "version": "0.15.1",
   "description": "Standalone, signal-based Angular UI component library for Codexly, styled with Tailwind CSS.",
   "keywords": [
     "angular",

package/types/codexly-ui.d.ts

@@ -6,6 +6,7 @@ import { ControlValueAccessor, FormControl, FormGroup } from '@angular/forms';
 import * as _angular_cdk_overlay from '@angular/cdk/overlay';
 import { ConnectedPosition } from '@angular/cdk/overlay';
 import { Observable } from 'rxjs';
+import { CdkDragDrop, CdkDragMove } from '@angular/cdk/drag-drop';
 
 type ClxSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
@@ -119,9 +120,9 @@ declare class ClxSocialIconComponent {
     readonly platform: _angular_core.InputSignal<ClxSocialPlatform>;
     readonly variant: _angular_core.InputSignal<ClxButtonVariant>;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
-    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg" | "xxs" | "xs" | undefined>;
+    readonly size: _angular_core.InputSignal<"xxs" | "xs" | "sm" | "md" | "lg" | undefined>;
     protected readonly _color: _angular_core.Signal<ClxColorInput>;
-    protected readonly _size: _angular_core.Signal<"sm" | "md" | "lg" | "xxs" | "xs">;
+    protected readonly _size: _angular_core.Signal<"xxs" | "xs" | "sm" | "md" | "lg">;
     protected readonly _markup: _angular_core.Signal<SafeHtml>;
     protected readonly _hostClass: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxSocialIconComponent, never>;
@@ -144,11 +145,11 @@ declare class ClxButtonComponent {
      *  unusual background shade (bright yellow) where the variant's own resolved text color (white)
      *  reads poorly and a themed text tone is needed instead. */
     readonly textColor: _angular_core.InputSignal<ClxColorInput | undefined>;
-    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg" | "xxs" | "xs" | undefined>;
+    readonly size: _angular_core.InputSignal<"xxs" | "xs" | "sm" | "md" | "lg" | undefined>;
     readonly shape: _angular_core.InputSignal<ClxShape | undefined>;
     private readonly _tableActionsColor;
     protected readonly _color: _angular_core.Signal<ClxColorInput>;
-    protected readonly _size: _angular_core.Signal<"sm" | "md" | "lg" | "xxs" | "xs">;
+    protected readonly _size: _angular_core.Signal<"xxs" | "xs" | "sm" | "md" | "lg">;
     protected readonly _shape: _angular_core.Signal<ClxShape>;
     readonly loading: _angular_core.InputSignal<boolean>;
     readonly disabled: _angular_core.InputSignal<boolean>;
@@ -204,11 +205,11 @@ declare class ClxBadgeComponent {
     private readonly _themeSvc;
     readonly variant: _angular_core.InputSignal<ClxBadgeVariant>;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
-    readonly size: _angular_core.InputSignal<"sm" | "md" | "xs" | undefined>;
+    readonly size: _angular_core.InputSignal<"xs" | "sm" | "md" | undefined>;
     readonly shape: _angular_core.InputSignal<ClxShape | undefined>;
     readonly positioned: _angular_core.InputSignal<boolean>;
     protected readonly _color: _angular_core.Signal<ClxColorInput>;
-    protected readonly _size: _angular_core.Signal<"sm" | "md" | "xs">;
+    protected readonly _size: _angular_core.Signal<"xs" | "sm" | "md">;
     protected readonly _shape: _angular_core.Signal<ClxShape>;
     protected readonly _hostClass: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxBadgeComponent, never>;
@@ -290,7 +291,7 @@ declare class ClxCardComponent {
      *  product-cart-style layout) regardless of variant/color. */
     readonly border: _angular_core.InputSignal<boolean>;
     /** Per-instance border-radius override — falls back to the theme's global borderRadius when unset. */
-    readonly radius: _angular_core.InputSignal<"sm" | "md" | "lg" | "none" | "xl" | "full" | undefined>;
+    readonly radius: _angular_core.InputSignal<"sm" | "md" | "lg" | "xl" | "none" | "full" | undefined>;
     /** Auto-generated header icon (Material Symbols name) — shown in a rounded primary-subtle
      *  square next to headerTitle. Ignored when a manual [clxCardHeader] block is projected. */
     readonly icon: _angular_core.InputSignal<string | undefined>;
@@ -493,7 +494,14 @@ declare class ClxSpinnerComponent {
 }
 
 type ClxProgressBarSize = 'xs' | 'sm' | 'md' | 'lg';
-type ClxProgressBarVariant = 'solid' | 'striped' | 'indeterminate';
+type ClxProgressBarVariant = 'solid' | 'striped' | 'indeterminate' | 'segmented';
+/** One slice of a `variant="segmented"` progress bar — widths are normalized against the sum of
+ *  every segment's `value`, independent of the bar's own `max`/`value` inputs. */
+interface ClxProgressBarSegment {
+    value: number;
+    color: ClxColorInput;
+    label?: string;
+}
 
 declare class ClxProgressBarComponent {
     private readonly _themeSvc;
@@ -505,15 +513,23 @@ declare class ClxProgressBarComponent {
     readonly variant: _angular_core.InputSignal<ClxProgressBarVariant>;
     readonly label: _angular_core.InputSignal<string>;
     readonly showValue: _angular_core.InputSignal<boolean>;
-    readonly valueFormat: _angular_core.InputSignal<"value" | "percent" | "fraction">;
+    readonly valueFormat: _angular_core.InputSignal<"percent" | "fraction" | "value">;
+    /** 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. */
+    readonly segments: _angular_core.InputSignal<ClxProgressBarSegment[]>;
     protected readonly _pct: _angular_core.Signal<number>;
     protected readonly _pbSize: _angular_core.Signal<ClxProgressBarSize>;
     protected readonly _trackH: _angular_core.Signal<string>;
     protected readonly _labelCls: _angular_core.Signal<"text-xs text-clx-text-label" | "text-sm text-clx-text-label">;
     protected readonly _displayValue: _angular_core.Signal<string>;
     protected readonly _fillCls: _angular_core.Signal<string>;
+    protected readonly _segmentPcts: _angular_core.Signal<{
+        pct: number;
+        cls: string;
+        label: string | undefined;
+    }[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxProgressBarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxProgressBarComponent, "clx-progress-bar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxProgressBarComponent, "clx-progress-bar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "segments": { "alias": "segments"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class ClxRatingComponent {
@@ -1950,7 +1966,7 @@ declare class ClxEditorComponent implements AfterViewInit, OnDestroy, ControlVal
     protected readonly _color: _angular_core.Signal<ClxColorInput>;
     readonly size: _angular_core.InputSignal<ClxEditorSize | undefined>;
     protected readonly _editorSize: _angular_core.Signal<ClxEditorSize>;
-    readonly status: _angular_core.InputSignal<"default" | "success" | "error">;
+    readonly status: _angular_core.InputSignal<"success" | "error" | "default">;
     readonly statusMessage: _angular_core.InputSignal<string>;
     readonly hint: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.InputSignal<boolean>;
@@ -2126,6 +2142,9 @@ declare class ClxWizardComponent implements AfterContentInit {
     readonly prevLabel: _angular_core.InputSignal<string>;
     readonly nextLabel: _angular_core.InputSignal<string>;
     readonly finishLabel: _angular_core.InputSignal<string>;
+    /** 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. */
+    readonly finishLoading: _angular_core.InputSignal<boolean>;
     readonly stepChange: _angular_core.OutputEmitterRef<number>;
     readonly finish: _angular_core.OutputEmitterRef<void>;
     private readonly _destroyRef;
@@ -2151,7 +2170,7 @@ declare class ClxWizardComponent implements AfterContentInit {
     protected readonly _rootClass: _angular_core.Signal<string>;
     protected _circleClass(i: number): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxWizardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxWizardComponent, "clx-wizard", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "activeTextColor": { "alias": "activeTextColor"; "required": false; "isSignal": true; }; "underlineColor": { "alias": "underlineColor"; "required": false; "isSignal": true; }; "stepColor": { "alias": "stepColor"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "prevLabel": { "alias": "prevLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "finishLabel": { "alias": "finishLabel"; "required": false; "isSignal": true; }; }, { "stepChange": "stepChange"; "finish": "finish"; }, ["_stepQuery"], ["*", "[clx-wizard-footer-start]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxWizardComponent, "clx-wizard", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "activeTextColor": { "alias": "activeTextColor"; "required": false; "isSignal": true; }; "underlineColor": { "alias": "underlineColor"; "required": false; "isSignal": true; }; "stepColor": { "alias": "stepColor"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "prevLabel": { "alias": "prevLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "finishLabel": { "alias": "finishLabel"; "required": false; "isSignal": true; }; "finishLoading": { "alias": "finishLoading"; "required": false; "isSignal": true; }; }, { "stepChange": "stepChange"; "finish": "finish"; }, ["_stepQuery"], ["*", "[clx-wizard-footer-start]"], true, never>;
 }
 
 declare class ClxAppLayoutComponent implements OnInit, OnDestroy {
@@ -2431,7 +2450,7 @@ declare class ClxMenuComponent implements AfterViewInit {
     readonly style: _angular_core.InputSignal<ClxNavZoneStyle | undefined>;
     protected readonly _resolved: _angular_core.Signal<{
         color: codexly_ui.ClxColorInput;
-        size: "sm" | "md" | "xs";
+        size: "xs" | "sm" | "md";
         weight: codexly_ui.ClxFontWeight;
     }>;
     protected readonly _color: _angular_core.Signal<codexly_ui.ClxColorInput>;
@@ -2785,7 +2804,7 @@ declare class ClxNotificationComponent {
     } | undefined>;
     readonly buttonColor: _angular_core.InputSignal<ClxColorInput | undefined>;
     readonly buttonVariant: _angular_core.InputSignal<ClxButtonVariant>;
-    readonly buttonSize: _angular_core.InputSignal<"sm" | "md" | "lg" | "xxs" | "xs">;
+    readonly buttonSize: _angular_core.InputSignal<"xxs" | "xs" | "sm" | "md" | "lg">;
     readonly buttonIcon: _angular_core.InputSignal<string>;
     /** Unread-count badge color — falls back to the theme's notification.unreadColor (then
      *  primaryColor) when unset. */
@@ -3337,7 +3356,7 @@ declare class ClxFabComponent {
     protected readonly _position: _angular_core.Signal<ClxFabPosition>;
     protected readonly _triggerClass: _angular_core.Signal<string>;
     /** Los botones de la pila de accesos van un paso más pequeños que el trigger. */
-    protected readonly _itemSize: _angular_core.Signal<"sm" | "xxs" | "xs">;
+    protected readonly _itemSize: _angular_core.Signal<"xxs" | "xs" | "sm">;
     private readonly _sso;
     readonly _scrollStrategy: _angular_cdk_overlay.RepositionScrollStrategy;
     readonly _positions: ConnectedPosition[];
@@ -3547,6 +3566,7 @@ interface SparkPoint {
 }
 
 declare class ClxStatCardComponent {
+    private readonly _themeSvc;
     readonly metric: _angular_core.InputSignal<ClxStatMetric>;
     readonly chartData: _angular_core.InputSignal<number[]>;
     readonly color: _angular_core.InputSignal<ClxColorInput>;
@@ -3558,9 +3578,13 @@ declare class ClxStatCardComponent {
     protected readonly _iconTextBase: _angular_core.Signal<string>;
     protected readonly _lineColor: _angular_core.Signal<string>;
     protected readonly _gradId: _angular_core.Signal<string>;
+    /** A widget with no meaningful period-over-period comparison (e.g. a plain point-in-time count
+     *  like "pending commissions") passes trend: '' — hides the trend badge/row entirely instead of
+     *  rendering an empty pill with just an arrow icon and no text. */
+    protected readonly _hasTrend: _angular_core.Signal<boolean>;
     protected readonly _trendColor: _angular_core.Signal<"red" | "green" | "slate">;
     protected readonly _trendArrowIcon: _angular_core.Signal<"arrow_upward" | "arrow_downward" | "remove">;
-    protected readonly _trendTextClass: _angular_core.Signal<"text-red-500" | "text-green-500" | "text-slate-400">;
+    protected readonly _trendTextClass: _angular_core.Signal<"text-clx-text-subtle" | "text-red-500" | "text-green-500">;
     protected readonly _trendIcon: _angular_core.Signal<"remove" | "arrow_outward" | "south_east">;
     protected readonly _formattedValue: _angular_core.Signal<string>;
     protected readonly _points: _angular_core.Signal<SparkPoint[]>;
@@ -3572,6 +3596,138 @@ declare class ClxStatCardComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxStatCardComponent, "clx-stat-card", never, { "metric": { "alias": "metric"; "required": true; "isSignal": true; }; "chartData": { "alias": "chartData"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+type ClxWidgetCardState = 'ready' | 'loading' | 'empty' | 'error';
+interface ClxWidgetMenuAction {
+    label: string;
+    icon: string;
+    action: string;
+    /** Marks the action as destructive (e.g. "Remove from dashboard") — rendered in red regardless of theme. */
+    danger?: boolean;
+}
+
+/** 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'. */
+declare class ClxWidgetCardComponent {
+    private readonly _themeSvc;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly state: _angular_core.InputSignal<ClxWidgetCardState>;
+    readonly draggable: _angular_core.InputSignal<boolean>;
+    readonly menuActions: _angular_core.InputSignal<ClxWidgetMenuAction[]>;
+    readonly menuLabel: _angular_core.InputSignal<string>;
+    readonly emptyMessage: _angular_core.InputSignal<string>;
+    readonly errorMessage: _angular_core.InputSignal<string>;
+    readonly retryLabel: _angular_core.InputSignal<string>;
+    readonly menuAction: _angular_core.OutputEmitterRef<string>;
+    readonly retry: _angular_core.OutputEmitterRef<void>;
+    private readonly _sso;
+    readonly _scrollStrategy: _angular_cdk_overlay.RepositionScrollStrategy;
+    readonly _positions: ConnectedPosition[];
+    protected readonly _menuOpen: _angular_core.WritableSignal<boolean>;
+    protected readonly _menuPanelClass: _angular_core.Signal<string>;
+    protected readonly _hostClass: _angular_core.Signal<string>;
+    protected _toggleMenu(): void;
+    protected _closeMenu(): void;
+    protected _onMenuKeydown(event: KeyboardEvent): void;
+    protected _onMenuAction(action: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxWidgetCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxWidgetCardComponent, "clx-widget-card", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; "menuActions": { "alias": "menuActions"; "required": false; "isSignal": true; }; "menuLabel": { "alias": "menuLabel"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "retryLabel": { "alias": "retryLabel"; "required": false; "isSignal": true; }; }, { "menuAction": "menuAction"; "retry": "retry"; }, never, ["*"], true, never>;
+}
+
+/** 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. */
+declare class ClxTableProgressCellComponent {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly value: _angular_core.InputSignal<number>;
+    readonly max: _angular_core.InputSignal<number>;
+    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+    /** Optional leading glyph (e.g. a flag emoji) shown before the label. */
+    readonly leadingIcon: _angular_core.InputSignal<string | undefined>;
+    /** Overrides the trailing number's text (e.g. a formatted "6,192") — falls back to the raw value(). */
+    readonly displayValue: _angular_core.InputSignal<string | number | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxTableProgressCellComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxTableProgressCellComponent, "clx-table-progress-cell", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; "isSignal": true; }; "displayValue": { "alias": "displayValue"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** 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. */
+declare class ClxTableStatusCellComponent {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly avatarSrc: _angular_core.InputSignal<string | null>;
+    readonly avatarInitials: _angular_core.InputSignal<string | null>;
+    readonly avatarColor: _angular_core.InputSignal<ClxColorInput | undefined>;
+    readonly statusLabel: _angular_core.InputSignal<string>;
+    readonly statusColor: _angular_core.InputSignal<ClxColorInput>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxTableStatusCellComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxTableStatusCellComponent, "clx-table-status-cell", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarColor": { "alias": "avatarColor"; "required": false; "isSignal": true; }; "statusLabel": { "alias": "statusLabel"; "required": true; "isSignal": true; }; "statusColor": { "alias": "statusColor"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** One widget's placement + size on the grid, in column/row units (not pixels) — this is the
+ *  shape persisted as the `layout` JSONB column of a saved dashboard (e.g. codexly's
+ *  rp_dashboard_layouts.layout: ClxGridItem[]). `id` is the caller's own widget instance id, used
+ *  only to correlate a layout entry back to whatever renders inside it (ClxDashboardGridComponent
+ *  itself is content-agnostic — it positions and resizes a projected element, nothing more). */
+interface ClxGridItem {
+    id: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    /** Set on creation (e.g. 1x1) and raised on `minW`/`minH` violations — consumers typically
+     *  ignore this and just respect minW/minH when building a new item. */
+    minW?: number;
+    minH?: number;
+}
+interface ClxGridItemMoveEvent {
+    id: string;
+    x: number;
+    y: number;
+}
+interface ClxGridItemResizeEvent {
+    id: string;
+    w: number;
+    h: number;
+}
+
+interface ClxGridItemContext {
+    $implicit: ClxGridItem;
+}
+/** 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. */
+declare class ClxGridItemDirective {
+    readonly templateRef: TemplateRef<ClxGridItemContext>;
+    constructor(templateRef: TemplateRef<ClxGridItemContext>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxGridItemDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ClxGridItemDirective, "ng-template[clxGridItem]", never, {}, {}, never, never, true, never>;
+}
+/** 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). */
+declare class ClxDashboardGridComponent {
+    readonly items: _angular_core.InputSignal<ClxGridItem[]>;
+    readonly columns: _angular_core.InputSignal<number>;
+    readonly rowHeight: _angular_core.InputSignal<number>;
+    readonly gap: _angular_core.InputSignal<number>;
+    readonly editable: _angular_core.InputSignal<boolean>;
+    readonly layoutChange: _angular_core.OutputEmitterRef<ClxGridItem[]>;
+    readonly itemResize: _angular_core.OutputEmitterRef<ClxGridItemResizeEvent>;
+    protected readonly _itemTemplate: _angular_core.Signal<ClxGridItemDirective | undefined>;
+    protected readonly _gridCols: _angular_core.Signal<string>;
+    private _resizing;
+    protected _onDrop(event: CdkDragDrop<ClxGridItem[]>): void;
+    protected _onDragMoved(_event: CdkDragMove<ClxGridItem>): void;
+    protected _startResize(event: PointerEvent, item: ClxGridItem): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxDashboardGridComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxDashboardGridComponent, "clx-dashboard-grid", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; }, { "layoutChange": "layoutChange"; "itemResize": "itemResize"; }, ["_itemTemplate"], never, true, never>;
+}
+
 type ClxProductLayout = 'vertical' | 'horizontal';
 type ClxProductSize = 'sm' | 'md';
 /** Refleja st_variations + st_products (campos necesarios para la card) */
@@ -4185,7 +4341,7 @@ declare class ClxSearchComponent implements ControlValueAccessor {
         padDefaultL: string;
         padDefaultR: string;
     }>;
-    protected readonly _buttonSize: _angular_core.Signal<"sm" | "md" | "lg" | "xs">;
+    protected readonly _buttonSize: _angular_core.Signal<"xs" | "sm" | "md" | "lg">;
     protected readonly _wrapperClass: _angular_core.Signal<string>;
     protected readonly _inputClass: _angular_core.Signal<string>;
     writeValue(val: string): void;
@@ -4544,5 +4700,5 @@ declare class ClxToastService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<ClxToastService>;
 }
 
-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 type { ClxAlertButtonOptions, ClxAlertOptions, ClxAlertResult, ClxAlertType, ClxAnimateAttentionSeeker, ClxAnimateBackEntrance, ClxAnimateBackExit, ClxAnimateBouncingEntrance, ClxAnimateBouncingExit, ClxAnimateConfig, ClxAnimateDefaults, ClxAnimateEvent, ClxAnimateFadingEntrance, ClxAnimateFadingExit, ClxAnimateFlipper, ClxAnimateLightspeed, ClxAnimateName, ClxAnimateRotatingEntrance, ClxAnimateRotatingExit, ClxAnimateSlidingEntrance, ClxAnimateSlidingExit, ClxAnimateSpecial, ClxAnimateTrigger, ClxAnimateZoomingEntrance, ClxAnimateZoomingExit, ClxAvatarContentType, ClxBadgeVariant, ClxBrandSize, ClxButtonColor, ClxButtonGroupShape, ClxButtonVariant, ClxCardBrand, ClxCardPadding, ClxCardShadow, ClxCardTitleZoneStyle, ClxCardVariant, ClxCarouselAspectRatio, ClxCarouselConfig, ClxCartItem, ClxCartSummaryData, ClxCellContext, ClxCheckboxVariant, ClxCollapseDivider, ClxCollapseSize, ClxColor, ClxColorInput, ClxColorPickerFormat, ClxColorPickerSize, ClxColorResolved, ClxColorTokens, ClxCouponResult, ClxDateRange, ClxDateRangePickerSize, ClxDateRangePickerStatus, ClxDatepickerSize, ClxDatepickerStatus, ClxDrawerButtonOptions, ClxDrawerConfig, ClxDrawerPosition, ClxDrawerRef, ClxDrawerSize, ClxEditorSize, ClxEditorTool, ClxEditorToolbarGroup, ClxExistingFile, ClxFabItem, ClxFabPosition, ClxFilterChangeEvent, ClxFilterField, ClxFilterFieldType, ClxFilterOption, ClxFilterValue, ClxFilterValues, ClxFontFamily, ClxFontOption, ClxFontWeight, ClxFormControlsTheme, ClxInputSize, ClxInputStatus, ClxInputType, ClxListItem, ClxListItemLabelZoneStyle, ClxListSize, ClxListVariant, ClxModalButtonOptions, ClxModalConfig, ClxModalRef, ClxModalSize, ClxNavZoneStyle, ClxNotificationItem, ClxNotificationSeverity, ClxNotificationSeverityColors, ClxNotificationSize, ClxNotificationTheme, ClxNumberSize, ClxNumberVariant, ClxOtpSize, ClxPageChangeEvent, ClxPageHeaderTextSize, ClxPageHeaderZoneStyle, ClxPageSizeChangeEvent, ClxPaginationSize, ClxPaginationTheme, ClxProduct, ClxProductDescription, ClxProductDetailData, ClxProductLayout, ClxProductQuickViewData, ClxProductQuickViewResult, ClxProductSize, ClxProductSpec, ClxProfileMenuItem, ClxProgressBarSize, ClxProgressBarVariant, ClxRadioVariant, ClxResolvedCardTitleZoneStyle, ClxResolvedListItemLabelZoneStyle, ClxResolvedNavZoneStyle, ClxResolvedNotificationStyle, ClxResolvedPageHeaderZoneStyle, ClxResolvedPaginationStyle, ClxResolvedTableStyle, ClxResolvedTabsStyle, ClxResolvedTimelineTitleZoneStyle, ClxResolvedWizardStyle, ClxReview, ClxRippleItem, ClxSelectOption, ClxSelectSize, ClxShade, ClxShape, ClxSize, ClxSkeletonVariant, ClxSliderSize, ClxSocialPlatform, ClxSpecOption, ClxSpecType, ClxSpinnerColor, ClxSpinnerVariant, ClxStatMetric, ClxStepperOrientation, ClxStepperSize, ClxStepperStatus, ClxStepperStep, ClxTabItem, ClxTableColumn, ClxTablePageEvent, ClxTableSelectionEvent, ClxTableShadow, ClxTableSort, ClxTableSortEvent, ClxTableTheme, ClxTabsTheme, ClxTagShape, ClxTagSize, ClxTagVariant, ClxTextareaResize, ClxTextareaSize, ClxTextareaStatus, ClxThemeConfig, ClxThemeMode, ClxTimelineLineStyle, ClxTimelineMode, ClxTimelineSize, ClxTimelineTitleZoneStyle, ClxTimepickerSize, ClxTimepickerStatus, ClxToastAction, ClxToastEntry, ClxToastOptions, ClxToastPosition, ClxToastType, ClxTooltipPosition, ClxTooltipSize, ClxTreeExpandEvent, ClxTreeNode, ClxTreeSelectEvent, ClxTreeSize, ClxTreeVariant, ClxTrendDirection, ClxUploadError, ClxUploadItemAction, ClxUploadItemActionResolver, ClxUploadPreviewItem, ClxUploadSize, ClxVariation, ClxWishlistItem, ClxWishlistPageChangeEvent, ClxWizardColor, ClxWizardOrientation, ClxWizardStepStatus, ClxWizardTheme, NativeOverlayRef, SparkPoint };
+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 };
+export type { ClxAlertButtonOptions, ClxAlertOptions, ClxAlertResult, ClxAlertType, ClxAnimateAttentionSeeker, ClxAnimateBackEntrance, ClxAnimateBackExit, ClxAnimateBouncingEntrance, ClxAnimateBouncingExit, ClxAnimateConfig, ClxAnimateDefaults, ClxAnimateEvent, ClxAnimateFadingEntrance, ClxAnimateFadingExit, ClxAnimateFlipper, ClxAnimateLightspeed, ClxAnimateName, ClxAnimateRotatingEntrance, ClxAnimateRotatingExit, ClxAnimateSlidingEntrance, ClxAnimateSlidingExit, ClxAnimateSpecial, ClxAnimateTrigger, ClxAnimateZoomingEntrance, ClxAnimateZoomingExit, ClxAvatarContentType, ClxBadgeVariant, ClxBrandSize, ClxButtonColor, ClxButtonGroupShape, ClxButtonVariant, ClxCardBrand, ClxCardPadding, ClxCardShadow, ClxCardTitleZoneStyle, ClxCardVariant, ClxCarouselAspectRatio, ClxCarouselConfig, ClxCartItem, ClxCartSummaryData, ClxCellContext, ClxCheckboxVariant, ClxCollapseDivider, ClxCollapseSize, ClxColor, ClxColorInput, ClxColorPickerFormat, ClxColorPickerSize, ClxColorResolved, ClxColorTokens, ClxCouponResult, ClxDateRange, ClxDateRangePickerSize, ClxDateRangePickerStatus, ClxDatepickerSize, ClxDatepickerStatus, ClxDrawerButtonOptions, ClxDrawerConfig, ClxDrawerPosition, ClxDrawerRef, ClxDrawerSize, ClxEditorSize, ClxEditorTool, ClxEditorToolbarGroup, ClxExistingFile, ClxFabItem, ClxFabPosition, ClxFilterChangeEvent, ClxFilterField, ClxFilterFieldType, ClxFilterOption, ClxFilterValue, ClxFilterValues, ClxFontFamily, ClxFontOption, ClxFontWeight, ClxFormControlsTheme, ClxGridItem, ClxGridItemContext, ClxGridItemMoveEvent, ClxGridItemResizeEvent, ClxInputSize, ClxInputStatus, ClxInputType, ClxListItem, ClxListItemLabelZoneStyle, ClxListSize, ClxListVariant, ClxModalButtonOptions, ClxModalConfig, ClxModalRef, ClxModalSize, ClxNavZoneStyle, ClxNotificationItem, ClxNotificationSeverity, ClxNotificationSeverityColors, ClxNotificationSize, ClxNotificationTheme, ClxNumberSize, ClxNumberVariant, ClxOtpSize, ClxPageChangeEvent, ClxPageHeaderTextSize, ClxPageHeaderZoneStyle, ClxPageSizeChangeEvent, ClxPaginationSize, ClxPaginationTheme, ClxProduct, ClxProductDescription, ClxProductDetailData, ClxProductLayout, ClxProductQuickViewData, ClxProductQuickViewResult, ClxProductSize, ClxProductSpec, ClxProfileMenuItem, ClxProgressBarSegment, ClxProgressBarSize, ClxProgressBarVariant, ClxRadioVariant, ClxResolvedCardTitleZoneStyle, ClxResolvedListItemLabelZoneStyle, ClxResolvedNavZoneStyle, ClxResolvedNotificationStyle, ClxResolvedPageHeaderZoneStyle, ClxResolvedPaginationStyle, ClxResolvedTableStyle, ClxResolvedTabsStyle, ClxResolvedTimelineTitleZoneStyle, ClxResolvedWizardStyle, ClxReview, ClxRippleItem, ClxSelectOption, ClxSelectSize, ClxShade, ClxShape, ClxSize, ClxSkeletonVariant, ClxSliderSize, ClxSocialPlatform, ClxSpecOption, ClxSpecType, ClxSpinnerColor, ClxSpinnerVariant, ClxStatMetric, ClxStepperOrientation, ClxStepperSize, ClxStepperStatus, ClxStepperStep, ClxTabItem, ClxTableColumn, ClxTablePageEvent, ClxTableSelectionEvent, ClxTableShadow, ClxTableSort, ClxTableSortEvent, ClxTableTheme, ClxTabsTheme, ClxTagShape, ClxTagSize, ClxTagVariant, ClxTextareaResize, ClxTextareaSize, ClxTextareaStatus, ClxThemeConfig, ClxThemeMode, ClxTimelineLineStyle, ClxTimelineMode, ClxTimelineSize, ClxTimelineTitleZoneStyle, ClxTimepickerSize, ClxTimepickerStatus, ClxToastAction, ClxToastEntry, ClxToastOptions, ClxToastPosition, ClxToastType, ClxTooltipPosition, ClxTooltipSize, ClxTreeExpandEvent, ClxTreeNode, ClxTreeSelectEvent, ClxTreeSize, ClxTreeVariant, ClxTrendDirection, ClxUploadError, ClxUploadItemAction, ClxUploadItemActionResolver, ClxUploadPreviewItem, ClxUploadSize, ClxVariation, ClxWidgetCardState, ClxWidgetMenuAction, ClxWishlistItem, ClxWishlistPageChangeEvent, ClxWizardColor, ClxWizardOrientation, ClxWizardStepStatus, ClxWizardTheme, NativeOverlayRef, SparkPoint };