codexly-ui 0.15.13 → 0.15.15

package/fesm2022/codexly-ui-charts.mjs

@@ -124,6 +124,7 @@ class ClxChartComponent {
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     _chart;
     _injector = inject(Injector);
+    _resizeObserver;
     _hostHeight = computed(() => typeof this.height() === 'number' ? `${this.height()}px` : this.height(), ...(ngDevMode ? [{ debugName: "_hostHeight" }] : /* istanbul ignore next */ []));
     ngAfterViewInit() {
         this._createChart();
@@ -136,6 +137,22 @@ 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());
+        const container = this.canvasRef.nativeElement.parentElement;
+        if (container && typeof ResizeObserver !== 'undefined') {
+            this._resizeObserver = new ResizeObserver(() => this._chart?.resize());
+            this._resizeObserver.observe(container);
+        }
     }
     _createChart() {
         const ctx = this.canvasRef.nativeElement.getContext('2d');
@@ -149,6 +166,7 @@ class ClxChartComponent {
         });
     }
     ngOnDestroy() {
+        this._resizeObserver?.disconnect();
         this._chart?.destroy();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });

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\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\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._chart?.destroy();\n  }\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAGO,MAAM,4BAA4B,GAAiB;AACxD,IAAA,UAAU,EAAE,IAAI;AAChB,IAAA,mBAAmB,EAAE,KAAK;AAC1B,IAAA,IAAI,EAAE;AACJ,QAAA,MAAM,EAAE,6DAA6D;AACrE,QAAA,IAAI,EAAE,EAAE;AACT,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,MAAM,EAAG,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE;AAC5D,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;AAC3B,KAAA;CACc;AAEV,MAAM,kBAAkB,GAAiB;AAC9C,IAAA,UAAU,EAAE,IAAI;AAChB,IAAA,mBAAmB,EAAE,KAAK;AAC1B,IAAA,IAAI,EAAE;AACJ,QAAA,MAAM,EAAE,6DAA6D;AACrE,QAAA,IAAI,EAAE,EAAE;AACT,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,MAAM,EAAE;AACN,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,KAAK,EAAE;AACR,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE;AACV,SAAA;AACF,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,CAAC,EAAE;AACD,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,IAAI,EAAE;AACJ,gBAAA,OAAO,EAAE;AACV,aAAA;AACD,YAAA,MAAM,EAAE;gBACN,KAAK,EAAE,aAAa,CAAC;AACtB,aAAA;AACD,YAAA,KAAK,EAAE;gBACL,KAAK,EAAE,aAAa,CAAC;AACtB;AACF,SAAA;AACD,QAAA,CAAC,EAAE;AACD,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,WAAW,EAAE,IAAI;AACjB,YAAA,IAAI,EAAE;AACJ,gBAAA,OAAO,EAAE,IAAI;gBACb,KAAK,EAAE,aAAa,CAAC;AACtB,aAAA;AACD,YAAA,MAAM,EAAE;gBACN,KAAK,EAAE,aAAa,CAAC;AACtB,aAAA;AACD,YAAA,KAAK,EAAE;gBACL,KAAK,EAAE,aAAa,CAAC;AACtB;AACF,SAAA;AACF,KAAA;CACc;AAEV,MAAM,iBAAiB,GAAa,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC;AAEvE;AACO,MAAM,uBAAuB,GAAa,iBAAiB,CAAC,GAAG,CAAC,GAAG,IAAI,CAAA,EAAG,GAAG,CAAA,EAAA,CAAI,CAAC;AAEzF,MAAM,UAAU,GAAgB,CAAC,MAAM,EAAE,OAAO,CAAC;AACjD,MAAM,iBAAiB,GAAgB,CAAC,KAAK,EAAE,UAAU,EAAE,WAAW,CAAC;AAEvE,SAAS,QAAQ,CAAC,GAAa,EAAA;AAC7B,IAAA,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;AAClB,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;AACrC,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QAC7C,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7B;AACA,IAAA,OAAO,CAAC;AACV;AAEM,SAAU,kBAAkB,CAAC,IAAe,EAAE,IAAe,EAAA;AACjE,IAAA,MAAM,OAAO,GAAG,QAAQ,CAAC,iBAAiB,CAAC;AAC3C,IAAA,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,CAAC,GAAG,IAAI,CAAA,EAAG,GAAG,CAAA,EAAA,CAAI,CAAC;AACnD,IAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,KAAI;QAC3C,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC;QACzC,MAAM,KAAK,GAAG,YAAY,CAAC,CAAC,GAAG,YAAY,CAAC,MAAM,CAAC;AAEnD,QAAA,IAAI,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;AACpC,YAAA,MAAM,KAAK,GAAI,EAAE,CAAC,IAAiB,CAAC,MAAM;YAC1C,OAAO;AACL,gBAAA,GAAG,EAAE;AACL,gBAAA,eAAe,EAAE,EAAE,CAAC,eAAe,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KACxE,OAAO,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAC5B;AACD,gBAAA,WAAW,EAAE,EAAE,CAAC,WAAW,IAAI,MAAM;AACrC,gBAAA,WAAW,EAAG,EAAU,CAAC,WAAW,IAAI,CAAC;aAC1C;QACH;AAEA,QAAA,IAAI,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;YAC7B,OAAO;AACL,gBAAA,GAAG,EAAE;AACL,gBAAA,WAAW,EAAW,EAAE,CAAC,WAAW,IAAI,KAAK;AAC7C,gBAAA,eAAe,EAAO,EAAE,CAAC,eAAe,IAAI,KAAK;AACjD,gBAAA,oBAAoB,EAAG,EAAU,CAAC,oBAAoB,IAAI,KAAK;AAC/D,gBAAA,IAAI,EAAmB,EAAU,CAAC,IAAI,KAAK,IAAI,KAAK,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC;AAC1E,gBAAA,OAAO,EAAgB,EAAU,CAAC,OAAO,IAAI,GAAG;aACjD;QACH;QAEA,OAAO;AACL,YAAA,GAAG,EAAE;AACL,YAAA,eAAe,EAAK,EAAE,CAAC,eAAe,IAAI,KAAK;AAC/C,YAAA,WAAW,EAAS,EAAE,CAAC,WAAW,IAAI,KAAK;AAC3C,YAAA,WAAW,EAAU,EAAU,CAAC,WAAW,IAAI,CAAC;AAChD,YAAA,aAAa,EAAQ,EAAU,CAAC,aAAa,IAAI,GAAG;AACpD,YAAA,kBAAkB,EAAG,EAAU,CAAC,kBAAkB,IAAI,GAAG;SAC1D;AACH,IAAA,CAAC,CAAC;AAEF,IAAA,OAAO,EAAE,GAAG,IAAI,EAAE,QAAQ,EAAe;AAC3C;;AChFA,KAAK,CAAC,QAAQ,CACZ,cAAc,EAAE,aAAa,EAAE,aAAa,EAC5C,kBAAkB,EAAE,eAAe,EAAE,mBAAmB,EACxD,aAAa,EAAE,WAAW,EAAE,iBAAiB,EAC7C,UAAU,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EACjD,MAAM,EAAE,OAAO,EAAE,MAAM,CACxB;AAED,MAAM,cAAc,GAAG,CAAC,UAAU,EAAE,KAAK,EAAE,WAAW,CAAC;MAmC1C,iBAAiB,CAAA;AACP,IAAA,SAAS;AAE9B,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,0EAAgB;AACrC,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,0EAAa;AAClC,IAAA,OAAO,GAAG,KAAK,CAAe,EAAE,8EAAC;AACjC,IAAA,MAAM,GAAG,KAAK,CAAkB,GAAG,6EAAC;IACpC,SAAS,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;;AAG3B,IAAA,OAAO,GAAG,KAAK,CAAU,KAAK,8EAAC;AAEvB,IAAA,MAAM;AACN,IAAA,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC;AAEpC,IAAA,WAAW,GAAG,QAAQ,CAAC,MACrB,OAAO,IAAI,CAAC,MAAM,EAAE,KAAK,QAAQ,GAAG,CAAA,EAAG,IAAI,CAAC,MAAM,EAAE,CAAA,EAAA,CAAI,GAAG,IAAI,CAAC,MAAM,EAAE,kFACzE;IAED,eAAe,GAAA;QACb,IAAI,CAAC,YAAY,EAAE;QAEnB,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,EAAE;AAC/B,YAAA,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,EAAE;AAE/B,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE;gBACd,IAAI,CAAC,MAAM,CAAC,MAAc,CAAC,IAAI,GAAG,WAAW;gBAC9C,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,kBAAkB,CAAC,WAAW,EAAE,WAAW,CAAC;AAC/D,gBAAA,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;YACtB;QACF,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC;IAClC;IAEQ,YAAY,GAAA;AAClB,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,UAAU,CAAC,IAAI,CAAC;AACzD,QAAA,IAAI,CAAC,GAAG;YAAE;AAEV,QAAA,MAAM,IAAI,GAAG,SAAS,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;AACzC,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI,KAAK,CAAC,GAAG,EAAE;YAC3B,IAAI;AACJ,YAAA,IAAI,EAAE,kBAAkB,CAAC,IAAI,EAAE,SAAS,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;AAC5D,YAAA,OAAO,EAAE,EAAE,IAAI,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,4BAA4B,GAAG,kBAAkB,CAAC,EAAE,GAAG,SAAS,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE;AACxI,SAAA,CAAC;IACJ;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE;IACxB;wGAhDW,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,QAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EA9BlB;;;;;;;;;;AAUT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0TAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;4FAoBU,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAjC7B,SAAS;+BACE,WAAW,EAAA,UAAA,EACT,IAAI,EAAA,QAAA,EACN;;;;;;;;;;AAUT,EAAA,CAAA,EAAA,aAAA,EAiBc,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,0TAAA,CAAA,EAAA;;sBAG9C,SAAS;uBAAC,QAAQ;;;ACrFrB;;AAEG;;;;"}
+{"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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"}

package/package.json

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

package/types/codexly-ui-charts.d.ts

@@ -24,6 +24,7 @@ declare class ClxChartComponent implements AfterViewInit, OnDestroy {
     loading: _angular_core.InputSignal<boolean>;
     private _chart?;
     private _injector;
+    private _resizeObserver?;
     _hostHeight: _angular_core.Signal<string | number>;
     ngAfterViewInit(): void;
     private _createChart;

package/types/codexly-ui.d.ts

@@ -120,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>;
@@ -145,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>;
@@ -205,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>;
@@ -291,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<"none" | "sm" | "md" | "lg" | "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>;
@@ -2450,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>;
@@ -2804,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. */
@@ -3356,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[];
@@ -3584,7 +3584,7 @@ declare class ClxStatCardComponent {
     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-green-500" | "text-red-500" | "text-clx-text-subtle">;
+    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[]>;
@@ -4365,7 +4365,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;