yw-charts-library 0.0.7 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/fesm2022/yw-charts-library.mjs +292 -212
  2. package/fesm2022/yw-charts-library.mjs.map +1 -1
  3. package/index.d.ts +142 -23
  4. package/package.json +1 -1
  5. package/styles/styles.scss +248 -0
package/fesm2022/yw-charts-library.mjs CHANGED
@@ -147,7 +147,9 @@ const AVAILABLE_CHART_TYPES = [
147
147
  title: 'Nuevo Gráfico de Barras',
148
148
  xLabelText: 'Categoría',
149
149
  yLabelText: 'Total',
150
+ joins: true,
150
151
  configData: {
152
+ configJoins: [],
151
153
  tooltip: { enable: true },
152
154
  xAxis: '',
153
155
  yAxis: ''
@@ -165,7 +167,9 @@ const AVAILABLE_CHART_TYPES = [
165
167
  title: 'Nuevo Gráfico de Líneas',
166
168
  xLabelText: 'Periodo',
167
169
  yLabelText: 'Monto',
170
+ joins: true,
168
171
  configData: {
172
+ configJoins: [],
169
173
  tooltip: { enable: true },
170
174
  xAxis: '',
171
175
  yAxis: ''
@@ -188,7 +192,9 @@ const AVAILABLE_CHART_TYPES = [
188
192
  labelPosition: 'Outside',
189
193
  valueDisplayMode: 'percentage',
190
194
  explodeSlice: false,
195
+ joins: true,
191
196
  configData: {
197
+ configJoins: [],
192
198
  tooltip: { enable: true },
193
199
  xAxis: '',
194
200
  yAxis: ''
@@ -211,7 +217,9 @@ const AVAILABLE_CHART_TYPES = [
211
217
  startAngle: 240,
212
218
  endAngle: 120,
213
219
  showTicks: true,
220
+ joins: true,
214
221
  configData: {
222
+ configJoins: [],
215
223
  tooltip: { enable: true },
216
224
  yAxis: ''
217
225
  }
@@ -229,7 +237,9 @@ const AVAILABLE_CHART_TYPES = [
229
237
  xLabelText: 'Categoría',
230
238
  yLabelText: 'Total',
231
239
  opacity: '0.5',
240
+ joins: true,
232
241
  configData: {
242
+ configJoins: [],
233
243
  tooltip: { enable: true },
234
244
  xAxis: '',
235
245
  yAxis: ''
@@ -1066,15 +1076,25 @@ class LineChartSyncfusionComponent {
1066
1076
  if (this.dataLabel && this.labelData) {
1067
1077
  this.labelData.dataLabel = this.dataLabel;
1068
1078
  }
1069
- this.cdr.markForCheck();
1070
- // 2. Encendemos el gráfico en el siguiente ciclo con los datos listos
1071
- setTimeout(() => {
1072
- // Validamos que existan series válidas para pintar
1073
- if (this.dataChartParse && this.dataChartParse.length > 0) {
1079
+ // 2. Verificamos si hay datos válidos antes de encender la bandera
1080
+ const hasValidData = this.validSeriesList.length > 0;
1081
+ if (!hasValidData) {
1082
+ this.isChartReady = false;
1083
+ this.cdr.markForCheck();
1084
+ return;
1085
+ }
1086
+ // 3. Si ya estaba listo, solo actualizamos sin desmontar para que sea instantáneo
1087
+ if (this.isChartReady) {
1088
+ this.cdr.markForCheck();
1089
+ }
1090
+ else {
1091
+ // 4. Si estaba apagado, lo encendemos en el próximo microciclo del navegador
1092
+ // usando requestAnimationFrame para evitar el error de Syncfusion y que cargue fluido
1093
+ requestAnimationFrame(() => {
1074
1094
  this.isChartReady = true;
1075
1095
  this.cdr.markForCheck();
1076
- }
1077
- });
1096
+ });
1097
+ }
1078
1098
  }
1079
1099
  }
1080
1100
  // Mantén tu getter de validSeriesList intacto
@@ -1093,7 +1113,7 @@ class LineChartSyncfusionComponent {
1093
1113
  DateTimeService,
1094
1114
  MultiColoredLineSeriesService,
1095
1115
  DataLabelService,
1096
- ], viewQueries: [{ propertyName: "chartInstance", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"control-section\" *ngIf=\"isChartReady && validSeriesList.length > 0\">\r\n <ejs-chart #chart \r\n \r\n [id]=\"idComponent\" \r\n [primaryXAxis]=\"labelData.axisX\" \r\n [primaryYAxis]=\"labelData.axisY\"\r\n [title]=\"labelData.title\" \r\n (pointRender)=\"pointRender($event)\" \r\n height=\"100%\" width=\"100%\"\r\n [legendSettings]=\"labelData.legendSettings\" \r\n background=\"transparent\" \r\n [titleStyle]=\"labelData.titleStyle\"\r\n [border]=\"labelData.border\" \r\n [chartArea]=\"labelData.chartArea\" \r\n (axisLabelRender)=\"axisLabelRender($event)\"\r\n [palettes]=\"labelData.palettes\" \r\n [tooltip]=\"labelData.tooltip\">\r\n\r\n <e-series-collection>\r\n @for (series of dataChartParse; track $index) {\r\n <pre>{{ series | json }}</pre>\r\n <e-series \r\n [dataSource]=\"series.dataSource\" \r\n type=\"MultiColoredLine\" \r\n xName=\"x\" \r\n yName=\"y\"\r\n pointColorMapping=\"color\"\r\n [dashArray]=\"series.dashArray\"\r\n [name]=\"series.name\" \r\n [width]=\"series.widthLine\" \r\n [marker]=\"labelData.marker\">\r\n </e-series>\r\n }\r\n </e-series-collection>\r\n\r\n </ejs-chart>\r\n\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden}.control-section{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden;background:#fff;border-radius:8px;flex-grow:1}:host ::ng-deep ejs-chart{display:block;width:100%!important;height:100%!important;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ChartModule }, { kind: "component", type: i2.ChartComponent, selector: "ejs-chart", inputs: ["accessibility", "allowExport", "allowMultiSelection", "annotations", "axes", "background", "backgroundImage", "border", "chartArea", "columns", "crosshair", "currencyCode", "dataSource", "description", "enableAnimation", "enableAutoIntervalOnBothAxis", "enableCanvas", "enableExport", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "enableSideBySidePlacement", "focusBorderColor", "focusBorderMargin", "focusBorderWidth", "height", "highlightColor", "highlightMode", "highlightPattern", "indicators", "isMultiSelect", "isTransposed", "legendSettings", "locale", "margin", "palettes", "primaryXAxis", "primaryYAxis", "rangeColorSettings", "rows", "selectedDataIndexes", "selectionMode", "selectionPattern", "series", "subTitle", "subTitleStyle", "tabIndex", "theme", "title", "titleStyle", "tooltip", "useGroupingSeparator", "width", "zoomSettings"], outputs: ["afterExport", "animationComplete", "annotationRender", "axisLabelClick", "axisLabelRender", "axisMultiLabelRender", "axisRangeCalculated", "beforeExport", "beforePrint", "beforeResize", "chartDoubleClick", "chartMouseClick", "chartMouseDown", "chartMouseLeave", "chartMouseMove", "chartMouseUp", "drag", "dragComplete", "dragEnd", "dragStart", "legendClick", "legendRender", "load", "loaded", "multiLevelLabelClick", "onZooming", "pointClick", "pointDoubleClick", "pointMove", "pointRender", "resized", "scrollChanged", "scrollEnd", "scrollStart", "selectionComplete", "seriesRender", "sharedTooltipRender", "textRender", "tooltipRender", "zoomComplete", "dataSourceChange"] }, { kind: "directive", type: i2.SeriesDirective, selector: "e-series-collection>e-series", inputs: ["accessibility", "animation", "bearFillColor", "binInterval", "border", "boxPlotMode", "bullFillColor", "cardinalSplineTension", "close", "colorName", "columnFacet", "columnSpacing", "columnWidth", "columnWidthInPixel", "connector", "cornerRadius", "dashArray", "dataSource", "dragSettings", "drawType", "emptyPointSettings", "enableComplexProperty", "enableSolidCandles", "enableTooltip", "errorBar", "fill", "groupName", "high", "intermediateSumIndexes", "isClosed", "legendImageUrl", "legendShape", "low", "marker", "maxRadius", "minRadius", "name", "negativeFillColor", "noRisers", "nonHighlightStyle", "opacity", "open", "paretoOptions", "pointColorMapping", "query", "segmentAxis", "segments", "selectionStyle", "showMean", "showNormalDistribution", "size", "splineType", "stackingGroup", "step", "sumIndexes", "summaryFillColor", "tooltipFormat", "tooltipMappingName", "trendlines", "type", "unSelectedStyle", "visible", "volume", "width", "xAxisName", "xName", "yAxisName", "yName", "zOrder"] }, { kind: "directive", type: i2.SeriesCollectionDirective, selector: "ej-chart>e-series-collection" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] }); }
1116
+ ], viewQueries: [{ propertyName: "chartInstance", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"control-section\" *ngIf=\"isChartReady\">\r\n <ejs-chart #chart \r\n \r\n [id]=\"idComponent\" \r\n [primaryXAxis]=\"labelData.axisX\" \r\n [primaryYAxis]=\"labelData.axisY\"\r\n [title]=\"labelData.title\" \r\n (pointRender)=\"pointRender($event)\" \r\n height=\"100%\" width=\"100%\"\r\n [legendSettings]=\"labelData.legendSettings\" \r\n background=\"transparent\" \r\n [titleStyle]=\"labelData.titleStyle\"\r\n [border]=\"labelData.border\" \r\n [chartArea]=\"labelData.chartArea\" \r\n (axisLabelRender)=\"axisLabelRender($event)\"\r\n [palettes]=\"labelData.palettes\" \r\n [tooltip]=\"labelData.tooltip\">\r\n\r\n <e-series-collection>\r\n @for (series of dataChartParse; track $index) {\r\n <pre>{{ series | json }}</pre>\r\n <e-series \r\n [dataSource]=\"series.dataSource\" \r\n type=\"MultiColoredLine\" \r\n xName=\"x\" \r\n yName=\"y\"\r\n pointColorMapping=\"color\"\r\n [dashArray]=\"series.dashArray\"\r\n [name]=\"series.name\" \r\n [width]=\"series.widthLine\" \r\n [marker]=\"labelData.marker\">\r\n </e-series>\r\n }\r\n </e-series-collection>\r\n\r\n </ejs-chart>\r\n\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden}.control-section{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden;background:#fff;border-radius:8px;flex-grow:1}:host ::ng-deep ejs-chart{display:block;width:100%!important;height:100%!important;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ChartModule }, { kind: "component", type: i2.ChartComponent, selector: "ejs-chart", inputs: ["accessibility", "allowExport", "allowMultiSelection", "annotations", "axes", "background", "backgroundImage", "border", "chartArea", "columns", "crosshair", "currencyCode", "dataSource", "description", "enableAnimation", "enableAutoIntervalOnBothAxis", "enableCanvas", "enableExport", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "enableSideBySidePlacement", "focusBorderColor", "focusBorderMargin", "focusBorderWidth", "height", "highlightColor", "highlightMode", "highlightPattern", "indicators", "isMultiSelect", "isTransposed", "legendSettings", "locale", "margin", "palettes", "primaryXAxis", "primaryYAxis", "rangeColorSettings", "rows", "selectedDataIndexes", "selectionMode", "selectionPattern", "series", "subTitle", "subTitleStyle", "tabIndex", "theme", "title", "titleStyle", "tooltip", "useGroupingSeparator", "width", "zoomSettings"], outputs: ["afterExport", "animationComplete", "annotationRender", "axisLabelClick", "axisLabelRender", "axisMultiLabelRender", "axisRangeCalculated", "beforeExport", "beforePrint", "beforeResize", "chartDoubleClick", "chartMouseClick", "chartMouseDown", "chartMouseLeave", "chartMouseMove", "chartMouseUp", "drag", "dragComplete", "dragEnd", "dragStart", "legendClick", "legendRender", "load", "loaded", "multiLevelLabelClick", "onZooming", "pointClick", "pointDoubleClick", "pointMove", "pointRender", "resized", "scrollChanged", "scrollEnd", "scrollStart", "selectionComplete", "seriesRender", "sharedTooltipRender", "textRender", "tooltipRender", "zoomComplete", "dataSourceChange"] }, { kind: "directive", type: i2.SeriesDirective, selector: "e-series-collection>e-series", inputs: ["accessibility", "animation", "bearFillColor", "binInterval", "border", "boxPlotMode", "bullFillColor", "cardinalSplineTension", "close", "colorName", "columnFacet", "columnSpacing", "columnWidth", "columnWidthInPixel", "connector", "cornerRadius", "dashArray", "dataSource", "dragSettings", "drawType", "emptyPointSettings", "enableComplexProperty", "enableSolidCandles", "enableTooltip", "errorBar", "fill", "groupName", "high", "intermediateSumIndexes", "isClosed", "legendImageUrl", "legendShape", "low", "marker", "maxRadius", "minRadius", "name", "negativeFillColor", "noRisers", "nonHighlightStyle", "opacity", "open", "paretoOptions", "pointColorMapping", "query", "segmentAxis", "segments", "selectionStyle", "showMean", "showNormalDistribution", "size", "splineType", "stackingGroup", "step", "sumIndexes", "summaryFillColor", "tooltipFormat", "tooltipMappingName", "trendlines", "type", "unSelectedStyle", "visible", "volume", "width", "xAxisName", "xName", "yAxisName", "yName", "zOrder"] }, { kind: "directive", type: i2.SeriesCollectionDirective, selector: "ej-chart>e-series-collection" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] }); }
1097
1117
  }
1098
1118
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: LineChartSyncfusionComponent, decorators: [{
1099
1119
  type: Component,
@@ -1105,7 +1125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
1105
1125
  DateTimeService,
1106
1126
  MultiColoredLineSeriesService,
1107
1127
  DataLabelService,
1108
- ], template: "<div class=\"control-section\" *ngIf=\"isChartReady && validSeriesList.length > 0\">\r\n <ejs-chart #chart \r\n \r\n [id]=\"idComponent\" \r\n [primaryXAxis]=\"labelData.axisX\" \r\n [primaryYAxis]=\"labelData.axisY\"\r\n [title]=\"labelData.title\" \r\n (pointRender)=\"pointRender($event)\" \r\n height=\"100%\" width=\"100%\"\r\n [legendSettings]=\"labelData.legendSettings\" \r\n background=\"transparent\" \r\n [titleStyle]=\"labelData.titleStyle\"\r\n [border]=\"labelData.border\" \r\n [chartArea]=\"labelData.chartArea\" \r\n (axisLabelRender)=\"axisLabelRender($event)\"\r\n [palettes]=\"labelData.palettes\" \r\n [tooltip]=\"labelData.tooltip\">\r\n\r\n <e-series-collection>\r\n @for (series of dataChartParse; track $index) {\r\n <pre>{{ series | json }}</pre>\r\n <e-series \r\n [dataSource]=\"series.dataSource\" \r\n type=\"MultiColoredLine\" \r\n xName=\"x\" \r\n yName=\"y\"\r\n pointColorMapping=\"color\"\r\n [dashArray]=\"series.dashArray\"\r\n [name]=\"series.name\" \r\n [width]=\"series.widthLine\" \r\n [marker]=\"labelData.marker\">\r\n </e-series>\r\n }\r\n </e-series-collection>\r\n\r\n </ejs-chart>\r\n\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden}.control-section{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden;background:#fff;border-radius:8px;flex-grow:1}:host ::ng-deep ejs-chart{display:block;width:100%!important;height:100%!important;flex-grow:1}\n"] }]
1128
+ ], template: "<div class=\"control-section\" *ngIf=\"isChartReady\">\r\n <ejs-chart #chart \r\n \r\n [id]=\"idComponent\" \r\n [primaryXAxis]=\"labelData.axisX\" \r\n [primaryYAxis]=\"labelData.axisY\"\r\n [title]=\"labelData.title\" \r\n (pointRender)=\"pointRender($event)\" \r\n height=\"100%\" width=\"100%\"\r\n [legendSettings]=\"labelData.legendSettings\" \r\n background=\"transparent\" \r\n [titleStyle]=\"labelData.titleStyle\"\r\n [border]=\"labelData.border\" \r\n [chartArea]=\"labelData.chartArea\" \r\n (axisLabelRender)=\"axisLabelRender($event)\"\r\n [palettes]=\"labelData.palettes\" \r\n [tooltip]=\"labelData.tooltip\">\r\n\r\n <e-series-collection>\r\n @for (series of dataChartParse; track $index) {\r\n <pre>{{ series | json }}</pre>\r\n <e-series \r\n [dataSource]=\"series.dataSource\" \r\n type=\"MultiColoredLine\" \r\n xName=\"x\" \r\n yName=\"y\"\r\n pointColorMapping=\"color\"\r\n [dashArray]=\"series.dashArray\"\r\n [name]=\"series.name\" \r\n [width]=\"series.widthLine\" \r\n [marker]=\"labelData.marker\">\r\n </e-series>\r\n }\r\n </e-series-collection>\r\n\r\n </ejs-chart>\r\n\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden}.control-section{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden;background:#fff;border-radius:8px;flex-grow:1}:host ::ng-deep ejs-chart{display:block;width:100%!important;height:100%!important;flex-grow:1}\n"] }]
1109
1129
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { chartInstance: [{
1110
1130
  type: ViewChild,
1111
1131
  args: ['chart']
@@ -1645,6 +1665,7 @@ class BarChartSyncfusionComponent {
1645
1665
  }
1646
1666
  ngOnInit() {
1647
1667
  this.updateParsedData();
1668
+ console.log('config::::', this.config);
1648
1669
  }
1649
1670
  ngOnChanges(changes) {
1650
1671
  if (changes['chartData'] || changes['config']) {
@@ -1822,15 +1843,25 @@ class BarChartSyncfusionComponent {
1822
1843
  if (this.dataLabel && this.labelData) {
1823
1844
  this.labelData.dataLabel = this.dataLabel;
1824
1845
  }
1825
- this.cdr.markForCheck();
1826
- // 2. Encendemos el gráfico en el siguiente ciclo con los datos listos
1827
- setTimeout(() => {
1828
- // Validamos que existan series válidas para pintar
1829
- if (this.dataChartParse && this.dataChartParse.length > 0) {
1846
+ // 2. Verificamos si hay datos válidos antes de encender la bandera
1847
+ const hasValidData = this.validSeriesList.length > 0;
1848
+ if (!hasValidData) {
1849
+ this.isChartReady = false;
1850
+ this.cdr.markForCheck();
1851
+ return;
1852
+ }
1853
+ // 3. Si ya estaba listo, solo actualizamos sin desmontar para que sea instantáneo
1854
+ if (this.isChartReady) {
1855
+ this.cdr.markForCheck();
1856
+ }
1857
+ else {
1858
+ // 4. Si estaba apagado, lo encendemos en el próximo microciclo del navegador
1859
+ // usando requestAnimationFrame para evitar el error de Syncfusion y que cargue fluido
1860
+ requestAnimationFrame(() => {
1830
1861
  this.isChartReady = true;
1831
1862
  this.cdr.markForCheck();
1832
- }
1833
- });
1863
+ });
1864
+ }
1834
1865
  }
1835
1866
  }
1836
1867
  // Mantén tu getter de validSeriesList intacto
@@ -1847,7 +1878,7 @@ class BarChartSyncfusionComponent {
1847
1878
  CategoryService,
1848
1879
  TooltipService,
1849
1880
  LegendService,
1850
- ], viewQueries: [{ propertyName: "chartInstance", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <div class=\"chart-scroll-container\"> -->\r\n\r\n<div class=\"control-section\" *ngIf=\"isChartReady && validSeriesList.length > 0\">\r\n <ejs-chart \r\n [id]=\"idComponent\"\r\n [primaryXAxis]='labelData.axisX' \r\n [primaryYAxis]='labelData.axisY' \r\n [title]='labelData.title'\r\n [titleStyle]=\"labelData.titleStyle\"\r\n [tooltip]='labelData.tooltip'\r\n [legendSettings]=\"labelData.legendSettings\"\r\n [palettes]=\"labelData.palettes\"\r\n [chartArea]=\"labelData.chartArea\"\r\n background=\"transparent\"\r\n height=\"100%\"\r\n height=\"100%\"\r\n (pointRender)=\"barRender($event)\"\r\n (axisLabelRender)=\"axisLabelRender($event)\"\r\n #chart\r\n \r\n >\r\n \r\n <e-series-collection>\r\n\r\n @for (series of dataChartParse; track $index) {\r\n <e-series \r\n [dataSource]='series.dataSource' \r\n [type]='series.variant?.orientation === \"horizontal\" ? \"Bar\" : \"Column\"' \r\n xName='x' \r\n yName='y' \r\n [name]='series.name' \r\n [columnSpacing]='series.columnSpacing'\r\n [cornerRadius]='series.variant?.type === \"cornerRadius\" ? { topLeft: 4, topRight: 4} : null'\r\n [border]='series.border'\r\n [columnFacet]='series.columnFacet?.type'\r\n [marker]=\"labelData.marker\"\r\n >\r\n </e-series>\r\n @if (series.dataSource[0]?.y2 !== undefined) {\r\n <e-series \r\n [dataSource]='series.dataSource' \r\n [type]='series.variant?.orientation === \"horizontal\" ? \"Bar\" : \"Column\"' \r\n xName='x' \r\n yName='y2' \r\n [name]='series.name+\"(REF)\"'\r\n fill='#e0e0e0'\r\n [marker]=\"labelData.marker\"\r\n [border]='series.border'\r\n [columnFacet]='series.columnFacet?.type'\r\n [columnSpacing]='series.columnSpacing'\r\n [cornerRadius]='series.variant?.type === \"cornerRadius\" ? { topLeft: 4, topRight: 4} : null'\r\n \r\n >\r\n </e-series>\r\n }\r\n }\r\n </e-series-collection>\r\n \r\n </ejs-chart>\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box}.control-section{display:flex;flex-direction:column;width:100%;flex-grow:1;height:100%!important;padding:0 5px;background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000014;box-sizing:border-box}:host ::ng-deep ejs-chart{width:100%!important;height:100%!important;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ChartModule }, { kind: "component", type: i2.ChartComponent, selector: "ejs-chart", inputs: ["accessibility", "allowExport", "allowMultiSelection", "annotations", "axes", "background", "backgroundImage", "border", "chartArea", "columns", "crosshair", "currencyCode", "dataSource", "description", "enableAnimation", "enableAutoIntervalOnBothAxis", "enableCanvas", "enableExport", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "enableSideBySidePlacement", "focusBorderColor", "focusBorderMargin", "focusBorderWidth", "height", "highlightColor", "highlightMode", "highlightPattern", "indicators", "isMultiSelect", "isTransposed", "legendSettings", "locale", "margin", "palettes", "primaryXAxis", "primaryYAxis", "rangeColorSettings", "rows", "selectedDataIndexes", "selectionMode", "selectionPattern", "series", "subTitle", "subTitleStyle", "tabIndex", "theme", "title", "titleStyle", "tooltip", "useGroupingSeparator", "width", "zoomSettings"], outputs: ["afterExport", "animationComplete", "annotationRender", "axisLabelClick", "axisLabelRender", "axisMultiLabelRender", "axisRangeCalculated", "beforeExport", "beforePrint", "beforeResize", "chartDoubleClick", "chartMouseClick", "chartMouseDown", "chartMouseLeave", "chartMouseMove", "chartMouseUp", "drag", "dragComplete", "dragEnd", "dragStart", "legendClick", "legendRender", "load", "loaded", "multiLevelLabelClick", "onZooming", "pointClick", "pointDoubleClick", "pointMove", "pointRender", "resized", "scrollChanged", "scrollEnd", "scrollStart", "selectionComplete", "seriesRender", "sharedTooltipRender", "textRender", "tooltipRender", "zoomComplete", "dataSourceChange"] }, { kind: "directive", type: i2.SeriesDirective, selector: "e-series-collection>e-series", inputs: ["accessibility", "animation", "bearFillColor", "binInterval", "border", "boxPlotMode", "bullFillColor", "cardinalSplineTension", "close", "colorName", "columnFacet", "columnSpacing", "columnWidth", "columnWidthInPixel", "connector", "cornerRadius", "dashArray", "dataSource", "dragSettings", "drawType", "emptyPointSettings", "enableComplexProperty", "enableSolidCandles", "enableTooltip", "errorBar", "fill", "groupName", "high", "intermediateSumIndexes", "isClosed", "legendImageUrl", "legendShape", "low", "marker", "maxRadius", "minRadius", "name", "negativeFillColor", "noRisers", "nonHighlightStyle", "opacity", "open", "paretoOptions", "pointColorMapping", "query", "segmentAxis", "segments", "selectionStyle", "showMean", "showNormalDistribution", "size", "splineType", "stackingGroup", "step", "sumIndexes", "summaryFillColor", "tooltipFormat", "tooltipMappingName", "trendlines", "type", "unSelectedStyle", "visible", "volume", "width", "xAxisName", "xName", "yAxisName", "yName", "zOrder"] }, { kind: "directive", type: i2.SeriesCollectionDirective, selector: "ej-chart>e-series-collection" }] }); }
1881
+ ], viewQueries: [{ propertyName: "chartInstance", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <div class=\"chart-scroll-container\"> -->\r\n\r\n<div class=\"control-section\" *ngIf=\"isChartReady\">\r\n <ejs-chart \r\n [id]=\"idComponent\"\r\n [primaryXAxis]='labelData.axisX' \r\n [primaryYAxis]='labelData.axisY' \r\n [title]='labelData.title'\r\n [titleStyle]=\"labelData.titleStyle\"\r\n [tooltip]='labelData.tooltip'\r\n [legendSettings]=\"labelData.legendSettings\"\r\n [palettes]=\"labelData.palettes\"\r\n [chartArea]=\"labelData.chartArea\"\r\n background=\"transparent\"\r\n height=\"100%\"\r\n height=\"100%\"\r\n (pointRender)=\"barRender($event)\"\r\n (axisLabelRender)=\"axisLabelRender($event)\"\r\n #chart\r\n \r\n >\r\n \r\n <e-series-collection>\r\n\r\n @for (series of dataChartParse; track $index) {\r\n <e-series \r\n [dataSource]='series.dataSource' \r\n [type]='series.variant?.orientation === \"horizontal\" ? \"Bar\" : \"Column\"' \r\n xName='x' \r\n yName='y' \r\n [name]='series.name' \r\n [columnSpacing]='series.columnSpacing'\r\n [cornerRadius]='series.variant?.type === \"cornerRadius\" ? { topLeft: 4, topRight: 4} : null'\r\n [border]='series.border'\r\n [columnFacet]='series.columnFacet?.type'\r\n [marker]=\"labelData.marker\"\r\n >\r\n </e-series>\r\n @if (series.dataSource[0]?.y2 !== undefined) {\r\n <e-series \r\n [dataSource]='series.dataSource' \r\n [type]='series.variant?.orientation === \"horizontal\" ? \"Bar\" : \"Column\"' \r\n xName='x' \r\n yName='y2' \r\n [name]='series.name+\"(REF)\"'\r\n fill='#e0e0e0'\r\n [marker]=\"labelData.marker\"\r\n [border]='series.border'\r\n [columnFacet]='series.columnFacet?.type'\r\n [columnSpacing]='series.columnSpacing'\r\n [cornerRadius]='series.variant?.type === \"cornerRadius\" ? { topLeft: 4, topRight: 4} : null'\r\n \r\n >\r\n </e-series>\r\n }\r\n }\r\n </e-series-collection>\r\n \r\n </ejs-chart>\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box}.control-section{display:flex;flex-direction:column;width:100%;flex-grow:1;height:100%!important;padding:0 5px;background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000014;box-sizing:border-box}:host ::ng-deep ejs-chart{width:100%!important;height:100%!important;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ChartModule }, { kind: "component", type: i2.ChartComponent, selector: "ejs-chart", inputs: ["accessibility", "allowExport", "allowMultiSelection", "annotations", "axes", "background", "backgroundImage", "border", "chartArea", "columns", "crosshair", "currencyCode", "dataSource", "description", "enableAnimation", "enableAutoIntervalOnBothAxis", "enableCanvas", "enableExport", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "enableSideBySidePlacement", "focusBorderColor", "focusBorderMargin", "focusBorderWidth", "height", "highlightColor", "highlightMode", "highlightPattern", "indicators", "isMultiSelect", "isTransposed", "legendSettings", "locale", "margin", "palettes", "primaryXAxis", "primaryYAxis", "rangeColorSettings", "rows", "selectedDataIndexes", "selectionMode", "selectionPattern", "series", "subTitle", "subTitleStyle", "tabIndex", "theme", "title", "titleStyle", "tooltip", "useGroupingSeparator", "width", "zoomSettings"], outputs: ["afterExport", "animationComplete", "annotationRender", "axisLabelClick", "axisLabelRender", "axisMultiLabelRender", "axisRangeCalculated", "beforeExport", "beforePrint", "beforeResize", "chartDoubleClick", "chartMouseClick", "chartMouseDown", "chartMouseLeave", "chartMouseMove", "chartMouseUp", "drag", "dragComplete", "dragEnd", "dragStart", "legendClick", "legendRender", "load", "loaded", "multiLevelLabelClick", "onZooming", "pointClick", "pointDoubleClick", "pointMove", "pointRender", "resized", "scrollChanged", "scrollEnd", "scrollStart", "selectionComplete", "seriesRender", "sharedTooltipRender", "textRender", "tooltipRender", "zoomComplete", "dataSourceChange"] }, { kind: "directive", type: i2.SeriesDirective, selector: "e-series-collection>e-series", inputs: ["accessibility", "animation", "bearFillColor", "binInterval", "border", "boxPlotMode", "bullFillColor", "cardinalSplineTension", "close", "colorName", "columnFacet", "columnSpacing", "columnWidth", "columnWidthInPixel", "connector", "cornerRadius", "dashArray", "dataSource", "dragSettings", "drawType", "emptyPointSettings", "enableComplexProperty", "enableSolidCandles", "enableTooltip", "errorBar", "fill", "groupName", "high", "intermediateSumIndexes", "isClosed", "legendImageUrl", "legendShape", "low", "marker", "maxRadius", "minRadius", "name", "negativeFillColor", "noRisers", "nonHighlightStyle", "opacity", "open", "paretoOptions", "pointColorMapping", "query", "segmentAxis", "segments", "selectionStyle", "showMean", "showNormalDistribution", "size", "splineType", "stackingGroup", "step", "sumIndexes", "summaryFillColor", "tooltipFormat", "tooltipMappingName", "trendlines", "type", "unSelectedStyle", "visible", "volume", "width", "xAxisName", "xName", "yAxisName", "yName", "zOrder"] }, { kind: "directive", type: i2.SeriesCollectionDirective, selector: "ej-chart>e-series-collection" }] }); }
1851
1882
  }
1852
1883
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BarChartSyncfusionComponent, decorators: [{
1853
1884
  type: Component,
@@ -1857,7 +1888,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
1857
1888
  CategoryService,
1858
1889
  TooltipService,
1859
1890
  LegendService,
1860
- ], template: "<!-- <div class=\"chart-scroll-container\"> -->\r\n\r\n<div class=\"control-section\" *ngIf=\"isChartReady && validSeriesList.length > 0\">\r\n <ejs-chart \r\n [id]=\"idComponent\"\r\n [primaryXAxis]='labelData.axisX' \r\n [primaryYAxis]='labelData.axisY' \r\n [title]='labelData.title'\r\n [titleStyle]=\"labelData.titleStyle\"\r\n [tooltip]='labelData.tooltip'\r\n [legendSettings]=\"labelData.legendSettings\"\r\n [palettes]=\"labelData.palettes\"\r\n [chartArea]=\"labelData.chartArea\"\r\n background=\"transparent\"\r\n height=\"100%\"\r\n height=\"100%\"\r\n (pointRender)=\"barRender($event)\"\r\n (axisLabelRender)=\"axisLabelRender($event)\"\r\n #chart\r\n \r\n >\r\n \r\n <e-series-collection>\r\n\r\n @for (series of dataChartParse; track $index) {\r\n <e-series \r\n [dataSource]='series.dataSource' \r\n [type]='series.variant?.orientation === \"horizontal\" ? \"Bar\" : \"Column\"' \r\n xName='x' \r\n yName='y' \r\n [name]='series.name' \r\n [columnSpacing]='series.columnSpacing'\r\n [cornerRadius]='series.variant?.type === \"cornerRadius\" ? { topLeft: 4, topRight: 4} : null'\r\n [border]='series.border'\r\n [columnFacet]='series.columnFacet?.type'\r\n [marker]=\"labelData.marker\"\r\n >\r\n </e-series>\r\n @if (series.dataSource[0]?.y2 !== undefined) {\r\n <e-series \r\n [dataSource]='series.dataSource' \r\n [type]='series.variant?.orientation === \"horizontal\" ? \"Bar\" : \"Column\"' \r\n xName='x' \r\n yName='y2' \r\n [name]='series.name+\"(REF)\"'\r\n fill='#e0e0e0'\r\n [marker]=\"labelData.marker\"\r\n [border]='series.border'\r\n [columnFacet]='series.columnFacet?.type'\r\n [columnSpacing]='series.columnSpacing'\r\n [cornerRadius]='series.variant?.type === \"cornerRadius\" ? { topLeft: 4, topRight: 4} : null'\r\n \r\n >\r\n </e-series>\r\n }\r\n }\r\n </e-series-collection>\r\n \r\n </ejs-chart>\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box}.control-section{display:flex;flex-direction:column;width:100%;flex-grow:1;height:100%!important;padding:0 5px;background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000014;box-sizing:border-box}:host ::ng-deep ejs-chart{width:100%!important;height:100%!important;flex-grow:1}\n"] }]
1891
+ ], template: "<!-- <div class=\"chart-scroll-container\"> -->\r\n\r\n<div class=\"control-section\" *ngIf=\"isChartReady\">\r\n <ejs-chart \r\n [id]=\"idComponent\"\r\n [primaryXAxis]='labelData.axisX' \r\n [primaryYAxis]='labelData.axisY' \r\n [title]='labelData.title'\r\n [titleStyle]=\"labelData.titleStyle\"\r\n [tooltip]='labelData.tooltip'\r\n [legendSettings]=\"labelData.legendSettings\"\r\n [palettes]=\"labelData.palettes\"\r\n [chartArea]=\"labelData.chartArea\"\r\n background=\"transparent\"\r\n height=\"100%\"\r\n height=\"100%\"\r\n (pointRender)=\"barRender($event)\"\r\n (axisLabelRender)=\"axisLabelRender($event)\"\r\n #chart\r\n \r\n >\r\n \r\n <e-series-collection>\r\n\r\n @for (series of dataChartParse; track $index) {\r\n <e-series \r\n [dataSource]='series.dataSource' \r\n [type]='series.variant?.orientation === \"horizontal\" ? \"Bar\" : \"Column\"' \r\n xName='x' \r\n yName='y' \r\n [name]='series.name' \r\n [columnSpacing]='series.columnSpacing'\r\n [cornerRadius]='series.variant?.type === \"cornerRadius\" ? { topLeft: 4, topRight: 4} : null'\r\n [border]='series.border'\r\n [columnFacet]='series.columnFacet?.type'\r\n [marker]=\"labelData.marker\"\r\n >\r\n </e-series>\r\n @if (series.dataSource[0]?.y2 !== undefined) {\r\n <e-series \r\n [dataSource]='series.dataSource' \r\n [type]='series.variant?.orientation === \"horizontal\" ? \"Bar\" : \"Column\"' \r\n xName='x' \r\n yName='y2' \r\n [name]='series.name+\"(REF)\"'\r\n fill='#e0e0e0'\r\n [marker]=\"labelData.marker\"\r\n [border]='series.border'\r\n [columnFacet]='series.columnFacet?.type'\r\n [columnSpacing]='series.columnSpacing'\r\n [cornerRadius]='series.variant?.type === \"cornerRadius\" ? { topLeft: 4, topRight: 4} : null'\r\n \r\n >\r\n </e-series>\r\n }\r\n }\r\n </e-series-collection>\r\n \r\n </ejs-chart>\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box}.control-section{display:flex;flex-direction:column;width:100%;flex-grow:1;height:100%!important;padding:0 5px;background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000014;box-sizing:border-box}:host ::ng-deep ejs-chart{width:100%!important;height:100%!important;flex-grow:1}\n"] }]
1861
1892
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { chartInstance: [{
1862
1893
  type: ViewChild,
1863
1894
  args: ['chart']
@@ -4053,15 +4084,25 @@ class BubbleChartSyncfusionComponent {
4053
4084
  if (this.dataLabel && this.labelData) {
4054
4085
  this.labelData.dataLabel = this.dataLabel;
4055
4086
  }
4056
- this.cdr.markForCheck();
4057
- // 2. Encendemos el gráfico en el siguiente ciclo con los datos listos
4058
- setTimeout(() => {
4059
- // Validamos que existan series válidas para pintar
4060
- if (this.dataChartParse && this.dataChartParse.length > 0) {
4087
+ // 2. Verificamos si hay datos válidos antes de encender la bandera
4088
+ const hasValidData = this.validSeriesList.length > 0;
4089
+ if (!hasValidData) {
4090
+ this.isChartReady = false;
4091
+ this.cdr.markForCheck();
4092
+ return;
4093
+ }
4094
+ // 3. Si ya estaba listo, solo actualizamos sin desmontar para que sea instantáneo
4095
+ if (this.isChartReady) {
4096
+ this.cdr.markForCheck();
4097
+ }
4098
+ else {
4099
+ // 4. Si estaba apagado, lo encendemos en el próximo microciclo del navegador
4100
+ // usando requestAnimationFrame para evitar el error de Syncfusion y que cargue fluido
4101
+ requestAnimationFrame(() => {
4061
4102
  this.isChartReady = true;
4062
4103
  this.cdr.markForCheck();
4063
- }
4064
- });
4104
+ });
4105
+ }
4065
4106
  }
4066
4107
  }
4067
4108
  // Mantén tu getter de validSeriesList intacto
@@ -4075,14 +4116,14 @@ class BubbleChartSyncfusionComponent {
4075
4116
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: BubbleChartSyncfusionComponent, isStandalone: true, selector: "yw-bubble-chart-syncfusion", inputs: { chartData: "chartData", config: "config", idComponent: "idComponent" }, providers: [BubbleSeriesService, CategoryService, CategoryService,
4076
4117
  TooltipService,
4077
4118
  LegendService,
4078
- DateTimeService, DataLabelService], viewQueries: [{ propertyName: "chartInstance", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"control-section\" *ngIf=\"isChartReady && validSeriesList.length > 0\">\r\n <ejs-chart \r\n #chart \r\n [primaryXAxis]=\"labelData.axisX\" \r\n [primaryYAxis]=\"labelData.axisY\" \r\n [title]=\"labelData.title\" \r\n [palettes]=\"labelData.palettes\"\r\n [chartArea]=\"labelData.chartArea\"\r\n [titleStyle]=\"labelData.titleStyle\"\r\n\r\n (pointRender)=\"pointRender($event)\" \r\n height=\"100%\"\r\n width=\"100%\"\r\n [legendSettings]=\"labelData.legendSettings\"\r\n (axisLabelRender)=\"axisLabelRender($event)\"\r\n\r\n [tooltip]=\"labelData.tooltip\">\r\n <e-series-collection>\r\n @for(series of dataChartParse; track $index){\r\n <e-series \r\n [opacity]=\"series.opacity\"\r\n [dataSource]='series.dataSource' \r\n type='Bubble' \r\n xName='x' \r\n yName='y' \r\n size='size'\r\n [name]='series.name' \r\n\r\n [marker]=\"labelData.marker\"\r\n [minRadius]=\"1\"\r\n [maxRadius]=\"bubbleMaxRadius\"\r\n >\r\n <!-- [dataLabel]='series.dataLabel' -->\r\n </e-series>\r\n\r\n }\r\n </e-series-collection>\r\n</ejs-chart>\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden}.control-section{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden;background:#fff;border-radius:8px}:host ::ng-deep ejs-circulargauge{display:block;width:100%!important;height:100%!important;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ChartModule }, { kind: "component", type: i2.ChartComponent, selector: "ejs-chart", inputs: ["accessibility", "allowExport", "allowMultiSelection", "annotations", "axes", "background", "backgroundImage", "border", "chartArea", "columns", "crosshair", "currencyCode", "dataSource", "description", "enableAnimation", "enableAutoIntervalOnBothAxis", "enableCanvas", "enableExport", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "enableSideBySidePlacement", "focusBorderColor", "focusBorderMargin", "focusBorderWidth", "height", "highlightColor", "highlightMode", "highlightPattern", "indicators", "isMultiSelect", "isTransposed", "legendSettings", "locale", "margin", "palettes", "primaryXAxis", "primaryYAxis", "rangeColorSettings", "rows", "selectedDataIndexes", "selectionMode", "selectionPattern", "series", "subTitle", "subTitleStyle", "tabIndex", "theme", "title", "titleStyle", "tooltip", "useGroupingSeparator", "width", "zoomSettings"], outputs: ["afterExport", "animationComplete", "annotationRender", "axisLabelClick", "axisLabelRender", "axisMultiLabelRender", "axisRangeCalculated", "beforeExport", "beforePrint", "beforeResize", "chartDoubleClick", "chartMouseClick", "chartMouseDown", "chartMouseLeave", "chartMouseMove", "chartMouseUp", "drag", "dragComplete", "dragEnd", "dragStart", "legendClick", "legendRender", "load", "loaded", "multiLevelLabelClick", "onZooming", "pointClick", "pointDoubleClick", "pointMove", "pointRender", "resized", "scrollChanged", "scrollEnd", "scrollStart", "selectionComplete", "seriesRender", "sharedTooltipRender", "textRender", "tooltipRender", "zoomComplete", "dataSourceChange"] }, { kind: "directive", type: i2.SeriesDirective, selector: "e-series-collection>e-series", inputs: ["accessibility", "animation", "bearFillColor", "binInterval", "border", "boxPlotMode", "bullFillColor", "cardinalSplineTension", "close", "colorName", "columnFacet", "columnSpacing", "columnWidth", "columnWidthInPixel", "connector", "cornerRadius", "dashArray", "dataSource", "dragSettings", "drawType", "emptyPointSettings", "enableComplexProperty", "enableSolidCandles", "enableTooltip", "errorBar", "fill", "groupName", "high", "intermediateSumIndexes", "isClosed", "legendImageUrl", "legendShape", "low", "marker", "maxRadius", "minRadius", "name", "negativeFillColor", "noRisers", "nonHighlightStyle", "opacity", "open", "paretoOptions", "pointColorMapping", "query", "segmentAxis", "segments", "selectionStyle", "showMean", "showNormalDistribution", "size", "splineType", "stackingGroup", "step", "sumIndexes", "summaryFillColor", "tooltipFormat", "tooltipMappingName", "trendlines", "type", "unSelectedStyle", "visible", "volume", "width", "xAxisName", "xName", "yAxisName", "yName", "zOrder"] }, { kind: "directive", type: i2.SeriesCollectionDirective, selector: "ej-chart>e-series-collection" }] }); }
4119
+ DateTimeService, DataLabelService], viewQueries: [{ propertyName: "chartInstance", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"control-section\" *ngIf=\"isChartReady\">\r\n <ejs-chart \r\n #chart \r\n [primaryXAxis]=\"labelData.axisX\" \r\n [primaryYAxis]=\"labelData.axisY\" \r\n [title]=\"labelData.title\" \r\n [palettes]=\"labelData.palettes\"\r\n [chartArea]=\"labelData.chartArea\"\r\n [titleStyle]=\"labelData.titleStyle\"\r\n\r\n (pointRender)=\"pointRender($event)\" \r\n height=\"100%\"\r\n width=\"100%\"\r\n [legendSettings]=\"labelData.legendSettings\"\r\n (axisLabelRender)=\"axisLabelRender($event)\"\r\n [id]=\"idComponent\" \r\n [tooltip]=\"labelData.tooltip\">\r\n <e-series-collection>\r\n @for(series of dataChartParse; track $index){\r\n <e-series \r\n [opacity]=\"series.opacity\"\r\n [dataSource]='series.dataSource' \r\n type='Bubble' \r\n xName='x' \r\n yName='y' \r\n size='size'\r\n [name]='series.name' \r\n\r\n [marker]=\"labelData.marker\"\r\n [minRadius]=\"1\"\r\n [maxRadius]=\"bubbleMaxRadius\"\r\n >\r\n <!-- [dataLabel]='series.dataLabel' -->\r\n </e-series>\r\n\r\n }\r\n </e-series-collection>\r\n</ejs-chart>\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden}.control-section{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden;background:#fff;border-radius:8px}:host ::ng-deep ejs-circulargauge{display:block;width:100%!important;height:100%!important;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ChartModule }, { kind: "component", type: i2.ChartComponent, selector: "ejs-chart", inputs: ["accessibility", "allowExport", "allowMultiSelection", "annotations", "axes", "background", "backgroundImage", "border", "chartArea", "columns", "crosshair", "currencyCode", "dataSource", "description", "enableAnimation", "enableAutoIntervalOnBothAxis", "enableCanvas", "enableExport", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "enableSideBySidePlacement", "focusBorderColor", "focusBorderMargin", "focusBorderWidth", "height", "highlightColor", "highlightMode", "highlightPattern", "indicators", "isMultiSelect", "isTransposed", "legendSettings", "locale", "margin", "palettes", "primaryXAxis", "primaryYAxis", "rangeColorSettings", "rows", "selectedDataIndexes", "selectionMode", "selectionPattern", "series", "subTitle", "subTitleStyle", "tabIndex", "theme", "title", "titleStyle", "tooltip", "useGroupingSeparator", "width", "zoomSettings"], outputs: ["afterExport", "animationComplete", "annotationRender", "axisLabelClick", "axisLabelRender", "axisMultiLabelRender", "axisRangeCalculated", "beforeExport", "beforePrint", "beforeResize", "chartDoubleClick", "chartMouseClick", "chartMouseDown", "chartMouseLeave", "chartMouseMove", "chartMouseUp", "drag", "dragComplete", "dragEnd", "dragStart", "legendClick", "legendRender", "load", "loaded", "multiLevelLabelClick", "onZooming", "pointClick", "pointDoubleClick", "pointMove", "pointRender", "resized", "scrollChanged", "scrollEnd", "scrollStart", "selectionComplete", "seriesRender", "sharedTooltipRender", "textRender", "tooltipRender", "zoomComplete", "dataSourceChange"] }, { kind: "directive", type: i2.SeriesDirective, selector: "e-series-collection>e-series", inputs: ["accessibility", "animation", "bearFillColor", "binInterval", "border", "boxPlotMode", "bullFillColor", "cardinalSplineTension", "close", "colorName", "columnFacet", "columnSpacing", "columnWidth", "columnWidthInPixel", "connector", "cornerRadius", "dashArray", "dataSource", "dragSettings", "drawType", "emptyPointSettings", "enableComplexProperty", "enableSolidCandles", "enableTooltip", "errorBar", "fill", "groupName", "high", "intermediateSumIndexes", "isClosed", "legendImageUrl", "legendShape", "low", "marker", "maxRadius", "minRadius", "name", "negativeFillColor", "noRisers", "nonHighlightStyle", "opacity", "open", "paretoOptions", "pointColorMapping", "query", "segmentAxis", "segments", "selectionStyle", "showMean", "showNormalDistribution", "size", "splineType", "stackingGroup", "step", "sumIndexes", "summaryFillColor", "tooltipFormat", "tooltipMappingName", "trendlines", "type", "unSelectedStyle", "visible", "volume", "width", "xAxisName", "xName", "yAxisName", "yName", "zOrder"] }, { kind: "directive", type: i2.SeriesCollectionDirective, selector: "ej-chart>e-series-collection" }] }); }
4079
4120
  }
4080
4121
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BubbleChartSyncfusionComponent, decorators: [{
4081
4122
  type: Component,
4082
4123
  args: [{ selector: 'yw-bubble-chart-syncfusion', standalone: true, imports: [CommonModule, ChartModule], providers: [BubbleSeriesService, CategoryService, CategoryService,
4083
4124
  TooltipService,
4084
4125
  LegendService,
4085
- DateTimeService, DataLabelService], template: "<div class=\"control-section\" *ngIf=\"isChartReady && validSeriesList.length > 0\">\r\n <ejs-chart \r\n #chart \r\n [primaryXAxis]=\"labelData.axisX\" \r\n [primaryYAxis]=\"labelData.axisY\" \r\n [title]=\"labelData.title\" \r\n [palettes]=\"labelData.palettes\"\r\n [chartArea]=\"labelData.chartArea\"\r\n [titleStyle]=\"labelData.titleStyle\"\r\n\r\n (pointRender)=\"pointRender($event)\" \r\n height=\"100%\"\r\n width=\"100%\"\r\n [legendSettings]=\"labelData.legendSettings\"\r\n (axisLabelRender)=\"axisLabelRender($event)\"\r\n\r\n [tooltip]=\"labelData.tooltip\">\r\n <e-series-collection>\r\n @for(series of dataChartParse; track $index){\r\n <e-series \r\n [opacity]=\"series.opacity\"\r\n [dataSource]='series.dataSource' \r\n type='Bubble' \r\n xName='x' \r\n yName='y' \r\n size='size'\r\n [name]='series.name' \r\n\r\n [marker]=\"labelData.marker\"\r\n [minRadius]=\"1\"\r\n [maxRadius]=\"bubbleMaxRadius\"\r\n >\r\n <!-- [dataLabel]='series.dataLabel' -->\r\n </e-series>\r\n\r\n }\r\n </e-series-collection>\r\n</ejs-chart>\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden}.control-section{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden;background:#fff;border-radius:8px}:host ::ng-deep ejs-circulargauge{display:block;width:100%!important;height:100%!important;flex-grow:1}\n"] }]
4126
+ DateTimeService, DataLabelService], template: "<div class=\"control-section\" *ngIf=\"isChartReady\">\r\n <ejs-chart \r\n #chart \r\n [primaryXAxis]=\"labelData.axisX\" \r\n [primaryYAxis]=\"labelData.axisY\" \r\n [title]=\"labelData.title\" \r\n [palettes]=\"labelData.palettes\"\r\n [chartArea]=\"labelData.chartArea\"\r\n [titleStyle]=\"labelData.titleStyle\"\r\n\r\n (pointRender)=\"pointRender($event)\" \r\n height=\"100%\"\r\n width=\"100%\"\r\n [legendSettings]=\"labelData.legendSettings\"\r\n (axisLabelRender)=\"axisLabelRender($event)\"\r\n [id]=\"idComponent\" \r\n [tooltip]=\"labelData.tooltip\">\r\n <e-series-collection>\r\n @for(series of dataChartParse; track $index){\r\n <e-series \r\n [opacity]=\"series.opacity\"\r\n [dataSource]='series.dataSource' \r\n type='Bubble' \r\n xName='x' \r\n yName='y' \r\n size='size'\r\n [name]='series.name' \r\n\r\n [marker]=\"labelData.marker\"\r\n [minRadius]=\"1\"\r\n [maxRadius]=\"bubbleMaxRadius\"\r\n >\r\n <!-- [dataLabel]='series.dataLabel' -->\r\n </e-series>\r\n\r\n }\r\n </e-series-collection>\r\n</ejs-chart>\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden}.control-section{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden;background:#fff;border-radius:8px}:host ::ng-deep ejs-circulargauge{display:block;width:100%!important;height:100%!important;flex-grow:1}\n"] }]
4086
4127
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { chartInstance: [{
4087
4128
  type: ViewChild,
4088
4129
  args: ['chart']
@@ -4956,13 +4997,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
4956
4997
  type: Input
4957
4998
  }], filterSelectionChange: [{ type: i0.Output, args: ["filterSelectionChange"] }] } });
4958
4999
 
4959
- class BarChartConfigSyncfusionComponent {
5000
+ class BarChartConfigComponent {
4960
5001
  constructor(fb, modal) {
4961
5002
  this.fb = fb;
4962
5003
  this.modal = modal;
4963
5004
  this.chartData = [];
4964
5005
  this.idComponent = '';
4965
- this.seriesConfigChange = new EventEmitter();
5006
+ this.configChange = new EventEmitter();
4966
5007
  this.axisSelect = new EventEmitter();
4967
5008
  // Opciones para los selects
4968
5009
  this.providerOptions = ['syncfusion', 'echarts', 'chartjs'];
@@ -5128,7 +5169,7 @@ class BarChartConfigSyncfusionComponent {
5128
5169
  y2Axis: formValues?.configData?.y2Axis,
5129
5170
  }
5130
5171
  };
5131
- this.seriesConfigChange.emit(this.config);
5172
+ this.configChange.emit(this.config);
5132
5173
  }
5133
5174
  else {
5134
5175
  Object.values(this.configForm.controls).forEach(control => {
@@ -5146,7 +5187,7 @@ class BarChartConfigSyncfusionComponent {
5146
5187
  const configInitial = JSON.parse(savedData);
5147
5188
  this.config = configInitial;
5148
5189
  this.initForm();
5149
- this.seriesConfigChange.emit(configInitial);
5190
+ this.configChange.emit(configInitial);
5150
5191
  }
5151
5192
  }
5152
5193
  saveLocalStorage() {
@@ -5217,12 +5258,12 @@ class BarChartConfigSyncfusionComponent {
5217
5258
  handleFormSubmit(updatedConfig) {
5218
5259
  this.config = updatedConfig;
5219
5260
  }
5220
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BarChartConfigSyncfusionComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$1.NzModalService }], target: i0.ɵɵFactoryTarget.Component }); }
5221
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: BarChartConfigSyncfusionComponent, isStandalone: true, selector: "yw-bar-chart-config-syncfusion", inputs: { config: "config", chartData: "chartData", idComponent: "idComponent", configSelect: "configSelect" }, outputs: { seriesConfigChange: "seriesConfigChange", axisSelect: "axisSelect" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container-card\">\r\n <!-- Cabecera personalizada -->\r\n <div class=\"flex flex-col sm:flex-row sm:items-center sm:justify-between border-b px-4 py-3 gap-2\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"cardTitleTemplate\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"cardExtraTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <form nz-form [formGroup]=\"configForm\" nzLayout=\"vertical\" class=\"config-form\">\r\n <!-- inputs de configuraci\u00F3n general -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n General\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Provider</nz-form-label>\r\n <nz-form-control>\r\n <nz-select formControlName=\"provider\" nzAllowClear>\r\n <nz-option *ngFor=\"let p of providerOptions\" [nzValue]=\"p\" [nzLabel]=\"p\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"title\" placeholder=\"T\u00EDtulo del gr\u00E1fico\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Texto Etiqueta Eje X</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"xLabelText\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Texto Etiqueta Eje Y</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"yLabelText\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n\r\n </div>\r\n </nz-card>\r\n\r\n\r\n <!-- Tus selectores de color, bordes, etc. -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Estilos y Apariencia\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Border Group -->\r\n <div nz-col [nzXs]=\"24\" formGroupName=\"border\">\r\n <div nz-row [nzGutter]=\"8\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Border Width</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"width\" [nzMin]=\"0\" style=\"width: 100%\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Border Color</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; align-items: center; gap: 12px\">\r\n <!-- Bot\u00F3n para abrir el selector de color -->\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"borderColorInput.click()\">\r\n Seleccionar color\r\n </button>\r\n\r\n <!-- C\u00EDrculo indicador (condicional basado en el control anidado) -->\r\n @if (configForm.get(\"border.color\")?.value) {\r\n <span [style.background-color]=\"\r\n configForm.get('border.color')?.value\r\n \" style=\"\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n display: inline-block;\r\n border: 1px solid #d9d9d9;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n \">\r\n </span>\r\n }\r\n\r\n <!-- Input oculto apuntando al subgrupo formGroupName=\"border\" o con ruta completa -->\r\n <input #borderColorInput type=\"color\" [formControl]=\"$any(configForm.get('border.color'))\"\r\n style=\"display: none\" />\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Border Dash Array</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"dashArray\" [nzMin]=\"0\" [nzStep]=\"0.1\"\r\n style=\"width: 100%\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Variant -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\" formGroupName=\"variant\">\r\n <nz-form-item>\r\n <nz-form-label>Variante (Variant Type)</nz-form-label>\r\n <nz-form-control>\r\n <nz-select formControlName=\"type\" nzAllowClear>\r\n <nz-option *ngFor=\"let v of variantTypeOptions\" [nzValue]=\"v\" [nzLabel]=\"v\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Column Facet -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\" formGroupName=\"columnFacet\">\r\n <nz-form-item>\r\n <nz-form-label>Faceta de Columna (Column Facet)</nz-form-label>\r\n <nz-form-control>\r\n <nz-select formControlName=\"type\" nzAllowClear>\r\n <nz-option *ngFor=\"let f of columnFacetTypeOptions\" [nzValue]=\"f\" [nzLabel]=\"f\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n\r\n <nz-form-item>\r\n <nz-form-label>Color</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; align-items: center; gap: 12px\">\r\n <!-- Bot\u00F3n para abrir el selector de color -->\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"colorInput.click()\">\r\n Seleccionar color\r\n </button>\r\n\r\n <!-- C\u00EDrculo indicador (solo aparece si hay un color seleccionado) -->\r\n @if (configForm.get(\"color\")?.value) {\r\n <span [style.background-color]=\"configForm.get('color')?.value\" style=\"\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n display: inline-block;\r\n border: 1px solid #d9d9d9;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n \">\r\n </span>\r\n }\r\n\r\n <!-- Input de color oculto vinculado al formulario -->\r\n <input #colorInput type=\"color\" formControlName=\"color\" style=\"display: none\" />\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Espaciado de Columnas (columnSpacing)</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"columnSpacing\" [nzStep]=\"0.1\" [nzMin]=\"0\" [nzMax]=\"1\"\r\n style=\"width: 100%\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\">\r\n\r\n <!-- REGLA DE COLORES -->\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Regla de colores Reto\" class=\"mb-3 mt-3 custom-card\">\r\n\r\n <div formGroupName=\"ruleColorBar\">\r\n <div nz-row [nzGutter]=\"[16, 8]\">\r\n\r\n <!-- Regla -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Regla</nz-form-label>\r\n <nz-form-control>\r\n <nz-select nzAllowClear style=\"width: 100%\"\r\n [formControl]=\"$any(configForm.get('ruleColorBar.rule'))\">\r\n <nz-option *ngFor=\"let p of rulesOptions\" [nzValue]=\"p.key\" [nzLabel]=\"p.label\">\r\n </nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Umbral -->\r\n @if (configForm.get('ruleColorBar.rule')?.value === 'threshold') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Umbral</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"thresholdValue\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Cantidad m\u00EDnima -->\r\n @if (configForm.get('ruleColorBar.rule')?.value === 'range') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Cantidad M\u00EDnima</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"minRange\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Cantidad m\u00E1xima -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Cantidad M\u00E1xima</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"maxRange\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Color verdadero -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color Verdadero</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"trueColorInput.click()\">\r\n Seleccionar color\r\n </button>\r\n\r\n @if (configForm.get('ruleColorBar.trueColor')?.value) {\r\n <span [style.backgroundColor]=\"configForm.get('ruleColorBar.trueColor')?.value\" style=\"\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n display: inline-block;\r\n border: 1px solid #d9d9d9;\r\n flex-shrink: 0;\r\n \">\r\n </span>\r\n }\r\n\r\n <input #trueColorInput type=\"color\"\r\n [formControl]=\"$any(configForm.get('ruleColorBar.trueColor'))\" style=\"display: none;\">\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Color falso -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color Falso</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"falseColorInput.click()\">\r\n Seleccionar color\r\n </button>\r\n\r\n @if (configForm.get('ruleColorBar.falseColor')?.value) {\r\n <span [style.backgroundColor]=\"configForm.get('ruleColorBar.falseColor')?.value\" style=\"\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n display: inline-block;\r\n border: 1px solid #d9d9d9;\r\n flex-shrink: 0;\r\n \">\r\n </span>\r\n }\r\n\r\n <input #falseColorInput type=\"color\"\r\n [formControl]=\"$any(configForm.get('ruleColorBar.falseColor'))\" style=\"display: none;\">\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n </div>\r\n </nz-card>\r\n\r\n <!-- Configuraci\u00F3n de Datos (configData) -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n de Datos (configData)\" class=\"mb-3 custom-card\"\r\n formGroupName=\"configData\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Tabla (table)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"table\" placeholder=\"Nombre de tabla\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('table')\"\r\n [disabled]=\"configForm.get('configData.joins')?.value === true\">\r\n <i nz-icon nzType=\"search\"></i>\r\n\r\n </button>\r\n\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('table')\"\r\n [disabled]=\"configForm.get('configData.joins')?.value === true\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Eje X -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje X (xAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"xAxis\" placeholder=\"ej. productos.nombre\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('xAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('xAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y (yAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"yAxis\" placeholder=\"ej. detalle_ventas.monto\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('yAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('yAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y Secundario -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y Secundario (y2Axis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"y2Axis\" placeholder=\"Opcional\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('y2Axis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('y2Axis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Serie -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Serie (serie)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"serie\" placeholder=\"ej. detalle_ventas.sucursal\"\r\n [disabled]=\"disabledAxis\" style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('serie')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('serie')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-4\">\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <span style=\"font-weight: 500; color: #334155\">Habilitar Joins</span>\r\n <nz-switch formControlName=\"joins\"></nz-switch>\r\n </div>\r\n </div> -->\r\n\r\n <div>\r\n <div nz-row [nzGutter]=\"16\" class=\"mt-3\">\r\n <!-- Tooltip Settings (Columna Izquierda) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <div formGroupName=\"tooltip\">\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Tooltip Config\" class=\"mb-3 custom-card\">\r\n\r\n\r\n\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Habilitar Tooltip -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\"\r\n style=\"display: flex; flex-direction: column; align-items: flex-start; gap: 6px;\">\r\n <span style=\"font-weight: 500; color: #334155;\">Habilitar Tooltip</span>\r\n <nz-switch formControlName=\"enable\"></nz-switch>\r\n </div>\r\n\r\n <!-- Compartido (shared) -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\"\r\n style=\"display: flex; flex-direction: column; align-items: flex-start; gap: 6px;\">\r\n <span style=\"font-weight: 500; color: #334155;\">Compartido (shared)</span>\r\n <nz-switch formControlName=\"shared\"></nz-switch>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"display: flex; align-items: center; gap: 12px;\"\r\n *ngIf=\"tooltipEnabled\">\r\n <button nz-button nzType=\"text\" nzSize=\"small\" type=\"button\" (click)=\"toggleTooltipMode()\"\r\n [nzTooltipTitle]=\"isCustomTooltipMode ? 'Cambiar a modo Dise\u00F1ador Visual' : 'Cambiar a modo C\u00F3digo Libre (Avanzado)'\"\r\n nz-tooltip>\r\n <span nz-icon [nzType]=\"isCustomTooltipMode ? 'setting' : 'code'\"></span>\r\n <span style=\"font-size: 11px; margin-left: 4px;\">{{ isCustomTooltipMode ? 'Dise\u00F1ador' :\r\n 'Avanzado'\r\n }}</span>\r\n </button>\r\n </div>\r\n </div>\r\n <!-- Contenido condicional si el tooltip est\u00E1 habilitado -->\r\n @if (tooltipEnabled) {\r\n <div nz-row class=\"mt-3\">\r\n <div nz-col [nzSpan]=\"24\">\r\n @if (!isCustomTooltipMode) {\r\n <!-- Dise\u00F1ador Visual Asistido -->\r\n <div class=\"tooltip-builder-container\">\r\n <div nz-row [nzGutter]=\"[8, 8]\">\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Nombre</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowCategory\" [ngModelOptions]=\"{standalone: true}\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Nombre Negrita</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipBoldCategory\" [ngModelOptions]=\"{standalone: true}\"\r\n [nzDisabled]=\"!tooltipShowCategory\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Valor</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowValue\" [ngModelOptions]=\"{standalone: true}\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Separador</nz-form-label>\r\n <nz-form-control>\r\n <nz-select nzAllowClear [(ngModel)]=\"tooltipSeparator\"\r\n [ngModelOptions]=\"{standalone: true}\" nzSize=\"small\"\r\n (ngModelChange)=\"updateTooltipFromForm()\">\r\n @for (sep of tooltipSeparators; track sep.value) {\r\n <nz-option [nzValue]=\"sep.value\" [nzLabel]=\"sep.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n\r\n <!-- Previsualizaci\u00F3n interactiva del Tooltip -->\r\n <div class=\"tooltip-preview-box mt-2\">\r\n <span style=\"color: #64748b;\">Vista previa:</span>\r\n <nz-tag nzColor=\"processing\">\r\n @if (tooltipShowCategory) {\r\n @if (tooltipBoldCategory) { <strong>Categor\u00EDa</strong> } @else { Categor\u00EDa }\r\n }\r\n @if (tooltipShowCategory && tooltipShowValue) { {{ tooltipSeparator }} }\r\n @if (tooltipShowValue) { 1,500 }\r\n </nz-tag>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Modo Avanzado Input Manual (Vinculado al FormGroup) -->\r\n <nz-form-item>\r\n <nz-form-label>Formato Manual (Syncfusion Template)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" formControlName=\"format\"\r\n placeholder=\"Ej: <b>${point.x}</b>: ${point.y}\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- </div> -->\r\n </nz-card>\r\n </div>\r\n </div>\r\n\r\n <!-- Legend Settings (Columna Derecha) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <div formGroupName=\"legends\">\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n de Leyendas\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\" class=\"align-items-center\">\r\n\r\n <!-- Switch Visible: Ocupa todo el ancho en cel (24) y la mitad en pantallas medianas en adelante (12) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-2\">\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <span style=\"font-weight: 500; color: #334155\">Visible</span>\r\n <nz-switch formControlName=\"visible\"></nz-switch>\r\n </div>\r\n </div>\r\n\r\n <!-- Select de Posici\u00F3n: Tambi\u00E9n se pasa abajo en pantallas peque\u00F1as -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-2\">\r\n <span style=\"font-weight: 500; color: #334155\">Posici\u00F3n</span>\r\n\r\n <nz-select nzAllowClear formControlName=\"position\" nzPlaceHolder=\"Posici\u00F3n de leyenda\"\r\n style=\"width: 100%\">\r\n @for (pos of legendPositionOptions; track pos.key) {\r\n <nz-option [nzValue]=\"pos.key\" [nzLabel]=\"pos.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </div>\r\n\r\n </div>\r\n </nz-card>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </form>\r\n\r\n</div>\r\n<!-- Template para el T\u00EDtulo con Icono a la izquierda -->\r\n<ng-template #cardTitleTemplate>\r\n <div style=\"display: flex; align-items: center; gap: 8px;\">\r\n <i nz-icon nzType=\"bar-chart\" nzTheme=\"outline\" style=\"font-size: 20px; color: #028989;\"></i>\r\n <span>Configuraci\u00F3n del Gr\u00E1fico Bar</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #cardExtraTemplate>\r\n <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"restarConfig()\">\r\n <span nz-icon nzType=\"reload\" nzTheme=\"outline\"></span>\r\n Restaurar\r\n </button>\r\n <!-- <button nz-button nzType=\"primary\" type=\"submit\" (click)=\"onSubmit()\">\r\n <span nz-icon nzType=\"check\"></span>\r\n Aplicar\r\n </button> -->\r\n </div>\r\n</ng-template>", styles: [":host{display:block}:host .custom-card{border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 1px 3px #0000000d;overflow:hidden}:host .custom-card ::ng-deep .ant-card-head{background-color:#f8fafc;border-bottom:1px solid #e2e8f0;padding:0 20px;min-height:48px}:host .custom-card ::ng-deep .ant-card-head .ant-card-head-title{font-size:15px;font-weight:600;color:#334155}:host .custom-card ::ng-deep .ant-card-body{padding:20px}:host ::ng-deep .main-container-card .ant-card-head-wrapper{flex-wrap:wrap;row-gap:12px;padding-top:12px;padding-bottom:12px}:host button[nz-button]:has(i[nzType=search]),:host button[nz-button]:has(span[nzType=search]){color:#028989;border-color:#d1fae5;background-color:#f0fdf4;transition:all .2s ease}:host button[nz-button]:has(i[nzType=search]):hover,:host button[nz-button]:has(span[nzType=search]):hover{color:#028989;border-color:#028989;background-color:#ecfdf5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap", "nzRequiredMark"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzVariant", "nzSize", "nzStepperless", "nzStatus", "disabled", "readonly"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i7.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i7.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzVariant", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzPrefix", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus", "nzOnClear"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzSwitchModule }, { kind: "component", type: i8.NzSwitchComponent, selector: "nz-switch", inputs: ["nzLoading", "nzDisabled", "nzControl", "nzCheckedChildren", "nzUnCheckedChildren", "nzSize", "nzId"], exportAs: ["nzSwitch"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i9.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "component", type: NzInputNumberComponent, selector: "nz-input-number", inputs: ["nzId", "nzSize", "nzPlaceHolder", "nzStatus", "nzVariant", "nzStep", "nzMin", "nzMax", "nzPrecision", "nzParser", "nzFormatter", "nzDisabled", "nzReadOnly", "nzAutoFocus", "nzBordered", "nzKeyboard", "nzControls", "nzPrefix", "nzSuffix", "nzAddonBefore", "nzAddonAfter"], outputs: ["nzBlur", "nzFocus", "nzOnStep"], exportAs: ["nzInputNumber"] }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i10.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i11.ɵNzTransitionPatchDirective, selector: "[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i12.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i13.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: NzTagComponent, selector: "nz-tag", inputs: ["nzMode", "nzColor", "nzChecked", "nzBordered"], outputs: ["nzOnClose", "nzCheckedChange"], exportAs: ["nzTag"] }, { kind: "ngmodule", type: NzTooltipModule }, { kind: "directive", type: i14.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }] }); }
5261
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BarChartConfigComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$1.NzModalService }], target: i0.ɵɵFactoryTarget.Component }); }
5262
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: BarChartConfigComponent, isStandalone: true, selector: "yw-bar-chart-config", inputs: { config: "config", chartData: "chartData", idComponent: "idComponent", configSelect: "configSelect" }, outputs: { configChange: "configChange", axisSelect: "axisSelect" }, usesOnChanges: true, ngImport: i0, template: "\r\n<nz-card [nzTitle]=\"cardTitleTemplate\" [nzExtra]=\"cardExtraTemplate\" class=\"main-container-card\"[nzBodyStyle]=\"{ padding: '0px' }\"\r\n [ngStyle]=\"{ border: 'none' }\">\r\n\r\n <form nz-form [formGroup]=\"configForm\" nzLayout=\"vertical\" class=\"config-form\">\r\n <!-- inputs de configuraci\u00F3n general -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n General\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Provider</nz-form-label>\r\n <nz-form-control>\r\n <nz-select formControlName=\"provider\" nzAllowClear>\r\n <nz-option *ngFor=\"let p of providerOptions\" [nzValue]=\"p\" [nzLabel]=\"p\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"title\" placeholder=\"T\u00EDtulo del gr\u00E1fico\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Texto Etiqueta Eje X</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"xLabelText\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Texto Etiqueta Eje Y</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"yLabelText\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n\r\n </div>\r\n </nz-card>\r\n\r\n\r\n <!-- Tus selectores de color, bordes, etc. -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Estilos y Apariencia\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Border Group -->\r\n <div nz-col [nzXs]=\"24\" formGroupName=\"border\">\r\n <div nz-row [nzGutter]=\"8\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Border Width</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"width\" [nzMin]=\"0\" style=\"width: 100%\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Border Color</nz-form-label>\r\n \r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [formControl]=\"$any(configForm.get('border.color'))\"\r\n name=\"centerLabelTitleColor\" />\r\n <!-- <div style=\"display: flex; align-items: center; gap: 12px\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"borderColorInput.click()\">\r\n Seleccionar color\r\n </button>\r\n\r\n @if (configForm.get(\"border.color\")?.value) {\r\n <span [style.background-color]=\"\r\n configForm.get('border.color')?.value\r\n \" style=\"\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n display: inline-block;\r\n border: 1px solid #d9d9d9;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n \">\r\n </span>\r\n }\r\n\r\n <input #borderColorInput type=\"color\" [formControl]=\"$any(configForm.get('border.color'))\"\r\n style=\"display: none\" />\r\n </div> -->\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Border Dash Array</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"dashArray\" [nzMin]=\"0\" [nzStep]=\"0.1\"\r\n style=\"width: 100%\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Variant -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\" formGroupName=\"variant\">\r\n <nz-form-item>\r\n <nz-form-label>Variante (Variant Type)</nz-form-label>\r\n <nz-form-control>\r\n <nz-select formControlName=\"type\" nzAllowClear>\r\n <nz-option *ngFor=\"let v of variantTypeOptions\" [nzValue]=\"v\" [nzLabel]=\"v\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Column Facet -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\" formGroupName=\"columnFacet\">\r\n <nz-form-item>\r\n <nz-form-label>Faceta de Columna (Column Facet)</nz-form-label>\r\n <nz-form-control>\r\n <nz-select formControlName=\"type\" nzAllowClear>\r\n <nz-option *ngFor=\"let f of columnFacetTypeOptions\" [nzValue]=\"f\" [nzLabel]=\"f\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n\r\n <nz-form-item>\r\n <nz-form-label>Color de barras</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" formControlName=\"color\"\r\n name=\"centerLabelTitleColor\" />\r\n \r\n </nz-form-control> \r\n </nz-form-item>\r\n </div>\r\n\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Espaciado de Columnas (columnSpacing)</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"columnSpacing\" [nzStep]=\"0.1\" [nzMin]=\"0\" [nzMax]=\"1\"\r\n style=\"width: 100%\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\">\r\n\r\n <!-- REGLA DE COLORES -->\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Regla de colores Reto\" class=\"mb-3 mt-3 custom-card\">\r\n\r\n <div formGroupName=\"ruleColorBar\">\r\n <div nz-row [nzGutter]=\"[16, 8]\">\r\n\r\n <!-- Regla -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Regla</nz-form-label>\r\n <nz-form-control>\r\n <nz-select nzAllowClear style=\"width: 100%\"\r\n [formControl]=\"$any(configForm.get('ruleColorBar.rule'))\">\r\n <nz-option *ngFor=\"let p of rulesOptions\" [nzValue]=\"p.key\" [nzLabel]=\"p.label\">\r\n </nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Umbral -->\r\n @if (configForm.get('ruleColorBar.rule')?.value === 'threshold') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Umbral</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"thresholdValue\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Cantidad m\u00EDnima -->\r\n @if (configForm.get('ruleColorBar.rule')?.value === 'range') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Cantidad M\u00EDnima</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"minRange\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Cantidad m\u00E1xima -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Cantidad M\u00E1xima</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"maxRange\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Color verdadero -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color Verdadero</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [formControl]=\"$any(configForm.get('ruleColorBar.trueColor'))\"\r\n name=\"centerLabelTitleColor\" />\r\n \r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Color falso -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color Falso</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [formControl]=\"$any(configForm.get('ruleColorBar.falseColor'))\"\r\n name=\"centerLabelTitleColor\" />\r\n \r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n </div>\r\n </nz-card>\r\n\r\n <!-- Configuraci\u00F3n de Datos (configData) -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n de Datos (configData)\" class=\"mb-3 custom-card\"\r\n formGroupName=\"configData\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Tabla (table)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"table\" placeholder=\"Nombre de tabla\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('table')\"\r\n [disabled]=\"configForm.get('configData.joins')?.value === true\">\r\n <i nz-icon nzType=\"search\"></i>\r\n\r\n </button>\r\n\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('table')\"\r\n [disabled]=\"configForm.get('configData.joins')?.value === true\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Eje X -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje X (xAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"xAxis\" placeholder=\"ej. productos.nombre\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('xAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('xAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y (yAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"yAxis\" placeholder=\"ej. detalle_ventas.monto\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('yAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('yAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y Secundario -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y Secundario (y2Axis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"y2Axis\" placeholder=\"Opcional\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('y2Axis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('y2Axis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Serie -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Serie (serie)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"serie\" placeholder=\"ej. detalle_ventas.sucursal\"\r\n [disabled]=\"disabledAxis\" style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('serie')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('serie')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-4\">\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <span style=\"font-weight: 500; color: #334155\">Habilitar Joins</span>\r\n <nz-switch formControlName=\"joins\"></nz-switch>\r\n </div>\r\n </div> -->\r\n\r\n <div>\r\n <div nz-row [nzGutter]=\"16\" class=\"mt-3\">\r\n <!-- Tooltip Settings (Columna Izquierda) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <div formGroupName=\"tooltip\">\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n de Tooltip\" class=\"mb-3 custom-card\">\r\n\r\n\r\n\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Habilitar Tooltip -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\"\r\n style=\"display: flex; flex-direction: column; align-items: flex-start; gap: 6px;\">\r\n <span style=\"font-weight: 500; color: #334155;\">Habilitar Tooltip</span>\r\n <nz-switch formControlName=\"enable\"></nz-switch>\r\n </div>\r\n\r\n <!-- Compartido (shared) -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\"\r\n style=\"display: flex; flex-direction: column; align-items: flex-start; gap: 6px;\">\r\n <span style=\"font-weight: 500; color: #334155;\">Compartido (shared)</span>\r\n <nz-switch formControlName=\"shared\"></nz-switch>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"display: flex; align-items: center; gap: 12px;\"\r\n *ngIf=\"tooltipEnabled\">\r\n <button nz-button nzType=\"text\" nzSize=\"small\" type=\"button\" (click)=\"toggleTooltipMode()\"\r\n [nzTooltipTitle]=\"isCustomTooltipMode ? 'Cambiar a modo Dise\u00F1ador Visual' : 'Cambiar a modo C\u00F3digo Libre (Avanzado)'\"\r\n nz-tooltip>\r\n <span nz-icon [nzType]=\"isCustomTooltipMode ? 'setting' : 'code'\"></span>\r\n <span style=\"font-size: 11px; margin-left: 4px;\">{{ isCustomTooltipMode ? 'Dise\u00F1ador' :\r\n 'Avanzado'\r\n }}</span>\r\n </button>\r\n </div>\r\n </div>\r\n <!-- Contenido condicional si el tooltip est\u00E1 habilitado -->\r\n @if (tooltipEnabled) {\r\n <div nz-row class=\"mt-3\">\r\n <div nz-col [nzSpan]=\"24\">\r\n @if (!isCustomTooltipMode) {\r\n <!-- Dise\u00F1ador Visual Asistido -->\r\n <div class=\"tooltip-builder-container\">\r\n <div nz-row [nzGutter]=\"[8, 8]\">\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Nombre</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowCategory\" [ngModelOptions]=\"{standalone: true}\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Nombre Negrita</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipBoldCategory\" [ngModelOptions]=\"{standalone: true}\"\r\n [nzDisabled]=\"!tooltipShowCategory\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Valor</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowValue\" [ngModelOptions]=\"{standalone: true}\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Separador</nz-form-label>\r\n <nz-form-control>\r\n <nz-select nzAllowClear [(ngModel)]=\"tooltipSeparator\"\r\n [ngModelOptions]=\"{standalone: true}\" nzSize=\"small\"\r\n (ngModelChange)=\"updateTooltipFromForm()\">\r\n @for (sep of tooltipSeparators; track sep.value) {\r\n <nz-option [nzValue]=\"sep.value\" [nzLabel]=\"sep.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n\r\n <!-- Previsualizaci\u00F3n interactiva del Tooltip -->\r\n <div class=\"tooltip-preview-box mt-2\">\r\n <span style=\"color: #64748b;\">Vista previa:</span>\r\n <nz-tag nzColor=\"processing\">\r\n @if (tooltipShowCategory) {\r\n @if (tooltipBoldCategory) { <strong>Categor\u00EDa</strong> } @else { Categor\u00EDa }\r\n }\r\n @if (tooltipShowCategory && tooltipShowValue) { {{ tooltipSeparator }} }\r\n @if (tooltipShowValue) { 1,500 }\r\n </nz-tag>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Modo Avanzado Input Manual (Vinculado al FormGroup) -->\r\n <nz-form-item>\r\n <nz-form-label>Formato Manual (Syncfusion Template)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" formControlName=\"format\"\r\n placeholder=\"Ej: <b>${point.x}</b>: ${point.y}\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- </div> -->\r\n </nz-card>\r\n </div>\r\n </div>\r\n\r\n <!-- Legend Settings (Columna Derecha) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <div formGroupName=\"legends\">\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n de Leyendas\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\" class=\"align-items-center\">\r\n\r\n <!-- Switch Visible: Ocupa todo el ancho en cel (24) y la mitad en pantallas medianas en adelante (12) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-2\">\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <span style=\"font-weight: 500; color: #334155\">Visible</span>\r\n <nz-switch formControlName=\"visible\"></nz-switch>\r\n </div>\r\n </div>\r\n\r\n <!-- Select de Posici\u00F3n: Tambi\u00E9n se pasa abajo en pantallas peque\u00F1as -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-2\">\r\n <span style=\"font-weight: 500; color: #334155\">Posici\u00F3n</span>\r\n\r\n <nz-select nzAllowClear formControlName=\"position\" nzPlaceHolder=\"Posici\u00F3n de leyenda\"\r\n style=\"width: 100%\">\r\n @for (pos of legendPositionOptions; track pos.key) {\r\n <nz-option [nzValue]=\"pos.key\" [nzLabel]=\"pos.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </div>\r\n\r\n </div>\r\n </nz-card>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </form>\r\n\r\n</nz-card>\r\n<!-- Template para el T\u00EDtulo con Icono a la izquierda -->\r\n<ng-template #cardTitleTemplate>\r\n <div style=\"display: flex; align-items: center; gap: 8px;\">\r\n <i nz-icon nzType=\"bar-chart\" nzTheme=\"outline\" style=\"font-size: 20px; color: #028989;\"></i>\r\n <span>{{config.title || 'Gr\u00E1fico de barras'}}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #cardExtraTemplate>\r\n <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"restarConfig()\">\r\n <span nz-icon nzType=\"reload\" nzTheme=\"outline\"></span>\r\n Restaurar\r\n </button>\r\n <!-- <button nz-button nzType=\"primary\" type=\"submit\" (click)=\"onSubmit()\">\r\n <span nz-icon nzType=\"check\"></span>\r\n Aplicar\r\n </button> -->\r\n </div>\r\n</ng-template>", styles: [".custom-card{border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 1px 3px #0000000d;overflow:hidden}.custom-card ::ng-deep .ant-card-head{background-color:#f8fafc;border-bottom:1px solid #e2e8f0;padding:0 20px;min-height:48px}.custom-card ::ng-deep .ant-card-head .ant-card-head-title{font-size:15px;font-weight:600;color:#334155}.custom-card ::ng-deep .ant-card-head .ant-card-head-wrapper{flex-wrap:wrap;row-gap:12px;padding-top:12px;padding-bottom:12px}.custom-card ::ng-deep .ant-card-body{padding:20px}:host ::ng-deep .ant-switch-checked{background-color:#028989!important}.palette-color-input{width:36px;height:28px;padding:0;border:none;border-radius:4px;cursor:pointer;background:transparent}.palette-color-input::-webkit-color-swatch-wrapper{padding:0}.palette-color-input::-webkit-color-swatch{border:1px solid rgba(0,0,0,.15);border-radius:4px}.palette-remove-btn{padding:0 4px;height:22px;line-height:20px;font-size:11px}.palette-actions{display:flex;align-items:center;gap:8px;margin-top:10px}.tooltip-preview-box{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px;padding:6px 10px;background:#fff;border:1px dashed #cbd5e1;border-radius:4px;font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap", "nzRequiredMark"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzVariant", "nzSize", "nzStepperless", "nzStatus", "disabled", "readonly"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i7.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i7.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzVariant", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzPrefix", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus", "nzOnClear"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzSwitchModule }, { kind: "component", type: i8.NzSwitchComponent, selector: "nz-switch", inputs: ["nzLoading", "nzDisabled", "nzControl", "nzCheckedChildren", "nzUnCheckedChildren", "nzSize", "nzId"], exportAs: ["nzSwitch"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i9.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "component", type: NzInputNumberComponent, selector: "nz-input-number", inputs: ["nzId", "nzSize", "nzPlaceHolder", "nzStatus", "nzVariant", "nzStep", "nzMin", "nzMax", "nzPrecision", "nzParser", "nzFormatter", "nzDisabled", "nzReadOnly", "nzAutoFocus", "nzBordered", "nzKeyboard", "nzControls", "nzPrefix", "nzSuffix", "nzAddonBefore", "nzAddonAfter"], outputs: ["nzBlur", "nzFocus", "nzOnStep"], exportAs: ["nzInputNumber"] }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i10.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i11.ɵNzTransitionPatchDirective, selector: "[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i12.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i13.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: NzTagComponent, selector: "nz-tag", inputs: ["nzMode", "nzColor", "nzChecked", "nzBordered"], outputs: ["nzOnClose", "nzCheckedChange"], exportAs: ["nzTag"] }, { kind: "ngmodule", type: NzTooltipModule }, { kind: "directive", type: i14.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }] }); }
5222
5263
  }
5223
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BarChartConfigSyncfusionComponent, decorators: [{
5264
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BarChartConfigComponent, decorators: [{
5224
5265
  type: Component,
5225
- args: [{ selector: 'yw-bar-chart-config-syncfusion', standalone: true, imports: [
5266
+ args: [{ selector: 'yw-bar-chart-config', standalone: true, imports: [
5226
5267
  CommonModule,
5227
5268
  FormsModule,
5228
5269
  ReactiveFormsModule,
@@ -5238,65 +5279,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
5238
5279
  NzIconModule,
5239
5280
  NzTagComponent,
5240
5281
  NzTooltipModule,
5241
- ], template: "<div class=\"main-container-card\">\r\n <!-- Cabecera personalizada -->\r\n <div class=\"flex flex-col sm:flex-row sm:items-center sm:justify-between border-b px-4 py-3 gap-2\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"cardTitleTemplate\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"cardExtraTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <form nz-form [formGroup]=\"configForm\" nzLayout=\"vertical\" class=\"config-form\">\r\n <!-- inputs de configuraci\u00F3n general -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n General\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Provider</nz-form-label>\r\n <nz-form-control>\r\n <nz-select formControlName=\"provider\" nzAllowClear>\r\n <nz-option *ngFor=\"let p of providerOptions\" [nzValue]=\"p\" [nzLabel]=\"p\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"title\" placeholder=\"T\u00EDtulo del gr\u00E1fico\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Texto Etiqueta Eje X</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"xLabelText\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Texto Etiqueta Eje Y</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"yLabelText\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n\r\n </div>\r\n </nz-card>\r\n\r\n\r\n <!-- Tus selectores de color, bordes, etc. -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Estilos y Apariencia\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Border Group -->\r\n <div nz-col [nzXs]=\"24\" formGroupName=\"border\">\r\n <div nz-row [nzGutter]=\"8\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Border Width</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"width\" [nzMin]=\"0\" style=\"width: 100%\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Border Color</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; align-items: center; gap: 12px\">\r\n <!-- Bot\u00F3n para abrir el selector de color -->\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"borderColorInput.click()\">\r\n Seleccionar color\r\n </button>\r\n\r\n <!-- C\u00EDrculo indicador (condicional basado en el control anidado) -->\r\n @if (configForm.get(\"border.color\")?.value) {\r\n <span [style.background-color]=\"\r\n configForm.get('border.color')?.value\r\n \" style=\"\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n display: inline-block;\r\n border: 1px solid #d9d9d9;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n \">\r\n </span>\r\n }\r\n\r\n <!-- Input oculto apuntando al subgrupo formGroupName=\"border\" o con ruta completa -->\r\n <input #borderColorInput type=\"color\" [formControl]=\"$any(configForm.get('border.color'))\"\r\n style=\"display: none\" />\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Border Dash Array</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"dashArray\" [nzMin]=\"0\" [nzStep]=\"0.1\"\r\n style=\"width: 100%\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Variant -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\" formGroupName=\"variant\">\r\n <nz-form-item>\r\n <nz-form-label>Variante (Variant Type)</nz-form-label>\r\n <nz-form-control>\r\n <nz-select formControlName=\"type\" nzAllowClear>\r\n <nz-option *ngFor=\"let v of variantTypeOptions\" [nzValue]=\"v\" [nzLabel]=\"v\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Column Facet -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\" formGroupName=\"columnFacet\">\r\n <nz-form-item>\r\n <nz-form-label>Faceta de Columna (Column Facet)</nz-form-label>\r\n <nz-form-control>\r\n <nz-select formControlName=\"type\" nzAllowClear>\r\n <nz-option *ngFor=\"let f of columnFacetTypeOptions\" [nzValue]=\"f\" [nzLabel]=\"f\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n\r\n <nz-form-item>\r\n <nz-form-label>Color</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; align-items: center; gap: 12px\">\r\n <!-- Bot\u00F3n para abrir el selector de color -->\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"colorInput.click()\">\r\n Seleccionar color\r\n </button>\r\n\r\n <!-- C\u00EDrculo indicador (solo aparece si hay un color seleccionado) -->\r\n @if (configForm.get(\"color\")?.value) {\r\n <span [style.background-color]=\"configForm.get('color')?.value\" style=\"\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n display: inline-block;\r\n border: 1px solid #d9d9d9;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n \">\r\n </span>\r\n }\r\n\r\n <!-- Input de color oculto vinculado al formulario -->\r\n <input #colorInput type=\"color\" formControlName=\"color\" style=\"display: none\" />\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Espaciado de Columnas (columnSpacing)</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"columnSpacing\" [nzStep]=\"0.1\" [nzMin]=\"0\" [nzMax]=\"1\"\r\n style=\"width: 100%\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\">\r\n\r\n <!-- REGLA DE COLORES -->\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Regla de colores Reto\" class=\"mb-3 mt-3 custom-card\">\r\n\r\n <div formGroupName=\"ruleColorBar\">\r\n <div nz-row [nzGutter]=\"[16, 8]\">\r\n\r\n <!-- Regla -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Regla</nz-form-label>\r\n <nz-form-control>\r\n <nz-select nzAllowClear style=\"width: 100%\"\r\n [formControl]=\"$any(configForm.get('ruleColorBar.rule'))\">\r\n <nz-option *ngFor=\"let p of rulesOptions\" [nzValue]=\"p.key\" [nzLabel]=\"p.label\">\r\n </nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Umbral -->\r\n @if (configForm.get('ruleColorBar.rule')?.value === 'threshold') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Umbral</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"thresholdValue\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Cantidad m\u00EDnima -->\r\n @if (configForm.get('ruleColorBar.rule')?.value === 'range') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Cantidad M\u00EDnima</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"minRange\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Cantidad m\u00E1xima -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Cantidad M\u00E1xima</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"maxRange\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Color verdadero -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color Verdadero</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"trueColorInput.click()\">\r\n Seleccionar color\r\n </button>\r\n\r\n @if (configForm.get('ruleColorBar.trueColor')?.value) {\r\n <span [style.backgroundColor]=\"configForm.get('ruleColorBar.trueColor')?.value\" style=\"\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n display: inline-block;\r\n border: 1px solid #d9d9d9;\r\n flex-shrink: 0;\r\n \">\r\n </span>\r\n }\r\n\r\n <input #trueColorInput type=\"color\"\r\n [formControl]=\"$any(configForm.get('ruleColorBar.trueColor'))\" style=\"display: none;\">\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Color falso -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color Falso</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"falseColorInput.click()\">\r\n Seleccionar color\r\n </button>\r\n\r\n @if (configForm.get('ruleColorBar.falseColor')?.value) {\r\n <span [style.backgroundColor]=\"configForm.get('ruleColorBar.falseColor')?.value\" style=\"\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n display: inline-block;\r\n border: 1px solid #d9d9d9;\r\n flex-shrink: 0;\r\n \">\r\n </span>\r\n }\r\n\r\n <input #falseColorInput type=\"color\"\r\n [formControl]=\"$any(configForm.get('ruleColorBar.falseColor'))\" style=\"display: none;\">\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n </div>\r\n </nz-card>\r\n\r\n <!-- Configuraci\u00F3n de Datos (configData) -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n de Datos (configData)\" class=\"mb-3 custom-card\"\r\n formGroupName=\"configData\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Tabla (table)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"table\" placeholder=\"Nombre de tabla\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('table')\"\r\n [disabled]=\"configForm.get('configData.joins')?.value === true\">\r\n <i nz-icon nzType=\"search\"></i>\r\n\r\n </button>\r\n\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('table')\"\r\n [disabled]=\"configForm.get('configData.joins')?.value === true\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Eje X -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje X (xAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"xAxis\" placeholder=\"ej. productos.nombre\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('xAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('xAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y (yAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"yAxis\" placeholder=\"ej. detalle_ventas.monto\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('yAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('yAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y Secundario -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y Secundario (y2Axis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"y2Axis\" placeholder=\"Opcional\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('y2Axis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('y2Axis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Serie -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Serie (serie)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"serie\" placeholder=\"ej. detalle_ventas.sucursal\"\r\n [disabled]=\"disabledAxis\" style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('serie')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('serie')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-4\">\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <span style=\"font-weight: 500; color: #334155\">Habilitar Joins</span>\r\n <nz-switch formControlName=\"joins\"></nz-switch>\r\n </div>\r\n </div> -->\r\n\r\n <div>\r\n <div nz-row [nzGutter]=\"16\" class=\"mt-3\">\r\n <!-- Tooltip Settings (Columna Izquierda) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <div formGroupName=\"tooltip\">\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Tooltip Config\" class=\"mb-3 custom-card\">\r\n\r\n\r\n\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Habilitar Tooltip -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\"\r\n style=\"display: flex; flex-direction: column; align-items: flex-start; gap: 6px;\">\r\n <span style=\"font-weight: 500; color: #334155;\">Habilitar Tooltip</span>\r\n <nz-switch formControlName=\"enable\"></nz-switch>\r\n </div>\r\n\r\n <!-- Compartido (shared) -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\"\r\n style=\"display: flex; flex-direction: column; align-items: flex-start; gap: 6px;\">\r\n <span style=\"font-weight: 500; color: #334155;\">Compartido (shared)</span>\r\n <nz-switch formControlName=\"shared\"></nz-switch>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"display: flex; align-items: center; gap: 12px;\"\r\n *ngIf=\"tooltipEnabled\">\r\n <button nz-button nzType=\"text\" nzSize=\"small\" type=\"button\" (click)=\"toggleTooltipMode()\"\r\n [nzTooltipTitle]=\"isCustomTooltipMode ? 'Cambiar a modo Dise\u00F1ador Visual' : 'Cambiar a modo C\u00F3digo Libre (Avanzado)'\"\r\n nz-tooltip>\r\n <span nz-icon [nzType]=\"isCustomTooltipMode ? 'setting' : 'code'\"></span>\r\n <span style=\"font-size: 11px; margin-left: 4px;\">{{ isCustomTooltipMode ? 'Dise\u00F1ador' :\r\n 'Avanzado'\r\n }}</span>\r\n </button>\r\n </div>\r\n </div>\r\n <!-- Contenido condicional si el tooltip est\u00E1 habilitado -->\r\n @if (tooltipEnabled) {\r\n <div nz-row class=\"mt-3\">\r\n <div nz-col [nzSpan]=\"24\">\r\n @if (!isCustomTooltipMode) {\r\n <!-- Dise\u00F1ador Visual Asistido -->\r\n <div class=\"tooltip-builder-container\">\r\n <div nz-row [nzGutter]=\"[8, 8]\">\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Nombre</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowCategory\" [ngModelOptions]=\"{standalone: true}\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Nombre Negrita</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipBoldCategory\" [ngModelOptions]=\"{standalone: true}\"\r\n [nzDisabled]=\"!tooltipShowCategory\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Valor</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowValue\" [ngModelOptions]=\"{standalone: true}\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Separador</nz-form-label>\r\n <nz-form-control>\r\n <nz-select nzAllowClear [(ngModel)]=\"tooltipSeparator\"\r\n [ngModelOptions]=\"{standalone: true}\" nzSize=\"small\"\r\n (ngModelChange)=\"updateTooltipFromForm()\">\r\n @for (sep of tooltipSeparators; track sep.value) {\r\n <nz-option [nzValue]=\"sep.value\" [nzLabel]=\"sep.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n\r\n <!-- Previsualizaci\u00F3n interactiva del Tooltip -->\r\n <div class=\"tooltip-preview-box mt-2\">\r\n <span style=\"color: #64748b;\">Vista previa:</span>\r\n <nz-tag nzColor=\"processing\">\r\n @if (tooltipShowCategory) {\r\n @if (tooltipBoldCategory) { <strong>Categor\u00EDa</strong> } @else { Categor\u00EDa }\r\n }\r\n @if (tooltipShowCategory && tooltipShowValue) { {{ tooltipSeparator }} }\r\n @if (tooltipShowValue) { 1,500 }\r\n </nz-tag>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Modo Avanzado Input Manual (Vinculado al FormGroup) -->\r\n <nz-form-item>\r\n <nz-form-label>Formato Manual (Syncfusion Template)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" formControlName=\"format\"\r\n placeholder=\"Ej: <b>${point.x}</b>: ${point.y}\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- </div> -->\r\n </nz-card>\r\n </div>\r\n </div>\r\n\r\n <!-- Legend Settings (Columna Derecha) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <div formGroupName=\"legends\">\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n de Leyendas\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\" class=\"align-items-center\">\r\n\r\n <!-- Switch Visible: Ocupa todo el ancho en cel (24) y la mitad en pantallas medianas en adelante (12) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-2\">\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <span style=\"font-weight: 500; color: #334155\">Visible</span>\r\n <nz-switch formControlName=\"visible\"></nz-switch>\r\n </div>\r\n </div>\r\n\r\n <!-- Select de Posici\u00F3n: Tambi\u00E9n se pasa abajo en pantallas peque\u00F1as -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-2\">\r\n <span style=\"font-weight: 500; color: #334155\">Posici\u00F3n</span>\r\n\r\n <nz-select nzAllowClear formControlName=\"position\" nzPlaceHolder=\"Posici\u00F3n de leyenda\"\r\n style=\"width: 100%\">\r\n @for (pos of legendPositionOptions; track pos.key) {\r\n <nz-option [nzValue]=\"pos.key\" [nzLabel]=\"pos.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </div>\r\n\r\n </div>\r\n </nz-card>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </form>\r\n\r\n</div>\r\n<!-- Template para el T\u00EDtulo con Icono a la izquierda -->\r\n<ng-template #cardTitleTemplate>\r\n <div style=\"display: flex; align-items: center; gap: 8px;\">\r\n <i nz-icon nzType=\"bar-chart\" nzTheme=\"outline\" style=\"font-size: 20px; color: #028989;\"></i>\r\n <span>Configuraci\u00F3n del Gr\u00E1fico Bar</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #cardExtraTemplate>\r\n <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"restarConfig()\">\r\n <span nz-icon nzType=\"reload\" nzTheme=\"outline\"></span>\r\n Restaurar\r\n </button>\r\n <!-- <button nz-button nzType=\"primary\" type=\"submit\" (click)=\"onSubmit()\">\r\n <span nz-icon nzType=\"check\"></span>\r\n Aplicar\r\n </button> -->\r\n </div>\r\n</ng-template>", styles: [":host{display:block}:host .custom-card{border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 1px 3px #0000000d;overflow:hidden}:host .custom-card ::ng-deep .ant-card-head{background-color:#f8fafc;border-bottom:1px solid #e2e8f0;padding:0 20px;min-height:48px}:host .custom-card ::ng-deep .ant-card-head .ant-card-head-title{font-size:15px;font-weight:600;color:#334155}:host .custom-card ::ng-deep .ant-card-body{padding:20px}:host ::ng-deep .main-container-card .ant-card-head-wrapper{flex-wrap:wrap;row-gap:12px;padding-top:12px;padding-bottom:12px}:host button[nz-button]:has(i[nzType=search]),:host button[nz-button]:has(span[nzType=search]){color:#028989;border-color:#d1fae5;background-color:#f0fdf4;transition:all .2s ease}:host button[nz-button]:has(i[nzType=search]):hover,:host button[nz-button]:has(span[nzType=search]):hover{color:#028989;border-color:#028989;background-color:#ecfdf5}\n"] }]
5282
+ ], template: "\r\n<nz-card [nzTitle]=\"cardTitleTemplate\" [nzExtra]=\"cardExtraTemplate\" class=\"main-container-card\"[nzBodyStyle]=\"{ padding: '0px' }\"\r\n [ngStyle]=\"{ border: 'none' }\">\r\n\r\n <form nz-form [formGroup]=\"configForm\" nzLayout=\"vertical\" class=\"config-form\">\r\n <!-- inputs de configuraci\u00F3n general -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n General\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Provider</nz-form-label>\r\n <nz-form-control>\r\n <nz-select formControlName=\"provider\" nzAllowClear>\r\n <nz-option *ngFor=\"let p of providerOptions\" [nzValue]=\"p\" [nzLabel]=\"p\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"title\" placeholder=\"T\u00EDtulo del gr\u00E1fico\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Texto Etiqueta Eje X</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"xLabelText\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Texto Etiqueta Eje Y</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"yLabelText\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n\r\n </div>\r\n </nz-card>\r\n\r\n\r\n <!-- Tus selectores de color, bordes, etc. -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Estilos y Apariencia\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Border Group -->\r\n <div nz-col [nzXs]=\"24\" formGroupName=\"border\">\r\n <div nz-row [nzGutter]=\"8\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Border Width</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"width\" [nzMin]=\"0\" style=\"width: 100%\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Border Color</nz-form-label>\r\n \r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [formControl]=\"$any(configForm.get('border.color'))\"\r\n name=\"centerLabelTitleColor\" />\r\n <!-- <div style=\"display: flex; align-items: center; gap: 12px\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"borderColorInput.click()\">\r\n Seleccionar color\r\n </button>\r\n\r\n @if (configForm.get(\"border.color\")?.value) {\r\n <span [style.background-color]=\"\r\n configForm.get('border.color')?.value\r\n \" style=\"\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n display: inline-block;\r\n border: 1px solid #d9d9d9;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n \">\r\n </span>\r\n }\r\n\r\n <input #borderColorInput type=\"color\" [formControl]=\"$any(configForm.get('border.color'))\"\r\n style=\"display: none\" />\r\n </div> -->\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Border Dash Array</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"dashArray\" [nzMin]=\"0\" [nzStep]=\"0.1\"\r\n style=\"width: 100%\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Variant -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\" formGroupName=\"variant\">\r\n <nz-form-item>\r\n <nz-form-label>Variante (Variant Type)</nz-form-label>\r\n <nz-form-control>\r\n <nz-select formControlName=\"type\" nzAllowClear>\r\n <nz-option *ngFor=\"let v of variantTypeOptions\" [nzValue]=\"v\" [nzLabel]=\"v\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Column Facet -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\" formGroupName=\"columnFacet\">\r\n <nz-form-item>\r\n <nz-form-label>Faceta de Columna (Column Facet)</nz-form-label>\r\n <nz-form-control>\r\n <nz-select formControlName=\"type\" nzAllowClear>\r\n <nz-option *ngFor=\"let f of columnFacetTypeOptions\" [nzValue]=\"f\" [nzLabel]=\"f\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n\r\n <nz-form-item>\r\n <nz-form-label>Color de barras</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" formControlName=\"color\"\r\n name=\"centerLabelTitleColor\" />\r\n \r\n </nz-form-control> \r\n </nz-form-item>\r\n </div>\r\n\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Espaciado de Columnas (columnSpacing)</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"columnSpacing\" [nzStep]=\"0.1\" [nzMin]=\"0\" [nzMax]=\"1\"\r\n style=\"width: 100%\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\">\r\n\r\n <!-- REGLA DE COLORES -->\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Regla de colores Reto\" class=\"mb-3 mt-3 custom-card\">\r\n\r\n <div formGroupName=\"ruleColorBar\">\r\n <div nz-row [nzGutter]=\"[16, 8]\">\r\n\r\n <!-- Regla -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Regla</nz-form-label>\r\n <nz-form-control>\r\n <nz-select nzAllowClear style=\"width: 100%\"\r\n [formControl]=\"$any(configForm.get('ruleColorBar.rule'))\">\r\n <nz-option *ngFor=\"let p of rulesOptions\" [nzValue]=\"p.key\" [nzLabel]=\"p.label\">\r\n </nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Umbral -->\r\n @if (configForm.get('ruleColorBar.rule')?.value === 'threshold') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Umbral</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"thresholdValue\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Cantidad m\u00EDnima -->\r\n @if (configForm.get('ruleColorBar.rule')?.value === 'range') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Cantidad M\u00EDnima</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"minRange\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Cantidad m\u00E1xima -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Cantidad M\u00E1xima</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"maxRange\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Color verdadero -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color Verdadero</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [formControl]=\"$any(configForm.get('ruleColorBar.trueColor'))\"\r\n name=\"centerLabelTitleColor\" />\r\n \r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Color falso -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color Falso</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [formControl]=\"$any(configForm.get('ruleColorBar.falseColor'))\"\r\n name=\"centerLabelTitleColor\" />\r\n \r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n </div>\r\n </nz-card>\r\n\r\n <!-- Configuraci\u00F3n de Datos (configData) -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n de Datos (configData)\" class=\"mb-3 custom-card\"\r\n formGroupName=\"configData\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Tabla (table)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"table\" placeholder=\"Nombre de tabla\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('table')\"\r\n [disabled]=\"configForm.get('configData.joins')?.value === true\">\r\n <i nz-icon nzType=\"search\"></i>\r\n\r\n </button>\r\n\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('table')\"\r\n [disabled]=\"configForm.get('configData.joins')?.value === true\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Eje X -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje X (xAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"xAxis\" placeholder=\"ej. productos.nombre\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('xAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('xAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y (yAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"yAxis\" placeholder=\"ej. detalle_ventas.monto\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('yAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('yAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y Secundario -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y Secundario (y2Axis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"y2Axis\" placeholder=\"Opcional\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('y2Axis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('y2Axis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Serie -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Serie (serie)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"serie\" placeholder=\"ej. detalle_ventas.sucursal\"\r\n [disabled]=\"disabledAxis\" style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('serie')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('serie')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-4\">\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <span style=\"font-weight: 500; color: #334155\">Habilitar Joins</span>\r\n <nz-switch formControlName=\"joins\"></nz-switch>\r\n </div>\r\n </div> -->\r\n\r\n <div>\r\n <div nz-row [nzGutter]=\"16\" class=\"mt-3\">\r\n <!-- Tooltip Settings (Columna Izquierda) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <div formGroupName=\"tooltip\">\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n de Tooltip\" class=\"mb-3 custom-card\">\r\n\r\n\r\n\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Habilitar Tooltip -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\"\r\n style=\"display: flex; flex-direction: column; align-items: flex-start; gap: 6px;\">\r\n <span style=\"font-weight: 500; color: #334155;\">Habilitar Tooltip</span>\r\n <nz-switch formControlName=\"enable\"></nz-switch>\r\n </div>\r\n\r\n <!-- Compartido (shared) -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\"\r\n style=\"display: flex; flex-direction: column; align-items: flex-start; gap: 6px;\">\r\n <span style=\"font-weight: 500; color: #334155;\">Compartido (shared)</span>\r\n <nz-switch formControlName=\"shared\"></nz-switch>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"display: flex; align-items: center; gap: 12px;\"\r\n *ngIf=\"tooltipEnabled\">\r\n <button nz-button nzType=\"text\" nzSize=\"small\" type=\"button\" (click)=\"toggleTooltipMode()\"\r\n [nzTooltipTitle]=\"isCustomTooltipMode ? 'Cambiar a modo Dise\u00F1ador Visual' : 'Cambiar a modo C\u00F3digo Libre (Avanzado)'\"\r\n nz-tooltip>\r\n <span nz-icon [nzType]=\"isCustomTooltipMode ? 'setting' : 'code'\"></span>\r\n <span style=\"font-size: 11px; margin-left: 4px;\">{{ isCustomTooltipMode ? 'Dise\u00F1ador' :\r\n 'Avanzado'\r\n }}</span>\r\n </button>\r\n </div>\r\n </div>\r\n <!-- Contenido condicional si el tooltip est\u00E1 habilitado -->\r\n @if (tooltipEnabled) {\r\n <div nz-row class=\"mt-3\">\r\n <div nz-col [nzSpan]=\"24\">\r\n @if (!isCustomTooltipMode) {\r\n <!-- Dise\u00F1ador Visual Asistido -->\r\n <div class=\"tooltip-builder-container\">\r\n <div nz-row [nzGutter]=\"[8, 8]\">\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Nombre</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowCategory\" [ngModelOptions]=\"{standalone: true}\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Nombre Negrita</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipBoldCategory\" [ngModelOptions]=\"{standalone: true}\"\r\n [nzDisabled]=\"!tooltipShowCategory\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Valor</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowValue\" [ngModelOptions]=\"{standalone: true}\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Separador</nz-form-label>\r\n <nz-form-control>\r\n <nz-select nzAllowClear [(ngModel)]=\"tooltipSeparator\"\r\n [ngModelOptions]=\"{standalone: true}\" nzSize=\"small\"\r\n (ngModelChange)=\"updateTooltipFromForm()\">\r\n @for (sep of tooltipSeparators; track sep.value) {\r\n <nz-option [nzValue]=\"sep.value\" [nzLabel]=\"sep.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n\r\n <!-- Previsualizaci\u00F3n interactiva del Tooltip -->\r\n <div class=\"tooltip-preview-box mt-2\">\r\n <span style=\"color: #64748b;\">Vista previa:</span>\r\n <nz-tag nzColor=\"processing\">\r\n @if (tooltipShowCategory) {\r\n @if (tooltipBoldCategory) { <strong>Categor\u00EDa</strong> } @else { Categor\u00EDa }\r\n }\r\n @if (tooltipShowCategory && tooltipShowValue) { {{ tooltipSeparator }} }\r\n @if (tooltipShowValue) { 1,500 }\r\n </nz-tag>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Modo Avanzado Input Manual (Vinculado al FormGroup) -->\r\n <nz-form-item>\r\n <nz-form-label>Formato Manual (Syncfusion Template)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" formControlName=\"format\"\r\n placeholder=\"Ej: <b>${point.x}</b>: ${point.y}\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- </div> -->\r\n </nz-card>\r\n </div>\r\n </div>\r\n\r\n <!-- Legend Settings (Columna Derecha) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <div formGroupName=\"legends\">\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n de Leyendas\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\" class=\"align-items-center\">\r\n\r\n <!-- Switch Visible: Ocupa todo el ancho en cel (24) y la mitad en pantallas medianas en adelante (12) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-2\">\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <span style=\"font-weight: 500; color: #334155\">Visible</span>\r\n <nz-switch formControlName=\"visible\"></nz-switch>\r\n </div>\r\n </div>\r\n\r\n <!-- Select de Posici\u00F3n: Tambi\u00E9n se pasa abajo en pantallas peque\u00F1as -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-2\">\r\n <span style=\"font-weight: 500; color: #334155\">Posici\u00F3n</span>\r\n\r\n <nz-select nzAllowClear formControlName=\"position\" nzPlaceHolder=\"Posici\u00F3n de leyenda\"\r\n style=\"width: 100%\">\r\n @for (pos of legendPositionOptions; track pos.key) {\r\n <nz-option [nzValue]=\"pos.key\" [nzLabel]=\"pos.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </div>\r\n\r\n </div>\r\n </nz-card>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </form>\r\n\r\n</nz-card>\r\n<!-- Template para el T\u00EDtulo con Icono a la izquierda -->\r\n<ng-template #cardTitleTemplate>\r\n <div style=\"display: flex; align-items: center; gap: 8px;\">\r\n <i nz-icon nzType=\"bar-chart\" nzTheme=\"outline\" style=\"font-size: 20px; color: #028989;\"></i>\r\n <span>{{config.title || 'Gr\u00E1fico de barras'}}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #cardExtraTemplate>\r\n <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"restarConfig()\">\r\n <span nz-icon nzType=\"reload\" nzTheme=\"outline\"></span>\r\n Restaurar\r\n </button>\r\n <!-- <button nz-button nzType=\"primary\" type=\"submit\" (click)=\"onSubmit()\">\r\n <span nz-icon nzType=\"check\"></span>\r\n Aplicar\r\n </button> -->\r\n </div>\r\n</ng-template>", styles: [".custom-card{border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 1px 3px #0000000d;overflow:hidden}.custom-card ::ng-deep .ant-card-head{background-color:#f8fafc;border-bottom:1px solid #e2e8f0;padding:0 20px;min-height:48px}.custom-card ::ng-deep .ant-card-head .ant-card-head-title{font-size:15px;font-weight:600;color:#334155}.custom-card ::ng-deep .ant-card-head .ant-card-head-wrapper{flex-wrap:wrap;row-gap:12px;padding-top:12px;padding-bottom:12px}.custom-card ::ng-deep .ant-card-body{padding:20px}:host ::ng-deep .ant-switch-checked{background-color:#028989!important}.palette-color-input{width:36px;height:28px;padding:0;border:none;border-radius:4px;cursor:pointer;background:transparent}.palette-color-input::-webkit-color-swatch-wrapper{padding:0}.palette-color-input::-webkit-color-swatch{border:1px solid rgba(0,0,0,.15);border-radius:4px}.palette-remove-btn{padding:0 4px;height:22px;line-height:20px;font-size:11px}.palette-actions{display:flex;align-items:center;gap:8px;margin-top:10px}.tooltip-preview-box{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px;padding:6px 10px;background:#fff;border:1px dashed #cbd5e1;border-radius:4px;font-size:12px}\n"] }]
5242
5283
  }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$1.NzModalService }], propDecorators: { config: [{
5243
5284
  type: Input
5244
5285
  }], chartData: [{
5245
5286
  type: Input
5246
5287
  }], idComponent: [{
5247
5288
  type: Input
5248
- }], seriesConfigChange: [{
5249
- type: Output
5250
- }], configSelect: [{
5251
- type: Input
5252
- }], axisSelect: [{
5253
- type: Output
5254
- }] } });
5255
-
5256
- class BarChartConfigComponent {
5257
- constructor() {
5258
- this.idComponent = '';
5259
- this.configChange = new EventEmitter();
5260
- this.axisSelect = new EventEmitter();
5261
- }
5262
- ngOnInit() {
5263
- // console.log('chartData:', this.chartData);
5264
- // console.log('config -<- config:', this.config);
5265
- }
5266
- onConfigUpdated(updatedConfig) {
5267
- this.configChange.emit({ ...updatedConfig });
5268
- }
5269
- onColumnSelector(updatedAxis) {
5270
- this.axisSelect.emit(updatedAxis);
5271
- }
5272
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BarChartConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5273
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: BarChartConfigComponent, isStandalone: true, selector: "yw-bar-chart-config", inputs: { chartData: "chartData", config: "config", idComponent: "idComponent", configSelect: "configSelect" }, outputs: { configChange: "configChange", axisSelect: "axisSelect" }, providers: [
5274
- BarSeriesService,
5275
- CategoryService,
5276
- TooltipService,
5277
- LegendService,
5278
- ], ngImport: i0, template: "<!-- @if(config.provider==='syncfusion'){ -->\r\n <yw-bar-chart-config-syncfusion\r\n [chartData]=\"chartData\"\r\n [config] = \"config\"\r\n [idComponent]=\"idComponent\"\r\n (seriesConfigChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onColumnSelector($event)\"\r\n [configSelect]=\"configSelect\"\r\n\r\n >\r\n </yw-bar-chart-config-syncfusion>\r\n<!-- } -->", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BarChartConfigSyncfusionComponent, selector: "yw-bar-chart-config-syncfusion", inputs: ["config", "chartData", "idComponent", "configSelect"], outputs: ["seriesConfigChange", "axisSelect"] }] }); }
5279
- }
5280
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BarChartConfigComponent, decorators: [{
5281
- type: Component,
5282
- args: [{ selector: 'yw-bar-chart-config', standalone: true, imports: [
5283
- CommonModule,
5284
- BarChartConfigSyncfusionComponent
5285
- ], providers: [
5286
- BarSeriesService,
5287
- CategoryService,
5288
- TooltipService,
5289
- LegendService,
5290
- ], template: "<!-- @if(config.provider==='syncfusion'){ -->\r\n <yw-bar-chart-config-syncfusion\r\n [chartData]=\"chartData\"\r\n [config] = \"config\"\r\n [idComponent]=\"idComponent\"\r\n (seriesConfigChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onColumnSelector($event)\"\r\n [configSelect]=\"configSelect\"\r\n\r\n >\r\n </yw-bar-chart-config-syncfusion>\r\n<!-- } -->" }]
5291
- }], propDecorators: { chartData: [{
5292
- type: Input,
5293
- args: ['chartData']
5294
- }], config: [{
5295
- type: Input,
5296
- args: ['config']
5297
- }], idComponent: [{
5298
- type: Input,
5299
- args: ['idComponent']
5300
5289
  }], configChange: [{
5301
5290
  type: Output
5302
5291
  }], configSelect: [{
@@ -5305,13 +5294,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
5305
5294
  type: Output
5306
5295
  }] } });
5307
5296
 
5308
- class LineChartConfigSyncfusionComponent {
5297
+ // import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
5298
+ // import { CommonModule } from '@angular/common';
5299
+ // import {YwBarMappingConfig } from '../../../../../models/config/chart/yw-bar-chart-config.interface';
5300
+ // import { TableWithColumns } from '../../../../../models/base/yw-component-base.interface';
5301
+ // import {
5302
+ // BarSeriesService,
5303
+ // CategoryService,
5304
+ // TooltipService,
5305
+ // LegendService,
5306
+ // } from '@syncfusion/ej2-angular-charts';
5307
+ // import { BarChartConfigSyncfusionComponent } from '../../../../../adapters/charts/bar-chart/syncfusion/config/yw-bar-chart-config-syncfusion.component';
5308
+ // import { LineChartConfigSyncfusionComponent } from '../../../../../adapters/charts/line-chart/syncfusion/config/yw-line-chart-config-syncfusion.component';
5309
+ // @Component({
5310
+ // selector: 'yw-line-chart-config',
5311
+ // standalone: true,
5312
+ // imports: [
5313
+ // LineChartConfigSyncfusionComponent
5314
+ // ],
5315
+ // providers: [
5316
+ // BarSeriesService,
5317
+ // CategoryService,
5318
+ // TooltipService,
5319
+ // LegendService,
5320
+ // ],
5321
+ // templateUrl: './yw-line-chart-config.component.html',
5322
+ // styleUrl: './yw-line-chart-config.component.scss',
5323
+ // })
5324
+ // export class LineChartConfigComponent {
5325
+ // @Input('chartData') chartData!: any;
5326
+ // @Input('config') config!: YwBarMappingConfig;
5327
+ // @Input('idComponent') idComponent: string=''
5328
+ // @Output() configChange = new EventEmitter<YwBarMappingConfig>();
5329
+ // @Input() configSelect?: TableWithColumns;
5330
+ // @Output() axisSelect = new EventEmitter<TableWithColumns>();
5331
+ // ngOnInit(): void {
5332
+ // // console.log('chartData:', this.chartData);
5333
+ // // console.log('config -<- config:', this.config);
5334
+ // }
5335
+ // onConfigUpdated(updatedConfig: YwBarMappingConfig) {
5336
+ // this.configChange.emit({ ...updatedConfig });
5337
+ // }
5338
+ // onColumnSelector(updatedAxis:TableWithColumns){
5339
+ // this.axisSelect.emit(updatedAxis)
5340
+ // }
5341
+ // }
5342
+ class LineChartConfigComponent {
5309
5343
  constructor(fb, modal) {
5310
5344
  this.fb = fb;
5311
5345
  this.modal = modal;
5312
5346
  this.chartData = [];
5313
5347
  this.idComponent = '';
5314
- this.seriesConfigChange = new EventEmitter();
5348
+ this.configChange = new EventEmitter();
5315
5349
  this.axisSelect = new EventEmitter();
5316
5350
  // Opciones para los selects
5317
5351
  this.providerOptions = ['syncfusion', 'echarts', 'chartjs'];
@@ -5465,7 +5499,7 @@ class LineChartConfigSyncfusionComponent {
5465
5499
  y2Axis: formValues?.configData?.y2Axis,
5466
5500
  }
5467
5501
  };
5468
- this.seriesConfigChange.emit(this.config);
5502
+ this.configChange.emit(this.config);
5469
5503
  }
5470
5504
  else {
5471
5505
  Object.values(this.configForm.controls).forEach(control => {
@@ -5483,7 +5517,7 @@ class LineChartConfigSyncfusionComponent {
5483
5517
  const configInitial = JSON.parse(savedData);
5484
5518
  this.config = configInitial;
5485
5519
  this.initForm();
5486
- this.seriesConfigChange.emit(configInitial);
5520
+ this.configChange.emit(configInitial);
5487
5521
  }
5488
5522
  }
5489
5523
  saveLocalStorage() {
@@ -5542,12 +5576,12 @@ class LineChartConfigSyncfusionComponent {
5542
5576
  clearField(targetField) {
5543
5577
  this.configForm.get('configData')?.get(targetField)?.setValue('');
5544
5578
  }
5545
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: LineChartConfigSyncfusionComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$1.NzModalService }], target: i0.ɵɵFactoryTarget.Component }); }
5546
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: LineChartConfigSyncfusionComponent, isStandalone: true, selector: "yw-line-chart-config-syncfusion", inputs: { config: "config", chartData: "chartData", idComponent: "idComponent", configSelect: "configSelect" }, outputs: { seriesConfigChange: "seriesConfigChange", axisSelect: "axisSelect" }, usesOnChanges: true, ngImport: i0, template: "<!-- <nz-card [nzTitle]=\"cardTitleTemplate\" [nzExtra]=\"cardExtraTemplate\" class=\"main-container-card\"> -->\r\n <div class=\"main-container-card\">\r\n <!-- Cabecera personalizada -->\r\n <div class=\"flex flex-col sm:flex-row sm:items-center sm:justify-between border-b px-4 py-3 gap-2\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"cardTitleTemplate\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"cardExtraTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <form nz-form [formGroup]=\"configForm\" nzLayout=\"vertical\" class=\"config-form\">\r\n <!-- inputs de configuraci\u00F3n general -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n General\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Provider</nz-form-label>\r\n <nz-form-control>\r\n <nz-select formControlName=\"provider\" nzAllowClear>\r\n <nz-option *ngFor=\"let p of providerOptions\" [nzValue]=\"p\" [nzLabel]=\"p\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"title\" placeholder=\"T\u00EDtulo del gr\u00E1fico\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Texto Etiqueta Eje X</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"xLabelText\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Texto Etiqueta Eje Y</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"yLabelText\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n </nz-card>\r\n\r\n <!-- Tus selectores de color, bordes, etc. -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Estilos y Apariencia\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Border Group -->\r\n <div nz-col [nzXs]=\"24\">\r\n <div nz-row [nzGutter]=\"8\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>DashArray</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"dashArray\" [nzMin]=\"0\" [nzStep]=\"0.1\"\r\n style=\"width: 100%\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Tama\u00F1o de linea</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"widthLine\" [nzMin]=\"0\" style=\"width: 100%\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\" class=\"mt-4\" style=\"display: flex; align-items: center; gap: 12px\">\r\n <span style=\"font-weight: 500; color: #334155\">Multicolor</span>\r\n <nz-switch formControlName=\"chartoColoredLine\"></nz-switch>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- REGLA DE COLORES -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\">\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Regla de colores Reto\" class=\"mb-3 mt-3 custom-card\">\r\n\r\n <div formGroupName=\"ruleColorPoint\">\r\n <div nz-row [nzGutter]=\"[16, 24]\">\r\n\r\n <!-- Regla -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Regla</nz-form-label>\r\n <nz-form-control>\r\n <nz-select nzAllowClear style=\"width: 100%\"\r\n [formControl]=\"$any(configForm.get('ruleColorPoint.rule'))\">\r\n <nz-option *ngFor=\"let p of rulesOptions\" [nzValue]=\"p.key\" [nzLabel]=\"p.label\">\r\n </nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Umbral -->\r\n @if (configForm.get('ruleColorPoint.rule')?.value === 'threshold') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Umbral</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"thresholdValue\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Cantidad m\u00EDnima -->\r\n @if (configForm.get('ruleColorPoint.rule')?.value === 'range') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Cantidad M\u00EDnima</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"minRange\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Cantidad m\u00E1xima -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Cantidad M\u00E1xima</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"maxRange\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Color verdadero -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color Verdadero</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"trueColorInput.click()\">\r\n Seleccionar color\r\n </button>\r\n\r\n @if (configForm.get('ruleColorPoint.trueColor')?.value) {\r\n <span [style.backgroundColor]=\"configForm.get('ruleColorPoint.trueColor')?.value\" style=\"\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n display: inline-block;\r\n border: 1px solid #d9d9d9;\r\n flex-shrink: 0;\r\n \">\r\n </span>\r\n }\r\n\r\n <input #trueColorInput type=\"color\"\r\n [formControl]=\"$any(configForm.get('ruleColorPoint.trueColor'))\" style=\"display: none;\">\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Color falso -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color Falso</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"falseColorInput.click()\">\r\n Seleccionar color\r\n </button>\r\n\r\n @if (configForm.get('ruleColorPoint.falseColor')?.value) {\r\n <span [style.backgroundColor]=\"configForm.get('ruleColorPoint.falseColor')?.value\" style=\"\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n display: inline-block;\r\n border: 1px solid #d9d9d9;\r\n flex-shrink: 0;\r\n \">\r\n </span>\r\n }\r\n\r\n <input #falseColorInput type=\"color\"\r\n [formControl]=\"$any(configForm.get('ruleColorPoint.falseColor'))\" style=\"display: none;\">\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n </div>\r\n </nz-card>\r\n\r\n <!-- Configuraci\u00F3n de Datos (configData) -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n DataConfig\" class=\"mb-3 custom-card\"\r\n formGroupName=\"configData\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Tabla (table)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"table\" placeholder=\"Nombre de tabla\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('table')\"\r\n [disabled]=\"configForm.get('configData.joins')?.value === true\"\r\n \r\n >\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('table')\"\r\n [disabled]=\"configForm.get('configData.joins')?.value === true\"\r\n >\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Eje X -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje X (xAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"xAxis\" placeholder=\"ej. productos.nombre\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('xAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('xAxis')\"\r\n >\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y (yAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"yAxis\" placeholder=\"ej. detalle_ventas.monto\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('yAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('yAxis')\"\r\n >\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y Secundario -->\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y Secundario (y2Axis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"y2Axis\" placeholder=\"Opcional\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('y2Axis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('y2Axis')\"\r\n >\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Serie -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Serie (serie)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"serie\" placeholder=\"ej. detalle_ventas.sucursal\"\r\n [disabled]=\"disabledAxis\" style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('serie')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button> \r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('serie')\"\r\n >\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n<!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-4\">\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <span style=\"font-weight: 500; color: #334155\">Habilitar Joins</span>\r\n <nz-switch formControlName=\"joins\"></nz-switch>\r\n </div>\r\n</div> -->\r\n </div>\r\n\r\n <div>\r\n <div nz-row [nzGutter]=\"16\" class=\"mt-3\">\r\n <!-- Tooltip Settings (Columna Izquierda) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <div formGroupName=\"tooltip\">\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Tooltip Config\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Habilitar Tooltip -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 6px;\r\n \">\r\n <span style=\"font-weight: 500; color: #334155\">Habilitar Tooltip</span>\r\n <nz-switch formControlName=\"enable\"></nz-switch>\r\n </div>\r\n\r\n <!-- Compartido (shared) -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 6px;\r\n \">\r\n <span style=\"font-weight: 500; color: #334155\">Compartido (shared)</span>\r\n <nz-switch formControlName=\"shared\"></nz-switch>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"display: flex; align-items: center; gap: 12px\"\r\n *ngIf=\"tooltipEnabled\">\r\n <button nz-button nzType=\"text\" nzSize=\"small\" type=\"button\" (click)=\"toggleTooltipMode()\"\r\n [nzTooltipTitle]=\"\r\n isCustomTooltipMode\r\n ? 'Cambiar a modo Dise\u00F1ador Visual'\r\n : 'Cambiar a modo C\u00F3digo Libre (Avanzado)'\r\n \" nz-tooltip>\r\n <span nz-icon [nzType]=\"isCustomTooltipMode ? 'setting' : 'code'\"></span>\r\n <span style=\"font-size: 11px; margin-left: 4px\">{{\r\n isCustomTooltipMode ? \"Dise\u00F1ador\" : \"Avanzado\"\r\n }}</span>\r\n </button>\r\n </div>\r\n </div>\r\n <!-- Contenido condicional si el tooltip est\u00E1 habilitado -->\r\n @if (tooltipEnabled) {\r\n <div nz-row class=\"mt-3\">\r\n <div nz-col [nzSpan]=\"24\">\r\n @if (!isCustomTooltipMode) {\r\n <!-- Dise\u00F1ador Visual Asistido -->\r\n <div class=\"tooltip-builder-container\">\r\n <div nz-row [nzGutter]=\"[8, 8]\">\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Nombre</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowCategory\" [ngModelOptions]=\"{ standalone: true }\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Nombre Negrita</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipBoldCategory\" [ngModelOptions]=\"{ standalone: true }\"\r\n [nzDisabled]=\"!tooltipShowCategory\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Valor</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowValue\" [ngModelOptions]=\"{ standalone: true }\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Separador</nz-form-label>\r\n <nz-form-control>\r\n <nz-select nzAllowClear [(ngModel)]=\"tooltipSeparator\"\r\n [ngModelOptions]=\"{ standalone: true }\" nzSize=\"small\"\r\n (ngModelChange)=\"updateTooltipFromForm()\">\r\n @for (\r\n sep of tooltipSeparators;\r\n track sep.value\r\n ) {\r\n <nz-option [nzValue]=\"sep.value\" [nzLabel]=\"sep.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n\r\n <!-- Previsualizaci\u00F3n interactiva del Tooltip -->\r\n <div class=\"tooltip-preview-box mt-2\">\r\n <span style=\"color: #64748b\">Vista previa:</span>\r\n <nz-tag nzColor=\"processing\">\r\n @if (tooltipShowCategory) {\r\n @if (tooltipBoldCategory) {\r\n <strong>Categor\u00EDa</strong>\r\n } @else {\r\n Categor\u00EDa\r\n }\r\n }\r\n @if (tooltipShowCategory && tooltipShowValue) {\r\n {{ tooltipSeparator }}\r\n }\r\n @if (tooltipShowValue) {\r\n 1,500\r\n }\r\n </nz-tag>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Modo Avanzado Input Manual (Vinculado al FormGroup) -->\r\n <nz-form-item>\r\n <nz-form-label>Formato Manual (Syncfusion Template)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" formControlName=\"format\"\r\n placeholder=\"Ej: <b>${point.x}</b>: ${point.y}\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- </div> -->\r\n </nz-card>\r\n </div>\r\n </div>\r\n\r\n <!-- Legend Settings (Columna Derecha) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <div formGroupName=\"legends\">\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n de Leyendas\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\" class=\"align-items-center\">\r\n <!-- Switch Visible: Ocupa todo el ancho en cel (24) y la mitad en pantallas medianas en adelante (12) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-2\">\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <span style=\"font-weight: 500; color: #334155\">Visible</span>\r\n <nz-switch formControlName=\"visible\"></nz-switch>\r\n </div>\r\n</div>\r\n\r\n <!-- Select de Posici\u00F3n: Tambi\u00E9n se pasa abajo en pantallas peque\u00F1as -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-2\">\r\n <span style=\"font-weight: 500; color: #334155\">Posici\u00F3n</span>\r\n\r\n <nz-select nzAllowClear formControlName=\"position\" nzPlaceHolder=\"Posici\u00F3n de leyenda\"\r\n style=\"width: 100%\">\r\n @for (pos of legendPositionOptions; track pos.key) {\r\n <nz-option [nzValue]=\"pos.key\" [nzLabel]=\"pos.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </form>\r\n</div>\r\n<!-- Template para el T\u00EDtulo con Icono a la izquierda -->\r\n<ng-template #cardTitleTemplate>\r\n <div style=\"display: flex; align-items: center; gap: 8px\">\r\n <i nz-icon nzType=\"line-chart\" nzTheme=\"outline\" style=\"font-size: 20px; color: #028989\"></i>\r\n <span>Configuraci\u00F3n del Gr\u00E1fico Lineas</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #cardExtraTemplate>\r\n <div style=\"display: flex; align-items: center; gap: 12px\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"restarConfig()\">\r\n <span nz-icon nzType=\"reload\" nzTheme=\"outline\"></span>\r\n Restaurar\r\n </button>\r\n <!-- <button nz-button nzType=\"primary\" type=\"submit\" (click)=\"onSubmit()\">\r\n <span nz-icon nzType=\"check\"></span>\r\n Aplicar\r\n </button> -->\r\n </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";:host{display:block}:host .custom-card{border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 1px 3px #0000000d;overflow:hidden}:host .custom-card ::ng-deep .ant-card-head{background-color:#f8fafc;border-bottom:1px solid #e2e8f0;padding:0 20px;min-height:48px}:host .custom-card ::ng-deep .ant-card-head .ant-card-head-title{font-size:15px;font-weight:600;color:#334155}:host .custom-card ::ng-deep .ant-card-body{padding:20px}:host ::ng-deep .main-container-card .ant-card-head-wrapper{flex-wrap:wrap;row-gap:12px;padding-top:12px;padding-bottom:12px}:host button[nz-button]:has(i[nzType=search]),:host button[nz-button]:has(span[nzType=search]){color:#028989;border-color:#d1fae5;background-color:#f0fdf4;transition:all .2s ease}:host button[nz-button]:has(i[nzType=search]):hover,:host button[nz-button]:has(span[nzType=search]):hover{color:#028989;border-color:#028989;background-color:#ecfdf5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap", "nzRequiredMark"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzVariant", "nzSize", "nzStepperless", "nzStatus", "disabled", "readonly"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i7.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i7.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzVariant", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzPrefix", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus", "nzOnClear"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzSwitchModule }, { kind: "component", type: i8.NzSwitchComponent, selector: "nz-switch", inputs: ["nzLoading", "nzDisabled", "nzControl", "nzCheckedChildren", "nzUnCheckedChildren", "nzSize", "nzId"], exportAs: ["nzSwitch"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i9.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "component", type: NzInputNumberComponent, selector: "nz-input-number", inputs: ["nzId", "nzSize", "nzPlaceHolder", "nzStatus", "nzVariant", "nzStep", "nzMin", "nzMax", "nzPrecision", "nzParser", "nzFormatter", "nzDisabled", "nzReadOnly", "nzAutoFocus", "nzBordered", "nzKeyboard", "nzControls", "nzPrefix", "nzSuffix", "nzAddonBefore", "nzAddonAfter"], outputs: ["nzBlur", "nzFocus", "nzOnStep"], exportAs: ["nzInputNumber"] }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i10.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i11.ɵNzTransitionPatchDirective, selector: "[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i12.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i13.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: NzTagComponent, selector: "nz-tag", inputs: ["nzMode", "nzColor", "nzChecked", "nzBordered"], outputs: ["nzOnClose", "nzCheckedChange"], exportAs: ["nzTag"] }, { kind: "ngmodule", type: NzTooltipModule }, { kind: "directive", type: i14.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }] }); }
5579
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: LineChartConfigComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$1.NzModalService }], target: i0.ɵɵFactoryTarget.Component }); }
5580
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: LineChartConfigComponent, isStandalone: true, selector: "yw-line-chart-config", inputs: { config: "config", chartData: "chartData", idComponent: "idComponent", configSelect: "configSelect" }, outputs: { configChange: "configChange", axisSelect: "axisSelect" }, usesOnChanges: true, ngImport: i0, template: "<nz-card [nzTitle]=\"cardTitleTemplate\" [nzExtra]=\"cardExtraTemplate\" class=\"main-container-card\" [nzBodyStyle]=\"{ padding: '0px' }\"\r\n [ngStyle]=\"{ border: 'none' }\">\r\n <form nz-form [formGroup]=\"configForm\" nzLayout=\"vertical\" class=\"config-form\">\r\n <!-- inputs de configuraci\u00F3n general -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n General\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Provider</nz-form-label>\r\n <nz-form-control>\r\n <nz-select formControlName=\"provider\" nzAllowClear>\r\n <nz-option *ngFor=\"let p of providerOptions\" [nzValue]=\"p\" [nzLabel]=\"p\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"title\" placeholder=\"T\u00EDtulo del gr\u00E1fico\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Texto Etiqueta Eje X</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"xLabelText\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Texto Etiqueta Eje Y</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"yLabelText\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n </nz-card>\r\n\r\n <!-- Tus selectores de color, bordes, etc. -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Estilos y Apariencia\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Border Group -->\r\n <div nz-col [nzXs]=\"24\">\r\n <div nz-row [nzGutter]=\"8\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>DashArray</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"dashArray\" [nzMin]=\"0\" [nzStep]=\"0.1\"\r\n style=\"width: 100%\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Tama\u00F1o de linea</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"widthLine\" [nzMin]=\"0\" style=\"width: 100%\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\" class=\"mt-4\" style=\"display: flex; align-items: center; gap: 12px\">\r\n <span style=\"font-weight: 500; color: #334155\">Multicolor</span>\r\n <nz-switch formControlName=\"chartoColoredLine\"></nz-switch>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- REGLA DE COLORES -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\">\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Regla de colores Reto\" class=\"mb-3 mt-3 custom-card\">\r\n\r\n <div formGroupName=\"ruleColorPoint\">\r\n <div nz-row [nzGutter]=\"[16, 24]\">\r\n\r\n <!-- Regla -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Regla</nz-form-label>\r\n <nz-form-control>\r\n <nz-select nzAllowClear style=\"width: 100%\"\r\n [formControl]=\"$any(configForm.get('ruleColorPoint.rule'))\">\r\n <nz-option *ngFor=\"let p of rulesOptions\" [nzValue]=\"p.key\" [nzLabel]=\"p.label\">\r\n </nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Umbral -->\r\n @if (configForm.get('ruleColorPoint.rule')?.value === 'threshold') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Umbral</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"thresholdValue\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Cantidad m\u00EDnima -->\r\n @if (configForm.get('ruleColorPoint.rule')?.value === 'range') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Cantidad M\u00EDnima</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"minRange\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Cantidad m\u00E1xima -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Cantidad M\u00E1xima</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"maxRange\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Color verdadero -->\r\n \r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color Verdadero</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [formControl]=\"$any(configForm.get('ruleColorPoint.trueColor'))\"\r\n name=\"centerLabelTitleColor\" />\r\n \r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Color falso -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color Falso</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [formControl]=\"$any(configForm.get('ruleColorPoint.falseColor'))\"\r\n name=\"centerLabelTitleColor\" />\r\n \r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n </div>\r\n </nz-card>\r\n\r\n <!-- Configuraci\u00F3n de Datos (configData) -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n de Datos (configData)\" class=\"mb-3 custom-card\"\r\n formGroupName=\"configData\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Tabla (table)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"table\" placeholder=\"Nombre de tabla\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('table')\"\r\n [disabled]=\"configForm.get('configData.joins')?.value === true\"\r\n \r\n >\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('table')\"\r\n [disabled]=\"configForm.get('configData.joins')?.value === true\"\r\n >\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Eje X -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje X (xAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"xAxis\" placeholder=\"ej. productos.nombre\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('xAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('xAxis')\"\r\n >\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y (yAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"yAxis\" placeholder=\"ej. detalle_ventas.monto\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('yAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('yAxis')\"\r\n >\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y Secundario -->\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y Secundario (y2Axis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"y2Axis\" placeholder=\"Opcional\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('y2Axis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('y2Axis')\"\r\n >\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Serie -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Serie (serie)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"serie\" placeholder=\"ej. detalle_ventas.sucursal\"\r\n [disabled]=\"disabledAxis\" style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('serie')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button> \r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('serie')\"\r\n >\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n<!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-4\">\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <span style=\"font-weight: 500; color: #334155\">Habilitar Joins</span>\r\n <nz-switch formControlName=\"joins\"></nz-switch>\r\n </div>\r\n</div> -->\r\n </div>\r\n\r\n <div>\r\n <div nz-row [nzGutter]=\"16\" class=\"mt-3\">\r\n <!-- Tooltip Settings (Columna Izquierda) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <div formGroupName=\"tooltip\">\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n de Tooltip\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Habilitar Tooltip -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 6px;\r\n \">\r\n <span style=\"font-weight: 500; color: #334155\">Habilitar Tooltip</span>\r\n <nz-switch formControlName=\"enable\"></nz-switch>\r\n </div>\r\n\r\n <!-- Compartido (shared) -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 6px;\r\n \">\r\n <span style=\"font-weight: 500; color: #334155\">Compartido (shared)</span>\r\n <nz-switch formControlName=\"shared\"></nz-switch>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"display: flex; align-items: center; gap: 12px\"\r\n *ngIf=\"tooltipEnabled\">\r\n <button nz-button nzType=\"text\" nzSize=\"small\" type=\"button\" (click)=\"toggleTooltipMode()\"\r\n [nzTooltipTitle]=\"\r\n isCustomTooltipMode\r\n ? 'Cambiar a modo Dise\u00F1ador Visual'\r\n : 'Cambiar a modo C\u00F3digo Libre (Avanzado)'\r\n \" nz-tooltip>\r\n <span nz-icon [nzType]=\"isCustomTooltipMode ? 'setting' : 'code'\"></span>\r\n <span style=\"font-size: 11px; margin-left: 4px\">{{\r\n isCustomTooltipMode ? \"Dise\u00F1ador\" : \"Avanzado\"\r\n }}</span>\r\n </button>\r\n </div>\r\n </div>\r\n <!-- Contenido condicional si el tooltip est\u00E1 habilitado -->\r\n @if (tooltipEnabled) {\r\n <div nz-row class=\"mt-3\">\r\n <div nz-col [nzSpan]=\"24\">\r\n @if (!isCustomTooltipMode) {\r\n <!-- Dise\u00F1ador Visual Asistido -->\r\n <div class=\"tooltip-builder-container\">\r\n <div nz-row [nzGutter]=\"[8, 8]\">\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Nombre</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowCategory\" [ngModelOptions]=\"{ standalone: true }\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Nombre Negrita</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipBoldCategory\" [ngModelOptions]=\"{ standalone: true }\"\r\n [nzDisabled]=\"!tooltipShowCategory\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Valor</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowValue\" [ngModelOptions]=\"{ standalone: true }\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Separador</nz-form-label>\r\n <nz-form-control>\r\n <nz-select nzAllowClear [(ngModel)]=\"tooltipSeparator\"\r\n [ngModelOptions]=\"{ standalone: true }\" nzSize=\"small\"\r\n (ngModelChange)=\"updateTooltipFromForm()\">\r\n @for (\r\n sep of tooltipSeparators;\r\n track sep.value\r\n ) {\r\n <nz-option [nzValue]=\"sep.value\" [nzLabel]=\"sep.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n\r\n <!-- Previsualizaci\u00F3n interactiva del Tooltip -->\r\n <div class=\"tooltip-preview-box mt-2\">\r\n <span style=\"color: #64748b\">Vista previa:</span>\r\n <nz-tag nzColor=\"processing\">\r\n @if (tooltipShowCategory) {\r\n @if (tooltipBoldCategory) {\r\n <strong>Categor\u00EDa</strong>\r\n } @else {\r\n Categor\u00EDa\r\n }\r\n }\r\n @if (tooltipShowCategory && tooltipShowValue) {\r\n {{ tooltipSeparator }}\r\n }\r\n @if (tooltipShowValue) {\r\n 1,500\r\n }\r\n </nz-tag>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Modo Avanzado Input Manual (Vinculado al FormGroup) -->\r\n <nz-form-item>\r\n <nz-form-label>Formato Manual (Syncfusion Template)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" formControlName=\"format\"\r\n placeholder=\"Ej: <b>${point.x}</b>: ${point.y}\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- </div> -->\r\n </nz-card>\r\n </div>\r\n </div>\r\n\r\n <!-- Legend Settings (Columna Derecha) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <div formGroupName=\"legends\">\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n de Leyendas\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\" class=\"align-items-center\">\r\n <!-- Switch Visible: Ocupa todo el ancho en cel (24) y la mitad en pantallas medianas en adelante (12) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-2\">\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <span style=\"font-weight: 500; color: #334155\">Visible</span>\r\n <nz-switch formControlName=\"visible\"></nz-switch>\r\n </div>\r\n</div>\r\n\r\n <!-- Select de Posici\u00F3n: Tambi\u00E9n se pasa abajo en pantallas peque\u00F1as -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-2\">\r\n <span style=\"font-weight: 500; color: #334155\">Posici\u00F3n</span>\r\n\r\n <nz-select nzAllowClear formControlName=\"position\" nzPlaceHolder=\"Posici\u00F3n de leyenda\"\r\n style=\"width: 100%\">\r\n @for (pos of legendPositionOptions; track pos.key) {\r\n <nz-option [nzValue]=\"pos.key\" [nzLabel]=\"pos.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </form>\r\n</nz-card>\r\n<!-- Template para el T\u00EDtulo con Icono a la izquierda -->\r\n<ng-template #cardTitleTemplate>\r\n <div style=\"display: flex; align-items: center; gap: 8px\">\r\n <i nz-icon nzType=\"line-chart\" nzTheme=\"outline\" style=\"font-size: 20px; color: #028989\"></i>\r\n <span>{{config.title || 'Gr\u00E1fico de linea'}}</span>\r\n \r\n <!-- <span>Configuraci\u00F3n del Gr\u00E1fico Lineas</span> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #cardExtraTemplate>\r\n <div style=\"display: flex; align-items: center; gap: 12px\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"restarConfig()\">\r\n <span nz-icon nzType=\"reload\" nzTheme=\"outline\"></span>\r\n Restaurar\r\n </button>\r\n <!-- <button nz-button nzType=\"primary\" type=\"submit\" (click)=\"onSubmit()\">\r\n <span nz-icon nzType=\"check\"></span>\r\n Aplicar\r\n </button> -->\r\n </div>\r\n</ng-template>", styles: [".custom-card{border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 1px 3px #0000000d;overflow:hidden}.custom-card ::ng-deep .ant-card-head{background-color:#f8fafc;border-bottom:1px solid #e2e8f0;padding:0 20px;min-height:48px}.custom-card ::ng-deep .ant-card-head .ant-card-head-title{font-size:15px;font-weight:600;color:#334155}.custom-card ::ng-deep .ant-card-head .ant-card-head-wrapper{flex-wrap:wrap;row-gap:12px;padding-top:12px;padding-bottom:12px}.custom-card ::ng-deep .ant-card-body{padding:20px}:host ::ng-deep .ant-switch-checked{background-color:#028989!important}.palette-color-input{width:36px;height:28px;padding:0;border:none;border-radius:4px;cursor:pointer;background:transparent}.palette-color-input::-webkit-color-swatch-wrapper{padding:0}.palette-color-input::-webkit-color-swatch{border:1px solid rgba(0,0,0,.15);border-radius:4px}.palette-remove-btn{padding:0 4px;height:22px;line-height:20px;font-size:11px}.palette-actions{display:flex;align-items:center;gap:8px;margin-top:10px}.tooltip-preview-box{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px;padding:6px 10px;background:#fff;border:1px dashed #cbd5e1;border-radius:4px;font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap", "nzRequiredMark"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzVariant", "nzSize", "nzStepperless", "nzStatus", "disabled", "readonly"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i7.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i7.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzVariant", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzPrefix", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus", "nzOnClear"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzSwitchModule }, { kind: "component", type: i8.NzSwitchComponent, selector: "nz-switch", inputs: ["nzLoading", "nzDisabled", "nzControl", "nzCheckedChildren", "nzUnCheckedChildren", "nzSize", "nzId"], exportAs: ["nzSwitch"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i9.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "component", type: NzInputNumberComponent, selector: "nz-input-number", inputs: ["nzId", "nzSize", "nzPlaceHolder", "nzStatus", "nzVariant", "nzStep", "nzMin", "nzMax", "nzPrecision", "nzParser", "nzFormatter", "nzDisabled", "nzReadOnly", "nzAutoFocus", "nzBordered", "nzKeyboard", "nzControls", "nzPrefix", "nzSuffix", "nzAddonBefore", "nzAddonAfter"], outputs: ["nzBlur", "nzFocus", "nzOnStep"], exportAs: ["nzInputNumber"] }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i10.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i11.ɵNzTransitionPatchDirective, selector: "[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i12.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i13.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: NzTagComponent, selector: "nz-tag", inputs: ["nzMode", "nzColor", "nzChecked", "nzBordered"], outputs: ["nzOnClose", "nzCheckedChange"], exportAs: ["nzTag"] }, { kind: "ngmodule", type: NzTooltipModule }, { kind: "directive", type: i14.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }] }); }
5547
5581
  }
5548
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: LineChartConfigSyncfusionComponent, decorators: [{
5582
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: LineChartConfigComponent, decorators: [{
5549
5583
  type: Component,
5550
- args: [{ selector: 'yw-line-chart-config-syncfusion', standalone: true, imports: [
5584
+ args: [{ selector: 'yw-line-chart-config', standalone: true, imports: [
5551
5585
  CommonModule,
5552
5586
  FormsModule,
5553
5587
  ReactiveFormsModule,
@@ -5564,64 +5598,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
5564
5598
  NzTagComponent,
5565
5599
  NzTooltipModule,
5566
5600
  // NzDividerComponent
5567
- ], template: "<!-- <nz-card [nzTitle]=\"cardTitleTemplate\" [nzExtra]=\"cardExtraTemplate\" class=\"main-container-card\"> -->\r\n <div class=\"main-container-card\">\r\n <!-- Cabecera personalizada -->\r\n <div class=\"flex flex-col sm:flex-row sm:items-center sm:justify-between border-b px-4 py-3 gap-2\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"cardTitleTemplate\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"cardExtraTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <form nz-form [formGroup]=\"configForm\" nzLayout=\"vertical\" class=\"config-form\">\r\n <!-- inputs de configuraci\u00F3n general -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n General\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Provider</nz-form-label>\r\n <nz-form-control>\r\n <nz-select formControlName=\"provider\" nzAllowClear>\r\n <nz-option *ngFor=\"let p of providerOptions\" [nzValue]=\"p\" [nzLabel]=\"p\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"title\" placeholder=\"T\u00EDtulo del gr\u00E1fico\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Texto Etiqueta Eje X</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"xLabelText\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Texto Etiqueta Eje Y</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"yLabelText\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n </nz-card>\r\n\r\n <!-- Tus selectores de color, bordes, etc. -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Estilos y Apariencia\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Border Group -->\r\n <div nz-col [nzXs]=\"24\">\r\n <div nz-row [nzGutter]=\"8\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>DashArray</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"dashArray\" [nzMin]=\"0\" [nzStep]=\"0.1\"\r\n style=\"width: 100%\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Tama\u00F1o de linea</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"widthLine\" [nzMin]=\"0\" style=\"width: 100%\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\" class=\"mt-4\" style=\"display: flex; align-items: center; gap: 12px\">\r\n <span style=\"font-weight: 500; color: #334155\">Multicolor</span>\r\n <nz-switch formControlName=\"chartoColoredLine\"></nz-switch>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- REGLA DE COLORES -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\">\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Regla de colores Reto\" class=\"mb-3 mt-3 custom-card\">\r\n\r\n <div formGroupName=\"ruleColorPoint\">\r\n <div nz-row [nzGutter]=\"[16, 24]\">\r\n\r\n <!-- Regla -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Regla</nz-form-label>\r\n <nz-form-control>\r\n <nz-select nzAllowClear style=\"width: 100%\"\r\n [formControl]=\"$any(configForm.get('ruleColorPoint.rule'))\">\r\n <nz-option *ngFor=\"let p of rulesOptions\" [nzValue]=\"p.key\" [nzLabel]=\"p.label\">\r\n </nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Umbral -->\r\n @if (configForm.get('ruleColorPoint.rule')?.value === 'threshold') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Umbral</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"thresholdValue\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Cantidad m\u00EDnima -->\r\n @if (configForm.get('ruleColorPoint.rule')?.value === 'range') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Cantidad M\u00EDnima</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"minRange\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Cantidad m\u00E1xima -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Cantidad M\u00E1xima</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"maxRange\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Color verdadero -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color Verdadero</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"trueColorInput.click()\">\r\n Seleccionar color\r\n </button>\r\n\r\n @if (configForm.get('ruleColorPoint.trueColor')?.value) {\r\n <span [style.backgroundColor]=\"configForm.get('ruleColorPoint.trueColor')?.value\" style=\"\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n display: inline-block;\r\n border: 1px solid #d9d9d9;\r\n flex-shrink: 0;\r\n \">\r\n </span>\r\n }\r\n\r\n <input #trueColorInput type=\"color\"\r\n [formControl]=\"$any(configForm.get('ruleColorPoint.trueColor'))\" style=\"display: none;\">\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Color falso -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color Falso</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"falseColorInput.click()\">\r\n Seleccionar color\r\n </button>\r\n\r\n @if (configForm.get('ruleColorPoint.falseColor')?.value) {\r\n <span [style.backgroundColor]=\"configForm.get('ruleColorPoint.falseColor')?.value\" style=\"\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n display: inline-block;\r\n border: 1px solid #d9d9d9;\r\n flex-shrink: 0;\r\n \">\r\n </span>\r\n }\r\n\r\n <input #falseColorInput type=\"color\"\r\n [formControl]=\"$any(configForm.get('ruleColorPoint.falseColor'))\" style=\"display: none;\">\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n </div>\r\n </nz-card>\r\n\r\n <!-- Configuraci\u00F3n de Datos (configData) -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n DataConfig\" class=\"mb-3 custom-card\"\r\n formGroupName=\"configData\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Tabla (table)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"table\" placeholder=\"Nombre de tabla\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('table')\"\r\n [disabled]=\"configForm.get('configData.joins')?.value === true\"\r\n \r\n >\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('table')\"\r\n [disabled]=\"configForm.get('configData.joins')?.value === true\"\r\n >\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Eje X -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje X (xAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"xAxis\" placeholder=\"ej. productos.nombre\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('xAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('xAxis')\"\r\n >\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y (yAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"yAxis\" placeholder=\"ej. detalle_ventas.monto\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('yAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('yAxis')\"\r\n >\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y Secundario -->\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y Secundario (y2Axis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"y2Axis\" placeholder=\"Opcional\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('y2Axis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('y2Axis')\"\r\n >\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Serie -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Serie (serie)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"serie\" placeholder=\"ej. detalle_ventas.sucursal\"\r\n [disabled]=\"disabledAxis\" style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('serie')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button> \r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('serie')\"\r\n >\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n<!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-4\">\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <span style=\"font-weight: 500; color: #334155\">Habilitar Joins</span>\r\n <nz-switch formControlName=\"joins\"></nz-switch>\r\n </div>\r\n</div> -->\r\n </div>\r\n\r\n <div>\r\n <div nz-row [nzGutter]=\"16\" class=\"mt-3\">\r\n <!-- Tooltip Settings (Columna Izquierda) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <div formGroupName=\"tooltip\">\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Tooltip Config\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Habilitar Tooltip -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 6px;\r\n \">\r\n <span style=\"font-weight: 500; color: #334155\">Habilitar Tooltip</span>\r\n <nz-switch formControlName=\"enable\"></nz-switch>\r\n </div>\r\n\r\n <!-- Compartido (shared) -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 6px;\r\n \">\r\n <span style=\"font-weight: 500; color: #334155\">Compartido (shared)</span>\r\n <nz-switch formControlName=\"shared\"></nz-switch>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"display: flex; align-items: center; gap: 12px\"\r\n *ngIf=\"tooltipEnabled\">\r\n <button nz-button nzType=\"text\" nzSize=\"small\" type=\"button\" (click)=\"toggleTooltipMode()\"\r\n [nzTooltipTitle]=\"\r\n isCustomTooltipMode\r\n ? 'Cambiar a modo Dise\u00F1ador Visual'\r\n : 'Cambiar a modo C\u00F3digo Libre (Avanzado)'\r\n \" nz-tooltip>\r\n <span nz-icon [nzType]=\"isCustomTooltipMode ? 'setting' : 'code'\"></span>\r\n <span style=\"font-size: 11px; margin-left: 4px\">{{\r\n isCustomTooltipMode ? \"Dise\u00F1ador\" : \"Avanzado\"\r\n }}</span>\r\n </button>\r\n </div>\r\n </div>\r\n <!-- Contenido condicional si el tooltip est\u00E1 habilitado -->\r\n @if (tooltipEnabled) {\r\n <div nz-row class=\"mt-3\">\r\n <div nz-col [nzSpan]=\"24\">\r\n @if (!isCustomTooltipMode) {\r\n <!-- Dise\u00F1ador Visual Asistido -->\r\n <div class=\"tooltip-builder-container\">\r\n <div nz-row [nzGutter]=\"[8, 8]\">\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Nombre</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowCategory\" [ngModelOptions]=\"{ standalone: true }\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Nombre Negrita</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipBoldCategory\" [ngModelOptions]=\"{ standalone: true }\"\r\n [nzDisabled]=\"!tooltipShowCategory\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Valor</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowValue\" [ngModelOptions]=\"{ standalone: true }\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Separador</nz-form-label>\r\n <nz-form-control>\r\n <nz-select nzAllowClear [(ngModel)]=\"tooltipSeparator\"\r\n [ngModelOptions]=\"{ standalone: true }\" nzSize=\"small\"\r\n (ngModelChange)=\"updateTooltipFromForm()\">\r\n @for (\r\n sep of tooltipSeparators;\r\n track sep.value\r\n ) {\r\n <nz-option [nzValue]=\"sep.value\" [nzLabel]=\"sep.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n\r\n <!-- Previsualizaci\u00F3n interactiva del Tooltip -->\r\n <div class=\"tooltip-preview-box mt-2\">\r\n <span style=\"color: #64748b\">Vista previa:</span>\r\n <nz-tag nzColor=\"processing\">\r\n @if (tooltipShowCategory) {\r\n @if (tooltipBoldCategory) {\r\n <strong>Categor\u00EDa</strong>\r\n } @else {\r\n Categor\u00EDa\r\n }\r\n }\r\n @if (tooltipShowCategory && tooltipShowValue) {\r\n {{ tooltipSeparator }}\r\n }\r\n @if (tooltipShowValue) {\r\n 1,500\r\n }\r\n </nz-tag>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Modo Avanzado Input Manual (Vinculado al FormGroup) -->\r\n <nz-form-item>\r\n <nz-form-label>Formato Manual (Syncfusion Template)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" formControlName=\"format\"\r\n placeholder=\"Ej: <b>${point.x}</b>: ${point.y}\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- </div> -->\r\n </nz-card>\r\n </div>\r\n </div>\r\n\r\n <!-- Legend Settings (Columna Derecha) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <div formGroupName=\"legends\">\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n de Leyendas\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\" class=\"align-items-center\">\r\n <!-- Switch Visible: Ocupa todo el ancho en cel (24) y la mitad en pantallas medianas en adelante (12) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-2\">\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <span style=\"font-weight: 500; color: #334155\">Visible</span>\r\n <nz-switch formControlName=\"visible\"></nz-switch>\r\n </div>\r\n</div>\r\n\r\n <!-- Select de Posici\u00F3n: Tambi\u00E9n se pasa abajo en pantallas peque\u00F1as -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-2\">\r\n <span style=\"font-weight: 500; color: #334155\">Posici\u00F3n</span>\r\n\r\n <nz-select nzAllowClear formControlName=\"position\" nzPlaceHolder=\"Posici\u00F3n de leyenda\"\r\n style=\"width: 100%\">\r\n @for (pos of legendPositionOptions; track pos.key) {\r\n <nz-option [nzValue]=\"pos.key\" [nzLabel]=\"pos.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </form>\r\n</div>\r\n<!-- Template para el T\u00EDtulo con Icono a la izquierda -->\r\n<ng-template #cardTitleTemplate>\r\n <div style=\"display: flex; align-items: center; gap: 8px\">\r\n <i nz-icon nzType=\"line-chart\" nzTheme=\"outline\" style=\"font-size: 20px; color: #028989\"></i>\r\n <span>Configuraci\u00F3n del Gr\u00E1fico Lineas</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #cardExtraTemplate>\r\n <div style=\"display: flex; align-items: center; gap: 12px\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"restarConfig()\">\r\n <span nz-icon nzType=\"reload\" nzTheme=\"outline\"></span>\r\n Restaurar\r\n </button>\r\n <!-- <button nz-button nzType=\"primary\" type=\"submit\" (click)=\"onSubmit()\">\r\n <span nz-icon nzType=\"check\"></span>\r\n Aplicar\r\n </button> -->\r\n </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";:host{display:block}:host .custom-card{border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 1px 3px #0000000d;overflow:hidden}:host .custom-card ::ng-deep .ant-card-head{background-color:#f8fafc;border-bottom:1px solid #e2e8f0;padding:0 20px;min-height:48px}:host .custom-card ::ng-deep .ant-card-head .ant-card-head-title{font-size:15px;font-weight:600;color:#334155}:host .custom-card ::ng-deep .ant-card-body{padding:20px}:host ::ng-deep .main-container-card .ant-card-head-wrapper{flex-wrap:wrap;row-gap:12px;padding-top:12px;padding-bottom:12px}:host button[nz-button]:has(i[nzType=search]),:host button[nz-button]:has(span[nzType=search]){color:#028989;border-color:#d1fae5;background-color:#f0fdf4;transition:all .2s ease}:host button[nz-button]:has(i[nzType=search]):hover,:host button[nz-button]:has(span[nzType=search]):hover{color:#028989;border-color:#028989;background-color:#ecfdf5}\n"] }]
5601
+ ], template: "<nz-card [nzTitle]=\"cardTitleTemplate\" [nzExtra]=\"cardExtraTemplate\" class=\"main-container-card\" [nzBodyStyle]=\"{ padding: '0px' }\"\r\n [ngStyle]=\"{ border: 'none' }\">\r\n <form nz-form [formGroup]=\"configForm\" nzLayout=\"vertical\" class=\"config-form\">\r\n <!-- inputs de configuraci\u00F3n general -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n General\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Provider</nz-form-label>\r\n <nz-form-control>\r\n <nz-select formControlName=\"provider\" nzAllowClear>\r\n <nz-option *ngFor=\"let p of providerOptions\" [nzValue]=\"p\" [nzLabel]=\"p\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"title\" placeholder=\"T\u00EDtulo del gr\u00E1fico\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Texto Etiqueta Eje X</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"xLabelText\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Texto Etiqueta Eje Y</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"yLabelText\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n </nz-card>\r\n\r\n <!-- Tus selectores de color, bordes, etc. -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Estilos y Apariencia\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Border Group -->\r\n <div nz-col [nzXs]=\"24\">\r\n <div nz-row [nzGutter]=\"8\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>DashArray</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"dashArray\" [nzMin]=\"0\" [nzStep]=\"0.1\"\r\n style=\"width: 100%\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Tama\u00F1o de linea</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"widthLine\" [nzMin]=\"0\" style=\"width: 100%\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\" class=\"mt-4\" style=\"display: flex; align-items: center; gap: 12px\">\r\n <span style=\"font-weight: 500; color: #334155\">Multicolor</span>\r\n <nz-switch formControlName=\"chartoColoredLine\"></nz-switch>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- REGLA DE COLORES -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\">\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Regla de colores Reto\" class=\"mb-3 mt-3 custom-card\">\r\n\r\n <div formGroupName=\"ruleColorPoint\">\r\n <div nz-row [nzGutter]=\"[16, 24]\">\r\n\r\n <!-- Regla -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Regla</nz-form-label>\r\n <nz-form-control>\r\n <nz-select nzAllowClear style=\"width: 100%\"\r\n [formControl]=\"$any(configForm.get('ruleColorPoint.rule'))\">\r\n <nz-option *ngFor=\"let p of rulesOptions\" [nzValue]=\"p.key\" [nzLabel]=\"p.label\">\r\n </nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Umbral -->\r\n @if (configForm.get('ruleColorPoint.rule')?.value === 'threshold') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Umbral</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"thresholdValue\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Cantidad m\u00EDnima -->\r\n @if (configForm.get('ruleColorPoint.rule')?.value === 'range') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Cantidad M\u00EDnima</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"minRange\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Cantidad m\u00E1xima -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Cantidad M\u00E1xima</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"maxRange\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Color verdadero -->\r\n \r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color Verdadero</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [formControl]=\"$any(configForm.get('ruleColorPoint.trueColor'))\"\r\n name=\"centerLabelTitleColor\" />\r\n \r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Color falso -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color Falso</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [formControl]=\"$any(configForm.get('ruleColorPoint.falseColor'))\"\r\n name=\"centerLabelTitleColor\" />\r\n \r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n </div>\r\n </nz-card>\r\n\r\n <!-- Configuraci\u00F3n de Datos (configData) -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n de Datos (configData)\" class=\"mb-3 custom-card\"\r\n formGroupName=\"configData\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Tabla (table)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"table\" placeholder=\"Nombre de tabla\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('table')\"\r\n [disabled]=\"configForm.get('configData.joins')?.value === true\"\r\n \r\n >\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('table')\"\r\n [disabled]=\"configForm.get('configData.joins')?.value === true\"\r\n >\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Eje X -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje X (xAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"xAxis\" placeholder=\"ej. productos.nombre\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('xAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('xAxis')\"\r\n >\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y (yAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"yAxis\" placeholder=\"ej. detalle_ventas.monto\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('yAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('yAxis')\"\r\n >\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y Secundario -->\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y Secundario (y2Axis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"y2Axis\" placeholder=\"Opcional\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('y2Axis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('y2Axis')\"\r\n >\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Serie -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Serie (serie)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"serie\" placeholder=\"ej. detalle_ventas.sucursal\"\r\n [disabled]=\"disabledAxis\" style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('serie')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button> \r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('serie')\"\r\n >\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n<!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-4\">\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <span style=\"font-weight: 500; color: #334155\">Habilitar Joins</span>\r\n <nz-switch formControlName=\"joins\"></nz-switch>\r\n </div>\r\n</div> -->\r\n </div>\r\n\r\n <div>\r\n <div nz-row [nzGutter]=\"16\" class=\"mt-3\">\r\n <!-- Tooltip Settings (Columna Izquierda) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <div formGroupName=\"tooltip\">\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n de Tooltip\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Habilitar Tooltip -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 6px;\r\n \">\r\n <span style=\"font-weight: 500; color: #334155\">Habilitar Tooltip</span>\r\n <nz-switch formControlName=\"enable\"></nz-switch>\r\n </div>\r\n\r\n <!-- Compartido (shared) -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 6px;\r\n \">\r\n <span style=\"font-weight: 500; color: #334155\">Compartido (shared)</span>\r\n <nz-switch formControlName=\"shared\"></nz-switch>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"display: flex; align-items: center; gap: 12px\"\r\n *ngIf=\"tooltipEnabled\">\r\n <button nz-button nzType=\"text\" nzSize=\"small\" type=\"button\" (click)=\"toggleTooltipMode()\"\r\n [nzTooltipTitle]=\"\r\n isCustomTooltipMode\r\n ? 'Cambiar a modo Dise\u00F1ador Visual'\r\n : 'Cambiar a modo C\u00F3digo Libre (Avanzado)'\r\n \" nz-tooltip>\r\n <span nz-icon [nzType]=\"isCustomTooltipMode ? 'setting' : 'code'\"></span>\r\n <span style=\"font-size: 11px; margin-left: 4px\">{{\r\n isCustomTooltipMode ? \"Dise\u00F1ador\" : \"Avanzado\"\r\n }}</span>\r\n </button>\r\n </div>\r\n </div>\r\n <!-- Contenido condicional si el tooltip est\u00E1 habilitado -->\r\n @if (tooltipEnabled) {\r\n <div nz-row class=\"mt-3\">\r\n <div nz-col [nzSpan]=\"24\">\r\n @if (!isCustomTooltipMode) {\r\n <!-- Dise\u00F1ador Visual Asistido -->\r\n <div class=\"tooltip-builder-container\">\r\n <div nz-row [nzGutter]=\"[8, 8]\">\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Nombre</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowCategory\" [ngModelOptions]=\"{ standalone: true }\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Nombre Negrita</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipBoldCategory\" [ngModelOptions]=\"{ standalone: true }\"\r\n [nzDisabled]=\"!tooltipShowCategory\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Valor</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowValue\" [ngModelOptions]=\"{ standalone: true }\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Separador</nz-form-label>\r\n <nz-form-control>\r\n <nz-select nzAllowClear [(ngModel)]=\"tooltipSeparator\"\r\n [ngModelOptions]=\"{ standalone: true }\" nzSize=\"small\"\r\n (ngModelChange)=\"updateTooltipFromForm()\">\r\n @for (\r\n sep of tooltipSeparators;\r\n track sep.value\r\n ) {\r\n <nz-option [nzValue]=\"sep.value\" [nzLabel]=\"sep.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n\r\n <!-- Previsualizaci\u00F3n interactiva del Tooltip -->\r\n <div class=\"tooltip-preview-box mt-2\">\r\n <span style=\"color: #64748b\">Vista previa:</span>\r\n <nz-tag nzColor=\"processing\">\r\n @if (tooltipShowCategory) {\r\n @if (tooltipBoldCategory) {\r\n <strong>Categor\u00EDa</strong>\r\n } @else {\r\n Categor\u00EDa\r\n }\r\n }\r\n @if (tooltipShowCategory && tooltipShowValue) {\r\n {{ tooltipSeparator }}\r\n }\r\n @if (tooltipShowValue) {\r\n 1,500\r\n }\r\n </nz-tag>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Modo Avanzado Input Manual (Vinculado al FormGroup) -->\r\n <nz-form-item>\r\n <nz-form-label>Formato Manual (Syncfusion Template)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" formControlName=\"format\"\r\n placeholder=\"Ej: <b>${point.x}</b>: ${point.y}\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- </div> -->\r\n </nz-card>\r\n </div>\r\n </div>\r\n\r\n <!-- Legend Settings (Columna Derecha) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <div formGroupName=\"legends\">\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n de Leyendas\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\" class=\"align-items-center\">\r\n <!-- Switch Visible: Ocupa todo el ancho en cel (24) y la mitad en pantallas medianas en adelante (12) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-2\">\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <span style=\"font-weight: 500; color: #334155\">Visible</span>\r\n <nz-switch formControlName=\"visible\"></nz-switch>\r\n </div>\r\n</div>\r\n\r\n <!-- Select de Posici\u00F3n: Tambi\u00E9n se pasa abajo en pantallas peque\u00F1as -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-2\">\r\n <span style=\"font-weight: 500; color: #334155\">Posici\u00F3n</span>\r\n\r\n <nz-select nzAllowClear formControlName=\"position\" nzPlaceHolder=\"Posici\u00F3n de leyenda\"\r\n style=\"width: 100%\">\r\n @for (pos of legendPositionOptions; track pos.key) {\r\n <nz-option [nzValue]=\"pos.key\" [nzLabel]=\"pos.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </form>\r\n</nz-card>\r\n<!-- Template para el T\u00EDtulo con Icono a la izquierda -->\r\n<ng-template #cardTitleTemplate>\r\n <div style=\"display: flex; align-items: center; gap: 8px\">\r\n <i nz-icon nzType=\"line-chart\" nzTheme=\"outline\" style=\"font-size: 20px; color: #028989\"></i>\r\n <span>{{config.title || 'Gr\u00E1fico de linea'}}</span>\r\n \r\n <!-- <span>Configuraci\u00F3n del Gr\u00E1fico Lineas</span> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #cardExtraTemplate>\r\n <div style=\"display: flex; align-items: center; gap: 12px\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"restarConfig()\">\r\n <span nz-icon nzType=\"reload\" nzTheme=\"outline\"></span>\r\n Restaurar\r\n </button>\r\n <!-- <button nz-button nzType=\"primary\" type=\"submit\" (click)=\"onSubmit()\">\r\n <span nz-icon nzType=\"check\"></span>\r\n Aplicar\r\n </button> -->\r\n </div>\r\n</ng-template>", styles: [".custom-card{border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 1px 3px #0000000d;overflow:hidden}.custom-card ::ng-deep .ant-card-head{background-color:#f8fafc;border-bottom:1px solid #e2e8f0;padding:0 20px;min-height:48px}.custom-card ::ng-deep .ant-card-head .ant-card-head-title{font-size:15px;font-weight:600;color:#334155}.custom-card ::ng-deep .ant-card-head .ant-card-head-wrapper{flex-wrap:wrap;row-gap:12px;padding-top:12px;padding-bottom:12px}.custom-card ::ng-deep .ant-card-body{padding:20px}:host ::ng-deep .ant-switch-checked{background-color:#028989!important}.palette-color-input{width:36px;height:28px;padding:0;border:none;border-radius:4px;cursor:pointer;background:transparent}.palette-color-input::-webkit-color-swatch-wrapper{padding:0}.palette-color-input::-webkit-color-swatch{border:1px solid rgba(0,0,0,.15);border-radius:4px}.palette-remove-btn{padding:0 4px;height:22px;line-height:20px;font-size:11px}.palette-actions{display:flex;align-items:center;gap:8px;margin-top:10px}.tooltip-preview-box{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px;padding:6px 10px;background:#fff;border:1px dashed #cbd5e1;border-radius:4px;font-size:12px}\n"] }]
5568
5602
  }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$1.NzModalService }], propDecorators: { config: [{
5569
5603
  type: Input
5570
5604
  }], chartData: [{
5571
5605
  type: Input
5572
5606
  }], idComponent: [{
5573
5607
  type: Input
5574
- }], seriesConfigChange: [{
5575
- type: Output
5576
- }], configSelect: [{
5577
- type: Input
5578
- }], axisSelect: [{
5579
- type: Output
5580
- }] } });
5581
-
5582
- class LineChartConfigComponent {
5583
- constructor() {
5584
- this.idComponent = '';
5585
- this.configChange = new EventEmitter();
5586
- this.axisSelect = new EventEmitter();
5587
- }
5588
- ngOnInit() {
5589
- // console.log('chartData:', this.chartData);
5590
- // console.log('config -<- config:', this.config);
5591
- }
5592
- onConfigUpdated(updatedConfig) {
5593
- this.configChange.emit({ ...updatedConfig });
5594
- }
5595
- onColumnSelector(updatedAxis) {
5596
- this.axisSelect.emit(updatedAxis);
5597
- }
5598
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: LineChartConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5599
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: LineChartConfigComponent, isStandalone: true, selector: "yw-line-chart-config", inputs: { chartData: "chartData", config: "config", idComponent: "idComponent", configSelect: "configSelect" }, outputs: { configChange: "configChange", axisSelect: "axisSelect" }, providers: [
5600
- BarSeriesService,
5601
- CategoryService,
5602
- TooltipService,
5603
- LegendService,
5604
- ], ngImport: i0, template: "<!-- @if(config.provider==='syncfusion'){ -->\r\n <yw-line-chart-config-syncfusion\r\n [chartData]=\"chartData\"\r\n [config] = \"config\"\r\n [idComponent]=\"idComponent\"\r\n (seriesConfigChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onColumnSelector($event)\"\r\n [configSelect]=\"configSelect\"\r\n >\r\n </yw-line-chart-config-syncfusion>\r\n<!-- } -->", styles: [""], dependencies: [{ kind: "component", type: LineChartConfigSyncfusionComponent, selector: "yw-line-chart-config-syncfusion", inputs: ["config", "chartData", "idComponent", "configSelect"], outputs: ["seriesConfigChange", "axisSelect"] }] }); }
5605
- }
5606
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: LineChartConfigComponent, decorators: [{
5607
- type: Component,
5608
- args: [{ selector: 'yw-line-chart-config', standalone: true, imports: [
5609
- LineChartConfigSyncfusionComponent
5610
- ], providers: [
5611
- BarSeriesService,
5612
- CategoryService,
5613
- TooltipService,
5614
- LegendService,
5615
- ], template: "<!-- @if(config.provider==='syncfusion'){ -->\r\n <yw-line-chart-config-syncfusion\r\n [chartData]=\"chartData\"\r\n [config] = \"config\"\r\n [idComponent]=\"idComponent\"\r\n (seriesConfigChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onColumnSelector($event)\"\r\n [configSelect]=\"configSelect\"\r\n >\r\n </yw-line-chart-config-syncfusion>\r\n<!-- } -->" }]
5616
- }], propDecorators: { chartData: [{
5617
- type: Input,
5618
- args: ['chartData']
5619
- }], config: [{
5620
- type: Input,
5621
- args: ['config']
5622
- }], idComponent: [{
5623
- type: Input,
5624
- args: ['idComponent']
5625
5608
  }], configChange: [{
5626
5609
  type: Output
5627
5610
  }], configSelect: [{
@@ -5685,6 +5668,7 @@ class PieChartConfigComponent {
5685
5668
  this.title = 'Configuración del Gráfico Pie';
5686
5669
  // ── Outputs ────────────────────────────────────────────────────────────────
5687
5670
  this.configChange = new EventEmitter();
5671
+ this.idComponent = '';
5688
5672
  this.showJsonPreview = false;
5689
5673
  // Listas de opciones
5690
5674
  this.pieVariants = pieVariants;
@@ -5713,6 +5697,27 @@ class PieChartConfigComponent {
5713
5697
  this.debounceSubject.pipe(debounceTime$1(200), takeUntil$1(this.destroy$)).subscribe(() => {
5714
5698
  this.emitConfig();
5715
5699
  });
5700
+ this.saveLocalStorage();
5701
+ }
5702
+ saveLocalStorage() {
5703
+ const key = this.idComponent;
5704
+ if (!localStorage.getItem(key)) {
5705
+ // Como no existe, lo guardamos por primera vez
5706
+ localStorage.setItem(key, JSON.stringify(this.config));
5707
+ }
5708
+ else {
5709
+ console.log("Ya existe un registro previo, no se sobrescribe.");
5710
+ }
5711
+ }
5712
+ restarConfig() {
5713
+ const key = this.idComponent;
5714
+ const savedData = localStorage.getItem(key);
5715
+ if (savedData) {
5716
+ const configInitial = JSON.parse(savedData);
5717
+ this.config = configInitial;
5718
+ // this.initForm();
5719
+ this.configChange.emit(configInitial);
5720
+ }
5716
5721
  }
5717
5722
  ngOnChanges(changes) {
5718
5723
  if (changes['config'] && this.config) {
@@ -6058,7 +6063,7 @@ class PieChartConfigComponent {
6058
6063
  this.onFieldChangeImmediate();
6059
6064
  }
6060
6065
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: PieChartConfigComponent, deps: [{ token: i2$1.NzModalService }], target: i0.ɵɵFactoryTarget.Component }); }
6061
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: PieChartConfigComponent, isStandalone: true, selector: "yw-pie-chart-config", inputs: { chartData: "chartData", config: "config", configSelect: "configSelect", showPreview: "showPreview", showJsonToggle: "showJsonToggle", previewHeight: "previewHeight", title: "title" }, outputs: { axisSelect: "axisSelect", configChange: "configChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container-card\">\r\n <!-- Cabecera personalizada -->\r\n <div class=\"flex flex-col sm:flex-row sm:items-center sm:justify-between border-b px-4 py-3 gap-2\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"configCardTitle\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"configCardExtra\"></ng-container>\r\n </div>\r\n </div>\r\n <ng-template #configCardTitle>\r\n <div class=\"pie-config-card-title\">\r\n <span nz-icon nzType=\"pie-chart\" nzTheme=\"outline\" class=\"pie-config-card-title__icon\"></span>\r\n <span>{{ title }}</span>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- Acciones de la cabecera: toggle JSON (comentado temporalmente) -->\r\n <ng-template #configCardExtra>\r\n <!-- <div class=\"pie-config-card-actions\">\r\n @if (showJsonToggle) {\r\n <span class=\"pie-config-json-label\">Ver JSON:</span>\r\n <nz-switch [(ngModel)]=\"showJsonPreview\" nzSize=\"small\"></nz-switch>\r\n }\r\n </div> -->\r\n </ng-template>\r\n\r\n <!-- Layout Principal del Formulario -->\r\n @if (internalConfig) {\r\n <div nz-row [nzGutter]=\"[20, 20]\">\r\n\r\n <!-- Formulario de configuraci\u00F3n de 3 Secciones (Full width) -->\r\n <div nz-col [nzXs]=\"24\" [nzLg]=\"showPreview ? 14 : 24\">\r\n\r\n <form nz-form nzLayout=\"vertical\">\r\n <div nz-row [nzGutter]=\"[16, 16]\">\r\n\r\n <!-- ==================== CARD 1: CONFIGURACI\u00D3N GENERAL ==================== -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzLg]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Configuraci\u00F3n General\" class=\"sub-card-container mb-3\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Proveedor -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Provider</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.provider\" name=\"chartProvider\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n <nz-option nzValue=\"syncfusion\" nzLabel=\"syncfusion\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- T\u00EDtulo -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"16\" [nzMd]=\"16\">\r\n <nz-form-item>\r\n <nz-form-label>T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.title\" name=\"chartTitle\"\r\n placeholder=\"Ej: Distribuci\u00F3n de Ventas 2026\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n <!-- ==================== CARD 2: APARIENCIA Y ESTILOS ==================== -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzLg]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Estilos y Apariencia\" class=\"sub-card-container mb-3\">\r\n <div nz-row [nzGutter]=\"[16, 12]\">\r\n\r\n <!-- Variante (Pie / Mid) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Variante (Variant Type)</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [ngModel]=\"internalConfig.variant?.type || 'pie'\" name=\"variantType\"\r\n (ngModelChange)=\"onVariantTypeChange($event)\">\r\n @for (opt of pieVariants; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Radio (radius) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Radio (radius)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.radius\" name=\"radius\"\r\n placeholder=\"Ej: 70%, 80%\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Radio interno (solo Dona) -->\r\n @if (isDoughnut) {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Radio Interno (innerRadius)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.innerRadius\" name=\"innerRadius\"\r\n placeholder=\"Ej: 50%\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Paleta de Colores -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzMd]=\"24\">\r\n <nz-form-item>\r\n <nz-form-label>Paleta de Colores</nz-form-label>\r\n <nz-form-control>\r\n <div class=\"palette-container\">\r\n @for (color of internalConfig.palettes; track trackByIndex($index)) {\r\n <div class=\"palette-item\">\r\n <input type=\"color\" [(ngModel)]=\"internalConfig.palettes![$index]\"\r\n [name]=\"'palette_' + $index\" (ngModelChange)=\"onFieldChangeImmediate()\"\r\n class=\"palette-color-input\" />\r\n <button nz-button nzDanger nzSize=\"small\" type=\"button\" class=\"palette-remove-btn\"\r\n (click)=\"removePaletteColor($index)\" nz-tooltip nzTooltipTitle=\"Eliminar color\">\u2715</button>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"palette-actions\">\r\n <button nz-button nzType=\"dashed\" nzSize=\"small\" type=\"button\" (click)=\"addPaletteColor()\">\r\n + Agregar Color\r\n </button>\r\n <button nz-button nzType=\"link\" nzSize=\"small\" type=\"button\" (click)=\"resetPalette()\">\r\n Restaurar Paleta\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Sub-divider: Etiquetas de Datos (Data Labels) -->\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Etiquetas de Datos (Data Labels)</div>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"label-section-wrapper\">\r\n\r\n <!-- Fila de Toggles -->\r\n <div class=\"label-controls-row\">\r\n <nz-form-item class=\"label-form-item\">\r\n <nz-form-label>Mostrar Etiquetas</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.showDataLabels\" name=\"showDataLabels\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n @if (internalConfig.showDataLabels) {\r\n <nz-form-item class=\"label-form-item\">\r\n <nz-form-label>Mostrar Nombre Categor\u00EDa</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.showCategoryName\" name=\"showCategoryName\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n }\r\n </div>\r\n\r\n <!-- Fila de Selectores (solo cuando showDataLabels est\u00E1 activo) -->\r\n @if (internalConfig.showDataLabels) {\r\n <div class=\"label-selects-row\">\r\n <nz-form-item class=\"label-select-item\">\r\n <nz-form-label>Posici\u00F3n Etiquetas</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.labelPosition\" name=\"labelPosition\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n @for (opt of pieLabelPositions; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <nz-form-item class=\"label-select-item\">\r\n <nz-form-label>Modo de Valor</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.valueDisplayMode\" name=\"valueDisplayMode\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n @for (opt of pieValueDisplayModes; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n </div>\r\n </div>\r\n\r\n @if (!isDoughnut) {\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Efectos Visuales</div>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Separar Slice (Explode)</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.explodeSlice\" name=\"explodeSlice\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n @if (internalConfig.explodeSlice) {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>\u00CDndice Slice (0 = primero)</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"0\" [nzStep]=\"1\"\r\n [(ngModel)]=\"internalConfig.explodeIndex\" name=\"explodeIndex\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Distancia (offset)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.explodeOffset\" name=\"explodeOffset\"\r\n placeholder=\"Ej: 15%\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n }\r\n\r\n <!-- Etiqueta Central (solo Dona) -->\r\n @if (isDoughnut) {\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Etiqueta Central (Center Label)</div>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Etiqueta Central</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.showCenterLabel\" name=\"showCenterLabel\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n @if (internalConfig.showCenterLabel) {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"9\">\r\n <nz-form-item>\r\n <nz-form-label>T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.centerLabelTitle\" name=\"centerLabelTitle\"\r\n placeholder=\"Ej: Total\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"9\">\r\n <nz-form-item>\r\n <nz-form-label>Valor (vac\u00EDo = total autom\u00E1tico)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.centerLabelValue\" name=\"centerLabelValue\"\r\n placeholder=\"Autom\u00E1tico\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Tama\u00F1o T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.centerLabelTitleSize\"\r\n name=\"centerLabelTitleSize\" placeholder=\"14px\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Tama\u00F1o Valor</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.centerLabelValueSize\"\r\n name=\"centerLabelValueSize\" placeholder=\"20px\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Color T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.centerLabelTitleColor\"\r\n name=\"centerLabelTitleColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Color Valor</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.centerLabelValueColor\"\r\n name=\"centerLabelValueColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n <!-- ==================== CARD 3: CONFIGURACI\u00D3N DE DATOS (configData) ==================== -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzLg]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Configuraci\u00F3n de Datos\" class=\"sub-card-container mb-3\">\r\n <div nz-row [nzGutter]=\"[16, 12]\">\r\n <!-- Eje X -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Eje X (xAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input [(ngModel)]=\"singleConfig.xAxis\" name=\"xAxis\" placeholder=\"ej. productos.nombre\"\r\n [disabled]=\"disabledAxis\" style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('xAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('xAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y (yAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input [(ngModel)]=\"singleConfig.yAxis\" name=\"yAxis\"\r\n placeholder=\"ej. detalle_ventas.monto\" [disabled]=\"disabledAxis\" style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('yAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('yAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Habilitar Joins -->\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"8\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Habilitar Joins</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"singleConfig.joins\" name=\"joinsEnabled\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Sub-cards: Tooltip Config & Leyendas -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzMd]=\"12\" *ngIf=\"singleConfig.tooltip\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Tooltip Config\">\r\n <div nz-row [nzGutter]=\"[12, 12]\">\r\n\r\n <!-- Habilitar Tooltip + bot\u00F3n de modo (Avanzado / Dise\u00F1ador) -->\r\n <div nz-col [nzXs]=\"24\" class=\"mt-2\"\r\n style=\"display: flex; align-items: flex-end; column-gap: clamp(24px, 6vw, 56px); row-gap: 8px; flex-wrap: wrap;\">\r\n <div style=\"display: flex; flex-direction: column; align-items: flex-start; gap: 6px;\">\r\n <span style=\"font-weight: 500; color: #334155;\">Habilitar Tooltip</span>\r\n <nz-switch [(ngModel)]=\"singleConfig.tooltip.enable\" name=\"tooltipEnable\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </div>\r\n\r\n @if (singleConfig.tooltip.enable) {\r\n <button nz-button nzType=\"text\" nzSize=\"small\" type=\"button\" (click)=\"toggleTooltipMode()\"\r\n [nzTooltipTitle]=\"\r\n isCustomTooltipMode\r\n ? 'Cambiar a modo Dise\u00F1ador Visual'\r\n : 'Cambiar a modo C\u00F3digo Libre (Avanzado)'\r\n \" nz-tooltip>\r\n <span nz-icon [nzType]=\"isCustomTooltipMode ? 'setting' : 'code'\"></span>\r\n <span style=\"font-size: 11px; margin-left: 4px;\">{{\r\n isCustomTooltipMode ? \"Dise\u00F1ador\" : \"Avanzado\"\r\n }}</span>\r\n </button>\r\n }\r\n </div>\r\n \r\n <!-- Compartido (shared) -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\"\r\n style=\"display: flex; flex-direction: column; align-items: flex-start; gap: 6px;\">\r\n <span style=\"font-weight: 500; color: #334155;\">Compartido (shared)</span>\r\n <nz-switch [(ngModel)]=\"singleConfig.tooltip.shared\" name=\"tooltipShared\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </div>\r\n @if (singleConfig.tooltip.enable) {\r\n <div nz-col [nzSpan]=\"24\">\r\n @if (!isCustomTooltipMode) {\r\n <!-- Dise\u00F1ador Visual Asistido -->\r\n <div class=\"tooltip-builder-container\">\r\n <div nz-row [nzGutter]=\"[8, 8]\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Nombre</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowCategory\" name=\"tooltipShowCategory\"\r\n (ngModelChange)=\"updateTooltipFromBuilder()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Nombre Negrita</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipBoldCategory\" name=\"tooltipBoldCategory\"\r\n [nzDisabled]=\"!tooltipShowCategory\"\r\n (ngModelChange)=\"updateTooltipFromBuilder()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Valor</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowValue\" name=\"tooltipShowValue\"\r\n (ngModelChange)=\"updateTooltipFromBuilder()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Separador</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"tooltipSeparator\" name=\"tooltipSeparator\" nzSize=\"small\"\r\n (ngModelChange)=\"updateTooltipFromBuilder()\">\r\n @for (sep of tooltipSeparators; track sep.value) {\r\n <nz-option [nzValue]=\"sep.value\" [nzLabel]=\"sep.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n\r\n <!-- Previsualizaci\u00F3n interactiva del Tooltip -->\r\n <div class=\"tooltip-preview-box mt-2\">\r\n <span style=\"color: #64748b;\">Vista previa:</span>\r\n @if (singleConfig.tooltip.shared) {\r\n <nz-tag nzColor=\"blue\">\u25CF Categor\u00EDa A: 1,500</nz-tag>\r\n <nz-tag nzColor=\"default\">\u25CB Categor\u00EDa B: 850</nz-tag>\r\n } @else {\r\n <nz-tag nzColor=\"processing\">\r\n @if (tooltipShowCategory) {\r\n @if (tooltipBoldCategory) { <strong>Categor\u00EDa</strong> } @else { Categor\u00EDa }\r\n }\r\n @if (tooltipShowCategory && tooltipShowValue) { {{ tooltipSeparator }} }\r\n @if (tooltipShowValue) { 1,500 }\r\n </nz-tag>\r\n }\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Modo Avanzado Input Manual -->\r\n <nz-form-item>\r\n <nz-form-label>Formato Manual (Syncfusion Template)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"singleConfig.tooltip.format\" name=\"tooltipFormat\"\r\n placeholder=\"Ej: <b>${point.x}</b>: ${point.y}\"\r\n (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzMd]=\"12\" *ngIf=\"singleConfig.legends\">\r\n <nz-card\r\n nzType=\"inner\"\r\n nzTitle=\"Configuraci\u00F3n de Leyendas (Legends)\"\r\n class=\"sub-card-container h-100\">\r\n\r\n <div nz-row [nzGutter]=\"[16, 12]\">\r\n\r\n <!-- Visible: izquierda -->\r\n <div nz-col [nzXs]=\"12\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Visible</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch\r\n [(ngModel)]=\"singleConfig.legends.visible\"\r\n name=\"legendsVisible\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n </nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Posici\u00F3n: derecha -->\r\n @if (singleConfig.legends.visible) {\r\n <div nz-col [nzXs]=\"12\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Posici\u00F3n</nz-form-label>\r\n <nz-form-control>\r\n <nz-select\r\n [(ngModel)]=\"singleConfig.legends.position\"\r\n name=\"legendPosition\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n\r\n @for (pos of legendPositions; track pos.value) {\r\n <nz-option\r\n [nzValue]=\"pos.value\"\r\n [nzLabel]=\"pos.label\">\r\n </nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n </div>\r\n </nz-card>\r\n</div>\r\n\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n </div>\r\n </form>\r\n\r\n <!-- @if (showJsonToggle && showJsonPreview) {\r\n <div class=\"json-preview-box mt-3\">\r\n <div class=\"json-preview-title\">JSON Generado (YwPieMappingConfig):</div>\r\n <pre class=\"json-preview-code\"><code>{{ internalConfig | json }}</code></pre>\r\n </div>\r\n } -->\r\n\r\n </div>\r\n\r\n <!-- Previsualizaci\u00F3n en tiempo real (Oculta por defecto seg\u00FAn refactorizaci\u00F3n) -->\r\n @if (showPreview) {\r\n <div nz-col [nzXs]=\"24\" [nzLg]=\"10\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Vista Previa en Vivo\" class=\"pie-preview-card h-100\">\r\n <div class=\"pie-preview-wrapper\" [style.height]=\"previewHeight\">\r\n <yw-pie-chart idComponent=\"pie_config_internal_preview\" [chartData]=\"chartData\" [config]=\"internalConfig\">\r\n </yw-pie-chart>\r\n </div>\r\n </nz-card>\r\n </div>\r\n }\r\n\r\n </div>\r\n }\r\n\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.pie-config-card{border-radius:10px}.pie-config-card-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#1e293b}.pie-config-card-title__icon{font-size:18px;color:#028989}.pie-config-card-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pie-config-json-label{font-size:12px;font-weight:500;color:#64748b;margin-right:4px}nz-form-item{margin-bottom:14px}nz-form-item:last-child{margin-bottom:0}.sub-card-container{border-radius:8px;background-color:#fff;border:1px solid #e2e8f0}.sub-card-container ::ng-deep .ant-card-head,.sub-card-container ::ng-deep .ant-card-head-wrapper{background-color:#f8fafc!important;border-bottom:1px solid #e2e8f0;font-weight:600;font-size:14px;color:#1e293b}nz-select{width:100%}.section-divider-title{font-size:13px;font-weight:600;color:#334155;border-bottom:1px dashed #e2e8f0;padding-bottom:4px;margin-top:8px;margin-bottom:8px}.palette-container{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}.palette-item{display:inline-flex;align-items:center;gap:4px;background-color:#fafafa;border:1px solid #e5e7eb;border-radius:6px;padding:3px 6px 3px 3px;transition:all .2s ease}.palette-item:hover{border-color:#cbd5e1;background-color:#f1f5f9}.palette-color-input{width:36px;height:28px;padding:0;border:none;border-radius:4px;cursor:pointer;background:transparent}.palette-color-input::-webkit-color-swatch-wrapper{padding:0}.palette-color-input::-webkit-color-swatch{border:1px solid rgba(0,0,0,.15);border-radius:4px}.palette-remove-btn{padding:0 4px;height:22px;line-height:20px;font-size:11px}.palette-actions{display:flex;align-items:center;gap:8px;margin-top:10px}.tooltip-card-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;width:100%}.tooltip-mode-btn{padding:3px 10px;height:26px;font-size:11px;font-weight:500;color:#475569;border:1px solid #cbd5e1;border-radius:6px;background-color:#f8fafc;display:inline-flex;align-items:center;gap:5px;transition:all .2s ease;cursor:pointer}.tooltip-mode-btn:hover{color:#028989;border-color:#028989;background-color:#fff;box-shadow:0 1px 3px #10b98126}button[nz-button]:has(i[nzType=search]),button[nz-button]:has(span[nzType=search]){color:#028989;border-color:#d1fae5;background-color:#f0fdf4;transition:all .2s ease}button[nz-button]:has(i[nzType=search]):hover,button[nz-button]:has(span[nzType=search]):hover{color:#028989;border-color:#028989;background-color:#ecfdf5}nz-form-label ::ng-deep label{white-space:normal!important;word-break:break-word;height:auto!important;line-height:1.3!important}.pie-preview-wrapper{width:100%;display:flex;align-items:center;justify-content:center;background:#f8fafc;border-radius:8px;border:1px dashed #cbd5e1;padding:12px;position:relative;overflow:hidden}.pie-preview-wrapper>yw-pie-chart{display:block;width:100%;height:100%}.json-preview-box{background:#0f172a;border-radius:8px;padding:12px;border:1px solid #1e293b}.json-preview-title{color:#94a3b8;font-size:12px;font-weight:600;margin-bottom:6px}.json-preview-code{background:transparent;color:#38bdf8;font-size:11px;font-family:Fira Code,Cascadia Code,Consolas,monospace;margin:0;max-height:240px;overflow-y:auto;white-space:pre-wrap;word-break:break-all}.label-section-wrapper{display:flex;flex-direction:column;gap:4px}.label-controls-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px}.label-selects-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;margin-top:4px}.label-form-item{display:flex;flex-direction:column;margin-bottom:0!important;min-width:120px}.label-select-item{display:flex;flex-direction:column;margin-bottom:0!important;min-width:150px;flex:1 1 150px;max-width:220px}.label-select-item nz-select{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i9.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap", "nzRequiredMark"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzVariant", "nzSize", "nzStepperless", "nzStatus", "disabled", "readonly"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzInputNumberModule }, { kind: "component", type: i8$1.NzInputNumberComponent, selector: "nz-input-number", inputs: ["nzId", "nzSize", "nzPlaceHolder", "nzStatus", "nzVariant", "nzStep", "nzMin", "nzMax", "nzPrecision", "nzParser", "nzFormatter", "nzDisabled", "nzReadOnly", "nzAutoFocus", "nzBordered", "nzKeyboard", "nzControls", "nzPrefix", "nzSuffix", "nzAddonBefore", "nzAddonAfter"], outputs: ["nzBlur", "nzFocus", "nzOnStep"], exportAs: ["nzInputNumber"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i7.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i7.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzVariant", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzPrefix", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus", "nzOnClear"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzSwitchModule }, { kind: "component", type: i8.NzSwitchComponent, selector: "nz-switch", inputs: ["nzLoading", "nzDisabled", "nzControl", "nzCheckedChildren", "nzUnCheckedChildren", "nzSize", "nzId"], exportAs: ["nzSwitch"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i10.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i11.ɵNzTransitionPatchDirective, selector: "[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i12.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i14.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "ngmodule", type: NzTagModule }, { kind: "component", type: i15.NzTagComponent, selector: "nz-tag", inputs: ["nzMode", "nzColor", "nzChecked", "nzBordered"], outputs: ["nzOnClose", "nzCheckedChange"], exportAs: ["nzTag"] }, { kind: "ngmodule", type: NzRadioModule }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i13.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: PieChartComponent, selector: "yw-pie-chart", inputs: ["idComponent", "chartData", "config"] }] }); }
6066
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: PieChartConfigComponent, isStandalone: true, selector: "yw-pie-chart-config", inputs: { chartData: "chartData", config: "config", configSelect: "configSelect", showPreview: "showPreview", showJsonToggle: "showJsonToggle", previewHeight: "previewHeight", title: "title", idComponent: "idComponent" }, outputs: { axisSelect: "axisSelect", configChange: "configChange" }, usesOnChanges: true, ngImport: i0, template: "<nz-card [nzTitle]=\"configCardTitle\" [nzExtra]=\"configCardExtra\" class=\"pie-config-card\" [nzBodyStyle]=\"{ padding: '0px' }\"\r\n [ngStyle]=\"{ border: 'none' }\">\r\n\r\n <!-- T\u00EDtulo interno del card -->\r\n <ng-template #configCardTitle>\r\n\r\n <div style=\"display: flex; align-items: center; gap: 8px\">\r\n <i nz-icon nzType=\"pie-chart\" nzTheme=\"outline\" style=\"font-size: 20px; color: #028989\"></i>\r\n <span>{{ title }}</span>\r\n \r\n </div>\r\n </ng-template>\r\n\r\n <!-- Acciones de la cabecera: toggle JSON (comentado temporalmente) -->\r\n<ng-template #configCardExtra>\r\n <div style=\"display: flex; align-items: center; gap: 12px\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"restarConfig()\" >\r\n <span nz-icon nzType=\"reload\" nzTheme=\"outline\"></span>\r\n Restaurar\r\n </button>\r\n <!-- <button nz-button nzType=\"primary\" type=\"submit\" (click)=\"onSubmit()\">\r\n <span nz-icon nzType=\"check\"></span>\r\n Aplicar\r\n </button> -->\r\n </div>\r\n</ng-template>\r\n\r\n <!-- Layout Principal del Formulario -->\r\n @if (internalConfig) {\r\n <div nz-row [nzGutter]=\"[20, 20]\">\r\n\r\n <!-- Formulario de configuraci\u00F3n de 3 Secciones (Full width) -->\r\n <div nz-col [nzXs]=\"24\" [nzLg]=\"showPreview ? 14 : 24\">\r\n\r\n <form nz-form nzLayout=\"vertical\">\r\n <div nz-row [nzGutter]=\"[16, 16]\">\r\n\r\n <!-- ==================== CARD 1: CONFIGURACI\u00D3N GENERAL ==================== -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzLg]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Configuraci\u00F3n General\" class=\"custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Proveedor -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Provider</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.provider\" name=\"chartProvider\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n <nz-option nzValue=\"syncfusion\" nzLabel=\"syncfusion\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- T\u00EDtulo -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"16\" [nzMd]=\"16\">\r\n <nz-form-item>\r\n <nz-form-label>T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.title\" name=\"chartTitle\"\r\n placeholder=\"Ej: Distribuci\u00F3n de Ventas 2026\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n <!-- ==================== CARD 2: APARIENCIA Y ESTILOS ==================== -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzLg]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Estilos y Apariencia\" class=\"custom-card\">\r\n <div nz-row [nzGutter]=\"[16, 12]\">\r\n\r\n <!-- Variante (Pie / Mid) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Variante (Variant Type)</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [ngModel]=\"internalConfig.variant?.type || 'pie'\" name=\"variantType\"\r\n (ngModelChange)=\"onVariantTypeChange($event)\">\r\n @for (opt of pieVariants; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Radio (radius) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Radio (radius)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.radius\" name=\"radius\"\r\n placeholder=\"Ej: 70%, 80%\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Radio interno (solo Dona) -->\r\n @if (isDoughnut) {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Radio Interno (innerRadius)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.innerRadius\" name=\"innerRadius\"\r\n placeholder=\"Ej: 50%\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Paleta de Colores -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzMd]=\"24\">\r\n <nz-form-item>\r\n <nz-form-label>Paleta de Colores</nz-form-label>\r\n <nz-form-control>\r\n <div class=\"palette-container\">\r\n @for (color of internalConfig.palettes; track trackByIndex($index)) {\r\n <div class=\"palette-item\">\r\n <input type=\"color\" [(ngModel)]=\"internalConfig.palettes![$index]\"\r\n [name]=\"'palette_' + $index\" (ngModelChange)=\"onFieldChangeImmediate()\"\r\n class=\"palette-color-input\" />\r\n <button nz-button nzDanger nzSize=\"small\" type=\"button\" class=\"palette-remove-btn\"\r\n (click)=\"removePaletteColor($index)\" nz-tooltip nzTooltipTitle=\"Eliminar color\">\u2715</button>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"palette-actions\">\r\n <button nz-button nzType=\"dashed\" nzSize=\"small\" type=\"button\" (click)=\"addPaletteColor()\">\r\n + Agregar Color\r\n </button>\r\n <button nz-button nzType=\"link\" nzSize=\"small\" type=\"button\" (click)=\"resetPalette()\">\r\n Restaurar Paleta\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Sub-divider: Etiquetas de Datos (Data Labels) -->\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Etiquetas de Datos (Data Labels)</div>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"label-section-wrapper\">\r\n\r\n <!-- Fila de Toggles -->\r\n <div class=\"label-controls-row\">\r\n <nz-form-item class=\"label-form-item\">\r\n <nz-form-label>Mostrar Etiquetas</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.showDataLabels\" name=\"showDataLabels\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n @if (internalConfig.showDataLabels) {\r\n <nz-form-item class=\"label-form-item\">\r\n <nz-form-label>Mostrar Nombre Categor\u00EDa</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.showCategoryName\" name=\"showCategoryName\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n }\r\n </div>\r\n\r\n <!-- Fila de Selectores (solo cuando showDataLabels est\u00E1 activo) -->\r\n @if (internalConfig.showDataLabels) {\r\n <div class=\"label-selects-row\">\r\n <nz-form-item class=\"label-select-item\">\r\n <nz-form-label>Posici\u00F3n Etiquetas</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.labelPosition\" name=\"labelPosition\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n @for (opt of pieLabelPositions; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <nz-form-item class=\"label-select-item\">\r\n <nz-form-label>Modo de Valor</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.valueDisplayMode\" name=\"valueDisplayMode\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n @for (opt of pieValueDisplayModes; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n </div>\r\n </div>\r\n\r\n @if (!isDoughnut) {\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Efectos Visuales</div>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Separar Slice (Explode)</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.explodeSlice\" name=\"explodeSlice\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n @if (internalConfig.explodeSlice) {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>\u00CDndice Slice (0 = primero)</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"0\" [nzStep]=\"1\"\r\n [(ngModel)]=\"internalConfig.explodeIndex\" name=\"explodeIndex\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Distancia (offset)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.explodeOffset\" name=\"explodeOffset\"\r\n placeholder=\"Ej: 15%\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n }\r\n\r\n <!-- Etiqueta Central (solo Dona) -->\r\n @if (isDoughnut) {\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Etiqueta Central (Center Label)</div>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Etiqueta Central</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.showCenterLabel\" name=\"showCenterLabel\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n @if (internalConfig.showCenterLabel) {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"9\">\r\n <nz-form-item>\r\n <nz-form-label>T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.centerLabelTitle\" name=\"centerLabelTitle\"\r\n placeholder=\"Ej: Total\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"9\">\r\n <nz-form-item>\r\n <nz-form-label>Valor (vac\u00EDo = total autom\u00E1tico)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.centerLabelValue\" name=\"centerLabelValue\"\r\n placeholder=\"Autom\u00E1tico\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Tama\u00F1o T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.centerLabelTitleSize\"\r\n name=\"centerLabelTitleSize\" placeholder=\"14px\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Tama\u00F1o Valor</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.centerLabelValueSize\"\r\n name=\"centerLabelValueSize\" placeholder=\"20px\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Color T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.centerLabelTitleColor\"\r\n name=\"centerLabelTitleColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Color Valor</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.centerLabelValueColor\"\r\n name=\"centerLabelValueColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n <!-- ==================== CARD 3: CONFIGURACI\u00D3N DE DATOS (configData) ==================== -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzLg]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Configuraci\u00F3n de Datos (configData)\" class=\"custom-card\">\r\n <div nz-row [nzGutter]=\"[16, 12]\">\r\n <!-- Eje X -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Eje X (xAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input [(ngModel)]=\"singleConfig.xAxis\" name=\"xAxis\" placeholder=\"ej. productos.nombre\"\r\n [disabled]=\"disabledAxis\" style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('xAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('xAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y (yAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input [(ngModel)]=\"singleConfig.yAxis\" name=\"yAxis\"\r\n placeholder=\"ej. detalle_ventas.monto\" [disabled]=\"disabledAxis\" style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('yAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('yAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Habilitar Joins -->\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"8\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Habilitar Joins</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"singleConfig.joins\" name=\"joinsEnabled\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Sub-cards: Configuraci\u00F3n de Tooltip & Leyendas -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzMd]=\"12\" *ngIf=\"singleConfig.tooltip\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Configuraci\u00F3n de Tooltip\" class=\"custom-card\">\r\n <div nz-row [nzGutter]=\"[12, 12]\">\r\n\r\n <!-- Habilitar Tooltip + bot\u00F3n de modo (Avanzado / Dise\u00F1ador) -->\r\n <div nz-col [nzXs]=\"24\" class=\"mt-2\"\r\n style=\"display: flex; align-items: flex-end; column-gap: clamp(24px, 6vw, 56px); row-gap: 8px; flex-wrap: wrap;\">\r\n <div style=\"display: flex; flex-direction: column; align-items: flex-start; gap: 6px;\">\r\n <span style=\"font-weight: 500; color: #334155;\">Habilitar Tooltip</span>\r\n <nz-switch [(ngModel)]=\"singleConfig.tooltip.enable\" name=\"tooltipEnable\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </div>\r\n\r\n @if (singleConfig.tooltip.enable) {\r\n <button nz-button nzType=\"text\" nzSize=\"small\" type=\"button\" (click)=\"toggleTooltipMode()\"\r\n [nzTooltipTitle]=\"\r\n isCustomTooltipMode\r\n ? 'Cambiar a modo Dise\u00F1ador Visual'\r\n : 'Cambiar a modo C\u00F3digo Libre (Avanzado)'\r\n \" nz-tooltip>\r\n <span nz-icon [nzType]=\"isCustomTooltipMode ? 'setting' : 'code'\"></span>\r\n <span style=\"font-size: 11px; margin-left: 4px;\">{{\r\n isCustomTooltipMode ? \"Dise\u00F1ador\" : \"Avanzado\"\r\n }}</span>\r\n </button>\r\n }\r\n </div>\r\n \r\n <!-- Compartido (shared) -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\"\r\n style=\"display: flex; flex-direction: column; align-items: flex-start; gap: 6px;\">\r\n <span style=\"font-weight: 500; color: #334155;\">Compartido (shared)</span>\r\n <nz-switch [(ngModel)]=\"singleConfig.tooltip.shared\" name=\"tooltipShared\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </div>\r\n @if (singleConfig.tooltip.enable) {\r\n <div nz-col [nzSpan]=\"24\">\r\n @if (!isCustomTooltipMode) {\r\n <!-- Dise\u00F1ador Visual Asistido -->\r\n <div class=\"tooltip-builder-container\">\r\n <div nz-row [nzGutter]=\"[8, 8]\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Nombre</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowCategory\" name=\"tooltipShowCategory\"\r\n (ngModelChange)=\"updateTooltipFromBuilder()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Nombre Negrita</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipBoldCategory\" name=\"tooltipBoldCategory\"\r\n [nzDisabled]=\"!tooltipShowCategory\"\r\n (ngModelChange)=\"updateTooltipFromBuilder()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Valor</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowValue\" name=\"tooltipShowValue\"\r\n (ngModelChange)=\"updateTooltipFromBuilder()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Separador</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"tooltipSeparator\" name=\"tooltipSeparator\" nzSize=\"small\"\r\n (ngModelChange)=\"updateTooltipFromBuilder()\">\r\n @for (sep of tooltipSeparators; track sep.value) {\r\n <nz-option [nzValue]=\"sep.value\" [nzLabel]=\"sep.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n\r\n <!-- Previsualizaci\u00F3n interactiva del Tooltip -->\r\n <div class=\"tooltip-preview-box mt-2\">\r\n <span style=\"color: #64748b;\">Vista previa:</span>\r\n @if (singleConfig.tooltip.shared) {\r\n <nz-tag nzColor=\"blue\">\u25CF Categor\u00EDa A: 1,500</nz-tag>\r\n <nz-tag nzColor=\"default\">\u25CB Categor\u00EDa B: 850</nz-tag>\r\n } @else {\r\n <nz-tag nzColor=\"processing\">\r\n @if (tooltipShowCategory) {\r\n @if (tooltipBoldCategory) { <strong>Categor\u00EDa</strong> } @else { Categor\u00EDa }\r\n }\r\n @if (tooltipShowCategory && tooltipShowValue) { {{ tooltipSeparator }} }\r\n @if (tooltipShowValue) { 1,500 }\r\n </nz-tag>\r\n }\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Modo Avanzado Input Manual -->\r\n <nz-form-item>\r\n <nz-form-label>Formato Manual (Syncfusion Template)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"singleConfig.tooltip.format\" name=\"tooltipFormat\"\r\n placeholder=\"Ej: <b>${point.x}</b>: ${point.y}\"\r\n (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzMd]=\"12\" *ngIf=\"singleConfig.legends\">\r\n <nz-card\r\n nzType=\"inner\"\r\n nzTitle=\"Configuraci\u00F3n de Leyendas (Legends)\"\r\n class=\"custom-card\">\r\n\r\n <div nz-row [nzGutter]=\"[16, 12]\">\r\n\r\n <!-- Visible: izquierda -->\r\n <div nz-col [nzXs]=\"12\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Visible</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch\r\n [(ngModel)]=\"singleConfig.legends.visible\"\r\n name=\"legendsVisible\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n </nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Posici\u00F3n: derecha -->\r\n @if (singleConfig.legends.visible) {\r\n <div nz-col [nzXs]=\"12\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Posici\u00F3n</nz-form-label>\r\n <nz-form-control>\r\n <nz-select\r\n [(ngModel)]=\"singleConfig.legends.position\"\r\n name=\"legendPosition\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n\r\n @for (pos of legendPositions; track pos.value) {\r\n <nz-option\r\n [nzValue]=\"pos.value\"\r\n [nzLabel]=\"pos.label\">\r\n </nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n </div>\r\n </nz-card>\r\n</div>\r\n\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n </div>\r\n </form>\r\n\r\n <!-- @if (showJsonToggle && showJsonPreview) {\r\n <div class=\"json-preview-box mt-3\">\r\n <div class=\"json-preview-title\">JSON Generado (YwPieMappingConfig):</div>\r\n <pre class=\"json-preview-code\"><code>{{ internalConfig | json }}</code></pre>\r\n </div>\r\n } -->\r\n\r\n </div>\r\n\r\n <!-- Previsualizaci\u00F3n en tiempo real (Oculta por defecto seg\u00FAn refactorizaci\u00F3n) -->\r\n @if (showPreview) {\r\n <div nz-col [nzXs]=\"24\" [nzLg]=\"10\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Vista Previa en Vivo\" class=\"custom-card\">\r\n <div class=\"pie-preview-wrapper\" [style.height]=\"previewHeight\">\r\n <yw-pie-chart idComponent=\"pie_config_internal_preview\" [chartData]=\"chartData\" [config]=\"internalConfig\">\r\n </yw-pie-chart>\r\n </div>\r\n </nz-card>\r\n </div>\r\n }\r\n\r\n </div>\r\n }\r\n\r\n</nz-card>", styles: [".tooltip-preview-box{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px;padding:6px 10px;background:#fff;border:1px dashed #cbd5e1;border-radius:4px;font-size:12px}.palette-container{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}.palette-item{display:inline-flex;align-items:center;gap:4px;background-color:#fafafa;border:1px solid #e5e7eb;border-radius:6px;padding:3px 6px 3px 3px;transition:all .2s ease}.palette-item:hover{border-color:#cbd5e1;background-color:#f1f5f9}.palette-color-input{width:36px;height:28px;padding:0;border:none;border-radius:4px;cursor:pointer;background:transparent}.palette-color-input::-webkit-color-swatch-wrapper{padding:0}.palette-color-input::-webkit-color-swatch{border:1px solid rgba(0,0,0,.15);border-radius:4px}.palette-remove-btn{padding:0 4px;height:22px;line-height:20px;font-size:11px}.palette-actions{display:flex;align-items:center;gap:8px;margin-top:10px}.custom-card{border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 1px 3px #0000000d;overflow:hidden}.custom-card ::ng-deep .ant-card-head{background-color:#f8fafc;border-bottom:1px solid #e2e8f0;padding:0 20px;min-height:48px}.custom-card ::ng-deep .ant-card-head .ant-card-head-title{font-size:15px;font-weight:600;color:#334155}.custom-card ::ng-deep .ant-card-head .ant-card-head-wrapper{flex-wrap:wrap;row-gap:12px;padding-top:12px;padding-bottom:12px}.custom-card ::ng-deep .ant-card-body{padding:20px}:host ::ng-deep .ant-switch-checked{background-color:#028989!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i9.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap", "nzRequiredMark"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzVariant", "nzSize", "nzStepperless", "nzStatus", "disabled", "readonly"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzInputNumberModule }, { kind: "component", type: i8$1.NzInputNumberComponent, selector: "nz-input-number", inputs: ["nzId", "nzSize", "nzPlaceHolder", "nzStatus", "nzVariant", "nzStep", "nzMin", "nzMax", "nzPrecision", "nzParser", "nzFormatter", "nzDisabled", "nzReadOnly", "nzAutoFocus", "nzBordered", "nzKeyboard", "nzControls", "nzPrefix", "nzSuffix", "nzAddonBefore", "nzAddonAfter"], outputs: ["nzBlur", "nzFocus", "nzOnStep"], exportAs: ["nzInputNumber"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i7.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i7.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzVariant", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzPrefix", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus", "nzOnClear"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzSwitchModule }, { kind: "component", type: i8.NzSwitchComponent, selector: "nz-switch", inputs: ["nzLoading", "nzDisabled", "nzControl", "nzCheckedChildren", "nzUnCheckedChildren", "nzSize", "nzId"], exportAs: ["nzSwitch"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i10.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i11.ɵNzTransitionPatchDirective, selector: "[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i12.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i14.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "ngmodule", type: NzTagModule }, { kind: "component", type: i15.NzTagComponent, selector: "nz-tag", inputs: ["nzMode", "nzColor", "nzChecked", "nzBordered"], outputs: ["nzOnClose", "nzCheckedChange"], exportAs: ["nzTag"] }, { kind: "ngmodule", type: NzRadioModule }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i13.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: PieChartComponent, selector: "yw-pie-chart", inputs: ["idComponent", "chartData", "config"] }] }); }
6062
6067
  }
6063
6068
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: PieChartConfigComponent, decorators: [{
6064
6069
  type: Component,
@@ -6079,7 +6084,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
6079
6084
  NzIconModule,
6080
6085
  NzDividerModule,
6081
6086
  PieChartComponent,
6082
- ], template: "<div class=\"main-container-card\">\r\n <!-- Cabecera personalizada -->\r\n <div class=\"flex flex-col sm:flex-row sm:items-center sm:justify-between border-b px-4 py-3 gap-2\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"configCardTitle\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"configCardExtra\"></ng-container>\r\n </div>\r\n </div>\r\n <ng-template #configCardTitle>\r\n <div class=\"pie-config-card-title\">\r\n <span nz-icon nzType=\"pie-chart\" nzTheme=\"outline\" class=\"pie-config-card-title__icon\"></span>\r\n <span>{{ title }}</span>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- Acciones de la cabecera: toggle JSON (comentado temporalmente) -->\r\n <ng-template #configCardExtra>\r\n <!-- <div class=\"pie-config-card-actions\">\r\n @if (showJsonToggle) {\r\n <span class=\"pie-config-json-label\">Ver JSON:</span>\r\n <nz-switch [(ngModel)]=\"showJsonPreview\" nzSize=\"small\"></nz-switch>\r\n }\r\n </div> -->\r\n </ng-template>\r\n\r\n <!-- Layout Principal del Formulario -->\r\n @if (internalConfig) {\r\n <div nz-row [nzGutter]=\"[20, 20]\">\r\n\r\n <!-- Formulario de configuraci\u00F3n de 3 Secciones (Full width) -->\r\n <div nz-col [nzXs]=\"24\" [nzLg]=\"showPreview ? 14 : 24\">\r\n\r\n <form nz-form nzLayout=\"vertical\">\r\n <div nz-row [nzGutter]=\"[16, 16]\">\r\n\r\n <!-- ==================== CARD 1: CONFIGURACI\u00D3N GENERAL ==================== -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzLg]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Configuraci\u00F3n General\" class=\"sub-card-container mb-3\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Proveedor -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Provider</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.provider\" name=\"chartProvider\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n <nz-option nzValue=\"syncfusion\" nzLabel=\"syncfusion\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- T\u00EDtulo -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"16\" [nzMd]=\"16\">\r\n <nz-form-item>\r\n <nz-form-label>T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.title\" name=\"chartTitle\"\r\n placeholder=\"Ej: Distribuci\u00F3n de Ventas 2026\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n <!-- ==================== CARD 2: APARIENCIA Y ESTILOS ==================== -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzLg]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Estilos y Apariencia\" class=\"sub-card-container mb-3\">\r\n <div nz-row [nzGutter]=\"[16, 12]\">\r\n\r\n <!-- Variante (Pie / Mid) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Variante (Variant Type)</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [ngModel]=\"internalConfig.variant?.type || 'pie'\" name=\"variantType\"\r\n (ngModelChange)=\"onVariantTypeChange($event)\">\r\n @for (opt of pieVariants; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Radio (radius) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Radio (radius)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.radius\" name=\"radius\"\r\n placeholder=\"Ej: 70%, 80%\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Radio interno (solo Dona) -->\r\n @if (isDoughnut) {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Radio Interno (innerRadius)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.innerRadius\" name=\"innerRadius\"\r\n placeholder=\"Ej: 50%\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Paleta de Colores -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzMd]=\"24\">\r\n <nz-form-item>\r\n <nz-form-label>Paleta de Colores</nz-form-label>\r\n <nz-form-control>\r\n <div class=\"palette-container\">\r\n @for (color of internalConfig.palettes; track trackByIndex($index)) {\r\n <div class=\"palette-item\">\r\n <input type=\"color\" [(ngModel)]=\"internalConfig.palettes![$index]\"\r\n [name]=\"'palette_' + $index\" (ngModelChange)=\"onFieldChangeImmediate()\"\r\n class=\"palette-color-input\" />\r\n <button nz-button nzDanger nzSize=\"small\" type=\"button\" class=\"palette-remove-btn\"\r\n (click)=\"removePaletteColor($index)\" nz-tooltip nzTooltipTitle=\"Eliminar color\">\u2715</button>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"palette-actions\">\r\n <button nz-button nzType=\"dashed\" nzSize=\"small\" type=\"button\" (click)=\"addPaletteColor()\">\r\n + Agregar Color\r\n </button>\r\n <button nz-button nzType=\"link\" nzSize=\"small\" type=\"button\" (click)=\"resetPalette()\">\r\n Restaurar Paleta\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Sub-divider: Etiquetas de Datos (Data Labels) -->\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Etiquetas de Datos (Data Labels)</div>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"label-section-wrapper\">\r\n\r\n <!-- Fila de Toggles -->\r\n <div class=\"label-controls-row\">\r\n <nz-form-item class=\"label-form-item\">\r\n <nz-form-label>Mostrar Etiquetas</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.showDataLabels\" name=\"showDataLabels\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n @if (internalConfig.showDataLabels) {\r\n <nz-form-item class=\"label-form-item\">\r\n <nz-form-label>Mostrar Nombre Categor\u00EDa</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.showCategoryName\" name=\"showCategoryName\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n }\r\n </div>\r\n\r\n <!-- Fila de Selectores (solo cuando showDataLabels est\u00E1 activo) -->\r\n @if (internalConfig.showDataLabels) {\r\n <div class=\"label-selects-row\">\r\n <nz-form-item class=\"label-select-item\">\r\n <nz-form-label>Posici\u00F3n Etiquetas</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.labelPosition\" name=\"labelPosition\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n @for (opt of pieLabelPositions; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <nz-form-item class=\"label-select-item\">\r\n <nz-form-label>Modo de Valor</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.valueDisplayMode\" name=\"valueDisplayMode\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n @for (opt of pieValueDisplayModes; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n </div>\r\n </div>\r\n\r\n @if (!isDoughnut) {\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Efectos Visuales</div>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Separar Slice (Explode)</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.explodeSlice\" name=\"explodeSlice\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n @if (internalConfig.explodeSlice) {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>\u00CDndice Slice (0 = primero)</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"0\" [nzStep]=\"1\"\r\n [(ngModel)]=\"internalConfig.explodeIndex\" name=\"explodeIndex\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Distancia (offset)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.explodeOffset\" name=\"explodeOffset\"\r\n placeholder=\"Ej: 15%\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n }\r\n\r\n <!-- Etiqueta Central (solo Dona) -->\r\n @if (isDoughnut) {\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Etiqueta Central (Center Label)</div>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Etiqueta Central</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.showCenterLabel\" name=\"showCenterLabel\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n @if (internalConfig.showCenterLabel) {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"9\">\r\n <nz-form-item>\r\n <nz-form-label>T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.centerLabelTitle\" name=\"centerLabelTitle\"\r\n placeholder=\"Ej: Total\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"9\">\r\n <nz-form-item>\r\n <nz-form-label>Valor (vac\u00EDo = total autom\u00E1tico)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.centerLabelValue\" name=\"centerLabelValue\"\r\n placeholder=\"Autom\u00E1tico\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Tama\u00F1o T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.centerLabelTitleSize\"\r\n name=\"centerLabelTitleSize\" placeholder=\"14px\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Tama\u00F1o Valor</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.centerLabelValueSize\"\r\n name=\"centerLabelValueSize\" placeholder=\"20px\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Color T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.centerLabelTitleColor\"\r\n name=\"centerLabelTitleColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Color Valor</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.centerLabelValueColor\"\r\n name=\"centerLabelValueColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n <!-- ==================== CARD 3: CONFIGURACI\u00D3N DE DATOS (configData) ==================== -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzLg]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Configuraci\u00F3n de Datos\" class=\"sub-card-container mb-3\">\r\n <div nz-row [nzGutter]=\"[16, 12]\">\r\n <!-- Eje X -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Eje X (xAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input [(ngModel)]=\"singleConfig.xAxis\" name=\"xAxis\" placeholder=\"ej. productos.nombre\"\r\n [disabled]=\"disabledAxis\" style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('xAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('xAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y (yAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input [(ngModel)]=\"singleConfig.yAxis\" name=\"yAxis\"\r\n placeholder=\"ej. detalle_ventas.monto\" [disabled]=\"disabledAxis\" style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('yAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('yAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Habilitar Joins -->\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"8\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Habilitar Joins</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"singleConfig.joins\" name=\"joinsEnabled\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Sub-cards: Tooltip Config & Leyendas -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzMd]=\"12\" *ngIf=\"singleConfig.tooltip\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Tooltip Config\">\r\n <div nz-row [nzGutter]=\"[12, 12]\">\r\n\r\n <!-- Habilitar Tooltip + bot\u00F3n de modo (Avanzado / Dise\u00F1ador) -->\r\n <div nz-col [nzXs]=\"24\" class=\"mt-2\"\r\n style=\"display: flex; align-items: flex-end; column-gap: clamp(24px, 6vw, 56px); row-gap: 8px; flex-wrap: wrap;\">\r\n <div style=\"display: flex; flex-direction: column; align-items: flex-start; gap: 6px;\">\r\n <span style=\"font-weight: 500; color: #334155;\">Habilitar Tooltip</span>\r\n <nz-switch [(ngModel)]=\"singleConfig.tooltip.enable\" name=\"tooltipEnable\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </div>\r\n\r\n @if (singleConfig.tooltip.enable) {\r\n <button nz-button nzType=\"text\" nzSize=\"small\" type=\"button\" (click)=\"toggleTooltipMode()\"\r\n [nzTooltipTitle]=\"\r\n isCustomTooltipMode\r\n ? 'Cambiar a modo Dise\u00F1ador Visual'\r\n : 'Cambiar a modo C\u00F3digo Libre (Avanzado)'\r\n \" nz-tooltip>\r\n <span nz-icon [nzType]=\"isCustomTooltipMode ? 'setting' : 'code'\"></span>\r\n <span style=\"font-size: 11px; margin-left: 4px;\">{{\r\n isCustomTooltipMode ? \"Dise\u00F1ador\" : \"Avanzado\"\r\n }}</span>\r\n </button>\r\n }\r\n </div>\r\n \r\n <!-- Compartido (shared) -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\"\r\n style=\"display: flex; flex-direction: column; align-items: flex-start; gap: 6px;\">\r\n <span style=\"font-weight: 500; color: #334155;\">Compartido (shared)</span>\r\n <nz-switch [(ngModel)]=\"singleConfig.tooltip.shared\" name=\"tooltipShared\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </div>\r\n @if (singleConfig.tooltip.enable) {\r\n <div nz-col [nzSpan]=\"24\">\r\n @if (!isCustomTooltipMode) {\r\n <!-- Dise\u00F1ador Visual Asistido -->\r\n <div class=\"tooltip-builder-container\">\r\n <div nz-row [nzGutter]=\"[8, 8]\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Nombre</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowCategory\" name=\"tooltipShowCategory\"\r\n (ngModelChange)=\"updateTooltipFromBuilder()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Nombre Negrita</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipBoldCategory\" name=\"tooltipBoldCategory\"\r\n [nzDisabled]=\"!tooltipShowCategory\"\r\n (ngModelChange)=\"updateTooltipFromBuilder()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Valor</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowValue\" name=\"tooltipShowValue\"\r\n (ngModelChange)=\"updateTooltipFromBuilder()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Separador</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"tooltipSeparator\" name=\"tooltipSeparator\" nzSize=\"small\"\r\n (ngModelChange)=\"updateTooltipFromBuilder()\">\r\n @for (sep of tooltipSeparators; track sep.value) {\r\n <nz-option [nzValue]=\"sep.value\" [nzLabel]=\"sep.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n\r\n <!-- Previsualizaci\u00F3n interactiva del Tooltip -->\r\n <div class=\"tooltip-preview-box mt-2\">\r\n <span style=\"color: #64748b;\">Vista previa:</span>\r\n @if (singleConfig.tooltip.shared) {\r\n <nz-tag nzColor=\"blue\">\u25CF Categor\u00EDa A: 1,500</nz-tag>\r\n <nz-tag nzColor=\"default\">\u25CB Categor\u00EDa B: 850</nz-tag>\r\n } @else {\r\n <nz-tag nzColor=\"processing\">\r\n @if (tooltipShowCategory) {\r\n @if (tooltipBoldCategory) { <strong>Categor\u00EDa</strong> } @else { Categor\u00EDa }\r\n }\r\n @if (tooltipShowCategory && tooltipShowValue) { {{ tooltipSeparator }} }\r\n @if (tooltipShowValue) { 1,500 }\r\n </nz-tag>\r\n }\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Modo Avanzado Input Manual -->\r\n <nz-form-item>\r\n <nz-form-label>Formato Manual (Syncfusion Template)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"singleConfig.tooltip.format\" name=\"tooltipFormat\"\r\n placeholder=\"Ej: <b>${point.x}</b>: ${point.y}\"\r\n (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzMd]=\"12\" *ngIf=\"singleConfig.legends\">\r\n <nz-card\r\n nzType=\"inner\"\r\n nzTitle=\"Configuraci\u00F3n de Leyendas (Legends)\"\r\n class=\"sub-card-container h-100\">\r\n\r\n <div nz-row [nzGutter]=\"[16, 12]\">\r\n\r\n <!-- Visible: izquierda -->\r\n <div nz-col [nzXs]=\"12\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Visible</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch\r\n [(ngModel)]=\"singleConfig.legends.visible\"\r\n name=\"legendsVisible\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n </nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Posici\u00F3n: derecha -->\r\n @if (singleConfig.legends.visible) {\r\n <div nz-col [nzXs]=\"12\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Posici\u00F3n</nz-form-label>\r\n <nz-form-control>\r\n <nz-select\r\n [(ngModel)]=\"singleConfig.legends.position\"\r\n name=\"legendPosition\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n\r\n @for (pos of legendPositions; track pos.value) {\r\n <nz-option\r\n [nzValue]=\"pos.value\"\r\n [nzLabel]=\"pos.label\">\r\n </nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n </div>\r\n </nz-card>\r\n</div>\r\n\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n </div>\r\n </form>\r\n\r\n <!-- @if (showJsonToggle && showJsonPreview) {\r\n <div class=\"json-preview-box mt-3\">\r\n <div class=\"json-preview-title\">JSON Generado (YwPieMappingConfig):</div>\r\n <pre class=\"json-preview-code\"><code>{{ internalConfig | json }}</code></pre>\r\n </div>\r\n } -->\r\n\r\n </div>\r\n\r\n <!-- Previsualizaci\u00F3n en tiempo real (Oculta por defecto seg\u00FAn refactorizaci\u00F3n) -->\r\n @if (showPreview) {\r\n <div nz-col [nzXs]=\"24\" [nzLg]=\"10\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Vista Previa en Vivo\" class=\"pie-preview-card h-100\">\r\n <div class=\"pie-preview-wrapper\" [style.height]=\"previewHeight\">\r\n <yw-pie-chart idComponent=\"pie_config_internal_preview\" [chartData]=\"chartData\" [config]=\"internalConfig\">\r\n </yw-pie-chart>\r\n </div>\r\n </nz-card>\r\n </div>\r\n }\r\n\r\n </div>\r\n }\r\n\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.pie-config-card{border-radius:10px}.pie-config-card-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#1e293b}.pie-config-card-title__icon{font-size:18px;color:#028989}.pie-config-card-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pie-config-json-label{font-size:12px;font-weight:500;color:#64748b;margin-right:4px}nz-form-item{margin-bottom:14px}nz-form-item:last-child{margin-bottom:0}.sub-card-container{border-radius:8px;background-color:#fff;border:1px solid #e2e8f0}.sub-card-container ::ng-deep .ant-card-head,.sub-card-container ::ng-deep .ant-card-head-wrapper{background-color:#f8fafc!important;border-bottom:1px solid #e2e8f0;font-weight:600;font-size:14px;color:#1e293b}nz-select{width:100%}.section-divider-title{font-size:13px;font-weight:600;color:#334155;border-bottom:1px dashed #e2e8f0;padding-bottom:4px;margin-top:8px;margin-bottom:8px}.palette-container{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}.palette-item{display:inline-flex;align-items:center;gap:4px;background-color:#fafafa;border:1px solid #e5e7eb;border-radius:6px;padding:3px 6px 3px 3px;transition:all .2s ease}.palette-item:hover{border-color:#cbd5e1;background-color:#f1f5f9}.palette-color-input{width:36px;height:28px;padding:0;border:none;border-radius:4px;cursor:pointer;background:transparent}.palette-color-input::-webkit-color-swatch-wrapper{padding:0}.palette-color-input::-webkit-color-swatch{border:1px solid rgba(0,0,0,.15);border-radius:4px}.palette-remove-btn{padding:0 4px;height:22px;line-height:20px;font-size:11px}.palette-actions{display:flex;align-items:center;gap:8px;margin-top:10px}.tooltip-card-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;width:100%}.tooltip-mode-btn{padding:3px 10px;height:26px;font-size:11px;font-weight:500;color:#475569;border:1px solid #cbd5e1;border-radius:6px;background-color:#f8fafc;display:inline-flex;align-items:center;gap:5px;transition:all .2s ease;cursor:pointer}.tooltip-mode-btn:hover{color:#028989;border-color:#028989;background-color:#fff;box-shadow:0 1px 3px #10b98126}button[nz-button]:has(i[nzType=search]),button[nz-button]:has(span[nzType=search]){color:#028989;border-color:#d1fae5;background-color:#f0fdf4;transition:all .2s ease}button[nz-button]:has(i[nzType=search]):hover,button[nz-button]:has(span[nzType=search]):hover{color:#028989;border-color:#028989;background-color:#ecfdf5}nz-form-label ::ng-deep label{white-space:normal!important;word-break:break-word;height:auto!important;line-height:1.3!important}.pie-preview-wrapper{width:100%;display:flex;align-items:center;justify-content:center;background:#f8fafc;border-radius:8px;border:1px dashed #cbd5e1;padding:12px;position:relative;overflow:hidden}.pie-preview-wrapper>yw-pie-chart{display:block;width:100%;height:100%}.json-preview-box{background:#0f172a;border-radius:8px;padding:12px;border:1px solid #1e293b}.json-preview-title{color:#94a3b8;font-size:12px;font-weight:600;margin-bottom:6px}.json-preview-code{background:transparent;color:#38bdf8;font-size:11px;font-family:Fira Code,Cascadia Code,Consolas,monospace;margin:0;max-height:240px;overflow-y:auto;white-space:pre-wrap;word-break:break-all}.label-section-wrapper{display:flex;flex-direction:column;gap:4px}.label-controls-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px}.label-selects-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;margin-top:4px}.label-form-item{display:flex;flex-direction:column;margin-bottom:0!important;min-width:120px}.label-select-item{display:flex;flex-direction:column;margin-bottom:0!important;min-width:150px;flex:1 1 150px;max-width:220px}.label-select-item nz-select{width:100%}\n"] }]
6087
+ ], template: "<nz-card [nzTitle]=\"configCardTitle\" [nzExtra]=\"configCardExtra\" class=\"pie-config-card\" [nzBodyStyle]=\"{ padding: '0px' }\"\r\n [ngStyle]=\"{ border: 'none' }\">\r\n\r\n <!-- T\u00EDtulo interno del card -->\r\n <ng-template #configCardTitle>\r\n\r\n <div style=\"display: flex; align-items: center; gap: 8px\">\r\n <i nz-icon nzType=\"pie-chart\" nzTheme=\"outline\" style=\"font-size: 20px; color: #028989\"></i>\r\n <span>{{ title }}</span>\r\n \r\n </div>\r\n </ng-template>\r\n\r\n <!-- Acciones de la cabecera: toggle JSON (comentado temporalmente) -->\r\n<ng-template #configCardExtra>\r\n <div style=\"display: flex; align-items: center; gap: 12px\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"restarConfig()\" >\r\n <span nz-icon nzType=\"reload\" nzTheme=\"outline\"></span>\r\n Restaurar\r\n </button>\r\n <!-- <button nz-button nzType=\"primary\" type=\"submit\" (click)=\"onSubmit()\">\r\n <span nz-icon nzType=\"check\"></span>\r\n Aplicar\r\n </button> -->\r\n </div>\r\n</ng-template>\r\n\r\n <!-- Layout Principal del Formulario -->\r\n @if (internalConfig) {\r\n <div nz-row [nzGutter]=\"[20, 20]\">\r\n\r\n <!-- Formulario de configuraci\u00F3n de 3 Secciones (Full width) -->\r\n <div nz-col [nzXs]=\"24\" [nzLg]=\"showPreview ? 14 : 24\">\r\n\r\n <form nz-form nzLayout=\"vertical\">\r\n <div nz-row [nzGutter]=\"[16, 16]\">\r\n\r\n <!-- ==================== CARD 1: CONFIGURACI\u00D3N GENERAL ==================== -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzLg]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Configuraci\u00F3n General\" class=\"custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Proveedor -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Provider</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.provider\" name=\"chartProvider\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n <nz-option nzValue=\"syncfusion\" nzLabel=\"syncfusion\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- T\u00EDtulo -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"16\" [nzMd]=\"16\">\r\n <nz-form-item>\r\n <nz-form-label>T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.title\" name=\"chartTitle\"\r\n placeholder=\"Ej: Distribuci\u00F3n de Ventas 2026\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n <!-- ==================== CARD 2: APARIENCIA Y ESTILOS ==================== -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzLg]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Estilos y Apariencia\" class=\"custom-card\">\r\n <div nz-row [nzGutter]=\"[16, 12]\">\r\n\r\n <!-- Variante (Pie / Mid) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Variante (Variant Type)</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [ngModel]=\"internalConfig.variant?.type || 'pie'\" name=\"variantType\"\r\n (ngModelChange)=\"onVariantTypeChange($event)\">\r\n @for (opt of pieVariants; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Radio (radius) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Radio (radius)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.radius\" name=\"radius\"\r\n placeholder=\"Ej: 70%, 80%\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Radio interno (solo Dona) -->\r\n @if (isDoughnut) {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Radio Interno (innerRadius)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.innerRadius\" name=\"innerRadius\"\r\n placeholder=\"Ej: 50%\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Paleta de Colores -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzMd]=\"24\">\r\n <nz-form-item>\r\n <nz-form-label>Paleta de Colores</nz-form-label>\r\n <nz-form-control>\r\n <div class=\"palette-container\">\r\n @for (color of internalConfig.palettes; track trackByIndex($index)) {\r\n <div class=\"palette-item\">\r\n <input type=\"color\" [(ngModel)]=\"internalConfig.palettes![$index]\"\r\n [name]=\"'palette_' + $index\" (ngModelChange)=\"onFieldChangeImmediate()\"\r\n class=\"palette-color-input\" />\r\n <button nz-button nzDanger nzSize=\"small\" type=\"button\" class=\"palette-remove-btn\"\r\n (click)=\"removePaletteColor($index)\" nz-tooltip nzTooltipTitle=\"Eliminar color\">\u2715</button>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"palette-actions\">\r\n <button nz-button nzType=\"dashed\" nzSize=\"small\" type=\"button\" (click)=\"addPaletteColor()\">\r\n + Agregar Color\r\n </button>\r\n <button nz-button nzType=\"link\" nzSize=\"small\" type=\"button\" (click)=\"resetPalette()\">\r\n Restaurar Paleta\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Sub-divider: Etiquetas de Datos (Data Labels) -->\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Etiquetas de Datos (Data Labels)</div>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"label-section-wrapper\">\r\n\r\n <!-- Fila de Toggles -->\r\n <div class=\"label-controls-row\">\r\n <nz-form-item class=\"label-form-item\">\r\n <nz-form-label>Mostrar Etiquetas</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.showDataLabels\" name=\"showDataLabels\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n @if (internalConfig.showDataLabels) {\r\n <nz-form-item class=\"label-form-item\">\r\n <nz-form-label>Mostrar Nombre Categor\u00EDa</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.showCategoryName\" name=\"showCategoryName\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n }\r\n </div>\r\n\r\n <!-- Fila de Selectores (solo cuando showDataLabels est\u00E1 activo) -->\r\n @if (internalConfig.showDataLabels) {\r\n <div class=\"label-selects-row\">\r\n <nz-form-item class=\"label-select-item\">\r\n <nz-form-label>Posici\u00F3n Etiquetas</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.labelPosition\" name=\"labelPosition\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n @for (opt of pieLabelPositions; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <nz-form-item class=\"label-select-item\">\r\n <nz-form-label>Modo de Valor</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.valueDisplayMode\" name=\"valueDisplayMode\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n @for (opt of pieValueDisplayModes; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n </div>\r\n </div>\r\n\r\n @if (!isDoughnut) {\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Efectos Visuales</div>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Separar Slice (Explode)</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.explodeSlice\" name=\"explodeSlice\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n @if (internalConfig.explodeSlice) {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>\u00CDndice Slice (0 = primero)</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"0\" [nzStep]=\"1\"\r\n [(ngModel)]=\"internalConfig.explodeIndex\" name=\"explodeIndex\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Distancia (offset)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.explodeOffset\" name=\"explodeOffset\"\r\n placeholder=\"Ej: 15%\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n }\r\n\r\n <!-- Etiqueta Central (solo Dona) -->\r\n @if (isDoughnut) {\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Etiqueta Central (Center Label)</div>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Etiqueta Central</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.showCenterLabel\" name=\"showCenterLabel\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n @if (internalConfig.showCenterLabel) {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"9\">\r\n <nz-form-item>\r\n <nz-form-label>T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.centerLabelTitle\" name=\"centerLabelTitle\"\r\n placeholder=\"Ej: Total\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"9\">\r\n <nz-form-item>\r\n <nz-form-label>Valor (vac\u00EDo = total autom\u00E1tico)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.centerLabelValue\" name=\"centerLabelValue\"\r\n placeholder=\"Autom\u00E1tico\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Tama\u00F1o T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.centerLabelTitleSize\"\r\n name=\"centerLabelTitleSize\" placeholder=\"14px\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Tama\u00F1o Valor</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.centerLabelValueSize\"\r\n name=\"centerLabelValueSize\" placeholder=\"20px\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Color T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.centerLabelTitleColor\"\r\n name=\"centerLabelTitleColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Color Valor</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.centerLabelValueColor\"\r\n name=\"centerLabelValueColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n <!-- ==================== CARD 3: CONFIGURACI\u00D3N DE DATOS (configData) ==================== -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzLg]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Configuraci\u00F3n de Datos (configData)\" class=\"custom-card\">\r\n <div nz-row [nzGutter]=\"[16, 12]\">\r\n <!-- Eje X -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Eje X (xAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input [(ngModel)]=\"singleConfig.xAxis\" name=\"xAxis\" placeholder=\"ej. productos.nombre\"\r\n [disabled]=\"disabledAxis\" style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('xAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('xAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y (yAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input [(ngModel)]=\"singleConfig.yAxis\" name=\"yAxis\"\r\n placeholder=\"ej. detalle_ventas.monto\" [disabled]=\"disabledAxis\" style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('yAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('yAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Habilitar Joins -->\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"8\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Habilitar Joins</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"singleConfig.joins\" name=\"joinsEnabled\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Sub-cards: Configuraci\u00F3n de Tooltip & Leyendas -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzMd]=\"12\" *ngIf=\"singleConfig.tooltip\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Configuraci\u00F3n de Tooltip\" class=\"custom-card\">\r\n <div nz-row [nzGutter]=\"[12, 12]\">\r\n\r\n <!-- Habilitar Tooltip + bot\u00F3n de modo (Avanzado / Dise\u00F1ador) -->\r\n <div nz-col [nzXs]=\"24\" class=\"mt-2\"\r\n style=\"display: flex; align-items: flex-end; column-gap: clamp(24px, 6vw, 56px); row-gap: 8px; flex-wrap: wrap;\">\r\n <div style=\"display: flex; flex-direction: column; align-items: flex-start; gap: 6px;\">\r\n <span style=\"font-weight: 500; color: #334155;\">Habilitar Tooltip</span>\r\n <nz-switch [(ngModel)]=\"singleConfig.tooltip.enable\" name=\"tooltipEnable\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </div>\r\n\r\n @if (singleConfig.tooltip.enable) {\r\n <button nz-button nzType=\"text\" nzSize=\"small\" type=\"button\" (click)=\"toggleTooltipMode()\"\r\n [nzTooltipTitle]=\"\r\n isCustomTooltipMode\r\n ? 'Cambiar a modo Dise\u00F1ador Visual'\r\n : 'Cambiar a modo C\u00F3digo Libre (Avanzado)'\r\n \" nz-tooltip>\r\n <span nz-icon [nzType]=\"isCustomTooltipMode ? 'setting' : 'code'\"></span>\r\n <span style=\"font-size: 11px; margin-left: 4px;\">{{\r\n isCustomTooltipMode ? \"Dise\u00F1ador\" : \"Avanzado\"\r\n }}</span>\r\n </button>\r\n }\r\n </div>\r\n \r\n <!-- Compartido (shared) -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\"\r\n style=\"display: flex; flex-direction: column; align-items: flex-start; gap: 6px;\">\r\n <span style=\"font-weight: 500; color: #334155;\">Compartido (shared)</span>\r\n <nz-switch [(ngModel)]=\"singleConfig.tooltip.shared\" name=\"tooltipShared\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </div>\r\n @if (singleConfig.tooltip.enable) {\r\n <div nz-col [nzSpan]=\"24\">\r\n @if (!isCustomTooltipMode) {\r\n <!-- Dise\u00F1ador Visual Asistido -->\r\n <div class=\"tooltip-builder-container\">\r\n <div nz-row [nzGutter]=\"[8, 8]\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Nombre</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowCategory\" name=\"tooltipShowCategory\"\r\n (ngModelChange)=\"updateTooltipFromBuilder()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Nombre Negrita</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipBoldCategory\" name=\"tooltipBoldCategory\"\r\n [nzDisabled]=\"!tooltipShowCategory\"\r\n (ngModelChange)=\"updateTooltipFromBuilder()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Valor</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowValue\" name=\"tooltipShowValue\"\r\n (ngModelChange)=\"updateTooltipFromBuilder()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Separador</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"tooltipSeparator\" name=\"tooltipSeparator\" nzSize=\"small\"\r\n (ngModelChange)=\"updateTooltipFromBuilder()\">\r\n @for (sep of tooltipSeparators; track sep.value) {\r\n <nz-option [nzValue]=\"sep.value\" [nzLabel]=\"sep.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n\r\n <!-- Previsualizaci\u00F3n interactiva del Tooltip -->\r\n <div class=\"tooltip-preview-box mt-2\">\r\n <span style=\"color: #64748b;\">Vista previa:</span>\r\n @if (singleConfig.tooltip.shared) {\r\n <nz-tag nzColor=\"blue\">\u25CF Categor\u00EDa A: 1,500</nz-tag>\r\n <nz-tag nzColor=\"default\">\u25CB Categor\u00EDa B: 850</nz-tag>\r\n } @else {\r\n <nz-tag nzColor=\"processing\">\r\n @if (tooltipShowCategory) {\r\n @if (tooltipBoldCategory) { <strong>Categor\u00EDa</strong> } @else { Categor\u00EDa }\r\n }\r\n @if (tooltipShowCategory && tooltipShowValue) { {{ tooltipSeparator }} }\r\n @if (tooltipShowValue) { 1,500 }\r\n </nz-tag>\r\n }\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Modo Avanzado Input Manual -->\r\n <nz-form-item>\r\n <nz-form-label>Formato Manual (Syncfusion Template)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"singleConfig.tooltip.format\" name=\"tooltipFormat\"\r\n placeholder=\"Ej: <b>${point.x}</b>: ${point.y}\"\r\n (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzMd]=\"12\" *ngIf=\"singleConfig.legends\">\r\n <nz-card\r\n nzType=\"inner\"\r\n nzTitle=\"Configuraci\u00F3n de Leyendas (Legends)\"\r\n class=\"custom-card\">\r\n\r\n <div nz-row [nzGutter]=\"[16, 12]\">\r\n\r\n <!-- Visible: izquierda -->\r\n <div nz-col [nzXs]=\"12\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Visible</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch\r\n [(ngModel)]=\"singleConfig.legends.visible\"\r\n name=\"legendsVisible\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n </nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Posici\u00F3n: derecha -->\r\n @if (singleConfig.legends.visible) {\r\n <div nz-col [nzXs]=\"12\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Posici\u00F3n</nz-form-label>\r\n <nz-form-control>\r\n <nz-select\r\n [(ngModel)]=\"singleConfig.legends.position\"\r\n name=\"legendPosition\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n\r\n @for (pos of legendPositions; track pos.value) {\r\n <nz-option\r\n [nzValue]=\"pos.value\"\r\n [nzLabel]=\"pos.label\">\r\n </nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n </div>\r\n </nz-card>\r\n</div>\r\n\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n </div>\r\n </form>\r\n\r\n <!-- @if (showJsonToggle && showJsonPreview) {\r\n <div class=\"json-preview-box mt-3\">\r\n <div class=\"json-preview-title\">JSON Generado (YwPieMappingConfig):</div>\r\n <pre class=\"json-preview-code\"><code>{{ internalConfig | json }}</code></pre>\r\n </div>\r\n } -->\r\n\r\n </div>\r\n\r\n <!-- Previsualizaci\u00F3n en tiempo real (Oculta por defecto seg\u00FAn refactorizaci\u00F3n) -->\r\n @if (showPreview) {\r\n <div nz-col [nzXs]=\"24\" [nzLg]=\"10\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Vista Previa en Vivo\" class=\"custom-card\">\r\n <div class=\"pie-preview-wrapper\" [style.height]=\"previewHeight\">\r\n <yw-pie-chart idComponent=\"pie_config_internal_preview\" [chartData]=\"chartData\" [config]=\"internalConfig\">\r\n </yw-pie-chart>\r\n </div>\r\n </nz-card>\r\n </div>\r\n }\r\n\r\n </div>\r\n }\r\n\r\n</nz-card>", styles: [".tooltip-preview-box{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px;padding:6px 10px;background:#fff;border:1px dashed #cbd5e1;border-radius:4px;font-size:12px}.palette-container{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}.palette-item{display:inline-flex;align-items:center;gap:4px;background-color:#fafafa;border:1px solid #e5e7eb;border-radius:6px;padding:3px 6px 3px 3px;transition:all .2s ease}.palette-item:hover{border-color:#cbd5e1;background-color:#f1f5f9}.palette-color-input{width:36px;height:28px;padding:0;border:none;border-radius:4px;cursor:pointer;background:transparent}.palette-color-input::-webkit-color-swatch-wrapper{padding:0}.palette-color-input::-webkit-color-swatch{border:1px solid rgba(0,0,0,.15);border-radius:4px}.palette-remove-btn{padding:0 4px;height:22px;line-height:20px;font-size:11px}.palette-actions{display:flex;align-items:center;gap:8px;margin-top:10px}.custom-card{border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 1px 3px #0000000d;overflow:hidden}.custom-card ::ng-deep .ant-card-head{background-color:#f8fafc;border-bottom:1px solid #e2e8f0;padding:0 20px;min-height:48px}.custom-card ::ng-deep .ant-card-head .ant-card-head-title{font-size:15px;font-weight:600;color:#334155}.custom-card ::ng-deep .ant-card-head .ant-card-head-wrapper{flex-wrap:wrap;row-gap:12px;padding-top:12px;padding-bottom:12px}.custom-card ::ng-deep .ant-card-body{padding:20px}:host ::ng-deep .ant-switch-checked{background-color:#028989!important}\n"] }]
6083
6088
  }], ctorParameters: () => [{ type: i2$1.NzModalService }], propDecorators: { chartData: [{
6084
6089
  type: Input,
6085
6090
  args: ['chartData']
@@ -6100,6 +6105,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
6100
6105
  type: Input
6101
6106
  }], configChange: [{
6102
6107
  type: Output
6108
+ }], idComponent: [{
6109
+ type: Input
6103
6110
  }] } });
6104
6111
 
6105
6112
  const gaugeVariants = [
@@ -6201,6 +6208,7 @@ class GaugeChartConfigComponent {
6201
6208
  this.previewHeight = '380px';
6202
6209
  /** Título del card del panel de configuración */
6203
6210
  this.title = 'Configuración del Gráfico Gauge';
6211
+ this.idComponent = '';
6204
6212
  // ── Outputs ────────────────────────────────────────────────────────────────
6205
6213
  this.configChange = new EventEmitter();
6206
6214
  this.showJsonPreview = false;
@@ -6225,6 +6233,27 @@ class GaugeChartConfigComponent {
6225
6233
  this.debounceSubject.pipe(debounceTime$1(200), takeUntil$1(this.destroy$)).subscribe(() => {
6226
6234
  this.emitConfig();
6227
6235
  });
6236
+ this.saveLocalStorage();
6237
+ }
6238
+ saveLocalStorage() {
6239
+ const key = this.idComponent;
6240
+ if (!localStorage.getItem(key)) {
6241
+ // Como no existe, lo guardamos por primera vez
6242
+ localStorage.setItem(key, JSON.stringify(this.config));
6243
+ }
6244
+ else {
6245
+ console.log("Ya existe un registro previo, no se sobrescribe.");
6246
+ }
6247
+ }
6248
+ restarConfig() {
6249
+ const key = this.idComponent;
6250
+ const savedData = localStorage.getItem(key);
6251
+ if (savedData) {
6252
+ const configInitial = JSON.parse(savedData);
6253
+ this.config = configInitial;
6254
+ // this.initForm();
6255
+ this.configChange.emit(configInitial);
6256
+ }
6228
6257
  }
6229
6258
  ngOnChanges(changes) {
6230
6259
  console.log('VISUAL config:', this.config?.configData, 'data:', this.chartData);
@@ -6585,7 +6614,7 @@ class GaugeChartConfigComponent {
6585
6614
  this.configChange.emit(out);
6586
6615
  }
6587
6616
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: GaugeChartConfigComponent, deps: [{ token: i2$1.NzModalService }], target: i0.ɵɵFactoryTarget.Component }); }
6588
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: GaugeChartConfigComponent, isStandalone: true, selector: "yw-gauge-chart-config", inputs: { chartData: "chartData", config: "config", configSelect: "configSelect", showPreview: "showPreview", showJsonToggle: "showJsonToggle", previewHeight: "previewHeight", title: "title" }, outputs: { axisSelect: "axisSelect", configChange: "configChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container-card\">\r\n <!-- Cabecera personalizada -->\r\n <div class=\"flex flex-col sm:flex-row sm:items-center sm:justify-between border-b px-4 py-3 gap-2\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"configCardTitle\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"configCardExtra\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- T\u00EDtulo interno del card -->\r\n <ng-template #configCardTitle>\r\n <div class=\"gauge-config-card-title\">\r\n <span nz-icon nzType=\"dashboard\" nzTheme=\"outline\" class=\"gauge-config-card-title__icon\"></span>\r\n <span>{{ title }}</span>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- Acciones de la cabecera: toggle JSON (comentado temporalmente) -->\r\n <ng-template #configCardExtra>\r\n <!-- <div class=\"gauge-config-card-actions\">\r\n @if (showJsonToggle) {\r\n <span class=\"gauge-config-json-label\">Ver JSON:</span>\r\n <nz-switch [(ngModel)]=\"showJsonPreview\" nzSize=\"small\"></nz-switch>\r\n }\r\n </div> -->\r\n </ng-template>\r\n\r\n @if (internalConfig) {\r\n <div nz-row [nzGutter]=\"[20, 20]\">\r\n\r\n <div nz-col [nzXs]=\"24\" [nzLg]=\"showPreview ? 14 : 24\">\r\n\r\n <form nz-form nzLayout=\"vertical\">\r\n <div nz-row [nzGutter]=\"[16, 16]\">\r\n\r\n <!-- ==================== CARD 1: CONFIGURACI\u00D3N GENERAL ==================== -->\r\n <div nz-col [nzXs]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Configuraci\u00F3n General\" class=\"sub-card-container mb-3\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Provider</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.provider\" name=\"chartProvider\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n <nz-option nzValue=\"syncfusion\" nzLabel=\"syncfusion\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.title\" name=\"chartTitle\"\r\n placeholder=\"Ej: Monto Total de Ventas\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Variante (Variant Type)</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [ngModel]=\"variantType\" name=\"variantType\"\r\n (ngModelChange)=\"onVariantTypeChange($event)\">\r\n @for (opt of gaugeVariants; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n <!-- ==================== CARD 2: APARIENCIA Y ESTILOS ==================== -->\r\n <div nz-col [nzXs]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Estilos y Apariencia\" class=\"sub-card-container mb-3\">\r\n <div nz-row [nzGutter]=\"[16, 12]\">\r\n\r\n <!-- L\u00EDmites y Arco -->\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">L\u00EDmites y Arco</div>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>M\u00EDnimo</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [(ngModel)]=\"internalConfig.minimum\" name=\"minimum\"\r\n (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>M\u00E1ximo</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [(ngModel)]=\"internalConfig.maximum\" name=\"maximum\"\r\n (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>\u00C1ngulo Inicio</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"0\" [nzMax]=\"360\"\r\n [(ngModel)]=\"internalConfig.startAngle\" name=\"startAngle\"\r\n (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>\u00C1ngulo Fin</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"0\" [nzMax]=\"360\"\r\n [(ngModel)]=\"internalConfig.endAngle\" name=\"endAngle\"\r\n (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Aguja y Esquinas -->\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">{{ !isProgressVariant ? 'Aguja y Esquinas' : 'Esquinas del Arco' }}</div>\r\n </div>\r\n\r\n @if (!isProgressVariant) {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color de Aguja</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.pointerColor\"\r\n name=\"pointerColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n @if (variantType !== 'standard') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Estilo de Esquinas</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.cornerStyle\" name=\"cornerStyle\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n @for (opt of gaugeCornerStyles; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n @if (isMulti) {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Redondear todos los rangos</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.roundMultiRanges\" name=\"roundMultiRanges\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Pista y Progreso (Position / Width-Range) -->\r\n @if (isProgressVariant) {\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Pista y Progreso</div>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Activar Pista</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.enableProgressTrack\" name=\"enableProgressTrack\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n @if (internalConfig.enableProgressTrack) {\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Aguja con L\u00EDquido</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.showNeedleWithProgress\" name=\"showNeedleWithProgress\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n @if (internalConfig.showNeedleWithProgress) {\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Color de Aguja</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.pointerColor\"\r\n name=\"pointerColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Color Fondo</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.trackColor\"\r\n name=\"trackColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Color Relleno</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.progressColor\"\r\n name=\"progressColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Grosor (px)</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"1\" [(ngModel)]=\"internalConfig.progressWidth\"\r\n name=\"progressWidth\" (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n } @else if (variantType === 'position') {\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Color de Aguja</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.pointerColor\"\r\n name=\"pointerColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n @if (isWidthRange) {\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Ancho Inicial (px)</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"1\" [(ngModel)]=\"internalConfig.startWidth\"\r\n name=\"startWidth\" (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Ancho Final (px)</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"1\" [(ngModel)]=\"internalConfig.endWidth\"\r\n name=\"endWidth\" (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n }\r\n\r\n <!-- Escala y Ticks -->\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Escala y Ticks</div>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Ticks</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.showTicks\" name=\"showTicks\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n @if (internalConfig.showTicks) {\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Posici\u00F3n de Ticks</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.tickPosition\" name=\"tickPosition\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n @for (opt of gaugeTickPositions; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Etiqueta Central -->\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Etiqueta Central (Valor)</div>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Etiqueta</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.showLabel\" name=\"showLabel\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n @if (internalConfig.showLabel) {\r\n <!-- Posici\u00F3n de la Unidad (Estilo Dise\u00F1ador) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Posici\u00F3n del Valor / Unidad</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"unitPosition\" name=\"unitPosition\"\r\n (ngModelChange)=\"onDesignerFormatChange()\">\r\n @for (opt of formatPositions; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- S\u00EDmbolo o Unidad (Input de texto para digitar signo o palabra) -->\r\n @if (unitPosition === 'suffix' || unitPosition === 'prefix') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Signo / Unidad</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"unitSymbol\" name=\"unitSymbol\"\r\n placeholder=\"Ej: USD, $, %, S/\" (ngModelChange)=\"onDesignerFormatChange()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzSm]=\"6\" [nzMd]=\"3\">\r\n <nz-form-item>\r\n <nz-form-label>Espacio</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"unitSpacing\" name=\"unitSpacing\"\r\n (ngModelChange)=\"onDesignerFormatChange()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n @if (unitPosition === 'custom') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Plantilla Personalizada</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.labelFormat\" name=\"labelFormat\"\r\n placeholder=\"Ej: {value} USD\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <div nz-col [nzXs]=\"12\" [nzSm]=\"6\" [nzMd]=\"3\">\r\n <nz-form-item>\r\n <nz-form-label>Tama\u00F1o</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.labelSize\" name=\"labelSize\"\r\n placeholder=\"24px\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzSm]=\"6\" [nzMd]=\"3\">\r\n <nz-form-item>\r\n <nz-form-label>Color</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.labelColor\"\r\n name=\"labelColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzSm]=\"6\" [nzMd]=\"3\">\r\n <nz-form-item>\r\n <nz-form-label>Negrita</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.labelBold\" name=\"labelBold\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Fila de chips de sugerencias r\u00E1pidas + Preview del formato -->\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"format-presets-bar\">\r\n @if (unitPosition === 'suffix' || unitPosition === 'prefix') {\r\n <span class=\"format-presets-bar__title\">Signos r\u00E1pidos:</span>\r\n @for (sym of commonUnitSymbols; track sym) {\r\n <button type=\"button\" nz-button nzSize=\"small\" [nzType]=\"unitSymbol === sym ? 'primary' : 'default'\"\r\n class=\"format-preset-btn\" (click)=\"onSelectPresetUnit(sym)\">\r\n {{ sym }}\r\n </button>\r\n }\r\n }\r\n <span class=\"format-preview-badge\">\r\n Vista previa: <strong>{{ formatPreview }}</strong>\r\n </span>\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Constructor de Rangos (Est\u00E1ndar / Multi) -->\r\n @if (hasRangesBuilder) {\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Rangos de Color (Ranges)</div>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"24\">\r\n @for (range of internalConfig.ranges; track trackByIndex($index)) {\r\n <div class=\"range-row\">\r\n <div class=\"range-field\">\r\n <span class=\"range-field__label\">Desde</span>\r\n <nz-input-number style=\"width: 100%\" [(ngModel)]=\"range.start\"\r\n [name]=\"'range_start_' + $index\" (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </div>\r\n <div class=\"range-field\">\r\n <span class=\"range-field__label\">Hasta</span>\r\n <nz-input-number style=\"width: 100%\" [(ngModel)]=\"range.end\"\r\n [name]=\"'range_end_' + $index\" (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </div>\r\n <div class=\"range-field range-field--color\">\r\n <span class=\"range-field__label\">Color</span>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"range.color\"\r\n [name]=\"'range_color_' + $index\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </div>\r\n <div class=\"range-field\">\r\n <span class=\"range-field__label\">Grosor</span>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"1\" [(ngModel)]=\"range.width\"\r\n [name]=\"'range_width_' + $index\" (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </div>\r\n <div class=\"range-field range-field--label\">\r\n <span class=\"range-field__label\">Etiqueta</span>\r\n <input nz-input type=\"text\" [(ngModel)]=\"range.label\" [name]=\"'range_label_' + $index\"\r\n placeholder=\"Opcional\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </div>\r\n <button nz-button nzDanger nzSize=\"small\" type=\"button\" class=\"palette-remove-btn\"\r\n (click)=\"removeRange($index)\" nz-tooltip nzTooltipTitle=\"Eliminar rango\">\u2715</button>\r\n </div>\r\n }\r\n\r\n <div class=\"palette-actions\">\r\n <button nz-button nzType=\"dashed\" nzSize=\"small\" type=\"button\" (click)=\"addRange()\">\r\n + Agregar Rango\r\n </button>\r\n <button nz-button nzType=\"link\" nzSize=\"small\" type=\"button\" (click)=\"resetRanges()\">\r\n Restaurar Rangos\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n <!-- ==================== CARD 3: CONFIGURACI\u00D3N DE DATOS (configData) ==================== -->\r\n <div nz-col [nzXs]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Configuraci\u00F3n de Datos\" class=\"sub-card-container mb-3\">\r\n <div nz-row [nzGutter]=\"[16, 12]\">\r\n\r\n <!-- M\u00E9trica (yAxis con Selector en \u00C1rbol) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>M\u00E9trica (yAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"singleConfig.yAxis\"\r\n name=\"yAxis\"\r\n placeholder=\"ej. detalle_ventas.monto_total\"\r\n [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button\r\n nz-button\r\n nzType=\"default\"\r\n type=\"button\"\r\n nz-tooltip\r\n nzTooltipTitle=\"Seleccionar columna desde \u00E1rbol\"\r\n (click)=\"openColumnSelector('yAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button\r\n nz-button\r\n nzType=\"default\"\r\n nzDanger\r\n type=\"button\"\r\n nz-tooltip\r\n nzTooltipTitle=\"Limpiar campo\"\r\n (click)=\"clearField('yAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Agregaci\u00F3n -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Agregaci\u00F3n</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.aggregation\" name=\"aggregation\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n @for (opt of gaugeAggregations; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Joins -->\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Habilitar Joins</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"singleConfig.joins\" name=\"joinsEnabled\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Tooltip Config (el gauge solo soporta enable) -->\r\n @if (singleConfig.tooltip) {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzMd]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Tooltip Config\" class=\"sub-card-container h-100\">\r\n <div nz-row [nzGutter]=\"[12, 12]\">\r\n <div nz-col [nzXs]=\"24\" class=\"mt-2\"\r\n style=\"display: flex; flex-direction: column; align-items: flex-start; gap: 6px;\">\r\n <span style=\"font-weight: 500; color: #334155;\">Habilitar Tooltip</span>\r\n <nz-switch [(ngModel)]=\"singleConfig.tooltip.enable\" name=\"tooltipEnable\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n }\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n </div>\r\n </form>\r\n\r\n <!-- @if (showJsonToggle && showJsonPreview) {\r\n <div class=\"json-preview-box mt-3\">\r\n <div class=\"json-preview-title\">JSON Generado (YwGaugeMappingConfig):</div>\r\n <pre class=\"json-preview-code\"><code>{{ internalConfig | json }}</code></pre>\r\n </div>\r\n } -->\r\n\r\n </div>\r\n\r\n <!-- Previsualizaci\u00F3n en tiempo real (oculta por defecto) -->\r\n @if (showPreview) {\r\n <div nz-col [nzXs]=\"24\" [nzLg]=\"10\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Vista Previa en Vivo\" class=\"gauge-preview-card h-100\">\r\n <div class=\"gauge-preview-wrapper\" [style.height]=\"previewHeight\">\r\n <yw-gauge-chart\r\n idComponent=\"gauge_config_internal_preview\"\r\n [chartData]=\"chartData\"\r\n [config]=\"internalConfig\">\r\n </yw-gauge-chart>\r\n </div>\r\n </nz-card>\r\n </div>\r\n }\r\n\r\n </div>\r\n }\r\n\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.gauge-config-card{border-radius:10px}.gauge-config-card-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#1e293b}.gauge-config-card-title__icon{font-size:18px;color:#028989}button[nz-button]:has(i[nzType=search]),button[nz-button]:has(span[nzType=search]){color:#028989;border-color:#d1fae5;background-color:#f0fdf4;transition:all .2s ease}button[nz-button]:has(i[nzType=search]):hover,button[nz-button]:has(span[nzType=search]):hover{color:#028989;border-color:#028989;background-color:#ecfdf5}.gauge-config-card-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.gauge-config-json-label{font-size:12px;font-weight:500;color:#64748b;margin-right:4px}nz-form-item{margin-bottom:14px}nz-form-item:last-child{margin-bottom:0}.sub-card-container{border-radius:8px;background-color:#fff;border:1px solid #e2e8f0}.sub-card-container ::ng-deep .ant-card-head,.sub-card-container ::ng-deep .ant-card-head-wrapper{border-bottom:1px solid #e2e8f0;font-weight:600;font-size:14px;color:#1e293b}nz-select{width:100%}nz-form-label ::ng-deep label{white-space:normal!important;word-break:break-word;height:auto!important;line-height:1.3!important}.section-divider-title{font-size:13px;font-weight:600;color:#334155;border-bottom:1px dashed #e2e8f0;padding-bottom:4px;margin-top:8px;margin-bottom:8px}.palette-color-input{width:36px;height:28px;padding:0;border:none;border-radius:4px;cursor:pointer;background:transparent}.palette-color-input::-webkit-color-swatch-wrapper{padding:0}.palette-color-input::-webkit-color-swatch{border:1px solid rgba(0,0,0,.15);border-radius:4px}.palette-remove-btn{padding:0 4px;height:22px;line-height:20px;font-size:11px}.palette-actions{display:flex;align-items:center;gap:8px;margin-top:10px}.range-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;padding:8px 10px;margin-bottom:8px;background-color:#fafafa;border:1px solid #e5e7eb;border-radius:6px;transition:all .2s ease}.range-row:hover{border-color:#cbd5e1;background-color:#f1f5f9}.range-field{display:flex;flex-direction:column;gap:4px;flex:1 1 90px;min-width:90px;max-width:140px}.range-field--color{flex:0 0 auto;min-width:48px}.range-field--label{flex:1 1 130px;max-width:200px}.range-field__label{font-size:12px;font-weight:500;color:#64748b}.gauge-preview-wrapper{width:100%;display:flex;align-items:center;justify-content:center;background:#f8fafc;border-radius:8px;border:1px dashed #cbd5e1;padding:12px;position:relative;overflow:hidden}.gauge-preview-wrapper>yw-gauge-chart{display:block;width:100%;height:100%}.json-preview-box{background:#0f172a;border-radius:8px;padding:12px;border:1px solid #1e293b}.json-preview-title{color:#94a3b8;font-size:12px;font-weight:600;margin-bottom:6px}.json-preview-code{background:transparent;color:#38bdf8;font-size:11px;font-family:Fira Code,Cascadia Code,Consolas,monospace;margin:0;max-height:240px;overflow-y:auto;white-space:pre-wrap;word-break:break-all}.format-presets-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 12px;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;margin-top:4px}.format-presets-bar__title{font-size:12px;font-weight:600;color:#64748b;margin-right:4px}.format-preset-btn{font-size:11px;font-weight:500;padding:0 8px;height:24px;line-height:22px;border-radius:4px}.format-preview-badge{margin-left:auto;font-size:12px;color:#475569;background-color:#e2e8f0;padding:2px 10px;border-radius:12px}.format-preview-badge strong{color:#0f172a;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i9.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap", "nzRequiredMark"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzVariant", "nzSize", "nzStepperless", "nzStatus", "disabled", "readonly"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzInputNumberModule }, { kind: "component", type: i8$1.NzInputNumberComponent, selector: "nz-input-number", inputs: ["nzId", "nzSize", "nzPlaceHolder", "nzStatus", "nzVariant", "nzStep", "nzMin", "nzMax", "nzPrecision", "nzParser", "nzFormatter", "nzDisabled", "nzReadOnly", "nzAutoFocus", "nzBordered", "nzKeyboard", "nzControls", "nzPrefix", "nzSuffix", "nzAddonBefore", "nzAddonAfter"], outputs: ["nzBlur", "nzFocus", "nzOnStep"], exportAs: ["nzInputNumber"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i7.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i7.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzVariant", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzPrefix", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus", "nzOnClear"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzSwitchModule }, { kind: "component", type: i8.NzSwitchComponent, selector: "nz-switch", inputs: ["nzLoading", "nzDisabled", "nzControl", "nzCheckedChildren", "nzUnCheckedChildren", "nzSize", "nzId"], exportAs: ["nzSwitch"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i10.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i11.ɵNzTransitionPatchDirective, selector: "[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i12.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i14.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i13.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDividerModule }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: GaugeChartComponent, selector: "yw-gauge-chart", inputs: ["idComponent", "chartData", "config"] }] }); }
6617
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: GaugeChartConfigComponent, isStandalone: true, selector: "yw-gauge-chart-config", inputs: { chartData: "chartData", config: "config", configSelect: "configSelect", showPreview: "showPreview", showJsonToggle: "showJsonToggle", previewHeight: "previewHeight", title: "title", idComponent: "idComponent" }, outputs: { axisSelect: "axisSelect", configChange: "configChange" }, usesOnChanges: true, ngImport: i0, template: "<nz-card [nzTitle]=\"configCardTitle\" [nzExtra]=\"configCardExtra\" class=\"gauge-config-card\" [nzBodyStyle]=\"{ padding: '0px' }\"\r\n [ngStyle]=\"{ border: 'none' }\">\r\n\r\n <!-- T\u00EDtulo interno del card -->\r\n <!-- T\u00EDtulo interno del card -->\r\n <ng-template #configCardTitle>\r\n <div style=\"display: flex; align-items: center; gap: 8px\">\r\n <i nz-icon nzType=\"dashboard\" nzTheme=\"outline\" style=\"font-size: 20px; color: #028989\"></i>\r\n <span>{{ title }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n <!-- Acciones de la cabecera: toggle JSON (comentado temporalmente) -->\r\n<ng-template #configCardExtra>\r\n <div style=\"display: flex; align-items: center; gap: 12px\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"restarConfig()\">\r\n <span nz-icon nzType=\"reload\" nzTheme=\"outline\" ></span>\r\n Restaurar\r\n </button>\r\n <!-- <button nz-button nzType=\"primary\" type=\"submit\" (click)=\"onSubmit()\">\r\n <span nz-icon nzType=\"check\"></span>\r\n Aplicar\r\n </button> -->\r\n </div>\r\n</ng-template>\r\n\r\n @if (internalConfig) {\r\n <div nz-row [nzGutter]=\"[20, 20]\">\r\n\r\n <div nz-col [nzXs]=\"24\" [nzLg]=\"showPreview ? 14 : 24\">\r\n\r\n <form nz-form nzLayout=\"vertical\">\r\n <div nz-row [nzGutter]=\"[16, 16]\">\r\n\r\n <!-- ==================== CARD 1: CONFIGURACI\u00D3N GENERAL ==================== -->\r\n <div nz-col [nzXs]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Configuraci\u00F3n General\" class=\"custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Provider</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.provider\" name=\"chartProvider\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n <nz-option nzValue=\"syncfusion\" nzLabel=\"syncfusion\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.title\" name=\"chartTitle\"\r\n placeholder=\"Ej: Monto Total de Ventas\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Variante (Variant Type)</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [ngModel]=\"variantType\" name=\"variantType\"\r\n (ngModelChange)=\"onVariantTypeChange($event)\">\r\n @for (opt of gaugeVariants; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n <!-- ==================== CARD 2: APARIENCIA Y ESTILOS ==================== -->\r\n <div nz-col [nzXs]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Estilos y Apariencia\" class=\"custom-card\">\r\n <div nz-row [nzGutter]=\"[16, 12]\">\r\n\r\n <!-- L\u00EDmites y Arco -->\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">L\u00EDmites y Arco</div>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>M\u00EDnimo</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [(ngModel)]=\"internalConfig.minimum\" name=\"minimum\"\r\n (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>M\u00E1ximo</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [(ngModel)]=\"internalConfig.maximum\" name=\"maximum\"\r\n (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>\u00C1ngulo Inicio</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"0\" [nzMax]=\"360\"\r\n [(ngModel)]=\"internalConfig.startAngle\" name=\"startAngle\"\r\n (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>\u00C1ngulo Fin</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"0\" [nzMax]=\"360\"\r\n [(ngModel)]=\"internalConfig.endAngle\" name=\"endAngle\"\r\n (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Aguja y Esquinas -->\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">{{ !isProgressVariant ? 'Aguja y Esquinas' : 'Esquinas del Arco' }}</div>\r\n </div>\r\n\r\n @if (!isProgressVariant) {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color de Aguja</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.pointerColor\"\r\n name=\"pointerColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n @if (variantType !== 'standard') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Estilo de Esquinas</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.cornerStyle\" name=\"cornerStyle\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n @for (opt of gaugeCornerStyles; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n @if (isMulti) {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Redondear todos los rangos</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.roundMultiRanges\" name=\"roundMultiRanges\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Pista y Progreso (Position / Width-Range) -->\r\n @if (isProgressVariant) {\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Pista y Progreso</div>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Activar Pista</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.enableProgressTrack\" name=\"enableProgressTrack\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n @if (internalConfig.enableProgressTrack) {\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Aguja con L\u00EDquido</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.showNeedleWithProgress\" name=\"showNeedleWithProgress\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n @if (internalConfig.showNeedleWithProgress) {\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Color de Aguja</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.pointerColor\"\r\n name=\"pointerColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Color Fondo</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.trackColor\"\r\n name=\"trackColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Color Relleno</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.progressColor\"\r\n name=\"progressColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Grosor (px)</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"1\" [(ngModel)]=\"internalConfig.progressWidth\"\r\n name=\"progressWidth\" (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n } @else if (variantType === 'position') {\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Color de Aguja</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.pointerColor\"\r\n name=\"pointerColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n @if (isWidthRange) {\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Ancho Inicial (px)</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"1\" [(ngModel)]=\"internalConfig.startWidth\"\r\n name=\"startWidth\" (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Ancho Final (px)</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"1\" [(ngModel)]=\"internalConfig.endWidth\"\r\n name=\"endWidth\" (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n }\r\n\r\n <!-- Escala y Ticks -->\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Escala y Ticks</div>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Ticks</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.showTicks\" name=\"showTicks\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n @if (internalConfig.showTicks) {\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Posici\u00F3n de Ticks</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.tickPosition\" name=\"tickPosition\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n @for (opt of gaugeTickPositions; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Etiqueta Central -->\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Etiqueta Central (Valor)</div>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Etiqueta</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.showLabel\" name=\"showLabel\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n @if (internalConfig.showLabel) {\r\n <!-- Posici\u00F3n de la Unidad (Estilo Dise\u00F1ador) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Posici\u00F3n del Valor / Unidad</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"unitPosition\" name=\"unitPosition\"\r\n (ngModelChange)=\"onDesignerFormatChange()\">\r\n @for (opt of formatPositions; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- S\u00EDmbolo o Unidad (Input de texto para digitar signo o palabra) -->\r\n @if (unitPosition === 'suffix' || unitPosition === 'prefix') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Signo / Unidad</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"unitSymbol\" name=\"unitSymbol\"\r\n placeholder=\"Ej: USD, $, %, S/\" (ngModelChange)=\"onDesignerFormatChange()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzSm]=\"6\" [nzMd]=\"3\">\r\n <nz-form-item>\r\n <nz-form-label>Espacio</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"unitSpacing\" name=\"unitSpacing\"\r\n (ngModelChange)=\"onDesignerFormatChange()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n @if (unitPosition === 'custom') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Plantilla Personalizada</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.labelFormat\" name=\"labelFormat\"\r\n placeholder=\"Ej: {value} USD\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <div nz-col [nzXs]=\"12\" [nzSm]=\"6\" [nzMd]=\"3\">\r\n <nz-form-item>\r\n <nz-form-label>Tama\u00F1o</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.labelSize\" name=\"labelSize\"\r\n placeholder=\"24px\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzSm]=\"6\" [nzMd]=\"3\">\r\n <nz-form-item>\r\n <nz-form-label>Color</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.labelColor\"\r\n name=\"labelColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzSm]=\"6\" [nzMd]=\"3\">\r\n <nz-form-item>\r\n <nz-form-label>Negrita</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.labelBold\" name=\"labelBold\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Fila de chips de sugerencias r\u00E1pidas + Preview del formato -->\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"format-presets-bar\">\r\n @if (unitPosition === 'suffix' || unitPosition === 'prefix') {\r\n <span class=\"format-presets-bar__title\">Signos r\u00E1pidos:</span>\r\n @for (sym of commonUnitSymbols; track sym) {\r\n <button type=\"button\" nz-button nzSize=\"small\" [nzType]=\"unitSymbol === sym ? 'primary' : 'default'\"\r\n class=\"format-preset-btn\" (click)=\"onSelectPresetUnit(sym)\">\r\n {{ sym }}\r\n </button>\r\n }\r\n }\r\n <span class=\"format-preview-badge\">\r\n Vista previa: <strong>{{ formatPreview }}</strong>\r\n </span>\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Constructor de Rangos (Est\u00E1ndar / Multi) -->\r\n @if (hasRangesBuilder) {\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Rangos de Color (Ranges)</div>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"24\">\r\n @for (range of internalConfig.ranges; track trackByIndex($index)) {\r\n <div class=\"range-row\">\r\n <div class=\"range-field\">\r\n <span class=\"range-field__label\">Desde</span>\r\n <nz-input-number style=\"width: 100%\" [(ngModel)]=\"range.start\"\r\n [name]=\"'range_start_' + $index\" (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </div>\r\n <div class=\"range-field\">\r\n <span class=\"range-field__label\">Hasta</span>\r\n <nz-input-number style=\"width: 100%\" [(ngModel)]=\"range.end\"\r\n [name]=\"'range_end_' + $index\" (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </div>\r\n <div class=\"range-field range-field--color\">\r\n <span class=\"range-field__label\">Color</span>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"range.color\"\r\n [name]=\"'range_color_' + $index\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </div>\r\n <div class=\"range-field\">\r\n <span class=\"range-field__label\">Grosor</span>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"1\" [(ngModel)]=\"range.width\"\r\n [name]=\"'range_width_' + $index\" (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </div>\r\n <div class=\"range-field range-field--label\">\r\n <span class=\"range-field__label\">Etiqueta</span>\r\n <input nz-input type=\"text\" [(ngModel)]=\"range.label\" [name]=\"'range_label_' + $index\"\r\n placeholder=\"Opcional\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </div>\r\n <button nz-button nzDanger nzSize=\"small\" type=\"button\" class=\"palette-remove-btn\"\r\n (click)=\"removeRange($index)\" nz-tooltip nzTooltipTitle=\"Eliminar rango\">\u2715</button>\r\n </div>\r\n }\r\n\r\n <div class=\"palette-actions\">\r\n <button nz-button nzType=\"dashed\" nzSize=\"small\" type=\"button\" (click)=\"addRange()\">\r\n + Agregar Rango\r\n </button>\r\n <button nz-button nzType=\"link\" nzSize=\"small\" type=\"button\" (click)=\"resetRanges()\">\r\n Restaurar Rangos\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n <!-- ==================== CARD 3: CONFIGURACI\u00D3N DE DATOS (configData) ==================== -->\r\n <div nz-col [nzXs]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Configuraci\u00F3n de Datos (configData)\" class=\"custom-card\">\r\n <div nz-row [nzGutter]=\"[16, 12]\">\r\n\r\n <!-- M\u00E9trica (yAxis con Selector en \u00C1rbol) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>M\u00E9trica (yAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"singleConfig.yAxis\"\r\n name=\"yAxis\"\r\n placeholder=\"ej. detalle_ventas.monto_total\"\r\n [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button\r\n nz-button\r\n nzType=\"default\"\r\n type=\"button\"\r\n nz-tooltip\r\n nzTooltipTitle=\"Seleccionar columna desde \u00E1rbol\"\r\n (click)=\"openColumnSelector('yAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button\r\n nz-button\r\n nzType=\"default\"\r\n nzDanger\r\n type=\"button\"\r\n nz-tooltip\r\n nzTooltipTitle=\"Limpiar campo\"\r\n (click)=\"clearField('yAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Agregaci\u00F3n -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Agregaci\u00F3n</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.aggregation\" name=\"aggregation\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n @for (opt of gaugeAggregations; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Joins -->\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Habilitar Joins</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"singleConfig.joins\" name=\"joinsEnabled\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Configuraci\u00F3n de Tooltip (el gauge solo soporta enable) -->\r\n @if (singleConfig.tooltip) {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzMd]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Configuraci\u00F3n de Tooltip\" class=\"custom-card\">\r\n <div nz-row [nzGutter]=\"[12, 12]\">\r\n <div nz-col [nzXs]=\"24\" class=\"mt-2\"\r\n style=\"display: flex; flex-direction: column; align-items: flex-start; gap: 6px;\">\r\n <span style=\"font-weight: 500; color: #334155;\">Habilitar Tooltip</span>\r\n <nz-switch [(ngModel)]=\"singleConfig.tooltip.enable\" name=\"tooltipEnable\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n }\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n </div>\r\n </form>\r\n\r\n <!-- @if (showJsonToggle && showJsonPreview) {\r\n <div class=\"json-preview-box mt-3\">\r\n <div class=\"json-preview-title\">JSON Generado (YwGaugeMappingConfig):</div>\r\n <pre class=\"json-preview-code\"><code>{{ internalConfig | json }}</code></pre>\r\n </div>\r\n } -->\r\n\r\n </div>\r\n\r\n <!-- Previsualizaci\u00F3n en tiempo real (oculta por defecto) -->\r\n @if (showPreview) {\r\n <div nz-col [nzXs]=\"24\" [nzLg]=\"10\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Vista Previa en Vivo\" class=\"custom-card\">\r\n <div class=\"gauge-preview-wrapper\" [style.height]=\"previewHeight\">\r\n <yw-gauge-chart\r\n idComponent=\"gauge_config_internal_preview\"\r\n [chartData]=\"chartData\"\r\n [config]=\"internalConfig\">\r\n </yw-gauge-chart>\r\n </div>\r\n </nz-card>\r\n </div>\r\n }\r\n\r\n </div>\r\n }\r\n\r\n</nz-card>\r\n", styles: ["@charset \"UTF-8\";.format-presets-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 12px;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;margin-top:4px}.format-presets-bar__title{font-size:12px;font-weight:600;color:#64748b;margin-right:4px}.format-preset-btn{font-size:11px;font-weight:500;padding:0 8px;height:24px;line-height:22px;border-radius:4px}.format-preview-badge{margin-left:auto;font-size:12px;color:#475569;background-color:#e2e8f0;padding:2px 10px;border-radius:12px}.format-preview-badge strong{color:#0f172a;font-weight:700}.palette-color-input{width:36px;height:28px;padding:0;border:none;border-radius:4px;cursor:pointer;background:transparent}.palette-color-input::-webkit-color-swatch-wrapper{padding:0}.palette-color-input::-webkit-color-swatch{border:1px solid rgba(0,0,0,.15);border-radius:4px}.custom-card{border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 1px 3px #0000000d;overflow:hidden}.custom-card ::ng-deep .ant-card-head{background-color:#f8fafc;border-bottom:1px solid #e2e8f0;padding:0 20px;min-height:48px}.custom-card ::ng-deep .ant-card-head .ant-card-head-title{font-size:15px;font-weight:600;color:#334155}.custom-card ::ng-deep .ant-card-head .ant-card-head-wrapper{flex-wrap:wrap;row-gap:12px;padding-top:12px;padding-bottom:12px}.custom-card ::ng-deep .ant-card-body{padding:20px}:host ::ng-deep .ant-switch-checked{background-color:#028989!important}.tooltip-preview-box{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px;padding:6px 10px;background:#fff;border:1px dashed #cbd5e1;border-radius:4px;font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i9.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap", "nzRequiredMark"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzVariant", "nzSize", "nzStepperless", "nzStatus", "disabled", "readonly"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzInputNumberModule }, { kind: "component", type: i8$1.NzInputNumberComponent, selector: "nz-input-number", inputs: ["nzId", "nzSize", "nzPlaceHolder", "nzStatus", "nzVariant", "nzStep", "nzMin", "nzMax", "nzPrecision", "nzParser", "nzFormatter", "nzDisabled", "nzReadOnly", "nzAutoFocus", "nzBordered", "nzKeyboard", "nzControls", "nzPrefix", "nzSuffix", "nzAddonBefore", "nzAddonAfter"], outputs: ["nzBlur", "nzFocus", "nzOnStep"], exportAs: ["nzInputNumber"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i7.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i7.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzVariant", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzPrefix", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus", "nzOnClear"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzSwitchModule }, { kind: "component", type: i8.NzSwitchComponent, selector: "nz-switch", inputs: ["nzLoading", "nzDisabled", "nzControl", "nzCheckedChildren", "nzUnCheckedChildren", "nzSize", "nzId"], exportAs: ["nzSwitch"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i10.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i11.ɵNzTransitionPatchDirective, selector: "[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i12.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i14.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i13.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDividerModule }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type: GaugeChartComponent, selector: "yw-gauge-chart", inputs: ["idComponent", "chartData", "config"] }] }); }
6589
6618
  }
6590
6619
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: GaugeChartConfigComponent, decorators: [{
6591
6620
  type: Component,
@@ -6605,7 +6634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
6605
6634
  NzDividerModule,
6606
6635
  NzModalModule,
6607
6636
  GaugeChartComponent,
6608
- ], template: "<div class=\"main-container-card\">\r\n <!-- Cabecera personalizada -->\r\n <div class=\"flex flex-col sm:flex-row sm:items-center sm:justify-between border-b px-4 py-3 gap-2\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"configCardTitle\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"configCardExtra\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- T\u00EDtulo interno del card -->\r\n <ng-template #configCardTitle>\r\n <div class=\"gauge-config-card-title\">\r\n <span nz-icon nzType=\"dashboard\" nzTheme=\"outline\" class=\"gauge-config-card-title__icon\"></span>\r\n <span>{{ title }}</span>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- Acciones de la cabecera: toggle JSON (comentado temporalmente) -->\r\n <ng-template #configCardExtra>\r\n <!-- <div class=\"gauge-config-card-actions\">\r\n @if (showJsonToggle) {\r\n <span class=\"gauge-config-json-label\">Ver JSON:</span>\r\n <nz-switch [(ngModel)]=\"showJsonPreview\" nzSize=\"small\"></nz-switch>\r\n }\r\n </div> -->\r\n </ng-template>\r\n\r\n @if (internalConfig) {\r\n <div nz-row [nzGutter]=\"[20, 20]\">\r\n\r\n <div nz-col [nzXs]=\"24\" [nzLg]=\"showPreview ? 14 : 24\">\r\n\r\n <form nz-form nzLayout=\"vertical\">\r\n <div nz-row [nzGutter]=\"[16, 16]\">\r\n\r\n <!-- ==================== CARD 1: CONFIGURACI\u00D3N GENERAL ==================== -->\r\n <div nz-col [nzXs]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Configuraci\u00F3n General\" class=\"sub-card-container mb-3\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Provider</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.provider\" name=\"chartProvider\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n <nz-option nzValue=\"syncfusion\" nzLabel=\"syncfusion\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.title\" name=\"chartTitle\"\r\n placeholder=\"Ej: Monto Total de Ventas\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Variante (Variant Type)</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [ngModel]=\"variantType\" name=\"variantType\"\r\n (ngModelChange)=\"onVariantTypeChange($event)\">\r\n @for (opt of gaugeVariants; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n <!-- ==================== CARD 2: APARIENCIA Y ESTILOS ==================== -->\r\n <div nz-col [nzXs]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Estilos y Apariencia\" class=\"sub-card-container mb-3\">\r\n <div nz-row [nzGutter]=\"[16, 12]\">\r\n\r\n <!-- L\u00EDmites y Arco -->\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">L\u00EDmites y Arco</div>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>M\u00EDnimo</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [(ngModel)]=\"internalConfig.minimum\" name=\"minimum\"\r\n (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>M\u00E1ximo</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [(ngModel)]=\"internalConfig.maximum\" name=\"maximum\"\r\n (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>\u00C1ngulo Inicio</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"0\" [nzMax]=\"360\"\r\n [(ngModel)]=\"internalConfig.startAngle\" name=\"startAngle\"\r\n (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>\u00C1ngulo Fin</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"0\" [nzMax]=\"360\"\r\n [(ngModel)]=\"internalConfig.endAngle\" name=\"endAngle\"\r\n (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Aguja y Esquinas -->\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">{{ !isProgressVariant ? 'Aguja y Esquinas' : 'Esquinas del Arco' }}</div>\r\n </div>\r\n\r\n @if (!isProgressVariant) {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color de Aguja</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.pointerColor\"\r\n name=\"pointerColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n @if (variantType !== 'standard') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Estilo de Esquinas</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.cornerStyle\" name=\"cornerStyle\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n @for (opt of gaugeCornerStyles; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n @if (isMulti) {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Redondear todos los rangos</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.roundMultiRanges\" name=\"roundMultiRanges\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Pista y Progreso (Position / Width-Range) -->\r\n @if (isProgressVariant) {\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Pista y Progreso</div>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Activar Pista</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.enableProgressTrack\" name=\"enableProgressTrack\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n @if (internalConfig.enableProgressTrack) {\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Aguja con L\u00EDquido</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.showNeedleWithProgress\" name=\"showNeedleWithProgress\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n @if (internalConfig.showNeedleWithProgress) {\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Color de Aguja</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.pointerColor\"\r\n name=\"pointerColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Color Fondo</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.trackColor\"\r\n name=\"trackColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Color Relleno</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.progressColor\"\r\n name=\"progressColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Grosor (px)</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"1\" [(ngModel)]=\"internalConfig.progressWidth\"\r\n name=\"progressWidth\" (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n } @else if (variantType === 'position') {\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Color de Aguja</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.pointerColor\"\r\n name=\"pointerColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n @if (isWidthRange) {\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Ancho Inicial (px)</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"1\" [(ngModel)]=\"internalConfig.startWidth\"\r\n name=\"startWidth\" (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Ancho Final (px)</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"1\" [(ngModel)]=\"internalConfig.endWidth\"\r\n name=\"endWidth\" (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n }\r\n\r\n <!-- Escala y Ticks -->\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Escala y Ticks</div>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Ticks</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.showTicks\" name=\"showTicks\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n @if (internalConfig.showTicks) {\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Posici\u00F3n de Ticks</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.tickPosition\" name=\"tickPosition\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n @for (opt of gaugeTickPositions; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Etiqueta Central -->\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Etiqueta Central (Valor)</div>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Etiqueta</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.showLabel\" name=\"showLabel\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n @if (internalConfig.showLabel) {\r\n <!-- Posici\u00F3n de la Unidad (Estilo Dise\u00F1ador) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Posici\u00F3n del Valor / Unidad</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"unitPosition\" name=\"unitPosition\"\r\n (ngModelChange)=\"onDesignerFormatChange()\">\r\n @for (opt of formatPositions; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- S\u00EDmbolo o Unidad (Input de texto para digitar signo o palabra) -->\r\n @if (unitPosition === 'suffix' || unitPosition === 'prefix') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Signo / Unidad</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"unitSymbol\" name=\"unitSymbol\"\r\n placeholder=\"Ej: USD, $, %, S/\" (ngModelChange)=\"onDesignerFormatChange()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzSm]=\"6\" [nzMd]=\"3\">\r\n <nz-form-item>\r\n <nz-form-label>Espacio</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"unitSpacing\" name=\"unitSpacing\"\r\n (ngModelChange)=\"onDesignerFormatChange()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n @if (unitPosition === 'custom') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Plantilla Personalizada</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.labelFormat\" name=\"labelFormat\"\r\n placeholder=\"Ej: {value} USD\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <div nz-col [nzXs]=\"12\" [nzSm]=\"6\" [nzMd]=\"3\">\r\n <nz-form-item>\r\n <nz-form-label>Tama\u00F1o</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.labelSize\" name=\"labelSize\"\r\n placeholder=\"24px\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzSm]=\"6\" [nzMd]=\"3\">\r\n <nz-form-item>\r\n <nz-form-label>Color</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.labelColor\"\r\n name=\"labelColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzSm]=\"6\" [nzMd]=\"3\">\r\n <nz-form-item>\r\n <nz-form-label>Negrita</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.labelBold\" name=\"labelBold\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Fila de chips de sugerencias r\u00E1pidas + Preview del formato -->\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"format-presets-bar\">\r\n @if (unitPosition === 'suffix' || unitPosition === 'prefix') {\r\n <span class=\"format-presets-bar__title\">Signos r\u00E1pidos:</span>\r\n @for (sym of commonUnitSymbols; track sym) {\r\n <button type=\"button\" nz-button nzSize=\"small\" [nzType]=\"unitSymbol === sym ? 'primary' : 'default'\"\r\n class=\"format-preset-btn\" (click)=\"onSelectPresetUnit(sym)\">\r\n {{ sym }}\r\n </button>\r\n }\r\n }\r\n <span class=\"format-preview-badge\">\r\n Vista previa: <strong>{{ formatPreview }}</strong>\r\n </span>\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Constructor de Rangos (Est\u00E1ndar / Multi) -->\r\n @if (hasRangesBuilder) {\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Rangos de Color (Ranges)</div>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"24\">\r\n @for (range of internalConfig.ranges; track trackByIndex($index)) {\r\n <div class=\"range-row\">\r\n <div class=\"range-field\">\r\n <span class=\"range-field__label\">Desde</span>\r\n <nz-input-number style=\"width: 100%\" [(ngModel)]=\"range.start\"\r\n [name]=\"'range_start_' + $index\" (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </div>\r\n <div class=\"range-field\">\r\n <span class=\"range-field__label\">Hasta</span>\r\n <nz-input-number style=\"width: 100%\" [(ngModel)]=\"range.end\"\r\n [name]=\"'range_end_' + $index\" (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </div>\r\n <div class=\"range-field range-field--color\">\r\n <span class=\"range-field__label\">Color</span>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"range.color\"\r\n [name]=\"'range_color_' + $index\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </div>\r\n <div class=\"range-field\">\r\n <span class=\"range-field__label\">Grosor</span>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"1\" [(ngModel)]=\"range.width\"\r\n [name]=\"'range_width_' + $index\" (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </div>\r\n <div class=\"range-field range-field--label\">\r\n <span class=\"range-field__label\">Etiqueta</span>\r\n <input nz-input type=\"text\" [(ngModel)]=\"range.label\" [name]=\"'range_label_' + $index\"\r\n placeholder=\"Opcional\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </div>\r\n <button nz-button nzDanger nzSize=\"small\" type=\"button\" class=\"palette-remove-btn\"\r\n (click)=\"removeRange($index)\" nz-tooltip nzTooltipTitle=\"Eliminar rango\">\u2715</button>\r\n </div>\r\n }\r\n\r\n <div class=\"palette-actions\">\r\n <button nz-button nzType=\"dashed\" nzSize=\"small\" type=\"button\" (click)=\"addRange()\">\r\n + Agregar Rango\r\n </button>\r\n <button nz-button nzType=\"link\" nzSize=\"small\" type=\"button\" (click)=\"resetRanges()\">\r\n Restaurar Rangos\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n <!-- ==================== CARD 3: CONFIGURACI\u00D3N DE DATOS (configData) ==================== -->\r\n <div nz-col [nzXs]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Configuraci\u00F3n de Datos\" class=\"sub-card-container mb-3\">\r\n <div nz-row [nzGutter]=\"[16, 12]\">\r\n\r\n <!-- M\u00E9trica (yAxis con Selector en \u00C1rbol) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>M\u00E9trica (yAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"singleConfig.yAxis\"\r\n name=\"yAxis\"\r\n placeholder=\"ej. detalle_ventas.monto_total\"\r\n [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button\r\n nz-button\r\n nzType=\"default\"\r\n type=\"button\"\r\n nz-tooltip\r\n nzTooltipTitle=\"Seleccionar columna desde \u00E1rbol\"\r\n (click)=\"openColumnSelector('yAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button\r\n nz-button\r\n nzType=\"default\"\r\n nzDanger\r\n type=\"button\"\r\n nz-tooltip\r\n nzTooltipTitle=\"Limpiar campo\"\r\n (click)=\"clearField('yAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Agregaci\u00F3n -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Agregaci\u00F3n</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.aggregation\" name=\"aggregation\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n @for (opt of gaugeAggregations; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Joins -->\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Habilitar Joins</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"singleConfig.joins\" name=\"joinsEnabled\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Tooltip Config (el gauge solo soporta enable) -->\r\n @if (singleConfig.tooltip) {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzMd]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Tooltip Config\" class=\"sub-card-container h-100\">\r\n <div nz-row [nzGutter]=\"[12, 12]\">\r\n <div nz-col [nzXs]=\"24\" class=\"mt-2\"\r\n style=\"display: flex; flex-direction: column; align-items: flex-start; gap: 6px;\">\r\n <span style=\"font-weight: 500; color: #334155;\">Habilitar Tooltip</span>\r\n <nz-switch [(ngModel)]=\"singleConfig.tooltip.enable\" name=\"tooltipEnable\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n }\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n </div>\r\n </form>\r\n\r\n <!-- @if (showJsonToggle && showJsonPreview) {\r\n <div class=\"json-preview-box mt-3\">\r\n <div class=\"json-preview-title\">JSON Generado (YwGaugeMappingConfig):</div>\r\n <pre class=\"json-preview-code\"><code>{{ internalConfig | json }}</code></pre>\r\n </div>\r\n } -->\r\n\r\n </div>\r\n\r\n <!-- Previsualizaci\u00F3n en tiempo real (oculta por defecto) -->\r\n @if (showPreview) {\r\n <div nz-col [nzXs]=\"24\" [nzLg]=\"10\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Vista Previa en Vivo\" class=\"gauge-preview-card h-100\">\r\n <div class=\"gauge-preview-wrapper\" [style.height]=\"previewHeight\">\r\n <yw-gauge-chart\r\n idComponent=\"gauge_config_internal_preview\"\r\n [chartData]=\"chartData\"\r\n [config]=\"internalConfig\">\r\n </yw-gauge-chart>\r\n </div>\r\n </nz-card>\r\n </div>\r\n }\r\n\r\n </div>\r\n }\r\n\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.gauge-config-card{border-radius:10px}.gauge-config-card-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#1e293b}.gauge-config-card-title__icon{font-size:18px;color:#028989}button[nz-button]:has(i[nzType=search]),button[nz-button]:has(span[nzType=search]){color:#028989;border-color:#d1fae5;background-color:#f0fdf4;transition:all .2s ease}button[nz-button]:has(i[nzType=search]):hover,button[nz-button]:has(span[nzType=search]):hover{color:#028989;border-color:#028989;background-color:#ecfdf5}.gauge-config-card-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.gauge-config-json-label{font-size:12px;font-weight:500;color:#64748b;margin-right:4px}nz-form-item{margin-bottom:14px}nz-form-item:last-child{margin-bottom:0}.sub-card-container{border-radius:8px;background-color:#fff;border:1px solid #e2e8f0}.sub-card-container ::ng-deep .ant-card-head,.sub-card-container ::ng-deep .ant-card-head-wrapper{border-bottom:1px solid #e2e8f0;font-weight:600;font-size:14px;color:#1e293b}nz-select{width:100%}nz-form-label ::ng-deep label{white-space:normal!important;word-break:break-word;height:auto!important;line-height:1.3!important}.section-divider-title{font-size:13px;font-weight:600;color:#334155;border-bottom:1px dashed #e2e8f0;padding-bottom:4px;margin-top:8px;margin-bottom:8px}.palette-color-input{width:36px;height:28px;padding:0;border:none;border-radius:4px;cursor:pointer;background:transparent}.palette-color-input::-webkit-color-swatch-wrapper{padding:0}.palette-color-input::-webkit-color-swatch{border:1px solid rgba(0,0,0,.15);border-radius:4px}.palette-remove-btn{padding:0 4px;height:22px;line-height:20px;font-size:11px}.palette-actions{display:flex;align-items:center;gap:8px;margin-top:10px}.range-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;padding:8px 10px;margin-bottom:8px;background-color:#fafafa;border:1px solid #e5e7eb;border-radius:6px;transition:all .2s ease}.range-row:hover{border-color:#cbd5e1;background-color:#f1f5f9}.range-field{display:flex;flex-direction:column;gap:4px;flex:1 1 90px;min-width:90px;max-width:140px}.range-field--color{flex:0 0 auto;min-width:48px}.range-field--label{flex:1 1 130px;max-width:200px}.range-field__label{font-size:12px;font-weight:500;color:#64748b}.gauge-preview-wrapper{width:100%;display:flex;align-items:center;justify-content:center;background:#f8fafc;border-radius:8px;border:1px dashed #cbd5e1;padding:12px;position:relative;overflow:hidden}.gauge-preview-wrapper>yw-gauge-chart{display:block;width:100%;height:100%}.json-preview-box{background:#0f172a;border-radius:8px;padding:12px;border:1px solid #1e293b}.json-preview-title{color:#94a3b8;font-size:12px;font-weight:600;margin-bottom:6px}.json-preview-code{background:transparent;color:#38bdf8;font-size:11px;font-family:Fira Code,Cascadia Code,Consolas,monospace;margin:0;max-height:240px;overflow-y:auto;white-space:pre-wrap;word-break:break-all}.format-presets-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 12px;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;margin-top:4px}.format-presets-bar__title{font-size:12px;font-weight:600;color:#64748b;margin-right:4px}.format-preset-btn{font-size:11px;font-weight:500;padding:0 8px;height:24px;line-height:22px;border-radius:4px}.format-preview-badge{margin-left:auto;font-size:12px;color:#475569;background-color:#e2e8f0;padding:2px 10px;border-radius:12px}.format-preview-badge strong{color:#0f172a;font-weight:700}\n"] }]
6637
+ ], template: "<nz-card [nzTitle]=\"configCardTitle\" [nzExtra]=\"configCardExtra\" class=\"gauge-config-card\" [nzBodyStyle]=\"{ padding: '0px' }\"\r\n [ngStyle]=\"{ border: 'none' }\">\r\n\r\n <!-- T\u00EDtulo interno del card -->\r\n <!-- T\u00EDtulo interno del card -->\r\n <ng-template #configCardTitle>\r\n <div style=\"display: flex; align-items: center; gap: 8px\">\r\n <i nz-icon nzType=\"dashboard\" nzTheme=\"outline\" style=\"font-size: 20px; color: #028989\"></i>\r\n <span>{{ title }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n <!-- Acciones de la cabecera: toggle JSON (comentado temporalmente) -->\r\n<ng-template #configCardExtra>\r\n <div style=\"display: flex; align-items: center; gap: 12px\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"restarConfig()\">\r\n <span nz-icon nzType=\"reload\" nzTheme=\"outline\" ></span>\r\n Restaurar\r\n </button>\r\n <!-- <button nz-button nzType=\"primary\" type=\"submit\" (click)=\"onSubmit()\">\r\n <span nz-icon nzType=\"check\"></span>\r\n Aplicar\r\n </button> -->\r\n </div>\r\n</ng-template>\r\n\r\n @if (internalConfig) {\r\n <div nz-row [nzGutter]=\"[20, 20]\">\r\n\r\n <div nz-col [nzXs]=\"24\" [nzLg]=\"showPreview ? 14 : 24\">\r\n\r\n <form nz-form nzLayout=\"vertical\">\r\n <div nz-row [nzGutter]=\"[16, 16]\">\r\n\r\n <!-- ==================== CARD 1: CONFIGURACI\u00D3N GENERAL ==================== -->\r\n <div nz-col [nzXs]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Configuraci\u00F3n General\" class=\"custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Provider</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.provider\" name=\"chartProvider\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n <nz-option nzValue=\"syncfusion\" nzLabel=\"syncfusion\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.title\" name=\"chartTitle\"\r\n placeholder=\"Ej: Monto Total de Ventas\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Variante (Variant Type)</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [ngModel]=\"variantType\" name=\"variantType\"\r\n (ngModelChange)=\"onVariantTypeChange($event)\">\r\n @for (opt of gaugeVariants; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n <!-- ==================== CARD 2: APARIENCIA Y ESTILOS ==================== -->\r\n <div nz-col [nzXs]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Estilos y Apariencia\" class=\"custom-card\">\r\n <div nz-row [nzGutter]=\"[16, 12]\">\r\n\r\n <!-- L\u00EDmites y Arco -->\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">L\u00EDmites y Arco</div>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>M\u00EDnimo</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [(ngModel)]=\"internalConfig.minimum\" name=\"minimum\"\r\n (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>M\u00E1ximo</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [(ngModel)]=\"internalConfig.maximum\" name=\"maximum\"\r\n (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>\u00C1ngulo Inicio</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"0\" [nzMax]=\"360\"\r\n [(ngModel)]=\"internalConfig.startAngle\" name=\"startAngle\"\r\n (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>\u00C1ngulo Fin</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"0\" [nzMax]=\"360\"\r\n [(ngModel)]=\"internalConfig.endAngle\" name=\"endAngle\"\r\n (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Aguja y Esquinas -->\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">{{ !isProgressVariant ? 'Aguja y Esquinas' : 'Esquinas del Arco' }}</div>\r\n </div>\r\n\r\n @if (!isProgressVariant) {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color de Aguja</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.pointerColor\"\r\n name=\"pointerColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n @if (variantType !== 'standard') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Estilo de Esquinas</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.cornerStyle\" name=\"cornerStyle\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n @for (opt of gaugeCornerStyles; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n @if (isMulti) {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Redondear todos los rangos</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.roundMultiRanges\" name=\"roundMultiRanges\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Pista y Progreso (Position / Width-Range) -->\r\n @if (isProgressVariant) {\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Pista y Progreso</div>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Activar Pista</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.enableProgressTrack\" name=\"enableProgressTrack\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n @if (internalConfig.enableProgressTrack) {\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Aguja con L\u00EDquido</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.showNeedleWithProgress\" name=\"showNeedleWithProgress\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n @if (internalConfig.showNeedleWithProgress) {\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Color de Aguja</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.pointerColor\"\r\n name=\"pointerColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Color Fondo</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.trackColor\"\r\n name=\"trackColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Color Relleno</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.progressColor\"\r\n name=\"progressColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Grosor (px)</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"1\" [(ngModel)]=\"internalConfig.progressWidth\"\r\n name=\"progressWidth\" (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n } @else if (variantType === 'position') {\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Color de Aguja</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.pointerColor\"\r\n name=\"pointerColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n @if (isWidthRange) {\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Ancho Inicial (px)</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"1\" [(ngModel)]=\"internalConfig.startWidth\"\r\n name=\"startWidth\" (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Ancho Final (px)</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"1\" [(ngModel)]=\"internalConfig.endWidth\"\r\n name=\"endWidth\" (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n }\r\n\r\n <!-- Escala y Ticks -->\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Escala y Ticks</div>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Ticks</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.showTicks\" name=\"showTicks\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n @if (internalConfig.showTicks) {\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Posici\u00F3n de Ticks</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.tickPosition\" name=\"tickPosition\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n @for (opt of gaugeTickPositions; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Etiqueta Central -->\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Etiqueta Central (Valor)</div>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Etiqueta</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.showLabel\" name=\"showLabel\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n @if (internalConfig.showLabel) {\r\n <!-- Posici\u00F3n de la Unidad (Estilo Dise\u00F1ador) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Posici\u00F3n del Valor / Unidad</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"unitPosition\" name=\"unitPosition\"\r\n (ngModelChange)=\"onDesignerFormatChange()\">\r\n @for (opt of formatPositions; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- S\u00EDmbolo o Unidad (Input de texto para digitar signo o palabra) -->\r\n @if (unitPosition === 'suffix' || unitPosition === 'prefix') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Signo / Unidad</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"unitSymbol\" name=\"unitSymbol\"\r\n placeholder=\"Ej: USD, $, %, S/\" (ngModelChange)=\"onDesignerFormatChange()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzSm]=\"6\" [nzMd]=\"3\">\r\n <nz-form-item>\r\n <nz-form-label>Espacio</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"unitSpacing\" name=\"unitSpacing\"\r\n (ngModelChange)=\"onDesignerFormatChange()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n @if (unitPosition === 'custom') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"6\">\r\n <nz-form-item>\r\n <nz-form-label>Plantilla Personalizada</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.labelFormat\" name=\"labelFormat\"\r\n placeholder=\"Ej: {value} USD\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <div nz-col [nzXs]=\"12\" [nzSm]=\"6\" [nzMd]=\"3\">\r\n <nz-form-item>\r\n <nz-form-label>Tama\u00F1o</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" [(ngModel)]=\"internalConfig.labelSize\" name=\"labelSize\"\r\n placeholder=\"24px\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzSm]=\"6\" [nzMd]=\"3\">\r\n <nz-form-item>\r\n <nz-form-label>Color</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"internalConfig.labelColor\"\r\n name=\"labelColor\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"12\" [nzSm]=\"6\" [nzMd]=\"3\">\r\n <nz-form-item>\r\n <nz-form-label>Negrita</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"internalConfig.labelBold\" name=\"labelBold\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Fila de chips de sugerencias r\u00E1pidas + Preview del formato -->\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"format-presets-bar\">\r\n @if (unitPosition === 'suffix' || unitPosition === 'prefix') {\r\n <span class=\"format-presets-bar__title\">Signos r\u00E1pidos:</span>\r\n @for (sym of commonUnitSymbols; track sym) {\r\n <button type=\"button\" nz-button nzSize=\"small\" [nzType]=\"unitSymbol === sym ? 'primary' : 'default'\"\r\n class=\"format-preset-btn\" (click)=\"onSelectPresetUnit(sym)\">\r\n {{ sym }}\r\n </button>\r\n }\r\n }\r\n <span class=\"format-preview-badge\">\r\n Vista previa: <strong>{{ formatPreview }}</strong>\r\n </span>\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Constructor de Rangos (Est\u00E1ndar / Multi) -->\r\n @if (hasRangesBuilder) {\r\n <div nz-col [nzSpan]=\"24\">\r\n <div class=\"section-divider-title\">Rangos de Color (Ranges)</div>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"24\">\r\n @for (range of internalConfig.ranges; track trackByIndex($index)) {\r\n <div class=\"range-row\">\r\n <div class=\"range-field\">\r\n <span class=\"range-field__label\">Desde</span>\r\n <nz-input-number style=\"width: 100%\" [(ngModel)]=\"range.start\"\r\n [name]=\"'range_start_' + $index\" (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </div>\r\n <div class=\"range-field\">\r\n <span class=\"range-field__label\">Hasta</span>\r\n <nz-input-number style=\"width: 100%\" [(ngModel)]=\"range.end\"\r\n [name]=\"'range_end_' + $index\" (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </div>\r\n <div class=\"range-field range-field--color\">\r\n <span class=\"range-field__label\">Color</span>\r\n <input type=\"color\" class=\"palette-color-input\" [(ngModel)]=\"range.color\"\r\n [name]=\"'range_color_' + $index\" (ngModelChange)=\"onFieldChangeImmediate()\" />\r\n </div>\r\n <div class=\"range-field\">\r\n <span class=\"range-field__label\">Grosor</span>\r\n <nz-input-number style=\"width: 100%\" [nzMin]=\"1\" [(ngModel)]=\"range.width\"\r\n [name]=\"'range_width_' + $index\" (ngModelChange)=\"onFieldChangeDebounced()\"></nz-input-number>\r\n </div>\r\n <div class=\"range-field range-field--label\">\r\n <span class=\"range-field__label\">Etiqueta</span>\r\n <input nz-input type=\"text\" [(ngModel)]=\"range.label\" [name]=\"'range_label_' + $index\"\r\n placeholder=\"Opcional\" (ngModelChange)=\"onFieldChangeDebounced()\" />\r\n </div>\r\n <button nz-button nzDanger nzSize=\"small\" type=\"button\" class=\"palette-remove-btn\"\r\n (click)=\"removeRange($index)\" nz-tooltip nzTooltipTitle=\"Eliminar rango\">\u2715</button>\r\n </div>\r\n }\r\n\r\n <div class=\"palette-actions\">\r\n <button nz-button nzType=\"dashed\" nzSize=\"small\" type=\"button\" (click)=\"addRange()\">\r\n + Agregar Rango\r\n </button>\r\n <button nz-button nzType=\"link\" nzSize=\"small\" type=\"button\" (click)=\"resetRanges()\">\r\n Restaurar Rangos\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n <!-- ==================== CARD 3: CONFIGURACI\u00D3N DE DATOS (configData) ==================== -->\r\n <div nz-col [nzXs]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Configuraci\u00F3n de Datos (configData)\" class=\"custom-card\">\r\n <div nz-row [nzGutter]=\"[16, 12]\">\r\n\r\n <!-- M\u00E9trica (yAxis con Selector en \u00C1rbol) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>M\u00E9trica (yAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"singleConfig.yAxis\"\r\n name=\"yAxis\"\r\n placeholder=\"ej. detalle_ventas.monto_total\"\r\n [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button\r\n nz-button\r\n nzType=\"default\"\r\n type=\"button\"\r\n nz-tooltip\r\n nzTooltipTitle=\"Seleccionar columna desde \u00E1rbol\"\r\n (click)=\"openColumnSelector('yAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button\r\n nz-button\r\n nzType=\"default\"\r\n nzDanger\r\n type=\"button\"\r\n nz-tooltip\r\n nzTooltipTitle=\"Limpiar campo\"\r\n (click)=\"clearField('yAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Agregaci\u00F3n -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Agregaci\u00F3n</nz-form-label>\r\n <nz-form-control>\r\n <nz-select [(ngModel)]=\"internalConfig.aggregation\" name=\"aggregation\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\">\r\n @for (opt of gaugeAggregations; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Joins -->\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Habilitar Joins</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"singleConfig.joins\" name=\"joinsEnabled\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Configuraci\u00F3n de Tooltip (el gauge solo soporta enable) -->\r\n @if (singleConfig.tooltip) {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\" [nzMd]=\"24\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Configuraci\u00F3n de Tooltip\" class=\"custom-card\">\r\n <div nz-row [nzGutter]=\"[12, 12]\">\r\n <div nz-col [nzXs]=\"24\" class=\"mt-2\"\r\n style=\"display: flex; flex-direction: column; align-items: flex-start; gap: 6px;\">\r\n <span style=\"font-weight: 500; color: #334155;\">Habilitar Tooltip</span>\r\n <nz-switch [(ngModel)]=\"singleConfig.tooltip.enable\" name=\"tooltipEnable\"\r\n (ngModelChange)=\"onFieldChangeImmediate()\"></nz-switch>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n }\r\n </div>\r\n </nz-card>\r\n </div>\r\n\r\n </div>\r\n </form>\r\n\r\n <!-- @if (showJsonToggle && showJsonPreview) {\r\n <div class=\"json-preview-box mt-3\">\r\n <div class=\"json-preview-title\">JSON Generado (YwGaugeMappingConfig):</div>\r\n <pre class=\"json-preview-code\"><code>{{ internalConfig | json }}</code></pre>\r\n </div>\r\n } -->\r\n\r\n </div>\r\n\r\n <!-- Previsualizaci\u00F3n en tiempo real (oculta por defecto) -->\r\n @if (showPreview) {\r\n <div nz-col [nzXs]=\"24\" [nzLg]=\"10\">\r\n <nz-card nzType=\"inner\" nzTitle=\"Vista Previa en Vivo\" class=\"custom-card\">\r\n <div class=\"gauge-preview-wrapper\" [style.height]=\"previewHeight\">\r\n <yw-gauge-chart\r\n idComponent=\"gauge_config_internal_preview\"\r\n [chartData]=\"chartData\"\r\n [config]=\"internalConfig\">\r\n </yw-gauge-chart>\r\n </div>\r\n </nz-card>\r\n </div>\r\n }\r\n\r\n </div>\r\n }\r\n\r\n</nz-card>\r\n", styles: ["@charset \"UTF-8\";.format-presets-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 12px;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;margin-top:4px}.format-presets-bar__title{font-size:12px;font-weight:600;color:#64748b;margin-right:4px}.format-preset-btn{font-size:11px;font-weight:500;padding:0 8px;height:24px;line-height:22px;border-radius:4px}.format-preview-badge{margin-left:auto;font-size:12px;color:#475569;background-color:#e2e8f0;padding:2px 10px;border-radius:12px}.format-preview-badge strong{color:#0f172a;font-weight:700}.palette-color-input{width:36px;height:28px;padding:0;border:none;border-radius:4px;cursor:pointer;background:transparent}.palette-color-input::-webkit-color-swatch-wrapper{padding:0}.palette-color-input::-webkit-color-swatch{border:1px solid rgba(0,0,0,.15);border-radius:4px}.custom-card{border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 1px 3px #0000000d;overflow:hidden}.custom-card ::ng-deep .ant-card-head{background-color:#f8fafc;border-bottom:1px solid #e2e8f0;padding:0 20px;min-height:48px}.custom-card ::ng-deep .ant-card-head .ant-card-head-title{font-size:15px;font-weight:600;color:#334155}.custom-card ::ng-deep .ant-card-head .ant-card-head-wrapper{flex-wrap:wrap;row-gap:12px;padding-top:12px;padding-bottom:12px}.custom-card ::ng-deep .ant-card-body{padding:20px}:host ::ng-deep .ant-switch-checked{background-color:#028989!important}.tooltip-preview-box{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px;padding:6px 10px;background:#fff;border:1px dashed #cbd5e1;border-radius:4px;font-size:12px}\n"] }]
6609
6638
  }], ctorParameters: () => [{ type: i2$1.NzModalService }], propDecorators: { chartData: [{
6610
6639
  type: Input,
6611
6640
  args: ['chartData']
@@ -6624,17 +6653,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
6624
6653
  type: Input
6625
6654
  }], title: [{
6626
6655
  type: Input
6656
+ }], idComponent: [{
6657
+ type: Input
6627
6658
  }], configChange: [{
6628
6659
  type: Output
6629
6660
  }] } });
6630
6661
 
6631
- class BubbleChartConfigSyncfusionComponent {
6662
+ // import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
6663
+ // import { CommonModule } from '@angular/common';
6664
+ // import { YwBubbleMappingConfig } from '../../../../../models/config/chart/yw-bubble-chart.interface';
6665
+ // import { BubbleChartSyncfusionComponent } from '../../../../../adapters/charts/bubble-chart/syncfusion/visual/yw-bubble-chart-sycfusion.component';
6666
+ // // import { LineChartSyncfusionComponent } from '../../../../../adapters/charts/line-chart/syncfusion/visual/yw-line-chart-syncfusion.component';
6667
+ // // import { YwLineMappingConfig } from '../../../../../models/config/chart/yw-line-chart-config.interface';
6668
+ // import { TableWithColumns } from '../../../../../models/base/yw-component-base.interface';
6669
+ // import { BubbleChartConfigSyncfusionComponent } from '../../../../../adapters/charts/bubble-chart/syncfusion/config/yw-bubble-chart-config-syncfusion.component';
6670
+ // @Component({
6671
+ // selector: 'yw-bubble-chart-config, yw-bubble-char-config',
6672
+ // standalone: true,
6673
+ // imports: [CommonModule, BubbleChartSyncfusionComponent, BubbleChartConfigSyncfusionComponent],
6674
+ // templateUrl: './yw-bubble-chart-config.component.html',
6675
+ // styleUrl: './yw-bubble-chart-config.component.scss',
6676
+ // })
6677
+ // export class BubbleChartConfigComponent implements OnInit {
6678
+ // @Input('chartData') chartData!: any;
6679
+ // @Input('config') config!: YwBubbleMappingConfig;
6680
+ // @Input('idComponent') idComponent: string=''
6681
+ // @Output() configChange = new EventEmitter<YwBubbleMappingConfig>();
6682
+ // @Input() configSelect?: TableWithColumns;
6683
+ // @Output() axisSelect = new EventEmitter<TableWithColumns>();
6684
+ // ngOnInit(){
6685
+ // // console.log("EL ID DEL COMPONENTE:",this.idComponent)
6686
+ // }
6687
+ // onConfigUpdated(updatedConfig: YwBubbleMappingConfig) {
6688
+ // console.log('updatedConfig segundo nivel:', updatedConfig);
6689
+ // this.configChange.emit({ ...updatedConfig });
6690
+ // }
6691
+ // onColumnSelector(updatedAxis:TableWithColumns){
6692
+ // this.axisSelect.emit(updatedAxis)
6693
+ // }
6694
+ // }
6695
+ class BubbleChartConfigComponent {
6632
6696
  constructor(fb, modal) {
6633
6697
  this.fb = fb;
6634
6698
  this.modal = modal;
6635
6699
  this.chartData = [];
6636
6700
  this.idComponent = '';
6637
- this.seriesConfigChange = new EventEmitter();
6701
+ this.configChange = new EventEmitter();
6638
6702
  this.axisSelect = new EventEmitter();
6639
6703
  // Opciones para los selects
6640
6704
  this.providerOptions = ['syncfusion', 'echarts', 'chartjs'];
@@ -6801,7 +6865,7 @@ class BubbleChartConfigSyncfusionComponent {
6801
6865
  }
6802
6866
  };
6803
6867
  console.log('this.config primer nivel:', this.config);
6804
- this.seriesConfigChange.emit(this.config);
6868
+ this.configChange.emit(this.config);
6805
6869
  }
6806
6870
  else {
6807
6871
  Object.values(this.configForm.controls).forEach(control => {
@@ -6819,7 +6883,7 @@ class BubbleChartConfigSyncfusionComponent {
6819
6883
  const configInitial = JSON.parse(savedData);
6820
6884
  this.config = configInitial;
6821
6885
  this.initForm();
6822
- this.seriesConfigChange.emit(configInitial);
6886
+ this.configChange.emit(configInitial);
6823
6887
  }
6824
6888
  }
6825
6889
  saveLocalStorage() {
@@ -6879,12 +6943,12 @@ class BubbleChartConfigSyncfusionComponent {
6879
6943
  console.log(targetField);
6880
6944
  this.configForm.get('configData')?.get(targetField)?.setValue('');
6881
6945
  }
6882
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BubbleChartConfigSyncfusionComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$1.NzModalService }], target: i0.ɵɵFactoryTarget.Component }); }
6883
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: BubbleChartConfigSyncfusionComponent, isStandalone: true, selector: "yw-bubble-chart-config-syncfusion", inputs: { config: "config", chartData: "chartData", idComponent: "idComponent", configSelect: "configSelect" }, outputs: { seriesConfigChange: "seriesConfigChange", axisSelect: "axisSelect" }, usesOnChanges: true, ngImport: i0, template: "<!-- <nz-card [nzTitle]=\"cardTitleTemplate\" [nzExtra]=\"cardExtraTemplate\" class=\"main-container-card\"> -->\r\n<div class=\"main-container-card\">\r\n \r\n <div class=\"flex flex-col sm:flex-row sm:items-center sm:justify-between border-b px-4 py-3 gap-2\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"cardTitleTemplate\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"cardExtraTemplate\"></ng-container>\r\n </div>\r\n</div>\r\n <form nz-form [formGroup]=\"configForm\" nzLayout=\"vertical\" class=\"config-form\">\r\n <!-- inputs de configuraci\u00F3n general -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n General\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Provider</nz-form-label>\r\n <nz-form-control>\r\n <nz-select formControlName=\"provider\" nzAllowClear>\r\n <nz-option *ngFor=\"let p of providerOptions\" [nzValue]=\"p\" [nzLabel]=\"p\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"title\" placeholder=\"T\u00EDtulo del gr\u00E1fico\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Texto Etiqueta Eje X</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"xLabelText\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Texto Etiqueta Eje Y</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"yLabelText\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n </nz-card>\r\n\r\n <!-- Tus selectores de color, bordes, etc. -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Estilos y Apariencia\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Border Group -->\r\n <div nz-col [nzXs]=\"24\">\r\n <div nz-row [nzGutter]=\"8\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>opacity</nz-form-label>\r\n <nz-form-control>\r\n <nz-select formControlName=\"opacity\" nzAllowClear>\r\n <nz-option *ngFor=\"let o of opacityOptions\" [nzValue]=\"o\" [nzLabel]=\"o\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n </div>\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Factor de tama\u00F1o</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"bubbleSizeFactor\" [nzMin]=\"0.05\" [nzMax]=\"0.5\" [nzStep]=\"0.05\"\r\n [nzPrecision]=\"2\" style=\"width: 100%\"></nz-input-number>\r\n <!-- <nz-input-number formControlName=\"bubbleSizeFactor\" [nzMin]=\"0\" \r\n [nzStep]=\"0.1\" \r\n [nzPrecision]=\"2\"\r\n style=\"width: 100%\"></nz-input-number> -->\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"8\" class=\"mt-4\" style=\"display: flex; align-items: center; gap: 12px\">\r\n <span style=\"font-weight: 500; color: #334155\">Multicolor</span>\r\n <nz-switch formControlName=\"chartoColoredLine\"></nz-switch>\r\n </div> -->\r\n </div>\r\n </div>\r\n <!-- Color verdadero -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color de nulos o vac\u00EDos</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"emptyPointColorInput.click()\">\r\n Seleccionar color\r\n </button>\r\n\r\n @if (configForm.get('emptyPointColor')?.value) {\r\n <span [style.backgroundColor]=\"configForm.get('emptyPointColor')?.value\" style=\"\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n display: inline-block;\r\n border: 1px solid #d9d9d9;\r\n flex-shrink: 0;\r\n \">\r\n </span>\r\n }\r\n\r\n <input #emptyPointColorInput type=\"color\" [formControl]=\"$any(configForm.get('emptyPointColor'))\"\r\n style=\"display: none;\">\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- REGLA DE COLORES -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\">\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Regla de colores Reto\" class=\"mb-3 mt-3 custom-card\">\r\n\r\n <div formGroupName=\"ruleColorPoint\">\r\n <div nz-row [nzGutter]=\"[16, 24]\">\r\n\r\n <!-- Regla -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Regla</nz-form-label>\r\n <nz-form-control>\r\n <nz-select nzAllowClear style=\"width: 100%\"\r\n [formControl]=\"$any(configForm.get('ruleColorPoint.rule'))\">\r\n <nz-option *ngFor=\"let p of rulesOptions\" [nzValue]=\"p.key\" [nzLabel]=\"p.label\">\r\n </nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Umbral -->\r\n @if (configForm.get('ruleColorPoint.rule')?.value === 'threshold') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Umbral</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"thresholdValue\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Cantidad m\u00EDnima -->\r\n @if (configForm.get('ruleColorPoint.rule')?.value === 'range') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Cantidad M\u00EDnima</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"minRange\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Cantidad m\u00E1xima -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Cantidad M\u00E1xima</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"maxRange\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Color verdadero -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color Verdadero</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"trueColorInput.click()\">\r\n Seleccionar color\r\n </button>\r\n\r\n @if (configForm.get('ruleColorPoint.trueColor')?.value) {\r\n <span [style.backgroundColor]=\"configForm.get('ruleColorPoint.trueColor')?.value\" style=\"\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n display: inline-block;\r\n border: 1px solid #d9d9d9;\r\n flex-shrink: 0;\r\n \">\r\n </span>\r\n }\r\n\r\n <input #trueColorInput type=\"color\"\r\n [formControl]=\"$any(configForm.get('ruleColorPoint.trueColor'))\" style=\"display: none;\">\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Color falso -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color Falso</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"falseColorInput.click()\">\r\n Seleccionar color\r\n </button>\r\n\r\n @if (configForm.get('ruleColorPoint.falseColor')?.value) {\r\n <span [style.backgroundColor]=\"configForm.get('ruleColorPoint.falseColor')?.value\" style=\"\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n display: inline-block;\r\n border: 1px solid #d9d9d9;\r\n flex-shrink: 0;\r\n \">\r\n </span>\r\n }\r\n\r\n <input #falseColorInput type=\"color\"\r\n [formControl]=\"$any(configForm.get('ruleColorPoint.falseColor'))\" style=\"display: none;\">\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n </div>\r\n </nz-card>\r\n\r\n <!-- Configuraci\u00F3n de Datos (configData) -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n DataConfig\" class=\"mb-3 custom-card\"\r\n formGroupName=\"configData\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Tabla (table)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"table\" placeholder=\"Nombre de tabla\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('table')\"\r\n [disabled]=\"configForm.get('configData.joins')?.value === true\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('table')\"\r\n [disabled]=\"configForm.get('configData.joins')?.value === true\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Eje X -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje X (xAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"xAxis\" placeholder=\"ej. productos.nombre\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('xAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('xAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y (yAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"yAxis\" placeholder=\"ej. detalle_ventas.monto\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('yAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('yAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y Secundario -->\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y Secundario (y2Axis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"y2Axis\" placeholder=\"Opcional\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('y2Axis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('y2Axis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Serie -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Serie (serie)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"serie\" placeholder=\"ej. detalle_ventas.sucursal\"\r\n [disabled]=\"disabledAxis\" style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('serie')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('serie')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-4\">\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <span style=\"font-weight: 500; color: #334155\">Habilitar Joins</span>\r\n <nz-switch formControlName=\"joins\"></nz-switch>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <div>\r\n <div nz-row [nzGutter]=\"16\" class=\"mt-3\">\r\n <!-- Tooltip Settings (Columna Izquierda) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <div formGroupName=\"tooltip\">\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Tooltip Config\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Habilitar Tooltip -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 6px;\r\n \">\r\n <span style=\"font-weight: 500; color: #334155\">Habilitar Tooltip</span>\r\n <nz-switch formControlName=\"enable\"></nz-switch>\r\n </div>\r\n\r\n <!-- Compartido (shared) -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 6px;\r\n \">\r\n <span style=\"font-weight: 500; color: #334155\">Compartido (shared)</span>\r\n <nz-switch formControlName=\"shared\"></nz-switch>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"display: flex; align-items: center; gap: 12px\"\r\n *ngIf=\"tooltipEnabled\">\r\n <button nz-button nzType=\"text\" nzSize=\"small\" type=\"button\" (click)=\"toggleTooltipMode()\"\r\n [nzTooltipTitle]=\"\r\n isCustomTooltipMode\r\n ? 'Cambiar a modo Dise\u00F1ador Visual'\r\n : 'Cambiar a modo C\u00F3digo Libre (Avanzado)'\r\n \" nz-tooltip>\r\n <span nz-icon [nzType]=\"isCustomTooltipMode ? 'setting' : 'code'\"></span>\r\n <span style=\"font-size: 11px; margin-left: 4px\">{{\r\n isCustomTooltipMode ? \"Dise\u00F1ador\" : \"Avanzado\"\r\n }}</span>\r\n </button>\r\n </div>\r\n </div>\r\n <!-- Contenido condicional si el tooltip est\u00E1 habilitado -->\r\n @if (tooltipEnabled) {\r\n <div nz-row class=\"mt-3\">\r\n <div nz-col [nzSpan]=\"24\">\r\n @if (!isCustomTooltipMode) {\r\n <!-- Dise\u00F1ador Visual Asistido -->\r\n <div class=\"tooltip-builder-container\">\r\n <div nz-row [nzGutter]=\"[8, 8]\">\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Nombre</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowCategory\" [ngModelOptions]=\"{ standalone: true }\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Nombre Negrita</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipBoldCategory\" [ngModelOptions]=\"{ standalone: true }\"\r\n [nzDisabled]=\"!tooltipShowCategory\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Valor</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowValue\" [ngModelOptions]=\"{ standalone: true }\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Separador</nz-form-label>\r\n <nz-form-control>\r\n <nz-select nzAllowClear [(ngModel)]=\"tooltipSeparator\"\r\n [ngModelOptions]=\"{ standalone: true }\" nzSize=\"small\"\r\n (ngModelChange)=\"updateTooltipFromForm()\">\r\n @for (\r\n sep of tooltipSeparators;\r\n track sep.value\r\n ) {\r\n <nz-option [nzValue]=\"sep.value\" [nzLabel]=\"sep.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n\r\n <!-- Previsualizaci\u00F3n interactiva del Tooltip -->\r\n <div class=\"tooltip-preview-box mt-2\">\r\n <span style=\"color: #64748b\">Vista previa:</span>\r\n <nz-tag nzColor=\"processing\">\r\n @if (tooltipShowCategory) {\r\n @if (tooltipBoldCategory) {\r\n <strong>Categor\u00EDa</strong>\r\n } @else {\r\n Categor\u00EDa\r\n }\r\n }\r\n @if (tooltipShowCategory && tooltipShowValue) {\r\n {{ tooltipSeparator }}\r\n }\r\n @if (tooltipShowValue) {\r\n 1,500\r\n }\r\n </nz-tag>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Modo Avanzado Input Manual (Vinculado al FormGroup) -->\r\n <nz-form-item>\r\n <nz-form-label>Formato Manual (Syncfusion Template)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" formControlName=\"format\"\r\n placeholder=\"Ej: <b>${point.x}</b>: ${point.y}\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- </div> -->\r\n </nz-card>\r\n </div>\r\n </div>\r\n\r\n <!-- Legend Settings (Columna Derecha) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <div formGroupName=\"legends\">\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n de Leyendas\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\" class=\"align-items-center\">\r\n <!-- Switch Visible: Ocupa todo el ancho en cel (24) y la mitad en pantallas medianas en adelante (12) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-2\">\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <span style=\"font-weight: 500; color: #334155\">Visible</span>\r\n <nz-switch formControlName=\"visible\"></nz-switch>\r\n </div>\r\n </div>\r\n\r\n <!-- Select de Posici\u00F3n: Tambi\u00E9n se pasa abajo en pantallas peque\u00F1as -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-2\">\r\n <span style=\"font-weight: 500; color: #334155\">Posici\u00F3n</span>\r\n\r\n <nz-select nzAllowClear formControlName=\"position\" nzPlaceHolder=\"Posici\u00F3n de leyenda\"\r\n style=\"width: 100%\">\r\n @for (pos of legendPositionOptions; track pos.key) {\r\n <nz-option [nzValue]=\"pos.key\" [nzLabel]=\"pos.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </form>\r\n</div>\r\n<!-- Template para el T\u00EDtulo con Icono a la izquierda -->\r\n<ng-template #cardTitleTemplate>\r\n <div style=\"display: flex; align-items: center; gap: 8px\">\r\n <i nz-icon nzType=\"dot-chart\" nzTheme=\"outline\" style=\"font-size: 20px; color: #028989\"></i>\r\n <span>Configuraci\u00F3n del Gr\u00E1fico Burbujas</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #cardExtraTemplate>\r\n <div style=\"display: flex; align-items: center; gap: 12px\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"restarConfig()\">\r\n <span nz-icon nzType=\"reload\" nzTheme=\"outline\"></span>\r\n Restaurar\r\n </button>\r\n <!-- <button nz-button nzType=\"primary\" type=\"submit\" (click)=\"onSubmit()\">\r\n <span nz-icon nzType=\"check\"></span>\r\n Aplicar\r\n </button> -->\r\n </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";:host{display:block}:host .custom-card{border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 1px 3px #0000000d;overflow:hidden}:host .custom-card ::ng-deep .ant-card-head{background-color:#f8fafc;border-bottom:1px solid #e2e8f0;padding:0 20px;min-height:48px}:host .custom-card ::ng-deep .ant-card-head .ant-card-head-title{font-size:15px;font-weight:600;color:#334155}:host .custom-card ::ng-deep .ant-card-body{padding:20px}:host ::ng-deep .main-container-card .ant-card-head-wrapper{flex-wrap:wrap;row-gap:12px;padding-top:12px;padding-bottom:12px}:host button[nz-button]:has(i[nzType=search]),:host button[nz-button]:has(span[nzType=search]){color:#028989;border-color:#d1fae5;background-color:#f0fdf4;transition:all .2s ease}:host button[nz-button]:has(i[nzType=search]):hover,:host button[nz-button]:has(span[nzType=search]):hover{color:#028989;border-color:#028989;background-color:#ecfdf5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap", "nzRequiredMark"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzVariant", "nzSize", "nzStepperless", "nzStatus", "disabled", "readonly"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i7.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i7.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzVariant", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzPrefix", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus", "nzOnClear"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzSwitchModule }, { kind: "component", type: i8.NzSwitchComponent, selector: "nz-switch", inputs: ["nzLoading", "nzDisabled", "nzControl", "nzCheckedChildren", "nzUnCheckedChildren", "nzSize", "nzId"], exportAs: ["nzSwitch"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i9.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "component", type: NzInputNumberComponent, selector: "nz-input-number", inputs: ["nzId", "nzSize", "nzPlaceHolder", "nzStatus", "nzVariant", "nzStep", "nzMin", "nzMax", "nzPrecision", "nzParser", "nzFormatter", "nzDisabled", "nzReadOnly", "nzAutoFocus", "nzBordered", "nzKeyboard", "nzControls", "nzPrefix", "nzSuffix", "nzAddonBefore", "nzAddonAfter"], outputs: ["nzBlur", "nzFocus", "nzOnStep"], exportAs: ["nzInputNumber"] }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i10.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i11.ɵNzTransitionPatchDirective, selector: "[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i12.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i13.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: NzTagComponent, selector: "nz-tag", inputs: ["nzMode", "nzColor", "nzChecked", "nzBordered"], outputs: ["nzOnClose", "nzCheckedChange"], exportAs: ["nzTag"] }, { kind: "ngmodule", type: NzTooltipModule }, { kind: "directive", type: i14.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }] }); }
6946
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BubbleChartConfigComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$1.NzModalService }], target: i0.ɵɵFactoryTarget.Component }); }
6947
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: BubbleChartConfigComponent, isStandalone: true, selector: "yw-bubble-chart-config", inputs: { config: "config", chartData: "chartData", idComponent: "idComponent", configSelect: "configSelect" }, outputs: { configChange: "configChange", axisSelect: "axisSelect" }, usesOnChanges: true, ngImport: i0, template: "<!-- \r\n <yw-bubble-chart-config-syncfusion\r\n [idComponent]=\"idComponent\"\r\n [chartData]=\"chartData\" \r\n [config]=\"config\" \r\n (seriesConfigChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onColumnSelector($event)\"\r\n [configSelect]=\"configSelect\"\r\n style=\"display: block; width: 100%; height: 100%;\">\r\n </yw-bubble-chart-config-syncfusion> -->\r\n\r\n <nz-card [nzTitle]=\"cardTitleTemplate\" [nzExtra]=\"cardExtraTemplate\" class=\"main-container-card\" [nzBodyStyle]=\"{ padding: '0px' }\"\r\n [ngStyle]=\"{ border: 'none' }\">\r\n <form nz-form [formGroup]=\"configForm\" nzLayout=\"vertical\" class=\"config-form\">\r\n <!-- inputs de configuraci\u00F3n general -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n General\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Provider</nz-form-label>\r\n <nz-form-control>\r\n <nz-select formControlName=\"provider\" nzAllowClear>\r\n <nz-option *ngFor=\"let p of providerOptions\" [nzValue]=\"p\" [nzLabel]=\"p\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"title\" placeholder=\"T\u00EDtulo del gr\u00E1fico\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Texto Etiqueta Eje X</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"xLabelText\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Texto Etiqueta Eje Y</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"yLabelText\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n </nz-card>\r\n\r\n <!-- Tus selectores de color, bordes, etc. -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Estilos y Apariencia\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Border Group -->\r\n <div nz-col [nzXs]=\"24\">\r\n <div nz-row [nzGutter]=\"8\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>opacity</nz-form-label>\r\n <nz-form-control>\r\n <nz-select formControlName=\"opacity\" nzAllowClear>\r\n <nz-option *ngFor=\"let o of opacityOptions\" [nzValue]=\"o\" [nzLabel]=\"o\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n </div>\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Factor de tama\u00F1o</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"bubbleSizeFactor\" [nzMin]=\"0.05\" [nzMax]=\"0.5\" [nzStep]=\"0.05\"\r\n [nzPrecision]=\"2\" style=\"width: 100%\"></nz-input-number>\r\n <!-- <nz-input-number formControlName=\"bubbleSizeFactor\" [nzMin]=\"0\" \r\n [nzStep]=\"0.1\" \r\n [nzPrecision]=\"2\"\r\n style=\"width: 100%\"></nz-input-number> -->\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"8\" class=\"mt-4\" style=\"display: flex; align-items: center; gap: 12px\">\r\n <span style=\"font-weight: 500; color: #334155\">Multicolor</span>\r\n <nz-switch formControlName=\"chartoColoredLine\"></nz-switch>\r\n </div> -->\r\n </div>\r\n </div>\r\n <!-- Color verdadero -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color de nulos o vac\u00EDos</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [formControl]=\"$any(configForm.get('emptyPointColor'))\"\r\n name=\"centerLabelTitleColor\" />\r\n \r\n \r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- REGLA DE COLORES -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\">\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Regla de colores Reto\" class=\"mb-3 mt-3 custom-card\">\r\n\r\n <div formGroupName=\"ruleColorPoint\">\r\n <div nz-row [nzGutter]=\"[16, 24]\">\r\n\r\n <!-- Regla -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Regla</nz-form-label>\r\n <nz-form-control>\r\n <nz-select nzAllowClear style=\"width: 100%\"\r\n [formControl]=\"$any(configForm.get('ruleColorPoint.rule'))\">\r\n <nz-option *ngFor=\"let p of rulesOptions\" [nzValue]=\"p.key\" [nzLabel]=\"p.label\">\r\n </nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Umbral -->\r\n @if (configForm.get('ruleColorPoint.rule')?.value === 'threshold') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Umbral</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"thresholdValue\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Cantidad m\u00EDnima -->\r\n @if (configForm.get('ruleColorPoint.rule')?.value === 'range') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Cantidad M\u00EDnima</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"minRange\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Cantidad m\u00E1xima -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Cantidad M\u00E1xima</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"maxRange\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Color verdadero -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color Verdadero</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [formControl]=\"$any(configForm.get('ruleColorPoint.trueColor'))\"\r\n name=\"centerLabelTitleColor\" />\r\n \r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Color falso -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color Falso</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [formControl]=\"$any(configForm.get('ruleColorPoint.falseColor'))\"\r\n name=\"centerLabelTitleColor\" />\r\n \r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n </div>\r\n </nz-card>\r\n\r\n <!-- Configuraci\u00F3n de Datos (configData) -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n de Datos (configData)\" class=\"mb-3 custom-card\"\r\n formGroupName=\"configData\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Tabla (table)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"table\" placeholder=\"Nombre de tabla\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('table')\"\r\n [disabled]=\"configForm.get('configData.joins')?.value === true\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('table')\"\r\n [disabled]=\"configForm.get('configData.joins')?.value === true\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Eje X -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje X (xAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"xAxis\" placeholder=\"ej. productos.nombre\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('xAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('xAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y (yAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"yAxis\" placeholder=\"ej. detalle_ventas.monto\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('yAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('yAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y Secundario -->\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y Secundario (y2Axis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"y2Axis\" placeholder=\"Opcional\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('y2Axis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('y2Axis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Serie -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Serie (serie)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"serie\" placeholder=\"ej. detalle_ventas.sucursal\"\r\n [disabled]=\"disabledAxis\" style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('serie')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('serie')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-4\">\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <span style=\"font-weight: 500; color: #334155\">Habilitar Joins</span>\r\n <nz-switch formControlName=\"joins\"></nz-switch>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <div>\r\n <div nz-row [nzGutter]=\"16\" class=\"mt-3\">\r\n <!-- Tooltip Settings (Columna Izquierda) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <div formGroupName=\"tooltip\">\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n de Tooltip\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Habilitar Tooltip -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 6px;\r\n \">\r\n <span style=\"font-weight: 500; color: #334155\">Habilitar Tooltip</span>\r\n <nz-switch formControlName=\"enable\"></nz-switch>\r\n </div>\r\n\r\n <!-- Compartido (shared) -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 6px;\r\n \">\r\n <span style=\"font-weight: 500; color: #334155\">Compartido (shared)</span>\r\n <nz-switch formControlName=\"shared\"></nz-switch>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"display: flex; align-items: center; gap: 12px\"\r\n *ngIf=\"tooltipEnabled\">\r\n <button nz-button nzType=\"text\" nzSize=\"small\" type=\"button\" (click)=\"toggleTooltipMode()\"\r\n [nzTooltipTitle]=\"\r\n isCustomTooltipMode\r\n ? 'Cambiar a modo Dise\u00F1ador Visual'\r\n : 'Cambiar a modo C\u00F3digo Libre (Avanzado)'\r\n \" nz-tooltip>\r\n <span nz-icon [nzType]=\"isCustomTooltipMode ? 'setting' : 'code'\"></span>\r\n <span style=\"font-size: 11px; margin-left: 4px\">{{\r\n isCustomTooltipMode ? \"Dise\u00F1ador\" : \"Avanzado\"\r\n }}</span>\r\n </button>\r\n </div>\r\n </div>\r\n <!-- Contenido condicional si el tooltip est\u00E1 habilitado -->\r\n @if (tooltipEnabled) {\r\n <div nz-row class=\"mt-3\">\r\n <div nz-col [nzSpan]=\"24\">\r\n @if (!isCustomTooltipMode) {\r\n <!-- Dise\u00F1ador Visual Asistido -->\r\n <div class=\"tooltip-builder-container\">\r\n <div nz-row [nzGutter]=\"[8, 8]\">\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Nombre</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowCategory\" [ngModelOptions]=\"{ standalone: true }\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Nombre Negrita</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipBoldCategory\" [ngModelOptions]=\"{ standalone: true }\"\r\n [nzDisabled]=\"!tooltipShowCategory\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Valor</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowValue\" [ngModelOptions]=\"{ standalone: true }\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Separador</nz-form-label>\r\n <nz-form-control>\r\n <nz-select nzAllowClear [(ngModel)]=\"tooltipSeparator\"\r\n [ngModelOptions]=\"{ standalone: true }\" nzSize=\"small\"\r\n (ngModelChange)=\"updateTooltipFromForm()\">\r\n @for (\r\n sep of tooltipSeparators;\r\n track sep.value\r\n ) {\r\n <nz-option [nzValue]=\"sep.value\" [nzLabel]=\"sep.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n\r\n <!-- Previsualizaci\u00F3n interactiva del Tooltip -->\r\n <div class=\"tooltip-preview-box mt-2\">\r\n <span style=\"color: #64748b\">Vista previa:</span>\r\n <nz-tag nzColor=\"processing\">\r\n @if (tooltipShowCategory) {\r\n @if (tooltipBoldCategory) {\r\n <strong>Categor\u00EDa</strong>\r\n } @else {\r\n Categor\u00EDa\r\n }\r\n }\r\n @if (tooltipShowCategory && tooltipShowValue) {\r\n {{ tooltipSeparator }}\r\n }\r\n @if (tooltipShowValue) {\r\n 1,500\r\n }\r\n </nz-tag>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Modo Avanzado Input Manual (Vinculado al FormGroup) -->\r\n <nz-form-item>\r\n <nz-form-label>Formato Manual (Syncfusion Template)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" formControlName=\"format\"\r\n placeholder=\"Ej: <b>${point.x}</b>: ${point.y}\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- </div> -->\r\n </nz-card>\r\n </div>\r\n </div>\r\n\r\n <!-- Legend Settings (Columna Derecha) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <div formGroupName=\"legends\">\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n de Leyendas\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\" class=\"align-items-center\">\r\n <!-- Switch Visible: Ocupa todo el ancho en cel (24) y la mitad en pantallas medianas en adelante (12) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-2\">\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <span style=\"font-weight: 500; color: #334155\">Visible</span>\r\n <nz-switch formControlName=\"visible\"></nz-switch>\r\n </div>\r\n </div>\r\n\r\n <!-- Select de Posici\u00F3n: Tambi\u00E9n se pasa abajo en pantallas peque\u00F1as -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-2\">\r\n <span style=\"font-weight: 500; color: #334155\">Posici\u00F3n</span>\r\n\r\n <nz-select nzAllowClear formControlName=\"position\" nzPlaceHolder=\"Posici\u00F3n de leyenda\"\r\n style=\"width: 100%\">\r\n @for (pos of legendPositionOptions; track pos.key) {\r\n <nz-option [nzValue]=\"pos.key\" [nzLabel]=\"pos.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </form>\r\n</nz-card>\r\n<!-- Template para el T\u00EDtulo con Icono a la izquierda -->\r\n<ng-template #cardTitleTemplate>\r\n <div style=\"display: flex; align-items: center; gap: 8px\">\r\n <i nz-icon nzType=\"dot-chart\" nzTheme=\"outline\" style=\"font-size: 20px; color: #028989\"></i>\r\n <!-- <span>Configuraci\u00F3n del Gr\u00E1fico Burbujas</span> -->\r\n <span>{{config.title || 'Gr\u00E1fico de burbujas'}}</span>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #cardExtraTemplate>\r\n <div style=\"display: flex; align-items: center; gap: 12px\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"restarConfig()\">\r\n <span nz-icon nzType=\"reload\" nzTheme=\"outline\"></span>\r\n Restaurar\r\n </button>\r\n <!-- <button nz-button nzType=\"primary\" type=\"submit\" (click)=\"onSubmit()\">\r\n <span nz-icon nzType=\"check\"></span>\r\n Aplicar\r\n </button> -->\r\n </div>\r\n</ng-template>", styles: [":host{display:block;width:100%;height:100%;min-height:260px;min-width:0;overflow:hidden}.custom-card{border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 1px 3px #0000000d;overflow:hidden}.custom-card ::ng-deep .ant-card-head{background-color:#f8fafc;border-bottom:1px solid #e2e8f0;padding:0 20px;min-height:48px}.custom-card ::ng-deep .ant-card-head .ant-card-head-title{font-size:15px;font-weight:600;color:#334155}.custom-card ::ng-deep .ant-card-head .ant-card-head-wrapper{flex-wrap:wrap;row-gap:12px;padding-top:12px;padding-bottom:12px}.custom-card ::ng-deep .ant-card-body{padding:20px}:host ::ng-deep .ant-switch-checked{background-color:#028989!important}.palette-color-input{width:36px;height:28px;padding:0;border:none;border-radius:4px;cursor:pointer;background:transparent}.palette-color-input::-webkit-color-swatch-wrapper{padding:0}.palette-color-input::-webkit-color-swatch{border:1px solid rgba(0,0,0,.15);border-radius:4px}.palette-remove-btn{padding:0 4px;height:22px;line-height:20px;font-size:11px}.palette-actions{display:flex;align-items:center;gap:8px;margin-top:10px}.tooltip-preview-box{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px;padding:6px 10px;background:#fff;border:1px dashed #cbd5e1;border-radius:4px;font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "directive", type: i5.NzFormDirective, selector: "[nz-form]", inputs: ["nzLayout", "nzNoColon", "nzAutoTips", "nzDisableAutoTips", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap", "nzRequiredMark"], exportAs: ["nzForm"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzVariant", "nzSize", "nzStepperless", "nzStatus", "disabled", "readonly"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i7.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i7.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzVariant", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzPrefix", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus", "nzOnClear"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzSwitchModule }, { kind: "component", type: i8.NzSwitchComponent, selector: "nz-switch", inputs: ["nzLoading", "nzDisabled", "nzControl", "nzCheckedChildren", "nzUnCheckedChildren", "nzSize", "nzId"], exportAs: ["nzSwitch"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "component", type: i9.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }, { kind: "component", type: NzInputNumberComponent, selector: "nz-input-number", inputs: ["nzId", "nzSize", "nzPlaceHolder", "nzStatus", "nzVariant", "nzStep", "nzMin", "nzMax", "nzPrecision", "nzParser", "nzFormatter", "nzDisabled", "nzReadOnly", "nzAutoFocus", "nzBordered", "nzKeyboard", "nzControls", "nzPrefix", "nzSuffix", "nzAddonBefore", "nzAddonAfter"], outputs: ["nzBlur", "nzFocus", "nzOnStep"], exportAs: ["nzInputNumber"] }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i10.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i11.ɵNzTransitionPatchDirective, selector: "[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i12.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i13.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: NzTagComponent, selector: "nz-tag", inputs: ["nzMode", "nzColor", "nzChecked", "nzBordered"], outputs: ["nzOnClose", "nzCheckedChange"], exportAs: ["nzTag"] }, { kind: "ngmodule", type: NzTooltipModule }, { kind: "directive", type: i14.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }] }); }
6884
6948
  }
6885
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BubbleChartConfigSyncfusionComponent, decorators: [{
6949
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BubbleChartConfigComponent, decorators: [{
6886
6950
  type: Component,
6887
- args: [{ selector: 'yw-bubble-chart-config-syncfusion', standalone: true, imports: [
6951
+ args: [{ selector: 'yw-bubble-chart-config', standalone: true, imports: [
6888
6952
  CommonModule,
6889
6953
  FormsModule,
6890
6954
  ReactiveFormsModule,
@@ -6901,52 +6965,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
6901
6965
  NzTagComponent,
6902
6966
  NzTooltipModule,
6903
6967
  NzDividerComponent
6904
- ], template: "<!-- <nz-card [nzTitle]=\"cardTitleTemplate\" [nzExtra]=\"cardExtraTemplate\" class=\"main-container-card\"> -->\r\n<div class=\"main-container-card\">\r\n \r\n <div class=\"flex flex-col sm:flex-row sm:items-center sm:justify-between border-b px-4 py-3 gap-2\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"cardTitleTemplate\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"cardExtraTemplate\"></ng-container>\r\n </div>\r\n</div>\r\n <form nz-form [formGroup]=\"configForm\" nzLayout=\"vertical\" class=\"config-form\">\r\n <!-- inputs de configuraci\u00F3n general -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n General\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Provider</nz-form-label>\r\n <nz-form-control>\r\n <nz-select formControlName=\"provider\" nzAllowClear>\r\n <nz-option *ngFor=\"let p of providerOptions\" [nzValue]=\"p\" [nzLabel]=\"p\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"title\" placeholder=\"T\u00EDtulo del gr\u00E1fico\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Texto Etiqueta Eje X</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"xLabelText\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Texto Etiqueta Eje Y</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"yLabelText\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n </nz-card>\r\n\r\n <!-- Tus selectores de color, bordes, etc. -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Estilos y Apariencia\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Border Group -->\r\n <div nz-col [nzXs]=\"24\">\r\n <div nz-row [nzGutter]=\"8\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>opacity</nz-form-label>\r\n <nz-form-control>\r\n <nz-select formControlName=\"opacity\" nzAllowClear>\r\n <nz-option *ngFor=\"let o of opacityOptions\" [nzValue]=\"o\" [nzLabel]=\"o\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n </div>\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Factor de tama\u00F1o</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"bubbleSizeFactor\" [nzMin]=\"0.05\" [nzMax]=\"0.5\" [nzStep]=\"0.05\"\r\n [nzPrecision]=\"2\" style=\"width: 100%\"></nz-input-number>\r\n <!-- <nz-input-number formControlName=\"bubbleSizeFactor\" [nzMin]=\"0\" \r\n [nzStep]=\"0.1\" \r\n [nzPrecision]=\"2\"\r\n style=\"width: 100%\"></nz-input-number> -->\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"8\" class=\"mt-4\" style=\"display: flex; align-items: center; gap: 12px\">\r\n <span style=\"font-weight: 500; color: #334155\">Multicolor</span>\r\n <nz-switch formControlName=\"chartoColoredLine\"></nz-switch>\r\n </div> -->\r\n </div>\r\n </div>\r\n <!-- Color verdadero -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color de nulos o vac\u00EDos</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"emptyPointColorInput.click()\">\r\n Seleccionar color\r\n </button>\r\n\r\n @if (configForm.get('emptyPointColor')?.value) {\r\n <span [style.backgroundColor]=\"configForm.get('emptyPointColor')?.value\" style=\"\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n display: inline-block;\r\n border: 1px solid #d9d9d9;\r\n flex-shrink: 0;\r\n \">\r\n </span>\r\n }\r\n\r\n <input #emptyPointColorInput type=\"color\" [formControl]=\"$any(configForm.get('emptyPointColor'))\"\r\n style=\"display: none;\">\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- REGLA DE COLORES -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\">\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Regla de colores Reto\" class=\"mb-3 mt-3 custom-card\">\r\n\r\n <div formGroupName=\"ruleColorPoint\">\r\n <div nz-row [nzGutter]=\"[16, 24]\">\r\n\r\n <!-- Regla -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Regla</nz-form-label>\r\n <nz-form-control>\r\n <nz-select nzAllowClear style=\"width: 100%\"\r\n [formControl]=\"$any(configForm.get('ruleColorPoint.rule'))\">\r\n <nz-option *ngFor=\"let p of rulesOptions\" [nzValue]=\"p.key\" [nzLabel]=\"p.label\">\r\n </nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Umbral -->\r\n @if (configForm.get('ruleColorPoint.rule')?.value === 'threshold') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Umbral</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"thresholdValue\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Cantidad m\u00EDnima -->\r\n @if (configForm.get('ruleColorPoint.rule')?.value === 'range') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Cantidad M\u00EDnima</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"minRange\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Cantidad m\u00E1xima -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Cantidad M\u00E1xima</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"maxRange\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Color verdadero -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color Verdadero</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"trueColorInput.click()\">\r\n Seleccionar color\r\n </button>\r\n\r\n @if (configForm.get('ruleColorPoint.trueColor')?.value) {\r\n <span [style.backgroundColor]=\"configForm.get('ruleColorPoint.trueColor')?.value\" style=\"\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n display: inline-block;\r\n border: 1px solid #d9d9d9;\r\n flex-shrink: 0;\r\n \">\r\n </span>\r\n }\r\n\r\n <input #trueColorInput type=\"color\"\r\n [formControl]=\"$any(configForm.get('ruleColorPoint.trueColor'))\" style=\"display: none;\">\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Color falso -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color Falso</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"falseColorInput.click()\">\r\n Seleccionar color\r\n </button>\r\n\r\n @if (configForm.get('ruleColorPoint.falseColor')?.value) {\r\n <span [style.backgroundColor]=\"configForm.get('ruleColorPoint.falseColor')?.value\" style=\"\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n display: inline-block;\r\n border: 1px solid #d9d9d9;\r\n flex-shrink: 0;\r\n \">\r\n </span>\r\n }\r\n\r\n <input #falseColorInput type=\"color\"\r\n [formControl]=\"$any(configForm.get('ruleColorPoint.falseColor'))\" style=\"display: none;\">\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n </div>\r\n </nz-card>\r\n\r\n <!-- Configuraci\u00F3n de Datos (configData) -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n DataConfig\" class=\"mb-3 custom-card\"\r\n formGroupName=\"configData\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Tabla (table)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"table\" placeholder=\"Nombre de tabla\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('table')\"\r\n [disabled]=\"configForm.get('configData.joins')?.value === true\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('table')\"\r\n [disabled]=\"configForm.get('configData.joins')?.value === true\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Eje X -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje X (xAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"xAxis\" placeholder=\"ej. productos.nombre\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('xAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('xAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y (yAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"yAxis\" placeholder=\"ej. detalle_ventas.monto\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('yAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('yAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y Secundario -->\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y Secundario (y2Axis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"y2Axis\" placeholder=\"Opcional\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('y2Axis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('y2Axis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Serie -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Serie (serie)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"serie\" placeholder=\"ej. detalle_ventas.sucursal\"\r\n [disabled]=\"disabledAxis\" style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('serie')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('serie')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-4\">\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <span style=\"font-weight: 500; color: #334155\">Habilitar Joins</span>\r\n <nz-switch formControlName=\"joins\"></nz-switch>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <div>\r\n <div nz-row [nzGutter]=\"16\" class=\"mt-3\">\r\n <!-- Tooltip Settings (Columna Izquierda) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <div formGroupName=\"tooltip\">\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Tooltip Config\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Habilitar Tooltip -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 6px;\r\n \">\r\n <span style=\"font-weight: 500; color: #334155\">Habilitar Tooltip</span>\r\n <nz-switch formControlName=\"enable\"></nz-switch>\r\n </div>\r\n\r\n <!-- Compartido (shared) -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 6px;\r\n \">\r\n <span style=\"font-weight: 500; color: #334155\">Compartido (shared)</span>\r\n <nz-switch formControlName=\"shared\"></nz-switch>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"display: flex; align-items: center; gap: 12px\"\r\n *ngIf=\"tooltipEnabled\">\r\n <button nz-button nzType=\"text\" nzSize=\"small\" type=\"button\" (click)=\"toggleTooltipMode()\"\r\n [nzTooltipTitle]=\"\r\n isCustomTooltipMode\r\n ? 'Cambiar a modo Dise\u00F1ador Visual'\r\n : 'Cambiar a modo C\u00F3digo Libre (Avanzado)'\r\n \" nz-tooltip>\r\n <span nz-icon [nzType]=\"isCustomTooltipMode ? 'setting' : 'code'\"></span>\r\n <span style=\"font-size: 11px; margin-left: 4px\">{{\r\n isCustomTooltipMode ? \"Dise\u00F1ador\" : \"Avanzado\"\r\n }}</span>\r\n </button>\r\n </div>\r\n </div>\r\n <!-- Contenido condicional si el tooltip est\u00E1 habilitado -->\r\n @if (tooltipEnabled) {\r\n <div nz-row class=\"mt-3\">\r\n <div nz-col [nzSpan]=\"24\">\r\n @if (!isCustomTooltipMode) {\r\n <!-- Dise\u00F1ador Visual Asistido -->\r\n <div class=\"tooltip-builder-container\">\r\n <div nz-row [nzGutter]=\"[8, 8]\">\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Nombre</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowCategory\" [ngModelOptions]=\"{ standalone: true }\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Nombre Negrita</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipBoldCategory\" [ngModelOptions]=\"{ standalone: true }\"\r\n [nzDisabled]=\"!tooltipShowCategory\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Valor</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowValue\" [ngModelOptions]=\"{ standalone: true }\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Separador</nz-form-label>\r\n <nz-form-control>\r\n <nz-select nzAllowClear [(ngModel)]=\"tooltipSeparator\"\r\n [ngModelOptions]=\"{ standalone: true }\" nzSize=\"small\"\r\n (ngModelChange)=\"updateTooltipFromForm()\">\r\n @for (\r\n sep of tooltipSeparators;\r\n track sep.value\r\n ) {\r\n <nz-option [nzValue]=\"sep.value\" [nzLabel]=\"sep.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n\r\n <!-- Previsualizaci\u00F3n interactiva del Tooltip -->\r\n <div class=\"tooltip-preview-box mt-2\">\r\n <span style=\"color: #64748b\">Vista previa:</span>\r\n <nz-tag nzColor=\"processing\">\r\n @if (tooltipShowCategory) {\r\n @if (tooltipBoldCategory) {\r\n <strong>Categor\u00EDa</strong>\r\n } @else {\r\n Categor\u00EDa\r\n }\r\n }\r\n @if (tooltipShowCategory && tooltipShowValue) {\r\n {{ tooltipSeparator }}\r\n }\r\n @if (tooltipShowValue) {\r\n 1,500\r\n }\r\n </nz-tag>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Modo Avanzado Input Manual (Vinculado al FormGroup) -->\r\n <nz-form-item>\r\n <nz-form-label>Formato Manual (Syncfusion Template)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" formControlName=\"format\"\r\n placeholder=\"Ej: <b>${point.x}</b>: ${point.y}\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- </div> -->\r\n </nz-card>\r\n </div>\r\n </div>\r\n\r\n <!-- Legend Settings (Columna Derecha) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <div formGroupName=\"legends\">\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n de Leyendas\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\" class=\"align-items-center\">\r\n <!-- Switch Visible: Ocupa todo el ancho en cel (24) y la mitad en pantallas medianas en adelante (12) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-2\">\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <span style=\"font-weight: 500; color: #334155\">Visible</span>\r\n <nz-switch formControlName=\"visible\"></nz-switch>\r\n </div>\r\n </div>\r\n\r\n <!-- Select de Posici\u00F3n: Tambi\u00E9n se pasa abajo en pantallas peque\u00F1as -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-2\">\r\n <span style=\"font-weight: 500; color: #334155\">Posici\u00F3n</span>\r\n\r\n <nz-select nzAllowClear formControlName=\"position\" nzPlaceHolder=\"Posici\u00F3n de leyenda\"\r\n style=\"width: 100%\">\r\n @for (pos of legendPositionOptions; track pos.key) {\r\n <nz-option [nzValue]=\"pos.key\" [nzLabel]=\"pos.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </form>\r\n</div>\r\n<!-- Template para el T\u00EDtulo con Icono a la izquierda -->\r\n<ng-template #cardTitleTemplate>\r\n <div style=\"display: flex; align-items: center; gap: 8px\">\r\n <i nz-icon nzType=\"dot-chart\" nzTheme=\"outline\" style=\"font-size: 20px; color: #028989\"></i>\r\n <span>Configuraci\u00F3n del Gr\u00E1fico Burbujas</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #cardExtraTemplate>\r\n <div style=\"display: flex; align-items: center; gap: 12px\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"restarConfig()\">\r\n <span nz-icon nzType=\"reload\" nzTheme=\"outline\"></span>\r\n Restaurar\r\n </button>\r\n <!-- <button nz-button nzType=\"primary\" type=\"submit\" (click)=\"onSubmit()\">\r\n <span nz-icon nzType=\"check\"></span>\r\n Aplicar\r\n </button> -->\r\n </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";:host{display:block}:host .custom-card{border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 1px 3px #0000000d;overflow:hidden}:host .custom-card ::ng-deep .ant-card-head{background-color:#f8fafc;border-bottom:1px solid #e2e8f0;padding:0 20px;min-height:48px}:host .custom-card ::ng-deep .ant-card-head .ant-card-head-title{font-size:15px;font-weight:600;color:#334155}:host .custom-card ::ng-deep .ant-card-body{padding:20px}:host ::ng-deep .main-container-card .ant-card-head-wrapper{flex-wrap:wrap;row-gap:12px;padding-top:12px;padding-bottom:12px}:host button[nz-button]:has(i[nzType=search]),:host button[nz-button]:has(span[nzType=search]){color:#028989;border-color:#d1fae5;background-color:#f0fdf4;transition:all .2s ease}:host button[nz-button]:has(i[nzType=search]):hover,:host button[nz-button]:has(span[nzType=search]):hover{color:#028989;border-color:#028989;background-color:#ecfdf5}\n"] }]
6968
+ ], template: "<!-- \r\n <yw-bubble-chart-config-syncfusion\r\n [idComponent]=\"idComponent\"\r\n [chartData]=\"chartData\" \r\n [config]=\"config\" \r\n (seriesConfigChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onColumnSelector($event)\"\r\n [configSelect]=\"configSelect\"\r\n style=\"display: block; width: 100%; height: 100%;\">\r\n </yw-bubble-chart-config-syncfusion> -->\r\n\r\n <nz-card [nzTitle]=\"cardTitleTemplate\" [nzExtra]=\"cardExtraTemplate\" class=\"main-container-card\" [nzBodyStyle]=\"{ padding: '0px' }\"\r\n [ngStyle]=\"{ border: 'none' }\">\r\n <form nz-form [formGroup]=\"configForm\" nzLayout=\"vertical\" class=\"config-form\">\r\n <!-- inputs de configuraci\u00F3n general -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n General\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Provider</nz-form-label>\r\n <nz-form-control>\r\n <nz-select formControlName=\"provider\" nzAllowClear>\r\n <nz-option *ngFor=\"let p of providerOptions\" [nzValue]=\"p\" [nzLabel]=\"p\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>T\u00EDtulo</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"title\" placeholder=\"T\u00EDtulo del gr\u00E1fico\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Texto Etiqueta Eje X</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"xLabelText\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Texto Etiqueta Eje Y</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input formControlName=\"yLabelText\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n </nz-card>\r\n\r\n <!-- Tus selectores de color, bordes, etc. -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Estilos y Apariencia\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Border Group -->\r\n <div nz-col [nzXs]=\"24\">\r\n <div nz-row [nzGutter]=\"8\">\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>opacity</nz-form-label>\r\n <nz-form-control>\r\n <nz-select formControlName=\"opacity\" nzAllowClear>\r\n <nz-option *ngFor=\"let o of opacityOptions\" [nzValue]=\"o\" [nzLabel]=\"o\"></nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n </div>\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Factor de tama\u00F1o</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"bubbleSizeFactor\" [nzMin]=\"0.05\" [nzMax]=\"0.5\" [nzStep]=\"0.05\"\r\n [nzPrecision]=\"2\" style=\"width: 100%\"></nz-input-number>\r\n <!-- <nz-input-number formControlName=\"bubbleSizeFactor\" [nzMin]=\"0\" \r\n [nzStep]=\"0.1\" \r\n [nzPrecision]=\"2\"\r\n style=\"width: 100%\"></nz-input-number> -->\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"8\" class=\"mt-4\" style=\"display: flex; align-items: center; gap: 12px\">\r\n <span style=\"font-weight: 500; color: #334155\">Multicolor</span>\r\n <nz-switch formControlName=\"chartoColoredLine\"></nz-switch>\r\n </div> -->\r\n </div>\r\n </div>\r\n <!-- Color verdadero -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color de nulos o vac\u00EDos</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [formControl]=\"$any(configForm.get('emptyPointColor'))\"\r\n name=\"centerLabelTitleColor\" />\r\n \r\n \r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- REGLA DE COLORES -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"24\">\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Regla de colores Reto\" class=\"mb-3 mt-3 custom-card\">\r\n\r\n <div formGroupName=\"ruleColorPoint\">\r\n <div nz-row [nzGutter]=\"[16, 24]\">\r\n\r\n <!-- Regla -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label nzRequired>Regla</nz-form-label>\r\n <nz-form-control>\r\n <nz-select nzAllowClear style=\"width: 100%\"\r\n [formControl]=\"$any(configForm.get('ruleColorPoint.rule'))\">\r\n <nz-option *ngFor=\"let p of rulesOptions\" [nzValue]=\"p.key\" [nzLabel]=\"p.label\">\r\n </nz-option>\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Umbral -->\r\n @if (configForm.get('ruleColorPoint.rule')?.value === 'threshold') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Umbral</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"thresholdValue\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Cantidad m\u00EDnima -->\r\n @if (configForm.get('ruleColorPoint.rule')?.value === 'range') {\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Cantidad M\u00EDnima</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"minRange\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Cantidad m\u00E1xima -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Cantidad M\u00E1xima</nz-form-label>\r\n <nz-form-control>\r\n <nz-input-number formControlName=\"maxRange\" [nzMin]=\"0\" style=\"width: 100%\">\r\n </nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n }\r\n\r\n <!-- Color verdadero -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color Verdadero</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [formControl]=\"$any(configForm.get('ruleColorPoint.trueColor'))\"\r\n name=\"centerLabelTitleColor\" />\r\n \r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Color falso -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" [nzMd]=\"8\" [nzLg]=\"8\">\r\n <nz-form-item>\r\n <nz-form-label>Color Falso</nz-form-label>\r\n <nz-form-control>\r\n <input type=\"color\" class=\"palette-color-input\" [formControl]=\"$any(configForm.get('ruleColorPoint.falseColor'))\"\r\n name=\"centerLabelTitleColor\" />\r\n \r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n </div>\r\n </nz-card>\r\n\r\n <!-- Configuraci\u00F3n de Datos (configData) -->\r\n\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n de Datos (configData)\" class=\"mb-3 custom-card\"\r\n formGroupName=\"configData\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Tabla (table)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"table\" placeholder=\"Nombre de tabla\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('table')\"\r\n [disabled]=\"configForm.get('configData.joins')?.value === true\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('table')\"\r\n [disabled]=\"configForm.get('configData.joins')?.value === true\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Eje X -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje X (xAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"xAxis\" placeholder=\"ej. productos.nombre\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('xAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('xAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y (yAxis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"yAxis\" placeholder=\"ej. detalle_ventas.monto\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('yAxis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('yAxis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- Eje Y Secundario -->\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Eje Y Secundario (y2Axis)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"y2Axis\" placeholder=\"Opcional\" [disabled]=\"disabledAxis\"\r\n style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('y2Axis')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('y2Axis')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div> -->\r\n\r\n <!-- Serie -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Serie (serie)</nz-form-label>\r\n <nz-form-control>\r\n <div style=\"display: flex; gap: 8px\">\r\n <input nz-input formControlName=\"serie\" placeholder=\"ej. detalle_ventas.sucursal\"\r\n [disabled]=\"disabledAxis\" style=\"flex: 1\" />\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"openColumnSelector('serie')\">\r\n <i nz-icon nzType=\"search\"></i>\r\n </button>\r\n <button nz-button nzType=\"default\" nzDanger type=\"button\" (click)=\"clearField('serie')\">\r\n <i nz-icon nzType=\"delete\"></i>\r\n </button>\r\n </div>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <!-- <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-4\">\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <span style=\"font-weight: 500; color: #334155\">Habilitar Joins</span>\r\n <nz-switch formControlName=\"joins\"></nz-switch>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <div>\r\n <div nz-row [nzGutter]=\"16\" class=\"mt-3\">\r\n <!-- Tooltip Settings (Columna Izquierda) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <div formGroupName=\"tooltip\">\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n de Tooltip\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\">\r\n <!-- Habilitar Tooltip -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 6px;\r\n \">\r\n <span style=\"font-weight: 500; color: #334155\">Habilitar Tooltip</span>\r\n <nz-switch formControlName=\"enable\"></nz-switch>\r\n </div>\r\n\r\n <!-- Compartido (shared) -->\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 6px;\r\n \">\r\n <span style=\"font-weight: 500; color: #334155\">Compartido (shared)</span>\r\n <nz-switch formControlName=\"shared\"></nz-switch>\r\n </div>\r\n <div nz-col [nzXs]=\"12\" class=\"mt-2\" style=\"display: flex; align-items: center; gap: 12px\"\r\n *ngIf=\"tooltipEnabled\">\r\n <button nz-button nzType=\"text\" nzSize=\"small\" type=\"button\" (click)=\"toggleTooltipMode()\"\r\n [nzTooltipTitle]=\"\r\n isCustomTooltipMode\r\n ? 'Cambiar a modo Dise\u00F1ador Visual'\r\n : 'Cambiar a modo C\u00F3digo Libre (Avanzado)'\r\n \" nz-tooltip>\r\n <span nz-icon [nzType]=\"isCustomTooltipMode ? 'setting' : 'code'\"></span>\r\n <span style=\"font-size: 11px; margin-left: 4px\">{{\r\n isCustomTooltipMode ? \"Dise\u00F1ador\" : \"Avanzado\"\r\n }}</span>\r\n </button>\r\n </div>\r\n </div>\r\n <!-- Contenido condicional si el tooltip est\u00E1 habilitado -->\r\n @if (tooltipEnabled) {\r\n <div nz-row class=\"mt-3\">\r\n <div nz-col [nzSpan]=\"24\">\r\n @if (!isCustomTooltipMode) {\r\n <!-- Dise\u00F1ador Visual Asistido -->\r\n <div class=\"tooltip-builder-container\">\r\n <div nz-row [nzGutter]=\"[8, 8]\">\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Nombre</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowCategory\" [ngModelOptions]=\"{ standalone: true }\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Nombre Negrita</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipBoldCategory\" [ngModelOptions]=\"{ standalone: true }\"\r\n [nzDisabled]=\"!tooltipShowCategory\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Mostrar Valor</nz-form-label>\r\n <nz-form-control>\r\n <nz-switch [(ngModel)]=\"tooltipShowValue\" [ngModelOptions]=\"{ standalone: true }\"\r\n (ngModelChange)=\"updateTooltipFromForm()\"></nz-switch>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n\r\n <div nz-col [nzSpan]=\"12\">\r\n <nz-form-item>\r\n <nz-form-label>Separador</nz-form-label>\r\n <nz-form-control>\r\n <nz-select nzAllowClear [(ngModel)]=\"tooltipSeparator\"\r\n [ngModelOptions]=\"{ standalone: true }\" nzSize=\"small\"\r\n (ngModelChange)=\"updateTooltipFromForm()\">\r\n @for (\r\n sep of tooltipSeparators;\r\n track sep.value\r\n ) {\r\n <nz-option [nzValue]=\"sep.value\" [nzLabel]=\"sep.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </div>\r\n </div>\r\n\r\n <!-- Previsualizaci\u00F3n interactiva del Tooltip -->\r\n <div class=\"tooltip-preview-box mt-2\">\r\n <span style=\"color: #64748b\">Vista previa:</span>\r\n <nz-tag nzColor=\"processing\">\r\n @if (tooltipShowCategory) {\r\n @if (tooltipBoldCategory) {\r\n <strong>Categor\u00EDa</strong>\r\n } @else {\r\n Categor\u00EDa\r\n }\r\n }\r\n @if (tooltipShowCategory && tooltipShowValue) {\r\n {{ tooltipSeparator }}\r\n }\r\n @if (tooltipShowValue) {\r\n 1,500\r\n }\r\n </nz-tag>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Modo Avanzado Input Manual (Vinculado al FormGroup) -->\r\n <nz-form-item>\r\n <nz-form-label>Formato Manual (Syncfusion Template)</nz-form-label>\r\n <nz-form-control>\r\n <input nz-input type=\"text\" formControlName=\"format\"\r\n placeholder=\"Ej: <b>${point.x}</b>: ${point.y}\" />\r\n </nz-form-control>\r\n </nz-form-item>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <!-- </div> -->\r\n </nz-card>\r\n </div>\r\n </div>\r\n\r\n <!-- Legend Settings (Columna Derecha) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\">\r\n <div formGroupName=\"legends\">\r\n <nz-card [nzBordered]=\"false\" nzTitle=\"Configuraci\u00F3n de Leyendas\" class=\"mb-3 custom-card\">\r\n <div nz-row [nzGutter]=\"16\" class=\"align-items-center\">\r\n <!-- Switch Visible: Ocupa todo el ancho en cel (24) y la mitad en pantallas medianas en adelante (12) -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-2\">\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <span style=\"font-weight: 500; color: #334155\">Visible</span>\r\n <nz-switch formControlName=\"visible\"></nz-switch>\r\n </div>\r\n </div>\r\n\r\n <!-- Select de Posici\u00F3n: Tambi\u00E9n se pasa abajo en pantallas peque\u00F1as -->\r\n <div nz-col [nzXs]=\"24\" [nzSm]=\"12\" class=\"mt-2\">\r\n <span style=\"font-weight: 500; color: #334155\">Posici\u00F3n</span>\r\n\r\n <nz-select nzAllowClear formControlName=\"position\" nzPlaceHolder=\"Posici\u00F3n de leyenda\"\r\n style=\"width: 100%\">\r\n @for (pos of legendPositionOptions; track pos.key) {\r\n <nz-option [nzValue]=\"pos.key\" [nzLabel]=\"pos.label\"></nz-option>\r\n }\r\n </nz-select>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </nz-card>\r\n </form>\r\n</nz-card>\r\n<!-- Template para el T\u00EDtulo con Icono a la izquierda -->\r\n<ng-template #cardTitleTemplate>\r\n <div style=\"display: flex; align-items: center; gap: 8px\">\r\n <i nz-icon nzType=\"dot-chart\" nzTheme=\"outline\" style=\"font-size: 20px; color: #028989\"></i>\r\n <!-- <span>Configuraci\u00F3n del Gr\u00E1fico Burbujas</span> -->\r\n <span>{{config.title || 'Gr\u00E1fico de burbujas'}}</span>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #cardExtraTemplate>\r\n <div style=\"display: flex; align-items: center; gap: 12px\">\r\n <button nz-button nzType=\"default\" type=\"button\" (click)=\"restarConfig()\">\r\n <span nz-icon nzType=\"reload\" nzTheme=\"outline\"></span>\r\n Restaurar\r\n </button>\r\n <!-- <button nz-button nzType=\"primary\" type=\"submit\" (click)=\"onSubmit()\">\r\n <span nz-icon nzType=\"check\"></span>\r\n Aplicar\r\n </button> -->\r\n </div>\r\n</ng-template>", styles: [":host{display:block;width:100%;height:100%;min-height:260px;min-width:0;overflow:hidden}.custom-card{border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 1px 3px #0000000d;overflow:hidden}.custom-card ::ng-deep .ant-card-head{background-color:#f8fafc;border-bottom:1px solid #e2e8f0;padding:0 20px;min-height:48px}.custom-card ::ng-deep .ant-card-head .ant-card-head-title{font-size:15px;font-weight:600;color:#334155}.custom-card ::ng-deep .ant-card-head .ant-card-head-wrapper{flex-wrap:wrap;row-gap:12px;padding-top:12px;padding-bottom:12px}.custom-card ::ng-deep .ant-card-body{padding:20px}:host ::ng-deep .ant-switch-checked{background-color:#028989!important}.palette-color-input{width:36px;height:28px;padding:0;border:none;border-radius:4px;cursor:pointer;background:transparent}.palette-color-input::-webkit-color-swatch-wrapper{padding:0}.palette-color-input::-webkit-color-swatch{border:1px solid rgba(0,0,0,.15);border-radius:4px}.palette-remove-btn{padding:0 4px;height:22px;line-height:20px;font-size:11px}.palette-actions{display:flex;align-items:center;gap:8px;margin-top:10px}.tooltip-preview-box{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px;padding:6px 10px;background:#fff;border:1px dashed #cbd5e1;border-radius:4px;font-size:12px}\n"] }]
6905
6969
  }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$1.NzModalService }], propDecorators: { config: [{
6906
6970
  type: Input
6907
6971
  }], chartData: [{
6908
6972
  type: Input
6909
6973
  }], idComponent: [{
6910
6974
  type: Input
6911
- }], seriesConfigChange: [{
6912
- type: Output
6913
- }], configSelect: [{
6914
- type: Input
6915
- }], axisSelect: [{
6916
- type: Output
6917
- }] } });
6918
-
6919
- class BubbleChartConfigComponent {
6920
- constructor() {
6921
- this.idComponent = '';
6922
- this.configChange = new EventEmitter();
6923
- this.axisSelect = new EventEmitter();
6924
- }
6925
- ngOnInit() {
6926
- // console.log("EL ID DEL COMPONENTE:",this.idComponent)
6927
- }
6928
- onConfigUpdated(updatedConfig) {
6929
- console.log('updatedConfig segundo nivel:', updatedConfig);
6930
- this.configChange.emit({ ...updatedConfig });
6931
- }
6932
- onColumnSelector(updatedAxis) {
6933
- this.axisSelect.emit(updatedAxis);
6934
- }
6935
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BubbleChartConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6936
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: BubbleChartConfigComponent, isStandalone: true, selector: "yw-bubble-chart-config, yw-bubble-char-config", inputs: { chartData: "chartData", config: "config", idComponent: "idComponent", configSelect: "configSelect" }, outputs: { configChange: "configChange", axisSelect: "axisSelect" }, ngImport: i0, template: "\r\n <yw-bubble-chart-config-syncfusion\r\n [idComponent]=\"idComponent\"\r\n [chartData]=\"chartData\" \r\n [config]=\"config\" \r\n (seriesConfigChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onColumnSelector($event)\"\r\n [configSelect]=\"configSelect\"\r\n style=\"display: block; width: 100%; height: 100%;\">\r\n </yw-bubble-chart-config-syncfusion>", styles: [":host{display:block;width:100%;height:100%;min-height:260px;min-width:0;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BubbleChartConfigSyncfusionComponent, selector: "yw-bubble-chart-config-syncfusion", inputs: ["config", "chartData", "idComponent", "configSelect"], outputs: ["seriesConfigChange", "axisSelect"] }] }); }
6937
- }
6938
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BubbleChartConfigComponent, decorators: [{
6939
- type: Component,
6940
- args: [{ selector: 'yw-bubble-chart-config, yw-bubble-char-config', standalone: true, imports: [CommonModule, BubbleChartSyncfusionComponent, BubbleChartConfigSyncfusionComponent], template: "\r\n <yw-bubble-chart-config-syncfusion\r\n [idComponent]=\"idComponent\"\r\n [chartData]=\"chartData\" \r\n [config]=\"config\" \r\n (seriesConfigChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onColumnSelector($event)\"\r\n [configSelect]=\"configSelect\"\r\n style=\"display: block; width: 100%; height: 100%;\">\r\n </yw-bubble-chart-config-syncfusion>", styles: [":host{display:block;width:100%;height:100%;min-height:260px;min-width:0;overflow:hidden}\n"] }]
6941
- }], propDecorators: { chartData: [{
6942
- type: Input,
6943
- args: ['chartData']
6944
- }], config: [{
6945
- type: Input,
6946
- args: ['config']
6947
- }], idComponent: [{
6948
- type: Input,
6949
- args: ['idComponent']
6950
6975
  }], configChange: [{
6951
6976
  type: Output
6952
6977
  }], configSelect: [{
@@ -7176,6 +7201,7 @@ class YwDashboardWidgetConfigComponent {
7176
7201
  }
7177
7202
  ngOnInit() {
7178
7203
  this.initComponentState();
7204
+ console.log('widgetConfig:::::', this.widgetConfig);
7179
7205
  }
7180
7206
  ngOnChanges(changes) {
7181
7207
  if (changes['widgetConfig'] || changes['dashboardData']) {
@@ -7417,23 +7443,78 @@ class YwDashboardWidgetConfigComponent {
7417
7443
  }
7418
7444
  }
7419
7445
  onChartTypeSelected(newType) {
7446
+ console.log('Se lanzó el cambio:', newType);
7420
7447
  if (!newType)
7421
7448
  return;
7449
+ const typeOption = this.availableChartTypes.find(opt => opt.value === newType);
7450
+ // Detectar si el widget está vacío antes de cambiar su estado
7451
+ const isEmptyWidget = this.widgetConfig?.typeComponent === 'empty-visual' ||
7452
+ this.widgetConfig?.typeComponent === 'dummy';
7453
+ let configToEmit;
7454
+ if (isEmptyWidget) {
7455
+ // CASO 1: Widget vacío.
7456
+ // Crear configuración nueva según el gráfico seleccionado.
7457
+ const initialConfig = typeOption?.defaultConfig
7458
+ ? JSON.parse(JSON.stringify(typeOption.defaultConfig))
7459
+ : {
7460
+ provider: 'syncfusion',
7461
+ title: typeOption?.label || ''
7462
+ };
7463
+ // Los joins originales están en widgetConfig.controlConfig
7464
+ const previousConfig = this.widgetConfig?.controlConfig ?? {};
7465
+ const joins = previousConfig['joins'] ?? false;
7466
+ const configJoins = previousConfig['configJoins'] ?? [];
7467
+ configToEmit = {
7468
+ ...initialConfig,
7469
+ joins,
7470
+ configData: {
7471
+ ...(initialConfig['configData'] ?? {}),
7472
+ configJoins: [...configJoins],
7473
+ joins,
7474
+ xAxis: initialConfig['configData']?.['xAxis'] ?? '',
7475
+ yAxis: initialConfig['configData']?.['yAxis'] ?? ''
7476
+ }
7477
+ };
7478
+ this.currentControlConfig = configToEmit;
7479
+ }
7480
+ else {
7481
+ // CASO 2: Widget existente.
7482
+ // Mantener su configuración actual sin reconstruirla.
7483
+ configToEmit = this.currentControlConfig;
7484
+ }
7485
+ // Actualizar el estado después de detectar el tipo original
7422
7486
  this.selectedChartType = newType;
7423
7487
  this.isNewWidget = false;
7424
- const typeOption = this.availableChartTypes.find((opt) => opt.value === newType);
7425
- const initialConfig = typeOption?.defaultConfig
7426
- ? JSON.parse(JSON.stringify(typeOption.defaultConfig))
7427
- : { provider: 'syncfusion', title: typeOption?.label || '' };
7428
- // Auto-detectamos columnas iniciales basadas en los datos disponibles
7429
- this.autoDetectColumnsForConfig(newType, initialConfig);
7430
- this.currentControlConfig = initialConfig;
7488
+ console.log('¿Widget vacío?', isEmptyWidget);
7489
+ console.log('Configuración emitida:', configToEmit);
7431
7490
  this.chartTypeChange.emit({
7432
7491
  widgetId: this.widgetConfig.widgetId,
7433
- newType: newType,
7434
- initialConfig: initialConfig
7492
+ newType,
7493
+ initialConfig: configToEmit
7435
7494
  });
7436
7495
  }
7496
+ // public onChartTypeSelected(newType: string): void {
7497
+ // console.log("Se lanzo el cambio:",newType)
7498
+ // if (!newType) return;
7499
+ // this.selectedChartType = newType;
7500
+ // this.isNewWidget = false;
7501
+ // const typeOption = this.availableChartTypes.find((opt) => opt.value === newType);
7502
+ // console.log("typeOption:",typeOption)
7503
+ // const initialConfig = typeOption?.defaultConfig
7504
+ // ? JSON.parse(JSON.stringify(typeOption.defaultConfig))
7505
+ // : { provider: 'syncfusion', title: typeOption?.label || '' };
7506
+ // // COMENTADO PARA QUE NO ALTERE LA CONFIGURACIÓN DE LOS GRÁFICOS
7507
+ // // Auto-detectamos columnas iniciales basadas en los datos disponibles
7508
+ // // this.autoDetectColumnsForConfig(newType, this.currentControlConfig);
7509
+ // // this.currentControlConfig = this.currentControlConfig;
7510
+ // // REVISAR QUE CUANDO NO TENGA DATA OSEA SEA UN GRAFICO NUEVO PASARLE LOS X Y Y
7511
+ // console.log("this.currentControlConfig,initialConfi",this.currentControlConfig,initialConfig)
7512
+ // this.chartTypeChange.emit({
7513
+ // widgetId: this.widgetConfig.widgetId,
7514
+ // newType: newType,
7515
+ // initialConfig: this.currentControlConfig
7516
+ // });
7517
+ // }
7437
7518
  onConfigUpdated(updatedConfig) {
7438
7519
  this.currentControlConfig = updatedConfig;
7439
7520
  this.configChange.emit({
@@ -7448,7 +7529,7 @@ class YwDashboardWidgetConfigComponent {
7448
7529
  return this.availableChartTypes.find((opt) => opt.value === this.selectedChartType);
7449
7530
  }
7450
7531
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwDashboardWidgetConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7451
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: YwDashboardWidgetConfigComponent, isStandalone: true, selector: "yw-dashboard-widget-config", inputs: { widgetConfig: "widgetConfig", dashboardData: "dashboardData", configSelect: "configSelect" }, outputs: { axisSelect: "axisSelect", configChange: "configChange", chartTypeChange: "chartTypeChange", closeDrawer: "closeDrawer" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dashboard-widget-config-root\">\r\n\r\n\r\n\r\n\r\n <!-- Cabecera de Configuraci\u00F3n del Widget -->\r\n <div class=\"config-header\">\r\n <div class=\"config-header-info\">\r\n <div class=\"config-header-title-row\">\r\n <h5 nz-typography class=\"drawer-title\">Configuraci\u00F3n de gr\u00E1fico</h5>\r\n </div>\r\n <p nz-typography class=\"drawer-subtitle\">\r\n Personaliza los par\u00E1metros, fuentes de datos y apariencia del gr\u00E1fico.\r\n </p>\r\n </div>\r\n\r\n <!-- Barra de Selecci\u00F3n de Tipo de Gr\u00E1fico: Solo visible si ya tiene un tipo de gr\u00E1fico elegido -->\r\n @if (!isNewWidget || selectedChartType) {\r\n <div class=\"chart-selector-container\">\r\n <label class=\"selector-label\">Tipo de Gr\u00E1fico:</label>\r\n <nz-select\r\n class=\"chart-type-select\"\r\n nzSize=\"large\"\r\n [nzShowSearch]=\"false\"\r\n [(ngModel)]=\"selectedChartType\"\r\n (ngModelChange)=\"onChartTypeSelected($event)\"\r\n nzPlaceHolder=\"Seleccionar tipo de gr\u00E1fico...\"\r\n [nzCustomTemplate]=\"selectedTemplate\"\r\n >\r\n @for (opt of availableChartTypes; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\" nzCustomContent>\r\n <div class=\"select-option-item\">\r\n <span\r\n nz-icon\r\n [nzType]=\"opt.icon\"\r\n nzTheme=\"outline\"\r\n class=\"option-icon\"\r\n [style.color]=\"opt.iconColor || '#028989'\"\r\n ></span>\r\n <span class=\"option-label\">{{ opt.label }}</span>\r\n </div>\r\n </nz-option>\r\n }\r\n </nz-select>\r\n\r\n <ng-template #selectedTemplate let-selected>\r\n <div class=\"select-selected-item\" *ngIf=\"getSelectedTypeOption() as sel\">\r\n <span\r\n nz-icon\r\n [nzType]=\"sel.icon\"\r\n nzTheme=\"outline\"\r\n class=\"selected-icon\"\r\n [style.color]=\"sel.iconColor || '#028989'\"\r\n ></span>\r\n <span class=\"selected-label\">{{ sel.label }}</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n }\r\n </div>\r\n\r\n <nz-divider class=\"header-divider\"></nz-divider>\r\n\r\n <!-- Cuerpo de Configuraci\u00F3n -->\r\n <div class=\"config-body\">\r\n <!-- PASO PREVIO: Si es un widget nuevo y a\u00FAn no seleccion\u00F3 gr\u00E1fico -->\r\n @if (isNewWidget && !selectedChartType) {\r\n <div class=\"step-select-prompt\">\r\n <div class=\"prompt-header\">\r\n <span nz-icon nzType=\"appstore-add\" nzTheme=\"outline\" class=\"prompt-icon\"></span>\r\n <h4 nz-typography>Paso 1: Elige un Gr\u00E1fico para Construir</h4>\r\n <p nz-typography class=\"prompt-desc\">\r\n Selecciona el tipo de gr\u00E1fico que deseas desplegar en este widget para configurar sus m\u00E9tricas y estilos.\r\n </p>\r\n </div>\r\n\r\n <div class=\"chart-options-grid\">\r\n @for (item of availableChartTypes; track item.value) {\r\n <div class=\"chart-choice-card\" (click)=\"onChartTypeSelected(item.value)\">\r\n <div class=\"choice-icon-wrap\" [style.color]=\"item.iconColor\">\r\n <span nz-icon [nzType]=\"item.icon\" nzTheme=\"outline\"></span>\r\n </div>\r\n <div class=\"choice-content\">\r\n <span class=\"choice-title\">{{ item.label }}</span>\r\n <span class=\"choice-desc\">{{ item.description }}</span>\r\n </div>\r\n <span nz-icon nzType=\"arrow-right\" class=\"choice-arrow\"></span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- RENDERIZADO DEL COMPONENTE DE CONFIGURACI\u00D3N DEL GR\u00C1FICO SELECCIONADO -->\r\n @if (selectedChartType) {\r\n <div class=\"chart-config-host\">\r\n <!-- Gr\u00E1fico de Barras -->\r\n @if (selectedChartType === 'chart-bar') {\r\n <yw-bar-chart-config\r\n [config]=\"currentControlConfig\"\r\n [chartData]=\"currentControlData\"\r\n [idComponent]=\"widgetConfig.widgetId\"\r\n [configSelect]=\"configSelect\"\r\n (configChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onChangeSelect($event)\"\r\n >\r\n </yw-bar-chart-config>\r\n }\r\n\r\n <!-- Gr\u00E1fico de L\u00EDneas -->\r\n @if (selectedChartType === 'chart-line') {\r\n <yw-line-chart-config\r\n [config]=\"currentControlConfig\"\r\n [chartData]=\"currentControlData\"\r\n [idComponent]=\"widgetConfig.widgetId\"\r\n [configSelect]=\"configSelect\"\r\n (configChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onChangeSelect($event)\"\r\n >\r\n </yw-line-chart-config>\r\n }\r\n\r\n <!-- Gr\u00E1fico Circular / Pie / Doughnut -->\r\n @if (selectedChartType === 'chart-doughnut' || selectedChartType === 'chart-pie') {\r\n <yw-pie-chart-config\r\n [config]=\"currentControlConfig\"\r\n [chartData]=\"currentControlData\"\r\n [configSelect]=\"configSelect\"\r\n (configChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onChangeSelect($event)\"\r\n >\r\n </yw-pie-chart-config>\r\n }\r\n\r\n <!-- Gr\u00E1fico Tac\u00F3metro / Gauge -->\r\n @if (selectedChartType === 'chart-gauge') {\r\n <yw-gauge-chart-config\r\n [config]=\"currentControlConfig\"\r\n [chartData]=\"currentControlData\"\r\n [configSelect]=\"configSelect\"\r\n (configChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onChangeSelect($event)\"\r\n >\r\n </yw-gauge-chart-config>\r\n }\r\n\r\n <!-- Gr\u00E1fico de Burbujas -->\r\n @if (selectedChartType === 'chart-bubble') {\r\n <yw-bubble-chart-config\r\n [config]=\"currentControlConfig\"\r\n [chartData]=\"currentControlData\"\r\n [idComponent]=\"widgetConfig.widgetId+'config'\"\r\n [configSelect]=\"configSelect\"\r\n (configChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onChangeSelect($event)\"\r\n >\r\n </yw-bubble-chart-config>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- MODAL / SUPERPOSICI\u00D3N DEL \u00C1RBOL SELECTOR DE COLUMNAS -->\r\n <!-- @if (configSelect?.onModal) {\r\n <div class=\"tree-filter-modal-backdrop\">\r\n <div class=\"tree-filter-modal-container\">\r\n <yw-tree-table-filter\r\n [configData]=\"treeConfigData\"\r\n [configSelect]=\"configSelect\"\r\n (selectconfigSelect)=\"onColumnSelectedFromTree($event)\"\r\n >\r\n </yw-tree-table-filter>\r\n </div>\r\n </div>\r\n } -->\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;box-sizing:border-box;font-family:manrope,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:#2d3144}.dashboard-widget-config-root{display:flex;flex-direction:column;height:100%;width:100%}.config-header{padding:16px 20px 8px;background-color:#fff;flex-shrink:0}.config-header .config-header-info{margin-bottom:14px}.config-header .config-header-info .config-header-title-row{display:flex;align-items:center;gap:10px}.config-header .config-header-info .config-header-title-row .drawer-title{margin:0;font-size:18px;font-weight:700;color:#1e293b;letter-spacing:-.01em}.config-header .config-header-info .config-header-title-row .widget-tag{font-size:12px;font-weight:600;border-radius:4px;padding:1px 8px}.config-header .config-header-info .drawer-subtitle{margin:4px 0 0;font-size:13px;color:#64748b}.config-header .chart-selector-container{display:flex;flex-direction:column;gap:6px}.config-header .chart-selector-container .selector-label{font-size:13px;font-weight:600;color:#334155}.config-header .chart-selector-container .chart-type-select{width:100%}.config-header .chart-selector-container .chart-type-select ::ng-deep .ant-select-selector{height:42px!important;display:flex!important;align-items:center!important;border-radius:8px!important;border-color:#cbd5e1!important;box-shadow:0 1px 2px #0000000a!important;padding:0 12px!important;transition:all .2s ease-in-out}.config-header .chart-selector-container .chart-type-select ::ng-deep .ant-select-selector:hover{border-color:#028989!important}.config-header .chart-selector-container .chart-type-select ::ng-deep .ant-select-selection-item{display:flex!important;align-items:center!important;height:100%!important;line-height:normal!important;padding:0!important;opacity:1!important;color:inherit!important}.config-header .chart-selector-container .chart-type-select ::ng-deep .ant-select-selection-placeholder{display:flex!important;align-items:center!important;height:100%!important;line-height:normal!important}.config-header .chart-selector-container .chart-type-select ::ng-deep .ant-select-arrow{color:#64748b}.config-header .chart-selector-container .chart-type-select.ant-select-focused ::ng-deep .ant-select-selector,.config-header .chart-selector-container .chart-type-select.ant-select-open ::ng-deep .ant-select-selector{border-color:#028989!important;box-shadow:0 0 0 2px #10b98126!important}.select-option-item,.select-selected-item{display:inline-flex;align-items:center;gap:10px;width:100%;height:100%}.select-option-item .option-icon,.select-option-item .selected-icon,.select-selected-item .option-icon,.select-selected-item .selected-icon{font-size:18px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.select-option-item .option-label,.select-option-item .selected-label,.select-selected-item .option-label,.select-selected-item .selected-label{font-size:14px;font-weight:500;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-divider{margin:8px 0 0}.config-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}.step-select-prompt{display:flex;flex-direction:column;gap:20px;padding:10px 0}.step-select-prompt .prompt-header{text-align:center;padding:12px 16px;background:#fff;border-radius:12px;border:1px dashed #cbd5e1}.step-select-prompt .prompt-header .prompt-icon{font-size:36px;color:#028989;margin-bottom:8px}.step-select-prompt .prompt-header h4{margin:0 0 4px;font-size:16px;font-weight:700;color:#0f172a}.step-select-prompt .prompt-header .prompt-desc{margin:0;font-size:13px;color:#64748b}.step-select-prompt .chart-options-grid{display:flex;flex-direction:column;gap:12px}.step-select-prompt .chart-choice-card{display:flex;align-items:center;gap:16px;padding:14px 18px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;cursor:pointer;transition:all .25s ease-in-out;box-shadow:0 1px 3px #00000008}.step-select-prompt .chart-choice-card:hover{border-color:#028989;background:#f0fdfa;transform:translateY(-2px);box-shadow:0 4px 12px #0289891f}.step-select-prompt .chart-choice-card:hover .choice-arrow{transform:translate(4px);color:#028989}.step-select-prompt .chart-choice-card .choice-icon-wrap{width:44px;height:44px;border-radius:8px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}.step-select-prompt .chart-choice-card .choice-content{flex:1 1 auto;display:flex;flex-direction:column;gap:2px}.step-select-prompt .chart-choice-card .choice-content .choice-title{font-size:14px;font-weight:700;color:#1e293b}.step-select-prompt .chart-choice-card .choice-content .choice-desc{font-size:12px;color:#64748b;line-height:1.4}.step-select-prompt .chart-choice-card .choice-arrow{font-size:16px;color:#94a3b8;transition:transform .2s ease,color .2s ease;flex-shrink:0}.chart-config-host{margin-top:10px;width:100%}.bubble-placeholder-card{padding:16px 0}.tree-filter-modal-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0f172a73;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1050;display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeInModal .2s ease-out}.tree-filter-modal-backdrop .tree-filter-modal-container{width:100%;max-width:540px;background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;overflow:hidden;border:1px solid #e2e8f0;animation:scaleInModal .2s cubic-bezier(.16,1,.3,1)}@keyframes fadeInModal{0%{opacity:0}to{opacity:1}}@keyframes scaleInModal{0%{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i7.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i7.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzVariant", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzPrefix", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus", "nzOnClear"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "ngmodule", type: NzButtonModule }, { kind: "directive", type: i11.ɵNzTransitionPatchDirective, selector: "[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i13.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzTypographyModule }, { kind: "component", type: i6$2.NzTypographyComponent, selector: " nz-typography, [nz-typography], p[nz-paragraph], span[nz-text], h1[nz-title], h2[nz-title], h3[nz-title], h4[nz-title] ", inputs: ["nzCopyable", "nzEditable", "nzDisabled", "nzExpandable", "nzEllipsis", "nzCopyTooltips", "nzCopyIcons", "nzEditTooltip", "nzEditIcon", "nzContent", "nzEllipsisRows", "nzType", "nzCopyText", "nzSuffix"], outputs: ["nzContentChange", "nzCopy", "nzExpandChange", "nzOnEllipsis"], exportAs: ["nzTypography"] }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i7$1.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzSize", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "ngmodule", type: NzTagModule }, { kind: "ngmodule", type: NzSpaceModule }, { kind: "ngmodule", type: NzEmptyModule }, { kind: "component", type: BarChartConfigComponent, selector: "yw-bar-chart-config", inputs: ["chartData", "config", "idComponent", "configSelect"], outputs: ["configChange", "axisSelect"] }, { kind: "component", type: LineChartConfigComponent, selector: "yw-line-chart-config", inputs: ["chartData", "config", "idComponent", "configSelect"], outputs: ["configChange", "axisSelect"] }, { kind: "component", type: PieChartConfigComponent, selector: "yw-pie-chart-config", inputs: ["chartData", "config", "configSelect", "showPreview", "showJsonToggle", "previewHeight", "title"], outputs: ["axisSelect", "configChange"] }, { kind: "component", type: GaugeChartConfigComponent, selector: "yw-gauge-chart-config", inputs: ["chartData", "config", "configSelect", "showPreview", "showJsonToggle", "previewHeight", "title"], outputs: ["axisSelect", "configChange"] }, { kind: "component", type: BubbleChartConfigComponent, selector: "yw-bubble-chart-config, yw-bubble-char-config", inputs: ["chartData", "config", "idComponent", "configSelect"], outputs: ["configChange", "axisSelect"] }] }); }
7532
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: YwDashboardWidgetConfigComponent, isStandalone: true, selector: "yw-dashboard-widget-config", inputs: { widgetConfig: "widgetConfig", dashboardData: "dashboardData", configSelect: "configSelect" }, outputs: { axisSelect: "axisSelect", configChange: "configChange", chartTypeChange: "chartTypeChange", closeDrawer: "closeDrawer" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dashboard-widget-config-root\">\r\n\r\n\r\n\r\n\r\n <!-- Cabecera de Configuraci\u00F3n del Widget -->\r\n <div class=\"config-header\">\r\n <div class=\"config-header-info\">\r\n <div class=\"config-header-title-row\">\r\n <h5 nz-typography class=\"drawer-title\">Configuraci\u00F3n de gr\u00E1fico</h5>\r\n </div>\r\n <p nz-typography class=\"drawer-subtitle\">\r\n Personaliza los par\u00E1metros, fuentes de datos y apariencia del gr\u00E1fico.\r\n </p>\r\n </div>\r\n\r\n <!-- Barra de Selecci\u00F3n de Tipo de Gr\u00E1fico: Solo visible si ya tiene un tipo de gr\u00E1fico elegido -->\r\n @if (!isNewWidget || selectedChartType) {\r\n <div class=\"chart-selector-container\">\r\n <label class=\"selector-label\">Tipo de Gr\u00E1fico:</label>\r\n <nz-select\r\n class=\"chart-type-select\"\r\n nzSize=\"large\"\r\n [nzShowSearch]=\"false\"\r\n [(ngModel)]=\"selectedChartType\"\r\n (ngModelChange)=\"onChartTypeSelected($event)\"\r\n nzPlaceHolder=\"Seleccionar tipo de gr\u00E1fico...\"\r\n [nzCustomTemplate]=\"selectedTemplate\"\r\n >\r\n @for (opt of availableChartTypes; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\" nzCustomContent>\r\n <div class=\"select-option-item\">\r\n <span\r\n nz-icon\r\n [nzType]=\"opt.icon\"\r\n nzTheme=\"outline\"\r\n class=\"option-icon\"\r\n [style.color]=\"opt.iconColor || '#028989'\"\r\n ></span>\r\n <span class=\"option-label\">{{ opt.label }}</span>\r\n </div>\r\n </nz-option>\r\n }\r\n </nz-select>\r\n\r\n <ng-template #selectedTemplate let-selected>\r\n <div class=\"select-selected-item\" *ngIf=\"getSelectedTypeOption() as sel\">\r\n <span\r\n nz-icon\r\n [nzType]=\"sel.icon\"\r\n nzTheme=\"outline\"\r\n class=\"selected-icon\"\r\n [style.color]=\"sel.iconColor || '#028989'\"\r\n ></span>\r\n <span class=\"selected-label\">{{ sel.label }}</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n }\r\n </div>\r\n\r\n <nz-divider class=\"header-divider\"></nz-divider>\r\n\r\n <!-- Cuerpo de Configuraci\u00F3n -->\r\n <div class=\"config-body\">\r\n <!-- PASO PREVIO: Si es un widget nuevo y a\u00FAn no seleccion\u00F3 gr\u00E1fico -->\r\n @if (isNewWidget && !selectedChartType) {\r\n <div class=\"step-select-prompt\">\r\n <div class=\"prompt-header\">\r\n <span nz-icon nzType=\"appstore-add\" nzTheme=\"outline\" class=\"prompt-icon\"></span>\r\n <h4 nz-typography>Paso 1: Elige un Gr\u00E1fico para Construir</h4>\r\n <p nz-typography class=\"prompt-desc\">\r\n Selecciona el tipo de gr\u00E1fico que deseas desplegar en este widget para configurar sus m\u00E9tricas y estilos.\r\n </p>\r\n </div>\r\n\r\n <div class=\"chart-options-grid\">\r\n @for (item of availableChartTypes; track item.value) {\r\n <div class=\"chart-choice-card\" (click)=\"onChartTypeSelected(item.value)\">\r\n <div class=\"choice-icon-wrap\" [style.color]=\"item.iconColor\">\r\n <span nz-icon [nzType]=\"item.icon\" nzTheme=\"outline\"></span>\r\n </div>\r\n <div class=\"choice-content\">\r\n <span class=\"choice-title\">{{ item.label }}</span>\r\n <span class=\"choice-desc\">{{ item.description }}</span>\r\n </div>\r\n <span nz-icon nzType=\"arrow-right\" class=\"choice-arrow\"></span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- RENDERIZADO DEL COMPONENTE DE CONFIGURACI\u00D3N DEL GR\u00C1FICO SELECCIONADO -->\r\n @if (selectedChartType) {\r\n <div class=\"chart-config-host\">\r\n <!-- Gr\u00E1fico de Barras -->\r\n @if (selectedChartType === 'chart-bar') {\r\n <yw-bar-chart-config\r\n [config]=\"currentControlConfig\"\r\n [chartData]=\"currentControlData\"\r\n [idComponent]=\"widgetConfig.widgetId\"\r\n [configSelect]=\"configSelect\"\r\n (configChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onChangeSelect($event)\"\r\n >\r\n </yw-bar-chart-config>\r\n }\r\n\r\n <!-- Gr\u00E1fico de L\u00EDneas -->\r\n @if (selectedChartType === 'chart-line') {\r\n <yw-line-chart-config\r\n [config]=\"currentControlConfig\"\r\n [chartData]=\"currentControlData\"\r\n [idComponent]=\"widgetConfig.widgetId\"\r\n [configSelect]=\"configSelect\"\r\n (configChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onChangeSelect($event)\"\r\n >\r\n </yw-line-chart-config>\r\n }\r\n\r\n <!-- Gr\u00E1fico Circular / Pie / Doughnut -->\r\n @if (selectedChartType === 'chart-doughnut' || selectedChartType === 'chart-pie') {\r\n <yw-pie-chart-config\r\n [config]=\"currentControlConfig\"\r\n [chartData]=\"currentControlData\"\r\n [idComponent]=\"widgetConfig.widgetId\"\r\n [configSelect]=\"configSelect\"\r\n (configChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onChangeSelect($event)\"\r\n >\r\n </yw-pie-chart-config>\r\n }\r\n\r\n <!-- Gr\u00E1fico Tac\u00F3metro / Gauge -->\r\n @if (selectedChartType === 'chart-gauge') {\r\n <yw-gauge-chart-config\r\n [config]=\"currentControlConfig\"\r\n [chartData]=\"currentControlData\"\r\n [configSelect]=\"configSelect\"\r\n [idComponent]=\"widgetConfig.widgetId\"\r\n (configChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onChangeSelect($event)\"\r\n >\r\n </yw-gauge-chart-config>\r\n }\r\n\r\n <!-- Gr\u00E1fico de Burbujas -->\r\n @if (selectedChartType === 'chart-bubble') {\r\n <yw-bubble-chart-config\r\n [config]=\"currentControlConfig\"\r\n [chartData]=\"currentControlData\"\r\n [idComponent]=\"widgetConfig.widgetId\"\r\n [configSelect]=\"configSelect\"\r\n (configChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onChangeSelect($event)\"\r\n >\r\n </yw-bubble-chart-config>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- MODAL / SUPERPOSICI\u00D3N DEL \u00C1RBOL SELECTOR DE COLUMNAS -->\r\n <!-- @if (configSelect?.onModal) {\r\n <div class=\"tree-filter-modal-backdrop\">\r\n <div class=\"tree-filter-modal-container\">\r\n <yw-tree-table-filter\r\n [configData]=\"treeConfigData\"\r\n [configSelect]=\"configSelect\"\r\n (selectconfigSelect)=\"onColumnSelectedFromTree($event)\"\r\n >\r\n </yw-tree-table-filter>\r\n </div>\r\n </div>\r\n } -->\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;box-sizing:border-box;font-family:manrope,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:#2d3144}.dashboard-widget-config-root{display:flex;flex-direction:column;height:100%;width:100%}.config-header{padding:16px 20px 8px;background-color:#fff;flex-shrink:0}.config-header .config-header-info{margin-bottom:14px}.config-header .config-header-info .config-header-title-row{display:flex;align-items:center;gap:10px}.config-header .config-header-info .config-header-title-row .drawer-title{margin:0;font-size:18px;font-weight:700;color:#1e293b;letter-spacing:-.01em}.config-header .config-header-info .config-header-title-row .widget-tag{font-size:12px;font-weight:600;border-radius:4px;padding:1px 8px}.config-header .config-header-info .drawer-subtitle{margin:4px 0 0;font-size:13px;color:#64748b}.config-header .chart-selector-container{display:flex;flex-direction:column;gap:6px}.config-header .chart-selector-container .selector-label{font-size:13px;font-weight:600;color:#334155}.config-header .chart-selector-container .chart-type-select{width:100%}.config-header .chart-selector-container .chart-type-select ::ng-deep .ant-select-selector{height:42px!important;display:flex!important;align-items:center!important;border-radius:8px!important;border-color:#cbd5e1!important;box-shadow:0 1px 2px #0000000a!important;padding:0 12px!important;transition:all .2s ease-in-out}.config-header .chart-selector-container .chart-type-select ::ng-deep .ant-select-selector:hover{border-color:#028989!important}.config-header .chart-selector-container .chart-type-select ::ng-deep .ant-select-selection-item{display:flex!important;align-items:center!important;height:100%!important;line-height:normal!important;padding:0!important;opacity:1!important;color:inherit!important}.config-header .chart-selector-container .chart-type-select ::ng-deep .ant-select-selection-placeholder{display:flex!important;align-items:center!important;height:100%!important;line-height:normal!important}.config-header .chart-selector-container .chart-type-select ::ng-deep .ant-select-arrow{color:#64748b}.config-header .chart-selector-container .chart-type-select.ant-select-focused ::ng-deep .ant-select-selector,.config-header .chart-selector-container .chart-type-select.ant-select-open ::ng-deep .ant-select-selector{border-color:#028989!important;box-shadow:0 0 0 2px #10b98126!important}.select-option-item,.select-selected-item{display:inline-flex;align-items:center;gap:10px;width:100%;height:100%}.select-option-item .option-icon,.select-option-item .selected-icon,.select-selected-item .option-icon,.select-selected-item .selected-icon{font-size:18px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.select-option-item .option-label,.select-option-item .selected-label,.select-selected-item .option-label,.select-selected-item .selected-label{font-size:14px;font-weight:500;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-divider{margin:8px 0 0}.config-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}.step-select-prompt{display:flex;flex-direction:column;gap:20px;padding:10px 0}.step-select-prompt .prompt-header{text-align:center;padding:12px 16px;background:#fff;border-radius:12px;border:1px dashed #cbd5e1}.step-select-prompt .prompt-header .prompt-icon{font-size:36px;color:#028989;margin-bottom:8px}.step-select-prompt .prompt-header h4{margin:0 0 4px;font-size:16px;font-weight:700;color:#0f172a}.step-select-prompt .prompt-header .prompt-desc{margin:0;font-size:13px;color:#64748b}.step-select-prompt .chart-options-grid{display:flex;flex-direction:column;gap:12px}.step-select-prompt .chart-choice-card{display:flex;align-items:center;gap:16px;padding:14px 18px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;cursor:pointer;transition:all .25s ease-in-out;box-shadow:0 1px 3px #00000008}.step-select-prompt .chart-choice-card:hover{border-color:#028989;background:#f0fdfa;transform:translateY(-2px);box-shadow:0 4px 12px #0289891f}.step-select-prompt .chart-choice-card:hover .choice-arrow{transform:translate(4px);color:#028989}.step-select-prompt .chart-choice-card .choice-icon-wrap{width:44px;height:44px;border-radius:8px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}.step-select-prompt .chart-choice-card .choice-content{flex:1 1 auto;display:flex;flex-direction:column;gap:2px}.step-select-prompt .chart-choice-card .choice-content .choice-title{font-size:14px;font-weight:700;color:#1e293b}.step-select-prompt .chart-choice-card .choice-content .choice-desc{font-size:12px;color:#64748b;line-height:1.4}.step-select-prompt .chart-choice-card .choice-arrow{font-size:16px;color:#94a3b8;transition:transform .2s ease,color .2s ease;flex-shrink:0}.chart-config-host{margin-top:10px;width:100%}.bubble-placeholder-card{padding:16px 0}.tree-filter-modal-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0f172a73;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1050;display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeInModal .2s ease-out}.tree-filter-modal-backdrop .tree-filter-modal-container{width:100%;max-width:540px;background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;overflow:hidden;border:1px solid #e2e8f0;animation:scaleInModal .2s cubic-bezier(.16,1,.3,1)}@keyframes fadeInModal{0%{opacity:0}to{opacity:1}}@keyframes scaleInModal{0%{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i7.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i7.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzVariant", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzPrefix", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus", "nzOnClear"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzCardModule }, { kind: "ngmodule", type: NzButtonModule }, { kind: "directive", type: i11.ɵNzTransitionPatchDirective, selector: "[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i13.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzTypographyModule }, { kind: "component", type: i6$2.NzTypographyComponent, selector: " nz-typography, [nz-typography], p[nz-paragraph], span[nz-text], h1[nz-title], h2[nz-title], h3[nz-title], h4[nz-title] ", inputs: ["nzCopyable", "nzEditable", "nzDisabled", "nzExpandable", "nzEllipsis", "nzCopyTooltips", "nzCopyIcons", "nzEditTooltip", "nzEditIcon", "nzContent", "nzEllipsisRows", "nzType", "nzCopyText", "nzSuffix"], outputs: ["nzContentChange", "nzCopy", "nzExpandChange", "nzOnEllipsis"], exportAs: ["nzTypography"] }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i7$1.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzSize", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }, { kind: "ngmodule", type: NzTagModule }, { kind: "ngmodule", type: NzSpaceModule }, { kind: "ngmodule", type: NzEmptyModule }, { kind: "component", type: BarChartConfigComponent, selector: "yw-bar-chart-config", inputs: ["config", "chartData", "idComponent", "configSelect"], outputs: ["configChange", "axisSelect"] }, { kind: "component", type: LineChartConfigComponent, selector: "yw-line-chart-config", inputs: ["config", "chartData", "idComponent", "configSelect"], outputs: ["configChange", "axisSelect"] }, { kind: "component", type: PieChartConfigComponent, selector: "yw-pie-chart-config", inputs: ["chartData", "config", "configSelect", "showPreview", "showJsonToggle", "previewHeight", "title", "idComponent"], outputs: ["axisSelect", "configChange"] }, { kind: "component", type: GaugeChartConfigComponent, selector: "yw-gauge-chart-config", inputs: ["chartData", "config", "configSelect", "showPreview", "showJsonToggle", "previewHeight", "title", "idComponent"], outputs: ["axisSelect", "configChange"] }, { kind: "component", type: BubbleChartConfigComponent, selector: "yw-bubble-chart-config", inputs: ["config", "chartData", "idComponent", "configSelect"], outputs: ["configChange", "axisSelect"] }] }); }
7452
7533
  }
7453
7534
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwDashboardWidgetConfigComponent, decorators: [{
7454
7535
  type: Component,
@@ -7472,7 +7553,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
7472
7553
  BubbleChartConfigComponent,
7473
7554
  // TestColumnSelectorComponent
7474
7555
  TreeTableFilterComponent
7475
- ], template: "<div class=\"dashboard-widget-config-root\">\r\n\r\n\r\n\r\n\r\n <!-- Cabecera de Configuraci\u00F3n del Widget -->\r\n <div class=\"config-header\">\r\n <div class=\"config-header-info\">\r\n <div class=\"config-header-title-row\">\r\n <h5 nz-typography class=\"drawer-title\">Configuraci\u00F3n de gr\u00E1fico</h5>\r\n </div>\r\n <p nz-typography class=\"drawer-subtitle\">\r\n Personaliza los par\u00E1metros, fuentes de datos y apariencia del gr\u00E1fico.\r\n </p>\r\n </div>\r\n\r\n <!-- Barra de Selecci\u00F3n de Tipo de Gr\u00E1fico: Solo visible si ya tiene un tipo de gr\u00E1fico elegido -->\r\n @if (!isNewWidget || selectedChartType) {\r\n <div class=\"chart-selector-container\">\r\n <label class=\"selector-label\">Tipo de Gr\u00E1fico:</label>\r\n <nz-select\r\n class=\"chart-type-select\"\r\n nzSize=\"large\"\r\n [nzShowSearch]=\"false\"\r\n [(ngModel)]=\"selectedChartType\"\r\n (ngModelChange)=\"onChartTypeSelected($event)\"\r\n nzPlaceHolder=\"Seleccionar tipo de gr\u00E1fico...\"\r\n [nzCustomTemplate]=\"selectedTemplate\"\r\n >\r\n @for (opt of availableChartTypes; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\" nzCustomContent>\r\n <div class=\"select-option-item\">\r\n <span\r\n nz-icon\r\n [nzType]=\"opt.icon\"\r\n nzTheme=\"outline\"\r\n class=\"option-icon\"\r\n [style.color]=\"opt.iconColor || '#028989'\"\r\n ></span>\r\n <span class=\"option-label\">{{ opt.label }}</span>\r\n </div>\r\n </nz-option>\r\n }\r\n </nz-select>\r\n\r\n <ng-template #selectedTemplate let-selected>\r\n <div class=\"select-selected-item\" *ngIf=\"getSelectedTypeOption() as sel\">\r\n <span\r\n nz-icon\r\n [nzType]=\"sel.icon\"\r\n nzTheme=\"outline\"\r\n class=\"selected-icon\"\r\n [style.color]=\"sel.iconColor || '#028989'\"\r\n ></span>\r\n <span class=\"selected-label\">{{ sel.label }}</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n }\r\n </div>\r\n\r\n <nz-divider class=\"header-divider\"></nz-divider>\r\n\r\n <!-- Cuerpo de Configuraci\u00F3n -->\r\n <div class=\"config-body\">\r\n <!-- PASO PREVIO: Si es un widget nuevo y a\u00FAn no seleccion\u00F3 gr\u00E1fico -->\r\n @if (isNewWidget && !selectedChartType) {\r\n <div class=\"step-select-prompt\">\r\n <div class=\"prompt-header\">\r\n <span nz-icon nzType=\"appstore-add\" nzTheme=\"outline\" class=\"prompt-icon\"></span>\r\n <h4 nz-typography>Paso 1: Elige un Gr\u00E1fico para Construir</h4>\r\n <p nz-typography class=\"prompt-desc\">\r\n Selecciona el tipo de gr\u00E1fico que deseas desplegar en este widget para configurar sus m\u00E9tricas y estilos.\r\n </p>\r\n </div>\r\n\r\n <div class=\"chart-options-grid\">\r\n @for (item of availableChartTypes; track item.value) {\r\n <div class=\"chart-choice-card\" (click)=\"onChartTypeSelected(item.value)\">\r\n <div class=\"choice-icon-wrap\" [style.color]=\"item.iconColor\">\r\n <span nz-icon [nzType]=\"item.icon\" nzTheme=\"outline\"></span>\r\n </div>\r\n <div class=\"choice-content\">\r\n <span class=\"choice-title\">{{ item.label }}</span>\r\n <span class=\"choice-desc\">{{ item.description }}</span>\r\n </div>\r\n <span nz-icon nzType=\"arrow-right\" class=\"choice-arrow\"></span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- RENDERIZADO DEL COMPONENTE DE CONFIGURACI\u00D3N DEL GR\u00C1FICO SELECCIONADO -->\r\n @if (selectedChartType) {\r\n <div class=\"chart-config-host\">\r\n <!-- Gr\u00E1fico de Barras -->\r\n @if (selectedChartType === 'chart-bar') {\r\n <yw-bar-chart-config\r\n [config]=\"currentControlConfig\"\r\n [chartData]=\"currentControlData\"\r\n [idComponent]=\"widgetConfig.widgetId\"\r\n [configSelect]=\"configSelect\"\r\n (configChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onChangeSelect($event)\"\r\n >\r\n </yw-bar-chart-config>\r\n }\r\n\r\n <!-- Gr\u00E1fico de L\u00EDneas -->\r\n @if (selectedChartType === 'chart-line') {\r\n <yw-line-chart-config\r\n [config]=\"currentControlConfig\"\r\n [chartData]=\"currentControlData\"\r\n [idComponent]=\"widgetConfig.widgetId\"\r\n [configSelect]=\"configSelect\"\r\n (configChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onChangeSelect($event)\"\r\n >\r\n </yw-line-chart-config>\r\n }\r\n\r\n <!-- Gr\u00E1fico Circular / Pie / Doughnut -->\r\n @if (selectedChartType === 'chart-doughnut' || selectedChartType === 'chart-pie') {\r\n <yw-pie-chart-config\r\n [config]=\"currentControlConfig\"\r\n [chartData]=\"currentControlData\"\r\n [configSelect]=\"configSelect\"\r\n (configChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onChangeSelect($event)\"\r\n >\r\n </yw-pie-chart-config>\r\n }\r\n\r\n <!-- Gr\u00E1fico Tac\u00F3metro / Gauge -->\r\n @if (selectedChartType === 'chart-gauge') {\r\n <yw-gauge-chart-config\r\n [config]=\"currentControlConfig\"\r\n [chartData]=\"currentControlData\"\r\n [configSelect]=\"configSelect\"\r\n (configChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onChangeSelect($event)\"\r\n >\r\n </yw-gauge-chart-config>\r\n }\r\n\r\n <!-- Gr\u00E1fico de Burbujas -->\r\n @if (selectedChartType === 'chart-bubble') {\r\n <yw-bubble-chart-config\r\n [config]=\"currentControlConfig\"\r\n [chartData]=\"currentControlData\"\r\n [idComponent]=\"widgetConfig.widgetId+'config'\"\r\n [configSelect]=\"configSelect\"\r\n (configChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onChangeSelect($event)\"\r\n >\r\n </yw-bubble-chart-config>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- MODAL / SUPERPOSICI\u00D3N DEL \u00C1RBOL SELECTOR DE COLUMNAS -->\r\n <!-- @if (configSelect?.onModal) {\r\n <div class=\"tree-filter-modal-backdrop\">\r\n <div class=\"tree-filter-modal-container\">\r\n <yw-tree-table-filter\r\n [configData]=\"treeConfigData\"\r\n [configSelect]=\"configSelect\"\r\n (selectconfigSelect)=\"onColumnSelectedFromTree($event)\"\r\n >\r\n </yw-tree-table-filter>\r\n </div>\r\n </div>\r\n } -->\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;box-sizing:border-box;font-family:manrope,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:#2d3144}.dashboard-widget-config-root{display:flex;flex-direction:column;height:100%;width:100%}.config-header{padding:16px 20px 8px;background-color:#fff;flex-shrink:0}.config-header .config-header-info{margin-bottom:14px}.config-header .config-header-info .config-header-title-row{display:flex;align-items:center;gap:10px}.config-header .config-header-info .config-header-title-row .drawer-title{margin:0;font-size:18px;font-weight:700;color:#1e293b;letter-spacing:-.01em}.config-header .config-header-info .config-header-title-row .widget-tag{font-size:12px;font-weight:600;border-radius:4px;padding:1px 8px}.config-header .config-header-info .drawer-subtitle{margin:4px 0 0;font-size:13px;color:#64748b}.config-header .chart-selector-container{display:flex;flex-direction:column;gap:6px}.config-header .chart-selector-container .selector-label{font-size:13px;font-weight:600;color:#334155}.config-header .chart-selector-container .chart-type-select{width:100%}.config-header .chart-selector-container .chart-type-select ::ng-deep .ant-select-selector{height:42px!important;display:flex!important;align-items:center!important;border-radius:8px!important;border-color:#cbd5e1!important;box-shadow:0 1px 2px #0000000a!important;padding:0 12px!important;transition:all .2s ease-in-out}.config-header .chart-selector-container .chart-type-select ::ng-deep .ant-select-selector:hover{border-color:#028989!important}.config-header .chart-selector-container .chart-type-select ::ng-deep .ant-select-selection-item{display:flex!important;align-items:center!important;height:100%!important;line-height:normal!important;padding:0!important;opacity:1!important;color:inherit!important}.config-header .chart-selector-container .chart-type-select ::ng-deep .ant-select-selection-placeholder{display:flex!important;align-items:center!important;height:100%!important;line-height:normal!important}.config-header .chart-selector-container .chart-type-select ::ng-deep .ant-select-arrow{color:#64748b}.config-header .chart-selector-container .chart-type-select.ant-select-focused ::ng-deep .ant-select-selector,.config-header .chart-selector-container .chart-type-select.ant-select-open ::ng-deep .ant-select-selector{border-color:#028989!important;box-shadow:0 0 0 2px #10b98126!important}.select-option-item,.select-selected-item{display:inline-flex;align-items:center;gap:10px;width:100%;height:100%}.select-option-item .option-icon,.select-option-item .selected-icon,.select-selected-item .option-icon,.select-selected-item .selected-icon{font-size:18px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.select-option-item .option-label,.select-option-item .selected-label,.select-selected-item .option-label,.select-selected-item .selected-label{font-size:14px;font-weight:500;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-divider{margin:8px 0 0}.config-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}.step-select-prompt{display:flex;flex-direction:column;gap:20px;padding:10px 0}.step-select-prompt .prompt-header{text-align:center;padding:12px 16px;background:#fff;border-radius:12px;border:1px dashed #cbd5e1}.step-select-prompt .prompt-header .prompt-icon{font-size:36px;color:#028989;margin-bottom:8px}.step-select-prompt .prompt-header h4{margin:0 0 4px;font-size:16px;font-weight:700;color:#0f172a}.step-select-prompt .prompt-header .prompt-desc{margin:0;font-size:13px;color:#64748b}.step-select-prompt .chart-options-grid{display:flex;flex-direction:column;gap:12px}.step-select-prompt .chart-choice-card{display:flex;align-items:center;gap:16px;padding:14px 18px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;cursor:pointer;transition:all .25s ease-in-out;box-shadow:0 1px 3px #00000008}.step-select-prompt .chart-choice-card:hover{border-color:#028989;background:#f0fdfa;transform:translateY(-2px);box-shadow:0 4px 12px #0289891f}.step-select-prompt .chart-choice-card:hover .choice-arrow{transform:translate(4px);color:#028989}.step-select-prompt .chart-choice-card .choice-icon-wrap{width:44px;height:44px;border-radius:8px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}.step-select-prompt .chart-choice-card .choice-content{flex:1 1 auto;display:flex;flex-direction:column;gap:2px}.step-select-prompt .chart-choice-card .choice-content .choice-title{font-size:14px;font-weight:700;color:#1e293b}.step-select-prompt .chart-choice-card .choice-content .choice-desc{font-size:12px;color:#64748b;line-height:1.4}.step-select-prompt .chart-choice-card .choice-arrow{font-size:16px;color:#94a3b8;transition:transform .2s ease,color .2s ease;flex-shrink:0}.chart-config-host{margin-top:10px;width:100%}.bubble-placeholder-card{padding:16px 0}.tree-filter-modal-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0f172a73;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1050;display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeInModal .2s ease-out}.tree-filter-modal-backdrop .tree-filter-modal-container{width:100%;max-width:540px;background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;overflow:hidden;border:1px solid #e2e8f0;animation:scaleInModal .2s cubic-bezier(.16,1,.3,1)}@keyframes fadeInModal{0%{opacity:0}to{opacity:1}}@keyframes scaleInModal{0%{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
7556
+ ], template: "<div class=\"dashboard-widget-config-root\">\r\n\r\n\r\n\r\n\r\n <!-- Cabecera de Configuraci\u00F3n del Widget -->\r\n <div class=\"config-header\">\r\n <div class=\"config-header-info\">\r\n <div class=\"config-header-title-row\">\r\n <h5 nz-typography class=\"drawer-title\">Configuraci\u00F3n de gr\u00E1fico</h5>\r\n </div>\r\n <p nz-typography class=\"drawer-subtitle\">\r\n Personaliza los par\u00E1metros, fuentes de datos y apariencia del gr\u00E1fico.\r\n </p>\r\n </div>\r\n\r\n <!-- Barra de Selecci\u00F3n de Tipo de Gr\u00E1fico: Solo visible si ya tiene un tipo de gr\u00E1fico elegido -->\r\n @if (!isNewWidget || selectedChartType) {\r\n <div class=\"chart-selector-container\">\r\n <label class=\"selector-label\">Tipo de Gr\u00E1fico:</label>\r\n <nz-select\r\n class=\"chart-type-select\"\r\n nzSize=\"large\"\r\n [nzShowSearch]=\"false\"\r\n [(ngModel)]=\"selectedChartType\"\r\n (ngModelChange)=\"onChartTypeSelected($event)\"\r\n nzPlaceHolder=\"Seleccionar tipo de gr\u00E1fico...\"\r\n [nzCustomTemplate]=\"selectedTemplate\"\r\n >\r\n @for (opt of availableChartTypes; track opt.value) {\r\n <nz-option [nzValue]=\"opt.value\" [nzLabel]=\"opt.label\" nzCustomContent>\r\n <div class=\"select-option-item\">\r\n <span\r\n nz-icon\r\n [nzType]=\"opt.icon\"\r\n nzTheme=\"outline\"\r\n class=\"option-icon\"\r\n [style.color]=\"opt.iconColor || '#028989'\"\r\n ></span>\r\n <span class=\"option-label\">{{ opt.label }}</span>\r\n </div>\r\n </nz-option>\r\n }\r\n </nz-select>\r\n\r\n <ng-template #selectedTemplate let-selected>\r\n <div class=\"select-selected-item\" *ngIf=\"getSelectedTypeOption() as sel\">\r\n <span\r\n nz-icon\r\n [nzType]=\"sel.icon\"\r\n nzTheme=\"outline\"\r\n class=\"selected-icon\"\r\n [style.color]=\"sel.iconColor || '#028989'\"\r\n ></span>\r\n <span class=\"selected-label\">{{ sel.label }}</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n }\r\n </div>\r\n\r\n <nz-divider class=\"header-divider\"></nz-divider>\r\n\r\n <!-- Cuerpo de Configuraci\u00F3n -->\r\n <div class=\"config-body\">\r\n <!-- PASO PREVIO: Si es un widget nuevo y a\u00FAn no seleccion\u00F3 gr\u00E1fico -->\r\n @if (isNewWidget && !selectedChartType) {\r\n <div class=\"step-select-prompt\">\r\n <div class=\"prompt-header\">\r\n <span nz-icon nzType=\"appstore-add\" nzTheme=\"outline\" class=\"prompt-icon\"></span>\r\n <h4 nz-typography>Paso 1: Elige un Gr\u00E1fico para Construir</h4>\r\n <p nz-typography class=\"prompt-desc\">\r\n Selecciona el tipo de gr\u00E1fico que deseas desplegar en este widget para configurar sus m\u00E9tricas y estilos.\r\n </p>\r\n </div>\r\n\r\n <div class=\"chart-options-grid\">\r\n @for (item of availableChartTypes; track item.value) {\r\n <div class=\"chart-choice-card\" (click)=\"onChartTypeSelected(item.value)\">\r\n <div class=\"choice-icon-wrap\" [style.color]=\"item.iconColor\">\r\n <span nz-icon [nzType]=\"item.icon\" nzTheme=\"outline\"></span>\r\n </div>\r\n <div class=\"choice-content\">\r\n <span class=\"choice-title\">{{ item.label }}</span>\r\n <span class=\"choice-desc\">{{ item.description }}</span>\r\n </div>\r\n <span nz-icon nzType=\"arrow-right\" class=\"choice-arrow\"></span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- RENDERIZADO DEL COMPONENTE DE CONFIGURACI\u00D3N DEL GR\u00C1FICO SELECCIONADO -->\r\n @if (selectedChartType) {\r\n <div class=\"chart-config-host\">\r\n <!-- Gr\u00E1fico de Barras -->\r\n @if (selectedChartType === 'chart-bar') {\r\n <yw-bar-chart-config\r\n [config]=\"currentControlConfig\"\r\n [chartData]=\"currentControlData\"\r\n [idComponent]=\"widgetConfig.widgetId\"\r\n [configSelect]=\"configSelect\"\r\n (configChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onChangeSelect($event)\"\r\n >\r\n </yw-bar-chart-config>\r\n }\r\n\r\n <!-- Gr\u00E1fico de L\u00EDneas -->\r\n @if (selectedChartType === 'chart-line') {\r\n <yw-line-chart-config\r\n [config]=\"currentControlConfig\"\r\n [chartData]=\"currentControlData\"\r\n [idComponent]=\"widgetConfig.widgetId\"\r\n [configSelect]=\"configSelect\"\r\n (configChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onChangeSelect($event)\"\r\n >\r\n </yw-line-chart-config>\r\n }\r\n\r\n <!-- Gr\u00E1fico Circular / Pie / Doughnut -->\r\n @if (selectedChartType === 'chart-doughnut' || selectedChartType === 'chart-pie') {\r\n <yw-pie-chart-config\r\n [config]=\"currentControlConfig\"\r\n [chartData]=\"currentControlData\"\r\n [idComponent]=\"widgetConfig.widgetId\"\r\n [configSelect]=\"configSelect\"\r\n (configChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onChangeSelect($event)\"\r\n >\r\n </yw-pie-chart-config>\r\n }\r\n\r\n <!-- Gr\u00E1fico Tac\u00F3metro / Gauge -->\r\n @if (selectedChartType === 'chart-gauge') {\r\n <yw-gauge-chart-config\r\n [config]=\"currentControlConfig\"\r\n [chartData]=\"currentControlData\"\r\n [configSelect]=\"configSelect\"\r\n [idComponent]=\"widgetConfig.widgetId\"\r\n (configChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onChangeSelect($event)\"\r\n >\r\n </yw-gauge-chart-config>\r\n }\r\n\r\n <!-- Gr\u00E1fico de Burbujas -->\r\n @if (selectedChartType === 'chart-bubble') {\r\n <yw-bubble-chart-config\r\n [config]=\"currentControlConfig\"\r\n [chartData]=\"currentControlData\"\r\n [idComponent]=\"widgetConfig.widgetId\"\r\n [configSelect]=\"configSelect\"\r\n (configChange)=\"onConfigUpdated($event)\"\r\n (axisSelect)=\"onChangeSelect($event)\"\r\n >\r\n </yw-bubble-chart-config>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- MODAL / SUPERPOSICI\u00D3N DEL \u00C1RBOL SELECTOR DE COLUMNAS -->\r\n <!-- @if (configSelect?.onModal) {\r\n <div class=\"tree-filter-modal-backdrop\">\r\n <div class=\"tree-filter-modal-container\">\r\n <yw-tree-table-filter\r\n [configData]=\"treeConfigData\"\r\n [configSelect]=\"configSelect\"\r\n (selectconfigSelect)=\"onColumnSelectedFromTree($event)\"\r\n >\r\n </yw-tree-table-filter>\r\n </div>\r\n </div>\r\n } -->\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;box-sizing:border-box;font-family:manrope,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:#2d3144}.dashboard-widget-config-root{display:flex;flex-direction:column;height:100%;width:100%}.config-header{padding:16px 20px 8px;background-color:#fff;flex-shrink:0}.config-header .config-header-info{margin-bottom:14px}.config-header .config-header-info .config-header-title-row{display:flex;align-items:center;gap:10px}.config-header .config-header-info .config-header-title-row .drawer-title{margin:0;font-size:18px;font-weight:700;color:#1e293b;letter-spacing:-.01em}.config-header .config-header-info .config-header-title-row .widget-tag{font-size:12px;font-weight:600;border-radius:4px;padding:1px 8px}.config-header .config-header-info .drawer-subtitle{margin:4px 0 0;font-size:13px;color:#64748b}.config-header .chart-selector-container{display:flex;flex-direction:column;gap:6px}.config-header .chart-selector-container .selector-label{font-size:13px;font-weight:600;color:#334155}.config-header .chart-selector-container .chart-type-select{width:100%}.config-header .chart-selector-container .chart-type-select ::ng-deep .ant-select-selector{height:42px!important;display:flex!important;align-items:center!important;border-radius:8px!important;border-color:#cbd5e1!important;box-shadow:0 1px 2px #0000000a!important;padding:0 12px!important;transition:all .2s ease-in-out}.config-header .chart-selector-container .chart-type-select ::ng-deep .ant-select-selector:hover{border-color:#028989!important}.config-header .chart-selector-container .chart-type-select ::ng-deep .ant-select-selection-item{display:flex!important;align-items:center!important;height:100%!important;line-height:normal!important;padding:0!important;opacity:1!important;color:inherit!important}.config-header .chart-selector-container .chart-type-select ::ng-deep .ant-select-selection-placeholder{display:flex!important;align-items:center!important;height:100%!important;line-height:normal!important}.config-header .chart-selector-container .chart-type-select ::ng-deep .ant-select-arrow{color:#64748b}.config-header .chart-selector-container .chart-type-select.ant-select-focused ::ng-deep .ant-select-selector,.config-header .chart-selector-container .chart-type-select.ant-select-open ::ng-deep .ant-select-selector{border-color:#028989!important;box-shadow:0 0 0 2px #10b98126!important}.select-option-item,.select-selected-item{display:inline-flex;align-items:center;gap:10px;width:100%;height:100%}.select-option-item .option-icon,.select-option-item .selected-icon,.select-selected-item .option-icon,.select-selected-item .selected-icon{font-size:18px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.select-option-item .option-label,.select-option-item .selected-label,.select-selected-item .option-label,.select-selected-item .selected-label{font-size:14px;font-weight:500;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-divider{margin:8px 0 0}.config-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}.step-select-prompt{display:flex;flex-direction:column;gap:20px;padding:10px 0}.step-select-prompt .prompt-header{text-align:center;padding:12px 16px;background:#fff;border-radius:12px;border:1px dashed #cbd5e1}.step-select-prompt .prompt-header .prompt-icon{font-size:36px;color:#028989;margin-bottom:8px}.step-select-prompt .prompt-header h4{margin:0 0 4px;font-size:16px;font-weight:700;color:#0f172a}.step-select-prompt .prompt-header .prompt-desc{margin:0;font-size:13px;color:#64748b}.step-select-prompt .chart-options-grid{display:flex;flex-direction:column;gap:12px}.step-select-prompt .chart-choice-card{display:flex;align-items:center;gap:16px;padding:14px 18px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;cursor:pointer;transition:all .25s ease-in-out;box-shadow:0 1px 3px #00000008}.step-select-prompt .chart-choice-card:hover{border-color:#028989;background:#f0fdfa;transform:translateY(-2px);box-shadow:0 4px 12px #0289891f}.step-select-prompt .chart-choice-card:hover .choice-arrow{transform:translate(4px);color:#028989}.step-select-prompt .chart-choice-card .choice-icon-wrap{width:44px;height:44px;border-radius:8px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}.step-select-prompt .chart-choice-card .choice-content{flex:1 1 auto;display:flex;flex-direction:column;gap:2px}.step-select-prompt .chart-choice-card .choice-content .choice-title{font-size:14px;font-weight:700;color:#1e293b}.step-select-prompt .chart-choice-card .choice-content .choice-desc{font-size:12px;color:#64748b;line-height:1.4}.step-select-prompt .chart-choice-card .choice-arrow{font-size:16px;color:#94a3b8;transition:transform .2s ease,color .2s ease;flex-shrink:0}.chart-config-host{margin-top:10px;width:100%}.bubble-placeholder-card{padding:16px 0}.tree-filter-modal-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0f172a73;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1050;display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeInModal .2s ease-out}.tree-filter-modal-backdrop .tree-filter-modal-container{width:100%;max-width:540px;background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;overflow:hidden;border:1px solid #e2e8f0;animation:scaleInModal .2s cubic-bezier(.16,1,.3,1)}@keyframes fadeInModal{0%{opacity:0}to{opacity:1}}@keyframes scaleInModal{0%{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
7476
7557
  }], propDecorators: { widgetConfig: [{
7477
7558
  type: Input
7478
7559
  }], dashboardData: [{
@@ -7558,7 +7639,6 @@ class YwDashboardComponent {
7558
7639
  this.widgetRemoved = new EventEmitter();
7559
7640
  }
7560
7641
  ngOnInit() {
7561
- // console.log("DATA QUE LLEGA AL DASHBOARD:",this.dashboardConfig)
7562
7642
  }
7563
7643
  closeModal() {
7564
7644
  this.configSelect = {