yw-charts-library 0.0.6 → 0.0.8

package/fesm2022/yw-charts-library.mjs

@@ -147,7 +147,9 @@ const AVAILABLE_CHART_TYPES = [
             title: 'Nuevo Gráfico de Barras',
             xLabelText: 'Categoría',
             yLabelText: 'Total',
+            joins: true,
             configData: {
+                configJoins: [],
                 tooltip: { enable: true },
                 xAxis: '',
                 yAxis: ''
@@ -165,7 +167,9 @@ const AVAILABLE_CHART_TYPES = [
             title: 'Nuevo Gráfico de Líneas',
             xLabelText: 'Periodo',
             yLabelText: 'Monto',
+            joins: true,
             configData: {
+                configJoins: [],
                 tooltip: { enable: true },
                 xAxis: '',
                 yAxis: ''
@@ -188,7 +192,9 @@ const AVAILABLE_CHART_TYPES = [
             labelPosition: 'Outside',
             valueDisplayMode: 'percentage',
             explodeSlice: false,
+            joins: true,
             configData: {
+                configJoins: [],
                 tooltip: { enable: true },
                 xAxis: '',
                 yAxis: ''
@@ -211,7 +217,9 @@ const AVAILABLE_CHART_TYPES = [
             startAngle: 240,
             endAngle: 120,
             showTicks: true,
+            joins: true,
             configData: {
+                configJoins: [],
                 tooltip: { enable: true },
                 yAxis: ''
             }
@@ -229,7 +237,9 @@ const AVAILABLE_CHART_TYPES = [
             xLabelText: 'Categoría',
             yLabelText: 'Total',
             opacity: '0.5',
+            joins: true,
             configData: {
+                configJoins: [],
                 tooltip: { enable: true },
                 xAxis: '',
                 yAxis: ''
@@ -1066,15 +1076,25 @@ class LineChartSyncfusionComponent {
             if (this.dataLabel && this.labelData) {
                 this.labelData.dataLabel = this.dataLabel;
             }
-            this.cdr.markForCheck();
-            // 2. Encendemos el gráfico en el siguiente ciclo con los datos listos
-            setTimeout(() => {
-                // Validamos que existan series válidas para pintar
-                if (this.dataChartParse && this.dataChartParse.length > 0) {
+            // 2. Verificamos si hay datos válidos antes de encender la bandera
+            const hasValidData = this.validSeriesList.length > 0;
+            if (!hasValidData) {
+                this.isChartReady = false;
+                this.cdr.markForCheck();
+                return;
+            }
+            // 3. Si ya estaba listo, solo actualizamos sin desmontar para que sea instantáneo
+            if (this.isChartReady) {
+                this.cdr.markForCheck();
+            }
+            else {
+                // 4. Si estaba apagado, lo encendemos en el próximo microciclo del navegador 
+                // usando requestAnimationFrame para evitar el error de Syncfusion y que cargue fluido
+                requestAnimationFrame(() => {
                     this.isChartReady = true;
                     this.cdr.markForCheck();
-                }
-            });
+                });
+            }
         }
     }
     // Mantén tu getter de validSeriesList intacto
@@ -1093,7 +1113,7 @@ class LineChartSyncfusionComponent {
             DateTimeService,
             MultiColoredLineSeriesService,
             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 #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" }] }); }
+        ], 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: LineChartSyncfusionComponent, decorators: [{
             type: Component,
@@ -1105,7 +1125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         DateTimeService,
                         MultiColoredLineSeriesService,
                         DataLabelService,
-                    ], 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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { chartInstance: [{
                 type: ViewChild,
                 args: ['chart']
@@ -1645,6 +1665,7 @@ class BarChartSyncfusionComponent {
     }
     ngOnInit() {
         this.updateParsedData();
+        console.log('config::::', this.config);
     }
     ngOnChanges(changes) {
         if (changes['chartData'] || changes['config']) {
@@ -1822,15 +1843,25 @@ class BarChartSyncfusionComponent {
             if (this.dataLabel && this.labelData) {
                 this.labelData.dataLabel = this.dataLabel;
             }
-            this.cdr.markForCheck();
-            // 2. Encendemos el gráfico en el siguiente ciclo con los datos listos
-            setTimeout(() => {
-                // Validamos que existan series válidas para pintar
-                if (this.dataChartParse && this.dataChartParse.length > 0) {
+            // 2. Verificamos si hay datos válidos antes de encender la bandera
+            const hasValidData = this.validSeriesList.length > 0;
+            if (!hasValidData) {
+                this.isChartReady = false;
+                this.cdr.markForCheck();
+                return;
+            }
+            // 3. Si ya estaba listo, solo actualizamos sin desmontar para que sea instantáneo
+            if (this.isChartReady) {
+                this.cdr.markForCheck();
+            }
+            else {
+                // 4. Si estaba apagado, lo encendemos en el próximo microciclo del navegador 
+                // usando requestAnimationFrame para evitar el error de Syncfusion y que cargue fluido
+                requestAnimationFrame(() => {
                     this.isChartReady = true;
                     this.cdr.markForCheck();
-                }
-            });
+                });
+            }
         }
     }
     // Mantén tu getter de validSeriesList intacto
@@ -1847,7 +1878,7 @@ class BarChartSyncfusionComponent {
             CategoryService,
             TooltipService,
             LegendService,
-        ], 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" }] }); }
+        ], 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BarChartSyncfusionComponent, decorators: [{
             type: Component,
@@ -1857,7 +1888,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         CategoryService,
                         TooltipService,
                         LegendService,
-                    ], 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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { chartInstance: [{
                 type: ViewChild,
                 args: ['chart']
@@ -4053,15 +4084,25 @@ class BubbleChartSyncfusionComponent {
             if (this.dataLabel && this.labelData) {
                 this.labelData.dataLabel = this.dataLabel;
             }
-            this.cdr.markForCheck();
-            // 2. Encendemos el gráfico en el siguiente ciclo con los datos listos
-            setTimeout(() => {
-                // Validamos que existan series válidas para pintar
-                if (this.dataChartParse && this.dataChartParse.length > 0) {
+            // 2. Verificamos si hay datos válidos antes de encender la bandera
+            const hasValidData = this.validSeriesList.length > 0;
+            if (!hasValidData) {
+                this.isChartReady = false;
+                this.cdr.markForCheck();
+                return;
+            }
+            // 3. Si ya estaba listo, solo actualizamos sin desmontar para que sea instantáneo
+            if (this.isChartReady) {
+                this.cdr.markForCheck();
+            }
+            else {
+                // 4. Si estaba apagado, lo encendemos en el próximo microciclo del navegador 
+                // usando requestAnimationFrame para evitar el error de Syncfusion y que cargue fluido
+                requestAnimationFrame(() => {
                     this.isChartReady = true;
                     this.cdr.markForCheck();
-                }
-            });
+                });
+            }
         }
     }
     // Mantén tu getter de validSeriesList intacto
@@ -4075,14 +4116,14 @@ class BubbleChartSyncfusionComponent {
     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,
             TooltipService,
             LegendService,
-            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" }] }); }
+            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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BubbleChartSyncfusionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yw-bubble-chart-syncfusion', standalone: true, imports: [CommonModule, ChartModule], providers: [BubbleSeriesService, CategoryService, CategoryService,
                         TooltipService,
                         LegendService,
-                        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"] }]
+                        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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { chartInstance: [{
                 type: ViewChild,
                 args: ['chart']
@@ -4956,13 +4997,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                 type: Input
             }], filterSelectionChange: [{ type: i0.Output, args: ["filterSelectionChange"] }] } });
 
-class BarChartConfigSyncfusionComponent {
+class BarChartConfigComponent {
     constructor(fb, modal) {
         this.fb = fb;
         this.modal = modal;
         this.chartData = [];
         this.idComponent = '';
-        this.seriesConfigChange = new EventEmitter();
+        this.configChange = new EventEmitter();
         this.axisSelect = new EventEmitter();
         // Opciones para los selects
         this.providerOptions = ['syncfusion', 'echarts', 'chartjs'];
@@ -5128,7 +5169,7 @@ class BarChartConfigSyncfusionComponent {
                     y2Axis: formValues?.configData?.y2Axis,
                 }
             };
-            this.seriesConfigChange.emit(this.config);
+            this.configChange.emit(this.config);
         }
         else {
             Object.values(this.configForm.controls).forEach(control => {
@@ -5146,7 +5187,7 @@ class BarChartConfigSyncfusionComponent {
             const configInitial = JSON.parse(savedData);
             this.config = configInitial;
             this.initForm();
-            this.seriesConfigChange.emit(configInitial);
+            this.configChange.emit(configInitial);
         }
     }
     saveLocalStorage() {
@@ -5217,12 +5258,12 @@ class BarChartConfigSyncfusionComponent {
     handleFormSubmit(updatedConfig) {
         this.config = updatedConfig;
     }
-    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 }); }
-    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: "<nz-card [nzTitle]=\"cardTitleTemplate\" [nzExtra]=\"cardExtraTemplate\" class=\"main-container-card shadow-sm\">\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                <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</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>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: "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"] }] }); }
+    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 }); }
+    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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BarChartConfigSyncfusionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BarChartConfigComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yw-bar-chart-config-syncfusion', standalone: true, imports: [
+            args: [{ selector: 'yw-bar-chart-config', standalone: true, imports: [
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
@@ -5238,65 +5279,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         NzIconModule,
                         NzTagComponent,
                         NzTooltipModule,
-                    ], template: "<nz-card [nzTitle]=\"cardTitleTemplate\" [nzExtra]=\"cardExtraTemplate\" class=\"main-container-card shadow-sm\">\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                <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</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>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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$1.NzModalService }], propDecorators: { config: [{
                 type: Input
             }], chartData: [{
                 type: Input
             }], idComponent: [{
                 type: Input
-            }], seriesConfigChange: [{
-                type: Output
-            }], configSelect: [{
-                type: Input
-            }], axisSelect: [{
-                type: Output
-            }] } });
-
-class BarChartConfigComponent {
-    constructor() {
-        this.idComponent = '';
-        this.configChange = new EventEmitter();
-        this.axisSelect = new EventEmitter();
-    }
-    ngOnInit() {
-        // console.log('chartData:', this.chartData);
-        // console.log('config -<- config:', this.config);
-    }
-    onConfigUpdated(updatedConfig) {
-        this.configChange.emit({ ...updatedConfig });
-    }
-    onColumnSelector(updatedAxis) {
-        this.axisSelect.emit(updatedAxis);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BarChartConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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: [
-            BarSeriesService,
-            CategoryService,
-            TooltipService,
-            LegendService,
-        ], 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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BarChartConfigComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yw-bar-chart-config', standalone: true, imports: [
-                        CommonModule,
-                        BarChartConfigSyncfusionComponent
-                    ], providers: [
-                        BarSeriesService,
-                        CategoryService,
-                        TooltipService,
-                        LegendService,
-                    ], 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<!-- } -->" }]
-        }], propDecorators: { chartData: [{
-                type: Input,
-                args: ['chartData']
-            }], config: [{
-                type: Input,
-                args: ['config']
-            }], idComponent: [{
-                type: Input,
-                args: ['idComponent']
             }], configChange: [{
                 type: Output
             }], configSelect: [{
@@ -5305,13 +5294,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                 type: Output
             }] } });
 
-class LineChartConfigSyncfusionComponent {
+// import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+// import { CommonModule } from '@angular/common';
+// import {YwBarMappingConfig } from '../../../../../models/config/chart/yw-bar-chart-config.interface';
+// import { TableWithColumns } from '../../../../../models/base/yw-component-base.interface';
+// import {
+//   BarSeriesService,
+//   CategoryService,
+//   TooltipService,
+//   LegendService,
+// } from '@syncfusion/ej2-angular-charts';
+// import { BarChartConfigSyncfusionComponent } from '../../../../../adapters/charts/bar-chart/syncfusion/config/yw-bar-chart-config-syncfusion.component';
+// import { LineChartConfigSyncfusionComponent } from '../../../../../adapters/charts/line-chart/syncfusion/config/yw-line-chart-config-syncfusion.component';
+// @Component({
+//   selector: 'yw-line-chart-config',
+//   standalone: true,
+//   imports: [
+//     LineChartConfigSyncfusionComponent
+// ],
+//   providers: [
+//     BarSeriesService,
+//     CategoryService,
+//     TooltipService,
+//     LegendService,
+//   ],
+//   templateUrl: './yw-line-chart-config.component.html',
+//   styleUrl: './yw-line-chart-config.component.scss',
+// })
+// export class LineChartConfigComponent {
+//   @Input('chartData') chartData!: any;
+//   @Input('config') config!: YwBarMappingConfig;
+//   @Input('idComponent') idComponent: string=''
+//   @Output() configChange = new EventEmitter<YwBarMappingConfig>();
+//   @Input() configSelect?: TableWithColumns;
+//   @Output() axisSelect = new EventEmitter<TableWithColumns>();
+//   ngOnInit(): void {
+//     // console.log('chartData:', this.chartData);
+//     // console.log('config -<- config:', this.config);
+//   }
+//   onConfigUpdated(updatedConfig: YwBarMappingConfig) {
+//     this.configChange.emit({ ...updatedConfig });
+//   }
+//   onColumnSelector(updatedAxis:TableWithColumns){
+//     this.axisSelect.emit(updatedAxis)
+//   }
+// }
+class LineChartConfigComponent {
     constructor(fb, modal) {
         this.fb = fb;
         this.modal = modal;
         this.chartData = [];
         this.idComponent = '';
-        this.seriesConfigChange = new EventEmitter();
+        this.configChange = new EventEmitter();
         this.axisSelect = new EventEmitter();
         // Opciones para los selects
         this.providerOptions = ['syncfusion', 'echarts', 'chartjs'];
@@ -5465,7 +5499,7 @@ class LineChartConfigSyncfusionComponent {
                     y2Axis: formValues?.configData?.y2Axis,
                 }
             };
-            this.seriesConfigChange.emit(this.config);
+            this.configChange.emit(this.config);
         }
         else {
             Object.values(this.configForm.controls).forEach(control => {
@@ -5483,7 +5517,7 @@ class LineChartConfigSyncfusionComponent {
             const configInitial = JSON.parse(savedData);
             this.config = configInitial;
             this.initForm();
-            this.seriesConfigChange.emit(configInitial);
+            this.configChange.emit(configInitial);
         }
     }
     saveLocalStorage() {
@@ -5542,12 +5576,12 @@ class LineChartConfigSyncfusionComponent {
     clearField(targetField) {
         this.configForm.get('configData')?.get(targetField)?.setValue('');
     }
-    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 }); }
-    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 shadow-sm\">\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</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>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: "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"] }] }); }
+    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 }); }
+    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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: LineChartConfigSyncfusionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: LineChartConfigComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yw-line-chart-config-syncfusion', standalone: true, imports: [
+            args: [{ selector: 'yw-line-chart-config', standalone: true, imports: [
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
@@ -5564,64 +5598,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         NzTagComponent,
                         NzTooltipModule,
                         // NzDividerComponent
-                    ], template: "<nz-card [nzTitle]=\"cardTitleTemplate\" [nzExtra]=\"cardExtraTemplate\" class=\"main-container-card shadow-sm\">\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</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>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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$1.NzModalService }], propDecorators: { config: [{
                 type: Input
             }], chartData: [{
                 type: Input
             }], idComponent: [{
                 type: Input
-            }], seriesConfigChange: [{
-                type: Output
-            }], configSelect: [{
-                type: Input
-            }], axisSelect: [{
-                type: Output
-            }] } });
-
-class LineChartConfigComponent {
-    constructor() {
-        this.idComponent = '';
-        this.configChange = new EventEmitter();
-        this.axisSelect = new EventEmitter();
-    }
-    ngOnInit() {
-        // console.log('chartData:', this.chartData);
-        // console.log('config -<- config:', this.config);
-    }
-    onConfigUpdated(updatedConfig) {
-        this.configChange.emit({ ...updatedConfig });
-    }
-    onColumnSelector(updatedAxis) {
-        this.axisSelect.emit(updatedAxis);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: LineChartConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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: [
-            BarSeriesService,
-            CategoryService,
-            TooltipService,
-            LegendService,
-        ], 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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: LineChartConfigComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yw-line-chart-config', standalone: true, imports: [
-                        LineChartConfigSyncfusionComponent
-                    ], providers: [
-                        BarSeriesService,
-                        CategoryService,
-                        TooltipService,
-                        LegendService,
-                    ], 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<!-- } -->" }]
-        }], propDecorators: { chartData: [{
-                type: Input,
-                args: ['chartData']
-            }], config: [{
-                type: Input,
-                args: ['config']
-            }], idComponent: [{
-                type: Input,
-                args: ['idComponent']
             }], configChange: [{
                 type: Output
             }], configSelect: [{
@@ -5685,6 +5668,7 @@ class PieChartConfigComponent {
         this.title = 'Configuración del Gráfico Pie';
         // ── Outputs ────────────────────────────────────────────────────────────────
         this.configChange = new EventEmitter();
+        this.idComponent = '';
         this.showJsonPreview = false;
         // Listas de opciones
         this.pieVariants = pieVariants;
@@ -5713,6 +5697,27 @@ class PieChartConfigComponent {
         this.debounceSubject.pipe(debounceTime$1(200), takeUntil$1(this.destroy$)).subscribe(() => {
             this.emitConfig();
         });
+        this.saveLocalStorage();
+    }
+    saveLocalStorage() {
+        const key = this.idComponent;
+        if (!localStorage.getItem(key)) {
+            // Como no existe, lo guardamos por primera vez
+            localStorage.setItem(key, JSON.stringify(this.config));
+        }
+        else {
+            console.log("Ya existe un registro previo, no se sobrescribe.");
+        }
+    }
+    restarConfig() {
+        const key = this.idComponent;
+        const savedData = localStorage.getItem(key);
+        if (savedData) {
+            const configInitial = JSON.parse(savedData);
+            this.config = configInitial;
+            // this.initForm();
+            this.configChange.emit(configInitial);
+        }
     }
     ngOnChanges(changes) {
         if (changes['config'] && this.config) {
@@ -6058,7 +6063,7 @@ class PieChartConfigComponent {
         this.onFieldChangeImmediate();
     }
     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 }); }
-    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: "<nz-card [nzTitle]=\"configCardTitle\" [nzExtra]=\"configCardExtra\" class=\"pie-config-card\">\r\n\r\n  <!-- T\u00EDtulo interno del card -->\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</nz-card>", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.pie-config-card{border-radius:10px;box-shadow:0 2px 8px #00000014;background:#fff}.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: "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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: PieChartConfigComponent, decorators: [{
             type: Component,
@@ -6079,7 +6084,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         NzIconModule,
                         NzDividerModule,
                         PieChartComponent,
-                    ], template: "<nz-card [nzTitle]=\"configCardTitle\" [nzExtra]=\"configCardExtra\" class=\"pie-config-card\">\r\n\r\n  <!-- T\u00EDtulo interno del card -->\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</nz-card>", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.pie-config-card{border-radius:10px;box-shadow:0 2px 8px #00000014;background:#fff}.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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i2$1.NzModalService }], propDecorators: { chartData: [{
                 type: Input,
                 args: ['chartData']
@@ -6100,6 +6105,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                 type: Input
             }], configChange: [{
                 type: Output
+            }], idComponent: [{
+                type: Input
             }] } });
 
 const gaugeVariants = [
@@ -6201,6 +6208,7 @@ class GaugeChartConfigComponent {
         this.previewHeight = '380px';
         /** Título del card del panel de configuración */
         this.title = 'Configuración del Gráfico Gauge';
+        this.idComponent = '';
         // ── Outputs ────────────────────────────────────────────────────────────────
         this.configChange = new EventEmitter();
         this.showJsonPreview = false;
@@ -6225,6 +6233,27 @@ class GaugeChartConfigComponent {
         this.debounceSubject.pipe(debounceTime$1(200), takeUntil$1(this.destroy$)).subscribe(() => {
             this.emitConfig();
         });
+        this.saveLocalStorage();
+    }
+    saveLocalStorage() {
+        const key = this.idComponent;
+        if (!localStorage.getItem(key)) {
+            // Como no existe, lo guardamos por primera vez
+            localStorage.setItem(key, JSON.stringify(this.config));
+        }
+        else {
+            console.log("Ya existe un registro previo, no se sobrescribe.");
+        }
+    }
+    restarConfig() {
+        const key = this.idComponent;
+        const savedData = localStorage.getItem(key);
+        if (savedData) {
+            const configInitial = JSON.parse(savedData);
+            this.config = configInitial;
+            // this.initForm();
+            this.configChange.emit(configInitial);
+        }
     }
     ngOnChanges(changes) {
         console.log('VISUAL config:', this.config?.configData, 'data:', this.chartData);
@@ -6585,7 +6614,7 @@ class GaugeChartConfigComponent {
         this.configChange.emit(out);
     }
     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 }); }
-    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: "<nz-card [nzTitle]=\"configCardTitle\" [nzExtra]=\"configCardExtra\" class=\"gauge-config-card\">\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</nz-card>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.gauge-config-card{border-radius:10px;box-shadow:0 2px 8px #00000014;background:#fff}.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{background-color:#f8fafc!important;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: "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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: GaugeChartConfigComponent, decorators: [{
             type: Component,
@@ -6605,7 +6634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         NzDividerModule,
                         NzModalModule,
                         GaugeChartComponent,
-                    ], template: "<nz-card [nzTitle]=\"configCardTitle\" [nzExtra]=\"configCardExtra\" class=\"gauge-config-card\">\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</nz-card>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.gauge-config-card{border-radius:10px;box-shadow:0 2px 8px #00000014;background:#fff}.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{background-color:#f8fafc!important;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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i2$1.NzModalService }], propDecorators: { chartData: [{
                 type: Input,
                 args: ['chartData']
@@ -6624,17 +6653,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                 type: Input
             }], title: [{
                 type: Input
+            }], idComponent: [{
+                type: Input
             }], configChange: [{
                 type: Output
             }] } });
 
-class BubbleChartConfigSyncfusionComponent {
+// import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
+// import { CommonModule } from '@angular/common';
+// import { YwBubbleMappingConfig } from '../../../../../models/config/chart/yw-bubble-chart.interface';
+// import { BubbleChartSyncfusionComponent } from '../../../../../adapters/charts/bubble-chart/syncfusion/visual/yw-bubble-chart-sycfusion.component';
+// // import { LineChartSyncfusionComponent } from '../../../../../adapters/charts/line-chart/syncfusion/visual/yw-line-chart-syncfusion.component';
+// // import { YwLineMappingConfig } from '../../../../../models/config/chart/yw-line-chart-config.interface';
+// import { TableWithColumns } from '../../../../../models/base/yw-component-base.interface';
+// import { BubbleChartConfigSyncfusionComponent } from '../../../../../adapters/charts/bubble-chart/syncfusion/config/yw-bubble-chart-config-syncfusion.component';
+// @Component({
+//   selector: 'yw-bubble-chart-config, yw-bubble-char-config',
+//   standalone: true,
+//   imports: [CommonModule, BubbleChartSyncfusionComponent, BubbleChartConfigSyncfusionComponent],
+//   templateUrl: './yw-bubble-chart-config.component.html',
+//   styleUrl: './yw-bubble-chart-config.component.scss',
+// })
+// export class BubbleChartConfigComponent implements OnInit {
+//   @Input('chartData') chartData!: any;
+//   @Input('config') config!: YwBubbleMappingConfig;
+//   @Input('idComponent') idComponent: string=''
+//   @Output() configChange = new EventEmitter<YwBubbleMappingConfig>();
+//   @Input() configSelect?: TableWithColumns;
+//   @Output() axisSelect = new EventEmitter<TableWithColumns>();
+//    ngOnInit(){
+//     // console.log("EL ID DEL COMPONENTE:",this.idComponent)
+//    }
+//   onConfigUpdated(updatedConfig: YwBubbleMappingConfig) {
+//     console.log('updatedConfig segundo nivel:', updatedConfig);
+//     this.configChange.emit({ ...updatedConfig });
+//   }
+//   onColumnSelector(updatedAxis:TableWithColumns){
+//     this.axisSelect.emit(updatedAxis)
+//   }
+// }
+class BubbleChartConfigComponent {
     constructor(fb, modal) {
         this.fb = fb;
         this.modal = modal;
         this.chartData = [];
         this.idComponent = '';
-        this.seriesConfigChange = new EventEmitter();
+        this.configChange = new EventEmitter();
         this.axisSelect = new EventEmitter();
         // Opciones para los selects
         this.providerOptions = ['syncfusion', 'echarts', 'chartjs'];
@@ -6801,7 +6865,7 @@ class BubbleChartConfigSyncfusionComponent {
                 }
             };
             console.log('this.config primer nivel:', this.config);
-            this.seriesConfigChange.emit(this.config);
+            this.configChange.emit(this.config);
         }
         else {
             Object.values(this.configForm.controls).forEach(control => {
@@ -6819,7 +6883,7 @@ class BubbleChartConfigSyncfusionComponent {
             const configInitial = JSON.parse(savedData);
             this.config = configInitial;
             this.initForm();
-            this.seriesConfigChange.emit(configInitial);
+            this.configChange.emit(configInitial);
         }
     }
     saveLocalStorage() {
@@ -6879,12 +6943,12 @@ class BubbleChartConfigSyncfusionComponent {
         console.log(targetField);
         this.configForm.get('configData')?.get(targetField)?.setValue('');
     }
-    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 }); }
-    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 shadow-sm\">\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</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  </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: "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"] }] }); }
+    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 }); }
+    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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BubbleChartConfigSyncfusionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BubbleChartConfigComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yw-bubble-chart-config-syncfusion', standalone: true, imports: [
+            args: [{ selector: 'yw-bubble-chart-config', standalone: true, imports: [
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
@@ -6901,52 +6965,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         NzTagComponent,
                         NzTooltipModule,
                         NzDividerComponent
-                    ], template: "<nz-card [nzTitle]=\"cardTitleTemplate\" [nzExtra]=\"cardExtraTemplate\" class=\"main-container-card shadow-sm\">\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</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  </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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$1.NzModalService }], propDecorators: { config: [{
                 type: Input
             }], chartData: [{
                 type: Input
             }], idComponent: [{
                 type: Input
-            }], seriesConfigChange: [{
-                type: Output
-            }], configSelect: [{
-                type: Input
-            }], axisSelect: [{
-                type: Output
-            }] } });
-
-class BubbleChartConfigComponent {
-    constructor() {
-        this.idComponent = '';
-        this.configChange = new EventEmitter();
-        this.axisSelect = new EventEmitter();
-    }
-    ngOnInit() {
-        // console.log("EL ID DEL COMPONENTE:",this.idComponent)
-    }
-    onConfigUpdated(updatedConfig) {
-        console.log('updatedConfig segundo nivel:', updatedConfig);
-        this.configChange.emit({ ...updatedConfig });
-    }
-    onColumnSelector(updatedAxis) {
-        this.axisSelect.emit(updatedAxis);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BubbleChartConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BubbleChartConfigComponent, decorators: [{
-            type: Component,
-            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"] }]
-        }], propDecorators: { chartData: [{
-                type: Input,
-                args: ['chartData']
-            }], config: [{
-                type: Input,
-                args: ['config']
-            }], idComponent: [{
-                type: Input,
-                args: ['idComponent']
             }], configChange: [{
                 type: Output
             }], configSelect: [{
@@ -7176,6 +7201,7 @@ class YwDashboardWidgetConfigComponent {
     }
     ngOnInit() {
         this.initComponentState();
+        console.log('widgetConfig:::::', this.widgetConfig);
     }
     ngOnChanges(changes) {
         if (changes['widgetConfig'] || changes['dashboardData']) {
@@ -7417,23 +7443,78 @@ class YwDashboardWidgetConfigComponent {
         }
     }
     onChartTypeSelected(newType) {
+        console.log('Se lanzó el cambio:', newType);
         if (!newType)
             return;
+        const typeOption = this.availableChartTypes.find(opt => opt.value === newType);
+        // Detectar si el widget está vacío antes de cambiar su estado
+        const isEmptyWidget = this.widgetConfig?.typeComponent === 'empty-visual' ||
+            this.widgetConfig?.typeComponent === 'dummy';
+        let configToEmit;
+        if (isEmptyWidget) {
+            // CASO 1: Widget vacío.
+            // Crear configuración nueva según el gráfico seleccionado.
+            const initialConfig = typeOption?.defaultConfig
+                ? JSON.parse(JSON.stringify(typeOption.defaultConfig))
+                : {
+                    provider: 'syncfusion',
+                    title: typeOption?.label || ''
+                };
+            // Los joins originales están en widgetConfig.controlConfig
+            const previousConfig = this.widgetConfig?.controlConfig ?? {};
+            const joins = previousConfig['joins'] ?? false;
+            const configJoins = previousConfig['configJoins'] ?? [];
+            configToEmit = {
+                ...initialConfig,
+                joins,
+                configData: {
+                    ...(initialConfig['configData'] ?? {}),
+                    configJoins: [...configJoins],
+                    joins,
+                    xAxis: initialConfig['configData']?.['xAxis'] ?? '',
+                    yAxis: initialConfig['configData']?.['yAxis'] ?? ''
+                }
+            };
+            this.currentControlConfig = configToEmit;
+        }
+        else {
+            // CASO 2: Widget existente.
+            // Mantener su configuración actual sin reconstruirla.
+            configToEmit = this.currentControlConfig;
+        }
+        // Actualizar el estado después de detectar el tipo original
         this.selectedChartType = newType;
         this.isNewWidget = false;
-        const typeOption = this.availableChartTypes.find((opt) => opt.value === newType);
-        const initialConfig = typeOption?.defaultConfig
-            ? JSON.parse(JSON.stringify(typeOption.defaultConfig))
-            : { provider: 'syncfusion', title: typeOption?.label || '' };
-        // Auto-detectamos columnas iniciales basadas en los datos disponibles
-        this.autoDetectColumnsForConfig(newType, initialConfig);
-        this.currentControlConfig = initialConfig;
+        console.log('¿Widget vacío?', isEmptyWidget);
+        console.log('Configuración emitida:', configToEmit);
         this.chartTypeChange.emit({
             widgetId: this.widgetConfig.widgetId,
-            newType: newType,
-            initialConfig: initialConfig
+            newType,
+            initialConfig: configToEmit
         });
     }
+    // public onChartTypeSelected(newType: string): void {
+    //   console.log("Se lanzo el cambio:",newType)
+    //   if (!newType) return;
+    //   this.selectedChartType = newType;
+    //   this.isNewWidget = false;
+    //   const typeOption = this.availableChartTypes.find((opt) => opt.value === newType);
+    //   console.log("typeOption:",typeOption)
+    //   const initialConfig = typeOption?.defaultConfig
+    //     ? JSON.parse(JSON.stringify(typeOption.defaultConfig))
+    //     : { provider: 'syncfusion', title: typeOption?.label || '' };
+    //     // COMENTADO PARA QUE NO ALTERE LA CONFIGURACIÓN DE LOS GRÁFICOS
+    //   // Auto-detectamos columnas iniciales basadas en los datos disponibles
+    //   // this.autoDetectColumnsForConfig(newType, this.currentControlConfig);
+    //   // this.currentControlConfig = this.currentControlConfig;
+    //   // REVISAR QUE CUANDO  NO TENGA DATA OSEA SEA UN GRAFICO NUEVO PASARLE LOS X Y Y
+    //   console.log("this.currentControlConfig,initialConfi",this.currentControlConfig,initialConfig)
+    //   this.chartTypeChange.emit({
+    //     widgetId: this.widgetConfig.widgetId,
+    //     newType: newType,
+    //     initialConfig: this.currentControlConfig 
+    //   });
+    // }
     onConfigUpdated(updatedConfig) {
         this.currentControlConfig = updatedConfig;
         this.configChange.emit({
@@ -7448,7 +7529,7 @@ class YwDashboardWidgetConfigComponent {
         return this.availableChartTypes.find((opt) => opt.value === this.selectedChartType);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwDashboardWidgetConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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;padding:16px 20px 40px;background-color:#f8fafc}.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{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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwDashboardWidgetConfigComponent, decorators: [{
             type: Component,
@@ -7472,7 +7553,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         BubbleChartConfigComponent,
                         // TestColumnSelectorComponent
                         TreeTableFilterComponent
-                    ], 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;padding:16px 20px 40px;background-color:#f8fafc}.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{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"] }]
+                    ], 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"] }]
         }], propDecorators: { widgetConfig: [{
                 type: Input
             }], dashboardData: [{
@@ -7558,7 +7639,6 @@ class YwDashboardComponent {
         this.widgetRemoved = new EventEmitter();
     }
     ngOnInit() {
-        // console.log("DATA QUE LLEGA AL DASHBOARD:",this.dashboardConfig)
     }
     closeModal() {
         this.configSelect = {
@@ -8193,7 +8273,7 @@ class YwDashboardComponent {
         this.emitMacroConfigChange();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwDashboardComponent, deps: [{ token: i0.EnvironmentInjector }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: YwDashboardComponent, isStandalone: true, selector: "yw-dashboard", inputs: { showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, dashboardStyle: { classPropertyName: "dashboardStyle", publicName: "dashboardStyle", isSignal: false, isRequired: false, transformFunction: null }, dashboardConfig: { classPropertyName: "dashboardConfig", publicName: "dashboardConfig", isSignal: false, isRequired: false, transformFunction: null }, dashboardData: { classPropertyName: "dashboardData", publicName: "dashboardData", isSignal: false, isRequired: false, transformFunction: null }, dashboardFilterConfig: { classPropertyName: "dashboardFilterConfig", publicName: "dashboardFilterConfig", isSignal: false, isRequired: false, transformFunction: null }, configData: { classPropertyName: "configData", publicName: "configData", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dashboardConfigChange: "dashboardConfigChange", saveConfig: "saveConfig", widgetConfigChange: "widgetConfigChange", widgetChartTypeChange: "widgetChartTypeChange", widgetAdded: "widgetAdded", widgetRemoved: "widgetRemoved" }, viewQueries: [{ propertyName: "gridContainer", first: true, predicate: ["gridContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <div class=\"controls\" [hidden]=\"!showControls()\">\r\n  <button (click)=\"saveLayoutToJSON()\">Guardar JSON en Consola</button>\r\n   <button (click)=\"fn_btn_addWidget()\">add widget</button>\r\n   <button (click)=\"fn_btn_lockPositionWidgets()\">Lock widgets</button>\r\n   <button (click)=\"handleShowFormFilterDrawer()\" class=\"btn-filtro\">\r\n            <svg *ngIf=\"drawerfiltervisible; else filtroInactivo\" \r\n                xmlns=\"http://www.w3.org/2000/svg\" \r\n                width=\"20\" height=\"20\" \r\n                viewBox=\"0 0 24 24\" \r\n                fill=\"currentColor\">\r\n              <path d=\"M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z\"/>\r\n            </svg>\r\n            <ng-template #filtroInactivo>\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" \r\n                  width=\"20\" height=\"20\" \r\n                  viewBox=\"0 0 24 24\" \r\n                  fill=\"none\" \r\n                  stroke=\"currentColor\" \r\n                  stroke-width=\"2\">\r\n                <polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"/>\r\n              </svg>\r\n            </ng-template>\r\n    </button>\r\n</div> -->\r\n\r\n<div class=\"controls-container\" >\r\n  @if ( showControls() ) { \r\n  <!-- Botones principales con nz-button y tipos de Ant Design -->\r\n  <button nz-button nzType=\"default\" (click)=\"saveLayoutToJSON()\" >\r\n    <span nz-icon nz-type=\"code\"></span> Guardar JSON\r\n  </button>\r\n\r\n  <button nz-button nzType=\"primary\" (click)=\"fn_btn_addWidget()\" >\r\n    <span nz-icon nz-type=\"plus\"></span> A\u00F1adir widget\r\n  </button>\r\n\r\n  <button nz-button [nzType]=\"isLocked ? 'primary' : 'default'\" nzDanger (click)=\"fn_btn_lockPositionWidgets()\" >\r\n    <span nz-icon [nzType]=\"isLocked ? 'lock' : 'unlock'\"></span> \r\n    {{ isLocked ? 'Bloqueado' : 'Bloquear' }}\r\n  </button>\r\n  }\r\n  @if ( showFilter() ) { \r\n  <!-- Bot\u00F3n de filtro con estilo ic\u00F3nico -->\r\n  <button nz-button nzType=\"default\" nzShape=\"circle\" (click)=\"handleShowFormFilterDrawer()\" class=\"btn-filtro\" [class.active]=\"drawerfiltervisible\" >\r\n    <svg *ngIf=\"drawerfiltervisible; else filtroInactivo\" \r\n         xmlns=\"http://www.w3.org/2000/svg\" \r\n         width=\"16\" height=\"16\" \r\n         viewBox=\"0 0 24 24\" \r\n         fill=\"currentColor\">\r\n      <path d=\"M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z\"/>\r\n    </svg>\r\n    <ng-template #filtroInactivo>\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" \r\n           width=\"16\" height=\"16\" \r\n           viewBox=\"0 0 24 24\" \r\n           fill=\"none\" \r\n           stroke=\"currentColor\" \r\n           stroke-width=\"2\">\r\n        <polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"/>\r\n      </svg>\r\n    </ng-template>\r\n  </button>\r\n  }\r\n</div>\r\n<div #gridContainer class=\"grid-stack canvas-container\"\r\n                   [style.--canvas-bg]=\"dashboardStyle.canvasBackgroundColor\"\r\n></div>\r\n\r\n\r\n\r\n\r\n<!-- DRAWER - FILTER  -->\r\n\r\n<nz-drawer\r\n[nzVisible]=\"drawerfiltervisible\"\r\n[nzMaskClosable]=\"false\"\r\nnzPlacement=\"right\"\r\n[nzWidth]=\"fnGetDrawerWidth(50)\"\r\n(nzOnClose)=\"handleCloseFormFilterDrawer()\"\r\n>\r\n<ng-container *nzDrawerContent>\r\n  <div class=\"widget-details-info\">\r\n    <h6 nz-typography>Filtros</h6>\r\n    <yw-dashboard-filter\r\n        [dashboardFilterConfig]=\"dashboardFilterConfig\"\r\n        [dashboardData]=\"dashboardData\"\r\n        (filterSelectionChange)=\"onFilterSelectionChange($event)\"\r\n      >\r\n     </yw-dashboard-filter>\r\n  </div>\r\n\r\n  <!--\r\n  <nz-tabset nzCentered>\r\n    <nz-tab nzTitle=\"Secion de Filtros\">\r\n    <div class=\"controls\">\r\n      aqui botones de control:\r\n\r\n    </div>\r\n    <div>\r\n  \r\n\r\n    </div>\r\n\r\n    </nz-tab>\r\n \r\n  </nz-tabset>\r\n-->\r\n</ng-container>\r\n</nz-drawer>\r\n\r\n\r\n\r\n<!-- DRAWER - CONFIGURACION  -->\r\n<nz-drawer\r\n  [nzVisible]=\"drawerconfigvisible\"\r\n  [nzMaskClosable]=\"false\"\r\n  nzPlacement=\"right\"\r\n  [nzWidth]=\"fnGetDrawerWidth(55)\"\r\n  (nzOnClose)=\"handleCloseFormDrawer()\"\r\n>\r\n  <ng-container *nzDrawerContent>\r\n    @if (selectedWidgetForConfig) {\r\n      <yw-dashboard-widget-config\r\n        [widgetConfig]=\"selectedWidgetForConfig\"\r\n        [dashboardData]=\"dashboardData\"\r\n        (configChange)=\"onWidgetConfigUpdated($event)\"\r\n        (chartTypeChange)=\"onWidgetChartTypeChanged($event)\"\r\n        (closeDrawer)=\"handleCloseFormDrawer()\"\r\n        (axisSelect)=\"onChangeSelect($event)\"\r\n        [configSelect]=\"configSelect\"\r\n\r\n      >\r\n      </yw-dashboard-widget-config>\r\n    }\r\n  </ng-container>\r\n</nz-drawer>\r\n\r\n\r\n\r\n@if (configSelect.onModal) {\r\n  <div class=\"modal-overlay\">\r\n    <div class=\"modal-container\">\r\n      <div class=\"modal-header\">\r\n        <span class=\"modal-title\">\r\n          Explorador de columnas ({{ configSelect.label }})\r\n        </span>\r\n\r\n        <button\r\n          nz-button\r\n          nzType=\"text\"\r\n          nzShape=\"circle\"\r\n          (click)=\"closeModal()\"\r\n          aria-label=\"Cerrar modal\"\r\n        >\r\n          <span nz-icon nzType=\"close\"></span>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"modal-body\">\r\n        <yw-tree-table-filter\r\n          [configData]=\"configData\"\r\n          [configSelect]=\"configSelect\"\r\n          (selectconfigSelect)=\"onChangeSelect($event)\"\r\n        ></yw-tree-table-filter>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.canvas-container{background-color:var(--canvas-bg, #f5f5f5);min-height:500px;padding:10px}::vdeep .card-inner{background:#fff;border:1px solid #ccc;height:100%;display:flex;align-items:center;justify-content:center}:host ::ng-deep .grid-stack-item-content{border-radius:6px;box-shadow:0 2px 5px #0000001a;display:flex;align-items:center;justify-content:center;font-weight:700;overflow:hidden}::ng-deep .grid-stack-item.widget-maximized{position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;z-index:990!important;transform:none!important;margin:0!important;padding:5px}::ng-deep .grid-stack-item.widget-maximized .grid-stack-item-content{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;border:none!important;border-radius:0!important;box-shadow:none!important;background-color:#fff!important;overflow:hidden}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-handle{opacity:0!important;background-image:none!important}.widget-details-info{padding-top:30px;text-align:center}.widget-details-info h6{font-family:manrope,sans-serif;font-size:20px;font-weight:700;line-height:26px;color:#2d3144}.widget-details-info p{font-family:manrope,sans-serif;font-size:14px;font-weight:400;line-height:21px;color:#4b5064}.controls-container{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 16px;background:#fff;border-bottom:1px solid #f0f0f0;box-shadow:0 2px 8px #0000000a;border-radius:6px;margin-bottom:16px;width:100%;box-sizing:border-box;position:sticky;top:0}.controls-container button{white-space:nowrap}.controls-container .btn-filtro{display:inline-flex;align-items:center;justify-content:center;padding:0;width:32px;height:32px;border-radius:50%;transition:all .3s ease}.controls-container .btn-filtro.active{color:#fff;background-color:#1890ff;border-color:#1890ff}.controls-container .btn-filtro.active:hover{background-color:#40a9ff;border-color:#40a9ff}@media(max-width:576px){.controls-container{gap:8px;padding:8px 10px}.controls-container button[nz-button]{font-size:13px;padding:0 10px}}.modal-overlay{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:#00000073}.modal-container{width:500px;max-width:90vw;max-height:90vh;overflow:auto;background:#fff;border-radius:8px;padding:0;box-shadow:0 8px 30px #0003}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #e8e8e8;background-color:#fff;position:sticky;top:0;z-index:1000}.modal-body{padding:16px}.modal-title{font-size:16px;font-weight:600;color:#262626;letter-spacing:.2px;line-height:1.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i2$3.NzDrawerComponent, selector: "nz-drawer", inputs: ["nzContent", "nzCloseIcon", "nzClosable", "nzMaskClosable", "nzMask", "nzCloseOnNavigation", "nzNoAnimation", "nzKeyboard", "nzTitle", "nzExtra", "nzFooter", "nzPlacement", "nzSize", "nzMaskStyle", "nzBodyStyle", "nzWrapClassName", "nzWidth", "nzHeight", "nzZIndex", "nzOffsetX", "nzOffsetY", "nzVisible"], outputs: ["nzOnViewInit", "nzOnClose", "nzVisibleChange"], exportAs: ["nzDrawer"] }, { kind: "directive", type: i2$3.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "ngmodule", type: NzTabsModule }, { 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: 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: "component", type: YwDashboardFilterComponent, selector: "yw-dashboard-filter", inputs: ["dashboardFilterConfig", "dashboardData"], outputs: ["filterSelectionChange"] }, { kind: "component", type: YwDashboardWidgetConfigComponent, selector: "yw-dashboard-widget-config", inputs: ["widgetConfig", "dashboardData", "configSelect"], outputs: ["axisSelect", "configChange", "chartTypeChange", "closeDrawer"] }, { kind: "component", type: TreeTableFilterComponent, selector: "yw-tree-table-filter", inputs: ["configData", "configSelect"], outputs: ["selectconfigSelect"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: YwDashboardComponent, isStandalone: true, selector: "yw-dashboard", inputs: { showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, dashboardStyle: { classPropertyName: "dashboardStyle", publicName: "dashboardStyle", isSignal: false, isRequired: false, transformFunction: null }, dashboardConfig: { classPropertyName: "dashboardConfig", publicName: "dashboardConfig", isSignal: false, isRequired: false, transformFunction: null }, dashboardData: { classPropertyName: "dashboardData", publicName: "dashboardData", isSignal: false, isRequired: false, transformFunction: null }, dashboardFilterConfig: { classPropertyName: "dashboardFilterConfig", publicName: "dashboardFilterConfig", isSignal: false, isRequired: false, transformFunction: null }, configData: { classPropertyName: "configData", publicName: "configData", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dashboardConfigChange: "dashboardConfigChange", saveConfig: "saveConfig", widgetConfigChange: "widgetConfigChange", widgetChartTypeChange: "widgetChartTypeChange", widgetAdded: "widgetAdded", widgetRemoved: "widgetRemoved" }, viewQueries: [{ propertyName: "gridContainer", first: true, predicate: ["gridContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <div class=\"controls\" [hidden]=\"!showControls()\">\r\n  <button (click)=\"saveLayoutToJSON()\">Guardar JSON en Consola</button>\r\n   <button (click)=\"fn_btn_addWidget()\">add widget</button>\r\n   <button (click)=\"fn_btn_lockPositionWidgets()\">Lock widgets</button>\r\n   <button (click)=\"handleShowFormFilterDrawer()\" class=\"btn-filtro\">\r\n            <svg *ngIf=\"drawerfiltervisible; else filtroInactivo\" \r\n                xmlns=\"http://www.w3.org/2000/svg\" \r\n                width=\"20\" height=\"20\" \r\n                viewBox=\"0 0 24 24\" \r\n                fill=\"currentColor\">\r\n              <path d=\"M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z\"/>\r\n            </svg>\r\n            <ng-template #filtroInactivo>\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" \r\n                  width=\"20\" height=\"20\" \r\n                  viewBox=\"0 0 24 24\" \r\n                  fill=\"none\" \r\n                  stroke=\"currentColor\" \r\n                  stroke-width=\"2\">\r\n                <polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"/>\r\n              </svg>\r\n            </ng-template>\r\n    </button>\r\n</div> -->\r\n\r\n<div class=\"controls-container\" >\r\n  @if ( showControls() ) { \r\n  <!-- Botones principales con nz-button y tipos de Ant Design -->\r\n  <button nz-button nzType=\"default\" (click)=\"saveLayoutToJSON()\" >\r\n    <span nz-icon nz-type=\"code\"></span> Guardar JSON\r\n  </button>\r\n\r\n  <button nz-button nzType=\"primary\" (click)=\"fn_btn_addWidget()\" >\r\n    <span nz-icon nz-type=\"plus\"></span> A\u00F1adir widget\r\n  </button>\r\n\r\n  <button nz-button [nzType]=\"isLocked ? 'primary' : 'default'\" nzDanger (click)=\"fn_btn_lockPositionWidgets()\" >\r\n    <span nz-icon [nzType]=\"isLocked ? 'lock' : 'unlock'\"></span> \r\n    {{ isLocked ? 'Bloqueado' : 'Bloquear' }}\r\n  </button>\r\n  }\r\n  @if ( showFilter() ) { \r\n  <!-- Bot\u00F3n de filtro con estilo ic\u00F3nico -->\r\n  <button nz-button nzType=\"default\" nzShape=\"circle\" (click)=\"handleShowFormFilterDrawer()\" class=\"btn-filtro\" [class.active]=\"drawerfiltervisible\" >\r\n    <svg *ngIf=\"drawerfiltervisible; else filtroInactivo\" \r\n         xmlns=\"http://www.w3.org/2000/svg\" \r\n         width=\"16\" height=\"16\" \r\n         viewBox=\"0 0 24 24\" \r\n         fill=\"currentColor\">\r\n      <path d=\"M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z\"/>\r\n    </svg>\r\n    <ng-template #filtroInactivo>\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" \r\n           width=\"16\" height=\"16\" \r\n           viewBox=\"0 0 24 24\" \r\n           fill=\"none\" \r\n           stroke=\"currentColor\" \r\n           stroke-width=\"2\">\r\n        <polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"/>\r\n      </svg>\r\n    </ng-template>\r\n  </button>\r\n  }\r\n</div>\r\n<div #gridContainer class=\"grid-stack canvas-container\"\r\n                   [style.--canvas-bg]=\"dashboardStyle.canvasBackgroundColor\"\r\n></div>\r\n\r\n\r\n\r\n\r\n<!-- DRAWER - FILTER  -->\r\n\r\n<nz-drawer\r\n[nzVisible]=\"drawerfiltervisible\"\r\n[nzMaskClosable]=\"false\"\r\nnzPlacement=\"right\"\r\n[nzWidth]=\"fnGetDrawerWidth(50)\"\r\n(nzOnClose)=\"handleCloseFormFilterDrawer()\"\r\n>\r\n<ng-container *nzDrawerContent>\r\n  <div class=\"widget-details-info\">\r\n    <h6 nz-typography>Filtros</h6>\r\n    <yw-dashboard-filter\r\n        [dashboardFilterConfig]=\"dashboardFilterConfig\"\r\n        [dashboardData]=\"dashboardData\"\r\n        (filterSelectionChange)=\"onFilterSelectionChange($event)\"\r\n      >\r\n     </yw-dashboard-filter>\r\n  </div>\r\n\r\n  <!--\r\n  <nz-tabset nzCentered>\r\n    <nz-tab nzTitle=\"Secion de Filtros\">\r\n    <div class=\"controls\">\r\n      aqui botones de control:\r\n\r\n    </div>\r\n    <div>\r\n  \r\n\r\n    </div>\r\n\r\n    </nz-tab>\r\n \r\n  </nz-tabset>\r\n-->\r\n</ng-container>\r\n</nz-drawer>\r\n\r\n\r\n\r\n<!-- DRAWER - CONFIGURACION  -->\r\n<nz-drawer\r\n  [nzVisible]=\"drawerconfigvisible\"\r\n  [nzMaskClosable]=\"false\"\r\n  nzPlacement=\"right\"\r\n  [nzWidth]=\"fnGetDrawerWidth(55)\"\r\n  (nzOnClose)=\"handleCloseFormDrawer()\"\r\n>\r\n  <ng-container *nzDrawerContent>\r\n    @if (selectedWidgetForConfig) {\r\n      <yw-dashboard-widget-config\r\n        [widgetConfig]=\"selectedWidgetForConfig\"\r\n        [dashboardData]=\"dashboardData\"\r\n        (configChange)=\"onWidgetConfigUpdated($event)\"\r\n        (chartTypeChange)=\"onWidgetChartTypeChanged($event)\"\r\n        (closeDrawer)=\"handleCloseFormDrawer()\"\r\n        (axisSelect)=\"onChangeSelect($event)\"\r\n        [configSelect]=\"configSelect\"\r\n\r\n      >\r\n      </yw-dashboard-widget-config>\r\n    }\r\n  </ng-container>\r\n</nz-drawer>\r\n\r\n\r\n\r\n@if (configSelect.onModal) {\r\n  <div class=\"modal-overlay\">\r\n    <div class=\"modal-container\">\r\n      <div class=\"modal-header\">\r\n        <span class=\"modal-title\">\r\n          Explorador de columnas ({{ configSelect.label }})\r\n        </span>\r\n\r\n        <button\r\n          nz-button\r\n          nzType=\"text\"\r\n          nzShape=\"circle\"\r\n          (click)=\"closeModal()\"\r\n          aria-label=\"Cerrar modal\"\r\n        >\r\n          <span nz-icon nzType=\"close\"></span>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"modal-body\">\r\n        <yw-tree-table-filter\r\n          [configData]=\"configData\"\r\n          [configSelect]=\"configSelect\"\r\n          (selectconfigSelect)=\"onChangeSelect($event)\"\r\n        ></yw-tree-table-filter>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.canvas-container{background-color:var(--canvas-bg, #f5f5f5);min-height:500px;padding:10px}::vdeep .card-inner{background:#fff;border:1px solid #ccc;height:100%;display:flex;align-items:center;justify-content:center}:host ::ng-deep .grid-stack-item-content{border-radius:6px;box-shadow:0 2px 5px #0000001a;display:flex;align-items:center;justify-content:center;font-weight:700;overflow:hidden}::ng-deep .grid-stack-item.widget-maximized{position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;z-index:990!important;transform:none!important;margin:0!important;padding:5px}::ng-deep .grid-stack-item.widget-maximized .grid-stack-item-content{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;border:none!important;border-radius:0!important;box-shadow:none!important;background-color:#fff!important;overflow:hidden}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-handle{opacity:0!important;background-image:none!important}.widget-details-info{padding-top:30px;text-align:center}.widget-details-info h6{font-family:manrope,sans-serif;font-size:20px;font-weight:700;line-height:26px;color:#2d3144}.widget-details-info p{font-family:manrope,sans-serif;font-size:14px;font-weight:400;line-height:21px;color:#4b5064}.controls-container{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #f0f0f0;box-shadow:0 2px 8px #0000000a;border-radius:6px;margin-bottom:16px;width:100%;box-sizing:border-box;position:sticky;top:0}.controls-container button{white-space:nowrap}.controls-container .btn-filtro{display:inline-flex;align-items:center;justify-content:center;padding:0;width:32px;height:32px;border-radius:50%;transition:all .3s ease}.controls-container .btn-filtro.active{color:#fff;background-color:#1890ff;border-color:#1890ff}.controls-container .btn-filtro.active:hover{background-color:#40a9ff;border-color:#40a9ff}@media(max-width:576px){.controls-container{gap:8px;padding:8px 10px}.controls-container button[nz-button]{font-size:13px;padding:0 10px}}.modal-overlay{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:#00000073}.modal-container{width:500px;max-width:90vw;max-height:90vh;overflow:auto;background:#fff;border-radius:8px;padding:0;box-shadow:0 8px 30px #0003}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #e8e8e8;background-color:#fff;position:sticky;top:0;z-index:1000}.modal-body{padding:16px}.modal-title{font-size:16px;font-weight:600;color:#262626;letter-spacing:.2px;line-height:1.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i2$3.NzDrawerComponent, selector: "nz-drawer", inputs: ["nzContent", "nzCloseIcon", "nzClosable", "nzMaskClosable", "nzMask", "nzCloseOnNavigation", "nzNoAnimation", "nzKeyboard", "nzTitle", "nzExtra", "nzFooter", "nzPlacement", "nzSize", "nzMaskStyle", "nzBodyStyle", "nzWrapClassName", "nzWidth", "nzHeight", "nzZIndex", "nzOffsetX", "nzOffsetY", "nzVisible"], outputs: ["nzOnViewInit", "nzOnClose", "nzVisibleChange"], exportAs: ["nzDrawer"] }, { kind: "directive", type: i2$3.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "ngmodule", type: NzTabsModule }, { 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: 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: "component", type: YwDashboardFilterComponent, selector: "yw-dashboard-filter", inputs: ["dashboardFilterConfig", "dashboardData"], outputs: ["filterSelectionChange"] }, { kind: "component", type: YwDashboardWidgetConfigComponent, selector: "yw-dashboard-widget-config", inputs: ["widgetConfig", "dashboardData", "configSelect"], outputs: ["axisSelect", "configChange", "chartTypeChange", "closeDrawer"] }, { kind: "component", type: TreeTableFilterComponent, selector: "yw-tree-table-filter", inputs: ["configData", "configSelect"], outputs: ["selectconfigSelect"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwDashboardComponent, decorators: [{
             type: Component,
@@ -8207,7 +8287,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         YwButtonSlicerComponent,
                         YwListSlicerComponent,
                         YwDashboardFilterComponent,
-                        YwDashboardWidgetConfigComponent, TreeTableFilterComponent], template: "<!-- <div class=\"controls\" [hidden]=\"!showControls()\">\r\n  <button (click)=\"saveLayoutToJSON()\">Guardar JSON en Consola</button>\r\n   <button (click)=\"fn_btn_addWidget()\">add widget</button>\r\n   <button (click)=\"fn_btn_lockPositionWidgets()\">Lock widgets</button>\r\n   <button (click)=\"handleShowFormFilterDrawer()\" class=\"btn-filtro\">\r\n            <svg *ngIf=\"drawerfiltervisible; else filtroInactivo\" \r\n                xmlns=\"http://www.w3.org/2000/svg\" \r\n                width=\"20\" height=\"20\" \r\n                viewBox=\"0 0 24 24\" \r\n                fill=\"currentColor\">\r\n              <path d=\"M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z\"/>\r\n            </svg>\r\n            <ng-template #filtroInactivo>\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" \r\n                  width=\"20\" height=\"20\" \r\n                  viewBox=\"0 0 24 24\" \r\n                  fill=\"none\" \r\n                  stroke=\"currentColor\" \r\n                  stroke-width=\"2\">\r\n                <polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"/>\r\n              </svg>\r\n            </ng-template>\r\n    </button>\r\n</div> -->\r\n\r\n<div class=\"controls-container\" >\r\n  @if ( showControls() ) { \r\n  <!-- Botones principales con nz-button y tipos de Ant Design -->\r\n  <button nz-button nzType=\"default\" (click)=\"saveLayoutToJSON()\" >\r\n    <span nz-icon nz-type=\"code\"></span> Guardar JSON\r\n  </button>\r\n\r\n  <button nz-button nzType=\"primary\" (click)=\"fn_btn_addWidget()\" >\r\n    <span nz-icon nz-type=\"plus\"></span> A\u00F1adir widget\r\n  </button>\r\n\r\n  <button nz-button [nzType]=\"isLocked ? 'primary' : 'default'\" nzDanger (click)=\"fn_btn_lockPositionWidgets()\" >\r\n    <span nz-icon [nzType]=\"isLocked ? 'lock' : 'unlock'\"></span> \r\n    {{ isLocked ? 'Bloqueado' : 'Bloquear' }}\r\n  </button>\r\n  }\r\n  @if ( showFilter() ) { \r\n  <!-- Bot\u00F3n de filtro con estilo ic\u00F3nico -->\r\n  <button nz-button nzType=\"default\" nzShape=\"circle\" (click)=\"handleShowFormFilterDrawer()\" class=\"btn-filtro\" [class.active]=\"drawerfiltervisible\" >\r\n    <svg *ngIf=\"drawerfiltervisible; else filtroInactivo\" \r\n         xmlns=\"http://www.w3.org/2000/svg\" \r\n         width=\"16\" height=\"16\" \r\n         viewBox=\"0 0 24 24\" \r\n         fill=\"currentColor\">\r\n      <path d=\"M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z\"/>\r\n    </svg>\r\n    <ng-template #filtroInactivo>\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" \r\n           width=\"16\" height=\"16\" \r\n           viewBox=\"0 0 24 24\" \r\n           fill=\"none\" \r\n           stroke=\"currentColor\" \r\n           stroke-width=\"2\">\r\n        <polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"/>\r\n      </svg>\r\n    </ng-template>\r\n  </button>\r\n  }\r\n</div>\r\n<div #gridContainer class=\"grid-stack canvas-container\"\r\n                   [style.--canvas-bg]=\"dashboardStyle.canvasBackgroundColor\"\r\n></div>\r\n\r\n\r\n\r\n\r\n<!-- DRAWER - FILTER  -->\r\n\r\n<nz-drawer\r\n[nzVisible]=\"drawerfiltervisible\"\r\n[nzMaskClosable]=\"false\"\r\nnzPlacement=\"right\"\r\n[nzWidth]=\"fnGetDrawerWidth(50)\"\r\n(nzOnClose)=\"handleCloseFormFilterDrawer()\"\r\n>\r\n<ng-container *nzDrawerContent>\r\n  <div class=\"widget-details-info\">\r\n    <h6 nz-typography>Filtros</h6>\r\n    <yw-dashboard-filter\r\n        [dashboardFilterConfig]=\"dashboardFilterConfig\"\r\n        [dashboardData]=\"dashboardData\"\r\n        (filterSelectionChange)=\"onFilterSelectionChange($event)\"\r\n      >\r\n     </yw-dashboard-filter>\r\n  </div>\r\n\r\n  <!--\r\n  <nz-tabset nzCentered>\r\n    <nz-tab nzTitle=\"Secion de Filtros\">\r\n    <div class=\"controls\">\r\n      aqui botones de control:\r\n\r\n    </div>\r\n    <div>\r\n  \r\n\r\n    </div>\r\n\r\n    </nz-tab>\r\n \r\n  </nz-tabset>\r\n-->\r\n</ng-container>\r\n</nz-drawer>\r\n\r\n\r\n\r\n<!-- DRAWER - CONFIGURACION  -->\r\n<nz-drawer\r\n  [nzVisible]=\"drawerconfigvisible\"\r\n  [nzMaskClosable]=\"false\"\r\n  nzPlacement=\"right\"\r\n  [nzWidth]=\"fnGetDrawerWidth(55)\"\r\n  (nzOnClose)=\"handleCloseFormDrawer()\"\r\n>\r\n  <ng-container *nzDrawerContent>\r\n    @if (selectedWidgetForConfig) {\r\n      <yw-dashboard-widget-config\r\n        [widgetConfig]=\"selectedWidgetForConfig\"\r\n        [dashboardData]=\"dashboardData\"\r\n        (configChange)=\"onWidgetConfigUpdated($event)\"\r\n        (chartTypeChange)=\"onWidgetChartTypeChanged($event)\"\r\n        (closeDrawer)=\"handleCloseFormDrawer()\"\r\n        (axisSelect)=\"onChangeSelect($event)\"\r\n        [configSelect]=\"configSelect\"\r\n\r\n      >\r\n      </yw-dashboard-widget-config>\r\n    }\r\n  </ng-container>\r\n</nz-drawer>\r\n\r\n\r\n\r\n@if (configSelect.onModal) {\r\n  <div class=\"modal-overlay\">\r\n    <div class=\"modal-container\">\r\n      <div class=\"modal-header\">\r\n        <span class=\"modal-title\">\r\n          Explorador de columnas ({{ configSelect.label }})\r\n        </span>\r\n\r\n        <button\r\n          nz-button\r\n          nzType=\"text\"\r\n          nzShape=\"circle\"\r\n          (click)=\"closeModal()\"\r\n          aria-label=\"Cerrar modal\"\r\n        >\r\n          <span nz-icon nzType=\"close\"></span>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"modal-body\">\r\n        <yw-tree-table-filter\r\n          [configData]=\"configData\"\r\n          [configSelect]=\"configSelect\"\r\n          (selectconfigSelect)=\"onChangeSelect($event)\"\r\n        ></yw-tree-table-filter>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.canvas-container{background-color:var(--canvas-bg, #f5f5f5);min-height:500px;padding:10px}::vdeep .card-inner{background:#fff;border:1px solid #ccc;height:100%;display:flex;align-items:center;justify-content:center}:host ::ng-deep .grid-stack-item-content{border-radius:6px;box-shadow:0 2px 5px #0000001a;display:flex;align-items:center;justify-content:center;font-weight:700;overflow:hidden}::ng-deep .grid-stack-item.widget-maximized{position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;z-index:990!important;transform:none!important;margin:0!important;padding:5px}::ng-deep .grid-stack-item.widget-maximized .grid-stack-item-content{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;border:none!important;border-radius:0!important;box-shadow:none!important;background-color:#fff!important;overflow:hidden}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-handle{opacity:0!important;background-image:none!important}.widget-details-info{padding-top:30px;text-align:center}.widget-details-info h6{font-family:manrope,sans-serif;font-size:20px;font-weight:700;line-height:26px;color:#2d3144}.widget-details-info p{font-family:manrope,sans-serif;font-size:14px;font-weight:400;line-height:21px;color:#4b5064}.controls-container{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 16px;background:#fff;border-bottom:1px solid #f0f0f0;box-shadow:0 2px 8px #0000000a;border-radius:6px;margin-bottom:16px;width:100%;box-sizing:border-box;position:sticky;top:0}.controls-container button{white-space:nowrap}.controls-container .btn-filtro{display:inline-flex;align-items:center;justify-content:center;padding:0;width:32px;height:32px;border-radius:50%;transition:all .3s ease}.controls-container .btn-filtro.active{color:#fff;background-color:#1890ff;border-color:#1890ff}.controls-container .btn-filtro.active:hover{background-color:#40a9ff;border-color:#40a9ff}@media(max-width:576px){.controls-container{gap:8px;padding:8px 10px}.controls-container button[nz-button]{font-size:13px;padding:0 10px}}.modal-overlay{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:#00000073}.modal-container{width:500px;max-width:90vw;max-height:90vh;overflow:auto;background:#fff;border-radius:8px;padding:0;box-shadow:0 8px 30px #0003}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #e8e8e8;background-color:#fff;position:sticky;top:0;z-index:1000}.modal-body{padding:16px}.modal-title{font-size:16px;font-weight:600;color:#262626;letter-spacing:.2px;line-height:1.5}\n"] }]
+                        YwDashboardWidgetConfigComponent, TreeTableFilterComponent], template: "<!-- <div class=\"controls\" [hidden]=\"!showControls()\">\r\n  <button (click)=\"saveLayoutToJSON()\">Guardar JSON en Consola</button>\r\n   <button (click)=\"fn_btn_addWidget()\">add widget</button>\r\n   <button (click)=\"fn_btn_lockPositionWidgets()\">Lock widgets</button>\r\n   <button (click)=\"handleShowFormFilterDrawer()\" class=\"btn-filtro\">\r\n            <svg *ngIf=\"drawerfiltervisible; else filtroInactivo\" \r\n                xmlns=\"http://www.w3.org/2000/svg\" \r\n                width=\"20\" height=\"20\" \r\n                viewBox=\"0 0 24 24\" \r\n                fill=\"currentColor\">\r\n              <path d=\"M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z\"/>\r\n            </svg>\r\n            <ng-template #filtroInactivo>\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" \r\n                  width=\"20\" height=\"20\" \r\n                  viewBox=\"0 0 24 24\" \r\n                  fill=\"none\" \r\n                  stroke=\"currentColor\" \r\n                  stroke-width=\"2\">\r\n                <polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"/>\r\n              </svg>\r\n            </ng-template>\r\n    </button>\r\n</div> -->\r\n\r\n<div class=\"controls-container\" >\r\n  @if ( showControls() ) { \r\n  <!-- Botones principales con nz-button y tipos de Ant Design -->\r\n  <button nz-button nzType=\"default\" (click)=\"saveLayoutToJSON()\" >\r\n    <span nz-icon nz-type=\"code\"></span> Guardar JSON\r\n  </button>\r\n\r\n  <button nz-button nzType=\"primary\" (click)=\"fn_btn_addWidget()\" >\r\n    <span nz-icon nz-type=\"plus\"></span> A\u00F1adir widget\r\n  </button>\r\n\r\n  <button nz-button [nzType]=\"isLocked ? 'primary' : 'default'\" nzDanger (click)=\"fn_btn_lockPositionWidgets()\" >\r\n    <span nz-icon [nzType]=\"isLocked ? 'lock' : 'unlock'\"></span> \r\n    {{ isLocked ? 'Bloqueado' : 'Bloquear' }}\r\n  </button>\r\n  }\r\n  @if ( showFilter() ) { \r\n  <!-- Bot\u00F3n de filtro con estilo ic\u00F3nico -->\r\n  <button nz-button nzType=\"default\" nzShape=\"circle\" (click)=\"handleShowFormFilterDrawer()\" class=\"btn-filtro\" [class.active]=\"drawerfiltervisible\" >\r\n    <svg *ngIf=\"drawerfiltervisible; else filtroInactivo\" \r\n         xmlns=\"http://www.w3.org/2000/svg\" \r\n         width=\"16\" height=\"16\" \r\n         viewBox=\"0 0 24 24\" \r\n         fill=\"currentColor\">\r\n      <path d=\"M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z\"/>\r\n    </svg>\r\n    <ng-template #filtroInactivo>\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" \r\n           width=\"16\" height=\"16\" \r\n           viewBox=\"0 0 24 24\" \r\n           fill=\"none\" \r\n           stroke=\"currentColor\" \r\n           stroke-width=\"2\">\r\n        <polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"/>\r\n      </svg>\r\n    </ng-template>\r\n  </button>\r\n  }\r\n</div>\r\n<div #gridContainer class=\"grid-stack canvas-container\"\r\n                   [style.--canvas-bg]=\"dashboardStyle.canvasBackgroundColor\"\r\n></div>\r\n\r\n\r\n\r\n\r\n<!-- DRAWER - FILTER  -->\r\n\r\n<nz-drawer\r\n[nzVisible]=\"drawerfiltervisible\"\r\n[nzMaskClosable]=\"false\"\r\nnzPlacement=\"right\"\r\n[nzWidth]=\"fnGetDrawerWidth(50)\"\r\n(nzOnClose)=\"handleCloseFormFilterDrawer()\"\r\n>\r\n<ng-container *nzDrawerContent>\r\n  <div class=\"widget-details-info\">\r\n    <h6 nz-typography>Filtros</h6>\r\n    <yw-dashboard-filter\r\n        [dashboardFilterConfig]=\"dashboardFilterConfig\"\r\n        [dashboardData]=\"dashboardData\"\r\n        (filterSelectionChange)=\"onFilterSelectionChange($event)\"\r\n      >\r\n     </yw-dashboard-filter>\r\n  </div>\r\n\r\n  <!--\r\n  <nz-tabset nzCentered>\r\n    <nz-tab nzTitle=\"Secion de Filtros\">\r\n    <div class=\"controls\">\r\n      aqui botones de control:\r\n\r\n    </div>\r\n    <div>\r\n  \r\n\r\n    </div>\r\n\r\n    </nz-tab>\r\n \r\n  </nz-tabset>\r\n-->\r\n</ng-container>\r\n</nz-drawer>\r\n\r\n\r\n\r\n<!-- DRAWER - CONFIGURACION  -->\r\n<nz-drawer\r\n  [nzVisible]=\"drawerconfigvisible\"\r\n  [nzMaskClosable]=\"false\"\r\n  nzPlacement=\"right\"\r\n  [nzWidth]=\"fnGetDrawerWidth(55)\"\r\n  (nzOnClose)=\"handleCloseFormDrawer()\"\r\n>\r\n  <ng-container *nzDrawerContent>\r\n    @if (selectedWidgetForConfig) {\r\n      <yw-dashboard-widget-config\r\n        [widgetConfig]=\"selectedWidgetForConfig\"\r\n        [dashboardData]=\"dashboardData\"\r\n        (configChange)=\"onWidgetConfigUpdated($event)\"\r\n        (chartTypeChange)=\"onWidgetChartTypeChanged($event)\"\r\n        (closeDrawer)=\"handleCloseFormDrawer()\"\r\n        (axisSelect)=\"onChangeSelect($event)\"\r\n        [configSelect]=\"configSelect\"\r\n\r\n      >\r\n      </yw-dashboard-widget-config>\r\n    }\r\n  </ng-container>\r\n</nz-drawer>\r\n\r\n\r\n\r\n@if (configSelect.onModal) {\r\n  <div class=\"modal-overlay\">\r\n    <div class=\"modal-container\">\r\n      <div class=\"modal-header\">\r\n        <span class=\"modal-title\">\r\n          Explorador de columnas ({{ configSelect.label }})\r\n        </span>\r\n\r\n        <button\r\n          nz-button\r\n          nzType=\"text\"\r\n          nzShape=\"circle\"\r\n          (click)=\"closeModal()\"\r\n          aria-label=\"Cerrar modal\"\r\n        >\r\n          <span nz-icon nzType=\"close\"></span>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"modal-body\">\r\n        <yw-tree-table-filter\r\n          [configData]=\"configData\"\r\n          [configSelect]=\"configSelect\"\r\n          (selectconfigSelect)=\"onChangeSelect($event)\"\r\n        ></yw-tree-table-filter>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.canvas-container{background-color:var(--canvas-bg, #f5f5f5);min-height:500px;padding:10px}::vdeep .card-inner{background:#fff;border:1px solid #ccc;height:100%;display:flex;align-items:center;justify-content:center}:host ::ng-deep .grid-stack-item-content{border-radius:6px;box-shadow:0 2px 5px #0000001a;display:flex;align-items:center;justify-content:center;font-weight:700;overflow:hidden}::ng-deep .grid-stack-item.widget-maximized{position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;z-index:990!important;transform:none!important;margin:0!important;padding:5px}::ng-deep .grid-stack-item.widget-maximized .grid-stack-item-content{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;border:none!important;border-radius:0!important;box-shadow:none!important;background-color:#fff!important;overflow:hidden}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-handle{opacity:0!important;background-image:none!important}.widget-details-info{padding-top:30px;text-align:center}.widget-details-info h6{font-family:manrope,sans-serif;font-size:20px;font-weight:700;line-height:26px;color:#2d3144}.widget-details-info p{font-family:manrope,sans-serif;font-size:14px;font-weight:400;line-height:21px;color:#4b5064}.controls-container{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #f0f0f0;box-shadow:0 2px 8px #0000000a;border-radius:6px;margin-bottom:16px;width:100%;box-sizing:border-box;position:sticky;top:0}.controls-container button{white-space:nowrap}.controls-container .btn-filtro{display:inline-flex;align-items:center;justify-content:center;padding:0;width:32px;height:32px;border-radius:50%;transition:all .3s ease}.controls-container .btn-filtro.active{color:#fff;background-color:#1890ff;border-color:#1890ff}.controls-container .btn-filtro.active:hover{background-color:#40a9ff;border-color:#40a9ff}@media(max-width:576px){.controls-container{gap:8px;padding:8px 10px}.controls-container button[nz-button]{font-size:13px;padding:0 10px}}.modal-overlay{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:#00000073}.modal-container{width:500px;max-width:90vw;max-height:90vh;overflow:auto;background:#fff;border-radius:8px;padding:0;box-shadow:0 8px 30px #0003}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #e8e8e8;background-color:#fff;position:sticky;top:0;z-index:1000}.modal-body{padding:16px}.modal-title{font-size:16px;font-weight:600;color:#262626;letter-spacing:.2px;line-height:1.5}\n"] }]
         }], ctorParameters: () => [{ type: i0.EnvironmentInjector }, { type: i0.ApplicationRef }], propDecorators: { gridContainer: [{
                 type: ViewChild,
                 args: ['gridContainer', { static: true }]