yw-charts-library 0.0.5 → 0.0.6

package/fesm2022/yw-charts-library.mjs

@@ -5218,7 +5218,7 @@ class BarChartConfigSyncfusionComponent {
         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: ["@charset \"UTF-8\";.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-body{padding:20px}::ng-deep .main-container-card .ant-card-head-wrapper{flex-wrap:wrap;row-gap:12px;padding-top:12px;padding-bottom:12px}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}\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.ɵ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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BarChartConfigSyncfusionComponent, decorators: [{
             type: Component,
@@ -5238,7 +5238,7 @@ 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: ["@charset \"UTF-8\";.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-body{padding:20px}::ng-deep .main-container-card .ant-card-head-wrapper{flex-wrap:wrap;row-gap:12px;padding-top:12px;padding-bottom:12px}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}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$1.NzModalService }], propDecorators: { config: [{
                 type: Input
             }], chartData: [{
@@ -5543,7 +5543,7 @@ class LineChartConfigSyncfusionComponent {
         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\";.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-body{padding:20px}::ng-deep .main-container-card .ant-card-head-wrapper{flex-wrap:wrap;row-gap:12px;padding-top:12px;padding-bottom:12px}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}\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.ɵ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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: LineChartConfigSyncfusionComponent, decorators: [{
             type: Component,
@@ -5564,7 +5564,7 @@ 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\";.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-body{padding:20px}::ng-deep .main-container-card .ant-card-head-wrapper{flex-wrap:wrap;row-gap:12px;padding-top:12px;padding-bottom:12px}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}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$1.NzModalService }], propDecorators: { config: [{
                 type: Input
             }], chartData: [{
@@ -6880,7 +6880,7 @@ class BubbleChartConfigSyncfusionComponent {
         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\";.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-body{padding:20px}::ng-deep .main-container-card .ant-card-head-wrapper{flex-wrap:wrap;row-gap:12px;padding-top:12px;padding-bottom:12px}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}\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.ɵ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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BubbleChartConfigSyncfusionComponent, decorators: [{
             type: Component,
@@ -6901,7 +6901,7 @@ 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\";.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-body{padding:20px}::ng-deep .main-container-card .ant-card-head-wrapper{flex-wrap:wrap;row-gap:12px;padding-top:12px;padding-bottom:12px}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}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$1.NzModalService }], propDecorators: { config: [{
                 type: Input
             }], chartData: [{