yw-charts-library 0.0.2 → 0.0.4

package/fesm2022/yw-charts-library.mjs

@@ -94,7 +94,8 @@ const YwDashboardWidgetTypes = [
     { code: "chart-bar", description: "Chart Bar" },
     { code: "chart-line", description: "Chart Bar" },
     { code: "chart-doughnut", description: "Chart Doughnut" },
-    { code: "chart-gauge", description: "Chart Gauge" }
+    { code: "chart-gauge", description: "Chart Gauge" },
+    { code: "chart-bubble", description: "Chart Bubble" }
 ];
 
 const YwDashboardWidgetFilterTypes = [
@@ -250,14 +251,14 @@ const resolveJoinedTableData = (allTablesData, configJoins) => {
         return out;
     };
     let currentRows = baseData.map((r) => prefixRow(r, baseTable));
-    relations.forEach((rel) => {
+    for (const rel of relations) {
         const { leftTable, leftId, rightTable, rightId } = rel;
         if (!allTablesData[rightTable]) {
             throw new Error(`La tabla destino "${rightTable}" especificada en el join no existe en los datos.`);
         }
         const targetData = allTablesData[rightTable] || [];
         if (targetData.length === 0) {
-            throw new Error(`La tabla destino "${rightTable}" está vacía.`);
+            return [];
         }
         if (targetData[0][rightId] === undefined) {
             throw new Error(`La columna "${rightId}" no existe en la tabla destino "${rightTable}".`);
@@ -270,18 +271,10 @@ const resolveJoinedTableData = (allTablesData, configJoins) => {
             }
         });
         let matchCount = 0;
-        currentRows = currentRows.map((row) => {
-            // let foreignKeyVal = row[leftId];
-            // if (foreignKeyVal === undefined) {
-            //   const foundKey = Object.keys(row).find(
-            //     (k) => k === leftId || k.endsWith(`.${leftId}`),
-            //   );
-            //   if (foundKey) foreignKeyVal = row[foundKey];
-            // }
-            // REVSISAR COMO ESTA FUNCIONADO EL PARCHE  
+        const nextRows = [];
+        currentRows.forEach((row) => {
             let foreignKeyVal = row[`${leftTable}.${leftId}`];
             if (foreignKeyVal === undefined) {
-                // Si no está, aplicas tu respaldo anterior
                 const foundKey = Object.keys(row).find((k) => k === leftId || k.endsWith(`.${leftId}`));
                 if (foundKey)
                     foreignKeyVal = row[foundKey];
@@ -289,14 +282,14 @@ const resolveJoinedTableData = (allTablesData, configJoins) => {
             if (foreignKeyVal !== undefined && targetMap.has(String(foreignKeyVal))) {
                 matchCount++;
                 const matchedRow = targetMap.get(String(foreignKeyVal));
-                return { ...row, ...matchedRow };
+                nextRows.push({ ...row, ...matchedRow });
             }
-            return row;
         });
+        currentRows = nextRows;
         if (matchCount === 0) {
-            throw new Error(`Error de Join: No se encontraron coincidencias al intentar unir la tabla acumulada con "${rightTable}".`);
+            return [];
         }
-    });
+    }
     return currentRows;
 };
 // ACCESO A PROPIEDADES ANIDADAS (SOPORTA NOTACIÓN DE PUNTOS Y TOLERANCIA DE PREFIJOS)
@@ -1716,13 +1709,17 @@ const parseDataPie = parseSyncFusionData$2;
 const detectCategoryKey = (row) => {
     if (!row)
         return undefined;
+    const isDateKey = (k) => {
+        const lk = k.toLowerCase();
+        return lk.includes('fecha') || lk.includes('date') || lk.includes('time') || lk.includes('timestamp');
+    };
     const candidates = ['x', 'name', 'label', 'category', 'categoria', 'sucursal', 'producto', 'key', 'title'];
     for (const c of candidates) {
-        if (row[c] !== undefined && row[c] !== null && typeof row[c] === 'string')
+        if (row[c] !== undefined && row[c] !== null && typeof row[c] === 'string' && !isDateKey(c))
             return c;
     }
     for (const k of Object.keys(row)) {
-        if (typeof row[k] === 'string')
+        if (typeof row[k] === 'string' && !isDateKey(k))
             return k;
     }
     return undefined;
@@ -1821,7 +1818,7 @@ const parseForSyncfusion$1 = (rawData, config) => {
         if (!row)
             return;
         let xVal = effectiveXKey ? getNestedValue(row, effectiveXKey) : undefined;
-        if (xVal === undefined) {
+        if (xVal === undefined && !xKey) {
             const autoX = detectCategoryKey(row);
             if (autoX)
                 xVal = row[autoX];
@@ -1912,6 +1909,7 @@ const buildPieResult = (dataSource, total, config, cfg, chartTitle, startAngle,
         : (config?.showLegend ?? true);
     const legendPosition = legends?.position ?? config?.legendPosition ?? 'Bottom';
     const visualConfig = {
+        title: chartTitle,
         legendSettings: {
             visible: isLegendVisible,
             position: legendPosition,
@@ -1970,12 +1968,26 @@ class PieChartSyncfusionComponent {
         this._idComponent = '';
         this.chartData = [];
         this.dataChartParse = [];
+        this.chartTitle = '';
         this._lastWidth = 0;
         this._lastHeight = 0;
+        this._dataSnapshot = '';
     }
     ngOnInit() {
         this.updateParsedData();
     }
+    ngDoCheck() {
+        try {
+            const snap = JSON.stringify(this.chartData);
+            if (snap !== this._dataSnapshot) {
+                this._dataSnapshot = snap;
+                this.updateParsedData();
+            }
+        }
+        catch {
+            // Ignorar si hay referencias circulares en los datos
+        }
+    }
     ngAfterViewInit() {
         if (typeof ResizeObserver === 'undefined')
             return;
@@ -2036,12 +2048,23 @@ class PieChartSyncfusionComponent {
                 this.legendSettings = parsedResult.visualConfig.legendSettings;
                 this.tooltip = parsedResult.visualConfig.tooltip;
                 this.dataLabel = parsedResult.visualConfig.dataLabel;
+                this.chartTitle = parsedResult.visualConfig.title || parsedResult.labelData?.title || this.config.title || '';
+            }
+            else {
+                this.chartTitle = parsedResult.labelData?.title || this.config.title || '';
             }
         }
         else {
             this.dataChartParse = [];
             this.centerLabel = undefined;
             this.centerLabelSettings = undefined;
+            this.chartTitle = this.config?.title || '';
+        }
+        this.cdr.markForCheck();
+        if (this.chartInstance) {
+            setTimeout(() => {
+                this.chartInstance?.refresh();
+            });
         }
     }
     onChartLoaded(args) {
@@ -2061,13 +2084,13 @@ class PieChartSyncfusionComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: PieChartSyncfusionComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: PieChartSyncfusionComponent, isStandalone: true, selector: "yw-pie-chart-syncfusion", inputs: { idComponent: "idComponent", chartData: "chartData", config: "config" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: PieChartSyncfusionComponent, isStandalone: true, selector: "yw-pie-chart-syncfusion", inputs: { idComponent: "idComponent", chartData: "chartData", config: "config" }, providers: [
             AccumulationLegendService,
             AccumulationTooltipService,
             AccumulationDataLabelService,
             PieSeriesService,
             AccumulationAnnotationService,
-        ], viewQueries: [{ propertyName: "chartInstance", first: true, predicate: ["accChart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"control-section\">\r\n  <ejs-accumulationchart\r\n    #accChart\r\n    [id]=\"idComponent\"\r\n    [title]=\"''\"\r\n    [legendSettings]=\"legendSettings\"\r\n    [tooltip]=\"tooltip\"\r\n    [centerLabel]=\"centerLabelSettings\"\r\n    (loaded)=\"onChartLoaded($event)\"\r\n    width=\"100%\"\r\n    height=\"100%\"\r\n    [enableAnimation]=\"true\">\r\n\r\n    <e-accumulation-series-collection>\r\n      <e-accumulation-series\r\n        [dataSource]=\"dataChartParse\"\r\n        xName=\"x\"\r\n        yName=\"y\"\r\n        pointColorMapping=\"fill\"\r\n        [type]=\"'Pie'\"\r\n        [radius]=\"seriesConfig.radius\"\r\n        [innerRadius]=\"seriesConfig.innerRadius\"\r\n        [startAngle]=\"seriesConfig.startAngle\"\r\n        [endAngle]=\"seriesConfig.endAngle\"\r\n        [explode]=\"config.explodeSlice ?? true\"\r\n        [explodeIndex]=\"config.explodeIndex || 0\"\r\n        [explodeOffset]=\"config.explodeOffset || '10%'\"\r\n        [dataLabel]=\"dataLabel\">\r\n      </e-accumulation-series>\r\n    </e-accumulation-series-collection>\r\n\r\n  </ejs-accumulationchart>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden}.control-section{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden;background:#fff;border-radius:8px;flex-grow:1}:host ::ng-deep ejs-accumulationchart{display:block;width:100%!important;height:100%!important;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AccumulationChartModule }, { kind: "component", type: i1.AccumulationChartComponent, selector: "ejs-accumulationchart", inputs: ["accessibility", "allowExport", "annotations", "background", "backgroundImage", "border", "center", "centerLabel", "currencyCode", "dataSource", "enableAnimation", "enableBorderOnMouseMove", "enableExport", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "enableSmartLabels", "focusBorderColor", "focusBorderMargin", "focusBorderWidth", "height", "highlightColor", "highlightMode", "highlightPattern", "isMultiSelect", "legendSettings", "locale", "margin", "selectedDataIndexes", "selectionMode", "selectionPattern", "series", "subTitle", "subTitleStyle", "theme", "title", "titleStyle", "tooltip", "useGroupingSeparator", "width"], outputs: ["afterExport", "animationComplete", "annotationRender", "beforePrint", "beforeResize", "chartDoubleClick", "chartMouseClick", "chartMouseDown", "chartMouseLeave", "chartMouseMove", "chartMouseUp", "legendClick", "legendRender", "load", "loaded", "pointClick", "pointMove", "pointRender", "resized", "selectionComplete", "seriesRender", "textRender", "tooltipRender", "dataSourceChange"] }, { kind: "directive", type: i1.AccumulationSeriesDirective, selector: "e-accumulation-series-collection>e-accumulation-series", inputs: ["accessibility", "animation", "applyPattern", "border", "borderRadius", "dashArray", "dataLabel", "dataSource", "emptyPointSettings", "enableTooltip", "endAngle", "explode", "explodeAll", "explodeIndex", "explodeOffset", "gapRatio", "groupMode", "groupTo", "height", "innerRadius", "legendImageUrl", "legendShape", "name", "neckHeight", "neckWidth", "opacity", "palettes", "pointColorMapping", "pyramidMode", "query", "radius", "selectionStyle", "startAngle", "tooltipMappingName", "type", "visible", "width", "xName", "yName"] }, { kind: "directive", type: i1.AccumulationSeriesCollectionDirective, selector: "ej-accumulationchart>e-accumulation-series-collection" }] }); }
+        ], viewQueries: [{ propertyName: "chartInstance", first: true, predicate: ["accChart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"pie-container\">\r\n  @if (chartTitle) {\r\n    <div class=\"pie-header-title\" [title]=\"chartTitle\">\r\n      {{ chartTitle }}\r\n    </div>\r\n  }\r\n\r\n  <div class=\"pie-wrapper\">\r\n    <ejs-accumulationchart\r\n      #accChart\r\n      [id]=\"idComponent\"\r\n      [title]=\"''\"\r\n      [legendSettings]=\"legendSettings\"\r\n      [tooltip]=\"tooltip\"\r\n      [centerLabel]=\"centerLabelSettings\"\r\n      (loaded)=\"onChartLoaded($event)\"\r\n      width=\"100%\"\r\n      height=\"100%\"\r\n      [enableAnimation]=\"true\">\r\n\r\n      <e-accumulation-series-collection>\r\n        <e-accumulation-series\r\n          [dataSource]=\"dataChartParse\"\r\n          xName=\"x\"\r\n          yName=\"y\"\r\n          pointColorMapping=\"fill\"\r\n          [type]=\"'Pie'\"\r\n          [radius]=\"seriesConfig.radius || '80%'\"\r\n          [innerRadius]=\"seriesConfig.innerRadius || '0%'\"\r\n          [startAngle]=\"seriesConfig.startAngle || 0\"\r\n          [endAngle]=\"seriesConfig.endAngle || 360\"\r\n          [explode]=\"config.explodeSlice ?? true\"\r\n          [explodeIndex]=\"config.explodeIndex || 0\"\r\n          [explodeOffset]=\"config.explodeOffset || '10%'\"\r\n          [dataLabel]=\"dataLabel\">\r\n        </e-accumulation-series>\r\n      </e-accumulation-series-collection>\r\n\r\n    </ejs-accumulationchart>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden}.pie-container{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden;background:#fff;border-radius:8px;flex-grow:1}.pie-header-title{padding:10px 14px 2px;font-size:clamp(.85rem,2.2vw,1.05rem);font-weight:600;color:#1e293b;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;flex-shrink:0}.pie-wrapper{display:flex;justify-content:center;align-items:center;width:100%;height:100%;flex:1;min-width:0;overflow:hidden}:host ::ng-deep ejs-accumulationchart{display:block;width:100%!important;height:100%!important;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AccumulationChartModule }, { kind: "component", type: i1.AccumulationChartComponent, selector: "ejs-accumulationchart", inputs: ["accessibility", "allowExport", "annotations", "background", "backgroundImage", "border", "center", "centerLabel", "currencyCode", "dataSource", "enableAnimation", "enableBorderOnMouseMove", "enableExport", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "enableSmartLabels", "focusBorderColor", "focusBorderMargin", "focusBorderWidth", "height", "highlightColor", "highlightMode", "highlightPattern", "isMultiSelect", "legendSettings", "locale", "margin", "selectedDataIndexes", "selectionMode", "selectionPattern", "series", "subTitle", "subTitleStyle", "theme", "title", "titleStyle", "tooltip", "useGroupingSeparator", "width"], outputs: ["afterExport", "animationComplete", "annotationRender", "beforePrint", "beforeResize", "chartDoubleClick", "chartMouseClick", "chartMouseDown", "chartMouseLeave", "chartMouseMove", "chartMouseUp", "legendClick", "legendRender", "load", "loaded", "pointClick", "pointMove", "pointRender", "resized", "selectionComplete", "seriesRender", "textRender", "tooltipRender", "dataSourceChange"] }, { kind: "directive", type: i1.AccumulationSeriesDirective, selector: "e-accumulation-series-collection>e-accumulation-series", inputs: ["accessibility", "animation", "applyPattern", "border", "borderRadius", "dashArray", "dataLabel", "dataSource", "emptyPointSettings", "enableTooltip", "endAngle", "explode", "explodeAll", "explodeIndex", "explodeOffset", "gapRatio", "groupMode", "groupTo", "height", "innerRadius", "legendImageUrl", "legendShape", "name", "neckHeight", "neckWidth", "opacity", "palettes", "pointColorMapping", "pyramidMode", "query", "radius", "selectionStyle", "startAngle", "tooltipMappingName", "type", "visible", "width", "xName", "yName"] }, { kind: "directive", type: i1.AccumulationSeriesCollectionDirective, selector: "ej-accumulationchart>e-accumulation-series-collection" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: PieChartSyncfusionComponent, decorators: [{
             type: Component,
@@ -2077,7 +2100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         AccumulationDataLabelService,
                         PieSeriesService,
                         AccumulationAnnotationService,
-                    ], template: "<div class=\"control-section\">\r\n  <ejs-accumulationchart\r\n    #accChart\r\n    [id]=\"idComponent\"\r\n    [title]=\"''\"\r\n    [legendSettings]=\"legendSettings\"\r\n    [tooltip]=\"tooltip\"\r\n    [centerLabel]=\"centerLabelSettings\"\r\n    (loaded)=\"onChartLoaded($event)\"\r\n    width=\"100%\"\r\n    height=\"100%\"\r\n    [enableAnimation]=\"true\">\r\n\r\n    <e-accumulation-series-collection>\r\n      <e-accumulation-series\r\n        [dataSource]=\"dataChartParse\"\r\n        xName=\"x\"\r\n        yName=\"y\"\r\n        pointColorMapping=\"fill\"\r\n        [type]=\"'Pie'\"\r\n        [radius]=\"seriesConfig.radius\"\r\n        [innerRadius]=\"seriesConfig.innerRadius\"\r\n        [startAngle]=\"seriesConfig.startAngle\"\r\n        [endAngle]=\"seriesConfig.endAngle\"\r\n        [explode]=\"config.explodeSlice ?? true\"\r\n        [explodeIndex]=\"config.explodeIndex || 0\"\r\n        [explodeOffset]=\"config.explodeOffset || '10%'\"\r\n        [dataLabel]=\"dataLabel\">\r\n      </e-accumulation-series>\r\n    </e-accumulation-series-collection>\r\n\r\n  </ejs-accumulationchart>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden}.control-section{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden;background:#fff;border-radius:8px;flex-grow:1}:host ::ng-deep ejs-accumulationchart{display:block;width:100%!important;height:100%!important;flex-grow:1}\n"] }]
+                    ], template: "<div class=\"pie-container\">\r\n  @if (chartTitle) {\r\n    <div class=\"pie-header-title\" [title]=\"chartTitle\">\r\n      {{ chartTitle }}\r\n    </div>\r\n  }\r\n\r\n  <div class=\"pie-wrapper\">\r\n    <ejs-accumulationchart\r\n      #accChart\r\n      [id]=\"idComponent\"\r\n      [title]=\"''\"\r\n      [legendSettings]=\"legendSettings\"\r\n      [tooltip]=\"tooltip\"\r\n      [centerLabel]=\"centerLabelSettings\"\r\n      (loaded)=\"onChartLoaded($event)\"\r\n      width=\"100%\"\r\n      height=\"100%\"\r\n      [enableAnimation]=\"true\">\r\n\r\n      <e-accumulation-series-collection>\r\n        <e-accumulation-series\r\n          [dataSource]=\"dataChartParse\"\r\n          xName=\"x\"\r\n          yName=\"y\"\r\n          pointColorMapping=\"fill\"\r\n          [type]=\"'Pie'\"\r\n          [radius]=\"seriesConfig.radius || '80%'\"\r\n          [innerRadius]=\"seriesConfig.innerRadius || '0%'\"\r\n          [startAngle]=\"seriesConfig.startAngle || 0\"\r\n          [endAngle]=\"seriesConfig.endAngle || 360\"\r\n          [explode]=\"config.explodeSlice ?? true\"\r\n          [explodeIndex]=\"config.explodeIndex || 0\"\r\n          [explodeOffset]=\"config.explodeOffset || '10%'\"\r\n          [dataLabel]=\"dataLabel\">\r\n        </e-accumulation-series>\r\n      </e-accumulation-series-collection>\r\n\r\n    </ejs-accumulationchart>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden}.pie-container{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden;background:#fff;border-radius:8px;flex-grow:1}.pie-header-title{padding:10px 14px 2px;font-size:clamp(.85rem,2.2vw,1.05rem);font-weight:600;color:#1e293b;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;flex-shrink:0}.pie-wrapper{display:flex;justify-content:center;align-items:center;width:100%;height:100%;flex:1;min-width:0;overflow:hidden}:host ::ng-deep ejs-accumulationchart{display:block;width:100%!important;height:100%!important;flex-grow:1}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { chartInstance: [{
                 type: ViewChild,
                 args: ['accChart']
@@ -2522,6 +2545,18 @@ class GaugeChartSyncfusionComponent {
     get chartData() {
         return this._chartData;
     }
+    /** HTML con estilos inline para la annotation central del gauge */
+    get annotationHtml() {
+        const text = this.animatedLabelText || (this.gaugePoint?.text ?? '');
+        return this.buildAnnotationHtml(text);
+    }
+    buildAnnotationHtml(text) {
+        const size = this.currentLabelSize || this.visualConfig?.labelSize || '24px';
+        const isBold = this.visualConfig?.labelBold || this.visualConfig?.labelWeight === 'bold' || this.visualConfig?.labelWeight === '700';
+        const weight = isBold ? 'bold' : (this.visualConfig?.labelWeight || 'normal');
+        const color = this.visualConfig?.labelColor || '#1F2937';
+        return `<div style="font-size:${size};font-weight:${weight};color:${color};text-align:center;font-family:inherit;line-height:1.1;white-space:nowrap;">${text}</div>`;
+    }
     constructor(cdr, elRef) {
         this.cdr = cdr;
         this.elRef = elRef;
@@ -2648,6 +2683,12 @@ class GaugeChartSyncfusionComponent {
                 else {
                     this.currentLabelSize = `${parsedSize}px`;
                 }
+                if (this.gaugeInstance && this.visualConfig?.showLabel && !this._isAnimating) {
+                    try {
+                        this.gaugeInstance.setAnnotationValue(0, 0, this.annotationHtml);
+                    }
+                    catch { }
+                }
                 this.cdr.markForCheck();
                 return;
             }
@@ -2655,6 +2696,12 @@ class GaugeChartSyncfusionComponent {
         // Proporción estándar ideal (~7.5% del ancho del contenedor, acotado entre 13px y 26px)
         const base = Math.max(13, Math.min(26, Math.round(width * 0.075)));
         this.currentLabelSize = `${base}px`;
+        if (this.gaugeInstance && this.visualConfig?.showLabel && !this._isAnimating) {
+            try {
+                this.gaugeInstance.setAnnotationValue(0, 0, this.annotationHtml);
+            }
+            catch { }
+        }
         this.cdr.markForCheck();
     }
     /**
@@ -2744,7 +2791,7 @@ class GaugeChartSyncfusionComponent {
             this.animatedLabelText = labelText;
             if (this.gaugeInstance) {
                 try {
-                    this.gaugeInstance.setAnnotationValue(0, 0, labelText);
+                    this.gaugeInstance.setAnnotationValue(0, 0, this.buildAnnotationHtml(labelText));
                 }
                 catch {
                     // Ignorar si la anotación aún no se ha montado
@@ -2761,7 +2808,7 @@ class GaugeChartSyncfusionComponent {
                 this.animatedLabelText = finalLabel;
                 if (this.gaugeInstance) {
                     try {
-                        this.gaugeInstance.setAnnotationValue(0, 0, finalLabel);
+                        this.gaugeInstance.setAnnotationValue(0, 0, this.buildAnnotationHtml(finalLabel));
                     }
                     catch { }
                 }
@@ -2789,11 +2836,11 @@ class GaugeChartSyncfusionComponent {
         return index;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: GaugeChartSyncfusionComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: GaugeChartSyncfusionComponent, isStandalone: true, selector: "yw-gauge-chart-syncfusion", inputs: { idComponent: "idComponent", chartData: "chartData", config: "config" }, providers: [AnnotationsService, GaugeTooltipService], viewQueries: [{ propertyName: "gaugeInstance", first: true, predicate: ["circulargauge"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"gauge-container\">\r\n\r\n  @if (visualConfig && visualConfig.title) {\r\n    <div class=\"gauge-header-title\" [title]=\"visualConfig.title\">\r\n      {{ visualConfig.title }}\r\n    </div>\r\n  }\r\n\r\n  <div class=\"gauge-wrapper\">\r\n    <ejs-circulargauge\r\n      #circulargauge\r\n      [id]=\"idComponent\"\r\n      [title]=\"''\"\r\n      height=\"100%\"\r\n      width=\"100%\"\r\n      [enablePointerDrag]=\"false\"\r\n      [tooltip]=\"{ enable: visualConfig.enableTooltip }\"\r\n      (loaded)=\"onGaugeLoaded($event)\">\r\n\r\n      <e-axes>\r\n        <e-axis\r\n          [minimum]=\"visualConfig.minimum\"\r\n          [maximum]=\"visualConfig.maximum\"\r\n          [startAngle]=\"visualConfig.startAngle\"\r\n          [endAngle]=\"visualConfig.endAngle\"\r\n          [lineStyle]=\"{ width: 0 }\"\r\n          [labelStyle]=\"visualConfig.showTicks ? { position: 'Outside', offset: visualConfig.labelOffset, font: { size: '11px' } } : { position: 'Outside', font: { size: '0px' } }\"\r\n          [majorTicks]=\"visualConfig.showTicks ? { position: visualConfig.tickPosition, width: 2, height: 10 } : { width: 0 }\"\r\n          [minorTicks]=\"visualConfig.showTicks ? { position: visualConfig.tickPosition, width: 1, height: 5 } : { width: 0 }\">\r\n\r\n          <!-- Rangos de color sobre el arco (modo convencional por rangos o modo ancho variable) -->\r\n          @if (!visualConfig.enableProgressTrack || visualConfig.isVariableWidth) {\r\n            <e-ranges>\r\n              @for (range of visualConfig.ranges; track $index) {\r\n                <e-range\r\n                  [start]=\"range.start\"\r\n                  [end]=\"range.end\"\r\n                  [color]=\"range.color\"\r\n                  [startWidth]=\"range.startWidth ?? range.width ?? 8\"\r\n                  [endWidth]=\"range.endWidth ?? range.width ?? 8\"\r\n                  [roundedCornerRadius]=\"range.roundedCornerRadius ?? 0\">\r\n                </e-range>\r\n              }\r\n            </e-ranges>\r\n          }\r\n\r\n          <!-- Punteros: tanto la l\u00EDnea de fondo (vac\u00EDo) como la de llenado (l\u00EDquido) usan RangeBar para alineaci\u00F3n perfecta -->\r\n          <e-pointers>\r\n            @if (visualConfig.enableProgressTrack && !visualConfig.isVariableWidth) {\r\n              <!-- L\u00EDnea 1: Fondo / vac\u00EDo (del m\u00EDnimo al m\u00E1ximo) -->\r\n              <e-pointer\r\n                type=\"RangeBar\"\r\n                [value]=\"visualConfig.maximum\"\r\n                [color]=\"visualConfig.trackColor\"\r\n                [pointerWidth]=\"visualConfig.progressWidth\"\r\n                [roundedCornerRadius]=\"visualConfig.cornerRadius\"\r\n                [animation]=\"{ enable: false }\">\r\n              </e-pointer>\r\n\r\n              <!-- L\u00EDnea 2: Llenado progresivo / l\u00EDquido (del m\u00EDnimo al valor actual) -->\r\n              <e-pointer\r\n                type=\"RangeBar\"\r\n                [value]=\"gaugePoint.value\"\r\n                [color]=\"visualConfig.progressColor\"\r\n                [pointerWidth]=\"visualConfig.progressWidth\"\r\n                [roundedCornerRadius]=\"visualConfig.cornerRadius\"\r\n                [animation]=\"{ enable: true, duration: 900 }\">\r\n              </e-pointer>\r\n            }\r\n\r\n            @if ((!visualConfig.enableProgressTrack || visualConfig.showNeedleWithProgress) && (!visualConfig.isVariableWidth || visualConfig.showNeedleWithProgress)) {\r\n              <e-pointer\r\n                [value]=\"gaugePoint.value\"\r\n                type=\"Needle\"\r\n                [color]=\"visualConfig.pointerColor\"\r\n                [needleTail]=\"{ length: '18%' }\"\r\n                [cap]=\"{ radius: 8, color: visualConfig.pointerColor }\">\r\n              </e-pointer>\r\n            }\r\n          </e-pointers>\r\n\r\n          <!-- Etiqueta central con el valor -->\r\n          @if (visualConfig.showLabel) {\r\n            <e-annotations>\r\n              <e-annotation\r\n                [angle]=\"visualConfig.labelAngle\"\r\n                [radius]=\"visualConfig.labelRadius\"\r\n                zIndex=\"1\"\r\n                [content]=\"animatedLabelText || gaugePoint.text\"\r\n                [textStyle]=\"{\r\n                  size: currentLabelSize || visualConfig.labelSize,\r\n                  fontWeight: visualConfig.labelWeight,\r\n                  color: visualConfig.labelColor,\r\n                  fontFamily: 'inherit',\r\n                  fontStyle: 'normal',\r\n                  opacity: 1\r\n                }\">\r\n              </e-annotation>\r\n            </e-annotations>\r\n          }\r\n\r\n        </e-axis>\r\n      </e-axes>\r\n\r\n    </ejs-circulargauge>\r\n  </div>\r\n\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden}.gauge-container{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden;background:#fff;border-radius:8px}.gauge-header-title{padding:10px 14px 2px;font-size:clamp(.85rem,2.2vw,1.05rem);font-weight:600;color:#1e293b;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;flex-shrink:0}.gauge-wrapper{display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-height:240px;flex:1;min-width:0;overflow:hidden}:host ::ng-deep ejs-circulargauge{display:block;width:100%!important;height:100%!important;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CircularGaugeModule }, { kind: "component", type: i1$1.CircularGaugeComponent, selector: "ejs-circulargauge", inputs: ["allowImageExport", "allowMargin", "allowPdfExport", "allowPrint", "allowRangePreRender", "animationDuration", "axes", "background", "border", "centerX", "centerY", "description", "enablePersistence", "enablePointerDrag", "enableRangeDrag", "enableRtl", "height", "legendSettings", "locale", "margin", "moveToCenter", "tabIndex", "theme", "title", "titleStyle", "tooltip", "useGroupingSeparator", "width"], outputs: ["animationComplete", "annotationRender", "axisLabelRender", "beforePrint", "dragEnd", "dragMove", "dragStart", "gaugeMouseDown", "gaugeMouseLeave", "gaugeMouseMove", "gaugeMouseUp", "legendRender", "load", "loaded", "radiusCalculate", "resized", "tooltipRender"] }, { kind: "directive", type: i1$1.AnnotationDirective, selector: "e-annotations>e-annotation", inputs: ["angle", "autoAngle", "content", "description", "radius", "textStyle", "zIndex"] }, { kind: "directive", type: i1$1.AnnotationsDirective, selector: "ej-circulargauge>e-axes>e-axis>e-annotations" }, { kind: "directive", type: i1$1.RangeDirective, selector: "e-ranges>e-range", inputs: ["color", "end", "endWidth", "legendText", "linearGradient", "offset", "opacity", "position", "radialGradient", "radius", "roundedCornerRadius", "start", "startWidth"] }, { kind: "directive", type: i1$1.RangesDirective, selector: "ej-circulargauge>e-axes>e-axis>e-ranges" }, { kind: "directive", type: i1$1.PointerDirective, selector: "e-pointers>e-pointer", inputs: ["animation", "border", "cap", "color", "description", "enableDrag", "imageUrl", "linearGradient", "markerHeight", "markerShape", "markerWidth", "needleEndWidth", "needleStartWidth", "needleTail", "offset", "pointerWidth", "position", "radialGradient", "radius", "roundedCornerRadius", "text", "textStyle", "type", "value"] }, { kind: "directive", type: i1$1.PointersDirective, selector: "ej-circulargauge>e-axes>e-axis>e-pointers" }, { kind: "directive", type: i1$1.AxisDirective, selector: "e-axes>e-axis", inputs: ["annotations", "background", "direction", "endAngle", "hideIntersectingLabel", "labelStyle", "lineStyle", "majorTicks", "maximum", "minimum", "minorTicks", "pointers", "radius", "rangeGap", "ranges", "roundingPlaces", "showLastLabel", "startAndEndRangeGap", "startAngle"] }, { kind: "directive", type: i1$1.AxesDirective, selector: "ej-circulargauge>e-axes" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: GaugeChartSyncfusionComponent, isStandalone: true, selector: "yw-gauge-chart-syncfusion", inputs: { idComponent: "idComponent", chartData: "chartData", config: "config" }, providers: [AnnotationsService, GaugeTooltipService], viewQueries: [{ propertyName: "gaugeInstance", first: true, predicate: ["circulargauge"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"gauge-container\">\r\n\r\n  @if (visualConfig && visualConfig.title) {\r\n    <div class=\"gauge-header-title\" [title]=\"visualConfig.title\">\r\n      {{ visualConfig.title }}\r\n    </div>\r\n  }\r\n\r\n  <div class=\"gauge-wrapper\">\r\n    <ejs-circulargauge\r\n      #circulargauge\r\n      [id]=\"idComponent\"\r\n      [title]=\"''\"\r\n      height=\"100%\"\r\n      width=\"100%\"\r\n      [enablePointerDrag]=\"false\"\r\n      [tooltip]=\"{ enable: visualConfig.enableTooltip }\"\r\n      (loaded)=\"onGaugeLoaded($event)\">\r\n\r\n      <e-axes>\r\n        <e-axis\r\n          [minimum]=\"visualConfig.minimum\"\r\n          [maximum]=\"visualConfig.maximum\"\r\n          [startAngle]=\"visualConfig.startAngle\"\r\n          [endAngle]=\"visualConfig.endAngle\"\r\n          [lineStyle]=\"{ width: 0 }\"\r\n          [labelStyle]=\"visualConfig.showTicks ? { position: 'Outside', offset: visualConfig.labelOffset, font: { size: '11px' } } : { position: 'Outside', font: { size: '0px' } }\"\r\n          [majorTicks]=\"visualConfig.showTicks ? { position: visualConfig.tickPosition, width: 2, height: 10 } : { width: 0 }\"\r\n          [minorTicks]=\"visualConfig.showTicks ? { position: visualConfig.tickPosition, width: 1, height: 5 } : { width: 0 }\">\r\n\r\n          <!-- Rangos de color sobre el arco (modo convencional por rangos o modo ancho variable) -->\r\n          @if (!visualConfig.enableProgressTrack || visualConfig.isVariableWidth) {\r\n            <e-ranges>\r\n              @for (range of visualConfig.ranges; track $index) {\r\n                <e-range\r\n                  [start]=\"range.start\"\r\n                  [end]=\"range.end\"\r\n                  [color]=\"range.color\"\r\n                  [startWidth]=\"range.startWidth ?? range.width ?? 8\"\r\n                  [endWidth]=\"range.endWidth ?? range.width ?? 8\"\r\n                  [roundedCornerRadius]=\"range.roundedCornerRadius ?? 0\">\r\n                </e-range>\r\n              }\r\n            </e-ranges>\r\n          }\r\n\r\n          <!-- Punteros: tanto la l\u00EDnea de fondo (vac\u00EDo) como la de llenado (l\u00EDquido) usan RangeBar para alineaci\u00F3n perfecta -->\r\n          <e-pointers>\r\n            @if (visualConfig.enableProgressTrack && !visualConfig.isVariableWidth) {\r\n              <!-- L\u00EDnea 1: Fondo / vac\u00EDo (del m\u00EDnimo al m\u00E1ximo) -->\r\n              <e-pointer\r\n                type=\"RangeBar\"\r\n                [value]=\"visualConfig.maximum\"\r\n                [color]=\"visualConfig.trackColor\"\r\n                [pointerWidth]=\"visualConfig.progressWidth\"\r\n                [roundedCornerRadius]=\"visualConfig.cornerRadius\"\r\n                [animation]=\"{ enable: false }\">\r\n              </e-pointer>\r\n\r\n              <!-- L\u00EDnea 2: Llenado progresivo / l\u00EDquido (del m\u00EDnimo al valor actual) -->\r\n              <e-pointer\r\n                type=\"RangeBar\"\r\n                [value]=\"gaugePoint.value\"\r\n                [color]=\"visualConfig.progressColor\"\r\n                [pointerWidth]=\"visualConfig.progressWidth\"\r\n                [roundedCornerRadius]=\"visualConfig.cornerRadius\"\r\n                [animation]=\"{ enable: true, duration: 900 }\">\r\n              </e-pointer>\r\n            }\r\n\r\n            @if ((!visualConfig.enableProgressTrack || visualConfig.showNeedleWithProgress) && (!visualConfig.isVariableWidth || visualConfig.showNeedleWithProgress)) {\r\n              <e-pointer\r\n                [value]=\"gaugePoint.value\"\r\n                type=\"Needle\"\r\n                [color]=\"visualConfig.pointerColor\"\r\n                [needleTail]=\"{ length: '18%' }\"\r\n                [cap]=\"{ radius: 8, color: visualConfig.pointerColor }\">\r\n              </e-pointer>\r\n            }\r\n          </e-pointers>\r\n\r\n          <!-- Etiqueta central con el valor -->\r\n          @if (visualConfig.showLabel) {\r\n            <e-annotations>\r\n              <e-annotation\r\n                [angle]=\"visualConfig.labelAngle\"\r\n                [radius]=\"visualConfig.labelRadius\"\r\n                zIndex=\"1\"\r\n                [content]=\"annotationHtml\">\r\n              </e-annotation>\r\n            </e-annotations>\r\n          }\r\n\r\n        </e-axis>\r\n      </e-axes>\r\n\r\n    </ejs-circulargauge>\r\n  </div>\r\n\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden}.gauge-container{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden;background:#fff;border-radius:8px}.gauge-header-title{padding:10px 14px 2px;font-size:clamp(.85rem,2.2vw,1.05rem);font-weight:600;color:#1e293b;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;flex-shrink:0}.gauge-wrapper{display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-height:240px;flex:1;min-width:0;overflow:hidden}:host ::ng-deep ejs-circulargauge{display:block;width:100%!important;height:100%!important;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CircularGaugeModule }, { kind: "component", type: i1$1.CircularGaugeComponent, selector: "ejs-circulargauge", inputs: ["allowImageExport", "allowMargin", "allowPdfExport", "allowPrint", "allowRangePreRender", "animationDuration", "axes", "background", "border", "centerX", "centerY", "description", "enablePersistence", "enablePointerDrag", "enableRangeDrag", "enableRtl", "height", "legendSettings", "locale", "margin", "moveToCenter", "tabIndex", "theme", "title", "titleStyle", "tooltip", "useGroupingSeparator", "width"], outputs: ["animationComplete", "annotationRender", "axisLabelRender", "beforePrint", "dragEnd", "dragMove", "dragStart", "gaugeMouseDown", "gaugeMouseLeave", "gaugeMouseMove", "gaugeMouseUp", "legendRender", "load", "loaded", "radiusCalculate", "resized", "tooltipRender"] }, { kind: "directive", type: i1$1.AnnotationDirective, selector: "e-annotations>e-annotation", inputs: ["angle", "autoAngle", "content", "description", "radius", "textStyle", "zIndex"] }, { kind: "directive", type: i1$1.AnnotationsDirective, selector: "ej-circulargauge>e-axes>e-axis>e-annotations" }, { kind: "directive", type: i1$1.RangeDirective, selector: "e-ranges>e-range", inputs: ["color", "end", "endWidth", "legendText", "linearGradient", "offset", "opacity", "position", "radialGradient", "radius", "roundedCornerRadius", "start", "startWidth"] }, { kind: "directive", type: i1$1.RangesDirective, selector: "ej-circulargauge>e-axes>e-axis>e-ranges" }, { kind: "directive", type: i1$1.PointerDirective, selector: "e-pointers>e-pointer", inputs: ["animation", "border", "cap", "color", "description", "enableDrag", "imageUrl", "linearGradient", "markerHeight", "markerShape", "markerWidth", "needleEndWidth", "needleStartWidth", "needleTail", "offset", "pointerWidth", "position", "radialGradient", "radius", "roundedCornerRadius", "text", "textStyle", "type", "value"] }, { kind: "directive", type: i1$1.PointersDirective, selector: "ej-circulargauge>e-axes>e-axis>e-pointers" }, { kind: "directive", type: i1$1.AxisDirective, selector: "e-axes>e-axis", inputs: ["annotations", "background", "direction", "endAngle", "hideIntersectingLabel", "labelStyle", "lineStyle", "majorTicks", "maximum", "minimum", "minorTicks", "pointers", "radius", "rangeGap", "ranges", "roundingPlaces", "showLastLabel", "startAndEndRangeGap", "startAngle"] }, { kind: "directive", type: i1$1.AxesDirective, selector: "ej-circulargauge>e-axes" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: GaugeChartSyncfusionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yw-gauge-chart-syncfusion', standalone: true, imports: [CommonModule, CircularGaugeModule], providers: [AnnotationsService, GaugeTooltipService], template: "<div class=\"gauge-container\">\r\n\r\n  @if (visualConfig && visualConfig.title) {\r\n    <div class=\"gauge-header-title\" [title]=\"visualConfig.title\">\r\n      {{ visualConfig.title }}\r\n    </div>\r\n  }\r\n\r\n  <div class=\"gauge-wrapper\">\r\n    <ejs-circulargauge\r\n      #circulargauge\r\n      [id]=\"idComponent\"\r\n      [title]=\"''\"\r\n      height=\"100%\"\r\n      width=\"100%\"\r\n      [enablePointerDrag]=\"false\"\r\n      [tooltip]=\"{ enable: visualConfig.enableTooltip }\"\r\n      (loaded)=\"onGaugeLoaded($event)\">\r\n\r\n      <e-axes>\r\n        <e-axis\r\n          [minimum]=\"visualConfig.minimum\"\r\n          [maximum]=\"visualConfig.maximum\"\r\n          [startAngle]=\"visualConfig.startAngle\"\r\n          [endAngle]=\"visualConfig.endAngle\"\r\n          [lineStyle]=\"{ width: 0 }\"\r\n          [labelStyle]=\"visualConfig.showTicks ? { position: 'Outside', offset: visualConfig.labelOffset, font: { size: '11px' } } : { position: 'Outside', font: { size: '0px' } }\"\r\n          [majorTicks]=\"visualConfig.showTicks ? { position: visualConfig.tickPosition, width: 2, height: 10 } : { width: 0 }\"\r\n          [minorTicks]=\"visualConfig.showTicks ? { position: visualConfig.tickPosition, width: 1, height: 5 } : { width: 0 }\">\r\n\r\n          <!-- Rangos de color sobre el arco (modo convencional por rangos o modo ancho variable) -->\r\n          @if (!visualConfig.enableProgressTrack || visualConfig.isVariableWidth) {\r\n            <e-ranges>\r\n              @for (range of visualConfig.ranges; track $index) {\r\n                <e-range\r\n                  [start]=\"range.start\"\r\n                  [end]=\"range.end\"\r\n                  [color]=\"range.color\"\r\n                  [startWidth]=\"range.startWidth ?? range.width ?? 8\"\r\n                  [endWidth]=\"range.endWidth ?? range.width ?? 8\"\r\n                  [roundedCornerRadius]=\"range.roundedCornerRadius ?? 0\">\r\n                </e-range>\r\n              }\r\n            </e-ranges>\r\n          }\r\n\r\n          <!-- Punteros: tanto la l\u00EDnea de fondo (vac\u00EDo) como la de llenado (l\u00EDquido) usan RangeBar para alineaci\u00F3n perfecta -->\r\n          <e-pointers>\r\n            @if (visualConfig.enableProgressTrack && !visualConfig.isVariableWidth) {\r\n              <!-- L\u00EDnea 1: Fondo / vac\u00EDo (del m\u00EDnimo al m\u00E1ximo) -->\r\n              <e-pointer\r\n                type=\"RangeBar\"\r\n                [value]=\"visualConfig.maximum\"\r\n                [color]=\"visualConfig.trackColor\"\r\n                [pointerWidth]=\"visualConfig.progressWidth\"\r\n                [roundedCornerRadius]=\"visualConfig.cornerRadius\"\r\n                [animation]=\"{ enable: false }\">\r\n              </e-pointer>\r\n\r\n              <!-- L\u00EDnea 2: Llenado progresivo / l\u00EDquido (del m\u00EDnimo al valor actual) -->\r\n              <e-pointer\r\n                type=\"RangeBar\"\r\n                [value]=\"gaugePoint.value\"\r\n                [color]=\"visualConfig.progressColor\"\r\n                [pointerWidth]=\"visualConfig.progressWidth\"\r\n                [roundedCornerRadius]=\"visualConfig.cornerRadius\"\r\n                [animation]=\"{ enable: true, duration: 900 }\">\r\n              </e-pointer>\r\n            }\r\n\r\n            @if ((!visualConfig.enableProgressTrack || visualConfig.showNeedleWithProgress) && (!visualConfig.isVariableWidth || visualConfig.showNeedleWithProgress)) {\r\n              <e-pointer\r\n                [value]=\"gaugePoint.value\"\r\n                type=\"Needle\"\r\n                [color]=\"visualConfig.pointerColor\"\r\n                [needleTail]=\"{ length: '18%' }\"\r\n                [cap]=\"{ radius: 8, color: visualConfig.pointerColor }\">\r\n              </e-pointer>\r\n            }\r\n          </e-pointers>\r\n\r\n          <!-- Etiqueta central con el valor -->\r\n          @if (visualConfig.showLabel) {\r\n            <e-annotations>\r\n              <e-annotation\r\n                [angle]=\"visualConfig.labelAngle\"\r\n                [radius]=\"visualConfig.labelRadius\"\r\n                zIndex=\"1\"\r\n                [content]=\"animatedLabelText || gaugePoint.text\"\r\n                [textStyle]=\"{\r\n                  size: currentLabelSize || visualConfig.labelSize,\r\n                  fontWeight: visualConfig.labelWeight,\r\n                  color: visualConfig.labelColor,\r\n                  fontFamily: 'inherit',\r\n                  fontStyle: 'normal',\r\n                  opacity: 1\r\n                }\">\r\n              </e-annotation>\r\n            </e-annotations>\r\n          }\r\n\r\n        </e-axis>\r\n      </e-axes>\r\n\r\n    </ejs-circulargauge>\r\n  </div>\r\n\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden}.gauge-container{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden;background:#fff;border-radius:8px}.gauge-header-title{padding:10px 14px 2px;font-size:clamp(.85rem,2.2vw,1.05rem);font-weight:600;color:#1e293b;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;flex-shrink:0}.gauge-wrapper{display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-height:240px;flex:1;min-width:0;overflow:hidden}:host ::ng-deep ejs-circulargauge{display:block;width:100%!important;height:100%!important;flex-grow:1}\n"] }]
+            args: [{ selector: 'yw-gauge-chart-syncfusion', standalone: true, imports: [CommonModule, CircularGaugeModule], providers: [AnnotationsService, GaugeTooltipService], template: "<div class=\"gauge-container\">\r\n\r\n  @if (visualConfig && visualConfig.title) {\r\n    <div class=\"gauge-header-title\" [title]=\"visualConfig.title\">\r\n      {{ visualConfig.title }}\r\n    </div>\r\n  }\r\n\r\n  <div class=\"gauge-wrapper\">\r\n    <ejs-circulargauge\r\n      #circulargauge\r\n      [id]=\"idComponent\"\r\n      [title]=\"''\"\r\n      height=\"100%\"\r\n      width=\"100%\"\r\n      [enablePointerDrag]=\"false\"\r\n      [tooltip]=\"{ enable: visualConfig.enableTooltip }\"\r\n      (loaded)=\"onGaugeLoaded($event)\">\r\n\r\n      <e-axes>\r\n        <e-axis\r\n          [minimum]=\"visualConfig.minimum\"\r\n          [maximum]=\"visualConfig.maximum\"\r\n          [startAngle]=\"visualConfig.startAngle\"\r\n          [endAngle]=\"visualConfig.endAngle\"\r\n          [lineStyle]=\"{ width: 0 }\"\r\n          [labelStyle]=\"visualConfig.showTicks ? { position: 'Outside', offset: visualConfig.labelOffset, font: { size: '11px' } } : { position: 'Outside', font: { size: '0px' } }\"\r\n          [majorTicks]=\"visualConfig.showTicks ? { position: visualConfig.tickPosition, width: 2, height: 10 } : { width: 0 }\"\r\n          [minorTicks]=\"visualConfig.showTicks ? { position: visualConfig.tickPosition, width: 1, height: 5 } : { width: 0 }\">\r\n\r\n          <!-- Rangos de color sobre el arco (modo convencional por rangos o modo ancho variable) -->\r\n          @if (!visualConfig.enableProgressTrack || visualConfig.isVariableWidth) {\r\n            <e-ranges>\r\n              @for (range of visualConfig.ranges; track $index) {\r\n                <e-range\r\n                  [start]=\"range.start\"\r\n                  [end]=\"range.end\"\r\n                  [color]=\"range.color\"\r\n                  [startWidth]=\"range.startWidth ?? range.width ?? 8\"\r\n                  [endWidth]=\"range.endWidth ?? range.width ?? 8\"\r\n                  [roundedCornerRadius]=\"range.roundedCornerRadius ?? 0\">\r\n                </e-range>\r\n              }\r\n            </e-ranges>\r\n          }\r\n\r\n          <!-- Punteros: tanto la l\u00EDnea de fondo (vac\u00EDo) como la de llenado (l\u00EDquido) usan RangeBar para alineaci\u00F3n perfecta -->\r\n          <e-pointers>\r\n            @if (visualConfig.enableProgressTrack && !visualConfig.isVariableWidth) {\r\n              <!-- L\u00EDnea 1: Fondo / vac\u00EDo (del m\u00EDnimo al m\u00E1ximo) -->\r\n              <e-pointer\r\n                type=\"RangeBar\"\r\n                [value]=\"visualConfig.maximum\"\r\n                [color]=\"visualConfig.trackColor\"\r\n                [pointerWidth]=\"visualConfig.progressWidth\"\r\n                [roundedCornerRadius]=\"visualConfig.cornerRadius\"\r\n                [animation]=\"{ enable: false }\">\r\n              </e-pointer>\r\n\r\n              <!-- L\u00EDnea 2: Llenado progresivo / l\u00EDquido (del m\u00EDnimo al valor actual) -->\r\n              <e-pointer\r\n                type=\"RangeBar\"\r\n                [value]=\"gaugePoint.value\"\r\n                [color]=\"visualConfig.progressColor\"\r\n                [pointerWidth]=\"visualConfig.progressWidth\"\r\n                [roundedCornerRadius]=\"visualConfig.cornerRadius\"\r\n                [animation]=\"{ enable: true, duration: 900 }\">\r\n              </e-pointer>\r\n            }\r\n\r\n            @if ((!visualConfig.enableProgressTrack || visualConfig.showNeedleWithProgress) && (!visualConfig.isVariableWidth || visualConfig.showNeedleWithProgress)) {\r\n              <e-pointer\r\n                [value]=\"gaugePoint.value\"\r\n                type=\"Needle\"\r\n                [color]=\"visualConfig.pointerColor\"\r\n                [needleTail]=\"{ length: '18%' }\"\r\n                [cap]=\"{ radius: 8, color: visualConfig.pointerColor }\">\r\n              </e-pointer>\r\n            }\r\n          </e-pointers>\r\n\r\n          <!-- Etiqueta central con el valor -->\r\n          @if (visualConfig.showLabel) {\r\n            <e-annotations>\r\n              <e-annotation\r\n                [angle]=\"visualConfig.labelAngle\"\r\n                [radius]=\"visualConfig.labelRadius\"\r\n                zIndex=\"1\"\r\n                [content]=\"annotationHtml\">\r\n              </e-annotation>\r\n            </e-annotations>\r\n          }\r\n\r\n        </e-axis>\r\n      </e-axes>\r\n\r\n    </ejs-circulargauge>\r\n  </div>\r\n\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden}.gauge-container{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden;background:#fff;border-radius:8px}.gauge-header-title{padding:10px 14px 2px;font-size:clamp(.85rem,2.2vw,1.05rem);font-weight:600;color:#1e293b;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;flex-shrink:0}.gauge-wrapper{display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-height:240px;flex:1;min-width:0;overflow:hidden}:host ::ng-deep ejs-circulargauge{display:block;width:100%!important;height:100%!important;flex-grow:1}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { gaugeInstance: [{
                 type: ViewChild,
                 args: ['circulargauge']
@@ -2870,1822 +2917,1840 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                 args: ['config']
             }] } });
 
-/*BEGIN - COMPONENTES VALIDOS PARA WIDGET*/
-class YwDashboardWidgetComponent {
-    constructor() {
-        this.componentWidgetId = '';
-        this.typeComponent = '';
-        this.varShowConfigButtons = false;
-        this.styleWidget = input(DEFAULT_WIDGET_STYLE, ...(ngDevMode ? [{ debugName: "styleWidget" }] : []));
-        // Signal calculada que combina los valores recibidos con los valores por defecto
-        this.instanceStyleWidget = computed(() => ({
-            widgetBackgroundColor: this.styleWidget()?.widgetBackgroundColor ?? DEFAULT_WIDGET_STYLE.widgetBackgroundColor,
-            widgetBorderColor: this.styleWidget()?.widgetBorderColor ?? DEFAULT_WIDGET_STYLE.widgetBorderColor
-        }), ...(ngDevMode ? [{ debugName: "instanceStyleWidget" }] : []));
-        this.configWidget = {
-            widgetId: '',
-            title: '',
-            typeComponent: '',
-            showConfigButtons: false,
-            widgetStyle: DEFAULT_WIDGET_STYLE,
-            layoutConfig: { id: '', w: 0, h: 0, content: undefined },
-            controlConfig: {},
-            controlTables: []
-        };
-        this.controlConfig = {};
-        this.controlData = {};
-        this.isLocked = model(false, ...(ngDevMode ? [{ debugName: "isLocked" }] : []));
-        this.isMaximized = signal(false, ...(ngDevMode ? [{ debugName: "isMaximized" }] : []));
-        this.eventDeleteRequest = output();
-        this.eventLockToggleRequest = output();
-        this.eventMaximizeToggleRequest = output();
-        this.eventShowConfigFormRequest = output();
+const parseSyncFusionData = (allTablesData, configData_) => {
+    if (!allTablesData || !configData_) {
+        return { series: [], labelData: {} };
     }
-    ngOnInit() {
-        this.componentWidgetId = 'cmpnt-' + this.configWidget.widgetId;
-        this.typeComponent = this.configWidget.typeComponent;
-        this.dataWidget = { idComponent: this.componentWidgetId,
-            controlConfig: this.controlConfig,
-            controlData: this.controlData
-        };
-        console.log('DATOS INICIALES INIT:');
-        console.log(this.dataWidget);
+    console.log("bubble data:--", allTablesData, configData_);
+    //  SI LO MANDAN COMO UN ARREGLO PLANO, LO ENVOLVEMOS AUTOMÁTICAMENTE
+    if (Array.isArray(allTablesData)) {
+        const defaultTableName = configData_?.configData?.table || 'default';
+        allTablesData = { [defaultTableName]: allTablesData };
     }
-    ngAfterViewInit() {
-        this.varShowConfigButtons = this.configWidget.showConfigButtons || false;
+    const { ruleColorPoint, configData, xLabelText, yLabelText, title, chartoColoredLine, opacity, emptyPointSettings } = configData_;
+    console.log("configData_:.::", configData_);
+    const cfg = configData || {};
+    const { xAxis, yAxis, joins, configJoins, table, serie, tooltip, legends } = cfg;
+    let series = [];
+    // Función auxiliar robusta para obtener propiedades (soporta notación con puntos de los joins)
+    // const getNestedValue = (obj: any, path: string) => {
+    //   if (!obj || !path) return undefined;
+    //   if (obj[path] !== undefined) return obj[path];
+    //   return path.split('.').reduce((acc, part) => (acc && acc[part] !== undefined ? acc[part] : undefined), obj);
+    // };
+    const sortByXAxis = (data) => {
+        if (!xAxis)
+            return data;
+        return [...data].sort((a, b) => {
+            const aValue = getNestedValue(a, xAxis);
+            const bValue = getNestedValue(b, xAxis);
+            if (aValue == null)
+                return 1;
+            if (bValue == null)
+                return -1;
+            return String(aValue).localeCompare(String(bValue), undefined, { numeric: true, sensitivity: 'base' });
+        });
+    };
+    if (joins === true) {
+        if (!configJoins) {
+            series = [];
+        }
+        else {
+            const unifiedTable = resolveJoinedTableData(allTablesData, configJoins);
+            console.log('unifiedTable bubble', unifiedTable);
+            if (unifiedTable && unifiedTable.length > 0) {
+                // const validRawData = unifiedTable.filter(
+                //   (item: any) =>
+                //     item &&
+                //     xAxis &&
+                //     getNestedValue(item, xAxis) !== undefined &&
+                //     getNestedValue(item, xAxis) !== null,
+                // );
+                const validRawData = unifiedTable.filter((item) => item &&
+                    xAxis &&
+                    getNestedValue(item, xAxis) !== undefined &&
+                    getNestedValue(item, xAxis) !== null);
+                const orderedRawData = sortByXAxis(validRawData);
+                if (orderedRawData.length > 0) {
+                    if (serie) {
+                        // 2. Agrupamos los datos por el valor de la serie (ej. sucursal o vendedor)
+                        const groupedBySerie = orderedRawData.reduce((acc, item) => {
+                            const serieVal = getNestedValue(item, serie);
+                            const serieKey = serieVal !== undefined && serieVal !== null
+                                ? String(serieVal)
+                                : 'Desconocido';
+                            if (!acc[serieKey]) {
+                                acc[serieKey] = [];
+                            }
+                            acc[serieKey].push(item);
+                            return acc;
+                        }, {});
+                        series = Object.entries(groupedBySerie).map(([serieName, groupItems]) => {
+                            const orderedGroupItems = [...groupItems].sort((a, b) => {
+                                const aValue = getNestedValue(a, xAxis);
+                                const bValue = getNestedValue(b, xAxis);
+                                return String(aValue).localeCompare(String(bValue), undefined, {
+                                    numeric: true,
+                                    sensitivity: 'base'
+                                });
+                            });
+                            console.log("SERIES NAME:", orderedGroupItems);
+                            const dataSource = orderedGroupItems.map((item) => {
+                                const rawVal = getNestedValue(item, yAxis);
+                                const valorFinal = rawVal !== undefined
+                                    ? typeof rawVal === 'number'
+                                        ? rawVal
+                                        : Number(rawVal) || 0
+                                    : 0;
+                                const sizeFinal = Math.abs(valorFinal) !== 0 ? Math.abs(valorFinal) * 0.05 : 0;
+                                return {
+                                    x: String(getNestedValue(item, xAxis)),
+                                    y: valorFinal,
+                                    size: sizeFinal,
+                                    name: String(getNestedValue(item, xAxis)),
+                                    // ...(chartoColoredLine
+                                    //   ? { color: getRandomProfessionalHex() }
+                                    //   : {})
+                                };
+                            });
+                            return {
+                                name: serieName === 'default' ? 'Serie 1' : serieName,
+                                dataSource: aggregateByX(dataSource),
+                                opacity: opacity,
+                                emptyPointSettings: emptyPointSettings,
+                                // dashArray: dashArray !== undefined ? dashArray : undefined,
+                                // width: width !== undefined ? width : undefined,
+                                // widthLine: widthLine !== undefined ? widthLine : undefined,
+                            };
+                        });
+                    }
+                    else {
+                        const dataSource = orderedRawData.map((item) => {
+                            let valorFinal = 0;
+                            let sizeFinal = 0;
+                            // const shouldColorLine = chartoColoredLine;
+                            const rawVal = getNestedValue(item, yAxis);
+                            // const rawSize = getNestedValue(item, size); // <--- Extraer el valor real
+                            if (rawVal !== undefined) {
+                                valorFinal = typeof rawVal === 'number' ? rawVal : Number(rawVal) || 0;
+                            }
+                            // if (rawSize !== undefined) {
+                            sizeFinal = Math.abs(valorFinal) !== 0 ? Math.abs(valorFinal) * 0.05 : 0;
+                            // }
+                            return {
+                                x: String(getNestedValue(item, xAxis)),
+                                y: valorFinal,
+                                size: sizeFinal, // <--- Valor numérico extraído
+                                name: String(getNestedValue(item, xAxis)),
+                                // ...(shouldColorLine ? { color: getRandomProfessionalHex() } : {})
+                            };
+                        });
+                        series = [
+                            {
+                                name: xAxis.split(".")[0] && xAxis !== 'default' ? xAxis.split(".")[0] : 'Serie Join',
+                                dataSource: aggregateByX(dataSource),
+                                opacity: opacity,
+                                emptyPointSettings: emptyPointSettings,
+                                // dashArray: dashArray !== undefined ? dashArray : undefined,
+                                // width: width !== undefined ? width : undefined,
+                                // widthLine: widthLine !== undefined ? widthLine : undefined,
+                            }
+                        ];
+                    }
+                }
+            }
+        }
     }
-    ngOnChanges(changes) {
-        if (changes['configWidget']) {
-            //console.log('Nuevo valor configWidget:', this.configWidget);
-            this.varShowConfigButtons = this.configWidget.showConfigButtons || false;
-            ;
+    else {
+        let normalizedTables = [];
+        if (Array.isArray(table)) {
+            normalizedTables = table.filter((t) => typeof t === 'string' && t.trim() !== '');
         }
-        if (changes['controlConfig']) {
-            console.log('Nuevo valor controlConfig:', this.controlConfig);
+        else if (typeof table === 'string' && table.trim() !== '') {
+            normalizedTables = [table];
         }
-        if (changes['controlData']) {
-            //console.log('Nuevo valor controlData:', this.controlData);
-            this.dataWidget = { idComponent: this.componentWidgetId,
-                controlConfig: this.controlConfig,
-                controlData: this.controlData
-            };
+        else {
+            normalizedTables = Object.keys(allTablesData);
         }
-    }
-    /* BEGIN - BARRA DE EVENTOS DEL WIDGET */
-    //Eliminacion de Widget - Conectado al Dashboard
-    onDeleteClick() {
-        this.eventDeleteRequest.emit(this.configWidget.widgetId);
-    }
-    onLockClick() {
-        // Invertimos el estado local y notificamos al padre
-        const nextState = !this.isLocked();
-        this.isLocked.set(nextState);
-        this.eventLockToggleRequest.emit({ widgetId: this.configWidget.widgetId, shouldLock: nextState });
-    }
-    onMaximizeClick() {
-        const nextState = !this.isMaximized();
-        this.isMaximized.set(nextState);
-        this.eventMaximizeToggleRequest.emit({ widgetId: this.configWidget.widgetId, shouldMaximize: nextState });
-    }
-    onShowFormConfigClick() {
-        this.eventShowConfigFormRequest.emit(this.configWidget.widgetId);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwDashboardWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: YwDashboardWidgetComponent, isStandalone: true, selector: "yw-dashboard-widget", inputs: { styleWidget: { classPropertyName: "styleWidget", publicName: "styleWidget", isSignal: true, isRequired: false, transformFunction: null }, configWidget: { classPropertyName: "configWidget", publicName: "configWidget", isSignal: false, isRequired: false, transformFunction: null }, controlConfig: { classPropertyName: "controlConfig", publicName: "controlConfig", isSignal: false, isRequired: false, transformFunction: null }, controlData: { classPropertyName: "controlData", publicName: "controlData", isSignal: false, isRequired: false, transformFunction: null }, isLocked: { classPropertyName: "isLocked", publicName: "isLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isLocked: "isLockedChange", eventDeleteRequest: "eventDeleteRequest", eventLockToggleRequest: "eventLockToggleRequest", eventMaximizeToggleRequest: "eventMaximizeToggleRequest", eventShowConfigFormRequest: "eventShowConfigFormRequest" }, host: { properties: { "style.--widget-bg": "instanceStyleWidget().widgetBackgroundColor", "style.--widget-border-color": "instanceStyleWidget().widgetBorderColor" } }, usesOnChanges: true, ngImport: i0, template: "\r\n<!-- <div class=\"widget-action-bar\">    \r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-action\" (click)=\"onLockClick()\">{{ isLocked() ? '\uD83D\uDD12' : '\uD83D\uDD13' }}</button>\r\n      <button class=\"btn-action\" (click)=\"onMaximizeClick()\">{{ isMaximized() ? '\uD83D\uDDD7' : '\uD83D\uDDD6' }}</button>\r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-delete\" (click)=\"onDeleteClick()\">\uD83D\uDDD1\uFE0F</button>\r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-config\" (click)=\"onShowFormConfigClick()\">\u2699\uFE0F</button>\r\n</div> -->\r\n\r\n<div class=\"widget-action-bar\">\r\n      <!-- Bot\u00F3n Bloquear / Desbloquear -->\r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-action\" (click)=\"onLockClick()\" [title]=\"isLocked() ? 'Desbloquear' : 'Bloquear'\">\r\n        <svg *ngIf=\"isLocked(); else unlockedIcon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path></svg>\r\n        <ng-template #unlockedIcon>\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect><path d=\"M7 11V7a5 5 0 0 1 9.9-1\"></path></svg>\r\n        </ng-template>\r\n      </button>\r\n\r\n      <!-- Bot\u00F3n Maximizar / Restaurar -->\r\n      <button class=\"btn-action\" (click)=\"onMaximizeClick()\" [title]=\"isMaximized() ? 'Restaurar' : 'Maximizar'\">\r\n        <svg *ngIf=\"isMaximized(); else maxIcon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3\"></path></svg>\r\n        <ng-template #maxIcon>\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\"></path></svg>\r\n        </ng-template>\r\n      </button>\r\n\r\n      <!-- Bot\u00F3n Eliminar -->\r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-delete\" (click)=\"onDeleteClick()\" title=\"Eliminar\">\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"></polyline><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"></path></svg>\r\n      </button>\r\n\r\n      <!-- Bot\u00F3n Configuraci\u00F3n -->\r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-config\" (click)=\"onShowFormConfigClick()\" title=\"Configurar\">\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"3\"></circle><path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"></path></svg>\r\n      </button>\r\n</div>\r\n\r\n<div class=\"widget-content-wrapper\">\r\n     @if ( typeComponent == 'dummy' ) {\r\n       <ng-container *ngTemplateOutlet=\"testdummy; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'empty-visual' ) {\r\n       <ng-container *ngTemplateOutlet=\"emptyvisual; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'chart-bar' ) {\r\n       <ng-container *ngTemplateOutlet=\"chartbar; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'chart-line' ) {\r\n       <ng-container *ngTemplateOutlet=\"chartline; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'chart-doughnut' ) {\r\n       <ng-container *ngTemplateOutlet=\"chartdoughnut; context: { control: dataWidget }\"></ng-container>\r\n     }  \r\n     @if ( typeComponent == 'chart-gauge' ) {\r\n       <ng-container *ngTemplateOutlet=\"chartgauge; context: { control: dataWidget }\"></ng-container>\r\n     }  \r\n     \r\n     \r\n</div>\r\n\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  DUMMY TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #testdummy let-control = \"control\">\r\n    <lib-test-chart [idComponent]=\"control.idComponent\" >        \r\n    </lib-test-chart>\r\n</ng-template>\r\n<!--------------------------------------------------------------->\r\n<!----------------------  EMPTY VISUAL TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #emptyvisual let-control = \"control\">\r\n    <yw-empty-visual [idComponent]=\"control.idComponent\"\r\n                     [config]=\"control.controlConfig\" \r\n    >        \r\n    </yw-empty-visual>\r\n</ng-template>\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  BAR CHART TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #chartbar let-control = \"control\">\r\n  <yw-bar-chart [idComponent]=\"control.idComponent\"\r\n                [chartData]=\"control.controlData\"\r\n                [config]=\"control.controlConfig\"    \r\n  >\r\n  </yw-bar-chart>\r\n</ng-template>\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  LINE CHART TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #chartline let-control = \"control\">\r\n  <yw-line-chart [idComponent]=\"control.idComponent\"\r\n                 [chartData]=\"control.controlData\"\r\n                 [config]=\"control.controlConfig\"  \r\n  >\r\n  </yw-line-chart>\r\n</ng-template>\r\n\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  LINE DOUGHNUT TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #chartdoughnut let-control = \"control\">\r\n  <yw-pie-chart [idComponent]=\"control.idComponent\"\r\n                 [chartData]=\"control.controlData\"\r\n                 [config]=\"control.controlConfig\"  \r\n  >\r\n  </yw-pie-chart>\r\n</ng-template>\r\n\r\n  \r\n<!--------------------------------------------------------------->\r\n<!----------------------  LINE GAUGE TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #chartgauge let-control = \"control\">\r\n  <yw-gauge-chart [idComponent]=\"control.idComponent\"\r\n                  [chartData]=\"control.controlData\"\r\n                  [config]=\"control.controlConfig\"  \r\n  >\r\n  </yw-gauge-chart>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;flex-direction:column;width:100%;overflow:hidden;box-sizing:border-box;background-color:var(--widget-bg, #ffffff);border:1px solid var(--widget-border-color, #007bff)}:host *,:host *:before,:host *:after{box-sizing:border-box}.widget-action-bar{display:flex;justify-content:flex-end;gap:4px;padding:5px 10px;flex-shrink:0;width:100%}.widget-content-wrapper{width:100%;flex-grow:1;height:0;display:flex;flex-direction:column}.widget-action-bar button,.widget-action-bar .btn-action,.widget-action-bar .btn-delete,.widget-action-bar .btn-config{background:transparent;border:1px solid #d9d9d9;border-radius:4px;cursor:pointer;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;color:#595959;padding:0;transition:all .2s ease}.widget-action-bar button svg,.widget-action-bar .btn-action svg,.widget-action-bar .btn-delete svg,.widget-action-bar .btn-config svg{width:14px;height:14px}.widget-action-bar button:hover,.widget-action-bar .btn-action:hover,.widget-action-bar .btn-delete:hover,.widget-action-bar .btn-config:hover{background-color:#f5f5f5;color:#262626;border-color:#bfbfbf}.widget-action-bar button:active,.widget-action-bar .btn-action:active,.widget-action-bar .btn-delete:active,.widget-action-bar .btn-config:active{background-color:#e6e6e6}.widget-action-bar .btn-delete:hover{background-color:#fff1f0;color:#ff4d4f;border-color:#ffa39e}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TestChartComponent, selector: "lib-test-chart", inputs: ["idComponent"] }, { kind: "component", type: YwEmptyVisualComponent, selector: "yw-empty-visual", inputs: ["idComponent", "config"] }, { kind: "component", type: LineChartComponent, selector: "yw-line-chart", inputs: ["chartData", "config", "idComponent"] }, { kind: "component", type: BarChartComponent, selector: "yw-bar-chart", inputs: ["chartData", "config", "idComponent"] }, { kind: "component", type: PieChartComponent, selector: "yw-pie-chart", inputs: ["idComponent", "chartData", "config"] }, { kind: "component", type: GaugeChartComponent, selector: "yw-gauge-chart", inputs: ["idComponent", "chartData", "config"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwDashboardWidgetComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yw-dashboard-widget', standalone: true, imports: [CommonModule,
-                        TestChartComponent,
-                        YwEmptyVisualComponent,
-                        LineChartComponent,
-                        BarChartComponent,
-                        PieChartComponent,
-                        GaugeChartComponent
-                    ], host: {
-                        '[style.--widget-bg]': 'instanceStyleWidget().widgetBackgroundColor',
-                        '[style.--widget-border-color]': 'instanceStyleWidget().widgetBorderColor'
-                    }, template: "\r\n<!-- <div class=\"widget-action-bar\">    \r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-action\" (click)=\"onLockClick()\">{{ isLocked() ? '\uD83D\uDD12' : '\uD83D\uDD13' }}</button>\r\n      <button class=\"btn-action\" (click)=\"onMaximizeClick()\">{{ isMaximized() ? '\uD83D\uDDD7' : '\uD83D\uDDD6' }}</button>\r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-delete\" (click)=\"onDeleteClick()\">\uD83D\uDDD1\uFE0F</button>\r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-config\" (click)=\"onShowFormConfigClick()\">\u2699\uFE0F</button>\r\n</div> -->\r\n\r\n<div class=\"widget-action-bar\">\r\n      <!-- Bot\u00F3n Bloquear / Desbloquear -->\r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-action\" (click)=\"onLockClick()\" [title]=\"isLocked() ? 'Desbloquear' : 'Bloquear'\">\r\n        <svg *ngIf=\"isLocked(); else unlockedIcon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path></svg>\r\n        <ng-template #unlockedIcon>\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect><path d=\"M7 11V7a5 5 0 0 1 9.9-1\"></path></svg>\r\n        </ng-template>\r\n      </button>\r\n\r\n      <!-- Bot\u00F3n Maximizar / Restaurar -->\r\n      <button class=\"btn-action\" (click)=\"onMaximizeClick()\" [title]=\"isMaximized() ? 'Restaurar' : 'Maximizar'\">\r\n        <svg *ngIf=\"isMaximized(); else maxIcon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3\"></path></svg>\r\n        <ng-template #maxIcon>\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\"></path></svg>\r\n        </ng-template>\r\n      </button>\r\n\r\n      <!-- Bot\u00F3n Eliminar -->\r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-delete\" (click)=\"onDeleteClick()\" title=\"Eliminar\">\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"></polyline><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"></path></svg>\r\n      </button>\r\n\r\n      <!-- Bot\u00F3n Configuraci\u00F3n -->\r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-config\" (click)=\"onShowFormConfigClick()\" title=\"Configurar\">\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"3\"></circle><path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"></path></svg>\r\n      </button>\r\n</div>\r\n\r\n<div class=\"widget-content-wrapper\">\r\n     @if ( typeComponent == 'dummy' ) {\r\n       <ng-container *ngTemplateOutlet=\"testdummy; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'empty-visual' ) {\r\n       <ng-container *ngTemplateOutlet=\"emptyvisual; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'chart-bar' ) {\r\n       <ng-container *ngTemplateOutlet=\"chartbar; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'chart-line' ) {\r\n       <ng-container *ngTemplateOutlet=\"chartline; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'chart-doughnut' ) {\r\n       <ng-container *ngTemplateOutlet=\"chartdoughnut; context: { control: dataWidget }\"></ng-container>\r\n     }  \r\n     @if ( typeComponent == 'chart-gauge' ) {\r\n       <ng-container *ngTemplateOutlet=\"chartgauge; context: { control: dataWidget }\"></ng-container>\r\n     }  \r\n     \r\n     \r\n</div>\r\n\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  DUMMY TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #testdummy let-control = \"control\">\r\n    <lib-test-chart [idComponent]=\"control.idComponent\" >        \r\n    </lib-test-chart>\r\n</ng-template>\r\n<!--------------------------------------------------------------->\r\n<!----------------------  EMPTY VISUAL TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #emptyvisual let-control = \"control\">\r\n    <yw-empty-visual [idComponent]=\"control.idComponent\"\r\n                     [config]=\"control.controlConfig\" \r\n    >        \r\n    </yw-empty-visual>\r\n</ng-template>\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  BAR CHART TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #chartbar let-control = \"control\">\r\n  <yw-bar-chart [idComponent]=\"control.idComponent\"\r\n                [chartData]=\"control.controlData\"\r\n                [config]=\"control.controlConfig\"    \r\n  >\r\n  </yw-bar-chart>\r\n</ng-template>\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  LINE CHART TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #chartline let-control = \"control\">\r\n  <yw-line-chart [idComponent]=\"control.idComponent\"\r\n                 [chartData]=\"control.controlData\"\r\n                 [config]=\"control.controlConfig\"  \r\n  >\r\n  </yw-line-chart>\r\n</ng-template>\r\n\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  LINE DOUGHNUT TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #chartdoughnut let-control = \"control\">\r\n  <yw-pie-chart [idComponent]=\"control.idComponent\"\r\n                 [chartData]=\"control.controlData\"\r\n                 [config]=\"control.controlConfig\"  \r\n  >\r\n  </yw-pie-chart>\r\n</ng-template>\r\n\r\n  \r\n<!--------------------------------------------------------------->\r\n<!----------------------  LINE GAUGE TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #chartgauge let-control = \"control\">\r\n  <yw-gauge-chart [idComponent]=\"control.idComponent\"\r\n                  [chartData]=\"control.controlData\"\r\n                  [config]=\"control.controlConfig\"  \r\n  >\r\n  </yw-gauge-chart>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;flex-direction:column;width:100%;overflow:hidden;box-sizing:border-box;background-color:var(--widget-bg, #ffffff);border:1px solid var(--widget-border-color, #007bff)}:host *,:host *:before,:host *:after{box-sizing:border-box}.widget-action-bar{display:flex;justify-content:flex-end;gap:4px;padding:5px 10px;flex-shrink:0;width:100%}.widget-content-wrapper{width:100%;flex-grow:1;height:0;display:flex;flex-direction:column}.widget-action-bar button,.widget-action-bar .btn-action,.widget-action-bar .btn-delete,.widget-action-bar .btn-config{background:transparent;border:1px solid #d9d9d9;border-radius:4px;cursor:pointer;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;color:#595959;padding:0;transition:all .2s ease}.widget-action-bar button svg,.widget-action-bar .btn-action svg,.widget-action-bar .btn-delete svg,.widget-action-bar .btn-config svg{width:14px;height:14px}.widget-action-bar button:hover,.widget-action-bar .btn-action:hover,.widget-action-bar .btn-delete:hover,.widget-action-bar .btn-config:hover{background-color:#f5f5f5;color:#262626;border-color:#bfbfbf}.widget-action-bar button:active,.widget-action-bar .btn-action:active,.widget-action-bar .btn-delete:active,.widget-action-bar .btn-config:active{background-color:#e6e6e6}.widget-action-bar .btn-delete:hover{background-color:#fff1f0;color:#ff4d4f;border-color:#ffa39e}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { styleWidget: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleWidget", required: false }] }], configWidget: [{
-                type: Input
-            }], controlConfig: [{
-                type: Input
-            }], controlData: [{
-                type: Input
-            }], isLocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLocked", required: false }] }, { type: i0.Output, args: ["isLockedChange"] }], eventDeleteRequest: [{ type: i0.Output, args: ["eventDeleteRequest"] }], eventLockToggleRequest: [{ type: i0.Output, args: ["eventLockToggleRequest"] }], eventMaximizeToggleRequest: [{ type: i0.Output, args: ["eventMaximizeToggleRequest"] }], eventShowConfigFormRequest: [{ type: i0.Output, args: ["eventShowConfigFormRequest"] }] } });
+        series = normalizedTables
+            .map((tableName) => {
+            const rawData = (allTablesData && allTablesData[tableName]) ? allTablesData[tableName] : [];
+            if (!rawData || rawData.length === 0)
+                return null;
+            const orderedRawData = rawData.filter((item) => item && xAxis && getNestedValue(item, xAxis) !== undefined && getNestedValue(item, xAxis) !== null);
+            if (orderedRawData.length === 0)
+                return null;
+            const dataSource = orderedRawData.map((item) => {
+                let valorFinal = 0;
+                let sizeFinal = 0;
+                const shouldColorLine = chartoColoredLine;
+                const rawVal = getNestedValue(item, yAxis);
+                // const rawSize = getNestedValue(item, size);
+                if (rawVal !== undefined) {
+                    valorFinal = typeof rawVal === "number" ? rawVal : Number(rawVal) || 0;
+                }
+                // if (rawSize !== undefined) {
+                sizeFinal = Math.abs(valorFinal) !== 0 ? Math.abs(valorFinal) * 0.05 : 0;
+                // }
+                return {
+                    x: String(getNestedValue(item, xAxis)),
+                    y: valorFinal,
+                    size: sizeFinal, // <--- Valor numérico extraído
+                    name: String(getNestedValue(item, xAxis))
+                    // ...(shouldColorLine ? { color: getRandomProfessionalHex() } : {})
+                };
+            });
+            return {
+                name: tableName === 'default' ? xAxis : tableName,
+                dataSource: aggregateByX(dataSource),
+                opacity: opacity,
+                emptyPointSettings: emptyPointSettings,
+                // dashArray: dashArray !== undefined ? dashArray : undefined,
+                // width: width !== undefined ? width : undefined,
+                // widthLine: widthLine !== undefined ? widthLine : undefined,
+            };
+        })
+            .filter((item) => item !== null);
+    }
+    const labelData = {
+        title: title || "",
+        titleStyle: {
+            size: '16px',
+            fontWeight: '600',
+            color: '#2b2b2b',
+            fontFamily: 'Inherit',
+            textAlignment: 'Center'
+        },
+        axisX: {
+            valueType: 'Category',
+            // title: typeof xLabelText === 'string' ? xLabelText : 'Categoría',
+            // labelIntersectAction: 'Rotate90',
+            // labelIntersectAction: 'Rotate45',
+            majorGridLines: { width: 0 },
+            majorTickLines: { width: 0 },
+            lineStyle: { width: 0 },
+            labelStyle: { color: '#64748B', size: '12px', fontFamily: 'Inherit' }
+        },
+        axisY: {
+            title: typeof yLabelText === 'string' ? yLabelText : 'Valor',
+            minimum: 0,
+            edgeLabelPlacement: 'Shift',
+            lineStyle: { width: 0 },
+            majorTickLines: { width: 0 },
+            minorTickLines: { width: 0 },
+            majorGridLines: { width: 0.5, color: '#E2E8F0', dashArray: '4,4' },
+            labelStyle: { color: '#94A3B8', size: '12px', fontFamily: 'Inherit' },
+            titleStyle: { size: '12px', color: '#64748B', fontFamily: 'Inherit' }
+        },
+        marker: {
+            visible: true,
+            width: 8,
+            height: 8,
+            dataLabel: {
+                visible: true,
+                position: 'Top', // Centra el texto exactamente en el medio de la burbuja
+                name: 'text', // Asegúrate de que apunte al campo de tu data que trae el nombre (ej: 'text' o 'name')
+                font: {
+                    fontWeight: '600',
+                    color: '#334155', // Color del texto (oscuro para que contraste con el fondo claro) o '#FFFFFF' si prefieres blanco
+                    size: '12px',
+                    fontFamily: 'Inherit'
+                }
+            }
+        },
+        palettes: ['#6366F1', '#22D3EE', '#F59E0B', '#10B981', '#F43F5E'],
+        border: { width: 0 },
+        chartArea: { border: { width: 0 }, margin: { bottom: 12 } },
+        tooltip: {
+            ...(tooltip?.enable !== undefined ? { enable: tooltip.enable } : {}),
+            ...(tooltip?.format ? { format: tooltip.format } : {}),
+            ...(tooltip?.header ? { header: tooltip.header } : {}),
+            ...(tooltip?.shared !== undefined ? { shared: tooltip.shared } : {}),
+            enableHighlight: true,
+        },
+        legendSettings: {
+            visible: legends?.visible !== undefined ? legends.visible : undefined,
+            position: legends?.position !== undefined ? legends.position : undefined
+        },
+        ruleColorPoint: ruleColorPoint !== undefined ? ruleColorPoint : undefined
+    };
+    return {
+        series,
+        labelData
+    };
+};
 
-class YwBaseSlicerComponent {
-    constructor() {
-        // Inputs de configuración del rango de fechas
+class BubbleChartSyncfusionComponent {
+    constructor(elRef, cdr) {
+        this.elRef = elRef;
+        this.cdr = cdr;
         this.idComponent = '';
-        this.dataType = 'date';
-        this.label = input('Fecha', ...(ngDevMode ? [{ debugName: "label" }] : []));
-        this.min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : []));
-        this.max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : []));
-        this.step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
-        this.minCurrent = input(...(ngDevMode ? [undefined, { debugName: "minCurrent" }] : []));
-        this.maxCurrent = input(...(ngDevMode ? [undefined, { debugName: "maxCurrent" }] : []));
-        this.minNumber = 0;
-        this.maxNumber = 1000;
-        this.minDate = '2020-01-01';
-        this.maxDate = '2022-12-31';
-        // Evento de salida
-        this.rangeChange = output();
-        // Signals para las fechas seleccionadas
-        this.startDate = signal('2020-01-01', ...(ngDevMode ? [{ debugName: "startDate" }] : []));
-        this.endDate = signal('2022-09-22', ...(ngDevMode ? [{ debugName: "endDate" }] : []));
-        // Signals para los numeros seleccionadas
-        this.startVal = signal(0, ...(ngDevMode ? [{ debugName: "startVal" }] : []));
-        this.endVal = signal(1000, ...(ngDevMode ? [{ debugName: "endVal" }] : []));
-        this.minTimestamp = computed(() => new Date(this.minDate).getTime(), ...(ngDevMode ? [{ debugName: "minTimestamp" }] : []));
-        this.maxTimestamp = computed(() => new Date(this.maxDate).getTime(), ...(ngDevMode ? [{ debugName: "maxTimestamp" }] : []));
-        this.startTimestamp = computed(() => new Date(this.startDate()).getTime(), ...(ngDevMode ? [{ debugName: "startTimestamp" }] : []));
-        this.endTimestamp = computed(() => new Date(this.endDate()).getTime(), ...(ngDevMode ? [{ debugName: "endTimestamp" }] : []));
-        // Inicializar valores al arrancar
-        effect(() => {
-            if (this.dataType == 'date') {
-                this.startDate.set(this.minCurrent() || this.minDate);
-                this.endDate.set(this.maxCurrent() || this.maxDate);
-            }
-            if (this.dataType == 'number') {
-                this.startVal.set(this.minCurrent() || this.minNumber);
-                this.endVal.set(this.maxCurrent() || this.maxNumber);
-            }
-        }, { allowSignalWrites: true });
-        // Notificar al padre cada vez que cambien los valores
-        effect(() => {
-            if (this.dataType == 'date') {
-                this.rangeChange.emit({
-                    startDate: this.startDate(),
-                    endDate: this.endDate()
-                });
-            }
-            if (this.dataType == 'number') {
-                this.rangeChange.emit({
-                    minValue: this.startVal(),
-                    maxValue: this.endVal()
-                });
-            }
-        });
+        this.dataChartParse = [];
+        this.currentLabelSize = '';
+        this.currentWidgetWidth = 0; // Valor inicial por defecto
     }
     ngOnInit() {
-        if (this.dataType == 'date') {
-            this.minDate = this.min();
-            this.maxDate = this.max();
-            this.minTimestamp = computed(() => new Date(this.minDate).getTime(), ...(ngDevMode ? [{ debugName: "minTimestamp" }] : []));
-            this.maxTimestamp = computed(() => new Date(this.maxDate).getTime(), ...(ngDevMode ? [{ debugName: "maxTimestamp" }] : []));
-            this.startTimestamp = computed(() => new Date(this.startDate()).getTime(), ...(ngDevMode ? [{ debugName: "startTimestamp" }] : []));
-            this.endTimestamp = computed(() => new Date(this.endDate()).getTime(), ...(ngDevMode ? [{ debugName: "endTimestamp" }] : []));
-        }
-        if (this.dataType == 'number') {
-            this.minNumber = this.min();
-            this.maxNumber = this.max();
-        }
-    }
-    // Handlers para la entrada manual de fechas
-    onStartDateInput(value) {
-        if (value && value <= this.endDate()) {
-            this.startDate.set(value);
-        }
+        this.updateParsedData();
     }
-    onEndDateInput(value) {
-        if (value && value >= this.startDate()) {
-            this.endDate.set(value);
+    ngOnChanges(changes) {
+        if (changes['chartData'] || changes['config']) {
+            this.updateParsedData();
         }
     }
-    // Métodos para cambiar desde el Input Numérico
-    onStartInput(event) {
-        const value = Number(event.target.value);
-        if (!isNaN(value) && value <= this.endVal() && value >= this.min()) {
-            this.startVal.set(value);
-        }
+    ngAfterViewInit() {
+        this._startResizeObserver();
     }
-    onEndInput(event) {
-        const value = Number(event.target.value);
-        if (!isNaN(value) && value >= this.startVal() && value <= this.max()) {
-            this.endVal.set(value);
-        }
+    ngOnDestroy() {
+        this._resizeObserver?.disconnect();
     }
-    // Handlers para el movimiento del slider
-    onStartSliderChange(event) {
-        if (this.dataType == 'date') {
-            const val = Number(event.target.value);
-            const dateStr = new Date(val).toISOString().split('T')[0];
-            if (val < this.endTimestamp()) {
-                this.startDate.set(dateStr);
+    updateParsedData() {
+        if (this.chartData && this.config) {
+            const rawParsed = parseSyncFusionData(this.chartData, this.config);
+            this.dataChartParse = rawParsed.series;
+            this.labelData = rawParsed.labelData;
+            if (this.dataLabel && this.labelData) {
+                this.labelData.dataLabel = this.dataLabel;
             }
-        }
-        if (this.dataType == 'number') {
-            const val = Number(event.target.value);
-            if (val < this.endVal()) {
-                this.startVal.set(val);
+            this.cdr.markForCheck();
+            if (this.chartInstance) {
+                setTimeout(() => {
+                    this.chartInstance?.refresh();
+                });
             }
         }
     }
-    onEndSliderChange(event) {
-        if (this.dataType == 'date') {
-            const val = Number(event.target.value);
-            const dateStr = new Date(val).toISOString().split('T')[0];
-            if (val > this.startTimestamp()) {
-                this.endDate.set(dateStr);
+    pointRender(args) {
+        const yValue = Number(args.point.y);
+        // =====================================================
+        // EMPTY POINT / VALOR 0
+        // Tiene prioridad sobre ruleColorPoint
+        // =====================================================
+        if (yValue === 0) {
+            const emptyPoint = this.config.emptyPointSettings;
+            if (emptyPoint && emptyPoint !== '') {
+                args.fill = emptyPoint;
             }
+            return;
         }
-        if (this.dataType == 'number') {
-            const val = Number(event.target.value);
-            if (val > this.startVal()) {
-                this.endVal.set(val);
-            }
+        // =====================================================
+        // RULE COLOR POINT
+        // =====================================================
+        const configPoint = this.config.ruleColorPoint || null;
+        if (!configPoint) {
+            return;
+        }
+        let passesRule = false;
+        switch (configPoint.rule) {
+            case 'threshold':
+                passesRule =
+                    yValue >= (configPoint.thresholdValue || 0);
+                break;
+            case 'pair':
+                passesRule = yValue % 2 === 0;
+                break;
+            case 'range':
+                const min = configPoint.minRange || 0;
+                const max = configPoint.maxRange || 100;
+                passesRule =
+                    yValue >= min &&
+                        yValue <= max;
+                break;
+            default:
+                passesRule = true;
         }
+        args.fill = passesRule
+            ? (configPoint.trueColor || '#10B981')
+            : (configPoint.falseColor || '#EF4444');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwBaseSlicerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: YwBaseSlicerComponent, isStandalone: true, selector: "yw-base-slicer", inputs: { idComponent: { classPropertyName: "idComponent", publicName: "idComponent", isSignal: false, isRequired: false, transformFunction: null }, dataType: { classPropertyName: "dataType", publicName: "dataType", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, minCurrent: { classPropertyName: "minCurrent", publicName: "minCurrent", isSignal: true, isRequired: false, transformFunction: null }, maxCurrent: { classPropertyName: "maxCurrent", publicName: "maxCurrent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rangeChange: "rangeChange" }, host: { properties: { "attr.id": "idComponent" } }, ngImport: i0, template: "<div class=\"filter-container\">\r\n  <label class=\"filter-label\">{{ label() }}</label>\r\n\r\n  <!-- Inputs de fecha superiores -->\r\n  <div class=\"date-inputs-row\">\r\n    <div class=\"input-wrapper\">\r\n      @if (dataType === 'date') {  \r\n      <input \r\n        type=\"date\" \r\n        [value]=\"startDate()\"\r\n        [min]=\"minDate\"\r\n        [max]=\"endDate()\"\r\n        (change)=\"onStartDateInput($any($event.target).value)\" \r\n      />\r\n      }\r\n      @if (dataType === 'number') {  \r\n      <input \r\n        type=\"number\" \r\n        [value]=\"startVal()\"\r\n        [min]=\"minNumber\"\r\n        [max]=\"endVal()\"\r\n        [step]=\"step()\"\r\n        (input)=\"onStartInput($event)\" \r\n      />\r\n      }      \r\n    </div>\r\n\r\n    <div class=\"input-wrapper\">\r\n     @if (dataType === 'date') {  \r\n      <input \r\n        type=\"date\" \r\n        [value]=\"endDate()\"\r\n        [min]=\"startDate()\"\r\n        [max]=\"maxDate\"\r\n        (change)=\"onEndDateInput($any($event.target).value)\" \r\n      />\r\n     }\r\n      @if (dataType === 'number') {  \r\n      <input \r\n        type=\"number\" \r\n        [value]=\"endVal()\"\r\n        [min]=\"startVal()\"\r\n        [max]=\"maxNumber\"\r\n        [step]=\"step()\"\r\n        (input)=\"onEndInput($event)\" \r\n      />\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Dual Slider personalizado -->\r\n  <div class=\"slider-container\">\r\n    <div class=\"slider-track\"></div>\r\n    @if (dataType === 'date') {  \r\n    <!-- Slider Inicio -->\r\n    <input \r\n      type=\"range\" \r\n      [min]=\"minTimestamp()\" \r\n      [max]=\"maxTimestamp()\" \r\n      [value]=\"startTimestamp()\"\r\n      (input)=\"onStartSliderChange($event)\"\r\n      class=\"thumb thumb-left\"\r\n    />\r\n\r\n    <!-- Slider Fin -->\r\n    <input \r\n      type=\"range\" \r\n      [min]=\"minTimestamp()\" \r\n      [max]=\"maxTimestamp()\" \r\n      [value]=\"endTimestamp()\"\r\n      (input)=\"onEndSliderChange($event)\"\r\n      class=\"thumb thumb-right\"\r\n    />\r\n    }\r\n\r\n    @if (dataType === 'number') {  \r\n\r\n    <input \r\n      type=\"range\" \r\n      [min]=\"minNumber\" \r\n      [max]=\"maxNumber\" \r\n      [step]=\"step()\"\r\n      [value]=\"startVal()\"\r\n      (input)=\"onStartSliderChange($event)\"\r\n      class=\"thumb thumb-left\"\r\n    />\r\n\r\n    <!-- Slider M\u00E1ximo -->\r\n    <input \r\n      type=\"range\" \r\n      [min]=\"minNumber\" \r\n      [max]=\"maxNumber\" \r\n      [step]=\"step()\"\r\n      [value]=\"endVal()\"\r\n      (input)=\"onEndSliderChange($event)\"\r\n      class=\"thumb thumb-right\"\r\n    />\r\n\r\n    }\r\n\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:block;font-family:Arial,Helvetica,sans-serif;width:100%;max-width:360px}.filter-container{display:flex;flex-direction:column;gap:8px}.filter-label{font-size:13px;font-weight:600;color:#333}.date-inputs-row,.number-inputs-row{display:flex;gap:8px}.input-wrapper input[type=date]{border:1px solid #e2e8f0;border-radius:2px;padding:4px 8px;font-size:13px;color:#333;outline:none;background-color:#fff;box-shadow:0 1px 2px #0000000d}.input-wrapper input[type=date]:focus{border-color:#a0aec0}.input-wrapper input[type=number]{border:1px solid #e2e8f0;border-radius:2px;padding:4px 8px;font-size:13px;color:#333;width:90px;outline:none;background-color:#fff;box-shadow:0 1px 2px #0000000d}.input-wrapper input[type=number]:focus{border-color:#a0aec0}.slider-container{position:relative;width:100%;height:30px;display:flex;align-items:center;margin-top:4px}.slider-track{position:absolute;width:100%;height:2px;background-color:#666;border-radius:1px;z-index:1}.thumb{position:absolute;width:100%;appearance:none;-webkit-appearance:none;background:none;pointer-events:none;outline:none;margin:0;z-index:2}.thumb-right{z-index:3}.thumb::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;pointer-events:auto;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #666666;cursor:pointer;box-sizing:border-box;transition:transform .1s ease}.thumb::-webkit-slider-thumb:hover{transform:scale(1.1);border-color:#333}.thumb::-moz-range-thumb{pointer-events:auto;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #666666;cursor:pointer;box-sizing:border-box}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwBaseSlicerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yw-base-slicer', imports: [], host: {
-                        '[attr.id]': 'idComponent' // Vincula el atributo id al valor de la propiedad
-                    }, template: "<div class=\"filter-container\">\r\n  <label class=\"filter-label\">{{ label() }}</label>\r\n\r\n  <!-- Inputs de fecha superiores -->\r\n  <div class=\"date-inputs-row\">\r\n    <div class=\"input-wrapper\">\r\n      @if (dataType === 'date') {  \r\n      <input \r\n        type=\"date\" \r\n        [value]=\"startDate()\"\r\n        [min]=\"minDate\"\r\n        [max]=\"endDate()\"\r\n        (change)=\"onStartDateInput($any($event.target).value)\" \r\n      />\r\n      }\r\n      @if (dataType === 'number') {  \r\n      <input \r\n        type=\"number\" \r\n        [value]=\"startVal()\"\r\n        [min]=\"minNumber\"\r\n        [max]=\"endVal()\"\r\n        [step]=\"step()\"\r\n        (input)=\"onStartInput($event)\" \r\n      />\r\n      }      \r\n    </div>\r\n\r\n    <div class=\"input-wrapper\">\r\n     @if (dataType === 'date') {  \r\n      <input \r\n        type=\"date\" \r\n        [value]=\"endDate()\"\r\n        [min]=\"startDate()\"\r\n        [max]=\"maxDate\"\r\n        (change)=\"onEndDateInput($any($event.target).value)\" \r\n      />\r\n     }\r\n      @if (dataType === 'number') {  \r\n      <input \r\n        type=\"number\" \r\n        [value]=\"endVal()\"\r\n        [min]=\"startVal()\"\r\n        [max]=\"maxNumber\"\r\n        [step]=\"step()\"\r\n        (input)=\"onEndInput($event)\" \r\n      />\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Dual Slider personalizado -->\r\n  <div class=\"slider-container\">\r\n    <div class=\"slider-track\"></div>\r\n    @if (dataType === 'date') {  \r\n    <!-- Slider Inicio -->\r\n    <input \r\n      type=\"range\" \r\n      [min]=\"minTimestamp()\" \r\n      [max]=\"maxTimestamp()\" \r\n      [value]=\"startTimestamp()\"\r\n      (input)=\"onStartSliderChange($event)\"\r\n      class=\"thumb thumb-left\"\r\n    />\r\n\r\n    <!-- Slider Fin -->\r\n    <input \r\n      type=\"range\" \r\n      [min]=\"minTimestamp()\" \r\n      [max]=\"maxTimestamp()\" \r\n      [value]=\"endTimestamp()\"\r\n      (input)=\"onEndSliderChange($event)\"\r\n      class=\"thumb thumb-right\"\r\n    />\r\n    }\r\n\r\n    @if (dataType === 'number') {  \r\n\r\n    <input \r\n      type=\"range\" \r\n      [min]=\"minNumber\" \r\n      [max]=\"maxNumber\" \r\n      [step]=\"step()\"\r\n      [value]=\"startVal()\"\r\n      (input)=\"onStartSliderChange($event)\"\r\n      class=\"thumb thumb-left\"\r\n    />\r\n\r\n    <!-- Slider M\u00E1ximo -->\r\n    <input \r\n      type=\"range\" \r\n      [min]=\"minNumber\" \r\n      [max]=\"maxNumber\" \r\n      [step]=\"step()\"\r\n      [value]=\"endVal()\"\r\n      (input)=\"onEndSliderChange($event)\"\r\n      class=\"thumb thumb-right\"\r\n    />\r\n\r\n    }\r\n\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:block;font-family:Arial,Helvetica,sans-serif;width:100%;max-width:360px}.filter-container{display:flex;flex-direction:column;gap:8px}.filter-label{font-size:13px;font-weight:600;color:#333}.date-inputs-row,.number-inputs-row{display:flex;gap:8px}.input-wrapper input[type=date]{border:1px solid #e2e8f0;border-radius:2px;padding:4px 8px;font-size:13px;color:#333;outline:none;background-color:#fff;box-shadow:0 1px 2px #0000000d}.input-wrapper input[type=date]:focus{border-color:#a0aec0}.input-wrapper input[type=number]{border:1px solid #e2e8f0;border-radius:2px;padding:4px 8px;font-size:13px;color:#333;width:90px;outline:none;background-color:#fff;box-shadow:0 1px 2px #0000000d}.input-wrapper input[type=number]:focus{border-color:#a0aec0}.slider-container{position:relative;width:100%;height:30px;display:flex;align-items:center;margin-top:4px}.slider-track{position:absolute;width:100%;height:2px;background-color:#666;border-radius:1px;z-index:1}.thumb{position:absolute;width:100%;appearance:none;-webkit-appearance:none;background:none;pointer-events:none;outline:none;margin:0;z-index:2}.thumb-right{z-index:3}.thumb::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;pointer-events:auto;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #666666;cursor:pointer;box-sizing:border-box;transition:transform .1s ease}.thumb::-webkit-slider-thumb:hover{transform:scale(1.1);border-color:#333}.thumb::-moz-range-thumb{pointer-events:auto;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #666666;cursor:pointer;box-sizing:border-box}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { idComponent: [{
-                type: Input
-            }], dataType: [{
-                type: Input
-            }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], minCurrent: [{ type: i0.Input, args: [{ isSignal: true, alias: "minCurrent", required: false }] }], maxCurrent: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCurrent", required: false }] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }] } });
-
-class YwButtonSlicerComponent {
-    constructor() {
-        // Configuración de entradas
-        this.idComponent = '';
-        this.label = input('Tipo de producto', ...(ngDevMode ? [{ debugName: "label" }] : []));
-        this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
-        this.allowMultiple = input(true, ...(ngDevMode ? [{ debugName: "allowMultiple" }] : [])); // Permite cambiar a selección única si es necesario
-        // Evento de salida con la lista de IDs seleccionados
-        this.selectionChange = output();
-        // Signal con los IDs seleccionados
-        this.selectedIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedIds" }] : []));
-        // Current IDs seleccionados
-        this.currentIds = input([], ...(ngDevMode ? [{ debugName: "currentIds" }] : []));
-        // Emitir el listado en Array cada vez que la Signal de selección cambie
-        effect(() => {
-            this.selectionChange.emit(Array.from(this.selectedIds()));
+    _startResizeObserver() {
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const hostEl = this.elRef.nativeElement;
+        this._resizeObserver = new ResizeObserver((entries) => {
+            window.requestAnimationFrame(() => {
+                for (const entry of entries) {
+                    this.currentWidgetWidth = entry.contentRect.width;
+                    if (this.currentWidgetWidth > 0) {
+                        this._updateAdaptiveLabelSize(this.currentWidgetWidth);
+                        if (this.chartInstance) {
+                            // SI ACTIVAMSO EL REFRESH DA UN REBOTE AL REDIMENCIONAR
+                            this.chartInstance.refresh();
+                        }
+                    }
+                }
+            });
         });
+        this._resizeObserver.observe(hostEl);
     }
-    ngOnInit() {
-        if (this.currentIds() && this.currentIds().length > 0) {
-            this.selectedIds().clear();
-            this.currentIds().forEach((itemId) => {
-                this.selectedIds().add(itemId);
-            });
+    _updateAdaptiveLabelSize(width) {
+        if (this.config?.labelSize) {
+            const parsedSize = typeof this.config.labelSize === 'number'
+                ? this.config.labelSize
+                : parseFloat(this.config.labelSize);
+            if (!isNaN(parsedSize)) {
+                if (width < 260) {
+                    const scale = Math.max(0.65, width / 260);
+                    this.currentLabelSize = `${Math.round(parsedSize * scale)}px`;
+                }
+                else {
+                    this.currentLabelSize = `${parsedSize}px`;
+                }
+                this.cdr.markForCheck();
+                return;
+            }
         }
+        // Proporción estándar ideal (~7.5% del ancho del contenedor, acotado entre 13px y 26px)
+        const base = Math.max(13, Math.min(26, Math.round(width * 0.075)));
+        this.currentLabelSize = `${base}px`;
+        this.cdr.markForCheck();
     }
-    clearSelection() {
-        this.selectedIds().clear();
-        this.selectionChange.emit([]);
+    refresh() {
+        this.updateParsedData();
     }
-    // Toggle para seleccionar / deseleccionar
-    toggleSelection(id) {
-        const current = new Set(this.selectedIds());
-        if (this.allowMultiple()) {
-            if (current.has(id)) {
-                current.delete(id);
+    // pointRender(args: any) {
+    //   if (args.point?.y === 0) {
+    //     args.fill = this.emptyPointSettings.fill;
+    //     args.border = {
+    //       width: this.emptyPointSettings.border?.width ?? 0,
+    //       color: this.emptyPointSettings.border?.color ?? ''
+    //     };
+    //   }
+    // }
+    axisLabelRender(args) {
+        const umbralWidget = 700;
+        if (this.currentWidgetWidth > umbralWidget) {
+            return;
+        }
+        // Si la tarjeta es estrecha, aplicamos el recorte de etiquetas
+        if (args.text && typeof args.text === 'string') {
+            const palabras = args.text.split(' ');
+            if (palabras.length > 1) {
+                const primeraPalabra = palabras[0];
+                const inicialSegunda = palabras[1].charAt(0).toUpperCase();
+                args.text = `${primeraPalabra} ${inicialSegunda}.`;
             }
             else {
-                current.add(id);
+                if (args.text.length > 10) {
+                    args.text = args.text.substring(0, 9) + '.';
+                }
             }
         }
-        else {
-            // Si es selección única
-            current.clear();
-            current.add(id);
-        }
-        this.selectedIds.set(current);
-    }
-    isSelected(id) {
-        return this.selectedIds().has(id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwButtonSlicerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: YwButtonSlicerComponent, isStandalone: true, selector: "yw-button-slicer", inputs: { idComponent: { classPropertyName: "idComponent", publicName: "idComponent", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, allowMultiple: { classPropertyName: "allowMultiple", publicName: "allowMultiple", isSignal: true, isRequired: false, transformFunction: null }, currentIds: { classPropertyName: "currentIds", publicName: "currentIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "attr.id": "idComponent" } }, ngImport: i0, template: "<div class=\"filter-container\">\r\n  \r\n  <div class=\"filter-header\">\r\n    <span class=\"filter-label\">{{ label() }}</span>\r\n    <div class=\"header-actions\">      \r\n      <button class=\"icon-btn\" (click)=\"clearSelection()\" >\uD83E\uDDF9</button>      \r\n    </div>\r\n  </div>\r\n\r\n\r\n  <!-- Contenedor con barra de desplazamiento interna -->\r\n  <div class=\"grid-scroll-container\">\r\n    <div class=\"buttons-grid\">\r\n      @for (item of options(); track item.id) {\r\n        <button \r\n          type=\"button\" \r\n          class=\"option-btn\" \r\n          [class.selected]=\"isSelected(item.id)\"\r\n          (click)=\"toggleSelection(item.id)\"\r\n          [title]=\"item.label\">\r\n          <span class=\"btn-text\">{{ item.label }}</span>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:block;font-family:Arial,Helvetica,sans-serif;width:100%;max-width:320px}.filter-container{display:flex;flex-direction:column;gap:8px}.filter-header{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-bottom:1px solid #f0f0f0}.filter-label{font-size:13px;font-weight:600;color:#333}.header-actions{display:flex;gap:4px}.grid-scroll-container{max-height:145px;overflow-y:auto;padding-right:4px}.buttons-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.option-btn{display:flex;align-items:center;justify-content:center;height:38px;padding:4px 6px;background-color:#fff;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;transition:all .15s ease-in-out;outline:none;box-sizing:border-box}.option-btn:hover{border-color:#9ca3af;background-color:#f9fafb}.btn-text{font-size:12px;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center}.option-btn.selected{border-color:#2563eb;background-color:#eff6ff;box-shadow:0 0 0 1px #2563eb}.option-btn.selected .btn-text{color:#1d4ed8;font-weight:600}.grid-scroll-container::-webkit-scrollbar{width:6px}.grid-scroll-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.grid-scroll-container::-webkit-scrollbar-thumb{background:#71717a;border-radius:4px}.grid-scroll-container::-webkit-scrollbar-thumb:hover{background:#52525b}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BubbleChartSyncfusionComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: BubbleChartSyncfusionComponent, isStandalone: true, selector: "yw-bubble-chart-syncfusion", inputs: { chartData: "chartData", config: "config", idComponent: "idComponent" }, providers: [BubbleSeriesService, CategoryService, CategoryService,
+            TooltipService,
+            LegendService,
+            DateTimeService, DataLabelService], viewQueries: [{ propertyName: "chartInstance", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"control-section\">\r\n    <ejs-chart \r\n        #chart \r\n        [primaryXAxis]=\"labelData.axisX\" \r\n        [primaryYAxis]=\"labelData.axisY\"    \r\n        [title]=\"labelData.title\" \r\n     [palettes]=\"labelData.palettes\"\r\n      [chartArea]=\"labelData.chartArea\"\r\n    [titleStyle]=\"labelData.titleStyle\"\r\n\r\n        (pointRender)=\"pointRender($event)\"       \r\n        height=\"100%\"\r\n        width=\"100%\"\r\n    [legendSettings]=\"labelData.legendSettings\"\r\n    (axisLabelRender)=\"axisLabelRender($event)\"\r\n\r\n    [tooltip]=\"labelData.tooltip\">\r\n        <e-series-collection>\r\n            @for(series of dataChartParse; track $index){\r\n                <e-series \r\n                [opacity]=\"series.opacity\"\r\n                [dataSource]='series.dataSource' \r\n                type='Bubble' \r\n                xName='x' \r\n                yName='y' \r\n                size='size'\r\n                [name]='series.name' \r\n\r\n                [marker]=\"labelData.marker\"\r\n            \r\n                >\r\n                <!-- [dataLabel]='series.dataLabel' -->\r\n            </e-series>\r\n\r\n            }\r\n    </e-series-collection>\r\n</ejs-chart>\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden}.control-section{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden;background:#fff;border-radius:8px}:host ::ng-deep ejs-circulargauge{display:block;width:100%!important;height:100%!important;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ChartModule }, { kind: "component", type: i1.ChartComponent, selector: "ejs-chart", inputs: ["accessibility", "allowExport", "allowMultiSelection", "annotations", "axes", "background", "backgroundImage", "border", "chartArea", "columns", "crosshair", "currencyCode", "dataSource", "description", "enableAnimation", "enableAutoIntervalOnBothAxis", "enableCanvas", "enableExport", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "enableSideBySidePlacement", "focusBorderColor", "focusBorderMargin", "focusBorderWidth", "height", "highlightColor", "highlightMode", "highlightPattern", "indicators", "isMultiSelect", "isTransposed", "legendSettings", "locale", "margin", "palettes", "primaryXAxis", "primaryYAxis", "rangeColorSettings", "rows", "selectedDataIndexes", "selectionMode", "selectionPattern", "series", "subTitle", "subTitleStyle", "tabIndex", "theme", "title", "titleStyle", "tooltip", "useGroupingSeparator", "width", "zoomSettings"], outputs: ["afterExport", "animationComplete", "annotationRender", "axisLabelClick", "axisLabelRender", "axisMultiLabelRender", "axisRangeCalculated", "beforeExport", "beforePrint", "beforeResize", "chartDoubleClick", "chartMouseClick", "chartMouseDown", "chartMouseLeave", "chartMouseMove", "chartMouseUp", "drag", "dragComplete", "dragEnd", "dragStart", "legendClick", "legendRender", "load", "loaded", "multiLevelLabelClick", "onZooming", "pointClick", "pointDoubleClick", "pointMove", "pointRender", "resized", "scrollChanged", "scrollEnd", "scrollStart", "selectionComplete", "seriesRender", "sharedTooltipRender", "textRender", "tooltipRender", "zoomComplete", "dataSourceChange"] }, { kind: "directive", type: i1.SeriesDirective, selector: "e-series-collection>e-series", inputs: ["accessibility", "animation", "bearFillColor", "binInterval", "border", "boxPlotMode", "bullFillColor", "cardinalSplineTension", "close", "colorName", "columnFacet", "columnSpacing", "columnWidth", "columnWidthInPixel", "connector", "cornerRadius", "dashArray", "dataSource", "dragSettings", "drawType", "emptyPointSettings", "enableComplexProperty", "enableSolidCandles", "enableTooltip", "errorBar", "fill", "groupName", "high", "intermediateSumIndexes", "isClosed", "legendImageUrl", "legendShape", "low", "marker", "maxRadius", "minRadius", "name", "negativeFillColor", "noRisers", "nonHighlightStyle", "opacity", "open", "paretoOptions", "pointColorMapping", "query", "segmentAxis", "segments", "selectionStyle", "showMean", "showNormalDistribution", "size", "splineType", "stackingGroup", "step", "sumIndexes", "summaryFillColor", "tooltipFormat", "tooltipMappingName", "trendlines", "type", "unSelectedStyle", "visible", "volume", "width", "xAxisName", "xName", "yAxisName", "yName", "zOrder"] }, { kind: "directive", type: i1.SeriesCollectionDirective, selector: "ej-chart>e-series-collection" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwButtonSlicerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BubbleChartSyncfusionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yw-button-slicer', standalone: true, imports: [CommonModule], host: {
-                        '[attr.id]': 'idComponent' // Vincula el atributo id al valor de la propiedad
-                    }, template: "<div class=\"filter-container\">\r\n  \r\n  <div class=\"filter-header\">\r\n    <span class=\"filter-label\">{{ label() }}</span>\r\n    <div class=\"header-actions\">      \r\n      <button class=\"icon-btn\" (click)=\"clearSelection()\" >\uD83E\uDDF9</button>      \r\n    </div>\r\n  </div>\r\n\r\n\r\n  <!-- Contenedor con barra de desplazamiento interna -->\r\n  <div class=\"grid-scroll-container\">\r\n    <div class=\"buttons-grid\">\r\n      @for (item of options(); track item.id) {\r\n        <button \r\n          type=\"button\" \r\n          class=\"option-btn\" \r\n          [class.selected]=\"isSelected(item.id)\"\r\n          (click)=\"toggleSelection(item.id)\"\r\n          [title]=\"item.label\">\r\n          <span class=\"btn-text\">{{ item.label }}</span>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:block;font-family:Arial,Helvetica,sans-serif;width:100%;max-width:320px}.filter-container{display:flex;flex-direction:column;gap:8px}.filter-header{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-bottom:1px solid #f0f0f0}.filter-label{font-size:13px;font-weight:600;color:#333}.header-actions{display:flex;gap:4px}.grid-scroll-container{max-height:145px;overflow-y:auto;padding-right:4px}.buttons-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.option-btn{display:flex;align-items:center;justify-content:center;height:38px;padding:4px 6px;background-color:#fff;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;transition:all .15s ease-in-out;outline:none;box-sizing:border-box}.option-btn:hover{border-color:#9ca3af;background-color:#f9fafb}.btn-text{font-size:12px;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center}.option-btn.selected{border-color:#2563eb;background-color:#eff6ff;box-shadow:0 0 0 1px #2563eb}.option-btn.selected .btn-text{color:#1d4ed8;font-weight:600}.grid-scroll-container::-webkit-scrollbar{width:6px}.grid-scroll-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.grid-scroll-container::-webkit-scrollbar-thumb{background:#71717a;border-radius:4px}.grid-scroll-container::-webkit-scrollbar-thumb:hover{background:#52525b}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { idComponent: [{
-                type: Input
-            }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], allowMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMultiple", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], currentIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentIds", required: false }] }] } });
+            args: [{ selector: 'yw-bubble-chart-syncfusion', standalone: true, imports: [CommonModule, ChartModule], providers: [BubbleSeriesService, CategoryService, CategoryService,
+                        TooltipService,
+                        LegendService,
+                        DateTimeService, DataLabelService], template: "<div class=\"control-section\">\r\n    <ejs-chart \r\n        #chart \r\n        [primaryXAxis]=\"labelData.axisX\" \r\n        [primaryYAxis]=\"labelData.axisY\"    \r\n        [title]=\"labelData.title\" \r\n     [palettes]=\"labelData.palettes\"\r\n      [chartArea]=\"labelData.chartArea\"\r\n    [titleStyle]=\"labelData.titleStyle\"\r\n\r\n        (pointRender)=\"pointRender($event)\"       \r\n        height=\"100%\"\r\n        width=\"100%\"\r\n    [legendSettings]=\"labelData.legendSettings\"\r\n    (axisLabelRender)=\"axisLabelRender($event)\"\r\n\r\n    [tooltip]=\"labelData.tooltip\">\r\n        <e-series-collection>\r\n            @for(series of dataChartParse; track $index){\r\n                <e-series \r\n                [opacity]=\"series.opacity\"\r\n                [dataSource]='series.dataSource' \r\n                type='Bubble' \r\n                xName='x' \r\n                yName='y' \r\n                size='size'\r\n                [name]='series.name' \r\n\r\n                [marker]=\"labelData.marker\"\r\n            \r\n                >\r\n                <!-- [dataLabel]='series.dataLabel' -->\r\n            </e-series>\r\n\r\n            }\r\n    </e-series-collection>\r\n</ejs-chart>\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden}.control-section{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden;background:#fff;border-radius:8px}:host ::ng-deep ejs-circulargauge{display:block;width:100%!important;height:100%!important;flex-grow:1}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { chartInstance: [{
+                type: ViewChild,
+                args: ['chart']
+            }], chartData: [{
+                type: Input,
+                args: ['chartData']
+            }], config: [{
+                type: Input,
+                args: ['config']
+            }], idComponent: [{
+                type: Input,
+                args: ['idComponent']
+            }] } });
 
-class YwListSlicerComponent {
+// import { LineChartSyncfusionComponent } from '../../../../../adapters/charts/line-chart/syncfusion/visual/yw-line-chart-syncfusion.component';
+// import { YwLineMappingConfig } from '../../../../../models/config/chart/yw-line-chart-config.interface';
+class BubbleChartComponent {
     constructor() {
-        // Entradas generales
         this.idComponent = '';
-        this.label = input('Filtro Jerárquico', ...(ngDevMode ? [{ debugName: "label" }] : []));
-        this.clearTitleLabel = input('Limpiar Seleccion', ...(ngDevMode ? [{ debugName: "clearTitleLabel" }] : []));
-        // Opción 1: Entregar datos en árbol de texto directo
-        this.rawData = input([], ...(ngDevMode ? [{ debugName: "rawData" }] : []));
-        // Opción 2: Generar desde fechas
-        this.dataType = input('date', ...(ngDevMode ? [{ debugName: "dataType" }] : []));
-        this.minDate = input('', ...(ngDevMode ? [{ debugName: "minDate" }] : [])); // Formato 'YYYY-MM-DD'
-        this.maxDate = input('', ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
-        this.dateHierarchyType = input('YEAR_TRIMESTER_MONTH', ...(ngDevMode ? [{ debugName: "dateHierarchyType" }] : []));
-        this.monthNames = input(['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], ...(ngDevMode ? [{ debugName: "monthNames" }] : []));
-        // Evento de salida con el ID/Nodo seleccionado
-        this.selectionChange = output();
-        this.filterValueChange = output(); // Output 2 (Rangos o Hojas)
-        // ID del elemento seleccionado (Selección Simple)
-        this.selectedId = signal(null, ...(ngDevMode ? [{ debugName: "selectedId" }] : []));
-        this.currentSelectedId = input(null, ...(ngDevMode ? [{ debugName: "currentSelectedId" }] : []));
-        // Arbol de nodos computado
-        this.treeNodes = computed(() => {
-            if (this.dataType() == 'date' && this.minDate() && this.maxDate()) {
-                return this.generateDateHierarchy(this.minDate(), this.maxDate(), this.dateHierarchyType());
-            }
-            return this.rawData();
-        }, ...(ngDevMode ? [{ debugName: "treeNodes" }] : []));
-        effect(() => {
-            const currentId = this.selectedId();
-            if (!currentId) {
-                this.selectionChange.emit(null);
-                this.filterValueChange.emit(null);
-                return;
-            }
-            const node = this.findNodeById(this.treeNodes(), currentId);
-            this.selectionChange.emit(node);
-            if (node) {
-                // Emitir el segundo Output según el modo
-                const calculatedValue = this.processFilterOutput(node);
-                this.filterValueChange.emit(calculatedValue);
-            }
-        });
     }
     ngOnInit() {
-        if (this.currentSelectedId()) {
-            this.selectedId.set(this.currentSelectedId());
-        }
-    }
-    // Métodos de Selección y Expansión
-    toggleExpand(node, event) {
-        event.stopPropagation();
-        node.expanded = !node.expanded;
-    }
-    selectNode(node, event) {
-        event.stopPropagation();
-        this.selectedId.set(this.selectedId() === node.id ? null : node.id);
+        console.log("EL ID DEL COMPONENTE:", this.idComponent);
     }
-    clearSelection() {
-        this.selectedId.set(null);
-        this.filterValueChange.emit(null);
+    ngOnChanges(changes) {
+        if (changes['chartData']) {
+            console.log('change chartDataBubble:', changes['chartData'].currentValue);
+        }
+        if (changes['config']) {
+            console.log('change configBubble:', changes['config'].currentValue);
+        }
     }
-    // --- LÓGICA DE PROCESAMIENTO DE LAS HOJAS / RANGOS ---
-    processFilterOutput(selectedNode) {
-        // 1. Obtener todas las hojas (nodos del nivel más bajo) pertenecientes al bloque seleccionado
-        const leaves = this.getLeafNodes(selectedNode);
-        if (this.dataType() == 'date') {
-            // Extraer todas las fechas de las hojas del bloque
-            const dates = leaves
-                .map(leaf => leaf.value)
-                .filter(d => d instanceof Date)
-                .sort((a, b) => a.getTime() - b.getTime());
-            if (dates.length > 0) {
-                const minD = dates[0];
-                // Para la fecha máxima, tomamos el último día del mes correspondiente
-                const maxD = new Date(dates[dates.length - 1].getFullYear(), dates[dates.length - 1].getMonth() + 1, 0);
-                return {
-                    type: 'DATE_RANGE',
-                    dateRange: {
-                        minDate: minD.toISOString().split('T')[0],
-                        maxDate: maxD.toISOString().split('T')[0]
-                    },
-                    currentNodeId: selectedNode.id
-                };
-            }
-        }
-        // Modo Texto: Entregar arreglo con las hojas
-        return {
-            type: 'TEXT_LEAVES',
-            leafNodes: leaves,
-            leafIds: leaves.map(l => l.id),
-            currentNodeId: selectedNode.id
-        };
-    }
-    // Recorrido recursivo para obtener solo los nodos terminales (sin hijos)
-    getLeafNodes(node) {
-        if (!node.children || node.children.length === 0) {
-            return [node];
-        }
-        let leaves = [];
-        for (const child of node.children) {
-            leaves = leaves.concat(this.getLeafNodes(child));
-        }
-        return leaves;
-    }
-    findNodeById(nodes, id) {
-        for (const node of nodes) {
-            if (node.id === id)
-                return node;
-            if (node.children) {
-                const found = this.findNodeById(node.children, id);
-                if (found)
-                    return found;
-            }
-        }
-        return null;
-    }
-    // Generador de Jerarquía por Fechas
-    generateDateHierarchy(startStr, endStr, type) {
-        const start = new Date(startStr);
-        const end = new Date(endStr);
-        const tree = [];
-        const monthNames = this.monthNames();
-        if (type === 'YEAR_TRIMESTER_MONTH') {
-            let current = new Date(start);
-            while (current <= end) {
-                const year = current.getFullYear();
-                let yearNode = tree.find(n => n.id === `Y_${year}`);
-                if (!yearNode) {
-                    yearNode = { id: `Y_${year}`, label: `${year}`, children: [], expanded: false };
-                    tree.push(yearNode);
-                }
-                const month = current.getMonth();
-                const qtrNum = Math.floor(month / 3) + 1;
-                let qtrNode = yearNode.children.find(n => n.id === `Q_${year}_${qtrNum}`);
-                if (!qtrNode) {
-                    qtrNode = { id: `Q_${year}_${qtrNum}`, label: `Qtr ${qtrNum}`, children: [], expanded: false };
-                    yearNode.children.push(qtrNode);
-                }
-                const monthId = `M_${year}_${month + 1}`;
-                if (!qtrNode.children.some(n => n.id === monthId)) {
-                    qtrNode.children.push({
-                        id: monthId,
-                        label: monthNames[month],
-                        value: new Date(year, month, 1) // Fecha inicial del mes
-                    });
-                }
-                current.setMonth(current.getMonth() + 1);
-            }
-        }
-        if (type === 'YEAR_SEMESTER_MONTH') {
-            let current = new Date(start);
-            while (current <= end) {
-                const year = current.getFullYear();
-                let yearNode = tree.find(n => n.id === `Y_${year}`);
-                if (!yearNode) {
-                    yearNode = { id: `Y_${year}`, label: `${year}`, children: [], expanded: false };
-                    tree.push(yearNode);
-                }
-                const month = current.getMonth();
-                const qtrNum = Math.floor(month / 6) + 1;
-                let qtrNode = yearNode.children.find(n => n.id === `S_${year}_${qtrNum}`);
-                if (!qtrNode) {
-                    qtrNode = { id: `S_${year}_${qtrNum}`, label: `S ${qtrNum}`, children: [], expanded: false };
-                    yearNode.children.push(qtrNode);
-                }
-                const monthId = `M_${year}_${month + 1}`;
-                if (!qtrNode.children.some(n => n.id === monthId)) {
-                    qtrNode.children.push({
-                        id: monthId,
-                        label: monthNames[month],
-                        value: new Date(year, month, 1) // Fecha inicial del mes
-                    });
-                }
-                current.setMonth(current.getMonth() + 1);
-            }
-        }
-        return tree;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwListSlicerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: YwListSlicerComponent, isStandalone: true, selector: "yw-list-slicer", inputs: { idComponent: { classPropertyName: "idComponent", publicName: "idComponent", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, clearTitleLabel: { classPropertyName: "clearTitleLabel", publicName: "clearTitleLabel", isSignal: true, isRequired: false, transformFunction: null }, rawData: { classPropertyName: "rawData", publicName: "rawData", isSignal: true, isRequired: false, transformFunction: null }, dataType: { classPropertyName: "dataType", publicName: "dataType", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateHierarchyType: { classPropertyName: "dateHierarchyType", publicName: "dateHierarchyType", isSignal: true, isRequired: false, transformFunction: null }, monthNames: { classPropertyName: "monthNames", publicName: "monthNames", isSignal: true, isRequired: false, transformFunction: null }, currentSelectedId: { classPropertyName: "currentSelectedId", publicName: "currentSelectedId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", filterValueChange: "filterValueChange" }, host: { properties: { "attr.id": "idComponent" } }, ngImport: i0, template: "<div class=\"filter-container\">\r\n  <!-- Cabecera con t\u00EDtulo y acciones de filtro -->\r\n  <div class=\"filter-header\">\r\n    <span class=\"filter-label\">{{ label() }}</span>\r\n    <div class=\"header-actions\">\r\n      <!--<button class=\"icon-btn\" title=\"Filtro\">\uD83D\uDD3B</button>-->\r\n      <button class=\"icon-btn\" (click)=\"clearSelection()\" title=\"{{clearTitleLabel}}\">\uD83E\uDDF9</button>\r\n      <!--<button class=\"icon-btn\" title=\"M\u00E1s opciones\">\u22EE</button>-->\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Vista en \u00C1rbol con scroll interno -->\r\n  <div class=\"tree-scroll-container\">\r\n    <ng-container *ngTemplateOutlet=\"nodeListTemplate; context: { $implicit: treeNodes(), level: 0 }\"></ng-container>\r\n  </div>\r\n</div>\r\n\r\n<!-- Plantilla Recursiva para renderizar niveles del \u00C1rbol -->\r\n<ng-template #nodeListTemplate let-nodes let-level=\"level\">\r\n  <div class=\"tree-level\">\r\n    @for (node of nodes; track node.id) {\r\n      <div class=\"tree-node-wrapper\">\r\n        <!-- Fila de opci\u00F3n -->\r\n        <div \r\n          class=\"tree-node-row\" \r\n          [class.selected]=\"selectedId() === node.id\"\r\n          [style.padding-left.px]=\"level * 18 + 6\"\r\n          (click)=\"selectNode(node, $event)\">\r\n          \r\n          <!-- Flecha expandir/colapsar (si tiene hijos) -->\r\n          @if (node.children && node.children.length > 0) {\r\n            <span class=\"chevron-icon\" (click)=\"toggleExpand(node, $event)\">\r\n              {{ node.expanded ? '\uD83D\uDF83' : '\uD83D\uDF82' }}\r\n            </span>\r\n          } @else {\r\n            <span class=\"chevron-spacer\"></span>\r\n          }\r\n\r\n          <!-- Radio Button (Selecci\u00F3n simple) -->\r\n          <div class=\"radio-circle\" [class.checked]=\"selectedId() === node.id\">\r\n            <div class=\"radio-inner\"></div>\r\n          </div>\r\n\r\n          <!-- Etiqueta del Nodo -->\r\n          <span class=\"node-label\">{{ node.label }}</span>\r\n        </div>\r\n\r\n        <!-- Renderizado de hijos si est\u00E1 expandido -->\r\n        @if (node.children && node.children.length > 0 && node.expanded) {\r\n          <ng-container *ngTemplateOutlet=\"nodeListTemplate; context: { $implicit: node.children, level: level + 1 }\"></ng-container>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";:host{display:block;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;width:100%;max-width:320px;background:#fff}.filter-container{display:flex;flex-direction:column;border:1px solid #e0e0e0;border-radius:4px;background-color:#fff}.filter-header{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-bottom:1px solid #f0f0f0}.filter-label{font-size:13px;font-weight:600;color:#252423}.header-actions{display:flex;gap:4px}.icon-btn{background:none;border:none;cursor:pointer;font-size:12px;color:#605e5c;padding:2px 4px;border-radius:2px}.icon-btn:hover{background-color:#f3f2f1}.tree-scroll-container{max-height:220px;overflow-y:auto;padding:4px 0}.tree-level{display:flex;flex-direction:column}.tree-node-row{display:flex;align-items:center;height:28px;cursor:pointer;-webkit-user-select:none;user-select:none;gap:6px;transition:background-color .1s ease}.tree-node-row:hover{background-color:#f3f2f1}.tree-node-row.selected{background-color:#e1dfdd}.chevron-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:10px;color:#323130}.chevron-spacer{width:16px}.radio-circle{width:14px;height:14px;border-radius:50%;border:1.5px solid #605e5c;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:#fff}.radio-circle.checked{border-color:#0078d4}.radio-circle.checked .radio-inner{width:6px;height:6px;border-radius:50%;background-color:#0078d4}.node-label{font-size:13px;color:#323130;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tree-scroll-container::-webkit-scrollbar{width:6px}.tree-scroll-container::-webkit-scrollbar-track{background:#f1f1f1}.tree-scroll-container::-webkit-scrollbar-thumb{background:#8a8886;border-radius:3px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BubbleChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: BubbleChartComponent, isStandalone: true, selector: "yw-bubble-chart", inputs: { chartData: "chartData", config: "config", idComponent: "idComponent" }, usesOnChanges: true, ngImport: i0, template: "@if(config.provider==='syncfusion'){\r\n   <div style=\"position: relative; width: 100%; height: 100%;\">\r\n    <yw-bubble-chart-syncfusion \r\n        [idComponent]=\"idComponent\"\r\n        [chartData]=\"chartData\" \r\n        [config]=\"config\"   style=\"display: block; width: 100%; height: 100%;\">\r\n    </yw-bubble-chart-syncfusion>\r\n</div>\r\n}", styles: [":host{display:block;width:100%;height:100%;min-height:260px;min-width:0;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BubbleChartSyncfusionComponent, selector: "yw-bubble-chart-syncfusion", inputs: ["chartData", "config", "idComponent"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwListSlicerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BubbleChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yw-list-slicer', standalone: true, imports: [CommonModule], host: {
-                        '[attr.id]': 'idComponent' // Vincula el atributo id al valor de la propiedad
-                    }, template: "<div class=\"filter-container\">\r\n  <!-- Cabecera con t\u00EDtulo y acciones de filtro -->\r\n  <div class=\"filter-header\">\r\n    <span class=\"filter-label\">{{ label() }}</span>\r\n    <div class=\"header-actions\">\r\n      <!--<button class=\"icon-btn\" title=\"Filtro\">\uD83D\uDD3B</button>-->\r\n      <button class=\"icon-btn\" (click)=\"clearSelection()\" title=\"{{clearTitleLabel}}\">\uD83E\uDDF9</button>\r\n      <!--<button class=\"icon-btn\" title=\"M\u00E1s opciones\">\u22EE</button>-->\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Vista en \u00C1rbol con scroll interno -->\r\n  <div class=\"tree-scroll-container\">\r\n    <ng-container *ngTemplateOutlet=\"nodeListTemplate; context: { $implicit: treeNodes(), level: 0 }\"></ng-container>\r\n  </div>\r\n</div>\r\n\r\n<!-- Plantilla Recursiva para renderizar niveles del \u00C1rbol -->\r\n<ng-template #nodeListTemplate let-nodes let-level=\"level\">\r\n  <div class=\"tree-level\">\r\n    @for (node of nodes; track node.id) {\r\n      <div class=\"tree-node-wrapper\">\r\n        <!-- Fila de opci\u00F3n -->\r\n        <div \r\n          class=\"tree-node-row\" \r\n          [class.selected]=\"selectedId() === node.id\"\r\n          [style.padding-left.px]=\"level * 18 + 6\"\r\n          (click)=\"selectNode(node, $event)\">\r\n          \r\n          <!-- Flecha expandir/colapsar (si tiene hijos) -->\r\n          @if (node.children && node.children.length > 0) {\r\n            <span class=\"chevron-icon\" (click)=\"toggleExpand(node, $event)\">\r\n              {{ node.expanded ? '\uD83D\uDF83' : '\uD83D\uDF82' }}\r\n            </span>\r\n          } @else {\r\n            <span class=\"chevron-spacer\"></span>\r\n          }\r\n\r\n          <!-- Radio Button (Selecci\u00F3n simple) -->\r\n          <div class=\"radio-circle\" [class.checked]=\"selectedId() === node.id\">\r\n            <div class=\"radio-inner\"></div>\r\n          </div>\r\n\r\n          <!-- Etiqueta del Nodo -->\r\n          <span class=\"node-label\">{{ node.label }}</span>\r\n        </div>\r\n\r\n        <!-- Renderizado de hijos si est\u00E1 expandido -->\r\n        @if (node.children && node.children.length > 0 && node.expanded) {\r\n          <ng-container *ngTemplateOutlet=\"nodeListTemplate; context: { $implicit: node.children, level: level + 1 }\"></ng-container>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";:host{display:block;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;width:100%;max-width:320px;background:#fff}.filter-container{display:flex;flex-direction:column;border:1px solid #e0e0e0;border-radius:4px;background-color:#fff}.filter-header{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-bottom:1px solid #f0f0f0}.filter-label{font-size:13px;font-weight:600;color:#252423}.header-actions{display:flex;gap:4px}.icon-btn{background:none;border:none;cursor:pointer;font-size:12px;color:#605e5c;padding:2px 4px;border-radius:2px}.icon-btn:hover{background-color:#f3f2f1}.tree-scroll-container{max-height:220px;overflow-y:auto;padding:4px 0}.tree-level{display:flex;flex-direction:column}.tree-node-row{display:flex;align-items:center;height:28px;cursor:pointer;-webkit-user-select:none;user-select:none;gap:6px;transition:background-color .1s ease}.tree-node-row:hover{background-color:#f3f2f1}.tree-node-row.selected{background-color:#e1dfdd}.chevron-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:10px;color:#323130}.chevron-spacer{width:16px}.radio-circle{width:14px;height:14px;border-radius:50%;border:1.5px solid #605e5c;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:#fff}.radio-circle.checked{border-color:#0078d4}.radio-circle.checked .radio-inner{width:6px;height:6px;border-radius:50%;background-color:#0078d4}.node-label{font-size:13px;color:#323130;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tree-scroll-container::-webkit-scrollbar{width:6px}.tree-scroll-container::-webkit-scrollbar-track{background:#f1f1f1}.tree-scroll-container::-webkit-scrollbar-thumb{background:#8a8886;border-radius:3px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { idComponent: [{
-                type: Input
-            }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], clearTitleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTitleLabel", required: false }] }], rawData: [{ type: i0.Input, args: [{ isSignal: true, alias: "rawData", required: false }] }], dataType: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataType", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateHierarchyType: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateHierarchyType", required: false }] }], monthNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthNames", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], filterValueChange: [{ type: i0.Output, args: ["filterValueChange"] }], currentSelectedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSelectedId", required: false }] }] } });
+            args: [{ selector: 'yw-bubble-chart', standalone: true, imports: [CommonModule, BubbleChartSyncfusionComponent], template: "@if(config.provider==='syncfusion'){\r\n   <div style=\"position: relative; width: 100%; height: 100%;\">\r\n    <yw-bubble-chart-syncfusion \r\n        [idComponent]=\"idComponent\"\r\n        [chartData]=\"chartData\" \r\n        [config]=\"config\"   style=\"display: block; width: 100%; height: 100%;\">\r\n    </yw-bubble-chart-syncfusion>\r\n</div>\r\n}", styles: [":host{display:block;width:100%;height:100%;min-height:260px;min-width:0;overflow:hidden}\n"] }]
+        }], propDecorators: { chartData: [{
+                type: Input,
+                args: ['chartData']
+            }], config: [{
+                type: Input,
+                args: ['config']
+            }], idComponent: [{
+                type: Input,
+                args: ['idComponent']
+            }] } });
 
-class YwDashboardFilterWidgetComponent {
+/*BEGIN - COMPONENTES VALIDOS PARA WIDGET*/
+class YwDashboardWidgetComponent {
     constructor() {
         this.componentWidgetId = '';
         this.typeComponent = '';
         this.varShowConfigButtons = false;
+        this.styleWidget = input(DEFAULT_WIDGET_STYLE, ...(ngDevMode ? [{ debugName: "styleWidget" }] : []));
+        // Signal calculada que combina los valores recibidos con los valores por defecto
+        this.instanceStyleWidget = computed(() => ({
+            widgetBackgroundColor: this.styleWidget()?.widgetBackgroundColor ?? DEFAULT_WIDGET_STYLE.widgetBackgroundColor,
+            widgetBorderColor: this.styleWidget()?.widgetBorderColor ?? DEFAULT_WIDGET_STYLE.widgetBorderColor
+        }), ...(ngDevMode ? [{ debugName: "instanceStyleWidget" }] : []));
         this.configWidget = {
             widgetId: '',
-            label: '',
+            title: '',
             typeComponent: '',
-            controlTable: '',
+            showConfigButtons: false,
+            widgetStyle: DEFAULT_WIDGET_STYLE,
+            layoutConfig: { id: '', w: 0, h: 0, content: undefined },
+            controlConfig: {},
+            controlTables: []
         };
-        this.controlConfig = input(...(ngDevMode ? [undefined, { debugName: "controlConfig" }] : []));
-        this.controlData = [];
+        this.controlConfig = {};
+        this.controlData = {};
+        this.isLocked = model(false, ...(ngDevMode ? [{ debugName: "isLocked" }] : []));
+        this.isMaximized = signal(false, ...(ngDevMode ? [{ debugName: "isMaximized" }] : []));
         this.eventDeleteRequest = output();
+        this.eventLockToggleRequest = output();
+        this.eventMaximizeToggleRequest = output();
         this.eventShowConfigFormRequest = output();
-        this.selectionChange = output();
-        effect(() => {
-            const value_controlConfig = this.fnFormatConfigData();
-            this.dataWidget = { idComponent: this.componentWidgetId,
-                configWidget: this.configWidget,
-                controlConfig: value_controlConfig
-            };
-        });
     }
     ngOnInit() {
-        this.componentWidgetId = this.configWidget.widgetId;
+        this.componentWidgetId = 'cmpnt-' + this.configWidget.widgetId;
         this.typeComponent = this.configWidget.typeComponent;
-        const value_controlConfig = this.fnFormatConfigData();
         this.dataWidget = { idComponent: this.componentWidgetId,
-            configWidget: this.configWidget,
-            controlConfig: value_controlConfig
+            controlConfig: this.controlConfig,
+            controlData: this.controlData
         };
+        // console.log('DATOS INICIALES INIT:');
+        // console.log(this.dataWidget);
     }
-    /*
-    Los Datos a este componente llegan a un nivel basico, sin embargo es necesario configurar la informacion, para que se adapte a los componentes.
-    */
-    fnFormatConfigData() {
-        let responsedata = {};
-        const typeComponent = this.configWidget.typeComponent;
-        if (typeComponent == 'filter-slicer') {
-            const dataType = this.controlConfig().dataType;
-            const currentData = this.controlConfig();
-            if (dataType == 'date') {
-                const fieldName = this.controlConfig().filterField;
-                const fechas = this.controlData.map((d) => new Date(d[fieldName]).getTime());
-                const val_min = new Date(Math.min(...fechas)).toISOString().split("T")[0];
-                const val_max = new Date(Math.max(...fechas)).toISOString().split("T")[0];
-                responsedata = { dataType: dataType, min: val_min, max: val_max, minCurrent: currentData?.minCurrent, maxCurrent: currentData?.maxCurrent };
-            }
-            if (dataType == 'number') {
-                const fieldName = this.controlConfig().filterField;
-                const valStep = this.controlConfig().step;
-                const DataNumbers = this.controlData.map((d) => d[fieldName]);
-                const val_min = Math.min(...DataNumbers);
-                const val_max = Math.max(...DataNumbers);
-                responsedata = { dataType: dataType, min: val_min, max: val_max, step: valStep, minCurrent: currentData?.minCurrent, maxCurrent: currentData?.maxCurrent };
-            }
+    ngAfterViewInit() {
+        this.varShowConfigButtons = this.configWidget.showConfigButtons || false;
+    }
+    ngOnChanges(changes) {
+        if (changes['configWidget']) {
+            //console.log('Nuevo valor configWidget:', this.configWidget);
+            this.varShowConfigButtons = this.configWidget.showConfigButtons || false;
+            ;
         }
-        if (typeComponent == 'filter-button') {
-            const fieldName = this.controlConfig().filterField;
-            const fieldNameId = this.controlConfig().filterFieldId;
-            const val_allowMultiple = this.controlConfig().allowMultiple;
-            const currentData = this.controlConfig();
-            let listoptions = this.controlData.map((item) => { return { 'id': item[fieldNameId], 'label': item[fieldName] }; });
-            const listoptionsunicos = [...new Map(listoptions.map(d => [d.id, d])).values()];
-            responsedata = { options: listoptionsunicos, allowMultiple: val_allowMultiple, currentIds: currentData?.currentIds };
+        if (changes['controlConfig']) {
+            // console.log('Nuevo valor controlConfig:', this.controlConfig);
         }
-        if (typeComponent == 'filter-list') {
-            const dataType = this.controlConfig().dataType;
-            const currentData = this.controlConfig();
-            if (dataType == 'date') {
-                const fieldName = this.controlConfig().filterField;
-                const val_dateHierarchyType = this.controlConfig().dateHierarchyType;
-                const fechas = this.controlData.map((d) => new Date(d[fieldName]).getTime());
-                const val_min = new Date(Math.min(...fechas)).toISOString().split("T")[0];
-                const val_max = new Date(Math.max(...fechas)).toISOString().split("T")[0];
-                responsedata = { dataType: dataType, minDate: val_min, maxDate: val_max, dateHierarchyType: val_dateHierarchyType, currentSelectedId: currentData.currentSelectedId };
-            }
-            if (dataType == 'text') {
-                const fieldName1 = this.controlConfig().filterField;
-                const fieldName2 = this.controlConfig().filterFieldN2;
-                const fieldName3 = this.controlConfig().filterFieldN3;
-                let foundN2 = false;
-                let foundN3 = false;
-                let lsizeN2 = 0;
-                let lsizeN3 = 0;
-                let nodebase = { id: '', label: '' };
-                let nodeN2 = { id: '', label: '' };
-                let nodeN3 = { id: '', label: '' };
-                let listNivel1 = [];
-                let listNivel2 = [];
-                let listNivel3 = [];
-                this.controlData.forEach((item) => {
-                    nodebase = { id: item[fieldName1], label: item[fieldName1] };
-                    //NIVEL 2
-                    if (fieldName2) {
-                        foundN2 = false;
-                        lsizeN2 = Object.keys(listNivel2).length;
-                        for (let i = 0; i < lsizeN2; i++) {
-                            const itemN2 = listNivel2[i];
-                            if (itemN2.id == item[fieldName2]) {
-                                itemN2.children.push(nodebase);
-                                nodeN2 = itemN2;
-                                foundN2 = true;
-                                break;
-                            }
-                        }
-                        ;
-                        if (foundN2 == false) {
-                            nodeN2 = { id: item[fieldName2], label: item[fieldName2], expanded: true, children: [nodebase] };
-                            if (fieldName3) {
-                                nodeN2.parentId = item[fieldName3];
-                            }
-                            listNivel2.push(nodeN2);
-                        }
-                    }
-                    else {
-                        listNivel1.push(nodebase);
-                    }
-                });
-                //NIVEL 1 - Basico no hay Jerarquia      
-                responsedata = { dataType: dataType, rawData: listNivel1, currentSelectedId: currentData.currentSelectedId };
-                //NIVEL 2 - Jerarquia de 2 niveles
-                if (fieldName2) {
-                    responsedata = { dataType: dataType, rawData: listNivel2, currentSelectedId: currentData.currentSelectedId };
-                }
-                //NIVEL 3 - Jerarquia de 3 niveles
-                if (fieldName3) {
-                    listNivel2.forEach((item) => {
-                        nodebase = item;
-                        foundN3 = false;
-                        lsizeN3 = Object.keys(listNivel3).length;
-                        for (let i = 0; i < lsizeN3; i++) {
-                            const itemN3 = listNivel3[i];
-                            if (itemN3.id == item.parentId) {
-                                itemN3.children.push(nodebase);
-                                foundN3 = true;
-                                break;
-                            }
-                        }
-                        ;
-                        if (foundN3 == false) {
-                            nodeN3 = { id: item[fieldName3], label: item[fieldName3], expanded: true, children: [nodebase] };
-                            listNivel3.push(nodeN3);
-                        }
-                    });
-                    responsedata = { dataType: dataType, rawData: listNivel3, currentSelectedId: currentData.currentSelectedId };
-                }
-            }
+        if (changes['controlData']) {
+            //console.log('Nuevo valor controlData:', this.controlData);
+            this.dataWidget = { idComponent: this.componentWidgetId,
+                controlConfig: this.controlConfig,
+                controlData: this.controlData
+            };
         }
-        return responsedata;
-    }
-    //Filtro Slicer
-    onFilterSlicerChange(range) {
-        console.log('Filtro actualizado:', range);
-        this.selectionChange.emit({ widgetId: this.componentWidgetId, eventResponse: range });
-    }
-    //Filtro Button
-    onFilterButtonChange(selectedIds) {
-        console.log('Tipos seleccionados:', selectedIds);
-        this.selectionChange.emit({ widgetId: this.componentWidgetId, eventResponse: selectedIds });
     }
-    //Filtro Lista - 1
-    onFilterListChange(selectedData) {
-        console.log('Tipos seleccionados:', selectedData);
-        // Filtrar la información del dashboard
-        //this.selectionChange.emit({widgetId:this.componentWidgetId,eventResponse:selectedData});
+    /* BEGIN - BARRA DE EVENTOS DEL WIDGET */
+    //Eliminacion de Widget - Conectado al Dashboard
+    onDeleteClick() {
+        this.eventDeleteRequest.emit(this.configWidget.widgetId);
     }
-    //Filtro Lista - 2
-    onFilterListCalculated(data) {
-        if (!data) {
-            this.selectionChange.emit({ widgetId: this.componentWidgetId, eventResponse: null });
-            return;
-        }
-        if (data.type === 'DATE_RANGE') {
-            //console.log('Rango a filtrar en SQL/Dashboard:', data.dateRange?.minDate, 'hasta', data.dateRange?.maxDate);
-            this.selectionChange.emit({ widgetId: this.componentWidgetId, eventResponse: { minDate: data.dateRange?.minDate, maxDate: data.dateRange?.maxDate, currentNodeId: data.currentNodeId } });
-        }
-        else if (data.type === 'TEXT_LEAVES') {
-            //console.log('Lista de elementos terminales seleccionados:', data.leafIds);
-            this.selectionChange.emit({ widgetId: this.componentWidgetId, eventResponse: { ids: data.leafIds, currentNodeId: data.currentNodeId } });
-        }
+    onLockClick() {
+        // Invertimos el estado local y notificamos al padre
+        const nextState = !this.isLocked();
+        this.isLocked.set(nextState);
+        this.eventLockToggleRequest.emit({ widgetId: this.configWidget.widgetId, shouldLock: nextState });
     }
-    onDeleteClick() {
+    onMaximizeClick() {
+        const nextState = !this.isMaximized();
+        this.isMaximized.set(nextState);
+        this.eventMaximizeToggleRequest.emit({ widgetId: this.configWidget.widgetId, shouldMaximize: nextState });
     }
     onShowFormConfigClick() {
+        this.eventShowConfigFormRequest.emit(this.configWidget.widgetId);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwDashboardFilterWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: YwDashboardFilterWidgetComponent, isStandalone: true, selector: "yw-dashboard-filter-widget", inputs: { configWidget: { classPropertyName: "configWidget", publicName: "configWidget", isSignal: false, isRequired: false, transformFunction: null }, controlConfig: { classPropertyName: "controlConfig", publicName: "controlConfig", isSignal: true, isRequired: false, transformFunction: null }, controlData: { classPropertyName: "controlData", publicName: "controlData", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { eventDeleteRequest: "eventDeleteRequest", eventShowConfigFormRequest: "eventShowConfigFormRequest", selectionChange: "selectionChange" }, ngImport: i0, template: "\r\n<div class=\"widget-filter-action-bar\">         \r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-delete\" (click)=\"onDeleteClick()\">\uD83D\uDDD1\uFE0F</button>\r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-config\" (click)=\"onShowFormConfigClick()\">\u2699\uFE0F</button>\r\n</div>\r\n<div class=\"widget-filter-content-wrapper\">\r\n     @if ( typeComponent == 'empty-visual' ) { \r\n       <ng-container *ngTemplateOutlet=\"emptyvisual; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'filter-slicer' ) { \r\n       <ng-container *ngTemplateOutlet=\"filterslicer; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'filter-button' ) { \r\n       <ng-container *ngTemplateOutlet=\"filterbutton; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'filter-list' ) { \r\n       <ng-container *ngTemplateOutlet=\"filterlist; context: { control: dataWidget }\"></ng-container>\r\n     }  \r\n      \r\n</div>\r\n\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  EMPTY VISUAL TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #emptyvisual let-control = \"control\">\r\n    <yw-empty-visual [idComponent]=\"control.idComponent\"\r\n                     [config]=\"control.controlConfig\" \r\n    >        \r\n    </yw-empty-visual>\r\n</ng-template>\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  FILTER SLICER TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #filterslicer let-control = \"control\"> \r\n  @if (control.controlConfig.dataType === 'date') { \r\n  <yw-base-slicer   [idComponent]=\"control.idComponent\"\r\n                    [dataType]=\"control.controlConfig.dataType\"\r\n                    [label]=\"control.configWidget.label\"\r\n                    [min]=\"control.controlConfig.min\"\r\n                    [max]=\"control.controlConfig.max\" \r\n                    [minCurrent]=\"control.controlConfig.minCurrent\"\r\n                    [maxCurrent]=\"control.controlConfig.maxCurrent\"                    \r\n                    (rangeChange)=\"onFilterSlicerChange($event)\"\r\n  >\r\n  </yw-base-slicer>\r\n  }\r\n  @if (control.controlConfig.dataType === 'number') { \r\n  <yw-base-slicer   [idComponent]=\"control.idComponent\"\r\n                    [dataType]=\"control.controlConfig.dataType\"\r\n                    [label]=\"control.configWidget.label\"\r\n                    [min]=\"control.controlConfig.min\"\r\n                    [max]=\"control.controlConfig.max\"\r\n                    [minCurrent]=\"control.controlConfig.minCurrent\"\r\n                    [maxCurrent]=\"control.controlConfig.maxCurrent\"\r\n                    [step]=\"control.controlConfig.step\"\r\n                    (rangeChange)=\"onFilterSlicerChange($event)\"\r\n  >\r\n  </yw-base-slicer>\r\n  }\r\n</ng-template>\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  FILTER BUTTON TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #filterbutton let-control = \"control\"> \r\n  <yw-button-slicer [idComponent]=\"control.idComponent\" \r\n                    [label]=\"control.configWidget.label\"\r\n                    [options]=\"control.controlConfig.options\"\r\n                    [allowMultiple]=\"control.controlConfig.allowMultiple\"\r\n                    [currentIds]=\"control.controlConfig.currentIds\"\r\n                    (selectionChange)=\"onFilterButtonChange($event)\"                 \r\n  >\r\n  </yw-button-slicer>\r\n</ng-template>\r\n\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  FILTER LIST TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #filterlist let-control = \"control\"> \r\n  \r\n  @if (control.controlConfig.dataType === 'date') {  \r\n  <yw-list-slicer   [idComponent]=\"control.idComponent\"                \r\n                    [label]=\"control.configWidget.label\"\r\n                    [dataType]=\"control.controlConfig.dataType\"\r\n                    [minDate]=\"control.controlConfig.minDate\"\r\n                    [maxDate]=\"control.controlConfig.maxDate\"\r\n                    [dateHierarchyType]=\"control.controlConfig.dateHierarchyType\"\r\n                    [currentSelectedId]=\"control.controlConfig.currentSelectedId\"\r\n                    (selectionChange)=\"onFilterListChange($event)\"\r\n                    (filterValueChange)=\"onFilterListCalculated($event)\"                   \r\n  >\r\n  </yw-list-slicer>\r\n  }\r\n\r\n\r\n  @if (control.controlConfig.dataType === 'text') {  \r\n  <yw-list-slicer   [idComponent]=\"control.idComponent\"\r\n                    [label]=\"control.configWidget.label\"\r\n                    [dataType]=\"control.controlConfig.dataType\"\r\n                    [rawData]=\"control.controlConfig.rawData\"\r\n                    [currentSelectedId]=\"control.controlConfig.currentSelectedId\"\r\n                    (selectionChange)=\"onFilterListChange($event)\"\r\n                    (filterValueChange)=\"onFilterListCalculated($event)\"  \r\n  >\r\n  </yw-list-slicer>\r\n  }\r\n\r\n\r\n</ng-template>", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;box-sizing:border-box;background-color:var(--widget-bg, #ffffff);border:1px solid var(--widget-border-color, #040404);border-radius:var(--widget-border-radius, 8px);padding:var(--widget-padding, 10px)}:host *,:host *:before,:host *:after{box-sizing:border-box}.widget-filter-action-bar{display:flex;justify-content:flex-end;gap:4px;padding:5px 10px;flex-shrink:0;width:100%}.widget-filter-content-wrapper{width:100%;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: YwEmptyVisualComponent, selector: "yw-empty-visual", inputs: ["idComponent", "config"] }, { kind: "component", type: YwBaseSlicerComponent, selector: "yw-base-slicer", inputs: ["idComponent", "dataType", "label", "min", "max", "step", "minCurrent", "maxCurrent"], outputs: ["rangeChange"] }, { kind: "component", type: YwButtonSlicerComponent, selector: "yw-button-slicer", inputs: ["idComponent", "label", "options", "allowMultiple", "currentIds"], outputs: ["selectionChange"] }, { kind: "component", type: YwListSlicerComponent, selector: "yw-list-slicer", inputs: ["idComponent", "label", "clearTitleLabel", "rawData", "dataType", "minDate", "maxDate", "dateHierarchyType", "monthNames", "currentSelectedId"], outputs: ["selectionChange", "filterValueChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwDashboardWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: YwDashboardWidgetComponent, isStandalone: true, selector: "yw-dashboard-widget", inputs: { styleWidget: { classPropertyName: "styleWidget", publicName: "styleWidget", isSignal: true, isRequired: false, transformFunction: null }, configWidget: { classPropertyName: "configWidget", publicName: "configWidget", isSignal: false, isRequired: false, transformFunction: null }, controlConfig: { classPropertyName: "controlConfig", publicName: "controlConfig", isSignal: false, isRequired: false, transformFunction: null }, controlData: { classPropertyName: "controlData", publicName: "controlData", isSignal: false, isRequired: false, transformFunction: null }, isLocked: { classPropertyName: "isLocked", publicName: "isLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isLocked: "isLockedChange", eventDeleteRequest: "eventDeleteRequest", eventLockToggleRequest: "eventLockToggleRequest", eventMaximizeToggleRequest: "eventMaximizeToggleRequest", eventShowConfigFormRequest: "eventShowConfigFormRequest" }, host: { properties: { "style.--widget-bg": "instanceStyleWidget().widgetBackgroundColor", "style.--widget-border-color": "instanceStyleWidget().widgetBorderColor" } }, usesOnChanges: true, ngImport: i0, template: "\r\n<!-- <div class=\"widget-action-bar\">    \r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-action\" (click)=\"onLockClick()\">{{ isLocked() ? '\uD83D\uDD12' : '\uD83D\uDD13' }}</button>\r\n      <button class=\"btn-action\" (click)=\"onMaximizeClick()\">{{ isMaximized() ? '\uD83D\uDDD7' : '\uD83D\uDDD6' }}</button>\r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-delete\" (click)=\"onDeleteClick()\">\uD83D\uDDD1\uFE0F</button>\r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-config\" (click)=\"onShowFormConfigClick()\">\u2699\uFE0F</button>\r\n</div> -->\r\n\r\n<div class=\"widget-action-bar\">\r\n      <!-- Bot\u00F3n Bloquear / Desbloquear -->\r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-action\" (click)=\"onLockClick()\" [title]=\"isLocked() ? 'Desbloquear' : 'Bloquear'\">\r\n        <svg *ngIf=\"isLocked(); else unlockedIcon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path></svg>\r\n        <ng-template #unlockedIcon>\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect><path d=\"M7 11V7a5 5 0 0 1 9.9-1\"></path></svg>\r\n        </ng-template>\r\n      </button>\r\n\r\n      <!-- Bot\u00F3n Maximizar / Restaurar -->\r\n      <button class=\"btn-action\" (click)=\"onMaximizeClick()\" [title]=\"isMaximized() ? 'Restaurar' : 'Maximizar'\">\r\n        <svg *ngIf=\"isMaximized(); else maxIcon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3\"></path></svg>\r\n        <ng-template #maxIcon>\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\"></path></svg>\r\n        </ng-template>\r\n      </button>\r\n\r\n      <!-- Bot\u00F3n Eliminar -->\r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-delete\" (click)=\"onDeleteClick()\" title=\"Eliminar\">\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"></polyline><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"></path></svg>\r\n      </button>\r\n\r\n      <!-- Bot\u00F3n Configuraci\u00F3n -->\r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-config\" (click)=\"onShowFormConfigClick()\" title=\"Configurar\">\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"3\"></circle><path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"></path></svg>\r\n      </button>\r\n</div>\r\n\r\n<div class=\"widget-content-wrapper\">\r\n     @if ( typeComponent == 'dummy' ) {\r\n       <ng-container *ngTemplateOutlet=\"testdummy; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'empty-visual' ) {\r\n       <ng-container *ngTemplateOutlet=\"emptyvisual; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'chart-bar' ) {\r\n       <ng-container *ngTemplateOutlet=\"chartbar; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'chart-line' ) {\r\n       <ng-container *ngTemplateOutlet=\"chartline; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'chart-doughnut' ) {\r\n       <ng-container *ngTemplateOutlet=\"chartdoughnut; context: { control: dataWidget }\"></ng-container>\r\n     }  \r\n     @if ( typeComponent == 'chart-gauge' ) {\r\n       <ng-container *ngTemplateOutlet=\"chartgauge; context: { control: dataWidget }\"></ng-container>\r\n     }  \r\n    @if ( typeComponent == 'chart-bubble' ) {\r\n       <ng-container *ngTemplateOutlet=\"chartbubble; context: { control: dataWidget }\"></ng-container>\r\n     }  \r\n     \r\n     \r\n</div>\r\n\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  DUMMY TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #testdummy let-control = \"control\">\r\n    <lib-test-chart [idComponent]=\"control.idComponent\" >        \r\n    </lib-test-chart>\r\n</ng-template>\r\n<!--------------------------------------------------------------->\r\n<!----------------------  EMPTY VISUAL TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #emptyvisual let-control = \"control\">\r\n    <yw-empty-visual [idComponent]=\"control.idComponent\"\r\n                     [config]=\"control.controlConfig\" \r\n    >        \r\n    </yw-empty-visual>\r\n</ng-template>\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  BAR CHART TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #chartbar let-control = \"control\">\r\n  <yw-bar-chart [idComponent]=\"control.idComponent\"\r\n                [chartData]=\"control.controlData\"\r\n                [config]=\"control.controlConfig\"    \r\n  >\r\n  </yw-bar-chart>\r\n</ng-template>\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  LINE CHART TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #chartline let-control = \"control\">\r\n  <yw-line-chart [idComponent]=\"control.idComponent\"\r\n                 [chartData]=\"control.controlData\"\r\n                 [config]=\"control.controlConfig\"  \r\n  >\r\n  </yw-line-chart>\r\n</ng-template>\r\n\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  LINE DOUGHNUT TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #chartdoughnut let-control = \"control\">\r\n  <yw-pie-chart [idComponent]=\"control.idComponent\"\r\n                 [chartData]=\"control.controlData\"\r\n                 [config]=\"control.controlConfig\"  \r\n  >\r\n  </yw-pie-chart>\r\n</ng-template>\r\n\r\n  \r\n<!--------------------------------------------------------------->\r\n<!----------------------  LINE GAUGE TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #chartgauge let-control = \"control\">\r\n  <yw-gauge-chart [idComponent]=\"control.idComponent\"\r\n                  [chartData]=\"control.controlData\"\r\n                  [config]=\"control.controlConfig\"  \r\n  >\r\n  </yw-gauge-chart>\r\n</ng-template>\r\n\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  BUBBLE TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #chartbubble let-control=\"control\">\r\n  \r\n  <yw-bubble-chart \r\n    [idComponent]=\"control.idComponent\"\r\n    [chartData]=\"control.controlData\"\r\n    [config]=\"control.controlConfig\">\r\n  </yw-bubble-chart>\r\n</ng-template>  ", styles: ["@charset \"UTF-8\";:host{display:block;flex-direction:column;width:100%;overflow:hidden;box-sizing:border-box;background-color:var(--widget-bg, #ffffff);border:1px solid var(--widget-border-color, #007bff)}:host *,:host *:before,:host *:after{box-sizing:border-box}.widget-action-bar{display:flex;justify-content:flex-end;gap:4px;padding:5px 10px;flex-shrink:0;width:100%}.widget-content-wrapper{width:100%;flex-grow:1;height:0;display:flex;flex-direction:column}.widget-action-bar button,.widget-action-bar .btn-action,.widget-action-bar .btn-delete,.widget-action-bar .btn-config{background:transparent;border:1px solid #d9d9d9;border-radius:4px;cursor:pointer;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;color:#595959;padding:0;transition:all .2s ease}.widget-action-bar button svg,.widget-action-bar .btn-action svg,.widget-action-bar .btn-delete svg,.widget-action-bar .btn-config svg{width:14px;height:14px}.widget-action-bar button:hover,.widget-action-bar .btn-action:hover,.widget-action-bar .btn-delete:hover,.widget-action-bar .btn-config:hover{background-color:#f5f5f5;color:#262626;border-color:#bfbfbf}.widget-action-bar button:active,.widget-action-bar .btn-action:active,.widget-action-bar .btn-delete:active,.widget-action-bar .btn-config:active{background-color:#e6e6e6}.widget-action-bar .btn-delete:hover{background-color:#fff1f0;color:#ff4d4f;border-color:#ffa39e}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TestChartComponent, selector: "lib-test-chart", inputs: ["idComponent"] }, { kind: "component", type: YwEmptyVisualComponent, selector: "yw-empty-visual", inputs: ["idComponent", "config"] }, { kind: "component", type: LineChartComponent, selector: "yw-line-chart", inputs: ["chartData", "config", "idComponent"] }, { kind: "component", type: BarChartComponent, selector: "yw-bar-chart", inputs: ["chartData", "config", "idComponent"] }, { kind: "component", type: PieChartComponent, selector: "yw-pie-chart", inputs: ["idComponent", "chartData", "config"] }, { kind: "component", type: GaugeChartComponent, selector: "yw-gauge-chart", inputs: ["idComponent", "chartData", "config"] }, { kind: "component", type: BubbleChartComponent, selector: "yw-bubble-chart", inputs: ["chartData", "config", "idComponent"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwDashboardFilterWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwDashboardWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yw-dashboard-filter-widget', standalone: true, imports: [CommonModule,
+            args: [{ selector: 'yw-dashboard-widget', standalone: true, imports: [CommonModule,
+                        TestChartComponent,
                         YwEmptyVisualComponent,
-                        YwBaseSlicerComponent,
-                        YwButtonSlicerComponent,
-                        YwListSlicerComponent,
-                    ], template: "\r\n<div class=\"widget-filter-action-bar\">         \r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-delete\" (click)=\"onDeleteClick()\">\uD83D\uDDD1\uFE0F</button>\r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-config\" (click)=\"onShowFormConfigClick()\">\u2699\uFE0F</button>\r\n</div>\r\n<div class=\"widget-filter-content-wrapper\">\r\n     @if ( typeComponent == 'empty-visual' ) { \r\n       <ng-container *ngTemplateOutlet=\"emptyvisual; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'filter-slicer' ) { \r\n       <ng-container *ngTemplateOutlet=\"filterslicer; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'filter-button' ) { \r\n       <ng-container *ngTemplateOutlet=\"filterbutton; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'filter-list' ) { \r\n       <ng-container *ngTemplateOutlet=\"filterlist; context: { control: dataWidget }\"></ng-container>\r\n     }  \r\n      \r\n</div>\r\n\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  EMPTY VISUAL TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #emptyvisual let-control = \"control\">\r\n    <yw-empty-visual [idComponent]=\"control.idComponent\"\r\n                     [config]=\"control.controlConfig\" \r\n    >        \r\n    </yw-empty-visual>\r\n</ng-template>\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  FILTER SLICER TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #filterslicer let-control = \"control\"> \r\n  @if (control.controlConfig.dataType === 'date') { \r\n  <yw-base-slicer   [idComponent]=\"control.idComponent\"\r\n                    [dataType]=\"control.controlConfig.dataType\"\r\n                    [label]=\"control.configWidget.label\"\r\n                    [min]=\"control.controlConfig.min\"\r\n                    [max]=\"control.controlConfig.max\" \r\n                    [minCurrent]=\"control.controlConfig.minCurrent\"\r\n                    [maxCurrent]=\"control.controlConfig.maxCurrent\"                    \r\n                    (rangeChange)=\"onFilterSlicerChange($event)\"\r\n  >\r\n  </yw-base-slicer>\r\n  }\r\n  @if (control.controlConfig.dataType === 'number') { \r\n  <yw-base-slicer   [idComponent]=\"control.idComponent\"\r\n                    [dataType]=\"control.controlConfig.dataType\"\r\n                    [label]=\"control.configWidget.label\"\r\n                    [min]=\"control.controlConfig.min\"\r\n                    [max]=\"control.controlConfig.max\"\r\n                    [minCurrent]=\"control.controlConfig.minCurrent\"\r\n                    [maxCurrent]=\"control.controlConfig.maxCurrent\"\r\n                    [step]=\"control.controlConfig.step\"\r\n                    (rangeChange)=\"onFilterSlicerChange($event)\"\r\n  >\r\n  </yw-base-slicer>\r\n  }\r\n</ng-template>\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  FILTER BUTTON TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #filterbutton let-control = \"control\"> \r\n  <yw-button-slicer [idComponent]=\"control.idComponent\" \r\n                    [label]=\"control.configWidget.label\"\r\n                    [options]=\"control.controlConfig.options\"\r\n                    [allowMultiple]=\"control.controlConfig.allowMultiple\"\r\n                    [currentIds]=\"control.controlConfig.currentIds\"\r\n                    (selectionChange)=\"onFilterButtonChange($event)\"                 \r\n  >\r\n  </yw-button-slicer>\r\n</ng-template>\r\n\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  FILTER LIST TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #filterlist let-control = \"control\"> \r\n  \r\n  @if (control.controlConfig.dataType === 'date') {  \r\n  <yw-list-slicer   [idComponent]=\"control.idComponent\"                \r\n                    [label]=\"control.configWidget.label\"\r\n                    [dataType]=\"control.controlConfig.dataType\"\r\n                    [minDate]=\"control.controlConfig.minDate\"\r\n                    [maxDate]=\"control.controlConfig.maxDate\"\r\n                    [dateHierarchyType]=\"control.controlConfig.dateHierarchyType\"\r\n                    [currentSelectedId]=\"control.controlConfig.currentSelectedId\"\r\n                    (selectionChange)=\"onFilterListChange($event)\"\r\n                    (filterValueChange)=\"onFilterListCalculated($event)\"                   \r\n  >\r\n  </yw-list-slicer>\r\n  }\r\n\r\n\r\n  @if (control.controlConfig.dataType === 'text') {  \r\n  <yw-list-slicer   [idComponent]=\"control.idComponent\"\r\n                    [label]=\"control.configWidget.label\"\r\n                    [dataType]=\"control.controlConfig.dataType\"\r\n                    [rawData]=\"control.controlConfig.rawData\"\r\n                    [currentSelectedId]=\"control.controlConfig.currentSelectedId\"\r\n                    (selectionChange)=\"onFilterListChange($event)\"\r\n                    (filterValueChange)=\"onFilterListCalculated($event)\"  \r\n  >\r\n  </yw-list-slicer>\r\n  }\r\n\r\n\r\n</ng-template>", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;box-sizing:border-box;background-color:var(--widget-bg, #ffffff);border:1px solid var(--widget-border-color, #040404);border-radius:var(--widget-border-radius, 8px);padding:var(--widget-padding, 10px)}:host *,:host *:before,:host *:after{box-sizing:border-box}.widget-filter-action-bar{display:flex;justify-content:flex-end;gap:4px;padding:5px 10px;flex-shrink:0;width:100%}.widget-filter-content-wrapper{width:100%;display:flex;flex-direction:column}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { configWidget: [{
+                        LineChartComponent,
+                        BarChartComponent,
+                        PieChartComponent,
+                        GaugeChartComponent, BubbleChartComponent], host: {
+                        '[style.--widget-bg]': 'instanceStyleWidget().widgetBackgroundColor',
+                        '[style.--widget-border-color]': 'instanceStyleWidget().widgetBorderColor'
+                    }, template: "\r\n<!-- <div class=\"widget-action-bar\">    \r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-action\" (click)=\"onLockClick()\">{{ isLocked() ? '\uD83D\uDD12' : '\uD83D\uDD13' }}</button>\r\n      <button class=\"btn-action\" (click)=\"onMaximizeClick()\">{{ isMaximized() ? '\uD83D\uDDD7' : '\uD83D\uDDD6' }}</button>\r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-delete\" (click)=\"onDeleteClick()\">\uD83D\uDDD1\uFE0F</button>\r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-config\" (click)=\"onShowFormConfigClick()\">\u2699\uFE0F</button>\r\n</div> -->\r\n\r\n<div class=\"widget-action-bar\">\r\n      <!-- Bot\u00F3n Bloquear / Desbloquear -->\r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-action\" (click)=\"onLockClick()\" [title]=\"isLocked() ? 'Desbloquear' : 'Bloquear'\">\r\n        <svg *ngIf=\"isLocked(); else unlockedIcon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path></svg>\r\n        <ng-template #unlockedIcon>\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect><path d=\"M7 11V7a5 5 0 0 1 9.9-1\"></path></svg>\r\n        </ng-template>\r\n      </button>\r\n\r\n      <!-- Bot\u00F3n Maximizar / Restaurar -->\r\n      <button class=\"btn-action\" (click)=\"onMaximizeClick()\" [title]=\"isMaximized() ? 'Restaurar' : 'Maximizar'\">\r\n        <svg *ngIf=\"isMaximized(); else maxIcon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3\"></path></svg>\r\n        <ng-template #maxIcon>\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\"></path></svg>\r\n        </ng-template>\r\n      </button>\r\n\r\n      <!-- Bot\u00F3n Eliminar -->\r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-delete\" (click)=\"onDeleteClick()\" title=\"Eliminar\">\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"></polyline><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"></path></svg>\r\n      </button>\r\n\r\n      <!-- Bot\u00F3n Configuraci\u00F3n -->\r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-config\" (click)=\"onShowFormConfigClick()\" title=\"Configurar\">\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"3\"></circle><path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"></path></svg>\r\n      </button>\r\n</div>\r\n\r\n<div class=\"widget-content-wrapper\">\r\n     @if ( typeComponent == 'dummy' ) {\r\n       <ng-container *ngTemplateOutlet=\"testdummy; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'empty-visual' ) {\r\n       <ng-container *ngTemplateOutlet=\"emptyvisual; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'chart-bar' ) {\r\n       <ng-container *ngTemplateOutlet=\"chartbar; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'chart-line' ) {\r\n       <ng-container *ngTemplateOutlet=\"chartline; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'chart-doughnut' ) {\r\n       <ng-container *ngTemplateOutlet=\"chartdoughnut; context: { control: dataWidget }\"></ng-container>\r\n     }  \r\n     @if ( typeComponent == 'chart-gauge' ) {\r\n       <ng-container *ngTemplateOutlet=\"chartgauge; context: { control: dataWidget }\"></ng-container>\r\n     }  \r\n    @if ( typeComponent == 'chart-bubble' ) {\r\n       <ng-container *ngTemplateOutlet=\"chartbubble; context: { control: dataWidget }\"></ng-container>\r\n     }  \r\n     \r\n     \r\n</div>\r\n\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  DUMMY TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #testdummy let-control = \"control\">\r\n    <lib-test-chart [idComponent]=\"control.idComponent\" >        \r\n    </lib-test-chart>\r\n</ng-template>\r\n<!--------------------------------------------------------------->\r\n<!----------------------  EMPTY VISUAL TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #emptyvisual let-control = \"control\">\r\n    <yw-empty-visual [idComponent]=\"control.idComponent\"\r\n                     [config]=\"control.controlConfig\" \r\n    >        \r\n    </yw-empty-visual>\r\n</ng-template>\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  BAR CHART TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #chartbar let-control = \"control\">\r\n  <yw-bar-chart [idComponent]=\"control.idComponent\"\r\n                [chartData]=\"control.controlData\"\r\n                [config]=\"control.controlConfig\"    \r\n  >\r\n  </yw-bar-chart>\r\n</ng-template>\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  LINE CHART TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #chartline let-control = \"control\">\r\n  <yw-line-chart [idComponent]=\"control.idComponent\"\r\n                 [chartData]=\"control.controlData\"\r\n                 [config]=\"control.controlConfig\"  \r\n  >\r\n  </yw-line-chart>\r\n</ng-template>\r\n\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  LINE DOUGHNUT TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #chartdoughnut let-control = \"control\">\r\n  <yw-pie-chart [idComponent]=\"control.idComponent\"\r\n                 [chartData]=\"control.controlData\"\r\n                 [config]=\"control.controlConfig\"  \r\n  >\r\n  </yw-pie-chart>\r\n</ng-template>\r\n\r\n  \r\n<!--------------------------------------------------------------->\r\n<!----------------------  LINE GAUGE TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #chartgauge let-control = \"control\">\r\n  <yw-gauge-chart [idComponent]=\"control.idComponent\"\r\n                  [chartData]=\"control.controlData\"\r\n                  [config]=\"control.controlConfig\"  \r\n  >\r\n  </yw-gauge-chart>\r\n</ng-template>\r\n\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  BUBBLE TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #chartbubble let-control=\"control\">\r\n  \r\n  <yw-bubble-chart \r\n    [idComponent]=\"control.idComponent\"\r\n    [chartData]=\"control.controlData\"\r\n    [config]=\"control.controlConfig\">\r\n  </yw-bubble-chart>\r\n</ng-template>  ", styles: ["@charset \"UTF-8\";:host{display:block;flex-direction:column;width:100%;overflow:hidden;box-sizing:border-box;background-color:var(--widget-bg, #ffffff);border:1px solid var(--widget-border-color, #007bff)}:host *,:host *:before,:host *:after{box-sizing:border-box}.widget-action-bar{display:flex;justify-content:flex-end;gap:4px;padding:5px 10px;flex-shrink:0;width:100%}.widget-content-wrapper{width:100%;flex-grow:1;height:0;display:flex;flex-direction:column}.widget-action-bar button,.widget-action-bar .btn-action,.widget-action-bar .btn-delete,.widget-action-bar .btn-config{background:transparent;border:1px solid #d9d9d9;border-radius:4px;cursor:pointer;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;color:#595959;padding:0;transition:all .2s ease}.widget-action-bar button svg,.widget-action-bar .btn-action svg,.widget-action-bar .btn-delete svg,.widget-action-bar .btn-config svg{width:14px;height:14px}.widget-action-bar button:hover,.widget-action-bar .btn-action:hover,.widget-action-bar .btn-delete:hover,.widget-action-bar .btn-config:hover{background-color:#f5f5f5;color:#262626;border-color:#bfbfbf}.widget-action-bar button:active,.widget-action-bar .btn-action:active,.widget-action-bar .btn-delete:active,.widget-action-bar .btn-config:active{background-color:#e6e6e6}.widget-action-bar .btn-delete:hover{background-color:#fff1f0;color:#ff4d4f;border-color:#ffa39e}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { styleWidget: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleWidget", required: false }] }], configWidget: [{
                 type: Input
-            }], controlConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlConfig", required: false }] }], controlData: [{
+            }], controlConfig: [{
                 type: Input
-            }], eventDeleteRequest: [{ type: i0.Output, args: ["eventDeleteRequest"] }], eventShowConfigFormRequest: [{ type: i0.Output, args: ["eventShowConfigFormRequest"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+            }], controlData: [{
+                type: Input
+            }], isLocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLocked", required: false }] }, { type: i0.Output, args: ["isLockedChange"] }], eventDeleteRequest: [{ type: i0.Output, args: ["eventDeleteRequest"] }], eventLockToggleRequest: [{ type: i0.Output, args: ["eventLockToggleRequest"] }], eventMaximizeToggleRequest: [{ type: i0.Output, args: ["eventMaximizeToggleRequest"] }], eventShowConfigFormRequest: [{ type: i0.Output, args: ["eventShowConfigFormRequest"] }] } });
 
-class YwDashboardFilterComponent {
+class YwBaseSlicerComponent {
     constructor() {
-        this.dashboardFilterConfig = {
-            showConfigButtons: false,
-            lockPositionWidgets: false,
-            controlListConfig: []
-        };
-        this.dashboardData = [];
-        this.filterSelectionChange = output();
-        this.controlListConfig = [];
-    }
-    ngOnInit() {
-        this.controlListConfig = [];
-        this.dashboardFilterConfig.controlListConfig.forEach((item) => {
-            const tableName = item.controlTable;
-            const prmcontrolData = this.fn_getDataForWidgetFilterComponent(tableName, this.dashboardData);
-            const prmconfigWidget = { ...item };
-            if (item.controlFilterData) {
-                item.configComponent = this.fnSetControlFilterCurrentValues(prmconfigWidget);
-            }
-            const configControl = { configWidget: prmconfigWidget,
-                controlData: prmcontrolData,
-                controlConfig: item.configComponent
-            };
-            this.controlListConfig.push(configControl);
-        });
-    }
-    //Filtrar Datos por Componente del Widget
-    fn_getDataForWidgetFilterComponent(prmTableName, prmdashboardData) {
-        let dataresponse = [];
-        const ldsize = prmdashboardData.length;
-        prmdashboardData.forEach((curTableRef) => {
-            if (prmTableName.localeCompare(curTableRef.tableName) == 0) {
-                dataresponse = curTableRef.tableData;
+        // Inputs de configuración del rango de fechas
+        this.idComponent = '';
+        this.dataType = 'date';
+        this.label = input('Fecha', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : []));
+        this.max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : []));
+        this.step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
+        this.minCurrent = input(...(ngDevMode ? [undefined, { debugName: "minCurrent" }] : []));
+        this.maxCurrent = input(...(ngDevMode ? [undefined, { debugName: "maxCurrent" }] : []));
+        this.minNumber = 0;
+        this.maxNumber = 1000;
+        this.minDate = '2020-01-01';
+        this.maxDate = '2022-12-31';
+        // Evento de salida
+        this.rangeChange = output();
+        // Signals para las fechas seleccionadas
+        this.startDate = signal('2020-01-01', ...(ngDevMode ? [{ debugName: "startDate" }] : []));
+        this.endDate = signal('2022-09-22', ...(ngDevMode ? [{ debugName: "endDate" }] : []));
+        // Signals para los numeros seleccionadas
+        this.startVal = signal(0, ...(ngDevMode ? [{ debugName: "startVal" }] : []));
+        this.endVal = signal(1000, ...(ngDevMode ? [{ debugName: "endVal" }] : []));
+        this.minTimestamp = computed(() => new Date(this.minDate).getTime(), ...(ngDevMode ? [{ debugName: "minTimestamp" }] : []));
+        this.maxTimestamp = computed(() => new Date(this.maxDate).getTime(), ...(ngDevMode ? [{ debugName: "maxTimestamp" }] : []));
+        this.startTimestamp = computed(() => new Date(this.startDate()).getTime(), ...(ngDevMode ? [{ debugName: "startTimestamp" }] : []));
+        this.endTimestamp = computed(() => new Date(this.endDate()).getTime(), ...(ngDevMode ? [{ debugName: "endTimestamp" }] : []));
+        // Inicializar valores al arrancar
+        effect(() => {
+            if (this.dataType == 'date') {
+                this.startDate.set(this.minCurrent() || this.minDate);
+                this.endDate.set(this.maxCurrent() || this.maxDate);
             }
-        });
-        return dataresponse;
-    }
-    onFilterChange(eventData) {
-        this.filterSelectionChange.emit({ widgetId: eventData.widgetId, eventResponse: eventData.eventResponse });
-    }
-    fnSetControlFilterCurrentValues(prmControlConfig) {
-        if (prmControlConfig.typeComponent == 'filter-slicer') {
-            let curConfigComponent = prmControlConfig.configComponent;
-            if (prmControlConfig.configComponent.dataType == 'date') {
-                curConfigComponent.minCurrent = prmControlConfig.controlFilterData['startDate'];
-                curConfigComponent.maxCurrent = prmControlConfig.controlFilterData['endDate'];
+            if (this.dataType == 'number') {
+                this.startVal.set(this.minCurrent() || this.minNumber);
+                this.endVal.set(this.maxCurrent() || this.maxNumber);
             }
-            if (prmControlConfig.configComponent.dataType == 'number') {
-                curConfigComponent.minCurrent = prmControlConfig.controlFilterData['minValue'];
-                curConfigComponent.maxCurrent = prmControlConfig.controlFilterData['maxValue'];
+        }, { allowSignalWrites: true });
+        // Notificar al padre cada vez que cambien los valores
+        effect(() => {
+            if (this.dataType == 'date') {
+                this.rangeChange.emit({
+                    startDate: this.startDate(),
+                    endDate: this.endDate()
+                });
             }
-            return curConfigComponent;
-        }
-        if (prmControlConfig.typeComponent == 'filter-button') {
-            let curConfigComponent = prmControlConfig.configComponent;
-            curConfigComponent.currentIds = prmControlConfig.controlFilterData || [];
-            return curConfigComponent;
-        }
-        if (prmControlConfig.typeComponent == 'filter-list') {
-            let curConfigComponent = prmControlConfig.configComponent;
-            curConfigComponent.currentSelectedId = prmControlConfig.controlFilterData['currentNodeId'];
-            return curConfigComponent;
-        }
-    }
-    handleClearFilter() {
-        this.controlListConfig = [];
-        this.dashboardFilterConfig.controlListConfig.forEach((item) => {
-            const tableName = item.controlTable;
-            const prmcontrolData = this.fn_getDataForWidgetFilterComponent(tableName, this.dashboardData);
-            const prmconfigWidget = { ...item };
-            if (item.controlFilterData) {
-                item.configComponent = this.fnSetControlFilterClearValues(prmconfigWidget);
+            if (this.dataType == 'number') {
+                this.rangeChange.emit({
+                    minValue: this.startVal(),
+                    maxValue: this.endVal()
+                });
             }
-            const configControl = { configWidget: prmconfigWidget,
-                controlData: prmcontrolData,
-                controlConfig: item.configComponent
-            };
-            this.controlListConfig.push(configControl);
         });
     }
-    fnSetControlFilterClearValues(prmControlConfig) {
-        if (prmControlConfig.typeComponent == 'filter-slicer') {
-            let curConfigComponent = prmControlConfig.configComponent;
-            curConfigComponent.minCurrent = null;
-            curConfigComponent.maxCurrent = null;
-            return curConfigComponent;
-        }
-        if (prmControlConfig.typeComponent == 'filter-button') {
-            let curConfigComponent = prmControlConfig.configComponent;
-            curConfigComponent.currentIds = [];
-            return curConfigComponent;
+    ngOnInit() {
+        if (this.dataType == 'date') {
+            this.minDate = this.min();
+            this.maxDate = this.max();
+            this.minTimestamp = computed(() => new Date(this.minDate).getTime(), ...(ngDevMode ? [{ debugName: "minTimestamp" }] : []));
+            this.maxTimestamp = computed(() => new Date(this.maxDate).getTime(), ...(ngDevMode ? [{ debugName: "maxTimestamp" }] : []));
+            this.startTimestamp = computed(() => new Date(this.startDate()).getTime(), ...(ngDevMode ? [{ debugName: "startTimestamp" }] : []));
+            this.endTimestamp = computed(() => new Date(this.endDate()).getTime(), ...(ngDevMode ? [{ debugName: "endTimestamp" }] : []));
         }
-        if (prmControlConfig.typeComponent == 'filter-list') {
-            let curConfigComponent = prmControlConfig.configComponent;
-            curConfigComponent.currentSelectedId = null;
-            return curConfigComponent;
+        if (this.dataType == 'number') {
+            this.minNumber = this.min();
+            this.maxNumber = this.max();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwDashboardFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: YwDashboardFilterComponent, isStandalone: true, selector: "yw-dashboard-filter", inputs: { dashboardFilterConfig: "dashboardFilterConfig", dashboardData: "dashboardData" }, outputs: { filterSelectionChange: "filterSelectionChange" }, ngImport: i0, template: "\r\n  <div class=\"dashboard-filter-content-bar\">\r\n    @if ( dashboardFilterConfig.showConfigButtons ) { \r\n        <button nz-button nzType=\"primary\" >\r\n            <span nz-icon nz-type=\"plus\"></span> A\u00F1adir widget\r\n        </button>\r\n    }\r\n        <button nz-button \r\n                nzType=\"default\" \r\n                nzShape=\"circle\" \r\n                (click)=\"handleClearFilter()\" \r\n                class=\"btn-clean\" \r\n                >        \r\n        <!-- Icono de Borrador (Eraser) activo / relleno -->        \r\n        <svg  \r\n            xmlns=\"http://www.w3.org/2000/svg\" \r\n            width=\"16\" height=\"16\" \r\n            viewBox=\"0 0 24 24\" \r\n            fill=\"currentColor\">\r\n            <path d=\"M16.24 3.56a2.12 2.12 0 0 1 3 0l1.2 1.2a2.12 2.12 0 0 1 0 3l-8.5 8.5H6.5a1.5 1.5 0 0 1-1.5-1.5v-5.44l11.24-11.24zM19 19H5a1 1 0 0 1 0-2h14a1 1 0 0 1 0 2z\"/>\r\n        </svg>\r\n        \r\n        </button>\r\n  </div>\r\n\r\n    <div class=\"dashboard-filter-content-wrapper\">\r\n      @for ( colFilter of controlListConfig; track colFilter) {        \r\n        <div class=\"dashboard-filter-content-wrapper-item\">\r\n            \r\n            <yw-dashboard-filter-widget \r\n              [configWidget]=\"colFilter.configWidget\"\r\n              [controlConfig]=\"colFilter.controlConfig\"\r\n              [controlData]=\"colFilter.controlData\"\r\n              (selectionChange)=\"onFilterChange($event)\"\r\n            >                \r\n            </yw-dashboard-filter-widget>\r\n\r\n        </div>\r\n      }\r\n    </div>", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;box-sizing:border-box}.dashboard-filter-content-bar{display:flex;justify-content:flex-end;gap:4px;padding:5px 10px;flex-shrink:0;width:100%;box-sizing:border-box}.dashboard-filter-content-wrapper{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;width:100%;display:flex;flex-direction:column;box-sizing:border-box}.dashboard-filter-content-wrapper-item{padding-bottom:5px}.btn-clean{display:inline-flex;align-items:center;justify-content:center;padding:0;width:32px;height:32px;border-radius:50%;transition:all .3s ease}.btn-clean.active{color:#fff;background-color:#1890ff;border-color:#1890ff}.btn-clean.active:hover{background-color:#40a9ff;border-color:#40a9ff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: YwDashboardFilterWidgetComponent, selector: "yw-dashboard-filter-widget", inputs: ["configWidget", "controlConfig", "controlData"], outputs: ["eventDeleteRequest", "eventShowConfigFormRequest", "selectionChange"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i5.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i6.ɵ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: i7.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }] }); }
+    // Handlers para la entrada manual de fechas
+    onStartDateInput(value) {
+        if (value && value <= this.endDate()) {
+            this.startDate.set(value);
+        }
+    }
+    onEndDateInput(value) {
+        if (value && value >= this.startDate()) {
+            this.endDate.set(value);
+        }
+    }
+    // Métodos para cambiar desde el Input Numérico
+    onStartInput(event) {
+        const value = Number(event.target.value);
+        if (!isNaN(value) && value <= this.endVal() && value >= this.min()) {
+            this.startVal.set(value);
+        }
+    }
+    onEndInput(event) {
+        const value = Number(event.target.value);
+        if (!isNaN(value) && value >= this.startVal() && value <= this.max()) {
+            this.endVal.set(value);
+        }
+    }
+    // Handlers para el movimiento del slider
+    onStartSliderChange(event) {
+        if (this.dataType == 'date') {
+            const val = Number(event.target.value);
+            const dateStr = new Date(val).toISOString().split('T')[0];
+            if (val < this.endTimestamp()) {
+                this.startDate.set(dateStr);
+            }
+        }
+        if (this.dataType == 'number') {
+            const val = Number(event.target.value);
+            if (val < this.endVal()) {
+                this.startVal.set(val);
+            }
+        }
+    }
+    onEndSliderChange(event) {
+        if (this.dataType == 'date') {
+            const val = Number(event.target.value);
+            const dateStr = new Date(val).toISOString().split('T')[0];
+            if (val > this.startTimestamp()) {
+                this.endDate.set(dateStr);
+            }
+        }
+        if (this.dataType == 'number') {
+            const val = Number(event.target.value);
+            if (val > this.startVal()) {
+                this.endVal.set(val);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwBaseSlicerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: YwBaseSlicerComponent, isStandalone: true, selector: "yw-base-slicer", inputs: { idComponent: { classPropertyName: "idComponent", publicName: "idComponent", isSignal: false, isRequired: false, transformFunction: null }, dataType: { classPropertyName: "dataType", publicName: "dataType", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, minCurrent: { classPropertyName: "minCurrent", publicName: "minCurrent", isSignal: true, isRequired: false, transformFunction: null }, maxCurrent: { classPropertyName: "maxCurrent", publicName: "maxCurrent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rangeChange: "rangeChange" }, host: { properties: { "attr.id": "idComponent" } }, ngImport: i0, template: "<div class=\"filter-container\">\r\n  <label class=\"filter-label\">{{ label() }}</label>\r\n\r\n  <!-- Inputs de fecha superiores -->\r\n  <div class=\"date-inputs-row\">\r\n    <div class=\"input-wrapper\">\r\n      @if (dataType === 'date') {  \r\n      <input \r\n        type=\"date\" \r\n        [value]=\"startDate()\"\r\n        [min]=\"minDate\"\r\n        [max]=\"endDate()\"\r\n        (change)=\"onStartDateInput($any($event.target).value)\" \r\n      />\r\n      }\r\n      @if (dataType === 'number') {  \r\n      <input \r\n        type=\"number\" \r\n        [value]=\"startVal()\"\r\n        [min]=\"minNumber\"\r\n        [max]=\"endVal()\"\r\n        [step]=\"step()\"\r\n        (input)=\"onStartInput($event)\" \r\n      />\r\n      }      \r\n    </div>\r\n\r\n    <div class=\"input-wrapper\">\r\n     @if (dataType === 'date') {  \r\n      <input \r\n        type=\"date\" \r\n        [value]=\"endDate()\"\r\n        [min]=\"startDate()\"\r\n        [max]=\"maxDate\"\r\n        (change)=\"onEndDateInput($any($event.target).value)\" \r\n      />\r\n     }\r\n      @if (dataType === 'number') {  \r\n      <input \r\n        type=\"number\" \r\n        [value]=\"endVal()\"\r\n        [min]=\"startVal()\"\r\n        [max]=\"maxNumber\"\r\n        [step]=\"step()\"\r\n        (input)=\"onEndInput($event)\" \r\n      />\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Dual Slider personalizado -->\r\n  <div class=\"slider-container\">\r\n    <div class=\"slider-track\"></div>\r\n    @if (dataType === 'date') {  \r\n    <!-- Slider Inicio -->\r\n    <input \r\n      type=\"range\" \r\n      [min]=\"minTimestamp()\" \r\n      [max]=\"maxTimestamp()\" \r\n      [value]=\"startTimestamp()\"\r\n      (input)=\"onStartSliderChange($event)\"\r\n      class=\"thumb thumb-left\"\r\n    />\r\n\r\n    <!-- Slider Fin -->\r\n    <input \r\n      type=\"range\" \r\n      [min]=\"minTimestamp()\" \r\n      [max]=\"maxTimestamp()\" \r\n      [value]=\"endTimestamp()\"\r\n      (input)=\"onEndSliderChange($event)\"\r\n      class=\"thumb thumb-right\"\r\n    />\r\n    }\r\n\r\n    @if (dataType === 'number') {  \r\n\r\n    <input \r\n      type=\"range\" \r\n      [min]=\"minNumber\" \r\n      [max]=\"maxNumber\" \r\n      [step]=\"step()\"\r\n      [value]=\"startVal()\"\r\n      (input)=\"onStartSliderChange($event)\"\r\n      class=\"thumb thumb-left\"\r\n    />\r\n\r\n    <!-- Slider M\u00E1ximo -->\r\n    <input \r\n      type=\"range\" \r\n      [min]=\"minNumber\" \r\n      [max]=\"maxNumber\" \r\n      [step]=\"step()\"\r\n      [value]=\"endVal()\"\r\n      (input)=\"onEndSliderChange($event)\"\r\n      class=\"thumb thumb-right\"\r\n    />\r\n\r\n    }\r\n\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:block;font-family:Arial,Helvetica,sans-serif;width:100%;max-width:360px}.filter-container{display:flex;flex-direction:column;gap:8px}.filter-label{font-size:13px;font-weight:600;color:#333}.date-inputs-row,.number-inputs-row{display:flex;gap:8px}.input-wrapper input[type=date]{border:1px solid #e2e8f0;border-radius:2px;padding:4px 8px;font-size:13px;color:#333;outline:none;background-color:#fff;box-shadow:0 1px 2px #0000000d}.input-wrapper input[type=date]:focus{border-color:#a0aec0}.input-wrapper input[type=number]{border:1px solid #e2e8f0;border-radius:2px;padding:4px 8px;font-size:13px;color:#333;width:90px;outline:none;background-color:#fff;box-shadow:0 1px 2px #0000000d}.input-wrapper input[type=number]:focus{border-color:#a0aec0}.slider-container{position:relative;width:100%;height:30px;display:flex;align-items:center;margin-top:4px}.slider-track{position:absolute;width:100%;height:2px;background-color:#666;border-radius:1px;z-index:1}.thumb{position:absolute;width:100%;appearance:none;-webkit-appearance:none;background:none;pointer-events:none;outline:none;margin:0;z-index:2}.thumb-right{z-index:3}.thumb::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;pointer-events:auto;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #666666;cursor:pointer;box-sizing:border-box;transition:transform .1s ease}.thumb::-webkit-slider-thumb:hover{transform:scale(1.1);border-color:#333}.thumb::-moz-range-thumb{pointer-events:auto;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #666666;cursor:pointer;box-sizing:border-box}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwDashboardFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwBaseSlicerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yw-dashboard-filter', standalone: true, imports: [CommonModule,
-                        YwDashboardFilterWidgetComponent,
-                        NzIconModule,
-                        NzButtonModule,
-                    ], template: "\r\n  <div class=\"dashboard-filter-content-bar\">\r\n    @if ( dashboardFilterConfig.showConfigButtons ) { \r\n        <button nz-button nzType=\"primary\" >\r\n            <span nz-icon nz-type=\"plus\"></span> A\u00F1adir widget\r\n        </button>\r\n    }\r\n        <button nz-button \r\n                nzType=\"default\" \r\n                nzShape=\"circle\" \r\n                (click)=\"handleClearFilter()\" \r\n                class=\"btn-clean\" \r\n                >        \r\n        <!-- Icono de Borrador (Eraser) activo / relleno -->        \r\n        <svg  \r\n            xmlns=\"http://www.w3.org/2000/svg\" \r\n            width=\"16\" height=\"16\" \r\n            viewBox=\"0 0 24 24\" \r\n            fill=\"currentColor\">\r\n            <path d=\"M16.24 3.56a2.12 2.12 0 0 1 3 0l1.2 1.2a2.12 2.12 0 0 1 0 3l-8.5 8.5H6.5a1.5 1.5 0 0 1-1.5-1.5v-5.44l11.24-11.24zM19 19H5a1 1 0 0 1 0-2h14a1 1 0 0 1 0 2z\"/>\r\n        </svg>\r\n        \r\n        </button>\r\n  </div>\r\n\r\n    <div class=\"dashboard-filter-content-wrapper\">\r\n      @for ( colFilter of controlListConfig; track colFilter) {        \r\n        <div class=\"dashboard-filter-content-wrapper-item\">\r\n            \r\n            <yw-dashboard-filter-widget \r\n              [configWidget]=\"colFilter.configWidget\"\r\n              [controlConfig]=\"colFilter.controlConfig\"\r\n              [controlData]=\"colFilter.controlData\"\r\n              (selectionChange)=\"onFilterChange($event)\"\r\n            >                \r\n            </yw-dashboard-filter-widget>\r\n\r\n        </div>\r\n      }\r\n    </div>", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;box-sizing:border-box}.dashboard-filter-content-bar{display:flex;justify-content:flex-end;gap:4px;padding:5px 10px;flex-shrink:0;width:100%;box-sizing:border-box}.dashboard-filter-content-wrapper{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;width:100%;display:flex;flex-direction:column;box-sizing:border-box}.dashboard-filter-content-wrapper-item{padding-bottom:5px}.btn-clean{display:inline-flex;align-items:center;justify-content:center;padding:0;width:32px;height:32px;border-radius:50%;transition:all .3s ease}.btn-clean.active{color:#fff;background-color:#1890ff;border-color:#1890ff}.btn-clean.active:hover{background-color:#40a9ff;border-color:#40a9ff}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { dashboardFilterConfig: [{
+            args: [{ selector: 'yw-base-slicer', imports: [], host: {
+                        '[attr.id]': 'idComponent' // Vincula el atributo id al valor de la propiedad
+                    }, template: "<div class=\"filter-container\">\r\n  <label class=\"filter-label\">{{ label() }}</label>\r\n\r\n  <!-- Inputs de fecha superiores -->\r\n  <div class=\"date-inputs-row\">\r\n    <div class=\"input-wrapper\">\r\n      @if (dataType === 'date') {  \r\n      <input \r\n        type=\"date\" \r\n        [value]=\"startDate()\"\r\n        [min]=\"minDate\"\r\n        [max]=\"endDate()\"\r\n        (change)=\"onStartDateInput($any($event.target).value)\" \r\n      />\r\n      }\r\n      @if (dataType === 'number') {  \r\n      <input \r\n        type=\"number\" \r\n        [value]=\"startVal()\"\r\n        [min]=\"minNumber\"\r\n        [max]=\"endVal()\"\r\n        [step]=\"step()\"\r\n        (input)=\"onStartInput($event)\" \r\n      />\r\n      }      \r\n    </div>\r\n\r\n    <div class=\"input-wrapper\">\r\n     @if (dataType === 'date') {  \r\n      <input \r\n        type=\"date\" \r\n        [value]=\"endDate()\"\r\n        [min]=\"startDate()\"\r\n        [max]=\"maxDate\"\r\n        (change)=\"onEndDateInput($any($event.target).value)\" \r\n      />\r\n     }\r\n      @if (dataType === 'number') {  \r\n      <input \r\n        type=\"number\" \r\n        [value]=\"endVal()\"\r\n        [min]=\"startVal()\"\r\n        [max]=\"maxNumber\"\r\n        [step]=\"step()\"\r\n        (input)=\"onEndInput($event)\" \r\n      />\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Dual Slider personalizado -->\r\n  <div class=\"slider-container\">\r\n    <div class=\"slider-track\"></div>\r\n    @if (dataType === 'date') {  \r\n    <!-- Slider Inicio -->\r\n    <input \r\n      type=\"range\" \r\n      [min]=\"minTimestamp()\" \r\n      [max]=\"maxTimestamp()\" \r\n      [value]=\"startTimestamp()\"\r\n      (input)=\"onStartSliderChange($event)\"\r\n      class=\"thumb thumb-left\"\r\n    />\r\n\r\n    <!-- Slider Fin -->\r\n    <input \r\n      type=\"range\" \r\n      [min]=\"minTimestamp()\" \r\n      [max]=\"maxTimestamp()\" \r\n      [value]=\"endTimestamp()\"\r\n      (input)=\"onEndSliderChange($event)\"\r\n      class=\"thumb thumb-right\"\r\n    />\r\n    }\r\n\r\n    @if (dataType === 'number') {  \r\n\r\n    <input \r\n      type=\"range\" \r\n      [min]=\"minNumber\" \r\n      [max]=\"maxNumber\" \r\n      [step]=\"step()\"\r\n      [value]=\"startVal()\"\r\n      (input)=\"onStartSliderChange($event)\"\r\n      class=\"thumb thumb-left\"\r\n    />\r\n\r\n    <!-- Slider M\u00E1ximo -->\r\n    <input \r\n      type=\"range\" \r\n      [min]=\"minNumber\" \r\n      [max]=\"maxNumber\" \r\n      [step]=\"step()\"\r\n      [value]=\"endVal()\"\r\n      (input)=\"onEndSliderChange($event)\"\r\n      class=\"thumb thumb-right\"\r\n    />\r\n\r\n    }\r\n\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:block;font-family:Arial,Helvetica,sans-serif;width:100%;max-width:360px}.filter-container{display:flex;flex-direction:column;gap:8px}.filter-label{font-size:13px;font-weight:600;color:#333}.date-inputs-row,.number-inputs-row{display:flex;gap:8px}.input-wrapper input[type=date]{border:1px solid #e2e8f0;border-radius:2px;padding:4px 8px;font-size:13px;color:#333;outline:none;background-color:#fff;box-shadow:0 1px 2px #0000000d}.input-wrapper input[type=date]:focus{border-color:#a0aec0}.input-wrapper input[type=number]{border:1px solid #e2e8f0;border-radius:2px;padding:4px 8px;font-size:13px;color:#333;width:90px;outline:none;background-color:#fff;box-shadow:0 1px 2px #0000000d}.input-wrapper input[type=number]:focus{border-color:#a0aec0}.slider-container{position:relative;width:100%;height:30px;display:flex;align-items:center;margin-top:4px}.slider-track{position:absolute;width:100%;height:2px;background-color:#666;border-radius:1px;z-index:1}.thumb{position:absolute;width:100%;appearance:none;-webkit-appearance:none;background:none;pointer-events:none;outline:none;margin:0;z-index:2}.thumb-right{z-index:3}.thumb::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;pointer-events:auto;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #666666;cursor:pointer;box-sizing:border-box;transition:transform .1s ease}.thumb::-webkit-slider-thumb:hover{transform:scale(1.1);border-color:#333}.thumb::-moz-range-thumb{pointer-events:auto;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #666666;cursor:pointer;box-sizing:border-box}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { idComponent: [{
                 type: Input
-            }], dashboardData: [{
+            }], dataType: [{
                 type: Input
-            }], filterSelectionChange: [{ type: i0.Output, args: ["filterSelectionChange"] }] } });
+            }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], minCurrent: [{ type: i0.Input, args: [{ isSignal: true, alias: "minCurrent", required: false }] }], maxCurrent: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCurrent", required: false }] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }] } });
 
-/* END  - FILTROS */
-class YwDashboardComponent {
-    /* */
-    constructor(environmentInjector, appRef) {
-        //Configurar Bloqueo de Widgets
-        /*
+class YwButtonSlicerComponent {
+    constructor() {
+        // Configuración de entradas
+        this.idComponent = '';
+        this.label = input('Tipo de producto', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+        this.allowMultiple = input(true, ...(ngDevMode ? [{ debugName: "allowMultiple" }] : [])); // Permite cambiar a selección única si es necesario
+        // Evento de salida con la lista de IDs seleccionados
+        this.selectionChange = output();
+        // Signal con los IDs seleccionados
+        this.selectedIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedIds" }] : []));
+        // Current IDs seleccionados
+        this.currentIds = input([], ...(ngDevMode ? [{ debugName: "currentIds" }] : []));
+        // Emitir el listado en Array cada vez que la Signal de selección cambie
         effect(() => {
-          const isLocked = this.allIsLocked();
-          console.log('El estado de bloqueo cambió a:', isLocked);
-          this.fn_lockPositionWidgets(isLocked);
+            this.selectionChange.emit(Array.from(this.selectedIds()));
         });
-        */
-        this.environmentInjector = environmentInjector;
-        this.appRef = appRef;
-        this.widgetsActivos = new Map();
-        this.showControls = input(false, ...(ngDevMode ? [{ debugName: "showControls" }] : []));
-        this.showFilter = input(false, ...(ngDevMode ? [{ debugName: "showFilter" }] : []));
-        this.allIsLocked = signal(false, ...(ngDevMode ? [{ debugName: "allIsLocked" }] : []));
-        this.drawerfiltervisible = false;
-        this.drawerconfigvisible = false;
-        this.drawerCurrentWidgetObject = {};
-        this.isLocked = false;
-        this.countWidget = 1;
-        this.layoutConfig = {
-            margin: 10,
-            cellHeight: 100,
-            columns: 24
-        };
-        /* ejemplo de Items
-        items: [
-            { id: 'div-1', x: 0, y: 0, w: 14, h: 2, content: 'DIV 1' , contentData : {}},
-            { id: 'div-2', x: 5, y: 2, w: 19, h: 1, content: 'DIV 2' , contentData : {}},
-            { id: 'div-3', x: 0, y: 3, w: 22, h: 1, content: 'DIV 3', contentData : {} }
-          ]
-        */
-        this.dashboardStyle = {
-            canvasBackgroundColor: "#f5f5f5",
-            widgetBackgroundColor: "#ffffff",
-            widgetBorderColor: "#007bff"
-        };
-        this.dashboardConfig = {
-            showConfigButtons: false,
-            lockPositionWidgets: false,
-            layoutConfig: {
-                margin: 0,
-                cellHeight: 0,
-                columns: 0
-            },
-            controlListConfig: []
-        };
-        this.dashboardData = [];
-        this.dashboardItems = [];
-        /* REF FILTROS */
-        this.dashboardFilterConfig = {
-            showConfigButtons: false,
-            lockPositionWidgets: false,
-            controlListConfig: []
-        };
     }
     ngOnInit() {
-    }
-    ngOnChanges(changes) {
-        if (changes['dashboardConfig']) {
-            console.log('Nuevo valor dashboardConfig:', this.dashboardConfig);
-            //this.initCanvasGrid();
-        }
-        if (changes['dashboardData']) {
-            console.log('Nuevo valor dashboardData:', this.dashboardData);
-            //this.initCanvasGrid();
+        if (this.currentIds() && this.currentIds().length > 0) {
+            this.selectedIds().clear();
+            this.currentIds().forEach((itemId) => {
+                this.selectedIds().add(itemId);
+            });
         }
     }
-    ngAfterViewInit() {
-        this.initCanvasGrid();
-    }
-    initCanvasGrid() {
-        this.layoutConfig = this.dashboardConfig.layoutConfig;
-        // Opciones para restringir colisiones y comportamiento
-        let options = {
-            column: this.layoutConfig.columns,
-            cellHeight: this.layoutConfig.cellHeight,
-            margin: this.layoutConfig.margin,
-            float: true, // Evita que los divs floten automáticamente hacia arriba
-            //noOverlap: true,      // CLAVE: Bloquea el movimiento si colisiona con otro DIV
-            resizable: { handles: 'e, se, s, sw, w, nw, n, ne', autoHide: true } // Permite redimensionar desde todos los bordes
-        };
-        if (this.layoutConfig.columnOpts) {
-            options = {
-                column: this.layoutConfig.columns,
-                cellHeight: this.layoutConfig.cellHeight,
-                margin: this.layoutConfig.margin,
-                columnOpts: {
-                    breakpointForWindow: this.layoutConfig.columnOpts.breakpointForWindow, // Mide el ancho de la ventana gráfica
-                    breakpoints: this.layoutConfig.columnOpts.breakpoints,
-                    layout: this.layoutConfig.columnOpts.layout || 'list', // Mantiene el orden de los widgets secuencialmente al colapsar
-                },
-                float: true, // Evita que los divs floten automáticamente hacia arriba
-                //noOverlap: true,      // CLAVE: Bloquea el movimiento si colisiona con otro DIV
-                resizable: { handles: 'e, se, s, sw, w, nw, n, ne', autoHide: true } // Permite redimensionar desde todos los bordes
-            };
-        }
-        /*EXAMPLE OF "columnOpts"
-        columnOpts: {
-                      breakpointForWindow: true,
-                      breakpoints: [
-                        { w: 768, c: 1 },
-                        { w: 992, c: 6 },
-                        { w: 1200, c: this.layoutConfig.columns } // 👈 Usa tu variable para consistencia en Desktop
-                      ],
-                      layout: 'list'
-                    }
-        */
-        // Inicializar el canvas
-        this.grid = GridStack.init(options, this.gridContainer.nativeElement);
-        // Cargar los elementos iniciales desde el JSON
-        //this.loadLayoutFromJSON(this.dashboardItems);
-        this.loadLayoutFromJSON(this.dashboardConfig, this.dashboardStyle);
-        //Evaluar Bloqueo de Widgets en Inicializacion
-        if (this.dashboardConfig.lockPositionWidgets) {
-            this.fn_lockPositionWidgets(this.dashboardConfig.lockPositionWidgets);
-        }
-        // Listener para detectar cambios y actualizar el JSON
-        this.grid.on('change', (event, items) => {
-            this.saveLayoutToJSON();
-        });
-        //Listener para detectar cuando cambia las dimenciones de un widget
-        this.grid.on('resizestop', (event, el) => {
-            // Disparamos el evento nativo del navegador de forma controlada
-            window.dispatchEvent(new Event('resize'));
-        });
+    clearSelection() {
+        this.selectedIds().clear();
+        this.selectionChange.emit([]);
     }
-    //Filtrar Datos por Componente del Widget
-    fn_getDataForWidgetComponent(listTables, prmDashboardData) {
-        let dataresponse = new Map();
-        const ldsize = prmDashboardData.length;
-        const ltsize = listTables.length;
-        if (ltsize > 0) {
-            listTables.forEach((curTableName) => {
-                prmDashboardData.forEach((curTableRef) => {
-                    if (curTableName.localeCompare(curTableRef.tableName) == 0) {
-                        dataresponse.set(curTableRef.tableName, curTableRef.tableData);
-                    }
-                });
-            });
+    // Toggle para seleccionar / deseleccionar
+    toggleSelection(id) {
+        const current = new Set(this.selectedIds());
+        if (this.allowMultiple()) {
+            if (current.has(id)) {
+                current.delete(id);
+            }
+            else {
+                current.add(id);
+            }
         }
         else {
-            prmDashboardData.forEach((curTableRef) => {
-                dataresponse.set(curTableRef.tableName, curTableRef.tableData);
-            });
+            // Si es selección única
+            current.clear();
+            current.add(id);
         }
-        const object_base_response = Object.fromEntries(dataresponse);
-        return object_base_response;
+        this.selectedIds.set(current);
     }
-    fn_getDataForWidgetComponent_back(listTables) {
-        let dataresponse = [];
-        const ldsize = this.dashboardData.length;
-        const ltsize = listTables.length;
-        if (ltsize > 0) {
-            listTables.forEach((curTableName) => {
-                this.dashboardData.forEach((curTableData) => {
-                    if (curTableName.localeCompare(curTableData.tableName) == 0) {
-                        dataresponse.push(curTableData);
-                    }
-                });
-            });
+    isSelected(id) {
+        return this.selectedIds().has(id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwButtonSlicerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: YwButtonSlicerComponent, isStandalone: true, selector: "yw-button-slicer", inputs: { idComponent: { classPropertyName: "idComponent", publicName: "idComponent", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, allowMultiple: { classPropertyName: "allowMultiple", publicName: "allowMultiple", isSignal: true, isRequired: false, transformFunction: null }, currentIds: { classPropertyName: "currentIds", publicName: "currentIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "attr.id": "idComponent" } }, ngImport: i0, template: "<div class=\"filter-container\">\r\n  \r\n  <div class=\"filter-header\">\r\n    <span class=\"filter-label\">{{ label() }}</span>\r\n    <div class=\"header-actions\">      \r\n      <button class=\"icon-btn\" (click)=\"clearSelection()\" >\uD83E\uDDF9</button>      \r\n    </div>\r\n  </div>\r\n\r\n\r\n  <!-- Contenedor con barra de desplazamiento interna -->\r\n  <div class=\"grid-scroll-container\">\r\n    <div class=\"buttons-grid\">\r\n      @for (item of options(); track item.id) {\r\n        <button \r\n          type=\"button\" \r\n          class=\"option-btn\" \r\n          [class.selected]=\"isSelected(item.id)\"\r\n          (click)=\"toggleSelection(item.id)\"\r\n          [title]=\"item.label\">\r\n          <span class=\"btn-text\">{{ item.label }}</span>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:block;font-family:Arial,Helvetica,sans-serif;width:100%;max-width:320px}.filter-container{display:flex;flex-direction:column;gap:8px}.filter-header{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-bottom:1px solid #f0f0f0}.filter-label{font-size:13px;font-weight:600;color:#333}.header-actions{display:flex;gap:4px}.grid-scroll-container{max-height:145px;overflow-y:auto;padding-right:4px}.buttons-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.option-btn{display:flex;align-items:center;justify-content:center;height:38px;padding:4px 6px;background-color:#fff;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;transition:all .15s ease-in-out;outline:none;box-sizing:border-box}.option-btn:hover{border-color:#9ca3af;background-color:#f9fafb}.btn-text{font-size:12px;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center}.option-btn.selected{border-color:#2563eb;background-color:#eff6ff;box-shadow:0 0 0 1px #2563eb}.option-btn.selected .btn-text{color:#1d4ed8;font-weight:600}.grid-scroll-container::-webkit-scrollbar{width:6px}.grid-scroll-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.grid-scroll-container::-webkit-scrollbar-thumb{background:#71717a;border-radius:4px}.grid-scroll-container::-webkit-scrollbar-thumb:hover{background:#52525b}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwButtonSlicerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yw-button-slicer', standalone: true, imports: [CommonModule], host: {
+                        '[attr.id]': 'idComponent' // Vincula el atributo id al valor de la propiedad
+                    }, template: "<div class=\"filter-container\">\r\n  \r\n  <div class=\"filter-header\">\r\n    <span class=\"filter-label\">{{ label() }}</span>\r\n    <div class=\"header-actions\">      \r\n      <button class=\"icon-btn\" (click)=\"clearSelection()\" >\uD83E\uDDF9</button>      \r\n    </div>\r\n  </div>\r\n\r\n\r\n  <!-- Contenedor con barra de desplazamiento interna -->\r\n  <div class=\"grid-scroll-container\">\r\n    <div class=\"buttons-grid\">\r\n      @for (item of options(); track item.id) {\r\n        <button \r\n          type=\"button\" \r\n          class=\"option-btn\" \r\n          [class.selected]=\"isSelected(item.id)\"\r\n          (click)=\"toggleSelection(item.id)\"\r\n          [title]=\"item.label\">\r\n          <span class=\"btn-text\">{{ item.label }}</span>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:block;font-family:Arial,Helvetica,sans-serif;width:100%;max-width:320px}.filter-container{display:flex;flex-direction:column;gap:8px}.filter-header{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-bottom:1px solid #f0f0f0}.filter-label{font-size:13px;font-weight:600;color:#333}.header-actions{display:flex;gap:4px}.grid-scroll-container{max-height:145px;overflow-y:auto;padding-right:4px}.buttons-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.option-btn{display:flex;align-items:center;justify-content:center;height:38px;padding:4px 6px;background-color:#fff;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;transition:all .15s ease-in-out;outline:none;box-sizing:border-box}.option-btn:hover{border-color:#9ca3af;background-color:#f9fafb}.btn-text{font-size:12px;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center}.option-btn.selected{border-color:#2563eb;background-color:#eff6ff;box-shadow:0 0 0 1px #2563eb}.option-btn.selected .btn-text{color:#1d4ed8;font-weight:600}.grid-scroll-container::-webkit-scrollbar{width:6px}.grid-scroll-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.grid-scroll-container::-webkit-scrollbar-thumb{background:#71717a;border-radius:4px}.grid-scroll-container::-webkit-scrollbar-thumb:hover{background:#52525b}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { idComponent: [{
+                type: Input
+            }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], allowMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMultiple", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], currentIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentIds", required: false }] }] } });
+
+class YwListSlicerComponent {
+    constructor() {
+        // Entradas generales
+        this.idComponent = '';
+        this.label = input('Filtro Jerárquico', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.clearTitleLabel = input('Limpiar Seleccion', ...(ngDevMode ? [{ debugName: "clearTitleLabel" }] : []));
+        // Opción 1: Entregar datos en árbol de texto directo
+        this.rawData = input([], ...(ngDevMode ? [{ debugName: "rawData" }] : []));
+        // Opción 2: Generar desde fechas
+        this.dataType = input('date', ...(ngDevMode ? [{ debugName: "dataType" }] : []));
+        this.minDate = input('', ...(ngDevMode ? [{ debugName: "minDate" }] : [])); // Formato 'YYYY-MM-DD'
+        this.maxDate = input('', ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
+        this.dateHierarchyType = input('YEAR_TRIMESTER_MONTH', ...(ngDevMode ? [{ debugName: "dateHierarchyType" }] : []));
+        this.monthNames = input(['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], ...(ngDevMode ? [{ debugName: "monthNames" }] : []));
+        // Evento de salida con el ID/Nodo seleccionado
+        this.selectionChange = output();
+        this.filterValueChange = output(); // Output 2 (Rangos o Hojas)
+        // ID del elemento seleccionado (Selección Simple)
+        this.selectedId = signal(null, ...(ngDevMode ? [{ debugName: "selectedId" }] : []));
+        this.currentSelectedId = input(null, ...(ngDevMode ? [{ debugName: "currentSelectedId" }] : []));
+        // Arbol de nodos computado
+        this.treeNodes = computed(() => {
+            if (this.dataType() == 'date' && this.minDate() && this.maxDate()) {
+                return this.generateDateHierarchy(this.minDate(), this.maxDate(), this.dateHierarchyType());
+            }
+            return this.rawData();
+        }, ...(ngDevMode ? [{ debugName: "treeNodes" }] : []));
+        effect(() => {
+            const currentId = this.selectedId();
+            if (!currentId) {
+                this.selectionChange.emit(null);
+                this.filterValueChange.emit(null);
+                return;
+            }
+            const node = this.findNodeById(this.treeNodes(), currentId);
+            this.selectionChange.emit(node);
+            if (node) {
+                // Emitir el segundo Output según el modo
+                const calculatedValue = this.processFilterOutput(node);
+                this.filterValueChange.emit(calculatedValue);
+            }
+        });
+    }
+    ngOnInit() {
+        if (this.currentSelectedId()) {
+            this.selectedId.set(this.currentSelectedId());
         }
-        else {
-            return this.dashboardData;
+    }
+    // Métodos de Selección y Expansión
+    toggleExpand(node, event) {
+        event.stopPropagation();
+        node.expanded = !node.expanded;
+    }
+    selectNode(node, event) {
+        event.stopPropagation();
+        this.selectedId.set(this.selectedId() === node.id ? null : node.id);
+    }
+    clearSelection() {
+        this.selectedId.set(null);
+        this.filterValueChange.emit(null);
+    }
+    // --- LÓGICA DE PROCESAMIENTO DE LAS HOJAS / RANGOS ---
+    processFilterOutput(selectedNode) {
+        // 1. Obtener todas las hojas (nodos del nivel más bajo) pertenecientes al bloque seleccionado
+        const leaves = this.getLeafNodes(selectedNode);
+        if (this.dataType() == 'date') {
+            // Extraer todas las fechas de las hojas del bloque
+            const dates = leaves
+                .map(leaf => leaf.value)
+                .filter(d => d instanceof Date)
+                .sort((a, b) => a.getTime() - b.getTime());
+            if (dates.length > 0) {
+                const minD = dates[0];
+                // Para la fecha máxima, tomamos el último día del mes correspondiente
+                const maxD = new Date(dates[dates.length - 1].getFullYear(), dates[dates.length - 1].getMonth() + 1, 0);
+                return {
+                    type: 'DATE_RANGE',
+                    dateRange: {
+                        minDate: minD.toISOString().split('T')[0],
+                        maxDate: maxD.toISOString().split('T')[0]
+                    },
+                    currentNodeId: selectedNode.id
+                };
+            }
         }
-        return dataresponse;
+        // Modo Texto: Entregar arreglo con las hojas
+        return {
+            type: 'TEXT_LEAVES',
+            leafNodes: leaves,
+            leafIds: leaves.map(l => l.id),
+            currentNodeId: selectedNode.id
+        };
     }
-    // Carga elementos desde la configuración JSON
-    //public loadLayoutFromJSON(dashboardItems: YwWidgetLayoutInterface[], ): void {
-    loadLayoutFromJSON(prmDashboardConfig, prmDashboardStyle) {
-        this.grid.removeAll();
-        const widgets = [];
-        this.grid.load(widgets);
-        const lsize = prmDashboardConfig.controlListConfig.length;
-        if (lsize > 0) {
-            prmDashboardConfig.controlListConfig.forEach((widgetConfig) => {
-                //Agregar uno por uno, para poder cargar los parametros internos de los componentes.
-                const controlData = this.fn_getDataForWidgetComponent(widgetConfig.controlTables, this.dashboardData);
-                //Sobre Escribir el ID Correcto en Layaout
-                widgetConfig.layoutConfig.id = widgetConfig.widgetId;
-                //Evaluar Mostrar Eventos
-                if (widgetConfig.showConfigButtons == null || widgetConfig.showConfigButtons == undefined) {
-                    widgetConfig.showConfigButtons = prmDashboardConfig.showConfigButtons;
+    // Recorrido recursivo para obtener solo los nodos terminales (sin hijos)
+    getLeafNodes(node) {
+        if (!node.children || node.children.length === 0) {
+            return [node];
+        }
+        let leaves = [];
+        for (const child of node.children) {
+            leaves = leaves.concat(this.getLeafNodes(child));
+        }
+        return leaves;
+    }
+    findNodeById(nodes, id) {
+        for (const node of nodes) {
+            if (node.id === id)
+                return node;
+            if (node.children) {
+                const found = this.findNodeById(node.children, id);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    }
+    // Generador de Jerarquía por Fechas
+    generateDateHierarchy(startStr, endStr, type) {
+        const start = new Date(startStr);
+        const end = new Date(endStr);
+        const tree = [];
+        const monthNames = this.monthNames();
+        if (type === 'YEAR_TRIMESTER_MONTH') {
+            let current = new Date(start);
+            while (current <= end) {
+                const year = current.getFullYear();
+                let yearNode = tree.find(n => n.id === `Y_${year}`);
+                if (!yearNode) {
+                    yearNode = { id: `Y_${year}`, label: `${year}`, children: [], expanded: false };
+                    tree.push(yearNode);
                 }
-                //Evalua Asignacion de Estilos
-                if (widgetConfig.widgetStyle == null || widgetConfig.widgetStyle == undefined) {
-                    widgetConfig['widgetStyle'] = {};
-                    widgetConfig['widgetStyle']['widgetBackgroundColor'] = prmDashboardStyle.widgetBackgroundColor;
-                    widgetConfig['widgetStyle']['widgetBorderColor'] = prmDashboardStyle.widgetBorderColor;
+                const month = current.getMonth();
+                const qtrNum = Math.floor(month / 3) + 1;
+                let qtrNode = yearNode.children.find(n => n.id === `Q_${year}_${qtrNum}`);
+                if (!qtrNode) {
+                    qtrNode = { id: `Q_${year}_${qtrNum}`, label: `Qtr ${qtrNum}`, children: [], expanded: false };
+                    yearNode.children.push(qtrNode);
                 }
-                this.eventAddWidget(widgetConfig, widgetConfig.controlConfig, controlData, widgetConfig.layoutConfig);
-            });
+                const monthId = `M_${year}_${month + 1}`;
+                if (!qtrNode.children.some(n => n.id === monthId)) {
+                    qtrNode.children.push({
+                        id: monthId,
+                        label: monthNames[month],
+                        value: new Date(year, month, 1) // Fecha inicial del mes
+                    });
+                }
+                current.setMonth(current.getMonth() + 1);
+            }
         }
+        if (type === 'YEAR_SEMESTER_MONTH') {
+            let current = new Date(start);
+            while (current <= end) {
+                const year = current.getFullYear();
+                let yearNode = tree.find(n => n.id === `Y_${year}`);
+                if (!yearNode) {
+                    yearNode = { id: `Y_${year}`, label: `${year}`, children: [], expanded: false };
+                    tree.push(yearNode);
+                }
+                const month = current.getMonth();
+                const qtrNum = Math.floor(month / 6) + 1;
+                let qtrNode = yearNode.children.find(n => n.id === `S_${year}_${qtrNum}`);
+                if (!qtrNode) {
+                    qtrNode = { id: `S_${year}_${qtrNum}`, label: `S ${qtrNum}`, children: [], expanded: false };
+                    yearNode.children.push(qtrNode);
+                }
+                const monthId = `M_${year}_${month + 1}`;
+                if (!qtrNode.children.some(n => n.id === monthId)) {
+                    qtrNode.children.push({
+                        id: monthId,
+                        label: monthNames[month],
+                        value: new Date(year, month, 1) // Fecha inicial del mes
+                    });
+                }
+                current.setMonth(current.getMonth() + 1);
+            }
+        }
+        return tree;
     }
-    // Guarda los elementos desde la configuración JSON
-    saveLayoutToJSON() {
-        const currentWidgets = this.grid.save(false);
-        this.dashboardItems = currentWidgets.map(w => ({
-            id: w.id,
-            x: w.x || 0,
-            y: w.y || 0,
-            w: w.w || 1,
-            h: w.h || 1,
-            content: w.content,
-            contentData: {}
-        }));
-        console.log('JSON Guardado:', JSON.stringify(this.dashboardItems));
-        return this.dashboardItems;
-    }
-    /*BUTTON ADD WIDGET*/
-    fn_btn_addWidget() {
-        this.countWidget++;
-        const newWidgetId = 'widget-' + this.countWidget;
-        let newItem = {
-            id: newWidgetId, autoPosition: true, w: 6, h: 3,
-            content: ''
-        };
-        //Datos de Widget y sus Contenidos
-        const widgetConfig = {
-            widgetId: newWidgetId,
-            title: '',
-            typeComponent: 'empty-visual',
-            showConfigButtons: true,
-            widgetStyle: DEFAULT_WIDGET_STYLE,
-            layoutConfig: {
-                id: '',
-                w: 0,
-                h: 0,
-                content: undefined
-            },
-            controlConfig: {},
-            controlTables: []
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwListSlicerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: YwListSlicerComponent, isStandalone: true, selector: "yw-list-slicer", inputs: { idComponent: { classPropertyName: "idComponent", publicName: "idComponent", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, clearTitleLabel: { classPropertyName: "clearTitleLabel", publicName: "clearTitleLabel", isSignal: true, isRequired: false, transformFunction: null }, rawData: { classPropertyName: "rawData", publicName: "rawData", isSignal: true, isRequired: false, transformFunction: null }, dataType: { classPropertyName: "dataType", publicName: "dataType", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateHierarchyType: { classPropertyName: "dateHierarchyType", publicName: "dateHierarchyType", isSignal: true, isRequired: false, transformFunction: null }, monthNames: { classPropertyName: "monthNames", publicName: "monthNames", isSignal: true, isRequired: false, transformFunction: null }, currentSelectedId: { classPropertyName: "currentSelectedId", publicName: "currentSelectedId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", filterValueChange: "filterValueChange" }, host: { properties: { "attr.id": "idComponent" } }, ngImport: i0, template: "<div class=\"filter-container\">\r\n  <!-- Cabecera con t\u00EDtulo y acciones de filtro -->\r\n  <div class=\"filter-header\">\r\n    <span class=\"filter-label\">{{ label() }}</span>\r\n    <div class=\"header-actions\">\r\n      <!--<button class=\"icon-btn\" title=\"Filtro\">\uD83D\uDD3B</button>-->\r\n      <button class=\"icon-btn\" (click)=\"clearSelection()\" title=\"{{clearTitleLabel}}\">\uD83E\uDDF9</button>\r\n      <!--<button class=\"icon-btn\" title=\"M\u00E1s opciones\">\u22EE</button>-->\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Vista en \u00C1rbol con scroll interno -->\r\n  <div class=\"tree-scroll-container\">\r\n    <ng-container *ngTemplateOutlet=\"nodeListTemplate; context: { $implicit: treeNodes(), level: 0 }\"></ng-container>\r\n  </div>\r\n</div>\r\n\r\n<!-- Plantilla Recursiva para renderizar niveles del \u00C1rbol -->\r\n<ng-template #nodeListTemplate let-nodes let-level=\"level\">\r\n  <div class=\"tree-level\">\r\n    @for (node of nodes; track node.id) {\r\n      <div class=\"tree-node-wrapper\">\r\n        <!-- Fila de opci\u00F3n -->\r\n        <div \r\n          class=\"tree-node-row\" \r\n          [class.selected]=\"selectedId() === node.id\"\r\n          [style.padding-left.px]=\"level * 18 + 6\"\r\n          (click)=\"selectNode(node, $event)\">\r\n          \r\n          <!-- Flecha expandir/colapsar (si tiene hijos) -->\r\n          @if (node.children && node.children.length > 0) {\r\n            <span class=\"chevron-icon\" (click)=\"toggleExpand(node, $event)\">\r\n              {{ node.expanded ? '\uD83D\uDF83' : '\uD83D\uDF82' }}\r\n            </span>\r\n          } @else {\r\n            <span class=\"chevron-spacer\"></span>\r\n          }\r\n\r\n          <!-- Radio Button (Selecci\u00F3n simple) -->\r\n          <div class=\"radio-circle\" [class.checked]=\"selectedId() === node.id\">\r\n            <div class=\"radio-inner\"></div>\r\n          </div>\r\n\r\n          <!-- Etiqueta del Nodo -->\r\n          <span class=\"node-label\">{{ node.label }}</span>\r\n        </div>\r\n\r\n        <!-- Renderizado de hijos si est\u00E1 expandido -->\r\n        @if (node.children && node.children.length > 0 && node.expanded) {\r\n          <ng-container *ngTemplateOutlet=\"nodeListTemplate; context: { $implicit: node.children, level: level + 1 }\"></ng-container>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";:host{display:block;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;width:100%;max-width:320px;background:#fff}.filter-container{display:flex;flex-direction:column;border:1px solid #e0e0e0;border-radius:4px;background-color:#fff}.filter-header{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-bottom:1px solid #f0f0f0}.filter-label{font-size:13px;font-weight:600;color:#252423}.header-actions{display:flex;gap:4px}.icon-btn{background:none;border:none;cursor:pointer;font-size:12px;color:#605e5c;padding:2px 4px;border-radius:2px}.icon-btn:hover{background-color:#f3f2f1}.tree-scroll-container{max-height:220px;overflow-y:auto;padding:4px 0}.tree-level{display:flex;flex-direction:column}.tree-node-row{display:flex;align-items:center;height:28px;cursor:pointer;-webkit-user-select:none;user-select:none;gap:6px;transition:background-color .1s ease}.tree-node-row:hover{background-color:#f3f2f1}.tree-node-row.selected{background-color:#e1dfdd}.chevron-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:10px;color:#323130}.chevron-spacer{width:16px}.radio-circle{width:14px;height:14px;border-radius:50%;border:1.5px solid #605e5c;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:#fff}.radio-circle.checked{border-color:#0078d4}.radio-circle.checked .radio-inner{width:6px;height:6px;border-radius:50%;background-color:#0078d4}.node-label{font-size:13px;color:#323130;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tree-scroll-container::-webkit-scrollbar{width:6px}.tree-scroll-container::-webkit-scrollbar-track{background:#f1f1f1}.tree-scroll-container::-webkit-scrollbar-thumb{background:#8a8886;border-radius:3px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwListSlicerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yw-list-slicer', standalone: true, imports: [CommonModule], host: {
+                        '[attr.id]': 'idComponent' // Vincula el atributo id al valor de la propiedad
+                    }, template: "<div class=\"filter-container\">\r\n  <!-- Cabecera con t\u00EDtulo y acciones de filtro -->\r\n  <div class=\"filter-header\">\r\n    <span class=\"filter-label\">{{ label() }}</span>\r\n    <div class=\"header-actions\">\r\n      <!--<button class=\"icon-btn\" title=\"Filtro\">\uD83D\uDD3B</button>-->\r\n      <button class=\"icon-btn\" (click)=\"clearSelection()\" title=\"{{clearTitleLabel}}\">\uD83E\uDDF9</button>\r\n      <!--<button class=\"icon-btn\" title=\"M\u00E1s opciones\">\u22EE</button>-->\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Vista en \u00C1rbol con scroll interno -->\r\n  <div class=\"tree-scroll-container\">\r\n    <ng-container *ngTemplateOutlet=\"nodeListTemplate; context: { $implicit: treeNodes(), level: 0 }\"></ng-container>\r\n  </div>\r\n</div>\r\n\r\n<!-- Plantilla Recursiva para renderizar niveles del \u00C1rbol -->\r\n<ng-template #nodeListTemplate let-nodes let-level=\"level\">\r\n  <div class=\"tree-level\">\r\n    @for (node of nodes; track node.id) {\r\n      <div class=\"tree-node-wrapper\">\r\n        <!-- Fila de opci\u00F3n -->\r\n        <div \r\n          class=\"tree-node-row\" \r\n          [class.selected]=\"selectedId() === node.id\"\r\n          [style.padding-left.px]=\"level * 18 + 6\"\r\n          (click)=\"selectNode(node, $event)\">\r\n          \r\n          <!-- Flecha expandir/colapsar (si tiene hijos) -->\r\n          @if (node.children && node.children.length > 0) {\r\n            <span class=\"chevron-icon\" (click)=\"toggleExpand(node, $event)\">\r\n              {{ node.expanded ? '\uD83D\uDF83' : '\uD83D\uDF82' }}\r\n            </span>\r\n          } @else {\r\n            <span class=\"chevron-spacer\"></span>\r\n          }\r\n\r\n          <!-- Radio Button (Selecci\u00F3n simple) -->\r\n          <div class=\"radio-circle\" [class.checked]=\"selectedId() === node.id\">\r\n            <div class=\"radio-inner\"></div>\r\n          </div>\r\n\r\n          <!-- Etiqueta del Nodo -->\r\n          <span class=\"node-label\">{{ node.label }}</span>\r\n        </div>\r\n\r\n        <!-- Renderizado de hijos si est\u00E1 expandido -->\r\n        @if (node.children && node.children.length > 0 && node.expanded) {\r\n          <ng-container *ngTemplateOutlet=\"nodeListTemplate; context: { $implicit: node.children, level: level + 1 }\"></ng-container>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";:host{display:block;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;width:100%;max-width:320px;background:#fff}.filter-container{display:flex;flex-direction:column;border:1px solid #e0e0e0;border-radius:4px;background-color:#fff}.filter-header{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-bottom:1px solid #f0f0f0}.filter-label{font-size:13px;font-weight:600;color:#252423}.header-actions{display:flex;gap:4px}.icon-btn{background:none;border:none;cursor:pointer;font-size:12px;color:#605e5c;padding:2px 4px;border-radius:2px}.icon-btn:hover{background-color:#f3f2f1}.tree-scroll-container{max-height:220px;overflow-y:auto;padding:4px 0}.tree-level{display:flex;flex-direction:column}.tree-node-row{display:flex;align-items:center;height:28px;cursor:pointer;-webkit-user-select:none;user-select:none;gap:6px;transition:background-color .1s ease}.tree-node-row:hover{background-color:#f3f2f1}.tree-node-row.selected{background-color:#e1dfdd}.chevron-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:10px;color:#323130}.chevron-spacer{width:16px}.radio-circle{width:14px;height:14px;border-radius:50%;border:1.5px solid #605e5c;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:#fff}.radio-circle.checked{border-color:#0078d4}.radio-circle.checked .radio-inner{width:6px;height:6px;border-radius:50%;background-color:#0078d4}.node-label{font-size:13px;color:#323130;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tree-scroll-container::-webkit-scrollbar{width:6px}.tree-scroll-container::-webkit-scrollbar-track{background:#f1f1f1}.tree-scroll-container::-webkit-scrollbar-thumb{background:#8a8886;border-radius:3px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { idComponent: [{
+                type: Input
+            }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], clearTitleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTitleLabel", required: false }] }], rawData: [{ type: i0.Input, args: [{ isSignal: true, alias: "rawData", required: false }] }], dataType: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataType", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateHierarchyType: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateHierarchyType", required: false }] }], monthNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthNames", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], filterValueChange: [{ type: i0.Output, args: ["filterValueChange"] }], currentSelectedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSelectedId", required: false }] }] } });
+
+class YwDashboardFilterWidgetComponent {
+    constructor() {
+        this.componentWidgetId = '';
+        this.typeComponent = '';
+        this.varShowConfigButtons = false;
+        this.configWidget = {
+            widgetId: '',
+            label: '',
+            typeComponent: '',
+            controlTable: '',
         };
-        const controlConfig = {};
-        const controlData = {};
-        this.eventAddWidget(widgetConfig, controlConfig, controlData, newItem);
-    }
-    /*BUTTON DELETE WIDGET*/
-    fn_btn_deleteWidget() {
-        const newWidgetId = 'widget-' + this.countWidget;
-        this.eventRemoveWidgetById(newWidgetId);
-        this.countWidget--;
+        this.controlConfig = input(...(ngDevMode ? [undefined, { debugName: "controlConfig" }] : []));
+        this.controlData = [];
+        this.eventDeleteRequest = output();
+        this.eventShowConfigFormRequest = output();
+        this.selectionChange = output();
+        effect(() => {
+            const value_controlConfig = this.fnFormatConfigData();
+            this.dataWidget = { idComponent: this.componentWidgetId,
+                configWidget: this.configWidget,
+                controlConfig: value_controlConfig
+            };
+        });
     }
-    /*BUTTON BLOCK WIDGETS*/
-    fn_btn_lockPositionWidgets() {
-        this.isLocked = !this.isLocked;
-        const shouldLock = !this.allIsLocked();
-        this.allIsLocked.set(shouldLock);
-        this.fn_lockPositionWidgets(shouldLock);
-        console.log(`All widgets have been visually and functionally locked: ${shouldLock}`);
+    ngOnInit() {
+        this.componentWidgetId = this.configWidget.widgetId;
+        this.typeComponent = this.configWidget.typeComponent;
+        const value_controlConfig = this.fnFormatConfigData();
+        this.dataWidget = { idComponent: this.componentWidgetId,
+            configWidget: this.configWidget,
+            controlConfig: value_controlConfig
+        };
     }
-    fn_lockPositionWidgets(prmAllIsLocked) {
-        const shouldLock = prmAllIsLocked;
-        // 1. Perform the functional Gridstack task on the core grid layout
-        this.grid.movable('.grid-stack-item', !shouldLock);
-        this.grid.resizable('.grid-stack-item', !shouldLock);
-        // 2. Broadcast the state change down to every active dynamic child component
-        this.widgetsActivos.forEach((componentRef) => {
-            componentRef.setInput('isLocked', shouldLock);
-        });
-        console.log(`All widgets have been visually and functionally locked - por TS Config: ${shouldLock}`);
+    /*
+    Los Datos a este componente llegan a un nivel basico, sin embargo es necesario configurar la informacion, para que se adapte a los componentes.
+    */
+    fnFormatConfigData() {
+        let responsedata = {};
+        const typeComponent = this.configWidget.typeComponent;
+        if (typeComponent == 'filter-slicer') {
+            const dataType = this.controlConfig().dataType;
+            const currentData = this.controlConfig();
+            if (dataType == 'date') {
+                const fieldName = this.controlConfig().filterField;
+                const fechas = this.controlData.map((d) => new Date(d[fieldName]).getTime());
+                const val_min = new Date(Math.min(...fechas)).toISOString().split("T")[0];
+                const val_max = new Date(Math.max(...fechas)).toISOString().split("T")[0];
+                responsedata = { dataType: dataType, min: val_min, max: val_max, minCurrent: currentData?.minCurrent, maxCurrent: currentData?.maxCurrent };
+            }
+            if (dataType == 'number') {
+                const fieldName = this.controlConfig().filterField;
+                const valStep = this.controlConfig().step;
+                const DataNumbers = this.controlData.map((d) => d[fieldName]);
+                const val_min = Math.min(...DataNumbers);
+                const val_max = Math.max(...DataNumbers);
+                responsedata = { dataType: dataType, min: val_min, max: val_max, step: valStep, minCurrent: currentData?.minCurrent, maxCurrent: currentData?.maxCurrent };
+            }
+        }
+        if (typeComponent == 'filter-button') {
+            const fieldName = this.controlConfig().filterField;
+            const fieldNameId = this.controlConfig().filterFieldId;
+            const val_allowMultiple = this.controlConfig().allowMultiple;
+            const currentData = this.controlConfig();
+            let listoptions = this.controlData.map((item) => { return { 'id': item[fieldNameId], 'label': item[fieldName] }; });
+            const listoptionsunicos = [...new Map(listoptions.map(d => [d.id, d])).values()];
+            responsedata = { options: listoptionsunicos, allowMultiple: val_allowMultiple, currentIds: currentData?.currentIds };
+        }
+        if (typeComponent == 'filter-list') {
+            const dataType = this.controlConfig().dataType;
+            const currentData = this.controlConfig();
+            if (dataType == 'date') {
+                const fieldName = this.controlConfig().filterField;
+                const val_dateHierarchyType = this.controlConfig().dateHierarchyType;
+                const fechas = this.controlData.map((d) => new Date(d[fieldName]).getTime());
+                const val_min = new Date(Math.min(...fechas)).toISOString().split("T")[0];
+                const val_max = new Date(Math.max(...fechas)).toISOString().split("T")[0];
+                responsedata = { dataType: dataType, minDate: val_min, maxDate: val_max, dateHierarchyType: val_dateHierarchyType, currentSelectedId: currentData.currentSelectedId };
+            }
+            if (dataType == 'text') {
+                const fieldName1 = this.controlConfig().filterField;
+                const fieldName2 = this.controlConfig().filterFieldN2;
+                const fieldName3 = this.controlConfig().filterFieldN3;
+                let foundN2 = false;
+                let foundN3 = false;
+                let lsizeN2 = 0;
+                let lsizeN3 = 0;
+                let nodebase = { id: '', label: '' };
+                let nodeN2 = { id: '', label: '' };
+                let nodeN3 = { id: '', label: '' };
+                let listNivel1 = [];
+                let listNivel2 = [];
+                let listNivel3 = [];
+                this.controlData.forEach((item) => {
+                    nodebase = { id: item[fieldName1], label: item[fieldName1] };
+                    //NIVEL 2
+                    if (fieldName2) {
+                        foundN2 = false;
+                        lsizeN2 = Object.keys(listNivel2).length;
+                        for (let i = 0; i < lsizeN2; i++) {
+                            const itemN2 = listNivel2[i];
+                            if (itemN2.id == item[fieldName2]) {
+                                itemN2.children.push(nodebase);
+                                nodeN2 = itemN2;
+                                foundN2 = true;
+                                break;
+                            }
+                        }
+                        ;
+                        if (foundN2 == false) {
+                            nodeN2 = { id: item[fieldName2], label: item[fieldName2], expanded: true, children: [nodebase] };
+                            if (fieldName3) {
+                                nodeN2.parentId = item[fieldName3];
+                            }
+                            listNivel2.push(nodeN2);
+                        }
+                    }
+                    else {
+                        listNivel1.push(nodebase);
+                    }
+                });
+                //NIVEL 1 - Basico no hay Jerarquia      
+                responsedata = { dataType: dataType, rawData: listNivel1, currentSelectedId: currentData.currentSelectedId };
+                //NIVEL 2 - Jerarquia de 2 niveles
+                if (fieldName2) {
+                    responsedata = { dataType: dataType, rawData: listNivel2, currentSelectedId: currentData.currentSelectedId };
+                }
+                //NIVEL 3 - Jerarquia de 3 niveles
+                if (fieldName3) {
+                    listNivel2.forEach((item) => {
+                        nodebase = item;
+                        foundN3 = false;
+                        lsizeN3 = Object.keys(listNivel3).length;
+                        for (let i = 0; i < lsizeN3; i++) {
+                            const itemN3 = listNivel3[i];
+                            if (itemN3.id == item.parentId) {
+                                itemN3.children.push(nodebase);
+                                foundN3 = true;
+                                break;
+                            }
+                        }
+                        ;
+                        if (foundN3 == false) {
+                            nodeN3 = { id: item[fieldName3], label: item[fieldName3], expanded: true, children: [nodebase] };
+                            listNivel3.push(nodeN3);
+                        }
+                    });
+                    responsedata = { dataType: dataType, rawData: listNivel3, currentSelectedId: currentData.currentSelectedId };
+                }
+            }
+        }
+        return responsedata;
     }
-    /*BUTTON UPDATE WIDGET - CONTROL CONFIG */
-    fn_btn_updateWidgetControlConfig(idWidget) {
-        let newControlConfig = {};
-        /*MODIFICAR METODO PARA CARGAR INFO DEL FORMULARIO*/
-        newControlConfig['provider'] = 'syncfusion';
-        this.eventUpdateWidgetControlConfig(idWidget, newControlConfig);
+    //Filtro Slicer
+    onFilterSlicerChange(range) {
+        console.log('Filtro actualizado:', range);
+        this.selectionChange.emit({ widgetId: this.componentWidgetId, eventResponse: range });
     }
-    /*BUTTON UPDATE WIDGET - CONTROL CONFIG */
-    fn_btn_updateWidgetControlData(idWidget) {
-        let newControlData = [];
-        /*MODIFICAR METODO PARA CARGAR INFO DEL FORMULARIO*/
-        newControlData = [
-            { month: 'Ene', sales: 35, expenses: 28 },
-            { month: 'Feb', sales: 28, expenses: 22 },
-            { month: 'Mar', sales: 34, expenses: 25 },
-            { month: 'Abr', sales: 32, expenses: 27 },
-            { month: 'May', sales: 40, expenses: 30 },
-            { month: 'Jun', sales: 32, expenses: 26 },
-            { month: 'Jul', sales: 45, expenses: 32 },
-            { month: 'Ago', sales: 38, expenses: 29 },
-            { month: 'Sep', sales: 42, expenses: 31 },
-            { month: 'Oct', sales: 48, expenses: 35 },
-            { month: 'Nov', sales: 52, expenses: 38 },
-            { month: 'Dic', sales: 58, expenses: 42 },
-        ];
-        this.eventUpdateWidgetControlData(idWidget, newControlData);
+    //Filtro Button
+    onFilterButtonChange(selectedIds) {
+        console.log('Tipos seleccionados:', selectedIds);
+        this.selectionChange.emit({ widgetId: this.componentWidgetId, eventResponse: selectedIds });
     }
-    /****************************************************** */
-    /*AGREGAR WIDGET*/
-    eventAddWidget(widgetConfig, controlConfig, controlData, item) {
-        // 1. Agregar el contenedor del widget a Gridstack
-        const el = this.grid.addWidget(item);
-        // 2. Obtener el contenedor interno generado por Gridstack
-        const contentElement = el.querySelector('.grid-stack-item-content');
-        if (contentElement) {
-            // 3. Crear dinámicamente la instancia del componente Angular
-            const componentRef = createComponent(YwDashboardWidgetComponent, {
-                environmentInjector: this.environmentInjector, // Requerido para resolver dependencias
-                hostElement: contentElement // Renderiza directamente aquí dentro
-            });
-            // 4. Pasar las propiedades/Inputs al componente creado
-            //Evaluar Estilos   
-            componentRef.setInput('styleWidget', widgetConfig.widgetStyle);
-            //componentRef.instance.configWidget = widgetConfig;
-            componentRef.setInput('configWidget', widgetConfig);
-            componentRef.setInput('controlConfig', controlConfig);
-            componentRef.setInput('controlData', controlData);
-            /* BEGIN - Eventos que provienen desde widget */
-            componentRef.instance.eventDeleteRequest.subscribe((idWidget) => {
-                // Ejecutamos la función de borrado que ya programamos en el paso anterior
-                this.eventRemoveWidgetById(idWidget);
-            });
-            componentRef.instance.eventLockToggleRequest.subscribe((event) => {
-                this.eventToggleLockWidget(event.widgetId, event.shouldLock);
-            });
-            componentRef.instance.eventMaximizeToggleRequest.subscribe((event) => {
-                this.eventToggleMaximizeWidget(event.widgetId, event.shouldMaximize);
-            });
-            //Mostrar
-            componentRef.instance.eventShowConfigFormRequest.subscribe((idWidget) => {
-                this.eventShowFormConfigWidget(idWidget);
-            });
-            /* END - Eventos que provienen desde widget */
-            // 5. Mover los nodos del DOM generados por Angular dentro del DIV del Widget
-            this.appRef.attachView(componentRef.hostView);
-            // Guardar la referencia de Componentes para hacer operaciones con estas.
-            this.widgetsActivos.set(item.id, componentRef);
-            //El componente interno no aparece bien dimensionado, con esto disparamos el evento para que se ajuste a las dimenciones correctas
-            setTimeout(() => {
-                window.dispatchEvent(new Event('resize'));
-            }, 50);
-        }
+    //Filtro Lista - 1
+    onFilterListChange(selectedData) {
+        console.log('Tipos seleccionados:', selectedData);
+        // Filtrar la información del dashboard
+        //this.selectionChange.emit({widgetId:this.componentWidgetId,eventResponse:selectedData});
     }
-    /*UPDATE CONTROLCONFIG WIDGET*/
-    eventUpdateWidgetControlConfig(idWidget, newControlConfig) {
-        //Obtener la referencia del componente almacenada en el Map
-        const componentRef = this.widgetsActivos.get(idWidget);
-        if (!componentRef) {
-            console.warn(`No se encontró un widget activo con el ID: ${idWidget}`);
+    //Filtro Lista - 2
+    onFilterListCalculated(data) {
+        if (!data) {
+            this.selectionChange.emit({ widgetId: this.componentWidgetId, eventResponse: null });
             return;
         }
-        //Actualizar el Input usando la API oficial setInput
-        componentRef.setInput('controlConfig', newControlConfig);
-        // NOTA: setInput dispara automáticamente la detección de cambios (ChangeDetectionStrategy.OnPush).
-        // Si deseas asegurarte manualmente, puedes forzar un render:
-        // componentRef.changeDetectorRef.detectChanges();
-    }
-    /*UPDATE CONTROL DATA WIDGET*/
-    eventUpdateWidgetControlData(idWidget, newControlData) {
-        //Obtener la referencia del componente almacenada en el Map
-        const componentRef = this.widgetsActivos.get(idWidget);
-        if (!componentRef) {
-            console.warn(`No se encontró un widget activo con el ID: ${idWidget}`);
-            return;
+        if (data.type === 'DATE_RANGE') {
+            //console.log('Rango a filtrar en SQL/Dashboard:', data.dateRange?.minDate, 'hasta', data.dateRange?.maxDate);
+            this.selectionChange.emit({ widgetId: this.componentWidgetId, eventResponse: { minDate: data.dateRange?.minDate, maxDate: data.dateRange?.maxDate, currentNodeId: data.currentNodeId } });
+        }
+        else if (data.type === 'TEXT_LEAVES') {
+            //console.log('Lista de elementos terminales seleccionados:', data.leafIds);
+            this.selectionChange.emit({ widgetId: this.componentWidgetId, eventResponse: { ids: data.leafIds, currentNodeId: data.currentNodeId } });
         }
-        //Actualizar el Input usando la API oficial setInput
-        componentRef.setInput('controlData', newControlData);
-        // NOTA: setInput dispara automáticamente la detección de cambios (ChangeDetectionStrategy.OnPush).
-        // Si deseas asegurarte manualmente, puedes forzar un render:
-        componentRef.changeDetectorRef.detectChanges();
-    }
-    /****************************************************** */
-    /* BEGIN - DRAWER */
-    handleShowFormFilterDrawer() {
-        this.drawerfiltervisible = true;
     }
-    handleCloseFormFilterDrawer() {
-        this.drawerfiltervisible = false;
+    onDeleteClick() {
     }
-    handleCloseFormDrawer() {
-        this.drawerconfigvisible = false;
+    onShowFormConfigClick() {
     }
-    fnGetDrawerWidth(prm_percent) {
-        const curWidth = window.innerWidth;
-        let newWidth = curWidth;
-        if (prm_percent) {
-            newWidth = Math.floor(curWidth * prm_percent / 100);
-        }
-        if (newWidth < 400) {
-            newWidth = curWidth;
-        }
-        return newWidth;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwDashboardFilterWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: YwDashboardFilterWidgetComponent, isStandalone: true, selector: "yw-dashboard-filter-widget", inputs: { configWidget: { classPropertyName: "configWidget", publicName: "configWidget", isSignal: false, isRequired: false, transformFunction: null }, controlConfig: { classPropertyName: "controlConfig", publicName: "controlConfig", isSignal: true, isRequired: false, transformFunction: null }, controlData: { classPropertyName: "controlData", publicName: "controlData", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { eventDeleteRequest: "eventDeleteRequest", eventShowConfigFormRequest: "eventShowConfigFormRequest", selectionChange: "selectionChange" }, ngImport: i0, template: "\r\n<div class=\"widget-filter-action-bar\">         \r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-delete\" (click)=\"onDeleteClick()\">\uD83D\uDDD1\uFE0F</button>\r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-config\" (click)=\"onShowFormConfigClick()\">\u2699\uFE0F</button>\r\n</div>\r\n<div class=\"widget-filter-content-wrapper\">\r\n     @if ( typeComponent == 'empty-visual' ) { \r\n       <ng-container *ngTemplateOutlet=\"emptyvisual; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'filter-slicer' ) { \r\n       <ng-container *ngTemplateOutlet=\"filterslicer; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'filter-button' ) { \r\n       <ng-container *ngTemplateOutlet=\"filterbutton; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'filter-list' ) { \r\n       <ng-container *ngTemplateOutlet=\"filterlist; context: { control: dataWidget }\"></ng-container>\r\n     }  \r\n      \r\n</div>\r\n\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  EMPTY VISUAL TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #emptyvisual let-control = \"control\">\r\n    <yw-empty-visual [idComponent]=\"control.idComponent\"\r\n                     [config]=\"control.controlConfig\" \r\n    >        \r\n    </yw-empty-visual>\r\n</ng-template>\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  FILTER SLICER TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #filterslicer let-control = \"control\"> \r\n  @if (control.controlConfig.dataType === 'date') { \r\n  <yw-base-slicer   [idComponent]=\"control.idComponent\"\r\n                    [dataType]=\"control.controlConfig.dataType\"\r\n                    [label]=\"control.configWidget.label\"\r\n                    [min]=\"control.controlConfig.min\"\r\n                    [max]=\"control.controlConfig.max\" \r\n                    [minCurrent]=\"control.controlConfig.minCurrent\"\r\n                    [maxCurrent]=\"control.controlConfig.maxCurrent\"                    \r\n                    (rangeChange)=\"onFilterSlicerChange($event)\"\r\n  >\r\n  </yw-base-slicer>\r\n  }\r\n  @if (control.controlConfig.dataType === 'number') { \r\n  <yw-base-slicer   [idComponent]=\"control.idComponent\"\r\n                    [dataType]=\"control.controlConfig.dataType\"\r\n                    [label]=\"control.configWidget.label\"\r\n                    [min]=\"control.controlConfig.min\"\r\n                    [max]=\"control.controlConfig.max\"\r\n                    [minCurrent]=\"control.controlConfig.minCurrent\"\r\n                    [maxCurrent]=\"control.controlConfig.maxCurrent\"\r\n                    [step]=\"control.controlConfig.step\"\r\n                    (rangeChange)=\"onFilterSlicerChange($event)\"\r\n  >\r\n  </yw-base-slicer>\r\n  }\r\n</ng-template>\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  FILTER BUTTON TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #filterbutton let-control = \"control\"> \r\n  <yw-button-slicer [idComponent]=\"control.idComponent\" \r\n                    [label]=\"control.configWidget.label\"\r\n                    [options]=\"control.controlConfig.options\"\r\n                    [allowMultiple]=\"control.controlConfig.allowMultiple\"\r\n                    [currentIds]=\"control.controlConfig.currentIds\"\r\n                    (selectionChange)=\"onFilterButtonChange($event)\"                 \r\n  >\r\n  </yw-button-slicer>\r\n</ng-template>\r\n\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  FILTER LIST TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #filterlist let-control = \"control\"> \r\n  \r\n  @if (control.controlConfig.dataType === 'date') {  \r\n  <yw-list-slicer   [idComponent]=\"control.idComponent\"                \r\n                    [label]=\"control.configWidget.label\"\r\n                    [dataType]=\"control.controlConfig.dataType\"\r\n                    [minDate]=\"control.controlConfig.minDate\"\r\n                    [maxDate]=\"control.controlConfig.maxDate\"\r\n                    [dateHierarchyType]=\"control.controlConfig.dateHierarchyType\"\r\n                    [currentSelectedId]=\"control.controlConfig.currentSelectedId\"\r\n                    (selectionChange)=\"onFilterListChange($event)\"\r\n                    (filterValueChange)=\"onFilterListCalculated($event)\"                   \r\n  >\r\n  </yw-list-slicer>\r\n  }\r\n\r\n\r\n  @if (control.controlConfig.dataType === 'text') {  \r\n  <yw-list-slicer   [idComponent]=\"control.idComponent\"\r\n                    [label]=\"control.configWidget.label\"\r\n                    [dataType]=\"control.controlConfig.dataType\"\r\n                    [rawData]=\"control.controlConfig.rawData\"\r\n                    [currentSelectedId]=\"control.controlConfig.currentSelectedId\"\r\n                    (selectionChange)=\"onFilterListChange($event)\"\r\n                    (filterValueChange)=\"onFilterListCalculated($event)\"  \r\n  >\r\n  </yw-list-slicer>\r\n  }\r\n\r\n\r\n</ng-template>", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;box-sizing:border-box;background-color:var(--widget-bg, #ffffff);border:1px solid var(--widget-border-color, #040404);border-radius:var(--widget-border-radius, 8px);padding:var(--widget-padding, 10px)}:host *,:host *:before,:host *:after{box-sizing:border-box}.widget-filter-action-bar{display:flex;justify-content:flex-end;gap:4px;padding:5px 10px;flex-shrink:0;width:100%}.widget-filter-content-wrapper{width:100%;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: YwEmptyVisualComponent, selector: "yw-empty-visual", inputs: ["idComponent", "config"] }, { kind: "component", type: YwBaseSlicerComponent, selector: "yw-base-slicer", inputs: ["idComponent", "dataType", "label", "min", "max", "step", "minCurrent", "maxCurrent"], outputs: ["rangeChange"] }, { kind: "component", type: YwButtonSlicerComponent, selector: "yw-button-slicer", inputs: ["idComponent", "label", "options", "allowMultiple", "currentIds"], outputs: ["selectionChange"] }, { kind: "component", type: YwListSlicerComponent, selector: "yw-list-slicer", inputs: ["idComponent", "label", "clearTitleLabel", "rawData", "dataType", "minDate", "maxDate", "dateHierarchyType", "monthNames", "currentSelectedId"], outputs: ["selectionChange", "filterValueChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwDashboardFilterWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yw-dashboard-filter-widget', standalone: true, imports: [CommonModule,
+                        YwEmptyVisualComponent,
+                        YwBaseSlicerComponent,
+                        YwButtonSlicerComponent,
+                        YwListSlicerComponent,
+                    ], template: "\r\n<div class=\"widget-filter-action-bar\">         \r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-delete\" (click)=\"onDeleteClick()\">\uD83D\uDDD1\uFE0F</button>\r\n      <button [hidden]=\"!varShowConfigButtons\" class=\"btn-config\" (click)=\"onShowFormConfigClick()\">\u2699\uFE0F</button>\r\n</div>\r\n<div class=\"widget-filter-content-wrapper\">\r\n     @if ( typeComponent == 'empty-visual' ) { \r\n       <ng-container *ngTemplateOutlet=\"emptyvisual; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'filter-slicer' ) { \r\n       <ng-container *ngTemplateOutlet=\"filterslicer; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'filter-button' ) { \r\n       <ng-container *ngTemplateOutlet=\"filterbutton; context: { control: dataWidget }\"></ng-container>\r\n     }\r\n     @if ( typeComponent == 'filter-list' ) { \r\n       <ng-container *ngTemplateOutlet=\"filterlist; context: { control: dataWidget }\"></ng-container>\r\n     }  \r\n      \r\n</div>\r\n\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  EMPTY VISUAL TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #emptyvisual let-control = \"control\">\r\n    <yw-empty-visual [idComponent]=\"control.idComponent\"\r\n                     [config]=\"control.controlConfig\" \r\n    >        \r\n    </yw-empty-visual>\r\n</ng-template>\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  FILTER SLICER TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #filterslicer let-control = \"control\"> \r\n  @if (control.controlConfig.dataType === 'date') { \r\n  <yw-base-slicer   [idComponent]=\"control.idComponent\"\r\n                    [dataType]=\"control.controlConfig.dataType\"\r\n                    [label]=\"control.configWidget.label\"\r\n                    [min]=\"control.controlConfig.min\"\r\n                    [max]=\"control.controlConfig.max\" \r\n                    [minCurrent]=\"control.controlConfig.minCurrent\"\r\n                    [maxCurrent]=\"control.controlConfig.maxCurrent\"                    \r\n                    (rangeChange)=\"onFilterSlicerChange($event)\"\r\n  >\r\n  </yw-base-slicer>\r\n  }\r\n  @if (control.controlConfig.dataType === 'number') { \r\n  <yw-base-slicer   [idComponent]=\"control.idComponent\"\r\n                    [dataType]=\"control.controlConfig.dataType\"\r\n                    [label]=\"control.configWidget.label\"\r\n                    [min]=\"control.controlConfig.min\"\r\n                    [max]=\"control.controlConfig.max\"\r\n                    [minCurrent]=\"control.controlConfig.minCurrent\"\r\n                    [maxCurrent]=\"control.controlConfig.maxCurrent\"\r\n                    [step]=\"control.controlConfig.step\"\r\n                    (rangeChange)=\"onFilterSlicerChange($event)\"\r\n  >\r\n  </yw-base-slicer>\r\n  }\r\n</ng-template>\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  FILTER BUTTON TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #filterbutton let-control = \"control\"> \r\n  <yw-button-slicer [idComponent]=\"control.idComponent\" \r\n                    [label]=\"control.configWidget.label\"\r\n                    [options]=\"control.controlConfig.options\"\r\n                    [allowMultiple]=\"control.controlConfig.allowMultiple\"\r\n                    [currentIds]=\"control.controlConfig.currentIds\"\r\n                    (selectionChange)=\"onFilterButtonChange($event)\"                 \r\n  >\r\n  </yw-button-slicer>\r\n</ng-template>\r\n\r\n\r\n<!--------------------------------------------------------------->\r\n<!----------------------  FILTER LIST TEMPLATE  ---------------------->\r\n<!--------------------------------------------------------------->\r\n<ng-template #filterlist let-control = \"control\"> \r\n  \r\n  @if (control.controlConfig.dataType === 'date') {  \r\n  <yw-list-slicer   [idComponent]=\"control.idComponent\"                \r\n                    [label]=\"control.configWidget.label\"\r\n                    [dataType]=\"control.controlConfig.dataType\"\r\n                    [minDate]=\"control.controlConfig.minDate\"\r\n                    [maxDate]=\"control.controlConfig.maxDate\"\r\n                    [dateHierarchyType]=\"control.controlConfig.dateHierarchyType\"\r\n                    [currentSelectedId]=\"control.controlConfig.currentSelectedId\"\r\n                    (selectionChange)=\"onFilterListChange($event)\"\r\n                    (filterValueChange)=\"onFilterListCalculated($event)\"                   \r\n  >\r\n  </yw-list-slicer>\r\n  }\r\n\r\n\r\n  @if (control.controlConfig.dataType === 'text') {  \r\n  <yw-list-slicer   [idComponent]=\"control.idComponent\"\r\n                    [label]=\"control.configWidget.label\"\r\n                    [dataType]=\"control.controlConfig.dataType\"\r\n                    [rawData]=\"control.controlConfig.rawData\"\r\n                    [currentSelectedId]=\"control.controlConfig.currentSelectedId\"\r\n                    (selectionChange)=\"onFilterListChange($event)\"\r\n                    (filterValueChange)=\"onFilterListCalculated($event)\"  \r\n  >\r\n  </yw-list-slicer>\r\n  }\r\n\r\n\r\n</ng-template>", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;box-sizing:border-box;background-color:var(--widget-bg, #ffffff);border:1px solid var(--widget-border-color, #040404);border-radius:var(--widget-border-radius, 8px);padding:var(--widget-padding, 10px)}:host *,:host *:before,:host *:after{box-sizing:border-box}.widget-filter-action-bar{display:flex;justify-content:flex-end;gap:4px;padding:5px 10px;flex-shrink:0;width:100%}.widget-filter-content-wrapper{width:100%;display:flex;flex-direction:column}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { configWidget: [{
+                type: Input
+            }], controlConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlConfig", required: false }] }], controlData: [{
+                type: Input
+            }], eventDeleteRequest: [{ type: i0.Output, args: ["eventDeleteRequest"] }], eventShowConfigFormRequest: [{ type: i0.Output, args: ["eventShowConfigFormRequest"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+
+class YwDashboardFilterComponent {
+    constructor() {
+        this.dashboardFilterConfig = {
+            showConfigButtons: false,
+            lockPositionWidgets: false,
+            controlListConfig: []
+        };
+        this.dashboardData = [];
+        this.filterSelectionChange = output();
+        this.controlListConfig = [];
     }
-    onFilterSelectionChange(eventData) {
-        const lsize = this.widgetsActivos.size;
-        //Validar que ya se crearon y renderizaron los componentes graficos.
-        if (lsize > 0) {
-            const currentFilterController = this.dashboardFilterConfig.controlListConfig.find((x) => x.widgetId == eventData['widgetId']);
-            if (currentFilterController) {
-                currentFilterController.controlFilterData = eventData['eventResponse'];
-                this.fnUpdateDataControllerBasedOnFilter(this.dashboardFilterConfig.controlListConfig);
+    ngOnInit() {
+        this.controlListConfig = [];
+        this.dashboardFilterConfig.controlListConfig.forEach((item) => {
+            const tableName = item.controlTable;
+            const prmcontrolData = this.fn_getDataForWidgetFilterComponent(tableName, this.dashboardData);
+            const prmconfigWidget = { ...item };
+            if (item.controlFilterData) {
+                item.configComponent = this.fnSetControlFilterCurrentValues(prmconfigWidget);
             }
-        }
+            const configControl = { configWidget: prmconfigWidget,
+                controlData: prmcontrolData,
+                controlConfig: item.configComponent
+            };
+            this.controlListConfig.push(configControl);
+        });
     }
-    fnUpdateDataControllerBasedOnFilter(filterControlListConfig) {
-        let copyDashboardData = structuredClone(this.dashboardData);
-        filterControlListConfig.forEach((item) => {
-            let tableSelected = copyDashboardData.find((x) => x.tableName == item.controlTable);
-            if (item.typeComponent == 'filter-slicer' && tableSelected && item.controlFilterData) {
-                const fieldName = item.configComponent.filterField;
-                if (item.configComponent.dataType == 'date') {
-                    const minDate = item.controlFilterData['startDate'];
-                    const maxDate = item.controlFilterData['endDate'];
-                    if (minDate && maxDate) {
-                        const filterData = tableSelected.tableData.filter((y) => (minDate <= y[fieldName] && y[fieldName] <= maxDate));
-                        tableSelected.tableData = filterData;
-                    }
-                }
-                if (item.configComponent.dataType == 'number') {
-                    const minNum = Number(item.controlFilterData['minValue']);
-                    const maxNum = Number(item.controlFilterData['maxValue']);
-                    if (minNum && maxNum) {
-                        const filterData = tableSelected.tableData.filter((y) => (minNum <= y[fieldName] && y[fieldName] <= maxNum));
-                        tableSelected.tableData = filterData;
-                    }
-                }
-            }
-            if (item.typeComponent == 'filter-button' && tableSelected && item.controlFilterData) {
-                const fieldName = item.configComponent.filterField;
-                const listValues = item.controlFilterData || [];
-                if (listValues && listValues.length > 0) {
-                    const filterData = tableSelected.tableData.filter((y) => (listValues.includes(y[fieldName])));
-                    tableSelected.tableData = filterData;
-                }
-            }
-            if (item.typeComponent == 'filter-list' && tableSelected && item.controlFilterData) {
-                const fieldName = item.configComponent.filterField;
-                if (item.configComponent.dataType == 'text') {
-                    const listValues = item.controlFilterData['ids'] || [];
-                    if (listValues && listValues.length > 0) {
-                        const listValues1D = listValues;
-                        const filterData = tableSelected.tableData.filter((y) => (listValues1D.includes(y[fieldName])));
-                        tableSelected.tableData = filterData;
-                    }
-                }
-                if (item.configComponent.dataType == 'date') {
-                    const minDate = item.controlFilterData['minDate'];
-                    const maxDate = item.controlFilterData['maxDate'];
-                    if (minDate && maxDate) {
-                        const filterData = tableSelected.tableData.filter((y) => (minDate <= y[fieldName] && y[fieldName] <= maxDate));
-                        tableSelected.tableData = filterData;
-                    }
-                }
+    //Filtrar Datos por Componente del Widget
+    fn_getDataForWidgetFilterComponent(prmTableName, prmdashboardData) {
+        let dataresponse = [];
+        const ldsize = prmdashboardData.length;
+        prmdashboardData.forEach((curTableRef) => {
+            if (prmTableName.localeCompare(curTableRef.tableName) == 0) {
+                dataresponse = curTableRef.tableData;
             }
         });
-        //Actualizacion de Data Componentes Graficos
-        this.dashboardConfig.controlListConfig.forEach((item) => {
-            const controlData = this.fn_getDataForWidgetComponent(item.controlTables, copyDashboardData);
-            this.eventUpdateWidgetControlData(item.widgetId, controlData);
-        });
+        return dataresponse;
     }
-    /* END - DRAWER */
-    /* BEGIN - Eventos que provienen desde widget */
-    eventRemoveWidgetById(widgetId) {
-        // 1. Buscar el elemento HTML físico dentro de Gridstack usando su atributo interno [gs-id]
-        const elementoHtml = this.gridContainer.nativeElement.querySelector(`[gs-id="${widgetId}"]`);
-        if (elementoHtml) {
-            // 2. Remover el elemento de Gridstack (esto limpia el HTML y reordena el tablero si float es false)
-            // El parámetro false indica que remueva el nodo del DOM pero no dispare eventos internos destructivos pesados
-            this.grid.removeWidget(elementoHtml, false);
+    onFilterChange(eventData) {
+        this.filterSelectionChange.emit({ widgetId: eventData.widgetId, eventResponse: eventData.eventResponse });
+    }
+    fnSetControlFilterCurrentValues(prmControlConfig) {
+        if (prmControlConfig.typeComponent == 'filter-slicer') {
+            let curConfigComponent = prmControlConfig.configComponent;
+            if (prmControlConfig.configComponent.dataType == 'date') {
+                curConfigComponent.minCurrent = prmControlConfig.controlFilterData['startDate'];
+                curConfigComponent.maxCurrent = prmControlConfig.controlFilterData['endDate'];
+            }
+            if (prmControlConfig.configComponent.dataType == 'number') {
+                curConfigComponent.minCurrent = prmControlConfig.controlFilterData['minValue'];
+                curConfigComponent.maxCurrent = prmControlConfig.controlFilterData['maxValue'];
+            }
+            return curConfigComponent;
         }
-        // 3. Buscar y destruir la instancia de Angular en memoria RAM
-        const componentRef = this.widgetsActivos.get(widgetId);
-        if (componentRef) {
-            // Desengancha la vista del ciclo de renderizado global de Angular
-            this.appRef.detachView(componentRef.hostView);
-            // Destruye el componente y libera la memoria RAM
-            componentRef.destroy();
-            // Eliminamos el registro de nuestro Mapa
-            this.widgetsActivos.delete(widgetId);
+        if (prmControlConfig.typeComponent == 'filter-button') {
+            let curConfigComponent = prmControlConfig.configComponent;
+            curConfigComponent.currentIds = prmControlConfig.controlFilterData || [];
+            return curConfigComponent;
         }
-        //console.log(`Widget ${widgetId} eliminado con éxito de Gridstack y Angular.`);
-    }
-    eventToggleLockWidget(widgetId, shouldLock) {
-        const elementoHtml = this.gridContainer.nativeElement.querySelector(`[gs-id="${widgetId}"]`);
-        if (elementoHtml) {
-            // La API de Gridstack nos permite congelar un nodo específico pasándole true/false
-            this.grid.movable(elementoHtml, !shouldLock);
-            this.grid.resizable(elementoHtml, !shouldLock);
-            //console.log(`Widget ${widgetId} cambiado a estado bloqueado: ${shouldLock}`);
+        if (prmControlConfig.typeComponent == 'filter-list') {
+            let curConfigComponent = prmControlConfig.configComponent;
+            curConfigComponent.currentSelectedId = prmControlConfig.controlFilterData['currentNodeId'];
+            return curConfigComponent;
         }
     }
-    eventToggleMaximizeWidget(widgetId, shouldMaximize) {
-        const elementoHtml = this.gridContainer.nativeElement.querySelector(`[gs-id="${widgetId}"]`);
-        if (elementoHtml) {
-            if (shouldMaximize) {
-                // Aplicamos estilos CSS nativos para forzar al contenedor a flotar sobre todo el dashboard
-                elementoHtml.classList.add('widget-maximized');
-                // Deshabilitamos temporalmente que Gridstack intente moverlo mientras está maximizado
-                this.grid.movable(elementoHtml, false);
-                this.grid.resizable(elementoHtml, false);
-            }
-            else {
-                elementoHtml.classList.remove('widget-maximized');
-                // Restauramos los permisos normales leyendo si el componente de Angular estaba bloqueado previamente
-                const componentRef = this.widgetsActivos.get(widgetId);
-                const isCurrentlyLocked = componentRef?.instance.isLocked() || false;
-                this.grid.movable(elementoHtml, !isCurrentlyLocked);
-                this.grid.resizable(elementoHtml, !isCurrentlyLocked);
+    handleClearFilter() {
+        this.controlListConfig = [];
+        this.dashboardFilterConfig.controlListConfig.forEach((item) => {
+            const tableName = item.controlTable;
+            const prmcontrolData = this.fn_getDataForWidgetFilterComponent(tableName, this.dashboardData);
+            const prmconfigWidget = { ...item };
+            if (item.controlFilterData) {
+                item.configComponent = this.fnSetControlFilterClearValues(prmconfigWidget);
             }
-            // Forzamos un evento resize simulado para que los gráficos de Syncfusion recalculen su nuevo tamaño gigante/pequeño
-            setTimeout(() => {
-                window.dispatchEvent(new Event('resize'));
-            }, 50);
-        }
+            const configControl = { configWidget: prmconfigWidget,
+                controlData: prmcontrolData,
+                controlConfig: item.configComponent
+            };
+            this.controlListConfig.push(configControl);
+        });
     }
-    eventShowFormConfigWidget(widgetId) {
-        this.drawerCurrentWidgetObject['widgetId'] = widgetId;
-        this.drawerconfigvisible = true;
+    fnSetControlFilterClearValues(prmControlConfig) {
+        if (prmControlConfig.typeComponent == 'filter-slicer') {
+            let curConfigComponent = prmControlConfig.configComponent;
+            curConfigComponent.minCurrent = null;
+            curConfigComponent.maxCurrent = null;
+            return curConfigComponent;
+        }
+        if (prmControlConfig.typeComponent == 'filter-button') {
+            let curConfigComponent = prmControlConfig.configComponent;
+            curConfigComponent.currentIds = [];
+            return curConfigComponent;
+        }
+        if (prmControlConfig.typeComponent == 'filter-list') {
+            let curConfigComponent = prmControlConfig.configComponent;
+            curConfigComponent.currentSelectedId = null;
+            return curConfigComponent;
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwDashboardComponent, deps: [{ token: i0.EnvironmentInjector }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: YwDashboardComponent, isStandalone: true, selector: "yw-dashboard", inputs: { showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, dashboardStyle: { classPropertyName: "dashboardStyle", publicName: "dashboardStyle", isSignal: false, isRequired: false, transformFunction: null }, dashboardConfig: { classPropertyName: "dashboardConfig", publicName: "dashboardConfig", isSignal: false, isRequired: false, transformFunction: null }, dashboardData: { classPropertyName: "dashboardData", publicName: "dashboardData", isSignal: false, isRequired: false, transformFunction: null }, dashboardFilterConfig: { classPropertyName: "dashboardFilterConfig", publicName: "dashboardFilterConfig", isSignal: false, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "gridContainer", first: true, predicate: ["gridContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <div class=\"controls\" [hidden]=\"!showControls()\">\r\n  <button (click)=\"saveLayoutToJSON()\">Guardar JSON en Consola</button>\r\n   <button (click)=\"fn_btn_addWidget()\">add widget</button>\r\n   <button (click)=\"fn_btn_lockPositionWidgets()\">Lock widgets</button>\r\n   <button (click)=\"handleShowFormFilterDrawer()\" class=\"btn-filtro\">\r\n            <svg *ngIf=\"drawerfiltervisible; else filtroInactivo\" \r\n                xmlns=\"http://www.w3.org/2000/svg\" \r\n                width=\"20\" height=\"20\" \r\n                viewBox=\"0 0 24 24\" \r\n                fill=\"currentColor\">\r\n              <path d=\"M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z\"/>\r\n            </svg>\r\n            <ng-template #filtroInactivo>\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" \r\n                  width=\"20\" height=\"20\" \r\n                  viewBox=\"0 0 24 24\" \r\n                  fill=\"none\" \r\n                  stroke=\"currentColor\" \r\n                  stroke-width=\"2\">\r\n                <polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"/>\r\n              </svg>\r\n            </ng-template>\r\n    </button>\r\n</div> -->\r\n\r\n<div class=\"controls-container\" >\r\n  @if ( showControls() ) { \r\n  <!-- Botones principales con nz-button y tipos de Ant Design -->\r\n  <button nz-button nzType=\"default\" (click)=\"saveLayoutToJSON()\" >\r\n    <span nz-icon nz-type=\"code\"></span> Guardar JSON\r\n  </button>\r\n\r\n  <button nz-button nzType=\"primary\" (click)=\"fn_btn_addWidget()\" >\r\n    <span nz-icon nz-type=\"plus\"></span> A\u00F1adir widget\r\n  </button>\r\n\r\n  <button nz-button [nzType]=\"isLocked ? 'primary' : 'default'\" nzDanger (click)=\"fn_btn_lockPositionWidgets()\" >\r\n    <span nz-icon [nzType]=\"isLocked ? 'lock' : 'unlock'\"></span> \r\n    {{ isLocked ? 'Bloqueado' : 'Bloquear' }}\r\n  </button>\r\n  }\r\n  @if ( showFilter() ) { \r\n  <!-- Bot\u00F3n de filtro con estilo ic\u00F3nico -->\r\n  <button nz-button nzType=\"default\" nzShape=\"circle\" (click)=\"handleShowFormFilterDrawer()\" class=\"btn-filtro\" [class.active]=\"drawerfiltervisible\" >\r\n    <svg *ngIf=\"drawerfiltervisible; else filtroInactivo\" \r\n         xmlns=\"http://www.w3.org/2000/svg\" \r\n         width=\"16\" height=\"16\" \r\n         viewBox=\"0 0 24 24\" \r\n         fill=\"currentColor\">\r\n      <path d=\"M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z\"/>\r\n    </svg>\r\n    <ng-template #filtroInactivo>\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" \r\n           width=\"16\" height=\"16\" \r\n           viewBox=\"0 0 24 24\" \r\n           fill=\"none\" \r\n           stroke=\"currentColor\" \r\n           stroke-width=\"2\">\r\n        <polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"/>\r\n      </svg>\r\n    </ng-template>\r\n  </button>\r\n  }\r\n</div>\r\n<div #gridContainer class=\"grid-stack canvas-container\"\r\n                   [style.--canvas-bg]=\"dashboardStyle.canvasBackgroundColor\"\r\n></div>\r\n\r\n\r\n\r\n\r\n<!-- DRAWER - FILTER  -->\r\n\r\n<nz-drawer\r\n[nzVisible]=\"drawerfiltervisible\"\r\n[nzMaskClosable]=\"false\"\r\nnzPlacement=\"right\"\r\n[nzWidth]=\"fnGetDrawerWidth(50)\"\r\n(nzOnClose)=\"handleCloseFormFilterDrawer()\"\r\n>\r\n<ng-container *nzDrawerContent>\r\n  <div class=\"widget-details-info\">\r\n    <h6 nz-typography>Filtros</h6>\r\n    <yw-dashboard-filter\r\n        [dashboardFilterConfig]=\"dashboardFilterConfig\"\r\n        [dashboardData]=\"dashboardData\"\r\n        (filterSelectionChange)=\"onFilterSelectionChange($event)\"\r\n      >\r\n     </yw-dashboard-filter>\r\n  </div>\r\n\r\n  <!--\r\n  <nz-tabset nzCentered>\r\n    <nz-tab nzTitle=\"Secion de Filtros\">\r\n    <div class=\"controls\">\r\n      aqui botones de control:\r\n\r\n    </div>\r\n    <div>\r\n  \r\n\r\n    </div>\r\n\r\n    </nz-tab>\r\n \r\n  </nz-tabset>\r\n-->\r\n</ng-container>\r\n</nz-drawer>\r\n\r\n\r\n\r\n<!-- DRAWER - CONFIGURACION  -->\r\n<nz-drawer\r\n[nzVisible]=\"drawerconfigvisible\"\r\n[nzMaskClosable]=\"false\"\r\nnzPlacement=\"right\"\r\n[nzWidth]=\"fnGetDrawerWidth(50)\"\r\n(nzOnClose)=\"handleCloseFormDrawer()\"\r\n>\r\n<ng-container *nzDrawerContent>\r\n  <div class=\"widget-details-info\">\r\n    <h6 nz-typography>{{ drawerCurrentWidgetObject.widgetId }}</h6>\r\n  </div>\r\n  <nz-tabset nzCentered>\r\n    <nz-tab nzTitle=\"{{  drawerCurrentWidgetObject.widgetId }}\">\r\n    <div class=\"controls\">\r\n       <button (click)=\"fn_btn_updateWidgetControlConfig(drawerCurrentWidgetObject.widgetId)\">Actualiza Configuracion</button>\r\n       <button (click)=\"fn_btn_updateWidgetControlData(drawerCurrentWidgetObject.widgetId)\">Actualiza Data</button>       \r\n    </div>\r\n    <div>\r\n       bla bla bla\r\n    </div>\r\n\r\n    </nz-tab>\r\n  \r\n  </nz-tabset>\r\n</ng-container>\r\n</nz-drawer>", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.canvas-container{background-color:var(--canvas-bg, #f5f5f5);min-height:500px;padding:10px}::vdeep .card-inner{background:#fff;border:1px solid #ccc;height:100%;display:flex;align-items:center;justify-content:center}:host ::ng-deep .grid-stack-item-content{border-radius:6px;box-shadow:0 2px 5px #0000001a;display:flex;align-items:center;justify-content:center;font-weight:700;overflow:hidden}::ng-deep .grid-stack-item.widget-maximized{position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;z-index:9999!important;transform:none!important;margin:0!important;padding:5px}::ng-deep .grid-stack-item.widget-maximized .grid-stack-item-content{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;border:none!important;border-radius:0!important;box-shadow:none!important;background-color:#fff!important;overflow:hidden}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-handle{opacity:0!important;background-image:none!important}.widget-details-info{padding-top:30px;text-align:center}.widget-details-info h6{font-family:manrope,sans-serif;font-size:20px;font-weight:700;line-height:26px;color:#2d3144}.widget-details-info p{font-family:manrope,sans-serif;font-size:14px;font-weight:400;line-height:21px;color:#4b5064}.controls-container{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 16px;background:#fff;border-bottom:1px solid #f0f0f0;box-shadow:0 2px 8px #0000000a;border-radius:6px;margin-bottom:16px;width:100%;box-sizing:border-box}.controls-container button{white-space:nowrap}.controls-container .btn-filtro{display:inline-flex;align-items:center;justify-content:center;padding:0;width:32px;height:32px;border-radius:50%;transition:all .3s ease}.controls-container .btn-filtro.active{color:#fff;background-color:#1890ff;border-color:#1890ff}.controls-container .btn-filtro.active:hover{background-color:#40a9ff;border-color:#40a9ff}@media(max-width:576px){.controls-container{gap:8px;padding:8px 10px}.controls-container button[nz-button]{font-size:13px;padding:0 10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i2.NzDrawerComponent, selector: "nz-drawer", inputs: ["nzContent", "nzCloseIcon", "nzClosable", "nzMaskClosable", "nzMask", "nzCloseOnNavigation", "nzNoAnimation", "nzKeyboard", "nzTitle", "nzExtra", "nzFooter", "nzPlacement", "nzSize", "nzMaskStyle", "nzBodyStyle", "nzWrapClassName", "nzWidth", "nzHeight", "nzZIndex", "nzOffsetX", "nzOffsetY", "nzVisible"], outputs: ["nzOnViewInit", "nzOnClose", "nzVisibleChange"], exportAs: ["nzDrawer"] }, { kind: "directive", type: i2.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "ngmodule", type: NzTabsModule }, { kind: "component", type: i3.NzTabsComponent, selector: "nz-tabs,nz-tabset", inputs: ["nzSelectedIndex", "nzTabPosition", "nzTabBarExtraContent", "nzCanDeactivate", "nzAddIcon", "nzTabBarStyle", "nzType", "nzSize", "nzAnimated", "nzTabBarGutter", "nzHideAdd", "nzCentered", "nzHideAll", "nzLinkRouter", "nzLinkExact", "nzDestroyInactiveTabPane"], outputs: ["nzSelectChange", "nzSelectedIndexChange", "nzTabListScroll", "nzClose", "nzAdd"], exportAs: ["nzTabs"] }, { kind: "component", type: i3.NzTabComponent, selector: "nz-tab", inputs: ["nzTitle", "nzClosable", "nzCloseIcon", "nzDisabled", "nzForceRender"], outputs: ["nzSelect", "nzDeselect", "nzClick", "nzContextmenu"], exportAs: ["nzTab"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i5.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i6.ɵ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: i7.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "component", type: YwDashboardFilterComponent, selector: "yw-dashboard-filter", inputs: ["dashboardFilterConfig", "dashboardData"], outputs: ["filterSelectionChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwDashboardFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: YwDashboardFilterComponent, isStandalone: true, selector: "yw-dashboard-filter", inputs: { dashboardFilterConfig: "dashboardFilterConfig", dashboardData: "dashboardData" }, outputs: { filterSelectionChange: "filterSelectionChange" }, ngImport: i0, template: "\r\n  <div class=\"dashboard-filter-content-bar\">\r\n    @if ( dashboardFilterConfig.showConfigButtons ) { \r\n        <button nz-button nzType=\"primary\" >\r\n            <span nz-icon nz-type=\"plus\"></span> A\u00F1adir widget\r\n        </button>\r\n    }\r\n        <button nz-button \r\n                nzType=\"default\" \r\n                nzShape=\"circle\" \r\n                (click)=\"handleClearFilter()\" \r\n                class=\"btn-clean\" \r\n                >        \r\n        <!-- Icono de Borrador (Eraser) activo / relleno -->        \r\n        <svg  \r\n            xmlns=\"http://www.w3.org/2000/svg\" \r\n            width=\"16\" height=\"16\" \r\n            viewBox=\"0 0 24 24\" \r\n            fill=\"currentColor\">\r\n            <path d=\"M16.24 3.56a2.12 2.12 0 0 1 3 0l1.2 1.2a2.12 2.12 0 0 1 0 3l-8.5 8.5H6.5a1.5 1.5 0 0 1-1.5-1.5v-5.44l11.24-11.24zM19 19H5a1 1 0 0 1 0-2h14a1 1 0 0 1 0 2z\"/>\r\n        </svg>\r\n        \r\n        </button>\r\n  </div>\r\n\r\n    <div class=\"dashboard-filter-content-wrapper\">\r\n      @for ( colFilter of controlListConfig; track colFilter) {        \r\n        <div class=\"dashboard-filter-content-wrapper-item\">\r\n            \r\n            <yw-dashboard-filter-widget \r\n              [configWidget]=\"colFilter.configWidget\"\r\n              [controlConfig]=\"colFilter.controlConfig\"\r\n              [controlData]=\"colFilter.controlData\"\r\n              (selectionChange)=\"onFilterChange($event)\"\r\n            >                \r\n            </yw-dashboard-filter-widget>\r\n\r\n        </div>\r\n      }\r\n    </div>", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;box-sizing:border-box}.dashboard-filter-content-bar{display:flex;justify-content:flex-end;gap:4px;padding:5px 10px;flex-shrink:0;width:100%;box-sizing:border-box}.dashboard-filter-content-wrapper{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;width:100%;display:flex;flex-direction:column;box-sizing:border-box}.dashboard-filter-content-wrapper-item{padding-bottom:5px}.btn-clean{display:inline-flex;align-items:center;justify-content:center;padding:0;width:32px;height:32px;border-radius:50%;transition:all .3s ease}.btn-clean.active{color:#fff;background-color:#1890ff;border-color:#1890ff}.btn-clean.active:hover{background-color:#40a9ff;border-color:#40a9ff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: YwDashboardFilterWidgetComponent, selector: "yw-dashboard-filter-widget", inputs: ["configWidget", "controlConfig", "controlData"], outputs: ["eventDeleteRequest", "eventShowConfigFormRequest", "selectionChange"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i5.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i6.ɵ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: i7.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwDashboardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwDashboardFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yw-dashboard', standalone: true, imports: [CommonModule,
-                        YwDashboardWidgetComponent,
-                        NzDrawerModule,
-                        NzTabsModule,
-                        YwBaseSlicerComponent,
+            args: [{ selector: 'yw-dashboard-filter', standalone: true, imports: [CommonModule,
+                        YwDashboardFilterWidgetComponent,
                         NzIconModule,
                         NzButtonModule,
-                        YwButtonSlicerComponent,
-                        YwListSlicerComponent,
-                        YwDashboardFilterComponent
-                    ], template: "<!-- <div class=\"controls\" [hidden]=\"!showControls()\">\r\n  <button (click)=\"saveLayoutToJSON()\">Guardar JSON en Consola</button>\r\n   <button (click)=\"fn_btn_addWidget()\">add widget</button>\r\n   <button (click)=\"fn_btn_lockPositionWidgets()\">Lock widgets</button>\r\n   <button (click)=\"handleShowFormFilterDrawer()\" class=\"btn-filtro\">\r\n            <svg *ngIf=\"drawerfiltervisible; else filtroInactivo\" \r\n                xmlns=\"http://www.w3.org/2000/svg\" \r\n                width=\"20\" height=\"20\" \r\n                viewBox=\"0 0 24 24\" \r\n                fill=\"currentColor\">\r\n              <path d=\"M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z\"/>\r\n            </svg>\r\n            <ng-template #filtroInactivo>\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" \r\n                  width=\"20\" height=\"20\" \r\n                  viewBox=\"0 0 24 24\" \r\n                  fill=\"none\" \r\n                  stroke=\"currentColor\" \r\n                  stroke-width=\"2\">\r\n                <polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"/>\r\n              </svg>\r\n            </ng-template>\r\n    </button>\r\n</div> -->\r\n\r\n<div class=\"controls-container\" >\r\n  @if ( showControls() ) { \r\n  <!-- Botones principales con nz-button y tipos de Ant Design -->\r\n  <button nz-button nzType=\"default\" (click)=\"saveLayoutToJSON()\" >\r\n    <span nz-icon nz-type=\"code\"></span> Guardar JSON\r\n  </button>\r\n\r\n  <button nz-button nzType=\"primary\" (click)=\"fn_btn_addWidget()\" >\r\n    <span nz-icon nz-type=\"plus\"></span> A\u00F1adir widget\r\n  </button>\r\n\r\n  <button nz-button [nzType]=\"isLocked ? 'primary' : 'default'\" nzDanger (click)=\"fn_btn_lockPositionWidgets()\" >\r\n    <span nz-icon [nzType]=\"isLocked ? 'lock' : 'unlock'\"></span> \r\n    {{ isLocked ? 'Bloqueado' : 'Bloquear' }}\r\n  </button>\r\n  }\r\n  @if ( showFilter() ) { \r\n  <!-- Bot\u00F3n de filtro con estilo ic\u00F3nico -->\r\n  <button nz-button nzType=\"default\" nzShape=\"circle\" (click)=\"handleShowFormFilterDrawer()\" class=\"btn-filtro\" [class.active]=\"drawerfiltervisible\" >\r\n    <svg *ngIf=\"drawerfiltervisible; else filtroInactivo\" \r\n         xmlns=\"http://www.w3.org/2000/svg\" \r\n         width=\"16\" height=\"16\" \r\n         viewBox=\"0 0 24 24\" \r\n         fill=\"currentColor\">\r\n      <path d=\"M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z\"/>\r\n    </svg>\r\n    <ng-template #filtroInactivo>\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" \r\n           width=\"16\" height=\"16\" \r\n           viewBox=\"0 0 24 24\" \r\n           fill=\"none\" \r\n           stroke=\"currentColor\" \r\n           stroke-width=\"2\">\r\n        <polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"/>\r\n      </svg>\r\n    </ng-template>\r\n  </button>\r\n  }\r\n</div>\r\n<div #gridContainer class=\"grid-stack canvas-container\"\r\n                   [style.--canvas-bg]=\"dashboardStyle.canvasBackgroundColor\"\r\n></div>\r\n\r\n\r\n\r\n\r\n<!-- DRAWER - FILTER  -->\r\n\r\n<nz-drawer\r\n[nzVisible]=\"drawerfiltervisible\"\r\n[nzMaskClosable]=\"false\"\r\nnzPlacement=\"right\"\r\n[nzWidth]=\"fnGetDrawerWidth(50)\"\r\n(nzOnClose)=\"handleCloseFormFilterDrawer()\"\r\n>\r\n<ng-container *nzDrawerContent>\r\n  <div class=\"widget-details-info\">\r\n    <h6 nz-typography>Filtros</h6>\r\n    <yw-dashboard-filter\r\n        [dashboardFilterConfig]=\"dashboardFilterConfig\"\r\n        [dashboardData]=\"dashboardData\"\r\n        (filterSelectionChange)=\"onFilterSelectionChange($event)\"\r\n      >\r\n     </yw-dashboard-filter>\r\n  </div>\r\n\r\n  <!--\r\n  <nz-tabset nzCentered>\r\n    <nz-tab nzTitle=\"Secion de Filtros\">\r\n    <div class=\"controls\">\r\n      aqui botones de control:\r\n\r\n    </div>\r\n    <div>\r\n  \r\n\r\n    </div>\r\n\r\n    </nz-tab>\r\n \r\n  </nz-tabset>\r\n-->\r\n</ng-container>\r\n</nz-drawer>\r\n\r\n\r\n\r\n<!-- DRAWER - CONFIGURACION  -->\r\n<nz-drawer\r\n[nzVisible]=\"drawerconfigvisible\"\r\n[nzMaskClosable]=\"false\"\r\nnzPlacement=\"right\"\r\n[nzWidth]=\"fnGetDrawerWidth(50)\"\r\n(nzOnClose)=\"handleCloseFormDrawer()\"\r\n>\r\n<ng-container *nzDrawerContent>\r\n  <div class=\"widget-details-info\">\r\n    <h6 nz-typography>{{ drawerCurrentWidgetObject.widgetId }}</h6>\r\n  </div>\r\n  <nz-tabset nzCentered>\r\n    <nz-tab nzTitle=\"{{  drawerCurrentWidgetObject.widgetId }}\">\r\n    <div class=\"controls\">\r\n       <button (click)=\"fn_btn_updateWidgetControlConfig(drawerCurrentWidgetObject.widgetId)\">Actualiza Configuracion</button>\r\n       <button (click)=\"fn_btn_updateWidgetControlData(drawerCurrentWidgetObject.widgetId)\">Actualiza Data</button>       \r\n    </div>\r\n    <div>\r\n       bla bla bla\r\n    </div>\r\n\r\n    </nz-tab>\r\n  \r\n  </nz-tabset>\r\n</ng-container>\r\n</nz-drawer>", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.canvas-container{background-color:var(--canvas-bg, #f5f5f5);min-height:500px;padding:10px}::vdeep .card-inner{background:#fff;border:1px solid #ccc;height:100%;display:flex;align-items:center;justify-content:center}:host ::ng-deep .grid-stack-item-content{border-radius:6px;box-shadow:0 2px 5px #0000001a;display:flex;align-items:center;justify-content:center;font-weight:700;overflow:hidden}::ng-deep .grid-stack-item.widget-maximized{position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;z-index:9999!important;transform:none!important;margin:0!important;padding:5px}::ng-deep .grid-stack-item.widget-maximized .grid-stack-item-content{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;border:none!important;border-radius:0!important;box-shadow:none!important;background-color:#fff!important;overflow:hidden}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-handle{opacity:0!important;background-image:none!important}.widget-details-info{padding-top:30px;text-align:center}.widget-details-info h6{font-family:manrope,sans-serif;font-size:20px;font-weight:700;line-height:26px;color:#2d3144}.widget-details-info p{font-family:manrope,sans-serif;font-size:14px;font-weight:400;line-height:21px;color:#4b5064}.controls-container{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 16px;background:#fff;border-bottom:1px solid #f0f0f0;box-shadow:0 2px 8px #0000000a;border-radius:6px;margin-bottom:16px;width:100%;box-sizing:border-box}.controls-container button{white-space:nowrap}.controls-container .btn-filtro{display:inline-flex;align-items:center;justify-content:center;padding:0;width:32px;height:32px;border-radius:50%;transition:all .3s ease}.controls-container .btn-filtro.active{color:#fff;background-color:#1890ff;border-color:#1890ff}.controls-container .btn-filtro.active:hover{background-color:#40a9ff;border-color:#40a9ff}@media(max-width:576px){.controls-container{gap:8px;padding:8px 10px}.controls-container button[nz-button]{font-size:13px;padding:0 10px}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.EnvironmentInjector }, { type: i0.ApplicationRef }], propDecorators: { gridContainer: [{
-                type: ViewChild,
-                args: ['gridContainer', { static: true }]
-            }], showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], showFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFilter", required: false }] }], dashboardStyle: [{
-                type: Input
-            }], dashboardConfig: [{
+                    ], template: "\r\n  <div class=\"dashboard-filter-content-bar\">\r\n    @if ( dashboardFilterConfig.showConfigButtons ) { \r\n        <button nz-button nzType=\"primary\" >\r\n            <span nz-icon nz-type=\"plus\"></span> A\u00F1adir widget\r\n        </button>\r\n    }\r\n        <button nz-button \r\n                nzType=\"default\" \r\n                nzShape=\"circle\" \r\n                (click)=\"handleClearFilter()\" \r\n                class=\"btn-clean\" \r\n                >        \r\n        <!-- Icono de Borrador (Eraser) activo / relleno -->        \r\n        <svg  \r\n            xmlns=\"http://www.w3.org/2000/svg\" \r\n            width=\"16\" height=\"16\" \r\n            viewBox=\"0 0 24 24\" \r\n            fill=\"currentColor\">\r\n            <path d=\"M16.24 3.56a2.12 2.12 0 0 1 3 0l1.2 1.2a2.12 2.12 0 0 1 0 3l-8.5 8.5H6.5a1.5 1.5 0 0 1-1.5-1.5v-5.44l11.24-11.24zM19 19H5a1 1 0 0 1 0-2h14a1 1 0 0 1 0 2z\"/>\r\n        </svg>\r\n        \r\n        </button>\r\n  </div>\r\n\r\n    <div class=\"dashboard-filter-content-wrapper\">\r\n      @for ( colFilter of controlListConfig; track colFilter) {        \r\n        <div class=\"dashboard-filter-content-wrapper-item\">\r\n            \r\n            <yw-dashboard-filter-widget \r\n              [configWidget]=\"colFilter.configWidget\"\r\n              [controlConfig]=\"colFilter.controlConfig\"\r\n              [controlData]=\"colFilter.controlData\"\r\n              (selectionChange)=\"onFilterChange($event)\"\r\n            >                \r\n            </yw-dashboard-filter-widget>\r\n\r\n        </div>\r\n      }\r\n    </div>", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;box-sizing:border-box}.dashboard-filter-content-bar{display:flex;justify-content:flex-end;gap:4px;padding:5px 10px;flex-shrink:0;width:100%;box-sizing:border-box}.dashboard-filter-content-wrapper{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;width:100%;display:flex;flex-direction:column;box-sizing:border-box}.dashboard-filter-content-wrapper-item{padding-bottom:5px}.btn-clean{display:inline-flex;align-items:center;justify-content:center;padding:0;width:32px;height:32px;border-radius:50%;transition:all .3s ease}.btn-clean.active{color:#fff;background-color:#1890ff;border-color:#1890ff}.btn-clean.active:hover{background-color:#40a9ff;border-color:#40a9ff}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { dashboardFilterConfig: [{
                 type: Input
             }], dashboardData: [{
                 type: Input
-            }], dashboardFilterConfig: [{
-                type: Input
-            }] } });
+            }], filterSelectionChange: [{ type: i0.Output, args: ["filterSelectionChange"] }] } });
 
-const parseSyncFusionData = (allTablesData, configData_) => {
-    if (!allTablesData || !configData_) {
-        return { series: [], labelData: {} };
+/* END  - FILTROS */
+class YwDashboardComponent {
+    /* */
+    constructor(environmentInjector, appRef) {
+        //Configurar Bloqueo de Widgets
+        /*
+        effect(() => {
+          const isLocked = this.allIsLocked();
+          console.log('El estado de bloqueo cambió a:', isLocked);
+          this.fn_lockPositionWidgets(isLocked);
+        });
+        */
+        this.environmentInjector = environmentInjector;
+        this.appRef = appRef;
+        this.widgetsActivos = new Map();
+        this.showControls = input(false, ...(ngDevMode ? [{ debugName: "showControls" }] : []));
+        this.showFilter = input(false, ...(ngDevMode ? [{ debugName: "showFilter" }] : []));
+        this.allIsLocked = signal(false, ...(ngDevMode ? [{ debugName: "allIsLocked" }] : []));
+        this.drawerfiltervisible = false;
+        this.drawerconfigvisible = false;
+        this.drawerCurrentWidgetObject = {};
+        this.isLocked = false;
+        this.countWidget = 1;
+        this.layoutConfig = {
+            margin: 10,
+            cellHeight: 100,
+            columns: 24
+        };
+        /* ejemplo de Items
+        items: [
+            { id: 'div-1', x: 0, y: 0, w: 14, h: 2, content: 'DIV 1' , contentData : {}},
+            { id: 'div-2', x: 5, y: 2, w: 19, h: 1, content: 'DIV 2' , contentData : {}},
+            { id: 'div-3', x: 0, y: 3, w: 22, h: 1, content: 'DIV 3', contentData : {} }
+          ]
+        */
+        this.dashboardStyle = {
+            canvasBackgroundColor: "#f5f5f5",
+            widgetBackgroundColor: "#ffffff",
+            widgetBorderColor: "#007bff"
+        };
+        this.dashboardConfig = {
+            showConfigButtons: false,
+            lockPositionWidgets: false,
+            layoutConfig: {
+                margin: 0,
+                cellHeight: 0,
+                columns: 0
+            },
+            controlListConfig: []
+        };
+        this.dashboardData = [];
+        this.dashboardItems = [];
+        /* REF FILTROS */
+        this.dashboardFilterConfig = {
+            showConfigButtons: false,
+            lockPositionWidgets: false,
+            controlListConfig: []
+        };
     }
-    console.log("bubble data:--", allTablesData, configData_);
-    //  SI LO MANDAN COMO UN ARREGLO PLANO, LO ENVOLVEMOS AUTOMÁTICAMENTE
-    if (Array.isArray(allTablesData)) {
-        const defaultTableName = configData_?.configData?.table || 'default';
-        allTablesData = { [defaultTableName]: allTablesData };
+    ngOnInit() {
+        // console.log("DATA QUE LLEGA AL DASHBOARD:",this.dashboardConfig)
     }
-    const { ruleColorPoint, configData, xLabelText, yLabelText, title, chartoColoredLine, opacity, emptyPointSettings } = configData_;
-    console.log("configData_:.::", configData_);
-    const cfg = configData || {};
-    const { xAxis, yAxis, joins, configJoins, table, serie, tooltip, legends } = cfg;
-    let series = [];
-    // Función auxiliar robusta para obtener propiedades (soporta notación con puntos de los joins)
-    // const getNestedValue = (obj: any, path: string) => {
-    //   if (!obj || !path) return undefined;
-    //   if (obj[path] !== undefined) return obj[path];
-    //   return path.split('.').reduce((acc, part) => (acc && acc[part] !== undefined ? acc[part] : undefined), obj);
-    // };
-    const sortByXAxis = (data) => {
-        if (!xAxis)
-            return data;
-        return [...data].sort((a, b) => {
-            const aValue = getNestedValue(a, xAxis);
-            const bValue = getNestedValue(b, xAxis);
-            if (aValue == null)
-                return 1;
-            if (bValue == null)
-                return -1;
-            return String(aValue).localeCompare(String(bValue), undefined, { numeric: true, sensitivity: 'base' });
-        });
-    };
-    if (joins === true) {
-        if (!configJoins) {
-            series = [];
+    ngOnChanges(changes) {
+        if (changes['dashboardConfig']) {
+            console.log('Nuevo valor dashboardConfig:', this.dashboardConfig);
+            //this.initCanvasGrid();
+        }
+        if (changes['dashboardData']) {
+            console.log('Nuevo valor dashboardData:', this.dashboardData);
+            //this.initCanvasGrid();
+        }
+    }
+    ngAfterViewInit() {
+        this.initCanvasGrid();
+    }
+    initCanvasGrid() {
+        this.layoutConfig = this.dashboardConfig.layoutConfig;
+        // Opciones para restringir colisiones y comportamiento
+        let options = {
+            column: this.layoutConfig.columns,
+            cellHeight: this.layoutConfig.cellHeight,
+            margin: this.layoutConfig.margin,
+            float: true, // Evita que los divs floten automáticamente hacia arriba
+            //noOverlap: true,      // CLAVE: Bloquea el movimiento si colisiona con otro DIV
+            resizable: { handles: 'e, se, s, sw, w, nw, n, ne', autoHide: true } // Permite redimensionar desde todos los bordes
+        };
+        if (this.layoutConfig.columnOpts) {
+            options = {
+                column: this.layoutConfig.columns,
+                cellHeight: this.layoutConfig.cellHeight,
+                margin: this.layoutConfig.margin,
+                columnOpts: {
+                    breakpointForWindow: this.layoutConfig.columnOpts.breakpointForWindow, // Mide el ancho de la ventana gráfica
+                    breakpoints: this.layoutConfig.columnOpts.breakpoints,
+                    layout: this.layoutConfig.columnOpts.layout || 'list', // Mantiene el orden de los widgets secuencialmente al colapsar
+                },
+                float: true, // Evita que los divs floten automáticamente hacia arriba
+                //noOverlap: true,      // CLAVE: Bloquea el movimiento si colisiona con otro DIV
+                resizable: { handles: 'e, se, s, sw, w, nw, n, ne', autoHide: true } // Permite redimensionar desde todos los bordes
+            };
         }
-        else {
-            const unifiedTable = resolveJoinedTableData(allTablesData, configJoins);
-            console.log('unifiedTable bubble', unifiedTable);
-            if (unifiedTable && unifiedTable.length > 0) {
-                // const validRawData = unifiedTable.filter(
-                //   (item: any) =>
-                //     item &&
-                //     xAxis &&
-                //     getNestedValue(item, xAxis) !== undefined &&
-                //     getNestedValue(item, xAxis) !== null,
-                // );
-                const validRawData = unifiedTable.filter((item) => item &&
-                    xAxis &&
-                    getNestedValue(item, xAxis) !== undefined &&
-                    getNestedValue(item, xAxis) !== null);
-                const orderedRawData = sortByXAxis(validRawData);
-                if (orderedRawData.length > 0) {
-                    if (serie) {
-                        // 2. Agrupamos los datos por el valor de la serie (ej. sucursal o vendedor)
-                        const groupedBySerie = orderedRawData.reduce((acc, item) => {
-                            const serieVal = getNestedValue(item, serie);
-                            const serieKey = serieVal !== undefined && serieVal !== null
-                                ? String(serieVal)
-                                : 'Desconocido';
-                            if (!acc[serieKey]) {
-                                acc[serieKey] = [];
-                            }
-                            acc[serieKey].push(item);
-                            return acc;
-                        }, {});
-                        series = Object.entries(groupedBySerie).map(([serieName, groupItems]) => {
-                            const orderedGroupItems = [...groupItems].sort((a, b) => {
-                                const aValue = getNestedValue(a, xAxis);
-                                const bValue = getNestedValue(b, xAxis);
-                                return String(aValue).localeCompare(String(bValue), undefined, {
-                                    numeric: true,
-                                    sensitivity: 'base'
-                                });
-                            });
-                            console.log("SERIES NAME:", orderedGroupItems);
-                            const dataSource = orderedGroupItems.map((item) => {
-                                const rawVal = getNestedValue(item, yAxis);
-                                const valorFinal = rawVal !== undefined
-                                    ? typeof rawVal === 'number'
-                                        ? rawVal
-                                        : Number(rawVal) || 0
-                                    : 0;
-                                const sizeFinal = Math.abs(valorFinal) !== 0 ? Math.abs(valorFinal) * 0.05 : 0;
-                                return {
-                                    x: String(getNestedValue(item, xAxis)),
-                                    y: valorFinal,
-                                    size: sizeFinal,
-                                    name: String(getNestedValue(item, xAxis)),
-                                    // ...(chartoColoredLine
-                                    //   ? { color: getRandomProfessionalHex() }
-                                    //   : {})
-                                };
-                            });
-                            return {
-                                name: serieName === 'default' ? 'Serie 1' : serieName,
-                                dataSource,
-                                opacity: opacity,
-                                emptyPointSettings: emptyPointSettings
-                                // dashArray: dashArray !== undefined ? dashArray : undefined,
-                                // width: width !== undefined ? width : undefined,
-                                // widthLine: widthLine !== undefined ? widthLine : undefined,
-                            };
-                        });
-                    }
-                    else {
-                        const dataSource = orderedRawData.map((item) => {
-                            let valorFinal = 0;
-                            let sizeFinal = 0;
-                            // const shouldColorLine = chartoColoredLine;
-                            const rawVal = getNestedValue(item, yAxis);
-                            // const rawSize = getNestedValue(item, size); // <--- Extraer el valor real
-                            if (rawVal !== undefined) {
-                                valorFinal = typeof rawVal === 'number' ? rawVal : Number(rawVal) || 0;
-                            }
-                            // if (rawSize !== undefined) {
-                            sizeFinal = Math.abs(valorFinal) !== 0 ? Math.abs(valorFinal) * 0.05 : 0;
-                            // }
-                            return {
-                                x: String(getNestedValue(item, xAxis)),
-                                y: valorFinal,
-                                size: sizeFinal, // <--- Valor numérico extraído
-                                name: String(getNestedValue(item, xAxis)),
-                                // ...(shouldColorLine ? { color: getRandomProfessionalHex() } : {})
-                            };
-                        });
-                        series = [
-                            {
-                                name: xAxis.split(".")[0] && xAxis !== 'default' ? xAxis.split(".")[0] : 'Serie Join',
-                                dataSource: dataSource,
-                                opacity: opacity,
-                                emptyPointSettings: emptyPointSettings
-                                // dashArray: dashArray !== undefined ? dashArray : undefined,
-                                // width: width !== undefined ? width : undefined,
-                                // widthLine: widthLine !== undefined ? widthLine : undefined,
-                            }
-                        ];
+        /*EXAMPLE OF "columnOpts"
+        columnOpts: {
+                      breakpointForWindow: true,
+                      breakpoints: [
+                        { w: 768, c: 1 },
+                        { w: 992, c: 6 },
+                        { w: 1200, c: this.layoutConfig.columns } // 👈 Usa tu variable para consistencia en Desktop
+                      ],
+                      layout: 'list'
                     }
-                }
-            }
+        */
+        // Inicializar el canvas
+        this.grid = GridStack.init(options, this.gridContainer.nativeElement);
+        // Cargar los elementos iniciales desde el JSON
+        //this.loadLayoutFromJSON(this.dashboardItems);
+        this.loadLayoutFromJSON(this.dashboardConfig, this.dashboardStyle);
+        //Evaluar Bloqueo de Widgets en Inicializacion
+        if (this.dashboardConfig.lockPositionWidgets) {
+            this.fn_lockPositionWidgets(this.dashboardConfig.lockPositionWidgets);
         }
+        // Listener para detectar cambios y actualizar el JSON
+        this.grid.on('change', (event, items) => {
+            this.saveLayoutToJSON();
+        });
+        //Listener para detectar cuando cambia las dimenciones de un widget
+        this.grid.on('resizestop', (event, el) => {
+            // Disparamos el evento nativo del navegador de forma controlada
+            window.dispatchEvent(new Event('resize'));
+        });
     }
-    else {
-        let normalizedTables = [];
-        if (Array.isArray(table)) {
-            normalizedTables = table.filter((t) => typeof t === 'string' && t.trim() !== '');
+    //Filtrar Datos por Componente del Widget
+    fn_getDataForWidgetComponent(listTables, prmDashboardData) {
+        let dataresponse = new Map();
+        const ldsize = prmDashboardData.length;
+        const ltsize = listTables.length;
+        if (ltsize > 0) {
+            listTables.forEach((curTableName) => {
+                prmDashboardData.forEach((curTableRef) => {
+                    if (curTableName.localeCompare(curTableRef.tableName) == 0) {
+                        dataresponse.set(curTableRef.tableName, curTableRef.tableData);
+                    }
+                });
+            });
         }
-        else if (typeof table === 'string' && table.trim() !== '') {
-            normalizedTables = [table];
+        else {
+            prmDashboardData.forEach((curTableRef) => {
+                dataresponse.set(curTableRef.tableName, curTableRef.tableData);
+            });
+        }
+        const object_base_response = Object.fromEntries(dataresponse);
+        return object_base_response;
+    }
+    fn_getDataForWidgetComponent_back(listTables) {
+        let dataresponse = [];
+        const ldsize = this.dashboardData.length;
+        const ltsize = listTables.length;
+        if (ltsize > 0) {
+            listTables.forEach((curTableName) => {
+                this.dashboardData.forEach((curTableData) => {
+                    if (curTableName.localeCompare(curTableData.tableName) == 0) {
+                        dataresponse.push(curTableData);
+                    }
+                });
+            });
         }
         else {
-            normalizedTables = Object.keys(allTablesData);
+            return this.dashboardData;
         }
-        series = normalizedTables
-            .map((tableName) => {
-            const rawData = (allTablesData && allTablesData[tableName]) ? allTablesData[tableName] : [];
-            if (!rawData || rawData.length === 0)
-                return null;
-            const orderedRawData = rawData.filter((item) => item && xAxis && getNestedValue(item, xAxis) !== undefined && getNestedValue(item, xAxis) !== null);
-            if (orderedRawData.length === 0)
-                return null;
-            const dataSource = orderedRawData.map((item) => {
-                let valorFinal = 0;
-                let sizeFinal = 0;
-                const shouldColorLine = chartoColoredLine;
-                const rawVal = getNestedValue(item, yAxis);
-                // const rawSize = getNestedValue(item, size);
-                if (rawVal !== undefined) {
-                    valorFinal = typeof rawVal === "number" ? rawVal : Number(rawVal) || 0;
+        return dataresponse;
+    }
+    // Carga elementos desde la configuración JSON
+    //public loadLayoutFromJSON(dashboardItems: YwWidgetLayoutInterface[], ): void {
+    loadLayoutFromJSON(prmDashboardConfig, prmDashboardStyle) {
+        this.grid.removeAll();
+        const widgets = [];
+        this.grid.load(widgets);
+        const lsize = prmDashboardConfig.controlListConfig.length;
+        if (lsize > 0) {
+            prmDashboardConfig.controlListConfig.forEach((widgetConfig) => {
+                //Agregar uno por uno, para poder cargar los parametros internos de los componentes.
+                const controlData = this.fn_getDataForWidgetComponent(widgetConfig.controlTables, this.dashboardData);
+                //Sobre Escribir el ID Correcto en Layaout
+                widgetConfig.layoutConfig.id = widgetConfig.widgetId;
+                //Evaluar Mostrar Eventos
+                if (widgetConfig.showConfigButtons == null || widgetConfig.showConfigButtons == undefined) {
+                    widgetConfig.showConfigButtons = prmDashboardConfig.showConfigButtons;
                 }
-                // if (rawSize !== undefined) {
-                sizeFinal = Math.abs(valorFinal) !== 0 ? Math.abs(valorFinal) * 0.05 : 0;
-                // }
-                return {
-                    x: String(getNestedValue(item, xAxis)),
-                    y: valorFinal,
-                    size: sizeFinal, // <--- Valor numérico extraído
-                    name: String(getNestedValue(item, xAxis))
-                    // ...(shouldColorLine ? { color: getRandomProfessionalHex() } : {})
-                };
+                //Evalua Asignacion de Estilos
+                if (widgetConfig.widgetStyle == null || widgetConfig.widgetStyle == undefined) {
+                    widgetConfig['widgetStyle'] = {};
+                    widgetConfig['widgetStyle']['widgetBackgroundColor'] = prmDashboardStyle.widgetBackgroundColor;
+                    widgetConfig['widgetStyle']['widgetBorderColor'] = prmDashboardStyle.widgetBorderColor;
+                }
+                this.eventAddWidget(widgetConfig, widgetConfig.controlConfig, controlData, widgetConfig.layoutConfig);
             });
-            return {
-                name: tableName === 'default' ? xAxis : tableName,
-                dataSource: dataSource,
-                opacity: opacity,
-                emptyPointSettings: emptyPointSettings
-                // dashArray: dashArray !== undefined ? dashArray : undefined,
-                // width: width !== undefined ? width : undefined,
-                // widthLine: widthLine !== undefined ? widthLine : undefined,
-            };
-        })
-            .filter((item) => item !== null);
+        }
+    }
+    // Guarda los elementos desde la configuración JSON
+    saveLayoutToJSON() {
+        const currentWidgets = this.grid.save(false);
+        this.dashboardItems = currentWidgets.map(w => ({
+            id: w.id,
+            x: w.x || 0,
+            y: w.y || 0,
+            w: w.w || 1,
+            h: w.h || 1,
+            content: w.content,
+            contentData: {}
+        }));
+        console.log('JSON Guardado:', JSON.stringify(this.dashboardItems));
+        return this.dashboardItems;
     }
-    const labelData = {
-        title: title || "",
-        axisX: {
-            valueType: 'Category',
-            title: typeof xLabelText === 'string' ? xLabelText : 'Categoría',
-            // labelIntersectAction: 'Rotate90',
-            // labelIntersectAction: 'Rotate45',
-        },
-        axisY: {
-            title: typeof yLabelText === 'string' ? yLabelText : 'Valor'
-        },
-        tooltip: {
-            ...(tooltip?.enable !== undefined ? { enable: tooltip.enable } : {}),
-            ...(tooltip?.format ? { format: tooltip.format } : {}),
-            ...(tooltip?.header ? { header: tooltip.header } : {}),
-            ...(tooltip?.shared !== undefined ? { shared: tooltip.shared } : {}),
-            enableHighlight: true,
-        },
-        legendSettings: {
-            visible: legends?.visible !== undefined ? legends.visible : undefined,
-            position: legends?.position !== undefined ? legends.position : undefined
-        },
-        ruleColorPoint: ruleColorPoint !== undefined ? ruleColorPoint : undefined
-    };
-    return {
-        series,
-        labelData
-    };
-};
-
-class BubbleChartSyncfusionComponent {
-    constructor(elRef, cdr) {
-        this.elRef = elRef;
-        this.cdr = cdr;
-        this.idComponent = '';
-        this.dataChartParse = [];
-        this.currentLabelSize = '';
-        this.currentWidgetWidth = 0; // Valor inicial por defecto
+    /*BUTTON ADD WIDGET*/
+    fn_btn_addWidget() {
+        this.countWidget++;
+        const newWidgetId = 'widget-' + this.countWidget;
+        let newItem = {
+            id: newWidgetId, autoPosition: true, w: 6, h: 3,
+            content: ''
+        };
+        //Datos de Widget y sus Contenidos
+        const widgetConfig = {
+            widgetId: newWidgetId,
+            title: '',
+            typeComponent: 'empty-visual',
+            showConfigButtons: true,
+            widgetStyle: DEFAULT_WIDGET_STYLE,
+            layoutConfig: {
+                id: '',
+                w: 0,
+                h: 0,
+                content: undefined
+            },
+            controlConfig: {},
+            controlTables: []
+        };
+        const controlConfig = {};
+        const controlData = {};
+        this.eventAddWidget(widgetConfig, controlConfig, controlData, newItem);
     }
-    ngOnInit() {
-        this.updateParsedData();
+    /*BUTTON DELETE WIDGET*/
+    fn_btn_deleteWidget() {
+        const newWidgetId = 'widget-' + this.countWidget;
+        this.eventRemoveWidgetById(newWidgetId);
+        this.countWidget--;
     }
-    ngOnChanges(changes) {
-        if (changes['chartData'] || changes['config']) {
-            this.updateParsedData();
-        }
+    /*BUTTON BLOCK WIDGETS*/
+    fn_btn_lockPositionWidgets() {
+        this.isLocked = !this.isLocked;
+        const shouldLock = !this.allIsLocked();
+        this.allIsLocked.set(shouldLock);
+        this.fn_lockPositionWidgets(shouldLock);
+        console.log(`All widgets have been visually and functionally locked: ${shouldLock}`);
     }
-    ngAfterViewInit() {
-        this._startResizeObserver();
+    fn_lockPositionWidgets(prmAllIsLocked) {
+        const shouldLock = prmAllIsLocked;
+        // 1. Perform the functional Gridstack task on the core grid layout
+        this.grid.movable('.grid-stack-item', !shouldLock);
+        this.grid.resizable('.grid-stack-item', !shouldLock);
+        // 2. Broadcast the state change down to every active dynamic child component
+        this.widgetsActivos.forEach((componentRef) => {
+            componentRef.setInput('isLocked', shouldLock);
+        });
+        console.log(`All widgets have been visually and functionally locked - por TS Config: ${shouldLock}`);
     }
-    ngOnDestroy() {
-        this._resizeObserver?.disconnect();
+    /*BUTTON UPDATE WIDGET - CONTROL CONFIG */
+    fn_btn_updateWidgetControlConfig(idWidget) {
+        let newControlConfig = {};
+        /*MODIFICAR METODO PARA CARGAR INFO DEL FORMULARIO*/
+        newControlConfig['provider'] = 'syncfusion';
+        this.eventUpdateWidgetControlConfig(idWidget, newControlConfig);
     }
-    updateParsedData() {
-        if (this.chartData && this.config) {
-            const rawParsed = parseSyncFusionData(this.chartData, this.config);
-            this.dataChartParse = rawParsed.series;
-            this.labelData = rawParsed.labelData;
-            console.log("DATA CREADA PARA AEL BUBBLE:", this.dataChartParse, this.labelData);
-            if (this.dataLabel && this.labelData) {
-                this.labelData.dataLabel = this.dataLabel;
-            }
-            this.cdr.markForCheck();
-            if (this.chartInstance) {
-                setTimeout(() => {
-                    this.chartInstance?.refresh();
-                });
-            }
+    /*BUTTON UPDATE WIDGET - CONTROL CONFIG */
+    fn_btn_updateWidgetControlData(idWidget) {
+        let newControlData = [];
+        /*MODIFICAR METODO PARA CARGAR INFO DEL FORMULARIO*/
+        newControlData = [
+            { month: 'Ene', sales: 35, expenses: 28 },
+            { month: 'Feb', sales: 28, expenses: 22 },
+            { month: 'Mar', sales: 34, expenses: 25 },
+            { month: 'Abr', sales: 32, expenses: 27 },
+            { month: 'May', sales: 40, expenses: 30 },
+            { month: 'Jun', sales: 32, expenses: 26 },
+            { month: 'Jul', sales: 45, expenses: 32 },
+            { month: 'Ago', sales: 38, expenses: 29 },
+            { month: 'Sep', sales: 42, expenses: 31 },
+            { month: 'Oct', sales: 48, expenses: 35 },
+            { month: 'Nov', sales: 52, expenses: 38 },
+            { month: 'Dic', sales: 58, expenses: 42 },
+        ];
+        this.eventUpdateWidgetControlData(idWidget, newControlData);
+    }
+    /****************************************************** */
+    /*AGREGAR WIDGET*/
+    eventAddWidget(widgetConfig, controlConfig, controlData, item) {
+        // 1. Agregar el contenedor del widget a Gridstack
+        const el = this.grid.addWidget(item);
+        // 2. Obtener el contenedor interno generado por Gridstack
+        const contentElement = el.querySelector('.grid-stack-item-content');
+        if (contentElement) {
+            // 3. Crear dinámicamente la instancia del componente Angular
+            const componentRef = createComponent(YwDashboardWidgetComponent, {
+                environmentInjector: this.environmentInjector, // Requerido para resolver dependencias
+                hostElement: contentElement // Renderiza directamente aquí dentro
+            });
+            // 4. Pasar las propiedades/Inputs al componente creado
+            //Evaluar Estilos   
+            componentRef.setInput('styleWidget', widgetConfig.widgetStyle);
+            //componentRef.instance.configWidget = widgetConfig;
+            componentRef.setInput('configWidget', widgetConfig);
+            componentRef.setInput('controlConfig', controlConfig);
+            componentRef.setInput('controlData', controlData);
+            /* BEGIN - Eventos que provienen desde widget */
+            componentRef.instance.eventDeleteRequest.subscribe((idWidget) => {
+                // Ejecutamos la función de borrado que ya programamos en el paso anterior
+                this.eventRemoveWidgetById(idWidget);
+            });
+            componentRef.instance.eventLockToggleRequest.subscribe((event) => {
+                this.eventToggleLockWidget(event.widgetId, event.shouldLock);
+            });
+            componentRef.instance.eventMaximizeToggleRequest.subscribe((event) => {
+                this.eventToggleMaximizeWidget(event.widgetId, event.shouldMaximize);
+            });
+            //Mostrar
+            componentRef.instance.eventShowConfigFormRequest.subscribe((idWidget) => {
+                this.eventShowFormConfigWidget(idWidget);
+            });
+            /* END - Eventos que provienen desde widget */
+            // 5. Mover los nodos del DOM generados por Angular dentro del DIV del Widget
+            this.appRef.attachView(componentRef.hostView);
+            // Guardar la referencia de Componentes para hacer operaciones con estas.
+            this.widgetsActivos.set(item.id, componentRef);
+            //El componente interno no aparece bien dimensionado, con esto disparamos el evento para que se ajuste a las dimenciones correctas
+            setTimeout(() => {
+                window.dispatchEvent(new Event('resize'));
+            }, 50);
         }
     }
-    //   public pointRender(args: IPointRenderEventArgs): void {
-    //     const yValue = Number(args.point.y);
-    //     const configPoint: PointRenderConfig = this.config.ruleColorPoint || null;
-    // if (!configPoint) return;
-    //       let passesRule = false;
-    //       switch (configPoint.rule) {
-    //         case 'threshold':
-    //           passesRule = yValue >= (configPoint.thresholdValue || 0);
-    //           break;
-    //         case 'pair':
-    //           passesRule = yValue % 2 === 0;
-    //           break;
-    //         case 'range':
-    //           const min = configPoint.minRange || 0;
-    //           const max = configPoint.maxRange || 100;
-    //           passesRule = yValue >= min && yValue <= max;
-    //           break;
-    //         default:
-    //           passesRule = true;
-    //       }
-    //       args.fill = passesRule ? (configPoint.trueColor || '#10B981') : (configPoint.falseColor || '#EF4444');
-    //   }
-    pointRender(args) {
-        const yValue = Number(args.point.y);
-        // =====================================================
-        // EMPTY POINT / VALOR 0
-        // Tiene prioridad sobre ruleColorPoint
-        // =====================================================
-        if (yValue === 0) {
-            const emptyPoint = this.config.emptyPointSettings;
-            if (emptyPoint && emptyPoint !== '') {
-                args.fill = emptyPoint;
-            }
+    /*UPDATE CONTROLCONFIG WIDGET*/
+    eventUpdateWidgetControlConfig(idWidget, newControlConfig) {
+        //Obtener la referencia del componente almacenada en el Map
+        const componentRef = this.widgetsActivos.get(idWidget);
+        if (!componentRef) {
+            console.warn(`No se encontró un widget activo con el ID: ${idWidget}`);
             return;
         }
-        // =====================================================
-        // RULE COLOR POINT
-        // =====================================================
-        const configPoint = this.config.ruleColorPoint || null;
-        if (!configPoint) {
+        //Actualizar el Input usando la API oficial setInput
+        componentRef.setInput('controlConfig', newControlConfig);
+        // NOTA: setInput dispara automáticamente la detección de cambios (ChangeDetectionStrategy.OnPush).
+        // Si deseas asegurarte manualmente, puedes forzar un render:
+        // componentRef.changeDetectorRef.detectChanges();
+    }
+    /*UPDATE CONTROL DATA WIDGET*/
+    eventUpdateWidgetControlData(idWidget, newControlData) {
+        //Obtener la referencia del componente almacenada en el Map
+        const componentRef = this.widgetsActivos.get(idWidget);
+        if (!componentRef) {
+            console.warn(`No se encontró un widget activo con el ID: ${idWidget}`);
             return;
         }
-        let passesRule = false;
-        switch (configPoint.rule) {
-            case 'threshold':
-                passesRule =
-                    yValue >= (configPoint.thresholdValue || 0);
-                break;
-            case 'pair':
-                passesRule = yValue % 2 === 0;
-                break;
-            case 'range':
-                const min = configPoint.minRange || 0;
-                const max = configPoint.maxRange || 100;
-                passesRule =
-                    yValue >= min &&
-                        yValue <= max;
-                break;
-            default:
-                passesRule = true;
+        //Actualizar el Input usando la API oficial setInput
+        componentRef.setInput('controlData', newControlData);
+        // NOTA: setInput dispara automáticamente la detección de cambios (ChangeDetectionStrategy.OnPush).
+        // Si deseas asegurarte manualmente, puedes forzar un render:
+        componentRef.changeDetectorRef.detectChanges();
+    }
+    /****************************************************** */
+    /* BEGIN - DRAWER */
+    handleShowFormFilterDrawer() {
+        this.drawerfiltervisible = true;
+    }
+    handleCloseFormFilterDrawer() {
+        this.drawerfiltervisible = false;
+    }
+    handleCloseFormDrawer() {
+        this.drawerconfigvisible = false;
+    }
+    fnGetDrawerWidth(prm_percent) {
+        const curWidth = window.innerWidth;
+        let newWidth = curWidth;
+        if (prm_percent) {
+            newWidth = Math.floor(curWidth * prm_percent / 100);
         }
-        args.fill = passesRule
-            ? (configPoint.trueColor || '#10B981')
-            : (configPoint.falseColor || '#EF4444');
+        if (newWidth < 400) {
+            newWidth = curWidth;
+        }
+        return newWidth;
     }
-    _startResizeObserver() {
-        if (typeof ResizeObserver === 'undefined')
-            return;
-        const hostEl = this.elRef.nativeElement;
-        this._resizeObserver = new ResizeObserver((entries) => {
-            window.requestAnimationFrame(() => {
-                for (const entry of entries) {
-                    this.currentWidgetWidth = entry.contentRect.width;
-                    if (this.currentWidgetWidth > 0) {
-                        this._updateAdaptiveLabelSize(this.currentWidgetWidth);
-                        if (this.chartInstance) {
-                            // SI ACTIVAMSO EL REFRESH DA UN REBOTE AL REDIMENCIONAR
-                            this.chartInstance.refresh();
-                        }
+    onFilterSelectionChange(eventData) {
+        const lsize = this.widgetsActivos.size;
+        //Validar que ya se crearon y renderizaron los componentes graficos.
+        if (lsize > 0) {
+            const currentFilterController = this.dashboardFilterConfig.controlListConfig.find((x) => x.widgetId == eventData['widgetId']);
+            if (currentFilterController) {
+                currentFilterController.controlFilterData = eventData['eventResponse'];
+                this.fnUpdateDataControllerBasedOnFilter(this.dashboardFilterConfig.controlListConfig);
+            }
+        }
+    }
+    fnUpdateDataControllerBasedOnFilter(filterControlListConfig) {
+        let copyDashboardData = structuredClone(this.dashboardData);
+        filterControlListConfig.forEach((item) => {
+            let tableSelected = copyDashboardData.find((x) => x.tableName == item.controlTable);
+            if (item.typeComponent == 'filter-slicer' && tableSelected && item.controlFilterData) {
+                const fieldName = item.configComponent.filterField;
+                if (item.configComponent.dataType == 'date') {
+                    const minDate = item.controlFilterData['startDate'];
+                    const maxDate = item.controlFilterData['endDate'];
+                    if (minDate && maxDate) {
+                        const filterData = tableSelected.tableData.filter((y) => (minDate <= y[fieldName] && y[fieldName] <= maxDate));
+                        tableSelected.tableData = filterData;
                     }
                 }
-            });
-        });
-        this._resizeObserver.observe(hostEl);
-    }
-    _updateAdaptiveLabelSize(width) {
-        if (this.config?.labelSize) {
-            const parsedSize = typeof this.config.labelSize === 'number'
-                ? this.config.labelSize
-                : parseFloat(this.config.labelSize);
-            if (!isNaN(parsedSize)) {
-                if (width < 260) {
-                    const scale = Math.max(0.65, width / 260);
-                    this.currentLabelSize = `${Math.round(parsedSize * scale)}px`;
+                if (item.configComponent.dataType == 'number') {
+                    const minNum = Number(item.controlFilterData['minValue']);
+                    const maxNum = Number(item.controlFilterData['maxValue']);
+                    if (minNum && maxNum) {
+                        const filterData = tableSelected.tableData.filter((y) => (minNum <= y[fieldName] && y[fieldName] <= maxNum));
+                        tableSelected.tableData = filterData;
+                    }
                 }
-                else {
-                    this.currentLabelSize = `${parsedSize}px`;
+            }
+            if (item.typeComponent == 'filter-button' && tableSelected && item.controlFilterData) {
+                const fieldName = item.configComponent.filterField;
+                const listValues = item.controlFilterData || [];
+                if (listValues && listValues.length > 0) {
+                    const filterData = tableSelected.tableData.filter((y) => (listValues.includes(y[fieldName])));
+                    tableSelected.tableData = filterData;
                 }
-                this.cdr.markForCheck();
-                return;
             }
-        }
-        // Proporción estándar ideal (~7.5% del ancho del contenedor, acotado entre 13px y 26px)
-        const base = Math.max(13, Math.min(26, Math.round(width * 0.075)));
-        this.currentLabelSize = `${base}px`;
-        this.cdr.markForCheck();
+            if (item.typeComponent == 'filter-list' && tableSelected && item.controlFilterData) {
+                const fieldName = item.configComponent.filterField;
+                if (item.configComponent.dataType == 'text') {
+                    const listValues = item.controlFilterData['ids'] || [];
+                    if (listValues && listValues.length > 0) {
+                        const listValues1D = listValues;
+                        const filterData = tableSelected.tableData.filter((y) => (listValues1D.includes(y[fieldName])));
+                        tableSelected.tableData = filterData;
+                    }
+                }
+                if (item.configComponent.dataType == 'date') {
+                    const minDate = item.controlFilterData['minDate'];
+                    const maxDate = item.controlFilterData['maxDate'];
+                    if (minDate && maxDate) {
+                        const filterData = tableSelected.tableData.filter((y) => (minDate <= y[fieldName] && y[fieldName] <= maxDate));
+                        tableSelected.tableData = filterData;
+                    }
+                }
+            }
+        });
+        //Actualizacion de Data Componentes Graficos
+        this.dashboardConfig.controlListConfig.forEach((item) => {
+            const controlData = this.fn_getDataForWidgetComponent(item.controlTables, copyDashboardData);
+            this.eventUpdateWidgetControlData(item.widgetId, controlData);
+        });
     }
-    refresh() {
-        this.updateParsedData();
+    /* END - DRAWER */
+    /* BEGIN - Eventos que provienen desde widget */
+    eventRemoveWidgetById(widgetId) {
+        // 1. Buscar el elemento HTML físico dentro de Gridstack usando su atributo interno [gs-id]
+        const elementoHtml = this.gridContainer.nativeElement.querySelector(`[gs-id="${widgetId}"]`);
+        if (elementoHtml) {
+            // 2. Remover el elemento de Gridstack (esto limpia el HTML y reordena el tablero si float es false)
+            // El parámetro false indica que remueva el nodo del DOM pero no dispare eventos internos destructivos pesados
+            this.grid.removeWidget(elementoHtml, false);
+        }
+        // 3. Buscar y destruir la instancia de Angular en memoria RAM
+        const componentRef = this.widgetsActivos.get(widgetId);
+        if (componentRef) {
+            // Desengancha la vista del ciclo de renderizado global de Angular
+            this.appRef.detachView(componentRef.hostView);
+            // Destruye el componente y libera la memoria RAM
+            componentRef.destroy();
+            // Eliminamos el registro de nuestro Mapa
+            this.widgetsActivos.delete(widgetId);
+        }
+        //console.log(`Widget ${widgetId} eliminado con éxito de Gridstack y Angular.`);
     }
-    // pointRender(args: any) {
-    //   if (args.point?.y === 0) {
-    //     args.fill = this.emptyPointSettings.fill;
-    //     args.border = {
-    //       width: this.emptyPointSettings.border?.width ?? 0,
-    //       color: this.emptyPointSettings.border?.color ?? ''
-    //     };
-    //   }
-    // }
-    axisLabelRender(args) {
-        const umbralWidget = 700;
-        if (this.currentWidgetWidth > umbralWidget) {
-            return;
+    eventToggleLockWidget(widgetId, shouldLock) {
+        const elementoHtml = this.gridContainer.nativeElement.querySelector(`[gs-id="${widgetId}"]`);
+        if (elementoHtml) {
+            // La API de Gridstack nos permite congelar un nodo específico pasándole true/false
+            this.grid.movable(elementoHtml, !shouldLock);
+            this.grid.resizable(elementoHtml, !shouldLock);
+            //console.log(`Widget ${widgetId} cambiado a estado bloqueado: ${shouldLock}`);
         }
-        // Si la tarjeta es estrecha, aplicamos el recorte de etiquetas
-        if (args.text && typeof args.text === 'string') {
-            const palabras = args.text.split(' ');
-            if (palabras.length > 1) {
-                const primeraPalabra = palabras[0];
-                const inicialSegunda = palabras[1].charAt(0).toUpperCase();
-                args.text = `${primeraPalabra} ${inicialSegunda}.`;
+    }
+    eventToggleMaximizeWidget(widgetId, shouldMaximize) {
+        const elementoHtml = this.gridContainer.nativeElement.querySelector(`[gs-id="${widgetId}"]`);
+        if (elementoHtml) {
+            if (shouldMaximize) {
+                // Aplicamos estilos CSS nativos para forzar al contenedor a flotar sobre todo el dashboard
+                elementoHtml.classList.add('widget-maximized');
+                // Deshabilitamos temporalmente que Gridstack intente moverlo mientras está maximizado
+                this.grid.movable(elementoHtml, false);
+                this.grid.resizable(elementoHtml, false);
             }
             else {
-                if (args.text.length > 10) {
-                    args.text = args.text.substring(0, 9) + '.';
-                }
+                elementoHtml.classList.remove('widget-maximized');
+                // Restauramos los permisos normales leyendo si el componente de Angular estaba bloqueado previamente
+                const componentRef = this.widgetsActivos.get(widgetId);
+                const isCurrentlyLocked = componentRef?.instance.isLocked() || false;
+                this.grid.movable(elementoHtml, !isCurrentlyLocked);
+                this.grid.resizable(elementoHtml, !isCurrentlyLocked);
             }
+            // Forzamos un evento resize simulado para que los gráficos de Syncfusion recalculen su nuevo tamaño gigante/pequeño
+            setTimeout(() => {
+                window.dispatchEvent(new Event('resize'));
+            }, 50);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BubbleChartSyncfusionComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: BubbleChartSyncfusionComponent, isStandalone: true, selector: "yw-bubble-chart-syncfusion", inputs: { chartData: "chartData", config: "config", idComponent: "idComponent" }, providers: [BubbleSeriesService, CategoryService, CategoryService,
-            TooltipService,
-            LegendService,
-            DateTimeService], viewQueries: [{ propertyName: "chartInstance", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"control-section\">\r\n\r\n    <ejs-chart \r\n        #chart \r\n        [primaryXAxis]=\"labelData.axisX\" \r\n        [primaryYAxis]=\"labelData.axisY\"    \r\n        [title]=\"labelData.title\" \r\n        (pointRender)=\"pointRender($event)\"       \r\n        height=\"100%\"\r\n        width=\"100%\"\r\n    [legendSettings]=\"labelData.legendSettings\"\r\n    (axisLabelRender)=\"axisLabelRender($event)\"\r\n\r\n    [tooltip]=\"labelData.tooltip\">\r\n        <e-series-collection>\r\n            @for(series of dataChartParse; track $index){\r\n                <e-series \r\n                [opacity]=\"series.opacity\"\r\n                [dataSource]='series.dataSource' \r\n                type='Bubble' \r\n                xName='x' \r\n                yName='y' \r\n                size='size' \r\n                [name]='series.name'>\r\n            </e-series>\r\n\r\n            }\r\n    </e-series-collection>\r\n</ejs-chart>\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden}.control-section{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden;background:#fff;border-radius:8px}:host ::ng-deep ejs-circulargauge{display:block;width:100%!important;height:100%!important;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ChartModule }, { kind: "component", type: i1.ChartComponent, selector: "ejs-chart", inputs: ["accessibility", "allowExport", "allowMultiSelection", "annotations", "axes", "background", "backgroundImage", "border", "chartArea", "columns", "crosshair", "currencyCode", "dataSource", "description", "enableAnimation", "enableAutoIntervalOnBothAxis", "enableCanvas", "enableExport", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "enableSideBySidePlacement", "focusBorderColor", "focusBorderMargin", "focusBorderWidth", "height", "highlightColor", "highlightMode", "highlightPattern", "indicators", "isMultiSelect", "isTransposed", "legendSettings", "locale", "margin", "palettes", "primaryXAxis", "primaryYAxis", "rangeColorSettings", "rows", "selectedDataIndexes", "selectionMode", "selectionPattern", "series", "subTitle", "subTitleStyle", "tabIndex", "theme", "title", "titleStyle", "tooltip", "useGroupingSeparator", "width", "zoomSettings"], outputs: ["afterExport", "animationComplete", "annotationRender", "axisLabelClick", "axisLabelRender", "axisMultiLabelRender", "axisRangeCalculated", "beforeExport", "beforePrint", "beforeResize", "chartDoubleClick", "chartMouseClick", "chartMouseDown", "chartMouseLeave", "chartMouseMove", "chartMouseUp", "drag", "dragComplete", "dragEnd", "dragStart", "legendClick", "legendRender", "load", "loaded", "multiLevelLabelClick", "onZooming", "pointClick", "pointDoubleClick", "pointMove", "pointRender", "resized", "scrollChanged", "scrollEnd", "scrollStart", "selectionComplete", "seriesRender", "sharedTooltipRender", "textRender", "tooltipRender", "zoomComplete", "dataSourceChange"] }, { kind: "directive", type: i1.SeriesDirective, selector: "e-series-collection>e-series", inputs: ["accessibility", "animation", "bearFillColor", "binInterval", "border", "boxPlotMode", "bullFillColor", "cardinalSplineTension", "close", "colorName", "columnFacet", "columnSpacing", "columnWidth", "columnWidthInPixel", "connector", "cornerRadius", "dashArray", "dataSource", "dragSettings", "drawType", "emptyPointSettings", "enableComplexProperty", "enableSolidCandles", "enableTooltip", "errorBar", "fill", "groupName", "high", "intermediateSumIndexes", "isClosed", "legendImageUrl", "legendShape", "low", "marker", "maxRadius", "minRadius", "name", "negativeFillColor", "noRisers", "nonHighlightStyle", "opacity", "open", "paretoOptions", "pointColorMapping", "query", "segmentAxis", "segments", "selectionStyle", "showMean", "showNormalDistribution", "size", "splineType", "stackingGroup", "step", "sumIndexes", "summaryFillColor", "tooltipFormat", "tooltipMappingName", "trendlines", "type", "unSelectedStyle", "visible", "volume", "width", "xAxisName", "xName", "yAxisName", "yName", "zOrder"] }, { kind: "directive", type: i1.SeriesCollectionDirective, selector: "ej-chart>e-series-collection" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BubbleChartSyncfusionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yw-bubble-chart-syncfusion', standalone: true, imports: [CommonModule, ChartModule], providers: [BubbleSeriesService, CategoryService, CategoryService,
-                        TooltipService,
-                        LegendService,
-                        DateTimeService], template: "<div class=\"control-section\">\r\n\r\n    <ejs-chart \r\n        #chart \r\n        [primaryXAxis]=\"labelData.axisX\" \r\n        [primaryYAxis]=\"labelData.axisY\"    \r\n        [title]=\"labelData.title\" \r\n        (pointRender)=\"pointRender($event)\"       \r\n        height=\"100%\"\r\n        width=\"100%\"\r\n    [legendSettings]=\"labelData.legendSettings\"\r\n    (axisLabelRender)=\"axisLabelRender($event)\"\r\n\r\n    [tooltip]=\"labelData.tooltip\">\r\n        <e-series-collection>\r\n            @for(series of dataChartParse; track $index){\r\n                <e-series \r\n                [opacity]=\"series.opacity\"\r\n                [dataSource]='series.dataSource' \r\n                type='Bubble' \r\n                xName='x' \r\n                yName='y' \r\n                size='size' \r\n                [name]='series.name'>\r\n            </e-series>\r\n\r\n            }\r\n    </e-series-collection>\r\n</ejs-chart>\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden}.control-section{display:flex;flex-direction:column;width:100%;height:100%;min-height:260px;box-sizing:border-box;overflow:hidden;background:#fff;border-radius:8px}:host ::ng-deep ejs-circulargauge{display:block;width:100%!important;height:100%!important;flex-grow:1}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { chartInstance: [{
-                type: ViewChild,
-                args: ['chart']
-            }], chartData: [{
-                type: Input,
-                args: ['chartData']
-            }], config: [{
-                type: Input,
-                args: ['config']
-            }], idComponent: [{
-                type: Input,
-                args: ['idComponent']
-            }] } });
-
-// import { LineChartSyncfusionComponent } from '../../../../../adapters/charts/line-chart/syncfusion/visual/yw-line-chart-syncfusion.component';
-// import { YwLineMappingConfig } from '../../../../../models/config/chart/yw-line-chart-config.interface';
-class BubbleChartComponent {
-    constructor() {
-        this.idComponent = '';
-    }
-    ngOnChanges(changes) {
-        if (changes['chartData']) {
-            console.log('change chartData:', changes['chartData'].currentValue);
-        }
-        if (changes['config']) {
-            console.log('change config:', changes['config'].currentValue);
-        }
+    eventShowFormConfigWidget(widgetId) {
+        this.drawerCurrentWidgetObject['widgetId'] = widgetId;
+        this.drawerconfigvisible = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BubbleChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: BubbleChartComponent, isStandalone: true, selector: "yw-bubble-chart", inputs: { chartData: "chartData", config: "config", idComponent: "idComponent" }, usesOnChanges: true, ngImport: i0, template: "llegamos\r\n@if(config.provider==='syncfusion'){\r\n   <div style=\"position: relative; width: 100%; height: 100%;\">\r\n    <yw-bubble-chart-syncfusion \r\n        [idComponent]=\"idComponent\"\r\n        [chartData]=\"chartData\" \r\n        [config]=\"config\"   style=\"display: block; width: 100%; height: 100%;\">\r\n    </yw-bubble-chart-syncfusion>\r\n</div>\r\n}", styles: [":host{display:block;width:100%;height:100%;min-height:260px;min-width:0;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BubbleChartSyncfusionComponent, selector: "yw-bubble-chart-syncfusion", inputs: ["chartData", "config", "idComponent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwDashboardComponent, deps: [{ token: i0.EnvironmentInjector }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: YwDashboardComponent, isStandalone: true, selector: "yw-dashboard", inputs: { showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, dashboardStyle: { classPropertyName: "dashboardStyle", publicName: "dashboardStyle", isSignal: false, isRequired: false, transformFunction: null }, dashboardConfig: { classPropertyName: "dashboardConfig", publicName: "dashboardConfig", isSignal: false, isRequired: false, transformFunction: null }, dashboardData: { classPropertyName: "dashboardData", publicName: "dashboardData", isSignal: false, isRequired: false, transformFunction: null }, dashboardFilterConfig: { classPropertyName: "dashboardFilterConfig", publicName: "dashboardFilterConfig", isSignal: false, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "gridContainer", first: true, predicate: ["gridContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <div class=\"controls\" [hidden]=\"!showControls()\">\r\n  <button (click)=\"saveLayoutToJSON()\">Guardar JSON en Consola</button>\r\n   <button (click)=\"fn_btn_addWidget()\">add widget</button>\r\n   <button (click)=\"fn_btn_lockPositionWidgets()\">Lock widgets</button>\r\n   <button (click)=\"handleShowFormFilterDrawer()\" class=\"btn-filtro\">\r\n            <svg *ngIf=\"drawerfiltervisible; else filtroInactivo\" \r\n                xmlns=\"http://www.w3.org/2000/svg\" \r\n                width=\"20\" height=\"20\" \r\n                viewBox=\"0 0 24 24\" \r\n                fill=\"currentColor\">\r\n              <path d=\"M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z\"/>\r\n            </svg>\r\n            <ng-template #filtroInactivo>\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" \r\n                  width=\"20\" height=\"20\" \r\n                  viewBox=\"0 0 24 24\" \r\n                  fill=\"none\" \r\n                  stroke=\"currentColor\" \r\n                  stroke-width=\"2\">\r\n                <polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"/>\r\n              </svg>\r\n            </ng-template>\r\n    </button>\r\n</div> -->\r\n\r\n<div class=\"controls-container\" >\r\n  @if ( showControls() ) { \r\n  <!-- Botones principales con nz-button y tipos de Ant Design -->\r\n  <button nz-button nzType=\"default\" (click)=\"saveLayoutToJSON()\" >\r\n    <span nz-icon nz-type=\"code\"></span> Guardar JSON\r\n  </button>\r\n\r\n  <button nz-button nzType=\"primary\" (click)=\"fn_btn_addWidget()\" >\r\n    <span nz-icon nz-type=\"plus\"></span> A\u00F1adir widget\r\n  </button>\r\n\r\n  <button nz-button [nzType]=\"isLocked ? 'primary' : 'default'\" nzDanger (click)=\"fn_btn_lockPositionWidgets()\" >\r\n    <span nz-icon [nzType]=\"isLocked ? 'lock' : 'unlock'\"></span> \r\n    {{ isLocked ? 'Bloqueado' : 'Bloquear' }}\r\n  </button>\r\n  }\r\n  @if ( showFilter() ) { \r\n  <!-- Bot\u00F3n de filtro con estilo ic\u00F3nico -->\r\n  <button nz-button nzType=\"default\" nzShape=\"circle\" (click)=\"handleShowFormFilterDrawer()\" class=\"btn-filtro\" [class.active]=\"drawerfiltervisible\" >\r\n    <svg *ngIf=\"drawerfiltervisible; else filtroInactivo\" \r\n         xmlns=\"http://www.w3.org/2000/svg\" \r\n         width=\"16\" height=\"16\" \r\n         viewBox=\"0 0 24 24\" \r\n         fill=\"currentColor\">\r\n      <path d=\"M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z\"/>\r\n    </svg>\r\n    <ng-template #filtroInactivo>\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" \r\n           width=\"16\" height=\"16\" \r\n           viewBox=\"0 0 24 24\" \r\n           fill=\"none\" \r\n           stroke=\"currentColor\" \r\n           stroke-width=\"2\">\r\n        <polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"/>\r\n      </svg>\r\n    </ng-template>\r\n  </button>\r\n  }\r\n</div>\r\n<div #gridContainer class=\"grid-stack canvas-container\"\r\n                   [style.--canvas-bg]=\"dashboardStyle.canvasBackgroundColor\"\r\n></div>\r\n\r\n\r\n\r\n\r\n<!-- DRAWER - FILTER  -->\r\n\r\n<nz-drawer\r\n[nzVisible]=\"drawerfiltervisible\"\r\n[nzMaskClosable]=\"false\"\r\nnzPlacement=\"right\"\r\n[nzWidth]=\"fnGetDrawerWidth(50)\"\r\n(nzOnClose)=\"handleCloseFormFilterDrawer()\"\r\n>\r\n<ng-container *nzDrawerContent>\r\n  <div class=\"widget-details-info\">\r\n    <h6 nz-typography>Filtros</h6>\r\n    <yw-dashboard-filter\r\n        [dashboardFilterConfig]=\"dashboardFilterConfig\"\r\n        [dashboardData]=\"dashboardData\"\r\n        (filterSelectionChange)=\"onFilterSelectionChange($event)\"\r\n      >\r\n     </yw-dashboard-filter>\r\n  </div>\r\n\r\n  <!--\r\n  <nz-tabset nzCentered>\r\n    <nz-tab nzTitle=\"Secion de Filtros\">\r\n    <div class=\"controls\">\r\n      aqui botones de control:\r\n\r\n    </div>\r\n    <div>\r\n  \r\n\r\n    </div>\r\n\r\n    </nz-tab>\r\n \r\n  </nz-tabset>\r\n-->\r\n</ng-container>\r\n</nz-drawer>\r\n\r\n\r\n\r\n<!-- DRAWER - CONFIGURACION  -->\r\n<nz-drawer\r\n[nzVisible]=\"drawerconfigvisible\"\r\n[nzMaskClosable]=\"false\"\r\nnzPlacement=\"right\"\r\n[nzWidth]=\"fnGetDrawerWidth(50)\"\r\n(nzOnClose)=\"handleCloseFormDrawer()\"\r\n>\r\n<ng-container *nzDrawerContent>\r\n  <div class=\"widget-details-info\">\r\n    <h6 nz-typography>{{ drawerCurrentWidgetObject.widgetId }}</h6>\r\n  </div>\r\n  <nz-tabset nzCentered>\r\n    <nz-tab nzTitle=\"{{  drawerCurrentWidgetObject.widgetId }}\">\r\n    <div class=\"controls\">\r\n       <button (click)=\"fn_btn_updateWidgetControlConfig(drawerCurrentWidgetObject.widgetId)\">Actualiza Configuracion</button>\r\n       <button (click)=\"fn_btn_updateWidgetControlData(drawerCurrentWidgetObject.widgetId)\">Actualiza Data</button>       \r\n    </div>\r\n    <div>\r\n       bla bla bla\r\n    </div>\r\n\r\n    </nz-tab>\r\n  \r\n  </nz-tabset>\r\n</ng-container>\r\n</nz-drawer>", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.canvas-container{background-color:var(--canvas-bg, #f5f5f5);min-height:500px;padding:10px}::vdeep .card-inner{background:#fff;border:1px solid #ccc;height:100%;display:flex;align-items:center;justify-content:center}:host ::ng-deep .grid-stack-item-content{border-radius:6px;box-shadow:0 2px 5px #0000001a;display:flex;align-items:center;justify-content:center;font-weight:700;overflow:hidden}::ng-deep .grid-stack-item.widget-maximized{position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;z-index:9999!important;transform:none!important;margin:0!important;padding:5px}::ng-deep .grid-stack-item.widget-maximized .grid-stack-item-content{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;border:none!important;border-radius:0!important;box-shadow:none!important;background-color:#fff!important;overflow:hidden}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-handle{opacity:0!important;background-image:none!important}.widget-details-info{padding-top:30px;text-align:center}.widget-details-info h6{font-family:manrope,sans-serif;font-size:20px;font-weight:700;line-height:26px;color:#2d3144}.widget-details-info p{font-family:manrope,sans-serif;font-size:14px;font-weight:400;line-height:21px;color:#4b5064}.controls-container{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 16px;background:#fff;border-bottom:1px solid #f0f0f0;box-shadow:0 2px 8px #0000000a;border-radius:6px;margin-bottom:16px;width:100%;box-sizing:border-box;position:sticky;top:0}.controls-container button{white-space:nowrap}.controls-container .btn-filtro{display:inline-flex;align-items:center;justify-content:center;padding:0;width:32px;height:32px;border-radius:50%;transition:all .3s ease}.controls-container .btn-filtro.active{color:#fff;background-color:#1890ff;border-color:#1890ff}.controls-container .btn-filtro.active:hover{background-color:#40a9ff;border-color:#40a9ff}@media(max-width:576px){.controls-container{gap:8px;padding:8px 10px}.controls-container button[nz-button]{font-size:13px;padding:0 10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i2.NzDrawerComponent, selector: "nz-drawer", inputs: ["nzContent", "nzCloseIcon", "nzClosable", "nzMaskClosable", "nzMask", "nzCloseOnNavigation", "nzNoAnimation", "nzKeyboard", "nzTitle", "nzExtra", "nzFooter", "nzPlacement", "nzSize", "nzMaskStyle", "nzBodyStyle", "nzWrapClassName", "nzWidth", "nzHeight", "nzZIndex", "nzOffsetX", "nzOffsetY", "nzVisible"], outputs: ["nzOnViewInit", "nzOnClose", "nzVisibleChange"], exportAs: ["nzDrawer"] }, { kind: "directive", type: i2.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "ngmodule", type: NzTabsModule }, { kind: "component", type: i3.NzTabsComponent, selector: "nz-tabs,nz-tabset", inputs: ["nzSelectedIndex", "nzTabPosition", "nzTabBarExtraContent", "nzCanDeactivate", "nzAddIcon", "nzTabBarStyle", "nzType", "nzSize", "nzAnimated", "nzTabBarGutter", "nzHideAdd", "nzCentered", "nzHideAll", "nzLinkRouter", "nzLinkExact", "nzDestroyInactiveTabPane"], outputs: ["nzSelectChange", "nzSelectedIndexChange", "nzTabListScroll", "nzClose", "nzAdd"], exportAs: ["nzTabs"] }, { kind: "component", type: i3.NzTabComponent, selector: "nz-tab", inputs: ["nzTitle", "nzClosable", "nzCloseIcon", "nzDisabled", "nzForceRender"], outputs: ["nzSelect", "nzDeselect", "nzClick", "nzContextmenu"], exportAs: ["nzTab"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$3.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i5.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i6.ɵ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: i7.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "component", type: YwDashboardFilterComponent, selector: "yw-dashboard-filter", inputs: ["dashboardFilterConfig", "dashboardData"], outputs: ["filterSelectionChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: BubbleChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: YwDashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yw-bubble-chart', standalone: true, imports: [CommonModule, BubbleChartSyncfusionComponent], template: "llegamos\r\n@if(config.provider==='syncfusion'){\r\n   <div style=\"position: relative; width: 100%; height: 100%;\">\r\n    <yw-bubble-chart-syncfusion \r\n        [idComponent]=\"idComponent\"\r\n        [chartData]=\"chartData\" \r\n        [config]=\"config\"   style=\"display: block; width: 100%; height: 100%;\">\r\n    </yw-bubble-chart-syncfusion>\r\n</div>\r\n}", styles: [":host{display:block;width:100%;height:100%;min-height:260px;min-width:0;overflow:hidden}\n"] }]
-        }], propDecorators: { chartData: [{
-                type: Input,
-                args: ['chartData']
-            }], config: [{
-                type: Input,
-                args: ['config']
-            }], idComponent: [{
-                type: Input,
-                args: ['idComponent']
+            args: [{ selector: 'yw-dashboard', standalone: true, imports: [CommonModule,
+                        YwDashboardWidgetComponent,
+                        NzDrawerModule,
+                        NzTabsModule,
+                        YwBaseSlicerComponent,
+                        NzIconModule,
+                        NzButtonModule,
+                        YwButtonSlicerComponent,
+                        YwListSlicerComponent,
+                        YwDashboardFilterComponent
+                    ], template: "<!-- <div class=\"controls\" [hidden]=\"!showControls()\">\r\n  <button (click)=\"saveLayoutToJSON()\">Guardar JSON en Consola</button>\r\n   <button (click)=\"fn_btn_addWidget()\">add widget</button>\r\n   <button (click)=\"fn_btn_lockPositionWidgets()\">Lock widgets</button>\r\n   <button (click)=\"handleShowFormFilterDrawer()\" class=\"btn-filtro\">\r\n            <svg *ngIf=\"drawerfiltervisible; else filtroInactivo\" \r\n                xmlns=\"http://www.w3.org/2000/svg\" \r\n                width=\"20\" height=\"20\" \r\n                viewBox=\"0 0 24 24\" \r\n                fill=\"currentColor\">\r\n              <path d=\"M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z\"/>\r\n            </svg>\r\n            <ng-template #filtroInactivo>\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" \r\n                  width=\"20\" height=\"20\" \r\n                  viewBox=\"0 0 24 24\" \r\n                  fill=\"none\" \r\n                  stroke=\"currentColor\" \r\n                  stroke-width=\"2\">\r\n                <polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"/>\r\n              </svg>\r\n            </ng-template>\r\n    </button>\r\n</div> -->\r\n\r\n<div class=\"controls-container\" >\r\n  @if ( showControls() ) { \r\n  <!-- Botones principales con nz-button y tipos de Ant Design -->\r\n  <button nz-button nzType=\"default\" (click)=\"saveLayoutToJSON()\" >\r\n    <span nz-icon nz-type=\"code\"></span> Guardar JSON\r\n  </button>\r\n\r\n  <button nz-button nzType=\"primary\" (click)=\"fn_btn_addWidget()\" >\r\n    <span nz-icon nz-type=\"plus\"></span> A\u00F1adir widget\r\n  </button>\r\n\r\n  <button nz-button [nzType]=\"isLocked ? 'primary' : 'default'\" nzDanger (click)=\"fn_btn_lockPositionWidgets()\" >\r\n    <span nz-icon [nzType]=\"isLocked ? 'lock' : 'unlock'\"></span> \r\n    {{ isLocked ? 'Bloqueado' : 'Bloquear' }}\r\n  </button>\r\n  }\r\n  @if ( showFilter() ) { \r\n  <!-- Bot\u00F3n de filtro con estilo ic\u00F3nico -->\r\n  <button nz-button nzType=\"default\" nzShape=\"circle\" (click)=\"handleShowFormFilterDrawer()\" class=\"btn-filtro\" [class.active]=\"drawerfiltervisible\" >\r\n    <svg *ngIf=\"drawerfiltervisible; else filtroInactivo\" \r\n         xmlns=\"http://www.w3.org/2000/svg\" \r\n         width=\"16\" height=\"16\" \r\n         viewBox=\"0 0 24 24\" \r\n         fill=\"currentColor\">\r\n      <path d=\"M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z\"/>\r\n    </svg>\r\n    <ng-template #filtroInactivo>\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" \r\n           width=\"16\" height=\"16\" \r\n           viewBox=\"0 0 24 24\" \r\n           fill=\"none\" \r\n           stroke=\"currentColor\" \r\n           stroke-width=\"2\">\r\n        <polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"/>\r\n      </svg>\r\n    </ng-template>\r\n  </button>\r\n  }\r\n</div>\r\n<div #gridContainer class=\"grid-stack canvas-container\"\r\n                   [style.--canvas-bg]=\"dashboardStyle.canvasBackgroundColor\"\r\n></div>\r\n\r\n\r\n\r\n\r\n<!-- DRAWER - FILTER  -->\r\n\r\n<nz-drawer\r\n[nzVisible]=\"drawerfiltervisible\"\r\n[nzMaskClosable]=\"false\"\r\nnzPlacement=\"right\"\r\n[nzWidth]=\"fnGetDrawerWidth(50)\"\r\n(nzOnClose)=\"handleCloseFormFilterDrawer()\"\r\n>\r\n<ng-container *nzDrawerContent>\r\n  <div class=\"widget-details-info\">\r\n    <h6 nz-typography>Filtros</h6>\r\n    <yw-dashboard-filter\r\n        [dashboardFilterConfig]=\"dashboardFilterConfig\"\r\n        [dashboardData]=\"dashboardData\"\r\n        (filterSelectionChange)=\"onFilterSelectionChange($event)\"\r\n      >\r\n     </yw-dashboard-filter>\r\n  </div>\r\n\r\n  <!--\r\n  <nz-tabset nzCentered>\r\n    <nz-tab nzTitle=\"Secion de Filtros\">\r\n    <div class=\"controls\">\r\n      aqui botones de control:\r\n\r\n    </div>\r\n    <div>\r\n  \r\n\r\n    </div>\r\n\r\n    </nz-tab>\r\n \r\n  </nz-tabset>\r\n-->\r\n</ng-container>\r\n</nz-drawer>\r\n\r\n\r\n\r\n<!-- DRAWER - CONFIGURACION  -->\r\n<nz-drawer\r\n[nzVisible]=\"drawerconfigvisible\"\r\n[nzMaskClosable]=\"false\"\r\nnzPlacement=\"right\"\r\n[nzWidth]=\"fnGetDrawerWidth(50)\"\r\n(nzOnClose)=\"handleCloseFormDrawer()\"\r\n>\r\n<ng-container *nzDrawerContent>\r\n  <div class=\"widget-details-info\">\r\n    <h6 nz-typography>{{ drawerCurrentWidgetObject.widgetId }}</h6>\r\n  </div>\r\n  <nz-tabset nzCentered>\r\n    <nz-tab nzTitle=\"{{  drawerCurrentWidgetObject.widgetId }}\">\r\n    <div class=\"controls\">\r\n       <button (click)=\"fn_btn_updateWidgetControlConfig(drawerCurrentWidgetObject.widgetId)\">Actualiza Configuracion</button>\r\n       <button (click)=\"fn_btn_updateWidgetControlData(drawerCurrentWidgetObject.widgetId)\">Actualiza Data</button>       \r\n    </div>\r\n    <div>\r\n       bla bla bla\r\n    </div>\r\n\r\n    </nz-tab>\r\n  \r\n  </nz-tabset>\r\n</ng-container>\r\n</nz-drawer>", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.canvas-container{background-color:var(--canvas-bg, #f5f5f5);min-height:500px;padding:10px}::vdeep .card-inner{background:#fff;border:1px solid #ccc;height:100%;display:flex;align-items:center;justify-content:center}:host ::ng-deep .grid-stack-item-content{border-radius:6px;box-shadow:0 2px 5px #0000001a;display:flex;align-items:center;justify-content:center;font-weight:700;overflow:hidden}::ng-deep .grid-stack-item.widget-maximized{position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;z-index:9999!important;transform:none!important;margin:0!important;padding:5px}::ng-deep .grid-stack-item.widget-maximized .grid-stack-item-content{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;border:none!important;border-radius:0!important;box-shadow:none!important;background-color:#fff!important;overflow:hidden}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-handle{opacity:0!important;background-image:none!important}.widget-details-info{padding-top:30px;text-align:center}.widget-details-info h6{font-family:manrope,sans-serif;font-size:20px;font-weight:700;line-height:26px;color:#2d3144}.widget-details-info p{font-family:manrope,sans-serif;font-size:14px;font-weight:400;line-height:21px;color:#4b5064}.controls-container{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 16px;background:#fff;border-bottom:1px solid #f0f0f0;box-shadow:0 2px 8px #0000000a;border-radius:6px;margin-bottom:16px;width:100%;box-sizing:border-box;position:sticky;top:0}.controls-container button{white-space:nowrap}.controls-container .btn-filtro{display:inline-flex;align-items:center;justify-content:center;padding:0;width:32px;height:32px;border-radius:50%;transition:all .3s ease}.controls-container .btn-filtro.active{color:#fff;background-color:#1890ff;border-color:#1890ff}.controls-container .btn-filtro.active:hover{background-color:#40a9ff;border-color:#40a9ff}@media(max-width:576px){.controls-container{gap:8px;padding:8px 10px}.controls-container button[nz-button]{font-size:13px;padding:0 10px}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.EnvironmentInjector }, { type: i0.ApplicationRef }], propDecorators: { gridContainer: [{
+                type: ViewChild,
+                args: ['gridContainer', { static: true }]
+            }], showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], showFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFilter", required: false }] }], dashboardStyle: [{
+                type: Input
+            }], dashboardConfig: [{
+                type: Input
+            }], dashboardData: [{
+                type: Input
+            }], dashboardFilterConfig: [{
+                type: Input
             }] } });
 
 // Configuraciones especificas de pie chart -> acumulation chart en syncfusion