@bizy/core 20.2.2 → 20.2.3

package/fesm2022/bizy-core.mjs

@@ -313,14 +313,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
                 }]
         }] });
 
-const MIN_CHART_SIZE$1 = 350; // px;
 const Y_AXIS_OFFSET = 80;
 const GRID_BOTTOM = 30;
 class BizyBarLineChartComponent {
-    elementRef;
-    document;
-    ref;
-    renderer;
+    #elementRef = inject(ElementRef);
+    #document = inject(DOCUMENT);
+    #ref = inject(ChangeDetectorRef);
+    #renderer = inject(Renderer2);
     resizeRef = null;
     tooltip = true;
     download = { hide: false, label: 'Descargar', name: 'Bizy' };
@@ -331,7 +330,6 @@ class BizyBarLineChartComponent {
     onDownload = new EventEmitter();
     onSelect = new EventEmitter();
     #echarts = null;
-    #mutationObserver = null;
     #resizeObserver = null;
     #subscription = new Subscription();
     #chartContainer = null;
@@ -342,20 +340,8 @@ class BizyBarLineChartComponent {
     #leftYAxis = 0;
     #chartStacks = [];
     #chartNames = [];
-    constructor(elementRef, document, ref, renderer) {
-        this.elementRef = elementRef;
-        this.document = document;
-        this.ref = ref;
-        this.renderer = renderer;
-    }
     ngAfterViewInit() {
-        this.#mutationObserver = new MutationObserver(() => {
-            if (this.elementRef && this.elementRef.nativeElement && (this.elementRef.nativeElement.offsetWidth || this.elementRef.nativeElement.offsetHeight)) {
-                this.#afterViewInit.next(true);
-                this.#mutationObserver.disconnect();
-            }
-        });
-        this.#mutationObserver.observe(this.document.body, { childList: true, subtree: true });
+        this.#afterViewInit.next(true);
     }
     set data(data) {
         if (!data) {
@@ -502,9 +488,9 @@ class BizyBarLineChartComponent {
                 bottom: 0,
                 data: legends
             };
-            const textColor = getComputedStyle(this.document.documentElement).getPropertyValue('--bizy-tooltip-color') ?? '#000';
-            const textBackgroundColor = getComputedStyle(this.document.documentElement).getPropertyValue('--bizy-tooltip-background-color') ?? '#fff';
-            const borderColor = getComputedStyle(this.document.documentElement).getPropertyValue('--bizy-tooltip-border-color') ?? '#fff';
+            const textColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-tooltip-color') ?? '#000';
+            const textBackgroundColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-tooltip-background-color') ?? '#fff';
+            const borderColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-tooltip-border-color') ?? '#fff';
             const toolbox = {
                 show: true,
                 feature: {
@@ -538,12 +524,12 @@ class BizyBarLineChartComponent {
                             showAllLegends(this.#echarts);
                             setTimeout(() => {
                                 html2canvas(this.#chartContainer).then(canvas => {
-                                    var link = document.createElement('a');
+                                    var link = this.#renderer.createElement('a');
                                     link.href = canvas.toDataURL('image/png');
                                     link.download = `${this.download.name}.png`;
-                                    this.renderer.appendChild(this.document.body, link);
+                                    this.#renderer.appendChild(this.#document.body, link);
                                     link.click();
-                                    this.renderer.removeChild(this.document.body, link);
+                                    this.#renderer.removeChild(this.#document.body, link);
                                     restoreLegendType(this.#echarts);
                                     this.onDownload.emit();
                                 });
@@ -577,7 +563,7 @@ class BizyBarLineChartComponent {
                     this.onSelect.emit(params.name);
                 });
                 this.#resizeObserver = new ResizeObserver(() => this.#resize$.next());
-                const resizeRef = this.resizeRef ? this.resizeRef : this.renderer.parentNode(this.elementRef.nativeElement) ? this.renderer.parentNode(this.elementRef.nativeElement) : this.elementRef.nativeElement;
+                const resizeRef = this.resizeRef ? this.resizeRef : this.#renderer.parentNode(this.#elementRef.nativeElement) ? this.#renderer.parentNode(this.#elementRef.nativeElement) : this.#elementRef.nativeElement;
                 this.#resizeObserver.observe(resizeRef);
                 this.#subscription.add(this.#resize$.pipe(skip(1), auditTime(300), throttleTime(500)).subscribe(() => {
                     this.#deleteChartContainer();
@@ -595,43 +581,43 @@ class BizyBarLineChartComponent {
         }));
     }
     #createChartContainer = () => {
-        if (this.#chartContainer || !this.elementRef || !this.elementRef.nativeElement) {
+        if (this.#chartContainer || !this.#elementRef || !this.#elementRef.nativeElement) {
             return;
         }
-        let elementWidth = this.elementRef.nativeElement.offsetWidth || MIN_CHART_SIZE$1;
-        let elementHeight = this.elementRef.nativeElement.offsetHeight || MIN_CHART_SIZE$1;
-        let minWidth = MIN_CHART_SIZE$1;
-        let minHeight = MIN_CHART_SIZE$1;
-        const barChartMinWidth = getComputedStyle(this.document.body).getPropertyValue('--bizy-chart-min-width');
-        const barChartMinHeight = getComputedStyle(this.document.body).getPropertyValue('--bizy-chart-min-height');
-        if (Number(barChartMinWidth)) {
-            minWidth = Number(barChartMinWidth);
-        }
-        if (Number(barChartMinHeight)) {
-            minHeight = Number(barChartMinHeight);
-        }
-        const width = Math.max(elementWidth, minWidth);
-        const height = Math.max(elementHeight, minHeight);
-        this.#chartContainer = this.renderer.createElement('div');
-        this.renderer.setStyle(this.#chartContainer, 'width', `${width}px`);
-        this.renderer.setStyle(this.#chartContainer, 'height', `${height}px`);
-        this.renderer.appendChild(this.elementRef.nativeElement, this.#chartContainer);
-        this.ref.detectChanges();
+        let elementWidth = this.#elementRef.nativeElement.offsetWidth;
+        let elementHeight = this.#elementRef.nativeElement.offsetHeight;
+        let minWidth = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-bar-line-chart-min-width') || 0;
+        let minHeight = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-bar-line-chart-min-height') || 0;
+        const width = elementWidth ? `${elementWidth}px` : minWidth;
+        const height = elementHeight ? `${elementHeight}px` : minHeight;
+        this.#chartContainer = this.#renderer.createElement('div');
+        this.#renderer.setStyle(this.#chartContainer, 'width', width);
+        this.#renderer.setStyle(this.#chartContainer, 'height', height);
+        this.#renderer.appendChild(this.#elementRef.nativeElement, this.#chartContainer);
+        this.#ref.detectChanges();
     };
     #deleteChartContainer = () => {
-        if (!this.#chartContainer || !this.elementRef || !this.elementRef.nativeElement) {
+        if (!this.#chartContainer || !this.#elementRef || !this.#elementRef.nativeElement) {
             return;
         }
         this.#echarts.clear();
-        this.renderer.removeChild(this.elementRef.nativeElement, this.#chartContainer);
+        this.#renderer.removeChild(this.#elementRef.nativeElement, this.#chartContainer);
         this.#chartContainer = null;
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
+    };
+    #getClosestCssVariable = (element, cssVariable) => {
+        while (element) {
+            const value = getComputedStyle(element).getPropertyValue(cssVariable).trim();
+            if (value) {
+                return value;
+            }
+            element = element.parentElement;
+        }
+        const rootValue = getComputedStyle(document.documentElement).getPropertyValue(cssVariable).trim();
+        return rootValue || null;
     };
     ngOnDestroy() {
         this.#subscription.unsubscribe();
-        if (this.#mutationObserver) {
-            this.#mutationObserver.disconnect();
-        }
         if (this.#resizeObserver) {
             this.#resizeObserver.disconnect();
         }
@@ -639,7 +625,7 @@ class BizyBarLineChartComponent {
             this.#echarts.clear();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyBarLineChartComponent, deps: [{ token: ElementRef }, { token: DOCUMENT }, { token: ChangeDetectorRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyBarLineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyBarLineChartComponent, isStandalone: true, selector: "bizy-bar-line-chart", inputs: { resizeRef: "resizeRef", tooltip: "tooltip", download: "download", axisPointer: "axisPointer", xAxisLabels: "xAxisLabels", onTooltipFormatter: "onTooltipFormatter", onXAxisLabelFormatter: "onXAxisLabelFormatter", data: "data" }, outputs: { onDownload: "onDownload", onSelect: "onSelect" }, ngImport: i0, template: '', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyBarLineChartComponent, decorators: [{
@@ -650,19 +636,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
                     imports: [CommonModule],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
-                    type: Inject,
-                    args: [ElementRef]
-                }] }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.ChangeDetectorRef, decorators: [{
-                    type: Inject,
-                    args: [ChangeDetectorRef]
-                }] }, { type: i0.Renderer2, decorators: [{
-                    type: Inject,
-                    args: [Renderer2]
-                }] }], propDecorators: { resizeRef: [{
+        }], propDecorators: { resizeRef: [{
                 type: Input
             }], tooltip: [{
                 type: Input
@@ -3402,12 +3376,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
         }] });
 
 const EMPTY_CHART = [0];
-const MIN_CHART_SIZE = 350; // px;
 class BizyPieChartComponent {
-    elementRef;
-    document;
-    ref;
-    renderer;
+    #elementRef = inject(ElementRef);
+    #document = inject(DOCUMENT);
+    #ref = inject(ChangeDetectorRef);
+    #renderer = inject(Renderer2);
     resizeRef = null;
     tooltip = true;
     type = 'pie';
@@ -3417,27 +3390,14 @@ class BizyPieChartComponent {
     onSelect = new EventEmitter();
     onDownload = new EventEmitter();
     #echarts = null;
-    #mutationObserver = null;
     #resizeObserver = null;
     #subscription = new Subscription();
     #chartContainer = null;
     #afterViewInit = new BehaviorSubject(false);
     #resize$ = new Subject();
     #data = EMPTY_CHART;
-    constructor(elementRef, document, ref, renderer) {
-        this.elementRef = elementRef;
-        this.document = document;
-        this.ref = ref;
-        this.renderer = renderer;
-    }
     ngAfterViewInit() {
-        this.#mutationObserver = new MutationObserver(() => {
-            if (this.elementRef && this.elementRef.nativeElement && (this.elementRef.nativeElement.offsetWidth || this.elementRef.nativeElement.offsetHeight)) {
-                this.#afterViewInit.next(true);
-                this.#mutationObserver.disconnect();
-            }
-        });
-        this.#mutationObserver.observe(this.document.body, { childList: true, subtree: true });
+        this.#afterViewInit.next(true);
     }
     set data(data) {
         if (!data) {
@@ -3507,9 +3467,9 @@ class BizyPieChartComponent {
                     itemStyle,
                     label
                 }];
-            const textColor = getComputedStyle(this.document.documentElement).getPropertyValue('--bizy-tooltip-color') ?? '#000';
-            const textBackgroundColor = getComputedStyle(this.document.documentElement).getPropertyValue('--bizy-tooltip-background-color') ?? '#fff';
-            const borderColor = getComputedStyle(this.document.documentElement).getPropertyValue('--bizy-tooltip-border-color') ?? '#fff';
+            const textColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-tooltip-color') ?? '#000';
+            const textBackgroundColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-tooltip-background-color') ?? '#fff';
+            const borderColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-tooltip-border-color') ?? '#fff';
             const toolbox = {
                 show: true,
                 feature: {
@@ -3520,12 +3480,12 @@ class BizyPieChartComponent {
                         onclick: () => {
                             setTimeout(() => {
                                 html2canvas(this.#chartContainer).then(canvas => {
-                                    var link = document.createElement('a');
+                                    var link = this.#renderer.createElement('a');
                                     link.href = canvas.toDataURL('image/png');
                                     link.download = `${this.download.name}.png`;
-                                    this.renderer.appendChild(this.document.body, link);
+                                    this.#renderer.appendChild(this.#document.body, link);
                                     link.click();
-                                    this.renderer.removeChild(this.document.body, link);
+                                    this.#renderer.removeChild(this.#document.body, link);
                                     this.onDownload.emit();
                                 });
                             }, 500);
@@ -3562,7 +3522,7 @@ class BizyPieChartComponent {
                     this.onSelect.emit(params.name);
                 });
                 this.#resizeObserver = new ResizeObserver(() => this.#resize$.next());
-                const resizeRef = this.resizeRef ? this.resizeRef : this.renderer.parentNode(this.elementRef.nativeElement) ? this.renderer.parentNode(this.elementRef.nativeElement) : this.elementRef.nativeElement;
+                const resizeRef = this.resizeRef ? this.resizeRef : this.#renderer.parentNode(this.#elementRef.nativeElement) ? this.#renderer.parentNode(this.#elementRef.nativeElement) : this.#elementRef.nativeElement;
                 this.#resizeObserver.observe(resizeRef);
                 this.#subscription.add(this.#resize$.pipe(skip(1), auditTime(300), throttleTime(500)).subscribe(() => {
                     this.#deleteChartContainer();
@@ -3580,43 +3540,43 @@ class BizyPieChartComponent {
         }));
     }
     #createChartContainer = () => {
-        if (this.#chartContainer || !this.elementRef || !this.elementRef.nativeElement) {
+        if (this.#chartContainer || !this.#elementRef || !this.#elementRef.nativeElement) {
             return;
         }
-        let elementWidth = this.elementRef.nativeElement.offsetWidth || MIN_CHART_SIZE;
-        let elementHeight = this.elementRef.nativeElement.offsetHeight || MIN_CHART_SIZE;
-        let minWidth = MIN_CHART_SIZE;
-        let minHeight = MIN_CHART_SIZE;
-        const chartMinWidth = getComputedStyle(this.document.body).getPropertyValue('--bizy-chart-min-width');
-        const pieChartMinHeight = getComputedStyle(this.document.body).getPropertyValue('--bizy-chart-min-height');
-        if (Number(chartMinWidth)) {
-            minWidth = Number(chartMinWidth);
-        }
-        if (Number(pieChartMinHeight)) {
-            minHeight = Number(pieChartMinHeight);
-        }
-        const width = Math.max(elementWidth, minWidth);
-        const height = Math.max(elementHeight, minHeight);
-        this.#chartContainer = this.renderer.createElement('div');
-        this.renderer.setStyle(this.#chartContainer, 'width', `${width}px`);
-        this.renderer.setStyle(this.#chartContainer, 'height', `${height}px`);
-        this.renderer.appendChild(this.elementRef.nativeElement, this.#chartContainer);
-        this.ref.detectChanges();
+        let elementWidth = this.#elementRef.nativeElement.offsetWidth;
+        let elementHeight = this.#elementRef.nativeElement.offsetHeight;
+        let minWidth = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-pie-chart-min-width') || 0;
+        let minHeight = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-pie-chart-min-height') || 0;
+        const width = elementWidth ? `${elementWidth}px` : minWidth;
+        const height = elementHeight ? `${elementHeight}px` : minHeight;
+        this.#chartContainer = this.#renderer.createElement('div');
+        this.#renderer.setStyle(this.#chartContainer, 'width', width);
+        this.#renderer.setStyle(this.#chartContainer, 'height', height);
+        this.#renderer.appendChild(this.#elementRef.nativeElement, this.#chartContainer);
+        this.#ref.detectChanges();
     };
     #deleteChartContainer = () => {
-        if (!this.#chartContainer || !this.elementRef || !this.elementRef.nativeElement) {
+        if (!this.#chartContainer || !this.#elementRef || !this.#elementRef.nativeElement) {
             return;
         }
         this.#echarts.clear();
-        this.renderer.removeChild(this.elementRef.nativeElement, this.#chartContainer);
+        this.#renderer.removeChild(this.#elementRef.nativeElement, this.#chartContainer);
         this.#chartContainer = null;
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
+    };
+    #getClosestCssVariable = (element, cssVariable) => {
+        while (element) {
+            const value = getComputedStyle(element).getPropertyValue(cssVariable).trim();
+            if (value) {
+                return value;
+            }
+            element = element.parentElement;
+        }
+        const rootValue = getComputedStyle(document.documentElement).getPropertyValue(cssVariable).trim();
+        return rootValue || null;
     };
     ngOnDestroy() {
         this.#subscription.unsubscribe();
-        if (this.#mutationObserver) {
-            this.#mutationObserver.disconnect();
-        }
         if (this.#resizeObserver) {
             this.#resizeObserver.disconnect();
         }
@@ -3624,7 +3584,7 @@ class BizyPieChartComponent {
             this.#echarts.clear();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyPieChartComponent, deps: [{ token: ElementRef }, { token: DOCUMENT }, { token: ChangeDetectorRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyPieChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyPieChartComponent, isStandalone: true, selector: "bizy-pie-chart", inputs: { resizeRef: "resizeRef", tooltip: "tooltip", type: "type", download: "download", onLabelFormatter: "onLabelFormatter", onTooltipFormatter: "onTooltipFormatter", data: "data" }, outputs: { onSelect: "onSelect", onDownload: "onDownload" }, ngImport: i0, template: '', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyPieChartComponent, decorators: [{
@@ -3635,19 +3595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
                     imports: [CommonModule],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
-                    type: Inject,
-                    args: [ElementRef]
-                }] }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.ChangeDetectorRef, decorators: [{
-                    type: Inject,
-                    args: [ChangeDetectorRef]
-                }] }, { type: i0.Renderer2, decorators: [{
-                    type: Inject,
-                    args: [Renderer2]
-                }] }], propDecorators: { resizeRef: [{
+        }], propDecorators: { resizeRef: [{
                 type: Input
             }], tooltip: [{
                 type: Input