@bizy/core 21.0.0 → 21.2.0

package/fesm2022/bizy-core.mjs

@@ -76,19 +76,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS$y = [
+const COMPONENTS$A = [
     BizyAccordionComponent,
 ];
 class BizyAccordionModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: BizyAccordionModule, imports: [BizyAccordionComponent], exports: [BizyAccordionComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyAccordionModule, imports: [COMPONENTS$y] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyAccordionModule, imports: [COMPONENTS$A] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyAccordionModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: COMPONENTS$y,
-                    exports: COMPONENTS$y
+                    imports: COMPONENTS$A,
+                    exports: COMPONENTS$A
                 }]
         }] });
 
@@ -7659,7 +7659,7 @@ var muteAnimation = {
 	markers: markers
 };
 
-const DEFAULT_DOWNLOAD$3 = {
+const DEFAULT_DOWNLOAD$5 = {
     show: true,
     name: 'Bizy'
 };
@@ -7706,9 +7706,9 @@ class BizyAudioPlayerComponent {
         if (!download) {
             return;
         }
-        this._showDownload = download.show ?? DEFAULT_DOWNLOAD$3.show;
+        this._showDownload = download.show ?? DEFAULT_DOWNLOAD$5.show;
         this._downloadURL = download.url ?? null;
-        this._downloadFileName = download.name ?? DEFAULT_DOWNLOAD$3.name;
+        this._downloadFileName = download.name ?? DEFAULT_DOWNLOAD$5.name;
     }
     ;
     set playbackRate(playbackRate) {
@@ -7769,9 +7769,9 @@ class BizyAudioPlayerComponent {
     _paused = true;
     _muted = false;
     _src = null;
-    _showDownload = DEFAULT_DOWNLOAD$3.show;
+    _showDownload = DEFAULT_DOWNLOAD$5.show;
     _downloadURL = null;
-    _downloadFileName = DEFAULT_DOWNLOAD$3.name;
+    _downloadFileName = DEFAULT_DOWNLOAD$5.name;
     _showPlaybackRate = DEFAULT_PLAYBACK_RATE.show;
     _playbackRate = DEFAULT_PLAYBACK_RATE.default;
     MIME_TYPE = MIME_TYPE;
@@ -8378,7 +8378,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$x = [BizyAudioPlayerComponent];
+const COMPONENTS$z = [BizyAudioPlayerComponent];
 class BizyAudioPlayerModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyAudioPlayerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: BizyAudioPlayerModule, imports: [BizyAudioPlayerComponent], exports: [BizyAudioPlayerComponent] });
@@ -8387,8 +8387,8 @@ class BizyAudioPlayerModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyAudioPlayerModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: COMPONENTS$x,
-                    exports: COMPONENTS$x
+                    imports: COMPONENTS$z,
+                    exports: COMPONENTS$z
                 }]
         }] });
 
@@ -8626,7 +8626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS$w = [
+const COMPONENTS$y = [
     BizyAudioRecorderComponent,
 ];
 class BizyAudioRecorderModule {
@@ -8637,8 +8637,8 @@ class BizyAudioRecorderModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyAudioRecorderModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: COMPONENTS$w,
-                    exports: COMPONENTS$w
+                    imports: COMPONENTS$y,
+                    exports: COMPONENTS$y
                 }]
         }] });
 
@@ -10056,7 +10056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                 args: ['dynamicComponentContainer', { read: ViewContainerRef }]
             }] } });
 
-const COMPONENTS$v = [
+const COMPONENTS$x = [
     BizyPopupWrapperComponent,
     BizyFullScreenPopupWrapperComponent
 ];
@@ -10065,13 +10065,13 @@ class BizyPopupModule {
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: BizyPopupModule, imports: [BizyPopupWrapperComponent,
             BizyFullScreenPopupWrapperComponent], exports: [BizyPopupWrapperComponent,
             BizyFullScreenPopupWrapperComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyPopupModule, providers: [BizyPopupService], imports: [COMPONENTS$v] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyPopupModule, providers: [BizyPopupService], imports: [COMPONENTS$x] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyPopupModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: COMPONENTS$v,
-                    exports: COMPONENTS$v,
+                    imports: COMPONENTS$x,
+                    exports: COMPONENTS$x,
                     providers: [BizyPopupService]
                 }]
         }] });
@@ -10140,13 +10140,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
 
 const GRID_BOTTOM = 30;
 const Y_AXIS_OFFSET = 50;
-const DEFAULT_CHART_SIZE$2 = '300px';
-const DEFAULT_DOWNLOAD$2 = {
+const DEFAULT_CHART_SIZE$4 = '300px';
+const DEFAULT_DOWNLOAD$4 = {
     show: true,
     label: 'Descargar',
     name: 'Bizy'
 };
-const DEFAULT_TOOLTIP$2 = {
+const DEFAULT_TOOLTIP$4 = {
     show: true
 };
 class BizyBarLineChartComponent {
@@ -10156,8 +10156,8 @@ class BizyBarLineChartComponent {
     #renderer = inject(Renderer2);
     #popup = inject(BizyPopupService);
     resizeRef = null;
-    tooltip = DEFAULT_TOOLTIP$2;
-    download = DEFAULT_DOWNLOAD$2;
+    tooltip = DEFAULT_TOOLTIP$4;
+    download = DEFAULT_DOWNLOAD$4;
     axisPointer = 'line';
     xAxis = null;
     onDownload = new EventEmitter();
@@ -10341,7 +10341,7 @@ class BizyBarLineChartComponent {
                 }
             });
             const tooltip = {
-                show: this.tooltip?.show ?? DEFAULT_TOOLTIP$2.show,
+                show: this.tooltip?.show ?? DEFAULT_TOOLTIP$4.show,
                 trigger: 'axis',
                 appendToBody: true,
                 axisPointer: {
@@ -10377,9 +10377,9 @@ class BizyBarLineChartComponent {
                 show: true,
                 feature: {
                     mySaveAsImage: {
-                        show: this.download?.show ?? DEFAULT_DOWNLOAD$2.show,
+                        show: this.download?.show ?? DEFAULT_DOWNLOAD$4.show,
                         icon: 'path://M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z',
-                        title: this.download?.label ?? DEFAULT_DOWNLOAD$2.label,
+                        title: this.download?.label ?? DEFAULT_DOWNLOAD$4.label,
                         onclick: () => {
                             this.#popup.open({
                                 disableCloseButton: true,
@@ -10387,7 +10387,7 @@ class BizyBarLineChartComponent {
                                 component: BizyBarLineChartPopupComponent,
                                 data: {
                                     download: {
-                                        name: this.download?.name ?? DEFAULT_DOWNLOAD$2.name,
+                                        name: this.download?.name ?? DEFAULT_DOWNLOAD$4.name,
                                     },
                                     grid: {
                                         left: this.#gridLeft,
@@ -10457,8 +10457,8 @@ class BizyBarLineChartComponent {
         let elementHeight = this.#elementRef.nativeElement.offsetHeight;
         let minWidth = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-bar-line-chart-width');
         let minHeight = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-bar-line-chart-height');
-        const width = minWidth ? minWidth : elementWidth ? `${elementWidth}px` : DEFAULT_CHART_SIZE$2;
-        const height = minHeight ? minHeight : elementHeight ? `${elementHeight}px` : DEFAULT_CHART_SIZE$2;
+        const width = minWidth ? minWidth : elementWidth ? `${elementWidth}px` : DEFAULT_CHART_SIZE$4;
+        const height = minHeight ? minHeight : elementHeight ? `${elementHeight}px` : DEFAULT_CHART_SIZE$4;
         this.#chartContainer = this.#renderer.createElement('div');
         this.#renderer.setStyle(this.#chartContainer, 'width', width);
         this.#renderer.setStyle(this.#chartContainer, 'height', height);
@@ -10519,7 +10519,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$u = [
+const COMPONENTS$w = [
     BizyBarLineChartComponent,
     BizyBarLineChartPopupComponent
 ];
@@ -10533,8 +10533,8 @@ class BizyBarLineChartModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyBarLineChartModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: COMPONENTS$u,
-                    exports: COMPONENTS$u
+                    imports: COMPONENTS$w,
+                    exports: COMPONENTS$w
                 }]
         }] });
 
@@ -10593,19 +10593,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$t = [
+const COMPONENTS$v = [
     BizyBreadcrumbComponent,
 ];
 class BizyBreadcrumbModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyBreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: BizyBreadcrumbModule, imports: [BizyBreadcrumbComponent], exports: [BizyBreadcrumbComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyBreadcrumbModule, imports: [COMPONENTS$t] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyBreadcrumbModule, imports: [COMPONENTS$v] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyBreadcrumbModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: COMPONENTS$t,
-                    exports: COMPONENTS$t
+                    imports: COMPONENTS$v,
+                    exports: COMPONENTS$v
                 }]
         }] });
 
@@ -10642,19 +10642,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS$s = [
+const COMPONENTS$u = [
     BizyButtonComponent,
 ];
 class BizyButtonModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: BizyButtonModule, imports: [BizyButtonComponent], exports: [BizyButtonComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyButtonModule, imports: [COMPONENTS$s] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyButtonModule, imports: [COMPONENTS$u] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyButtonModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: COMPONENTS$s,
-                    exports: COMPONENTS$s
+                    imports: COMPONENTS$u,
+                    exports: COMPONENTS$u
                 }]
         }] });
 
@@ -10925,19 +10925,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$r = [
+const COMPONENTS$t = [
     BizyCalendarComponent,
 ];
 class BizyCalendarModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: BizyCalendarModule, imports: [BizyCalendarComponent], exports: [BizyCalendarComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyCalendarModule, imports: [COMPONENTS$r] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyCalendarModule, imports: [COMPONENTS$t] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyCalendarModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: COMPONENTS$r,
-                    exports: COMPONENTS$r
+                    imports: COMPONENTS$t,
+                    exports: COMPONENTS$t
                 }]
         }] });
 
@@ -10973,19 +10973,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS$q = [
+const COMPONENTS$s = [
     BizyCardComponent,
 ];
 class BizyCardModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: BizyCardModule, imports: [BizyCardComponent], exports: [BizyCardComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyCardModule, imports: [COMPONENTS$q] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyCardModule, imports: [COMPONENTS$s] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyCardModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: COMPONENTS$q,
-                    exports: COMPONENTS$q
+                    imports: COMPONENTS$s,
+                    exports: COMPONENTS$s
                 }]
         }] });
 
@@ -11026,19 +11026,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS$p = [
+const COMPONENTS$r = [
     BizyCheckboxComponent,
 ];
 class BizyCheckboxModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: BizyCheckboxModule, imports: [BizyCheckboxComponent], exports: [BizyCheckboxComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyCheckboxModule, imports: [COMPONENTS$p] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyCheckboxModule, imports: [COMPONENTS$r] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyCheckboxModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: COMPONENTS$p,
-                    exports: COMPONENTS$p
+                    imports: COMPONENTS$r,
+                    exports: COMPONENTS$r
                 }]
         }] });
 
@@ -11053,7 +11053,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
             args: [{ selector: 'bizy-content', imports: [], template: "<ng-content></ng-content>", styles: [":host{flex:1;padding:var(--bizy-content-padding);width:var(--bizy-content-width);height:var(--bizy-content-height);overflow:auto;display:flex;flex-direction:var(--bizy-content-flex-direction);row-gap:var(--bizy-content-row-gap)}\n"] }]
         }] });
 
-const COMPONENTS$o = [
+const COMPONENTS$q = [
     BizyContentComponent,
 ];
 class BizyContentModule {
@@ -11064,8 +11064,8 @@ class BizyContentModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyContentModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: COMPONENTS$o,
-                    exports: COMPONENTS$o
+                    imports: COMPONENTS$q,
+                    exports: COMPONENTS$q
                 }]
         }] });
 
@@ -11573,101 +11573,522 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                 type: Input
             }] } });
 
-const COMPONENTS$n = [
+const COMPONENTS$p = [
     BizyDatePickerComponent,
 ];
 class BizyDatePickerModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: BizyDatePickerModule, imports: [BizyDatePickerComponent], exports: [BizyDatePickerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyDatePickerModule, imports: [COMPONENTS$n] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyDatePickerModule, imports: [COMPONENTS$p] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyDatePickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: COMPONENTS$n,
-                    exports: COMPONENTS$n
+                    imports: COMPONENTS$p,
+                    exports: COMPONENTS$p
                 }]
         }] });
 
-const ES = {
-    ...es_ES,
-    strings: {
-        ...es_ES.strings,
-        noDuplicates: 'Archivo duplicado: \'%{fileName}\'',
-        browseFiles: 'buscar archivo',
-        dropPasteFiles: 'Soltar archivo aquí, pegar o %{browse}'
+class BizyDonutChartPopupComponent {
+    #popup = inject(BizyPopupService);
+    #renderer = inject(Renderer2);
+    #elementRef = inject(ElementRef);
+    #ref = inject(ChangeDetectorRef);
+    #document = inject(DOCUMENT);
+    #echarts = null;
+    #chartContainer = null;
+    ngOnInit() {
+        const data = this.#popup.getData();
+        if (!data || !data.option) {
+            this.#popup.close();
+            return;
+        }
+        this.#chartContainer = this.#renderer.createElement('div');
+        this.#renderer.setStyle(this.#chartContainer, 'width', '100%');
+        this.#renderer.setStyle(this.#chartContainer, 'height', '100%');
+        this.#renderer.appendChild(this.#elementRef.nativeElement, this.#chartContainer);
+        this.#ref.detectChanges();
+        import('echarts').then(echarts => {
+            this.#echarts = echarts.init(this.#chartContainer);
+            Promise.resolve().then(() => {
+                this.#echarts.setOption({
+                    ...data.option,
+                    series: [{
+                            ...data.option.series[0],
+                            minAngle: 1,
+                            label: {
+                                ...data.option.series[0].label,
+                                width: 'none',
+                                overflow: 'break',
+                            },
+                            labelLine: {
+                                show: data.option.series[0].labelLine?.show,
+                                length: 50,
+                                length2: 50
+                            },
+                            labelLayout() {
+                                return {
+                                    moverOverlap: 'shiftY',
+                                    hideOverlap: false
+                                };
+                            },
+                        }],
+                    toolbox: {
+                        show: true,
+                        feature: {
+                            mySaveAsImage: {
+                                show: data.download.show,
+                                icon: 'path://M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z',
+                                title: data.download.label,
+                                onclick: () => {
+                                    setTimeout(() => {
+                                        import('html2canvas').then(module => {
+                                            const html2canvas = module.default;
+                                            html2canvas(this.#chartContainer).then(canvas => {
+                                                var link = this.#renderer.createElement('a');
+                                                link.href = canvas.toDataURL('image/png');
+                                                link.download = `${data.download.name}.png`;
+                                                this.#renderer.appendChild(this.#document.body, link);
+                                                link.click();
+                                                this.#renderer.removeChild(this.#document.body, link);
+                                            });
+                                        });
+                                    }, 500);
+                                }
+                            }
+                        }
+                    }
+                });
+            });
+        }).catch(() => {
+            this.#popup.close();
+            return;
+        });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyDonutChartPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyDonutChartPopupComponent, isStandalone: true, selector: "bizy-donut-chart-popup", ngImport: i0, template: '', isInline: true, styles: [":host{display:inline-block;height:min(60rem,90dvh);width:min(60rem,85dvw)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyDonutChartPopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bizy-donut-chart-popup', template: '', styles: [":host{display:inline-block;height:min(60rem,90dvh);width:min(60rem,85dvw)}\n"] }]
+        }] });
+
+const EMPTY_CHART$1 = [0];
+const DEFAULT_CHART_SIZE$3 = '300px';
+const DEFAULT_DOWNLOAD$3 = {
+    show: true,
+    label: 'Descargar',
+    name: 'Bizy'
 };
-const EN = {
-    ...en_US,
-    strings: {
-        ...en_US.strings,
-        noDuplicates: 'Duplicated file: \'%{fileName}\'',
-        browseFiles: 'browse file',
-        dropPasteFiles: 'Drop a file here or %{browse}'
+const DEFAULT_EXPAND$2 = {
+    show: true,
+    label: 'Expandir'
+};
+const DEFAULT_TOOLTIP$3 = {
+    show: true
+};
+const DEFAULT_LEGEND$1 = {
+    show: true,
+    orient: 'vertical',
+    position: {
+        x: 'auto',
+        y: 'auto'
     }
 };
-class BizyFileUploaderService {
+const DEFAULT_LABEL$1 = {
+    show: false,
+    overflow: 'break',
+    line: true
+};
+class BizyDonutChartComponent {
+    #elementRef = inject(ElementRef);
+    #document = inject(DOCUMENT);
+    #ref = inject(ChangeDetectorRef);
     #renderer = inject(Renderer2);
-    #document = inject(DOCUMENT$1);
-    #fileLoaded = new Subject();
-    #fileRemoved = new Subject();
-    #upload = new Subject();
-    #uploadSuccess = new Subject();
-    #error = new Subject();
-    #cancelAll = new Subject();
-    #complete = new Subject();
-    #disableLocalFiles = false;
-    #uppy = null;
-    get fileLoaded$() {
-        return this.#fileLoaded.asObservable();
-    }
-    get fileRemoved$() {
-        return this.#fileRemoved.asObservable();
-    }
-    get upload$() {
-        return this.#upload.asObservable();
-    }
-    get uploadSuccess$() {
-        return this.#uploadSuccess.asObservable();
-    }
-    get error$() {
-        return this.#error.asObservable();
-    }
-    get cancelAll$() {
-        return this.#cancelAll.asObservable();
+    #popup = inject(BizyPopupService);
+    resizeRef = null;
+    centerLabel = null;
+    tooltip = DEFAULT_TOOLTIP$3;
+    legend = DEFAULT_LEGEND$1;
+    download = DEFAULT_DOWNLOAD$3;
+    expand = DEFAULT_EXPAND$2;
+    label = DEFAULT_LABEL$1;
+    onSelect = new EventEmitter();
+    onDownload = new EventEmitter();
+    #echarts = null;
+    #resizeObserver = null;
+    #afterViewInitSubscription = new Subscription();
+    #resizeSubscription = new Subscription();
+    #chartContainer = null;
+    #afterViewInit = new BehaviorSubject(false);
+    #resize$ = new Subject();
+    #data = EMPTY_CHART$1;
+    ngAfterViewInit() {
+        this.#afterViewInit.next(true);
     }
-    get complete$() {
-        return this.#complete.asObservable();
+    getNativeElement = () => this.#elementRef?.nativeElement;
+    set data(data) {
+        if (!data) {
+            return;
+        }
+        if (data.length > 0) {
+            this.#setChartData(data);
+        }
+        else {
+            this.#deleteChartContainer();
+            this.#setChartData(EMPTY_CHART$1);
+        }
     }
-    createFileUploader(data) {
-        const locale = data.language === 'es' ? ES : EN;
-        this.#disableLocalFiles = data.disableLocalFiles;
-        this.#uppy = new Uppy({
-            locale,
-            infoTimeout: 2500,
-            restrictions: {
-                maxFileSize: data.maxFileSize,
-                minFileSize: data.minFileSize,
-                maxTotalFileSize: data.maxTotalFileSize,
-                maxNumberOfFiles: data.maxNumberOfFiles,
-                minNumberOfFiles: data.minNumberOfFiles,
-                allowedFileTypes: data.allowedFileTypes
-            }
-        })
-            .use(Dashboard, {
-            inline: true,
-            singleFileFullScreen: false,
-            target: `#${data.templateId}`,
-            width: data.dragDropAreaWidth,
-            height: data.dragDropAreaHeight,
-            hideCancelButton: data.hideCancelButton,
-            hideUploadButton: data.hideUploadButton,
-            hidePauseResumeButton: data.hidePauseResumeButton,
-            disableLocalFiles: data.disableLocalFiles
-        })
-            .use(XHRUpload, {
-            endpoint: '',
+    async #setChartData(data) {
+        this.#afterViewInitSubscription.add(this.#afterViewInit.pipe(filter$1(value => value === true), take(1)).subscribe(() => {
+            /**
+             * setTimeout fix angular render problem
+             */
+            setTimeout(() => {
+                this.#createChartContainer();
+                if (!this.#chartContainer) {
+                    return;
+                }
+                if (data && data.length > 0 && data[0] !== 0) {
+                    this.#data = [];
+                    data.forEach(_d => {
+                        if (!_d.value) {
+                            _d.value = 0;
+                        }
+                        if (!_d.name) {
+                            _d.name = '---';
+                        }
+                        const itemStyle = _d.color ? { color: _d.color } : {};
+                        this.#data.push({
+                            name: _d.name,
+                            value: _d.value,
+                            itemStyle
+                        });
+                    });
+                }
+                else {
+                    this.#data = EMPTY_CHART$1;
+                }
+                const itemStyle = {
+                    borderRadius: 10,
+                    borderColor: '#fff',
+                    borderWidth: 2
+                };
+                const label = {
+                    show: this.label?.show ?? DEFAULT_LABEL$1.show,
+                    overflow: this.label?.overflow ?? DEFAULT_LABEL$1.overflow,
+                    position: 'center',
+                    formatter: this.label?.formatter
+                };
+                const labelLine = {
+                    show: this.label?.line ?? DEFAULT_LABEL$1.line
+                };
+                const series = [{
+                        type: 'pie',
+                        radius: ['50%', '70%'],
+                        center: ['50%', '50%'],
+                        data: this.#data,
+                        itemStyle,
+                        label,
+                        labelLine
+                    }];
+                const textColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-donut-chart-tooltip-color');
+                const textBackgroundColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-donut-chart-tooltip-background-color');
+                const borderColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-donut-chart-tooltip-border-color');
+                const toolbox = {
+                    show: true,
+                    feature: {
+                        mySaveAsImage: {
+                            show: this.download.show ?? DEFAULT_DOWNLOAD$3.show,
+                            icon: 'path://M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z',
+                            title: this.download.label ?? DEFAULT_DOWNLOAD$3.label,
+                            onclick: () => {
+                                setTimeout(() => {
+                                    import('html2canvas').then(module => {
+                                        const html2canvas = module.default;
+                                        html2canvas(this.#chartContainer).then(canvas => {
+                                            var link = this.#renderer.createElement('a');
+                                            link.href = canvas.toDataURL('image/png');
+                                            link.download = `${this.download.name ?? DEFAULT_DOWNLOAD$3.name}.png`;
+                                            this.#renderer.appendChild(this.#document.body, link);
+                                            link.click();
+                                            this.#renderer.removeChild(this.#document.body, link);
+                                            this.onDownload.emit();
+                                        });
+                                    });
+                                }, 500);
+                            }
+                        },
+                        myExpandChart: {
+                            show: this.expand.show ?? DEFAULT_EXPAND$2.show,
+                            icon: 'path://M264 96L120 96C106.7 96 96 106.7 96 120L96 264C96 273.7 101.8 282.5 110.8 286.2C119.8 289.9 130.1 287.8 137 281L177 241L256 320L177 399L137 359C130.1 352.1 119.8 350.1 110.8 353.8C101.8 357.5 96 366.3 96 376L96 520C96 533.3 106.7 544 120 544L264 544C273.7 544 282.5 538.2 286.2 529.2C289.9 520.2 287.9 509.9 281 503L241 463L320 384L399 463L359 503C352.1 509.9 350.1 520.2 353.8 529.2C357.5 538.2 366.3 544 376 544L520 544C533.3 544 544 533.3 544 520L544 376C544 366.3 538.2 357.5 529.2 353.8C520.2 350.1 509.9 352.1 503 359L463 399L384 320L463 241L503 281C509.9 287.9 520.2 289.9 529.2 286.2C538.2 282.5 544 273.7 544 264L544 120C544 106.7 533.3 96 520 96L376 96C366.3 96 357.5 101.8 353.8 110.8C350.1 119.8 352.2 130.1 359 137L399 177L320 256L241 177L281 137C287.9 130.1 289.9 119.8 286.2 110.8C282.5 101.8 273.7 96 264 96z',
+                            title: this.expand.label ?? DEFAULT_EXPAND$2.label,
+                            onclick: () => {
+                                this.#popup.open({
+                                    component: BizyDonutChartPopupComponent,
+                                    data: {
+                                        download: {
+                                            show: this.download?.show ?? DEFAULT_DOWNLOAD$3.show,
+                                            label: this.download?.label ?? DEFAULT_DOWNLOAD$3.label,
+                                            name: this.download?.name ?? DEFAULT_DOWNLOAD$3.name,
+                                        },
+                                        option: this.#echarts.getOption()
+                                    }
+                                });
+                            }
+                        }
+                    },
+                    emphasis: {
+                        iconStyle: {
+                            color: textColor,
+                            borderColor,
+                            borderWidth: 1,
+                            textBackgroundColor,
+                            textPadding: 5,
+                        }
+                    }
+                };
+                const tooltip = {
+                    show: this.tooltip?.show ?? DEFAULT_TOOLTIP$3.show,
+                    trigger: 'item',
+                    appendToBody: true,
+                    formatter: this.tooltip?.formatter
+                };
+                let legend = {
+                    show: this.legend?.show ?? DEFAULT_LEGEND$1.show,
+                    orient: this.legend?.orient ?? DEFAULT_LEGEND$1.orient,
+                    left: this.legend?.position ? this.legend?.position.x : DEFAULT_LEGEND$1.position.x,
+                    top: this.legend?.position ? this.legend?.position.y : DEFAULT_LEGEND$1.position.y,
+                };
+                let graphic;
+                if (this.centerLabel) {
+                    let centerLabelColor = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-donut-chart-center-label-color');
+                    let { width, height } = this.#chartContainer.getBoundingClientRect();
+                    let base = Math.min(width, height);
+                    let fontSize = base / 6;
+                    graphic = {
+                        type: 'text',
+                        left: 'center',
+                        top: 'center',
+                        style: {
+                            text: this.centerLabel,
+                            fill: centerLabelColor,
+                            textAlign: 'center',
+                            fontSize,
+                            fontWeight: 'bold'
+                        }
+                    };
+                }
+                const option = {
+                    tooltip,
+                    toolbox,
+                    legend,
+                    series,
+                    graphic
+                };
+                import('echarts').then(echarts => {
+                    this.#echarts = echarts.init(this.#chartContainer);
+                    Promise.resolve().then(() => {
+                        this.#echarts.setOption(option);
+                        this.#echarts.on('click', params => {
+                            this.onSelect.emit(params.name);
+                        });
+                        this.#resizeSubscription.unsubscribe();
+                        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;
+                        this.#resizeObserver.observe(resizeRef);
+                        this.#resizeSubscription = new Subscription();
+                        this.#resizeSubscription.add(this.#resize$.pipe(skip(1), auditTime(300), throttleTime(500)).subscribe(() => {
+                            this.#deleteChartContainer();
+                            this.#createChartContainer();
+                            if (!this.#chartContainer) {
+                                return;
+                            }
+                            this.#echarts = echarts.init(this.#chartContainer);
+                            Promise.resolve().then(() => {
+                                this.#echarts.setOption({ ...option, series: option.series.map(_serie => { return { ..._serie, data: this.#data }; }) });
+                                this.#echarts.on('click', params => {
+                                    this.onSelect.emit(params.name);
+                                });
+                            });
+                        }));
+                    });
+                });
+            });
+        }));
+    }
+    #createChartContainer = () => {
+        if (this.#chartContainer || !this.#elementRef || !this.#elementRef.nativeElement) {
+            return;
+        }
+        let elementWidth = this.#elementRef.nativeElement.offsetWidth;
+        let elementHeight = this.#elementRef.nativeElement.offsetHeight;
+        let minWidth = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-donut-chart-width');
+        let minHeight = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-donut-chart-height');
+        const width = minWidth ? minWidth : elementWidth ? `${elementWidth * 0.99}px` : DEFAULT_CHART_SIZE$3;
+        const height = minHeight ? minHeight : elementHeight ? `${elementHeight}px` : DEFAULT_CHART_SIZE$3;
+        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) {
+            return;
+        }
+        this.#echarts.clear();
+        this.#renderer.removeChild(this.#elementRef.nativeElement, this.#chartContainer);
+        this.#chartContainer = null;
+        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.#afterViewInitSubscription.unsubscribe();
+        this.#resizeSubscription.unsubscribe();
+        if (this.#resizeObserver) {
+            this.#resizeObserver.disconnect();
+        }
+        if (this.#echarts) {
+            this.#echarts.clear();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyDonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyDonutChartComponent, isStandalone: true, selector: "bizy-donut-chart", inputs: { resizeRef: "resizeRef", centerLabel: "centerLabel", tooltip: "tooltip", legend: "legend", download: "download", expand: "expand", label: "label", data: "data" }, outputs: { onSelect: "onSelect", onDownload: "onDownload" }, ngImport: i0, template: '', isInline: true, styles: [":host{display:flex;justify-content:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyDonutChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bizy-donut-chart', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;justify-content:center}\n"] }]
+        }], propDecorators: { resizeRef: [{
+                type: Input
+            }], centerLabel: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], legend: [{
+                type: Input
+            }], download: [{
+                type: Input
+            }], expand: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], onSelect: [{
+                type: Output
+            }], onDownload: [{
+                type: Output
+            }], data: [{
+                type: Input
+            }] } });
+
+const COMPONENTS$o = [
+    BizyDonutChartComponent,
+    BizyDonutChartPopupComponent
+];
+class BizyDonutChartModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyDonutChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: BizyDonutChartModule, imports: [BizyDonutChartComponent,
+            BizyDonutChartPopupComponent], exports: [BizyDonutChartComponent,
+            BizyDonutChartPopupComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyDonutChartModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyDonutChartModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: COMPONENTS$o,
+                    exports: COMPONENTS$o,
+                }]
+        }] });
+
+const ES = {
+    ...es_ES,
+    strings: {
+        ...es_ES.strings,
+        noDuplicates: 'Archivo duplicado: \'%{fileName}\'',
+        browseFiles: 'buscar archivo',
+        dropPasteFiles: 'Soltar archivo aquí, pegar o %{browse}'
+    }
+};
+const EN = {
+    ...en_US,
+    strings: {
+        ...en_US.strings,
+        noDuplicates: 'Duplicated file: \'%{fileName}\'',
+        browseFiles: 'browse file',
+        dropPasteFiles: 'Drop a file here or %{browse}'
+    }
+};
+class BizyFileUploaderService {
+    #renderer = inject(Renderer2);
+    #document = inject(DOCUMENT$1);
+    #fileLoaded = new Subject();
+    #fileRemoved = new Subject();
+    #upload = new Subject();
+    #uploadSuccess = new Subject();
+    #error = new Subject();
+    #cancelAll = new Subject();
+    #complete = new Subject();
+    #disableLocalFiles = false;
+    #uppy = null;
+    get fileLoaded$() {
+        return this.#fileLoaded.asObservable();
+    }
+    get fileRemoved$() {
+        return this.#fileRemoved.asObservable();
+    }
+    get upload$() {
+        return this.#upload.asObservable();
+    }
+    get uploadSuccess$() {
+        return this.#uploadSuccess.asObservable();
+    }
+    get error$() {
+        return this.#error.asObservable();
+    }
+    get cancelAll$() {
+        return this.#cancelAll.asObservable();
+    }
+    get complete$() {
+        return this.#complete.asObservable();
+    }
+    createFileUploader(data) {
+        const locale = data.language === 'es' ? ES : EN;
+        this.#disableLocalFiles = data.disableLocalFiles;
+        this.#uppy = new Uppy({
+            locale,
+            infoTimeout: 2500,
+            restrictions: {
+                maxFileSize: data.maxFileSize,
+                minFileSize: data.minFileSize,
+                maxTotalFileSize: data.maxTotalFileSize,
+                maxNumberOfFiles: data.maxNumberOfFiles,
+                minNumberOfFiles: data.minNumberOfFiles,
+                allowedFileTypes: data.allowedFileTypes
+            }
+        })
+            .use(Dashboard, {
+            inline: true,
+            singleFileFullScreen: false,
+            target: `#${data.templateId}`,
+            width: data.dragDropAreaWidth,
+            height: data.dragDropAreaHeight,
+            hideCancelButton: data.hideCancelButton,
+            hideUploadButton: data.hideUploadButton,
+            hidePauseResumeButton: data.hidePauseResumeButton,
+            disableLocalFiles: data.disableLocalFiles
+        })
+            .use(XHRUpload, {
+            endpoint: '',
             headers: data.headers,
             getResponseData: (responseText, response) => {
                 return {
@@ -11927,7 +12348,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                 type: Output
             }] } });
 
-const COMPONENTS$m = [
+const COMPONENTS$n = [
     BizyFileUploaderComponent,
 ];
 class BizyFileUploaderModule {
@@ -11938,8 +12359,8 @@ class BizyFileUploaderModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyFileUploaderModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: COMPONENTS$m,
-                    exports: COMPONENTS$m,
+                    imports: COMPONENTS$n,
+                    exports: COMPONENTS$n,
                     providers: [BizyFileUploaderService]
                 }]
         }] });
@@ -12545,7 +12966,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                 }]
         }] });
 
-const COMPONENTS$l = [
+const COMPONENTS$m = [
     BizyFilterComponent,
     BizyFilterSectionComponent,
     BizyFilterContentComponent,
@@ -12584,8 +13005,8 @@ class BizyFilterModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyFilterModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: COMPONENTS$l.concat(PIPES$1),
-                    exports: COMPONENTS$l.concat(PIPES$1),
+                    imports: COMPONENTS$m.concat(PIPES$1),
+                    exports: COMPONENTS$m.concat(PIPES$1),
                     providers: PIPES$1
                 }]
         }] });
@@ -12712,121 +13133,518 @@ class BizySelectComponent {
             this.bizyInput.setFocus(true);
         }
         this.#ref.detectChanges();
-    }
-    close = (event, select) => {
-        if (select && event && event.target && event.target === select.bizyInputWrapper.nativeElement) {
+    }
+    close = (event, select) => {
+        if (select && event && event.target && event.target === select.bizyInputWrapper.nativeElement) {
+            return;
+        }
+        this.opened = false;
+        this.openedChange.emit(this.opened);
+        this.onOpen.emit(this.opened);
+        this.#ref.detectChanges();
+    };
+    setTouched(touched) {
+        if (this.bizyInput) {
+            this.bizyInput.setTouched(touched);
+            this.#ref.detectChanges();
+        }
+    }
+    getNativeElement = () => this.#elementRef?.nativeElement;
+    ngOnDestroy() {
+        this.#subscription.unsubscribe();
+        this.#contentChildrenSubscription.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: BizySelectComponent, isStandalone: true, selector: "bizy-select", inputs: { id: "id", disabled: "disabled", readonly: "readonly", placeholder: "placeholder", customClass: "customClass", opened: "opened" }, outputs: { openedChange: "openedChange", onSelect: "onSelect", onOpen: "onOpen" }, queries: [{ propertyName: "options", predicate: BizySelectOptionComponent }], viewQueries: [{ propertyName: "templatePortalContent", first: true, predicate: ["templatePortalContent"], descendants: true }, { propertyName: "bizyInput", first: true, predicate: ["bizyInput"], descendants: true }], ngImport: i0, template: "<bizy-input\n  #bizyInput\n  [readonly]=\"true\"\n  [disabled]=\"disabled\"\n  [id]=\"id\"\n  [placeholder]=\"placeholder\"\n  [value]=\"_optionValue\"\n  [ngClass]=\"{'bizy-select--readonly': readonly}\"\n  (onSelect)=\"_onOpen($event); bizyInput?.setTouched(true)\"\n  (onEnter)=\"_onOpen($event); bizyInput?.setTouched(true)\"\n  class=\"bizy-select {{customClass}}\"\n  cdkOverlayOrigin\n  #bizySelectTrigger=\"cdkOverlayOrigin\">\n\n  @if (!readonly) {\n    <svg\n      slot=\"suffix\"\n      id=\"bizy-select-arrow\"\n      class=\"bizy-select__arrow\"\n      [ngClass]=\"{'bizy-select__arrow--opened': opened}\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 320 512\">\n      <path d=\"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\"/>\n    </svg>\n  }\n\n  <ng-container slot=\"header\">\n    <ng-content select=\"[slot=header]\"></ng-content>\n  </ng-container>\n\n  <ng-container slot=\"prefix\">\n    <ng-content select=\"[slot=prefix]\"></ng-content>\n  </ng-container>\n\n</bizy-input>\n\n@if (touched) {\n  <span class=\"bizy-select__errors\">\n    <ng-content select=\"[slot=error]\"></ng-content>\n  </span>\n}\n\n<ng-template #templatePortalContent>\n  <ng-content select=\"bizy-select-option\"></ng-content>\n</ng-template>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayMinWidth]=\"bizyInput.getWidth()\"\n  [cdkConnectedOverlayOrigin]=\"bizySelectTrigger\"\n  (overlayOutsideClick)=\"close($event, bizyInput)\"\n  [cdkConnectedOverlayOpen]=\"opened\">\n\n  <span class=\"bizy-select__options\">\n\n    <span class=\"bizy-select__options__search\">\n      <ng-content select=\"bizy-input\"></ng-content>\n    </span>\n\n    <ng-template [cdkPortalOutlet]=\"templatePortal\"></ng-template>\n\n  </span>\n\n</ng-template>\n", styles: [":host{font-size:1rem;width:var(--bizy-select-width);min-width:var(--bizy-select-min-width);max-width:var(--bizy-select-max-width);display:flex;flex-direction:column;row-gap:.3rem;--bizy-input-focus-color: transparent}:host:has(>.bizy-select__errors:not(:empty)) ::ng-deep .bizy-input__bottom-line{background-color:var(--bizy-input-invalid-color)!important;visibility:visible!important}:host:has(>.bizy-select__errors:not(:empty)) ::ng-deep .bizy-input__content__input{color:var(--bizy-input-invalid-color)!important}.bizy-select{--bizy-input-cursor: pointer;--bizy-input-background-color: var(--bizy-select-background-color);--bizy-input-color: var(--bizy-select-color)}.bizy-select--readonly{--bizy-input-cursor: default}.bizy-select__arrow{height:var(--bizy-select-arrow-height);pointer-events:none;display:block;transition:transform .2s ease;fill:var(--bizy-select-color)}.bizy-select__arrow--opened{transform:rotate(180deg)}.bizy-select__options{background-color:var(--bizy-select-background-color);display:flex;min-width:fit-content;width:100%;flex-direction:column;box-shadow:0 7px 14px #32325d1a,0 3px 6px #00000014;max-height:var(--bizy-select-height);overflow-y:auto;overflow-x:hidden;position:relative}.bizy-select__options::-webkit-scrollbar{width:.5rem;height:.5rem}.bizy-select__options::-webkit-scrollbar-thumb{border-radius:1rem;background-color:var(--bizy-select-scroll-bar-color)}.bizy-select__options::-webkit-scrollbar-thumb:hover{background-color:var(--bizy-select-scroll-bar-hover-color)}.bizy-select__options::-webkit-scrollbar-button{height:1rem}.bizy-select__options__search{position:sticky;z-index:1;top:0}::ng-deep .bizy-select__options__search{--bizy-input-width: auto;--bizy-input-background-color: #fff;--bizy-input-min-width: var(--bizy-select-min-width);--bizy-input-max-width: auto;margin-bottom:.3rem}.bizy-select__errors:empty{display:none!important}::ng-deep .bizy-select__errors *{color:var(--bizy-input-invalid-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BizyInputComponent, selector: "bizy-input", inputs: ["id", "name", "type", "customClass", "placeholder", "debounceTime", "rows", "disabled", "readonly", "autofocus", "value"], outputs: ["valueChange", "onChange", "onEnter", "onBackspace", "onSelect", "onBlur", "onFocus"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.ɵɵCdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizySelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bizy-select', imports: [CommonModule, BizyInputComponent, OverlayModule, PortalModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bizy-input\n  #bizyInput\n  [readonly]=\"true\"\n  [disabled]=\"disabled\"\n  [id]=\"id\"\n  [placeholder]=\"placeholder\"\n  [value]=\"_optionValue\"\n  [ngClass]=\"{'bizy-select--readonly': readonly}\"\n  (onSelect)=\"_onOpen($event); bizyInput?.setTouched(true)\"\n  (onEnter)=\"_onOpen($event); bizyInput?.setTouched(true)\"\n  class=\"bizy-select {{customClass}}\"\n  cdkOverlayOrigin\n  #bizySelectTrigger=\"cdkOverlayOrigin\">\n\n  @if (!readonly) {\n    <svg\n      slot=\"suffix\"\n      id=\"bizy-select-arrow\"\n      class=\"bizy-select__arrow\"\n      [ngClass]=\"{'bizy-select__arrow--opened': opened}\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 320 512\">\n      <path d=\"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\"/>\n    </svg>\n  }\n\n  <ng-container slot=\"header\">\n    <ng-content select=\"[slot=header]\"></ng-content>\n  </ng-container>\n\n  <ng-container slot=\"prefix\">\n    <ng-content select=\"[slot=prefix]\"></ng-content>\n  </ng-container>\n\n</bizy-input>\n\n@if (touched) {\n  <span class=\"bizy-select__errors\">\n    <ng-content select=\"[slot=error]\"></ng-content>\n  </span>\n}\n\n<ng-template #templatePortalContent>\n  <ng-content select=\"bizy-select-option\"></ng-content>\n</ng-template>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayMinWidth]=\"bizyInput.getWidth()\"\n  [cdkConnectedOverlayOrigin]=\"bizySelectTrigger\"\n  (overlayOutsideClick)=\"close($event, bizyInput)\"\n  [cdkConnectedOverlayOpen]=\"opened\">\n\n  <span class=\"bizy-select__options\">\n\n    <span class=\"bizy-select__options__search\">\n      <ng-content select=\"bizy-input\"></ng-content>\n    </span>\n\n    <ng-template [cdkPortalOutlet]=\"templatePortal\"></ng-template>\n\n  </span>\n\n</ng-template>\n", styles: [":host{font-size:1rem;width:var(--bizy-select-width);min-width:var(--bizy-select-min-width);max-width:var(--bizy-select-max-width);display:flex;flex-direction:column;row-gap:.3rem;--bizy-input-focus-color: transparent}:host:has(>.bizy-select__errors:not(:empty)) ::ng-deep .bizy-input__bottom-line{background-color:var(--bizy-input-invalid-color)!important;visibility:visible!important}:host:has(>.bizy-select__errors:not(:empty)) ::ng-deep .bizy-input__content__input{color:var(--bizy-input-invalid-color)!important}.bizy-select{--bizy-input-cursor: pointer;--bizy-input-background-color: var(--bizy-select-background-color);--bizy-input-color: var(--bizy-select-color)}.bizy-select--readonly{--bizy-input-cursor: default}.bizy-select__arrow{height:var(--bizy-select-arrow-height);pointer-events:none;display:block;transition:transform .2s ease;fill:var(--bizy-select-color)}.bizy-select__arrow--opened{transform:rotate(180deg)}.bizy-select__options{background-color:var(--bizy-select-background-color);display:flex;min-width:fit-content;width:100%;flex-direction:column;box-shadow:0 7px 14px #32325d1a,0 3px 6px #00000014;max-height:var(--bizy-select-height);overflow-y:auto;overflow-x:hidden;position:relative}.bizy-select__options::-webkit-scrollbar{width:.5rem;height:.5rem}.bizy-select__options::-webkit-scrollbar-thumb{border-radius:1rem;background-color:var(--bizy-select-scroll-bar-color)}.bizy-select__options::-webkit-scrollbar-thumb:hover{background-color:var(--bizy-select-scroll-bar-hover-color)}.bizy-select__options::-webkit-scrollbar-button{height:1rem}.bizy-select__options__search{position:sticky;z-index:1;top:0}::ng-deep .bizy-select__options__search{--bizy-input-width: auto;--bizy-input-background-color: #fff;--bizy-input-min-width: var(--bizy-select-min-width);--bizy-input-max-width: auto;margin-bottom:.3rem}.bizy-select__errors:empty{display:none!important}::ng-deep .bizy-select__errors *{color:var(--bizy-input-invalid-color)!important}\n"] }]
+        }], propDecorators: { templatePortalContent: [{
+                type: ViewChild,
+                args: ['templatePortalContent']
+            }], options: [{
+                type: ContentChildren,
+                args: [BizySelectOptionComponent]
+            }], bizyInput: [{
+                type: ViewChild,
+                args: ['bizyInput']
+            }], id: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], opened: [{
+                type: Input
+            }], openedChange: [{
+                type: Output
+            }], onSelect: [{
+                type: Output
+            }], onOpen: [{
+                type: Output
+            }] } });
+
+class BizyFormComponent {
+    #elementRef = inject(ElementRef);
+    inputs;
+    selects;
+    datePickers;
+    id = `bizy-form-${Math.random()}`;
+    customClass = '';
+    onSubmit(event) {
+        this.setTouched();
+        event.preventDefault();
+    }
+    setTouched = () => {
+        if (this.inputs.length > 0) {
+            this.inputs.forEach(component => {
+                component.setTouched(true);
+            });
+        }
+        if (this.selects.length > 0) {
+            this.selects.forEach(component => {
+                component.setTouched(true);
+            });
+        }
+        if (this.datePickers.length > 0) {
+            this.datePickers.forEach(component => {
+                component.setTouched(true);
+            });
+        }
+    };
+    getNativeElement = () => this.#elementRef?.nativeElement;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyFormComponent, isStandalone: true, selector: "bizy-form", inputs: { id: "id", customClass: "customClass" }, queries: [{ propertyName: "inputs", predicate: BizyInputComponent, descendants: true }, { propertyName: "selects", predicate: BizySelectComponent, descendants: true }, { propertyName: "datePickers", predicate: BizyDatePickerComponent, descendants: true }], ngImport: i0, template: "<form class=\"bizy-form {{customClass}}\" [id]=\"id\" (ngSubmit)=\"onSubmit($event)\">\n    <ng-content></ng-content>\n</form>", styles: [":host{font-size:1rem;max-width:var(--bizy-form-max-width)}.bizy-form{max-width:inherit;display:flex;flex-direction:column;row-gap:var(--bizy-form-row-gap);--bizy-input-max-width: 100%;--bizy-select-max-width: 100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bizy-form', imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"bizy-form {{customClass}}\" [id]=\"id\" (ngSubmit)=\"onSubmit($event)\">\n    <ng-content></ng-content>\n</form>", styles: [":host{font-size:1rem;max-width:var(--bizy-form-max-width)}.bizy-form{max-width:inherit;display:flex;flex-direction:column;row-gap:var(--bizy-form-row-gap);--bizy-input-max-width: 100%;--bizy-select-max-width: 100%}\n"] }]
+        }], propDecorators: { inputs: [{
+                type: ContentChildren,
+                args: [BizyInputComponent, { descendants: true }]
+            }], selects: [{
+                type: ContentChildren,
+                args: [BizySelectComponent, { descendants: true }]
+            }], datePickers: [{
+                type: ContentChildren,
+                args: [BizyDatePickerComponent, { descendants: true }]
+            }], id: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }] } });
+
+const COMPONENTS$l = [
+    BizyFormComponent,
+];
+class BizyFormModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: BizyFormModule, imports: [BizyFormComponent], exports: [BizyFormComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyFormModule, imports: [COMPONENTS$l] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: COMPONENTS$l,
+                    exports: COMPONENTS$l,
+                }]
+        }] });
+
+class BizyGaugeChartPopupComponent {
+    #popup = inject(BizyPopupService);
+    #renderer = inject(Renderer2);
+    #elementRef = inject(ElementRef);
+    #ref = inject(ChangeDetectorRef);
+    #document = inject(DOCUMENT);
+    #echarts = null;
+    #chartContainer = null;
+    ngOnInit() {
+        const data = this.#popup.getData();
+        if (!data || !data.option) {
+            this.#popup.close();
+            return;
+        }
+        this.#chartContainer = this.#renderer.createElement('div');
+        this.#renderer.setStyle(this.#chartContainer, 'width', '100%');
+        this.#renderer.setStyle(this.#chartContainer, 'height', '100%');
+        this.#renderer.appendChild(this.#elementRef.nativeElement, this.#chartContainer);
+        this.#ref.detectChanges();
+        import('echarts').then(echarts => {
+            this.#echarts = echarts.init(this.#chartContainer);
+            Promise.resolve().then(() => {
+                this.#echarts.setOption({
+                    ...data.option,
+                    series: [{
+                            ...data.option.series[0],
+                            minAngle: 1,
+                            label: {
+                                ...data.option.series[0].label,
+                                width: 'none',
+                                overflow: 'break',
+                            },
+                            labelLine: {
+                                show: data.option.series[0].labelLine?.show,
+                                length: 50,
+                                length2: 50
+                            },
+                            labelLayout() {
+                                return {
+                                    moverOverlap: 'shiftY',
+                                    hideOverlap: false
+                                };
+                            },
+                        }],
+                    toolbox: {
+                        show: true,
+                        feature: {
+                            mySaveAsImage: {
+                                show: data.download.show,
+                                icon: 'path://M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z',
+                                title: data.download.label,
+                                onclick: () => {
+                                    setTimeout(() => {
+                                        import('html2canvas').then(module => {
+                                            const html2canvas = module.default;
+                                            html2canvas(this.#chartContainer).then(canvas => {
+                                                var link = this.#renderer.createElement('a');
+                                                link.href = canvas.toDataURL('image/png');
+                                                link.download = `${data.download.name}.png`;
+                                                this.#renderer.appendChild(this.#document.body, link);
+                                                link.click();
+                                                this.#renderer.removeChild(this.#document.body, link);
+                                            });
+                                        });
+                                    }, 500);
+                                }
+                            }
+                        }
+                    }
+                });
+            });
+        }).catch(() => {
+            this.#popup.close();
+            return;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyGaugeChartPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyGaugeChartPopupComponent, isStandalone: true, selector: "bizy-gauge-chart-popup", ngImport: i0, template: '', isInline: true, styles: [":host{display:inline-block;height:min(60rem,90dvh);width:min(60rem,85dvw)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyGaugeChartPopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bizy-gauge-chart-popup', template: '', styles: [":host{display:inline-block;height:min(60rem,90dvh);width:min(60rem,85dvw)}\n"] }]
+        }] });
+
+const DEFAULT_CHART_SIZE$2 = '300px';
+const DEFAULT_DOWNLOAD$2 = {
+    show: true,
+    label: 'Descargar',
+    name: 'Bizy'
+};
+const DEFAULT_EXPAND$1 = {
+    show: true,
+    label: 'Expandir'
+};
+const DEFAULT_TOOLTIP$2 = {
+    show: true
+};
+const DEFAULT_ANGLE = {
+    start: 225,
+    end: -45
+};
+const DEFAULT_LIMIT = {
+    min: 0,
+    max: 1
+};
+class BizyGaugeChartComponent {
+    #elementRef = inject(ElementRef);
+    #document = inject(DOCUMENT);
+    #ref = inject(ChangeDetectorRef);
+    #renderer = inject(Renderer2);
+    #popup = inject(BizyPopupService);
+    resizeRef = null;
+    angle = DEFAULT_ANGLE;
+    limit = DEFAULT_LIMIT;
+    tooltip = DEFAULT_TOOLTIP$2;
+    download = DEFAULT_DOWNLOAD$2;
+    expand = DEFAULT_EXPAND$1;
+    onSelect = new EventEmitter();
+    onDownload = new EventEmitter();
+    #echarts = null;
+    #resizeObserver = null;
+    #afterViewInitSubscription = new Subscription();
+    #resizeSubscription = new Subscription();
+    #chartContainer = null;
+    #resize$ = new Subject();
+    #data = null;
+    getNativeElement = () => this.#elementRef?.nativeElement;
+    set data(data) {
+        if (!data) {
+            this.#deleteChartContainer();
+        }
+        this.#setChartData(data);
+    }
+    async #setChartData(data) {
+        this.#data = data;
+        this.#createChartContainer();
+        if (!this.#chartContainer) {
+            return;
+        }
+        import('echarts').then(echarts => {
+            this.#echarts = echarts.init(this.#chartContainer);
+            const { width, height } = this.#chartContainer.getBoundingClientRect();
+            const base = Math.min(width, height);
+            const backgroundColor = getComputedStyle(this.#elementRef.nativeElement).getPropertyValue('--bizy-gauge-chart-background-color');
+            const progressColor = getComputedStyle(this.#elementRef.nativeElement).getPropertyValue('--bizy-gauge-chart-progress-color');
+            const valueColor = getComputedStyle(this.#elementRef.nativeElement).getPropertyValue('--bizy-gauge-chart-value-color');
+            const textColor = getComputedStyle(this.#elementRef.nativeElement).getPropertyValue('--bizy-gauge-chart-text-color');
+            const anchorColor = getComputedStyle(this.#elementRef.nativeElement).getPropertyValue('--bizy-gauge-chart-anchor-color');
+            const pointerColor = getComputedStyle(this.#elementRef.nativeElement).getPropertyValue('--bizy-gauge-chart-pointer-color');
+            const series = [{
+                    type: 'gauge',
+                    radius: '100%',
+                    progress: {
+                        show: true,
+                        width: Math.round(Math.max(base / 10, 7)),
+                        itemStyle: {
+                            color: progressColor
+                        }
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            width: Math.round(Math.max(base / 10, 7)),
+                            color: [[1, backgroundColor]]
+                        }
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    splitLine: {
+                        show: base > 100,
+                        distance: Math.round(Math.max(base / 30, 10)),
+                        length: Math.round(Math.max(base / 20, 10)),
+                        lineStyle: {
+                            width: 2,
+                            color: textColor
+                        }
+                    },
+                    axisLabel: {
+                        show: base > 100,
+                        distance: Math.round(Math.max(base / 15, 5)) + 3,
+                        color: textColor,
+                        fontSize: Math.round(Math.max(base / 17, 10))
+                    },
+                    startAngle: this.angle.start ?? DEFAULT_ANGLE.start,
+                    endAngle: this.angle.end ?? DEFAULT_ANGLE.end,
+                    anchor: {
+                        show: true,
+                        showAbove: true,
+                        size: Math.round(Math.max(base / 20, 5)),
+                        itemStyle: {
+                            borderWidth: Math.round(Math.max(base / 50, 3)),
+                            borderColor: anchorColor
+                        }
+                    },
+                    pointer: {
+                        show: true,
+                        itemStyle: {
+                            color: pointerColor
+                        }
+                    },
+                    title: {
+                        show: false,
+                    },
+                    detail: {
+                        valueAnimation: true,
+                        fontSize: Math.round(Math.max(base / 8, 7)),
+                        color: valueColor,
+                        formatter: this.#data.formatter ? this.#data.formatter : '{value}',
+                        offsetCenter: [0, '70%']
+                    },
+                    min: this.limit.min ?? DEFAULT_LIMIT.min,
+                    max: this.limit.max ?? DEFAULT_LIMIT.max,
+                    data: this.#data ? [this.#data] : []
+                }];
+            const tooltipTextColor = getComputedStyle(this.#elementRef.nativeElement).getPropertyValue('--bizy-gauge-chart-tooltip-color');
+            const tooltipTextBackgroundColor = getComputedStyle(this.#elementRef.nativeElement).getPropertyValue('--bizy-gauge-chart-tooltip-background-color');
+            const tooltipBorderColor = getComputedStyle(this.#elementRef.nativeElement).getPropertyValue('--bizy-gauge-chart-tooltip-border-color');
+            const toolbox = {
+                show: true,
+                feature: {
+                    mySaveAsImage: {
+                        show: this.download.show ?? DEFAULT_DOWNLOAD$2.show,
+                        icon: 'path://M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z',
+                        title: this.download.label ?? DEFAULT_DOWNLOAD$2.label,
+                        onclick: () => {
+                            setTimeout(() => {
+                                import('html2canvas').then(module => {
+                                    const html2canvas = module.default;
+                                    html2canvas(this.#chartContainer).then(canvas => {
+                                        var link = this.#renderer.createElement('a');
+                                        link.href = canvas.toDataURL('image/png');
+                                        link.download = `${this.download.name ?? DEFAULT_DOWNLOAD$2.name}.png`;
+                                        this.#renderer.appendChild(this.#document.body, link);
+                                        link.click();
+                                        this.#renderer.removeChild(this.#document.body, link);
+                                        this.onDownload.emit();
+                                    });
+                                });
+                            }, 500);
+                        }
+                    },
+                    myExpandChart: {
+                        show: this.expand.show ?? DEFAULT_EXPAND$1.show,
+                        icon: 'path://M264 96L120 96C106.7 96 96 106.7 96 120L96 264C96 273.7 101.8 282.5 110.8 286.2C119.8 289.9 130.1 287.8 137 281L177 241L256 320L177 399L137 359C130.1 352.1 119.8 350.1 110.8 353.8C101.8 357.5 96 366.3 96 376L96 520C96 533.3 106.7 544 120 544L264 544C273.7 544 282.5 538.2 286.2 529.2C289.9 520.2 287.9 509.9 281 503L241 463L320 384L399 463L359 503C352.1 509.9 350.1 520.2 353.8 529.2C357.5 538.2 366.3 544 376 544L520 544C533.3 544 544 533.3 544 520L544 376C544 366.3 538.2 357.5 529.2 353.8C520.2 350.1 509.9 352.1 503 359L463 399L384 320L463 241L503 281C509.9 287.9 520.2 289.9 529.2 286.2C538.2 282.5 544 273.7 544 264L544 120C544 106.7 533.3 96 520 96L376 96C366.3 96 357.5 101.8 353.8 110.8C350.1 119.8 352.2 130.1 359 137L399 177L320 256L241 177L281 137C287.9 130.1 289.9 119.8 286.2 110.8C282.5 101.8 273.7 96 264 96z',
+                        title: this.expand.label ?? DEFAULT_EXPAND$1.label,
+                        onclick: () => {
+                            this.#popup.open({
+                                component: BizyGaugeChartPopupComponent,
+                                data: {
+                                    download: {
+                                        show: this.download?.show ?? DEFAULT_DOWNLOAD$2.show,
+                                        label: this.download?.label ?? DEFAULT_DOWNLOAD$2.label,
+                                        name: this.download?.name ?? DEFAULT_DOWNLOAD$2.name,
+                                    },
+                                    option: this.#echarts.getOption()
+                                }
+                            });
+                        }
+                    }
+                },
+                emphasis: {
+                    iconStyle: {
+                        color: tooltipTextColor,
+                        borderColor: tooltipBorderColor,
+                        borderWidth: 1,
+                        textBackgroundColor: tooltipTextBackgroundColor,
+                        textPadding: 5,
+                    }
+                }
+            };
+            const tooltip = {
+                show: this.tooltip?.show ?? DEFAULT_TOOLTIP$2.show,
+                trigger: 'item',
+                appendToBody: true,
+                formatter: this.tooltip?.formatter
+            };
+            const option = {
+                tooltip,
+                toolbox,
+                series,
+            };
+            this.#echarts.setOption(option);
+            this.#echarts.on('click', params => {
+                this.onSelect.emit(params.name);
+            });
+            this.#resizeSubscription.unsubscribe();
+            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;
+            this.#resizeObserver.observe(resizeRef);
+            this.#resizeSubscription = new Subscription();
+            this.#resizeSubscription.add(this.#resize$.pipe(skip(1), auditTime(300), throttleTime(500)).subscribe(() => {
+                this.#deleteChartContainer();
+                this.#createChartContainer();
+                if (!this.#chartContainer) {
+                    return;
+                }
+                this.#echarts = echarts.init(this.#chartContainer);
+                Promise.resolve().then(() => {
+                    this.#echarts.setOption({ ...option, series: option.series.map(_serie => { return { ..._serie, data: this.#data ? [this.#data] : [] }; }) });
+                    this.#echarts.on('click', params => {
+                        this.onSelect.emit(params.name);
+                    });
+                });
+            }));
+        });
+    }
+    #createChartContainer = () => {
+        if (this.#chartContainer || !this.#elementRef || !this.#elementRef.nativeElement) {
+            return;
+        }
+        let elementWidth = this.#elementRef.nativeElement.offsetWidth;
+        let elementHeight = this.#elementRef.nativeElement.offsetHeight;
+        let minWidth = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-gauge-chart-width');
+        let minHeight = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-gauge-chart-height');
+        const width = minWidth ? minWidth : elementWidth ? `${elementWidth * 0.99}px` : DEFAULT_CHART_SIZE$2;
+        const height = minHeight ? minHeight : elementHeight ? `${elementHeight}px` : DEFAULT_CHART_SIZE$2;
+        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) {
             return;
         }
-        this.opened = false;
-        this.openedChange.emit(this.opened);
-        this.onOpen.emit(this.opened);
+        this.#echarts.clear();
+        this.#renderer.removeChild(this.#elementRef.nativeElement, this.#chartContainer);
+        this.#chartContainer = null;
         this.#ref.detectChanges();
     };
-    setTouched(touched) {
-        if (this.bizyInput) {
-            this.bizyInput.setTouched(touched);
-            this.#ref.detectChanges();
+    #getClosestCssVariable = (element, cssVariable) => {
+        while (element) {
+            const value = getComputedStyle(element).getPropertyValue(cssVariable).trim();
+            if (value) {
+                return value;
+            }
+            element = element.parentElement;
         }
-    }
-    getNativeElement = () => this.#elementRef?.nativeElement;
+        const rootValue = getComputedStyle(document.documentElement).getPropertyValue(cssVariable).trim();
+        return rootValue || null;
+    };
     ngOnDestroy() {
-        this.#subscription.unsubscribe();
-        this.#contentChildrenSubscription.unsubscribe();
+        this.#afterViewInitSubscription.unsubscribe();
+        this.#resizeSubscription.unsubscribe();
+        if (this.#resizeObserver) {
+            this.#resizeObserver.disconnect();
+        }
+        if (this.#echarts) {
+            this.#echarts.clear();
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: BizySelectComponent, isStandalone: true, selector: "bizy-select", inputs: { id: "id", disabled: "disabled", readonly: "readonly", placeholder: "placeholder", customClass: "customClass", opened: "opened" }, outputs: { openedChange: "openedChange", onSelect: "onSelect", onOpen: "onOpen" }, queries: [{ propertyName: "options", predicate: BizySelectOptionComponent }], viewQueries: [{ propertyName: "templatePortalContent", first: true, predicate: ["templatePortalContent"], descendants: true }, { propertyName: "bizyInput", first: true, predicate: ["bizyInput"], descendants: true }], ngImport: i0, template: "<bizy-input\n  #bizyInput\n  [readonly]=\"true\"\n  [disabled]=\"disabled\"\n  [id]=\"id\"\n  [placeholder]=\"placeholder\"\n  [value]=\"_optionValue\"\n  [ngClass]=\"{'bizy-select--readonly': readonly}\"\n  (onSelect)=\"_onOpen($event); bizyInput?.setTouched(true)\"\n  (onEnter)=\"_onOpen($event); bizyInput?.setTouched(true)\"\n  class=\"bizy-select {{customClass}}\"\n  cdkOverlayOrigin\n  #bizySelectTrigger=\"cdkOverlayOrigin\">\n\n  @if (!readonly) {\n    <svg\n      slot=\"suffix\"\n      id=\"bizy-select-arrow\"\n      class=\"bizy-select__arrow\"\n      [ngClass]=\"{'bizy-select__arrow--opened': opened}\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 320 512\">\n      <path d=\"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\"/>\n    </svg>\n  }\n\n  <ng-container slot=\"header\">\n    <ng-content select=\"[slot=header]\"></ng-content>\n  </ng-container>\n\n  <ng-container slot=\"prefix\">\n    <ng-content select=\"[slot=prefix]\"></ng-content>\n  </ng-container>\n\n</bizy-input>\n\n@if (touched) {\n  <span class=\"bizy-select__errors\">\n    <ng-content select=\"[slot=error]\"></ng-content>\n  </span>\n}\n\n<ng-template #templatePortalContent>\n  <ng-content select=\"bizy-select-option\"></ng-content>\n</ng-template>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayMinWidth]=\"bizyInput.getWidth()\"\n  [cdkConnectedOverlayOrigin]=\"bizySelectTrigger\"\n  (overlayOutsideClick)=\"close($event, bizyInput)\"\n  [cdkConnectedOverlayOpen]=\"opened\">\n\n  <span class=\"bizy-select__options\">\n\n    <span class=\"bizy-select__options__search\">\n      <ng-content select=\"bizy-input\"></ng-content>\n    </span>\n\n    <ng-template [cdkPortalOutlet]=\"templatePortal\"></ng-template>\n\n  </span>\n\n</ng-template>\n", styles: [":host{font-size:1rem;width:var(--bizy-select-width);min-width:var(--bizy-select-min-width);max-width:var(--bizy-select-max-width);display:flex;flex-direction:column;row-gap:.3rem;--bizy-input-focus-color: transparent}:host:has(>.bizy-select__errors:not(:empty)) ::ng-deep .bizy-input__bottom-line{background-color:var(--bizy-input-invalid-color)!important;visibility:visible!important}:host:has(>.bizy-select__errors:not(:empty)) ::ng-deep .bizy-input__content__input{color:var(--bizy-input-invalid-color)!important}.bizy-select{--bizy-input-cursor: pointer;--bizy-input-background-color: var(--bizy-select-background-color);--bizy-input-color: var(--bizy-select-color)}.bizy-select--readonly{--bizy-input-cursor: default}.bizy-select__arrow{height:var(--bizy-select-arrow-height);pointer-events:none;display:block;transition:transform .2s ease;fill:var(--bizy-select-color)}.bizy-select__arrow--opened{transform:rotate(180deg)}.bizy-select__options{background-color:var(--bizy-select-background-color);display:flex;min-width:fit-content;width:100%;flex-direction:column;box-shadow:0 7px 14px #32325d1a,0 3px 6px #00000014;max-height:var(--bizy-select-height);overflow-y:auto;overflow-x:hidden;position:relative}.bizy-select__options::-webkit-scrollbar{width:.5rem;height:.5rem}.bizy-select__options::-webkit-scrollbar-thumb{border-radius:1rem;background-color:var(--bizy-select-scroll-bar-color)}.bizy-select__options::-webkit-scrollbar-thumb:hover{background-color:var(--bizy-select-scroll-bar-hover-color)}.bizy-select__options::-webkit-scrollbar-button{height:1rem}.bizy-select__options__search{position:sticky;z-index:1;top:0}::ng-deep .bizy-select__options__search{--bizy-input-width: auto;--bizy-input-background-color: #fff;--bizy-input-min-width: var(--bizy-select-min-width);--bizy-input-max-width: auto;margin-bottom:.3rem}.bizy-select__errors:empty{display:none!important}::ng-deep .bizy-select__errors *{color:var(--bizy-input-invalid-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BizyInputComponent, selector: "bizy-input", inputs: ["id", "name", "type", "customClass", "placeholder", "debounceTime", "rows", "disabled", "readonly", "autofocus", "value"], outputs: ["valueChange", "onChange", "onEnter", "onBackspace", "onSelect", "onBlur", "onFocus"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.ɵɵCdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyGaugeChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyGaugeChartComponent, isStandalone: true, selector: "bizy-gauge-chart", inputs: { resizeRef: "resizeRef", angle: "angle", limit: "limit", tooltip: "tooltip", download: "download", expand: "expand", data: "data" }, outputs: { onSelect: "onSelect", onDownload: "onDownload" }, ngImport: i0, template: '', isInline: true, styles: [":host{display:flex;justify-content:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizySelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyGaugeChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizy-select', imports: [CommonModule, BizyInputComponent, OverlayModule, PortalModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bizy-input\n  #bizyInput\n  [readonly]=\"true\"\n  [disabled]=\"disabled\"\n  [id]=\"id\"\n  [placeholder]=\"placeholder\"\n  [value]=\"_optionValue\"\n  [ngClass]=\"{'bizy-select--readonly': readonly}\"\n  (onSelect)=\"_onOpen($event); bizyInput?.setTouched(true)\"\n  (onEnter)=\"_onOpen($event); bizyInput?.setTouched(true)\"\n  class=\"bizy-select {{customClass}}\"\n  cdkOverlayOrigin\n  #bizySelectTrigger=\"cdkOverlayOrigin\">\n\n  @if (!readonly) {\n    <svg\n      slot=\"suffix\"\n      id=\"bizy-select-arrow\"\n      class=\"bizy-select__arrow\"\n      [ngClass]=\"{'bizy-select__arrow--opened': opened}\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 320 512\">\n      <path d=\"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\"/>\n    </svg>\n  }\n\n  <ng-container slot=\"header\">\n    <ng-content select=\"[slot=header]\"></ng-content>\n  </ng-container>\n\n  <ng-container slot=\"prefix\">\n    <ng-content select=\"[slot=prefix]\"></ng-content>\n  </ng-container>\n\n</bizy-input>\n\n@if (touched) {\n  <span class=\"bizy-select__errors\">\n    <ng-content select=\"[slot=error]\"></ng-content>\n  </span>\n}\n\n<ng-template #templatePortalContent>\n  <ng-content select=\"bizy-select-option\"></ng-content>\n</ng-template>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayMinWidth]=\"bizyInput.getWidth()\"\n  [cdkConnectedOverlayOrigin]=\"bizySelectTrigger\"\n  (overlayOutsideClick)=\"close($event, bizyInput)\"\n  [cdkConnectedOverlayOpen]=\"opened\">\n\n  <span class=\"bizy-select__options\">\n\n    <span class=\"bizy-select__options__search\">\n      <ng-content select=\"bizy-input\"></ng-content>\n    </span>\n\n    <ng-template [cdkPortalOutlet]=\"templatePortal\"></ng-template>\n\n  </span>\n\n</ng-template>\n", styles: [":host{font-size:1rem;width:var(--bizy-select-width);min-width:var(--bizy-select-min-width);max-width:var(--bizy-select-max-width);display:flex;flex-direction:column;row-gap:.3rem;--bizy-input-focus-color: transparent}:host:has(>.bizy-select__errors:not(:empty)) ::ng-deep .bizy-input__bottom-line{background-color:var(--bizy-input-invalid-color)!important;visibility:visible!important}:host:has(>.bizy-select__errors:not(:empty)) ::ng-deep .bizy-input__content__input{color:var(--bizy-input-invalid-color)!important}.bizy-select{--bizy-input-cursor: pointer;--bizy-input-background-color: var(--bizy-select-background-color);--bizy-input-color: var(--bizy-select-color)}.bizy-select--readonly{--bizy-input-cursor: default}.bizy-select__arrow{height:var(--bizy-select-arrow-height);pointer-events:none;display:block;transition:transform .2s ease;fill:var(--bizy-select-color)}.bizy-select__arrow--opened{transform:rotate(180deg)}.bizy-select__options{background-color:var(--bizy-select-background-color);display:flex;min-width:fit-content;width:100%;flex-direction:column;box-shadow:0 7px 14px #32325d1a,0 3px 6px #00000014;max-height:var(--bizy-select-height);overflow-y:auto;overflow-x:hidden;position:relative}.bizy-select__options::-webkit-scrollbar{width:.5rem;height:.5rem}.bizy-select__options::-webkit-scrollbar-thumb{border-radius:1rem;background-color:var(--bizy-select-scroll-bar-color)}.bizy-select__options::-webkit-scrollbar-thumb:hover{background-color:var(--bizy-select-scroll-bar-hover-color)}.bizy-select__options::-webkit-scrollbar-button{height:1rem}.bizy-select__options__search{position:sticky;z-index:1;top:0}::ng-deep .bizy-select__options__search{--bizy-input-width: auto;--bizy-input-background-color: #fff;--bizy-input-min-width: var(--bizy-select-min-width);--bizy-input-max-width: auto;margin-bottom:.3rem}.bizy-select__errors:empty{display:none!important}::ng-deep .bizy-select__errors *{color:var(--bizy-input-invalid-color)!important}\n"] }]
-        }], propDecorators: { templatePortalContent: [{
-                type: ViewChild,
-                args: ['templatePortalContent']
-            }], options: [{
-                type: ContentChildren,
-                args: [BizySelectOptionComponent]
-            }], bizyInput: [{
-                type: ViewChild,
-                args: ['bizyInput']
-            }], id: [{
+            args: [{ selector: 'bizy-gauge-chart', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;justify-content:center}\n"] }]
+        }], propDecorators: { resizeRef: [{
                 type: Input
-            }], disabled: [{
+            }], angle: [{
                 type: Input
-            }], readonly: [{
+            }], limit: [{
                 type: Input
-            }], placeholder: [{
+            }], tooltip: [{
                 type: Input
-            }], customClass: [{
+            }], download: [{
                 type: Input
-            }], opened: [{
+            }], expand: [{
                 type: Input
-            }], openedChange: [{
-                type: Output
             }], onSelect: [{
                 type: Output
-            }], onOpen: [{
+            }], onDownload: [{
                 type: Output
-            }] } });
-
-class BizyFormComponent {
-    #elementRef = inject(ElementRef);
-    inputs;
-    selects;
-    datePickers;
-    id = `bizy-form-${Math.random()}`;
-    customClass = '';
-    onSubmit(event) {
-        this.setTouched();
-        event.preventDefault();
-    }
-    setTouched = () => {
-        if (this.inputs.length > 0) {
-            this.inputs.forEach(component => {
-                component.setTouched(true);
-            });
-        }
-        if (this.selects.length > 0) {
-            this.selects.forEach(component => {
-                component.setTouched(true);
-            });
-        }
-        if (this.datePickers.length > 0) {
-            this.datePickers.forEach(component => {
-                component.setTouched(true);
-            });
-        }
-    };
-    getNativeElement = () => this.#elementRef?.nativeElement;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyFormComponent, isStandalone: true, selector: "bizy-form", inputs: { id: "id", customClass: "customClass" }, queries: [{ propertyName: "inputs", predicate: BizyInputComponent, descendants: true }, { propertyName: "selects", predicate: BizySelectComponent, descendants: true }, { propertyName: "datePickers", predicate: BizyDatePickerComponent, descendants: true }], ngImport: i0, template: "<form class=\"bizy-form {{customClass}}\" [id]=\"id\" (ngSubmit)=\"onSubmit($event)\">\n    <ng-content></ng-content>\n</form>", styles: [":host{font-size:1rem;max-width:var(--bizy-form-max-width)}.bizy-form{max-width:inherit;display:flex;flex-direction:column;row-gap:var(--bizy-form-row-gap);--bizy-input-max-width: 100%;--bizy-select-max-width: 100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bizy-form', imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"bizy-form {{customClass}}\" [id]=\"id\" (ngSubmit)=\"onSubmit($event)\">\n    <ng-content></ng-content>\n</form>", styles: [":host{font-size:1rem;max-width:var(--bizy-form-max-width)}.bizy-form{max-width:inherit;display:flex;flex-direction:column;row-gap:var(--bizy-form-row-gap);--bizy-input-max-width: 100%;--bizy-select-max-width: 100%}\n"] }]
-        }], propDecorators: { inputs: [{
-                type: ContentChildren,
-                args: [BizyInputComponent, { descendants: true }]
-            }], selects: [{
-                type: ContentChildren,
-                args: [BizySelectComponent, { descendants: true }]
-            }], datePickers: [{
-                type: ContentChildren,
-                args: [BizyDatePickerComponent, { descendants: true }]
-            }], id: [{
-                type: Input
-            }], customClass: [{
+            }], data: [{
                 type: Input
             }] } });
 
 const COMPONENTS$k = [
-    BizyFormComponent,
+    BizyGaugeChartComponent,
+    BizyGaugeChartPopupComponent
 ];
-class BizyFormModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: BizyFormModule, imports: [BizyFormComponent], exports: [BizyFormComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyFormModule, imports: [COMPONENTS$k] });
+class BizyGaugeChartModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyGaugeChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: BizyGaugeChartModule, imports: [BizyGaugeChartComponent,
+            BizyGaugeChartPopupComponent], exports: [BizyGaugeChartComponent,
+            BizyGaugeChartPopupComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyGaugeChartModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyGaugeChartModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: COMPONENTS$k,
@@ -13994,20 +14812,32 @@ const DEFAULT_EXPAND = {
 const DEFAULT_TOOLTIP = {
     show: true
 };
+const DEFAULT_LEGEND = {
+    show: false,
+    orient: 'vertical',
+    position: {
+        x: 'auto',
+        y: 'auto'
+    }
+};
+const DEFAULT_LABEL = {
+    show: true,
+    overflow: 'break',
+    line: true
+};
 class BizyPieChartComponent {
     #elementRef = inject(ElementRef);
-    #document = inject(DOCUMENT$1);
+    #document = inject(DOCUMENT);
     #ref = inject(ChangeDetectorRef);
     #renderer = inject(Renderer2);
     #popup = inject(BizyPopupService);
     resizeRef = null;
-    type = 'pie';
     centerLabel = null;
     tooltip = DEFAULT_TOOLTIP;
     legend = null;
     download = DEFAULT_DOWNLOAD;
     expand = DEFAULT_EXPAND;
-    label = null;
+    label = DEFAULT_LABEL;
     onSelect = new EventEmitter();
     onDownload = new EventEmitter();
     #echarts = null;
@@ -14036,190 +14866,182 @@ class BizyPieChartComponent {
     }
     async #setChartData(data) {
         this.#afterViewInitSubscription.add(this.#afterViewInit.pipe(filter$1(value => value === true), take(1)).subscribe(() => {
-            this.#createChartContainer();
-            if (!this.#chartContainer) {
-                return;
-            }
-            if (data && data.length > 0 && data[0] !== 0) {
-                this.#data = [];
-                data.forEach(_d => {
-                    if (!_d.value) {
-                        _d.value = 0;
-                    }
-                    if (!_d.name) {
-                        _d.name = '---';
-                    }
-                    const itemStyle = _d.color ? { color: _d.color } : {};
-                    this.#data.push({
-                        name: _d.name,
-                        value: _d.value,
-                        itemStyle
+            /**
+             * setTimeout fix angular render problem
+             */
+            setTimeout(() => {
+                this.#createChartContainer();
+                if (!this.#chartContainer) {
+                    return;
+                }
+                if (data && data.length > 0 && data[0] !== 0) {
+                    this.#data = [];
+                    data.forEach(_d => {
+                        if (!_d.value) {
+                            _d.value = 0;
+                        }
+                        if (!_d.name) {
+                            _d.name = '---';
+                        }
+                        const itemStyle = _d.color ? { color: _d.color } : {};
+                        this.#data.push({
+                            name: _d.name,
+                            value: _d.value,
+                            itemStyle,
+                            metadata: _d.metadata
+                        });
                     });
-                });
-            }
-            else {
-                this.#data = EMPTY_CHART;
-            }
-            const itemStyle = this.type === 'donut' ?
-                {
-                    borderRadius: 10,
-                    borderColor: '#fff',
-                    borderWidth: 2
-                } : {};
-            const label = this.label ?
-                {
-                    show: this.label.show ?? true,
-                    overflow: this.label.overflow ?? 'break',
+                }
+                else {
+                    this.#data = EMPTY_CHART;
+                }
+                const label = {
+                    show: this.label?.show ?? DEFAULT_LABEL.show,
+                    overflow: this.label?.overflow ?? DEFAULT_LABEL.overflow,
                     formatter: this.label?.formatter
-                } :
-                this.type === 'pie' ?
-                    {
-                        show: true
-                    } :
-                    {
-                        show: false,
-                        position: 'center'
-                    };
-            const labelLine = {
-                show: this.label?.line ?? true
-            };
-            const series = [{
-                    type: 'pie',
-                    radius: this.type === 'pie' ? '50%' : ['50%', '70%'],
-                    center: ['50%', '50%'],
-                    data: this.#data,
-                    itemStyle,
-                    label,
-                    labelLine
-                }];
-            const textColor = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-pie-chart-tooltip-color');
-            const textBackgroundColor = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-pie-chart-tooltip-background-color');
-            const borderColor = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-pie-chart-tooltip-border-color');
-            const toolbox = {
-                show: true,
-                feature: {
-                    mySaveAsImage: {
-                        show: this.download.show ?? DEFAULT_DOWNLOAD.show,
-                        icon: 'path://M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z',
-                        title: this.download.label ?? DEFAULT_DOWNLOAD.label,
-                        onclick: () => {
-                            setTimeout(() => {
-                                import('html2canvas').then(module => {
-                                    const html2canvas = module.default;
-                                    html2canvas(this.#chartContainer).then(canvas => {
-                                        var link = this.#renderer.createElement('a');
-                                        link.href = canvas.toDataURL('image/png');
-                                        link.download = `${this.download.name ?? DEFAULT_DOWNLOAD.name}.png`;
-                                        this.#renderer.appendChild(this.#document.body, link);
-                                        link.click();
-                                        this.#renderer.removeChild(this.#document.body, link);
-                                        this.onDownload.emit();
+                };
+                const labelLine = {
+                    show: this.label?.line ?? true
+                };
+                const series = [{
+                        type: 'pie',
+                        radius: '50%',
+                        center: ['50%', '50%'],
+                        data: this.#data,
+                        label,
+                        labelLine
+                    }];
+                const textColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-pie-chart-tooltip-color');
+                const textBackgroundColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-pie-chart-tooltip-background-color');
+                const borderColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-pie-chart-tooltip-border-color');
+                const toolbox = {
+                    show: true,
+                    feature: {
+                        mySaveAsImage: {
+                            show: this.download.show ?? DEFAULT_DOWNLOAD.show,
+                            icon: 'path://M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z',
+                            title: this.download.label ?? DEFAULT_DOWNLOAD.label,
+                            onclick: () => {
+                                setTimeout(() => {
+                                    import('html2canvas').then(module => {
+                                        const html2canvas = module.default;
+                                        html2canvas(this.#chartContainer).then(canvas => {
+                                            var link = this.#renderer.createElement('a');
+                                            link.href = canvas.toDataURL('image/png');
+                                            link.download = `${this.download.name ?? DEFAULT_DOWNLOAD.name}.png`;
+                                            this.#renderer.appendChild(this.#document.body, link);
+                                            link.click();
+                                            this.#renderer.removeChild(this.#document.body, link);
+                                            this.onDownload.emit();
+                                        });
                                     });
+                                }, 500);
+                            }
+                        },
+                        myExpandChart: {
+                            show: this.expand.show ?? DEFAULT_EXPAND.show,
+                            icon: 'path://M264 96L120 96C106.7 96 96 106.7 96 120L96 264C96 273.7 101.8 282.5 110.8 286.2C119.8 289.9 130.1 287.8 137 281L177 241L256 320L177 399L137 359C130.1 352.1 119.8 350.1 110.8 353.8C101.8 357.5 96 366.3 96 376L96 520C96 533.3 106.7 544 120 544L264 544C273.7 544 282.5 538.2 286.2 529.2C289.9 520.2 287.9 509.9 281 503L241 463L320 384L399 463L359 503C352.1 509.9 350.1 520.2 353.8 529.2C357.5 538.2 366.3 544 376 544L520 544C533.3 544 544 533.3 544 520L544 376C544 366.3 538.2 357.5 529.2 353.8C520.2 350.1 509.9 352.1 503 359L463 399L384 320L463 241L503 281C509.9 287.9 520.2 289.9 529.2 286.2C538.2 282.5 544 273.7 544 264L544 120C544 106.7 533.3 96 520 96L376 96C366.3 96 357.5 101.8 353.8 110.8C350.1 119.8 352.2 130.1 359 137L399 177L320 256L241 177L281 137C287.9 130.1 289.9 119.8 286.2 110.8C282.5 101.8 273.7 96 264 96z',
+                            title: this.expand.label ?? DEFAULT_EXPAND.label,
+                            onclick: () => {
+                                this.#popup.open({
+                                    component: BizyPieChartPopupComponent,
+                                    data: {
+                                        download: {
+                                            show: this.download?.show ?? DEFAULT_DOWNLOAD.show,
+                                            label: this.download?.label ?? DEFAULT_DOWNLOAD.label,
+                                            name: this.download?.name ?? DEFAULT_DOWNLOAD.name,
+                                        },
+                                        option: this.#echarts.getOption()
+                                    }
                                 });
-                            }, 500);
+                            }
                         }
                     },
-                    myExpandChart: {
-                        show: this.expand.show ?? DEFAULT_EXPAND.show,
-                        icon: 'path://M264 96L120 96C106.7 96 96 106.7 96 120L96 264C96 273.7 101.8 282.5 110.8 286.2C119.8 289.9 130.1 287.8 137 281L177 241L256 320L177 399L137 359C130.1 352.1 119.8 350.1 110.8 353.8C101.8 357.5 96 366.3 96 376L96 520C96 533.3 106.7 544 120 544L264 544C273.7 544 282.5 538.2 286.2 529.2C289.9 520.2 287.9 509.9 281 503L241 463L320 384L399 463L359 503C352.1 509.9 350.1 520.2 353.8 529.2C357.5 538.2 366.3 544 376 544L520 544C533.3 544 544 533.3 544 520L544 376C544 366.3 538.2 357.5 529.2 353.8C520.2 350.1 509.9 352.1 503 359L463 399L384 320L463 241L503 281C509.9 287.9 520.2 289.9 529.2 286.2C538.2 282.5 544 273.7 544 264L544 120C544 106.7 533.3 96 520 96L376 96C366.3 96 357.5 101.8 353.8 110.8C350.1 119.8 352.2 130.1 359 137L399 177L320 256L241 177L281 137C287.9 130.1 289.9 119.8 286.2 110.8C282.5 101.8 273.7 96 264 96z',
-                        title: this.expand.label ?? DEFAULT_EXPAND.label,
-                        onclick: () => {
-                            this.#popup.open({
-                                component: BizyPieChartPopupComponent,
-                                data: {
-                                    download: {
-                                        show: this.download?.show ?? DEFAULT_DOWNLOAD.show,
-                                        label: this.download?.label ?? DEFAULT_DOWNLOAD.label,
-                                        name: this.download?.name ?? DEFAULT_DOWNLOAD.name,
-                                    },
-                                    option: this.#echarts.getOption()
-                                }
-                            });
+                    emphasis: {
+                        iconStyle: {
+                            color: textColor,
+                            borderColor,
+                            borderWidth: 1,
+                            textBackgroundColor,
+                            textPadding: 5,
                         }
                     }
-                },
-                emphasis: {
-                    iconStyle: {
-                        color: textColor,
-                        borderColor,
-                        borderWidth: 1,
-                        textBackgroundColor,
-                        textPadding: 5,
-                    }
-                }
-            };
-            const tooltip = {
-                show: this.tooltip?.show ?? DEFAULT_TOOLTIP.show,
-                trigger: 'item',
-                appendToBody: true,
-                formatter: this.tooltip?.formatter
-            };
-            let legend = {};
-            if (this.legend) {
-                legend.show = this.legend.show;
-                legend.orient = this.legend.orient;
-                legend.left = this.legend.position ? this.legend.position.x : 'auto';
-                legend.top = this.legend.position ? this.legend.position.y : 'auto';
-            }
-            else {
-                legend = this.type === 'pie' ? { show: false } : {
-                    show: true,
-                    orient: 'vertical',
-                    left: 'left'
                 };
-            }
-            let graphic;
-            if (this.centerLabel) {
-                let centerLabelColor = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-pie-chart-center-label-color');
-                let { width, height } = this.#chartContainer.getBoundingClientRect();
-                let base = Math.min(width, height);
-                let fontSize = base / 6;
-                graphic = {
-                    type: 'text',
-                    left: 'center',
-                    top: 'center',
-                    style: {
-                        text: String(this.centerLabel.value),
-                        fill: this.centerLabel.color || centerLabelColor,
-                        textAlign: 'center',
-                        fontSize,
-                        fontWeight: 'bold'
-                    }
+                const tooltip = {
+                    show: this.tooltip?.show ?? DEFAULT_TOOLTIP.show,
+                    trigger: 'item',
+                    appendToBody: true,
+                    formatter: this.tooltip?.formatter
                 };
-            }
-            const option = {
-                tooltip,
-                toolbox,
-                legend,
-                series,
-                graphic
-            };
-            import('echarts').then(echarts => {
-                this.#echarts = echarts.init(this.#chartContainer);
-                Promise.resolve().then(() => {
-                    this.#echarts.setOption(option);
-                    this.#echarts.on('click', params => {
-                        this.onSelect.emit(params.name);
-                    });
-                    this.#resizeSubscription.unsubscribe();
-                    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;
-                    this.#resizeObserver.observe(resizeRef);
-                    this.#resizeSubscription = new Subscription();
-                    this.#resizeSubscription.add(this.#resize$.pipe(skip(1), auditTime(300), throttleTime(500)).subscribe(() => {
-                        this.#deleteChartContainer();
-                        this.#createChartContainer();
-                        if (!this.#chartContainer) {
-                            return;
+                let legend = {
+                    show: this.legend?.show ?? DEFAULT_LEGEND.show,
+                    orient: this.legend?.orient ?? DEFAULT_LEGEND.orient,
+                    left: this.legend?.position ? this.legend?.position.x : DEFAULT_LEGEND.position.x,
+                    top: this.legend?.position ? this.legend?.position.y : DEFAULT_LEGEND.position.y,
+                };
+                let graphic;
+                if (this.centerLabel) {
+                    let centerLabelColor = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-pie-chart-center-label-color');
+                    let { width, height } = this.#chartContainer.getBoundingClientRect();
+                    let base = Math.min(width, height);
+                    let fontSize = base / 6;
+                    graphic = {
+                        type: 'text',
+                        left: 'center',
+                        top: 'center',
+                        style: {
+                            text: this.centerLabel,
+                            fill: centerLabelColor,
+                            textAlign: 'center',
+                            fontSize,
+                            fontWeight: 'bold'
                         }
-                        this.#echarts = echarts.init(this.#chartContainer);
-                        Promise.resolve().then(() => {
-                            this.#echarts.setOption({ ...option, series: option.series.map(_serie => { return { ..._serie, data: this.#data }; }) });
-                            this.#echarts.on('click', params => {
-                                this.onSelect.emit(params.name);
+                    };
+                }
+                const option = {
+                    tooltip,
+                    toolbox,
+                    legend,
+                    series,
+                    graphic
+                };
+                import('echarts').then(echarts => {
+                    this.#echarts = echarts.init(this.#chartContainer);
+                    Promise.resolve().then(() => {
+                        this.#echarts.setOption(option);
+                        this.#echarts.on('click', (params) => {
+                            this.onSelect.emit({
+                                name: params.data.name,
+                                value: params.data.value,
+                                color: params.data.itemStyle.color,
+                                metadata: params.data.metadata || {}
                             });
                         });
-                    }));
+                        this.#resizeSubscription.unsubscribe();
+                        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;
+                        this.#resizeObserver.observe(resizeRef);
+                        this.#resizeSubscription = new Subscription();
+                        this.#resizeSubscription.add(this.#resize$.pipe(skip(1), auditTime(300), throttleTime(500)).subscribe(() => {
+                            this.#deleteChartContainer();
+                            this.#createChartContainer();
+                            if (!this.#chartContainer) {
+                                return;
+                            }
+                            this.#echarts = echarts.init(this.#chartContainer);
+                            Promise.resolve().then(() => {
+                                this.#echarts.setOption({ ...option, series: option.series.map(_serie => { return { ..._serie, data: this.#data }; }) });
+                                this.#echarts.on('click', (params) => {
+                                    this.onSelect.emit({
+                                        name: params.data.name,
+                                        value: params.data.value,
+                                        color: params.data.itemStyle.color,
+                                        metadata: params.data.metadata || {}
+                                    });
+                                });
+                            });
+                        }));
+                    });
                 });
             });
         }));
@@ -14232,7 +15054,7 @@ class BizyPieChartComponent {
         let elementHeight = this.#elementRef.nativeElement.offsetHeight;
         let minWidth = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-pie-chart-width');
         let minHeight = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-pie-chart-height');
-        const width = minWidth ? minWidth : elementWidth ? `${elementWidth}px` : DEFAULT_CHART_SIZE;
+        const width = minWidth ? minWidth : elementWidth ? `${elementWidth * 0.99}px` : DEFAULT_CHART_SIZE;
         const height = minHeight ? minHeight : elementHeight ? `${elementHeight}px` : DEFAULT_CHART_SIZE;
         this.#chartContainer = this.#renderer.createElement('div');
         this.#renderer.setStyle(this.#chartContainer, 'width', width);
@@ -14271,15 +15093,13 @@ class BizyPieChartComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyPieChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyPieChartComponent, isStandalone: true, selector: "bizy-pie-chart", inputs: { resizeRef: "resizeRef", type: "type", centerLabel: "centerLabel", tooltip: "tooltip", legend: "legend", download: "download", expand: "expand", label: "label", data: "data" }, outputs: { onSelect: "onSelect", onDownload: "onDownload" }, ngImport: i0, template: '', isInline: true, styles: [":host{display:flex;justify-content:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyPieChartComponent, isStandalone: true, selector: "bizy-pie-chart", inputs: { resizeRef: "resizeRef", centerLabel: "centerLabel", tooltip: "tooltip", legend: "legend", download: "download", expand: "expand", label: "label", data: "data" }, outputs: { onSelect: "onSelect", onDownload: "onDownload" }, ngImport: i0, template: '', isInline: true, styles: [":host{display:flex;justify-content:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyPieChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizy-pie-chart', template: '', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;justify-content:center}\n"] }]
+            args: [{ selector: 'bizy-pie-chart', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;justify-content:center}\n"] }]
         }], propDecorators: { resizeRef: [{
                 type: Input
-            }], type: [{
-                type: Input
             }], centerLabel: [{
                 type: Input
             }], tooltip: [{
@@ -17600,5 +18420,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BIZY_ANIMATION, BIZY_CALENDAR_DAY, BIZY_CALENDAR_EVENT_ACTION, BIZY_CALENDAR_LANGUAGE, BIZY_CALENDAR_MODE, BIZY_FORMAT_SECONDS_FORMAT, BIZY_FORMAT_SECONDS_LANGUAGE, BIZY_SKELETON_SHAPE, BIZY_TAG_TYPE, BizyAccordionComponent, BizyAccordionModule, BizyAnimationService, BizyAudioPlayerComponent, BizyAudioPlayerFormatSecondsPipe, BizyAudioPlayerModule, BizyAudioRecorderComponent, BizyAudioRecorderModule, BizyAutoFocusDirective, BizyAveragePipe, BizyBarLineChartComponent, BizyBarLineChartModule, BizyBarLineChartPopupComponent, BizyBreadcrumbComponent, BizyBreadcrumbModule, BizyButtonComponent, BizyButtonModule, BizyCacheService, BizyCalendarComponent, BizyCalendarModule, BizyCardComponent, BizyCardModule, BizyCheckboxComponent, BizyCheckboxModule, BizyContentComponent, BizyContentModule, BizyCopyToClipboardDirective, BizyCopyToClipboardService, BizyCurrencyFormatDirective, BizyDatePickerComponent, BizyDatePickerModule, BizyDeviceService, BizyDirectivesModule, BizyEnumToArrayPipe, BizyExportToCSVService, BizyExtractNumbersPipe, BizyFileUploaderComponent, BizyFileUploaderModule, BizyFileUploaderService, BizyFilterComponent, BizyFilterContentComponent, BizyFilterModule, BizyFilterPipe, BizyFilterSectionCheckboxOptionComponent, BizyFilterSectionComponent, BizyFilterSectionRangeOptionComponent, BizyFilterSectionSearchOptionComponent, BizyFilterSectionsComponent, BizyFormComponent, BizyFormModule, BizyFormatSecondsPipe, BizyFormatSecondsService, BizyFullScreenPopupWrapperComponent, BizyGridComponent, BizyGridForDirective, BizyGridModule, BizyGridRowComponent, BizyHeatMapChartComponent, BizyHeatMapChartModule, BizyInputComponent, BizyInputModule, BizyInputOptionComponent, BizyKeyboardService, BizyListComponent, BizyListModule, BizyLoadingDirective, BizyLogService, BizyLongPressDirective, BizyMenuBarComponent, BizyMenuBarModule, BizyMenuBarOptionComponent, BizyMenuComponent, BizyMenuModule, BizyMenuOptionComponent, BizyMenuTitleComponent, BizyOnlyNumbersDirective, BizyOnlyPhoneDigitsDirective, BizyOrderByPipe, BizyPieChartComponent, BizyPieChartModule, BizyPieChartPopupComponent, BizyPipesModule, BizyPopupModule, BizyPopupService, BizyPopupWrapperComponent, BizyProgressBarComponent, BizyProgressBarModule, BizyRadioComponent, BizyRadioModule, BizyRangeFilterPipe, BizyReducePipe, BizyReloadDirective, BizyRepeatPipe, BizyRoundPipe, BizyRouterService, BizySafePipe, BizySearchPipe, BizySectionCenterComponent, BizySectionComponent, BizySectionEndComponent, BizySectionModule, BizySectionStartComponent, BizySelectComponent, BizySelectModule, BizySelectOptionComponent, BizyServicesModule, BizySetToArrayPipe, BizySidebarComponent, BizySidebarFloatingOptionComponent, BizySidebarFloatingOptionTitleComponent, BizySidebarModule, BizySidebarOptionComponent, BizySkeletonComponent, BizySkeletonModule, BizySliderComponent, BizySliderModule, BizyStorageService, BizyTabComponent, BizyTableColumnArrowsComponent, BizyTableColumnComponent, BizyTableColumnFixedDirective, BizyTableComponent, BizyTableFooterComponent, BizyTableHeaderComponent, BizyTableModule, BizyTableRowComponent, BizyTableRowExpandContentComponent, BizyTableScrollingComponent, BizyTableScrollingDirective, BizyTabsComponent, BizyTabsModule, BizyTagComponent, BizyTagModule, BizyTextEllipsisDirective, BizyTimelineComponent, BizyTimelineEventComponent, BizyTimelineModule, BizyToastModule, BizyToastService, BizyToastWrapperComponent, BizyToggleComponent, BizyToggleModule, BizyToolbarComponent, BizyToolbarModule, BizyTooltipDirective, BizyTrackByIdDirective, BizyTranslateModule, BizyTranslatePipe, BizyTranslateService, BizyUniquePipe, BizyValidatorService, BizyViewportService, LANGUAGE, LOADING_TYPE, MIME_TYPE, POPUP_PLACEMENT };
+export { BIZY_ANIMATION, BIZY_CALENDAR_DAY, BIZY_CALENDAR_EVENT_ACTION, BIZY_CALENDAR_LANGUAGE, BIZY_CALENDAR_MODE, BIZY_FORMAT_SECONDS_FORMAT, BIZY_FORMAT_SECONDS_LANGUAGE, BIZY_SKELETON_SHAPE, BIZY_TAG_TYPE, BizyAccordionComponent, BizyAccordionModule, BizyAnimationService, BizyAudioPlayerComponent, BizyAudioPlayerFormatSecondsPipe, BizyAudioPlayerModule, BizyAudioRecorderComponent, BizyAudioRecorderModule, BizyAutoFocusDirective, BizyAveragePipe, BizyBarLineChartComponent, BizyBarLineChartModule, BizyBarLineChartPopupComponent, BizyBreadcrumbComponent, BizyBreadcrumbModule, BizyButtonComponent, BizyButtonModule, BizyCacheService, BizyCalendarComponent, BizyCalendarModule, BizyCardComponent, BizyCardModule, BizyCheckboxComponent, BizyCheckboxModule, BizyContentComponent, BizyContentModule, BizyCopyToClipboardDirective, BizyCopyToClipboardService, BizyCurrencyFormatDirective, BizyDatePickerComponent, BizyDatePickerModule, BizyDeviceService, BizyDirectivesModule, BizyDonutChartComponent, BizyDonutChartModule, BizyDonutChartPopupComponent, BizyEnumToArrayPipe, BizyExportToCSVService, BizyExtractNumbersPipe, BizyFileUploaderComponent, BizyFileUploaderModule, BizyFileUploaderService, BizyFilterComponent, BizyFilterContentComponent, BizyFilterModule, BizyFilterPipe, BizyFilterSectionCheckboxOptionComponent, BizyFilterSectionComponent, BizyFilterSectionRangeOptionComponent, BizyFilterSectionSearchOptionComponent, BizyFilterSectionsComponent, BizyFormComponent, BizyFormModule, BizyFormatSecondsPipe, BizyFormatSecondsService, BizyFullScreenPopupWrapperComponent, BizyGaugeChartComponent, BizyGaugeChartModule, BizyGaugeChartPopupComponent, BizyGridComponent, BizyGridForDirective, BizyGridModule, BizyGridRowComponent, BizyHeatMapChartComponent, BizyHeatMapChartModule, BizyInputComponent, BizyInputModule, BizyInputOptionComponent, BizyKeyboardService, BizyListComponent, BizyListModule, BizyLoadingDirective, BizyLogService, BizyLongPressDirective, BizyMenuBarComponent, BizyMenuBarModule, BizyMenuBarOptionComponent, BizyMenuComponent, BizyMenuModule, BizyMenuOptionComponent, BizyMenuTitleComponent, BizyOnlyNumbersDirective, BizyOnlyPhoneDigitsDirective, BizyOrderByPipe, BizyPieChartComponent, BizyPieChartModule, BizyPieChartPopupComponent, BizyPipesModule, BizyPopupModule, BizyPopupService, BizyPopupWrapperComponent, BizyProgressBarComponent, BizyProgressBarModule, BizyRadioComponent, BizyRadioModule, BizyRangeFilterPipe, BizyReducePipe, BizyReloadDirective, BizyRepeatPipe, BizyRoundPipe, BizyRouterService, BizySafePipe, BizySearchPipe, BizySectionCenterComponent, BizySectionComponent, BizySectionEndComponent, BizySectionModule, BizySectionStartComponent, BizySelectComponent, BizySelectModule, BizySelectOptionComponent, BizyServicesModule, BizySetToArrayPipe, BizySidebarComponent, BizySidebarFloatingOptionComponent, BizySidebarFloatingOptionTitleComponent, BizySidebarModule, BizySidebarOptionComponent, BizySkeletonComponent, BizySkeletonModule, BizySliderComponent, BizySliderModule, BizyStorageService, BizyTabComponent, BizyTableColumnArrowsComponent, BizyTableColumnComponent, BizyTableColumnFixedDirective, BizyTableComponent, BizyTableFooterComponent, BizyTableHeaderComponent, BizyTableModule, BizyTableRowComponent, BizyTableRowExpandContentComponent, BizyTableScrollingComponent, BizyTableScrollingDirective, BizyTabsComponent, BizyTabsModule, BizyTagComponent, BizyTagModule, BizyTextEllipsisDirective, BizyTimelineComponent, BizyTimelineEventComponent, BizyTimelineModule, BizyToastModule, BizyToastService, BizyToastWrapperComponent, BizyToggleComponent, BizyToggleModule, BizyToolbarComponent, BizyToolbarModule, BizyTooltipDirective, BizyTrackByIdDirective, BizyTranslateModule, BizyTranslatePipe, BizyTranslateService, BizyUniquePipe, BizyValidatorService, BizyViewportService, LANGUAGE, LOADING_TYPE, MIME_TYPE, POPUP_PLACEMENT };
 //# sourceMappingURL=bizy-core.mjs.map