codexly-ui 0.15.15 → 0.16.0

package/fesm2022/codexly-ui-charts.mjs

@@ -137,17 +137,8 @@ class ClxChartComponent {
                 this._chart.update();
             }
         }, { injector: this._injector });
-        // Chart.js sizes its canvas backing store from the container's getBoundingClientRect() at the
-        // moment it's created — but inside a flex/grid ancestor (e.g. the dashboard's CDK drag-drop
-        // grid) that layout can still be settling on the frame this component mounts, so the chart can
-        // capture a stale size (seen in practice: a container CSS-fixed at 120px tall, but the canvas's
-        // own width/height backing-store attrs frozen at a stale 180px from that first read) and never
-        // self-correct, because a ResizeObserver alone only fires on a SUBSEQUENT size change — a
-        // container that was wrong from its very first paint and then never changes size again never
-        // fires one. So force one resize() a frame after creation (by which point the browser has
-        // finished the layout pass) to re-read the real size once, in addition to the observer that
-        // keeps it in sync for any later resize (grid edit, window resize, etc).
-        requestAnimationFrame(() => this._chart?.resize());
+        // Keeps the canvas's backing store in sync whenever its container actually changes size later
+        // (grid edit, window resize, sidebar toggle) — Chart.js doesn't watch this on its own.
         const container = this.canvasRef.nativeElement.parentElement;
         if (container && typeof ResizeObserver !== 'undefined') {
             this._resizeObserver = new ResizeObserver(() => this._chart?.resize());

package/fesm2022/codexly-ui-charts.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"codexly-ui-charts.mjs","sources":["../../../projects/codexly-ui/charts/lib/chart.config.ts","../../../projects/codexly-ui/charts/lib/clx-chart.component.ts","../../../projects/codexly-ui/charts/codexly-ui-charts.ts"],"sourcesContent":["import type { ChartData, ChartOptions, ChartType } from 'chart.js';\nimport { CLX_COLOR_HEX } from 'codexly-ui';\n\nexport const CLX_CHART_DEFAULTS_NO_SCALES: ChartOptions = {\n  responsive: true,\n  maintainAspectRatio: false,\n  font: {\n    family: 'Roboto, ui-sans-serif, system-ui, -apple-system, sans-serif',\n    size: 12,\n  },\n  plugins: {\n    legend:  { display: true, position: 'top', align: 'center' },\n    tooltip: { enabled: true },\n  },\n} as ChartOptions;\n\nexport const CLX_CHART_DEFAULTS: ChartOptions = {\n  responsive: true,\n  maintainAspectRatio: false,\n  font: {\n    family: 'Roboto, ui-sans-serif, system-ui, -apple-system, sans-serif',\n    size: 12,\n  },\n  plugins: {\n    legend: {\n      display: true,\n      position: 'top',\n      align: 'center'\n    },\n    tooltip: {\n      enabled: true\n    },\n  },\n  scales: {\n    x: { \n      display: true,\n      grid: {\n        display: false\n      },\n      border: {\n        color: CLX_COLOR_HEX.slate100\n      },\n      ticks: {\n        color: CLX_COLOR_HEX.slate400\n      }\n    },\n    y: {\n      display: true,\n      beginAtZero: true,\n      grid: {\n        display: true,\n        color: CLX_COLOR_HEX.slate100\n      },\n      border: {\n        color: CLX_COLOR_HEX.slate100\n      },\n      ticks: {\n        color: CLX_COLOR_HEX.slate400\n      }\n    },\n  },\n} as ChartOptions;\n\nexport const CLX_CHART_PALETTE: string[] = Object.values(CLX_COLOR_HEX);\n\n/** Versiones con opacidad 20% para backgrounds de áreas/barras */\nexport const CLX_CHART_PALETTE_ALPHA: string[] = CLX_CHART_PALETTE.map(hex => `${hex}33`);\n\nconst AREA_TYPES: ChartType[] = ['line', 'radar'];\nconst MULTI_SLICE_TYPES: ChartType[] = ['pie', 'doughnut', 'polarArea'];\n\nfunction shuffled(arr: string[]): string[] {\n  const a = [...arr];\n  for (let i = a.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    [a[i], a[j]] = [a[j], a[i]];\n  }\n  return a;\n}\n\nexport function applyChartDefaults(type: ChartType, data: ChartData): ChartData {\n  const palette = shuffled(CLX_CHART_PALETTE);\n  const paletteAlpha = palette.map(hex => `${hex}33`);\n  const datasets = data.datasets.map((ds, i) => {\n    const color = palette[i % palette.length];\n    const alpha = paletteAlpha[i % paletteAlpha.length];\n\n    if (MULTI_SLICE_TYPES.includes(type)) {\n      const count = (ds.data as number[]).length;\n      return {\n        ...ds,\n        backgroundColor: ds.backgroundColor ?? Array.from({ length: count }, (_, j) =>\n          palette[j % palette.length]\n        ),\n        borderColor: ds.borderColor ?? '#fff',\n        borderWidth: (ds as any).borderWidth ?? 2,\n      };\n    }\n\n    if (AREA_TYPES.includes(type)) {\n      return {\n        ...ds,\n        borderColor:          ds.borderColor ?? color,\n        backgroundColor:      ds.backgroundColor ?? alpha,\n        pointBackgroundColor: (ds as any).pointBackgroundColor ?? color,\n        fill:                 (ds as any).fill ?? (type === 'line' ? false : true),\n        tension:              (ds as any).tension ?? 0.4,\n      };\n    }\n\n    return {\n      ...ds,\n      backgroundColor:    ds.backgroundColor ?? color,\n      borderColor:        ds.borderColor ?? color,\n      borderWidth:        (ds as any).borderWidth ?? 0,\n      barPercentage:      (ds as any).barPercentage ?? 0.5,\n      categoryPercentage: (ds as any).categoryPercentage ?? 0.6,\n    };\n  });\n\n  return { ...data, datasets } as ChartData;\n}\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  inject,\n  Injector,\n  input,\n  OnDestroy,\n  untracked,\n  ViewChild,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport {\n  Chart,\n  LineController,\n  BarController,\n  PieController,\n  DoughnutController,\n  RadarController,\n  PolarAreaController,\n  CategoryScale,\n  LinearScale,\n  RadialLinearScale,\n  BarElement,\n  LineElement,\n  PointElement,\n  ArcElement,\n  Filler,\n  Tooltip,\n  Legend,\n  type ChartData,\n  type ChartOptions,\n} from 'chart.js';\n\nimport { applyChartDefaults, CLX_CHART_DEFAULTS, CLX_CHART_DEFAULTS_NO_SCALES } from './chart.config';\nimport type { ClxChartType } from './clx-chart.types';\n\nChart.register(\n  LineController, BarController, PieController,\n  DoughnutController, RadarController, PolarAreaController,\n  CategoryScale, LinearScale, RadialLinearScale,\n  BarElement, LineElement, PointElement, ArcElement,\n  Filler, Tooltip, Legend,\n);\n\nconst NO_SCALE_TYPES = ['doughnut', 'pie', 'polarArea'];\n\n@Component({\n  selector: 'clx-chart',\n  standalone: true,\n  template: `\n    <div class=\"clx-chart-container\" [style.height]=\"_hostHeight()\" [class.clx-loading]=\"loading()\">\n      <canvas #canvas role=\"img\" [attr.aria-label]=\"ariaLabel() || 'Chart'\"></canvas>\n      \n      @if (loading()) {\n        <div class=\"clx-chart-loader\">\n          <div class=\"animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-500\"></div>\n        </div>\n      }\n    </div>\n  `,\n  styles: [`\n    :host { display: block; width: 100%; }\n    .clx-chart-container { position: relative; width: 100%; }\n    canvas { display: block; width: 100% !important; }\n    \n    .clx-chart-loader {\n      position: absolute;\n      inset: 0;\n      background: rgba(255, 255, 255, 0.6);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 10;\n      backdrop-filter: blur(2px);\n    }\n  `],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ClxChartComponent implements AfterViewInit, OnDestroy {\n  @ViewChild('canvas') canvasRef!: ElementRef<HTMLCanvasElement>;\n\n  type = input.required<ClxChartType>();\n  data = input.required<ChartData>();\n  options = input<ChartOptions>({});\n  height = input<number | string>(300);\n  ariaLabel = input<string>();\n\n  // SOLUCIÓN AL ERROR: Añadimos el input loading\n  loading = input<boolean>(false);\n\n  private _chart?: Chart;\n  private _injector = inject(Injector);\n  private _resizeObserver?: ResizeObserver;\n\n  _hostHeight = computed(() =>\n    typeof this.height() === 'number' ? `${this.height()}px` : this.height()\n  );\n\n  ngAfterViewInit(): void {\n    this._createChart();\n\n    effect(() => {\n      const currentType = this.type();\n      const currentData = this.data();\n\n      if (this._chart) {\n        (this._chart.config as any).type = currentType;\n        this._chart.data = applyChartDefaults(currentType, currentData);\n        this._chart.update();\n      }\n    }, { injector: this._injector });\n\n    // Chart.js sizes its canvas backing store from the container's getBoundingClientRect() at the\n    // moment it's created — but inside a flex/grid ancestor (e.g. the dashboard's CDK drag-drop\n    // grid) that layout can still be settling on the frame this component mounts, so the chart can\n    // capture a stale size (seen in practice: a container CSS-fixed at 120px tall, but the canvas's\n    // own width/height backing-store attrs frozen at a stale 180px from that first read) and never\n    // self-correct, because a ResizeObserver alone only fires on a SUBSEQUENT size change — a\n    // container that was wrong from its very first paint and then never changes size again never\n    // fires one. So force one resize() a frame after creation (by which point the browser has\n    // finished the layout pass) to re-read the real size once, in addition to the observer that\n    // keeps it in sync for any later resize (grid edit, window resize, etc).\n    requestAnimationFrame(() => this._chart?.resize());\n\n    const container = this.canvasRef.nativeElement.parentElement;\n    if (container && typeof ResizeObserver !== 'undefined') {\n      this._resizeObserver = new ResizeObserver(() => this._chart?.resize());\n      this._resizeObserver.observe(container);\n    }\n  }\n\n  private _createChart(): void {\n    const ctx = this.canvasRef.nativeElement.getContext('2d');\n    if (!ctx) return;\n\n    const type = untracked(() => this.type());\n    this._chart = new Chart(ctx, {\n      type,\n      data: applyChartDefaults(type, untracked(() => this.data())),\n      options: { ...(NO_SCALE_TYPES.includes(type) ? CLX_CHART_DEFAULTS_NO_SCALES : CLX_CHART_DEFAULTS), ...untracked(() => this.options()) },\n    });\n  }\n\n  ngOnDestroy(): void {\n    this._resizeObserver?.disconnect();\n    this._chart?.destroy();\n  }\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"codexly-ui-charts.mjs","sources":["../../../projects/codexly-ui/charts/lib/chart.config.ts","../../../projects/codexly-ui/charts/lib/clx-chart.component.ts","../../../projects/codexly-ui/charts/codexly-ui-charts.ts"],"sourcesContent":["import type { ChartData, ChartOptions, ChartType } from 'chart.js';\nimport { CLX_COLOR_HEX } from 'codexly-ui';\n\nexport const CLX_CHART_DEFAULTS_NO_SCALES: ChartOptions = {\n  responsive: true,\n  maintainAspectRatio: false,\n  font: {\n    family: 'Roboto, ui-sans-serif, system-ui, -apple-system, sans-serif',\n    size: 12,\n  },\n  plugins: {\n    legend:  { display: true, position: 'top', align: 'center' },\n    tooltip: { enabled: true },\n  },\n} as ChartOptions;\n\nexport const CLX_CHART_DEFAULTS: ChartOptions = {\n  responsive: true,\n  maintainAspectRatio: false,\n  font: {\n    family: 'Roboto, ui-sans-serif, system-ui, -apple-system, sans-serif',\n    size: 12,\n  },\n  plugins: {\n    legend: {\n      display: true,\n      position: 'top',\n      align: 'center'\n    },\n    tooltip: {\n      enabled: true\n    },\n  },\n  scales: {\n    x: { \n      display: true,\n      grid: {\n        display: false\n      },\n      border: {\n        color: CLX_COLOR_HEX.slate100\n      },\n      ticks: {\n        color: CLX_COLOR_HEX.slate400\n      }\n    },\n    y: {\n      display: true,\n      beginAtZero: true,\n      grid: {\n        display: true,\n        color: CLX_COLOR_HEX.slate100\n      },\n      border: {\n        color: CLX_COLOR_HEX.slate100\n      },\n      ticks: {\n        color: CLX_COLOR_HEX.slate400\n      }\n    },\n  },\n} as ChartOptions;\n\nexport const CLX_CHART_PALETTE: string[] = Object.values(CLX_COLOR_HEX);\n\n/** Versiones con opacidad 20% para backgrounds de áreas/barras */\nexport const CLX_CHART_PALETTE_ALPHA: string[] = CLX_CHART_PALETTE.map(hex => `${hex}33`);\n\nconst AREA_TYPES: ChartType[] = ['line', 'radar'];\nconst MULTI_SLICE_TYPES: ChartType[] = ['pie', 'doughnut', 'polarArea'];\n\nfunction shuffled(arr: string[]): string[] {\n  const a = [...arr];\n  for (let i = a.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    [a[i], a[j]] = [a[j], a[i]];\n  }\n  return a;\n}\n\nexport function applyChartDefaults(type: ChartType, data: ChartData): ChartData {\n  const palette = shuffled(CLX_CHART_PALETTE);\n  const paletteAlpha = palette.map(hex => `${hex}33`);\n  const datasets = data.datasets.map((ds, i) => {\n    const color = palette[i % palette.length];\n    const alpha = paletteAlpha[i % paletteAlpha.length];\n\n    if (MULTI_SLICE_TYPES.includes(type)) {\n      const count = (ds.data as number[]).length;\n      return {\n        ...ds,\n        backgroundColor: ds.backgroundColor ?? Array.from({ length: count }, (_, j) =>\n          palette[j % palette.length]\n        ),\n        borderColor: ds.borderColor ?? '#fff',\n        borderWidth: (ds as any).borderWidth ?? 2,\n      };\n    }\n\n    if (AREA_TYPES.includes(type)) {\n      return {\n        ...ds,\n        borderColor:          ds.borderColor ?? color,\n        backgroundColor:      ds.backgroundColor ?? alpha,\n        pointBackgroundColor: (ds as any).pointBackgroundColor ?? color,\n        fill:                 (ds as any).fill ?? (type === 'line' ? false : true),\n        tension:              (ds as any).tension ?? 0.4,\n      };\n    }\n\n    return {\n      ...ds,\n      backgroundColor:    ds.backgroundColor ?? color,\n      borderColor:        ds.borderColor ?? color,\n      borderWidth:        (ds as any).borderWidth ?? 0,\n      barPercentage:      (ds as any).barPercentage ?? 0.5,\n      categoryPercentage: (ds as any).categoryPercentage ?? 0.6,\n    };\n  });\n\n  return { ...data, datasets } as ChartData;\n}\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  inject,\n  Injector,\n  input,\n  OnDestroy,\n  untracked,\n  ViewChild,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport {\n  Chart,\n  LineController,\n  BarController,\n  PieController,\n  DoughnutController,\n  RadarController,\n  PolarAreaController,\n  CategoryScale,\n  LinearScale,\n  RadialLinearScale,\n  BarElement,\n  LineElement,\n  PointElement,\n  ArcElement,\n  Filler,\n  Tooltip,\n  Legend,\n  type ChartData,\n  type ChartOptions,\n} from 'chart.js';\n\nimport { applyChartDefaults, CLX_CHART_DEFAULTS, CLX_CHART_DEFAULTS_NO_SCALES } from './chart.config';\nimport type { ClxChartType } from './clx-chart.types';\n\nChart.register(\n  LineController, BarController, PieController,\n  DoughnutController, RadarController, PolarAreaController,\n  CategoryScale, LinearScale, RadialLinearScale,\n  BarElement, LineElement, PointElement, ArcElement,\n  Filler, Tooltip, Legend,\n);\n\nconst NO_SCALE_TYPES = ['doughnut', 'pie', 'polarArea'];\n\n@Component({\n  selector: 'clx-chart',\n  standalone: true,\n  template: `\n    <div class=\"clx-chart-container\" [style.height]=\"_hostHeight()\" [class.clx-loading]=\"loading()\">\n      <canvas #canvas role=\"img\" [attr.aria-label]=\"ariaLabel() || 'Chart'\"></canvas>\n      \n      @if (loading()) {\n        <div class=\"clx-chart-loader\">\n          <div class=\"animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-500\"></div>\n        </div>\n      }\n    </div>\n  `,\n  styles: [`\n    :host { display: block; width: 100%; }\n    .clx-chart-container { position: relative; width: 100%; }\n    canvas { display: block; width: 100% !important; }\n    \n    .clx-chart-loader {\n      position: absolute;\n      inset: 0;\n      background: rgba(255, 255, 255, 0.6);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 10;\n      backdrop-filter: blur(2px);\n    }\n  `],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ClxChartComponent implements AfterViewInit, OnDestroy {\n  @ViewChild('canvas') canvasRef!: ElementRef<HTMLCanvasElement>;\n\n  type = input.required<ClxChartType>();\n  data = input.required<ChartData>();\n  options = input<ChartOptions>({});\n  height = input<number | string>(300);\n  ariaLabel = input<string>();\n\n  // SOLUCIÓN AL ERROR: Añadimos el input loading\n  loading = input<boolean>(false);\n\n  private _chart?: Chart;\n  private _injector = inject(Injector);\n  private _resizeObserver?: ResizeObserver;\n\n  _hostHeight = computed(() =>\n    typeof this.height() === 'number' ? `${this.height()}px` : this.height()\n  );\n\n  ngAfterViewInit(): void {\n    this._createChart();\n\n    effect(() => {\n      const currentType = this.type();\n      const currentData = this.data();\n\n      if (this._chart) {\n        (this._chart.config as any).type = currentType;\n        this._chart.data = applyChartDefaults(currentType, currentData);\n        this._chart.update();\n      }\n    }, { injector: this._injector });\n\n    // Keeps the canvas's backing store in sync whenever its container actually changes size later\n    // (grid edit, window resize, sidebar toggle) — Chart.js doesn't watch this on its own.\n    const container = this.canvasRef.nativeElement.parentElement;\n    if (container && typeof ResizeObserver !== 'undefined') {\n      this._resizeObserver = new ResizeObserver(() => this._chart?.resize());\n      this._resizeObserver.observe(container);\n    }\n  }\n\n  private _createChart(): void {\n    const ctx = this.canvasRef.nativeElement.getContext('2d');\n    if (!ctx) return;\n\n    const type = untracked(() => this.type());\n    this._chart = new Chart(ctx, {\n      type,\n      data: applyChartDefaults(type, untracked(() => this.data())),\n      options: { ...(NO_SCALE_TYPES.includes(type) ? CLX_CHART_DEFAULTS_NO_SCALES : CLX_CHART_DEFAULTS), ...untracked(() => this.options()) },\n    });\n  }\n\n  ngOnDestroy(): void {\n    this._resizeObserver?.disconnect();\n    this._chart?.destroy();\n  }\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/codexly-ui.mjs

@@ -10,8 +10,6 @@ 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) {
@@ -16656,16 +16654,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  *  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 */ []));
+    /** Optional second line under the label (e.g. the customer's email under their name). */
+    sublabel = input(null, ...(ngDevMode ? [{ debugName: "sublabel" }] : /* 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: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.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 }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, 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 class="min-w-0">
+        <p class="text-sm text-clx-text-label truncate">{{ label() }}</p>
+        @if (sublabel()) {
+          <p class="text-xs text-clx-text-muted truncate">{{ sublabel() }}</p>
+        }
+      </div>
     </div>
     <span clx-badge [color]="statusColor()" variant="light" shape="pill" size="xs" class="shrink-0">
       {{ statusLabel() }}
@@ -16684,259 +16689,146 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     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 class="min-w-0">
+        <p class="text-sm text-clx-text-label truncate">{{ label() }}</p>
+        @if (sublabel()) {
+          <p class="text-xs text-clx-text-muted truncate">{{ sublabel() }}</p>
+        }
+      </div>
     </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).
- *
- *  Responsive: `columns` is the desktop column count; the grid itself halves it under 1024px and
- *  collapses to a single column under 640px (both breakpoints measured off its own host width via
- *  ResizeObserver, not the viewport — correct inside a narrow sidebar-pushed layout too). Below
- *  640px, pointer-drag reorder/resize is replaced by an up/down reorder button pair per item —
- *  CdkDrag's pointer events are unreliable with real fingers on a dense grid, and a 1-column layout
- *  has nothing to resize width-wise anyway. */
-class ClxDashboardGridComponent {
-    _themeSvc = inject(ClxThemeService);
-    _isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
-    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 */ []));
-    _container = viewChild('container', ...(ngDevMode ? [{ debugName: "_container" }] : /* istanbul ignore next */ []));
-    _hostWidth = signal(1280, ...(ngDevMode ? [{ debugName: "_hostWidth" }] : /* istanbul ignore next */ []));
-    _resizeObserver;
-    /** Below 640px: single column, no drag/resize (reorder buttons instead). 640-1024px: half the
-     *  desktop column count (min 2). 1024px+: the full `columns()` count. */
-    _isCompact = computed(() => this._hostWidth() < 640, ...(ngDevMode ? [{ debugName: "_isCompact" }] : /* istanbul ignore next */ []));
-    _effectiveColumns = computed(() => {
-        const w = this._hostWidth();
-        if (w < 640)
-            return 1;
-        if (w < 1024)
-            return Math.max(2, Math.floor(this.columns() / 2));
-        return this.columns();
-    }, ...(ngDevMode ? [{ debugName: "_effectiveColumns" }] : /* istanbul ignore next */ []));
-    _gridCols = computed(() => `repeat(${this._effectiveColumns()}, minmax(0, 1fr))`, ...(ngDevMode ? [{ debugName: "_gridCols" }] : /* istanbul ignore next */ []));
-    /** Editing gets a visibly distinct "canvas" — dashed border + dotted background + surface-2 tint
-     *  — so the grid reads as an editable panel, not bare page background with cards floating on it. */
-    _containerClass = computed(() => {
-        const radius = resolveContainerRadius(this._themeSvc.config().borderRadius);
-        if (!this.editable())
-            return `${radius} p-1`;
-        return `${radius} p-4 border-2 border-dashed border-clx-border bg-clx-surface-2`;
-    }, ...(ngDevMode ? [{ debugName: "_containerClass" }] : /* istanbul ignore next */ []));
-    _resizing = null;
-    constructor() {
-        effect((onCleanup) => {
-            const el = this._container()?.nativeElement;
-            if (!this._isBrowser || !el)
-                return;
-            this._hostWidth.set(el.clientWidth);
-            this._resizeObserver = new ResizeObserver(entries => {
-                const width = entries[0]?.contentRect.width;
-                if (width)
-                    this._hostWidth.set(width);
-            });
-            this._resizeObserver.observe(el);
-            onCleanup(() => this._resizeObserver?.disconnect());
-        });
-    }
-    ngOnDestroy() {
-        this._resizeObserver?.disconnect();
-    }
-    _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.
-    }
-    /** Compact-mode reorder (touch-friendly alternative to CdkDrag) — swap item at `index` with its
-     *  neighbor `delta` positions away (-1 = up/earlier, 1 = down/later). */
-    _moveBy(index, delta) {
-        const next = [...this.items()];
-        const target = index + delta;
-        if (target < 0 || target >= next.length)
-            return;
-        [next[index], next[target]] = [next[target], next[index]];
-        this.layoutChange.emit(next);
-    }
-    _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 }], viewQueries: [{ propertyName: "_container", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div #container [class]="_containerClass()">
-      <div
-        cdkDropList
-        [cdkDropListDisabled]="!editable() || _isCompact()"
-        (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; let i = $index) {
-          <div
-            cdkDrag
-            [cdkDragDisabled]="!editable() || _isCompact()"
-            [cdkDragData]="item"
-            (cdkDragMoved)="_onDragMoved($event)"
-            class="relative"
-            [class.cursor-grab]="editable() && !_isCompact()"
-            [style.grid-column]="_isCompact() ? 'span 1' : 'span ' + item.w"
-            [style.grid-row]="_isCompact() ? 'span 1' : 'span ' + item.h">
-
-            <ng-container
-              [ngTemplateOutlet]="_itemTemplate()?.templateRef ?? null"
-              [ngTemplateOutletContext]="{ $implicit: item }">
-            </ng-container>
-
-            @if (editable() && !_isCompact()) {
-              <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 z-10"
-                (pointerdown)="_startResize($event, item)">
-              </div>
-            }
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], 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 }] }] } });
 
-            @if (editable() && _isCompact()) {
-              <div class="absolute top-2 right-2 z-10 flex flex-col rounded-lg overflow-hidden border border-clx-border bg-clx-surface shadow-sm">
-                <button type="button" class="w-7 h-7 flex items-center justify-center disabled:opacity-30"
-                  [disabled]="i === 0" (click)="_moveBy(i, -1)" aria-label="Mover arriba">
-                  <span clx-icon name="keyboard_arrow_up" size="sm"></span>
-                </button>
-                <div class="h-px bg-clx-border-soft"></div>
-                <button type="button" class="w-7 h-7 flex items-center justify-center disabled:opacity-30"
-                  [disabled]="i === items().length - 1" (click)="_moveBy(i, 1)" aria-label="Mover abajo">
-                  <span clx-icon name="keyboard_arrow_down" size="sm"></span>
-                </button>
-              </div>
-            }
-          </div>
+/** Drop-in cell for a `clxCell` table column: product image + name/category on the left, price +
+ *  quantity sold on the right — e.g. a "top selling products" dashboard widget row. Mount it inside
+ *  `<ng-template clxCell let-row>` instead of hand-building the flex row each time. */
+class ClxTableProductCellComponent {
+    imageSrc = input(null, ...(ngDevMode ? [{ debugName: "imageSrc" }] : /* istanbul ignore next */ []));
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    category = input('', ...(ngDevMode ? [{ debugName: "category" }] : /* istanbul ignore next */ []));
+    price = input('', ...(ngDevMode ? [{ debugName: "price" }] : /* istanbul ignore next */ []));
+    soldQty = input('', ...(ngDevMode ? [{ debugName: "soldQty" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTableProductCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxTableProductCellComponent, isStandalone: true, selector: "clx-table-product-cell", inputs: { imageSrc: { classPropertyName: "imageSrc", publicName: "imageSrc", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: false, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: false, transformFunction: null }, soldQty: { classPropertyName: "soldQty", publicName: "soldQty", 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">
+      @if (imageSrc()) {
+        <img [src]="imageSrc()" [alt]="name()" class="w-9 h-9 rounded-lg object-cover shrink-0 bg-clx-surface-2" />
+      } @else {
+        <div class="w-9 h-9 rounded-lg shrink-0 bg-clx-surface-2"></div>
+      }
+      <div class="min-w-0">
+        <p class="text-sm text-clx-text-label truncate">{{ name() }}</p>
+        @if (category()) {
+          <p class="text-xs text-clx-text-muted truncate">{{ category() }}</p>
         }
       </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"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    <div class="text-right shrink-0">
+      <p class="text-sm font-semibold text-clx-text tabular-nums">{{ price() }}</p>
+      @if (soldQty()) {
+        <p class="text-xs text-clx-text-muted">{{ soldQty() }} vendidos</p>
+      }
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxDashboardGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTableProductCellComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'clx-dashboard-grid',
+                    selector: 'clx-table-product-cell',
                     standalone: true,
-                    imports: [NgTemplateOutlet, DragDropModule, ClxIconComponent],
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { class: 'block w-full' },
+                    host: { class: 'flex items-center justify-between gap-3 w-full' },
                     template: `
-    <div #container [class]="_containerClass()">
-      <div
-        cdkDropList
-        [cdkDropListDisabled]="!editable() || _isCompact()"
-        (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; let i = $index) {
-          <div
-            cdkDrag
-            [cdkDragDisabled]="!editable() || _isCompact()"
-            [cdkDragData]="item"
-            (cdkDragMoved)="_onDragMoved($event)"
-            class="relative"
-            [class.cursor-grab]="editable() && !_isCompact()"
-            [style.grid-column]="_isCompact() ? 'span 1' : 'span ' + item.w"
-            [style.grid-row]="_isCompact() ? 'span 1' : 'span ' + item.h">
-
-            <ng-container
-              [ngTemplateOutlet]="_itemTemplate()?.templateRef ?? null"
-              [ngTemplateOutletContext]="{ $implicit: item }">
-            </ng-container>
-
-            @if (editable() && !_isCompact()) {
-              <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 z-10"
-                (pointerdown)="_startResize($event, item)">
-              </div>
-            }
-
-            @if (editable() && _isCompact()) {
-              <div class="absolute top-2 right-2 z-10 flex flex-col rounded-lg overflow-hidden border border-clx-border bg-clx-surface shadow-sm">
-                <button type="button" class="w-7 h-7 flex items-center justify-center disabled:opacity-30"
-                  [disabled]="i === 0" (click)="_moveBy(i, -1)" aria-label="Mover arriba">
-                  <span clx-icon name="keyboard_arrow_up" size="sm"></span>
-                </button>
-                <div class="h-px bg-clx-border-soft"></div>
-                <button type="button" class="w-7 h-7 flex items-center justify-center disabled:opacity-30"
-                  [disabled]="i === items().length - 1" (click)="_moveBy(i, 1)" aria-label="Mover abajo">
-                  <span clx-icon name="keyboard_arrow_down" size="sm"></span>
-                </button>
-              </div>
-            }
-          </div>
+    <div class="flex items-center gap-2.5 min-w-0">
+      @if (imageSrc()) {
+        <img [src]="imageSrc()" [alt]="name()" class="w-9 h-9 rounded-lg object-cover shrink-0 bg-clx-surface-2" />
+      } @else {
+        <div class="w-9 h-9 rounded-lg shrink-0 bg-clx-surface-2"></div>
+      }
+      <div class="min-w-0">
+        <p class="text-sm text-clx-text-label truncate">{{ name() }}</p>
+        @if (category()) {
+          <p class="text-xs text-clx-text-muted truncate">{{ category() }}</p>
         }
       </div>
     </div>
+    <div class="text-right shrink-0">
+      <p class="text-sm font-semibold text-clx-text tabular-nums">{{ price() }}</p>
+      @if (soldQty()) {
+        <p class="text-xs text-clx-text-muted">{{ soldQty() }} vendidos</p>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { imageSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageSrc", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: false }] }], price: [{ type: i0.Input, args: [{ isSignal: true, alias: "price", required: false }] }], soldQty: [{ type: i0.Input, args: [{ isSignal: true, alias: "soldQty", required: false }] }] } });
+
+/** A ranking: color dot + label on the left, optional trend badge + value on the right — e.g. "Top
+ *  selling categories" or "Sales by channel" on a dashboard. Composes ClxListComponent/
+ *  ClxListItemComponent (their clxLead/clxTrail slots) rather than reinventing list chrome. */
+class ClxRankedListComponent {
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    dotClass(color) {
+        return resolveColor(color).bg;
+    }
+    trendColor(direction) {
+        return direction === 'up' ? 'green' : direction === 'down' ? 'red' : 'slate';
+    }
+    trendIcon(direction) {
+        return direction === 'up' ? 'arrow_upward' : direction === 'down' ? 'arrow_downward' : 'remove';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxRankedListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxRankedListComponent, isStandalone: true, selector: "clx-ranked-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <clx-list [color]="color()">
+      @for (item of items(); track item.label) {
+        <clx-list-item [label]="item.label">
+          <span clxLead class="w-2 h-2 rounded-full shrink-0" [class]="dotClass(item.colorDot)"></span>
+          <div clxTrail class="flex items-center gap-2">
+            @if (item.trend) {
+              <span clx-badge size="xs" variant="light" shape="pill" [color]="trendColor(item.trendDirection)">
+                <span clx-icon [name]="trendIcon(item.trendDirection)" size="xxs"></span>
+                {{ item.trend }}
+              </span>
+            }
+            <span class="text-sm font-semibold text-clx-text tabular-nums">{{ item.value }}</span>
+          </div>
+        </clx-list-item>
+      }
+    </clx-list>
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxListComponent, selector: "clx-list", inputs: ["color", "variant", "size", "numbered"] }, { kind: "component", type: ClxListItemComponent, selector: "clx-list-item", inputs: ["label", "sublabel", "wrapSublabel", "icon", "meta", "metaColor", "disabled"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxRankedListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clx-ranked-list',
+                    standalone: true,
+                    imports: [ClxListComponent, ClxListItemComponent, ClxBadgeComponent, ClxIconComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <clx-list [color]="color()">
+      @for (item of items(); track item.label) {
+        <clx-list-item [label]="item.label">
+          <span clxLead class="w-2 h-2 rounded-full shrink-0" [class]="dotClass(item.colorDot)"></span>
+          <div clxTrail class="flex items-center gap-2">
+            @if (item.trend) {
+              <span clx-badge size="xs" variant="light" shape="pill" [color]="trendColor(item.trendDirection)">
+                <span clx-icon [name]="trendIcon(item.trendDirection)" size="xxs"></span>
+                {{ item.trend }}
+              </span>
+            }
+            <span class="text-sm font-semibold text-clx-text tabular-nums">{{ item.value }}</span>
+          </div>
+        </clx-list-item>
+      }
+    </clx-list>
   `,
                 }]
-        }], ctorParameters: () => [], 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 }] }], _container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }] } });
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
 const PRODUCT_TAG_LABEL = {
     'new': 'Nuevo',
@@ -19541,5 +19433,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, 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 { 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, ClxRankedListComponent, ClxRatingComponent, ClxSearchComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSocialIconComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableActionsComponent, ClxTableComponent, ClxTableProductCellComponent, 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