@fxlt/common-ui 0.0.5-rc4 → 0.0.6

package/fesm2022/fxlt-common-ui.mjs

@@ -49,7 +49,7 @@ import * as i44 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i3 from '@danielmoncada/angular-datetime-picker';
 import { OwlDateTimeModule, OwlNativeDateTimeModule, OWL_DATE_TIME_FORMATS } from '@danielmoncada/angular-datetime-picker';
-import * as i2$3 from 'ngx-echarts';
+import * as i1$4 from 'ngx-echarts';
 import { NgxEchartsModule } from 'ngx-echarts';
 import { __decorate, __param } from 'tslib';
 import * as i27 from 'ngx-vflow';
@@ -633,6 +633,7 @@ class BaseTableComponent extends BaseComponent {
                 message: conf.message,
                 resolve: this.resolve(),
                 disabled: true,
+                method: 'view',
             },
         });
         instance.afterClosed().subscribe(() => {
@@ -684,7 +685,7 @@ class BaseTableComponent extends BaseComponent {
         }
     }
     tagClass(tag) {
-        return FxUtils.getTagClass(tag);
+        return FxUtils.getTagClass(tag, true);
     }
     capitalize(label) {
         return _.capitalize(label);
@@ -1337,64 +1338,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 class ChartComponent {
     ref;
     cdr;
+    /* ================= INPUTS ================= */
     type = 'auto';
     data;
     options;
     palette;
     height = '400px';
     loading = false;
+    // pie controls
     pieLegendAlign = '10%';
     pieLegendPosition = 'middle';
     showPieLabel = true;
     labelFontFamily = 'BeVietnamPro';
+    /* ================= OUTPUTS ================= */
     chartClick = new EventEmitter();
     chartInit = new EventEmitter();
-    labelFontSize = 12;
-    canInit = false;
+    /* ================= INTERNAL ================= */
     chartOptions = {};
+    labelFontSize = 12;
     chartInstance;
     resizeObserver;
     intersectionObserver;
+    canInit = false;
+    isMobile = false;
     constructor(ref, cdr) {
         this.ref = ref;
         this.cdr = cdr;
     }
+    /* ================= LIFECYCLE ================= */
     ngAfterViewInit() {
+        // Only initialize when visible (tab-safe)
         this.intersectionObserver = new IntersectionObserver(([entry]) => {
             if (entry.isIntersecting && !this.canInit) {
                 this.canInit = true;
+                this.updateResponsiveState();
                 this.rebuildChart();
                 this.cdr.detectChanges();
             }
         }, { threshold: 0.1 });
         this.intersectionObserver.observe(this.ref.nativeElement);
+        // Resize-safe (tabs, flex, async layout)
         this.resizeObserver = new ResizeObserver(() => {
-            if (this.chartInstance)
-                this.chartInstance.resize();
+            if (!this.canInit)
+                return;
+            this.updateResponsiveState();
+            this.forceMediaRecalc();
         });
         this.resizeObserver.observe(this.ref.nativeElement);
     }
-    ngOnDestroy() {
-        this.resizeObserver?.disconnect();
-        this.intersectionObserver?.disconnect();
-    }
     ngOnChanges() {
         if (this.canInit) {
+            this.updateResponsiveState();
             this.rebuildChart();
         }
     }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        this.intersectionObserver?.disconnect();
+    }
     onThemeChange() {
-        requestAnimationFrame(() => {
-            this.rebuildChart();
-        });
+        if (!this.canInit)
+            return;
+        requestAnimationFrame(() => this.rebuildChart());
     }
+    /* ================= EVENTS ================= */
     onChartClick(event) {
         this.chartClick.emit(event);
     }
     onChartInit(chart) {
         this.chartInstance = chart;
         this.chartInit.emit(chart);
-        requestAnimationFrame(() => chart.resize());
+        requestAnimationFrame(() => this.forceMediaRecalc());
+    }
+    /* ================= CORE FIX ================= */
+    updateResponsiveState() {
+        const { width } = this.ref.nativeElement.getBoundingClientRect();
+        if (width > 0) {
+            this.isMobile = width < 300;
+        }
+    }
+    forceMediaRecalc(retry = 0) {
+        if (!this.chartInstance)
+            return;
+        const { width, height } = this.ref.nativeElement.getBoundingClientRect();
+        if ((width === 0 || height === 0) && retry < 10) {
+            requestAnimationFrame(() => this.forceMediaRecalc(retry + 1));
+            return;
+        }
+        this.chartInstance.setOption(this.chartOptions, true);
+        this.chartInstance.resize();
     }
     rebuildChart() {
         this.chartOptions = this.buildOptions();
@@ -1402,34 +1434,30 @@ class ChartComponent {
             this.chartInstance.clear();
             this.chartInstance.setOption(this.chartOptions, true);
         }
-        this.cdr.detectChanges();
     }
+    /* ================= REGISTRY ================= */
     registry = {
         bar: (data, colors) => ({
             color: colors,
             tooltip: { trigger: 'axis' },
-            grid: {
-                left: '5%',
-                right: '5%',
-                bottom: '10%',
-                containLabel: true,
-            },
+            grid: { left: '5%', right: '5%', bottom: '10%', containLabel: true },
             xAxis: {
                 type: 'category',
                 data: data?.categories || [],
                 axisLabel: {
                     interval: 0,
-                    fontFamily: this.labelFontFamily,
-                    fontSize: this.labelFontSize,
-                    color: FxUtils.convertColorFromVariable('--text-secondary'),
                     width: 80,
                     overflow: 'truncate',
                     ellipsis: '…',
+                    fontFamily: this.labelFontFamily,
+                    fontSize: this.labelFontSize,
+                    color: FxUtils.convertColorFromVariable('--text-secondary'),
                 },
                 axisLine: {
-                    lineStyle: { color: FxUtils.convertColorFromVariable('--border-strong') },
+                    lineStyle: {
+                        color: FxUtils.convertColorFromVariable('--border-strong'),
+                    },
                 },
-                splitLine: { show: false },
             },
             yAxis: {
                 type: 'value',
@@ -1439,47 +1467,49 @@ class ChartComponent {
                     color: FxUtils.convertColorFromVariable('--text-secondary'),
                 },
                 axisLine: {
-                    lineStyle: { color: FxUtils.convertColorFromVariable('--border-strong') },
+                    lineStyle: {
+                        color: FxUtils.convertColorFromVariable('--border-strong'),
+                    },
                 },
                 splitLine: {
-                    lineStyle: { color: FxUtils.convertColorFromVariable('--border-default') },
+                    lineStyle: {
+                        color: FxUtils.convertColorFromVariable('--border-default'),
+                    },
                 },
             },
             series: [
                 {
                     type: 'bar',
+                    data: data?.values || [],
                     itemStyle: {
-                        color: (params) => {
-                            const palette = colors || [];
-                            return palette[params.dataIndex % palette.length];
-                        },
+                        color: (p) => colors[p.dataIndex % colors.length],
                     },
-                    data: data?.values || [],
                     label: {
                         show: true,
                         position: 'top',
                         fontFamily: this.labelFontFamily,
                         fontSize: this.labelFontSize,
                         color: FxUtils.convertColorFromVariable('--text-primary'),
-                        textBorderWidth: 0,
-                        textBorderColor: 'transparent',
                     },
-                    emphasis: { itemStyle: { opacity: 0.8 } },
                 },
             ],
         }),
         pie: (data, colors) => {
             const total = data.reduce((sum, d) => sum + d.value, 0);
+            const isMobile = this.isMobile;
             return {
                 color: colors,
                 tooltip: { trigger: 'item' },
                 legend: {
                     orient: 'vertical',
-                    right: this.pieLegendAlign,
-                    top: this.pieLegendPosition,
                     icon: 'circle',
-                    align: 'left',
                     itemGap: 12,
+                    width: 160,
+                    // 🔑 layout switch
+                    right: isMobile ? undefined : this.pieLegendAlign,
+                    top: isMobile ? undefined : this.pieLegendPosition,
+                    left: isMobile ? 'center' : undefined,
+                    bottom: isMobile ? 0 : undefined,
                     formatter: (name) => {
                         const item = data.find((d) => d.name === name);
                         return item ? `${name}: ${item.value}` : name;
@@ -1489,14 +1519,14 @@ class ChartComponent {
                         fontSize: 13,
                         fontWeight: 500,
                         color: FxUtils.convertColorFromVariable('--text-primary'),
+                        overflow: 'truncate',
                     },
                 },
                 series: [
                     {
                         type: 'pie',
                         radius: ['40%', '70%'],
-                        center: ['40%', '50%'],
-                        avoidLabelOverlap: true,
+                        center: isMobile ? ['50%', '40%'] : ['35%', '50%'],
                         data,
                         label: {
                             show: this.showPieLabel,
@@ -1513,21 +1543,12 @@ class ChartComponent {
                             length: 7,
                             length2: 7,
                         },
-                        itemStyle: {
-                            borderWidth: 0,
-                        },
-                        emphasis: {
-                            scale: true,
-                            scaleSize: 10,
-                            itemStyle: { borderWidth: 0 },
-                            label: { textBorderWidth: 0 },
-                        },
                     },
                 ],
                 graphic: {
                     type: 'group',
-                    left: '40%',
-                    top: '50%',
+                    left: isMobile ? '50%' : '35%',
+                    top: isMobile ? '40%' : '50%',
                     bounding: 'raw',
                     children: [
                         {
@@ -1541,48 +1562,9 @@ class ChartComponent {
                                 align: 'center',
                                 verticalAlign: 'middle',
                             },
-                            y: 0,
                         },
                     ],
                 },
-                media: [
-                    {
-                        query: { maxWidth: 350 },
-                        option: {
-                            graphic: {
-                                left: '50%',
-                                top: '40%',
-                                type: 'group',
-                                bounding: 'raw',
-                                children: [
-                                    {
-                                        type: 'text',
-                                        style: {
-                                            text: data.reduce((sum, d) => sum + d.value, 0).toString(),
-                                            fontSize: 24,
-                                            fontWeight: 600,
-                                            fontFamily: 'DMSans',
-                                            fill: FxUtils.convertColorFromVariable('--text-primary'),
-                                            align: 'center',
-                                            verticalAlign: 'middle',
-                                        },
-                                        y: 0,
-                                    },
-                                ],
-                            },
-                            series: [
-                                {
-                                    center: ['50%', '40%'],
-                                },
-                            ],
-                            legend: {
-                                orient: 'vertical',
-                                left: 'center',
-                                bottom: 0,
-                            },
-                        },
-                    },
-                ],
             };
         },
         sunburst: (data, colors) => ({
@@ -1606,8 +1588,9 @@ class ChartComponent {
                     },
                 },
             ],
-        }),
+        })
     };
+    /* ================= BUILD ================= */
     detectType() {
         if (this.type !== 'auto')
             return this.type;
@@ -1615,62 +1598,46 @@ class ChartComponent {
             return 'sunburst';
         if (this.data?.categories && this.data?.values)
             return 'bar';
-        if (Array.isArray(this.data) && this.data[0]?.value && this.data[0]?.name)
+        if (Array.isArray(this.data))
             return 'pie';
         return 'bar';
     }
     buildOptions() {
-        const chartType = this.detectType();
+        const type = this.detectType();
         const palette = this.resolvePalette();
-        const baseBuilder = this.registry[chartType];
-        const baseOptions = baseBuilder ? baseBuilder(this.data, palette) : {};
-        const textColor = FxUtils.convertColorFromVariable('--text-primary');
-        const mergedOptions = {
-            legend: {
-                textStyle: {
-                    fontFamily: this.labelFontFamily,
-                    color: textColor,
-                    fontSize: this.labelFontSize,
-                    fontWeight: 500,
-                },
-                icon: 'circle',
-                itemGap: 16,
-            },
-            ...baseOptions,
+        const base = this.registry[type]?.(this.data, palette) || {};
+        return {
+            ...base,
             ...this.options,
         };
-        return mergedOptions;
     }
     resolvePalette() {
-        const defaultPalette = [
+        const defaults = [
+            'rgba(var(--success) / 1)',
+            'rgba(var(--information) / 1)',
             'rgba(var(--critical) / 1)',
             'rgba(var(--danger) / 1)',
             'rgba(var(--warning) / 1)',
-            'rgba(var(--success) / 1)',
-            'rgba(var(--information) / 1)',
             'rgba(var(--discovery) / 1)',
         ];
-        const palette = !this.palette || this.palette.length === 0 ? defaultPalette : this.palette;
+        const palette = this.palette?.length ? this.palette : defaults;
         return palette.map((raw) => {
-            if (raw.includes('var(')) {
-                const cssVar = raw.match(/var\((.*?)\)/)?.[1];
-                const opacityMatch = raw.match(/\/\s*([\d.]+)/);
-                const opacity = opacityMatch ? parseFloat(opacityMatch[1]) : 1;
-                const rgb = getComputedStyle(document.body)
-                    .getPropertyValue(cssVar || '')
-                    .trim()
-                    .replace(/\s+/g, ',');
-                return `rgba(${rgb}, ${opacity})`;
-            }
-            return raw;
+            if (!raw.includes('var('))
+                return raw;
+            const cssVar = raw.match(/var\((.*?)\)/)?.[1];
+            const rgb = getComputedStyle(document.body)
+                .getPropertyValue(cssVar || '')
+                .trim()
+                .replace(/\s+/g, ',');
+            return `rgba(${rgb},1)`;
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChartComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ChartComponent, isStandalone: false, selector: "fx-ui-chart", inputs: { type: "type", data: "data", options: "options", palette: "palette", height: "height", loading: "loading", pieLegendAlign: "pieLegendAlign", pieLegendPosition: "pieLegendPosition", showPieLabel: "showPieLabel", labelFontFamily: "labelFontFamily" }, outputs: { chartClick: "chartClick", chartInit: "chartInit" }, host: { listeners: { "window:theme-changed": "onThemeChange()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-wrapper\" [style.height]=\"height\" [class.loading]=\"loading\">\n  <ng-container *ngIf=\"canInit\">\n    <div\n      echarts\n      [options]=\"chartOptions\"\n      (chartInit)=\"onChartInit($event)\"\n      (chartClick)=\"onChartClick($event)\"\n      class=\"w-full h-full\">\n    </div>\n  </ng-container>\n\n  <div class=\"chart-loader\" *ngIf=\"loading\">\n    <span class=\"txt-default\">Loading...</span>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.chart-wrapper{position:relative;width:100%;height:100%}.chart-container{width:100%;height:100%}.chart-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--bg-primary-hover)/.6);font-weight:500;font-size:1.1rem;z-index:2;border-radius:4px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ChartComponent, isStandalone: false, selector: "fx-ui-chart", inputs: { type: "type", data: "data", options: "options", palette: "palette", height: "height", loading: "loading", pieLegendAlign: "pieLegendAlign", pieLegendPosition: "pieLegendPosition", showPieLabel: "showPieLabel", labelFontFamily: "labelFontFamily" }, outputs: { chartClick: "chartClick", chartInit: "chartInit" }, host: { listeners: { "window:theme-changed": "onThemeChange()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-wrapper\" [style.height]=\"height\">\n  <div\n    echarts\n    [options]=\"chartOptions\"\n    [loading]=\"loading\"\n    (chartInit)=\"onChartInit($event)\"\n    (chartClick)=\"onChartClick($event)\"\n    class=\"fx-chart\"\n    [style.height]=\"height\"\n  ></div>\n</div>\n", styles: [":host{display:block;width:100%}.chart-wrapper{position:relative;width:100%;height:100%}.chart-container{width:100%;height:100%}.chart-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--bg-primary-hover)/.6);font-weight:500;font-size:1.1rem;z-index:2;border-radius:4px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-chart', standalone: false, template: "<div class=\"chart-wrapper\" [style.height]=\"height\" [class.loading]=\"loading\">\n  <ng-container *ngIf=\"canInit\">\n    <div\n      echarts\n      [options]=\"chartOptions\"\n      (chartInit)=\"onChartInit($event)\"\n      (chartClick)=\"onChartClick($event)\"\n      class=\"w-full h-full\">\n    </div>\n  </ng-container>\n\n  <div class=\"chart-loader\" *ngIf=\"loading\">\n    <span class=\"txt-default\">Loading...</span>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.chart-wrapper{position:relative;width:100%;height:100%}.chart-container{width:100%;height:100%}.chart-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--bg-primary-hover)/.6);font-weight:500;font-size:1.1rem;z-index:2;border-radius:4px}\n"] }]
+            args: [{ selector: 'fx-ui-chart', standalone: false, template: "<div class=\"chart-wrapper\" [style.height]=\"height\">\n  <div\n    echarts\n    [options]=\"chartOptions\"\n    [loading]=\"loading\"\n    (chartInit)=\"onChartInit($event)\"\n    (chartClick)=\"onChartClick($event)\"\n    class=\"fx-chart\"\n    [style.height]=\"height\"\n  ></div>\n</div>\n", styles: [":host{display:block;width:100%}.chart-wrapper{position:relative;width:100%;height:100%}.chart-container{width:100%;height:100%}.chart-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--bg-primary-hover)/.6);font-weight:500;font-size:1.1rem;z-index:2;border-radius:4px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { type: [{
                 type: Input
             }], data: [{
@@ -3059,7 +3026,7 @@ class UiModule {
             OwlMomentDateTimeModule,
             HasPermissionDirective,
             TrimOnBlurDirective,
-            NgHeroiconsModule, i27.VflowComponent, i27.HandleComponent, i27.ResizableComponent, i27.SelectableDirective, i27.MiniMapComponent, i27.NodeToolbarComponent, i27.CustomTemplateEdgeComponent, i27.DragHandleDirective, i27.ConnectionControllerDirective, i27.NodeHtmlTemplateDirective, i27.NodeSvgTemplateDirective, i27.GroupNodeTemplateDirective, i27.EdgeLabelHtmlTemplateDirective, i27.EdgeTemplateDirective, i27.ConnectionTemplateDirective, i27.HandleTemplateDirective, i2$3.NgxEchartsModule, i3$1.MatSelectModule, i30.MatRadioModule, i31.MatButtonModule, i32.MatIconModule, i33.MatPaginatorModule, i34.MatTableModule, i35.MatSnackBarModule, i1$1.MatDialogModule, i37.MatCheckboxModule, i38.MatCardModule, i39.MatDatepickerModule, i40.MatTimepickerModule, i41.MatBadgeModule, i42.MatExpansionModule, i43.MatFormFieldModule, i44.MatMenuModule], exports: [InputComponent, SelectComponent, RadioButtonComponent, CheckboxComponent, DndUploadComponent, ButtonComponent, RadioButtonToggleComponent, DatetimePicker, LoadingPanel, SearchBarComponent, TabGroupComponent, TabComponent, HeroIconComponent, ToastComponent, ToastContainerComponent, TagComponent, ChartComponent, SliderComponent, SwitchComponent, RichTextAreaComponent, SkeletonTableLoadingComponent, FlowConnection, CircleProgressBar, TreeDiagram, TableCell, ConfirmationDialogComponent, 
+            NgHeroiconsModule, i27.VflowComponent, i27.HandleComponent, i27.ResizableComponent, i27.SelectableDirective, i27.MiniMapComponent, i27.NodeToolbarComponent, i27.CustomTemplateEdgeComponent, i27.DragHandleDirective, i27.ConnectionControllerDirective, i27.NodeHtmlTemplateDirective, i27.NodeSvgTemplateDirective, i27.GroupNodeTemplateDirective, i27.EdgeLabelHtmlTemplateDirective, i27.EdgeTemplateDirective, i27.ConnectionTemplateDirective, i27.HandleTemplateDirective, i1$4.NgxEchartsModule, i3$1.MatSelectModule, i30.MatRadioModule, i31.MatButtonModule, i32.MatIconModule, i33.MatPaginatorModule, i34.MatTableModule, i35.MatSnackBarModule, i1$1.MatDialogModule, i37.MatCheckboxModule, i38.MatCardModule, i39.MatDatepickerModule, i40.MatTimepickerModule, i41.MatBadgeModule, i42.MatExpansionModule, i43.MatFormFieldModule, i44.MatMenuModule], exports: [InputComponent, SelectComponent, RadioButtonComponent, CheckboxComponent, DndUploadComponent, ButtonComponent, RadioButtonToggleComponent, DatetimePicker, LoadingPanel, SearchBarComponent, TabGroupComponent, TabComponent, HeroIconComponent, ToastComponent, ToastContainerComponent, TagComponent, ChartComponent, SliderComponent, SwitchComponent, RichTextAreaComponent, SkeletonTableLoadingComponent, FlowConnection, CircleProgressBar, TreeDiagram, TableCell, ConfirmationDialogComponent, 
             // Module
             FormsModule,
             ReactiveFormsModule,