@fxlt/common-ui 0.0.4 → 0.0.5-rc2

package/animations.css

@@ -113,3 +113,18 @@
 .fade-out-animation {
   animation: fade-out 0.4s ease-out forwards;
 }
+
+@keyframes pulse-glow {
+  0%,
+  100% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  50% {
+    opacity: 0.7;
+    filter: brightness(1.4);
+  }
+}
+.animate-pulse-glow {
+  animation: pulse-glow 3s ease-in-out infinite;
+}

package/components.css

@@ -104,10 +104,6 @@
 .mdc-data-table__cell {
   border-left: 1px solid rgb(var(--border-default)) !important;
   background-color: rgb(var(--bg-primary)) !important;
-  /* padding-top: 8px !important;
-  padding-bottom: 8px !important;
-  padding-left: 16px !important;
-  padding-right: 16px !important; */
   font-family: 'BeVietnamPro';
 }
 
@@ -166,6 +162,9 @@ input[type='password'] {
 }
 
 /* system style */
+.txt-heading-02 {
+  @apply font-semibold text-4xl tracking-normal leading-10 text-text-primary;
+}
 .txt-heading-03 {
   @apply font-semibold text-3xl tracking-normal leading-10 text-text-primary;
 }
@@ -413,25 +412,12 @@ input[type='password'] {
 }
 /* progress bar */
 .progress-bar-container {
-  @apply bg-bg-hover mt-semi rounded-full h-1.5 overflow-hidden shadow-inner;
+  @apply bg-bg-hover mt-semi rounded-md h-1.5 overflow-hidden shadow-inner;
 }
 .progress-bar-buffer {
-  @apply h-1.5 bg-primary rounded-full transition-all duration-700 ease-in-out animate-pulse-glow;
-}
-@keyframes pulse-glow {
-  0%,
-  100% {
-    opacity: 1;
-    filter: brightness(1);
-  }
-  50% {
-    opacity: 0.7;
-    filter: brightness(1.4);
-  }
-}
-.animate-pulse-glow {
-  animation: pulse-glow 3s ease-in-out infinite;
+  @apply h-1.5 bg-primary rounded-md transition-all duration-700 ease-in-out;
 }
+
 /* radio button */
 .radio-container {
   @apply w-large h-large flex items-center justify-center rounded-full border;
@@ -485,3 +471,6 @@ input[type='password'] {
       rgb(var(--gradient-primary-end))
     ) border-box;
 }
+.skeleton-load {
+  @apply rounded bg-gray-200 animate-pulse motion-reduce:animate-none;
+}

package/fesm2022/fxlt-common-ui.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
 import { Directive, Input, Component, createComponent, Injectable, ViewChild, Inject, EventEmitter, NgModule, HostListener, PLATFORM_ID, Output, Optional, Self, ChangeDetectionStrategy, TemplateRef, ContentChildren, ViewChildren, importProvidersFrom } from '@angular/core';
-import * as i32 from '@angular/material/paginator';
+import * as i33 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import * as i33 from '@angular/material/table';
+import * as i34 from '@angular/material/table';
 import { MatTableDataSource, MatTable, MatTableModule } from '@angular/material/table';
 import * as i2 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
@@ -23,36 +23,36 @@ import * as i2$2 from '@angular/router';
 import { catchError } from 'rxjs/operators';
 import * as i3$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i29 from '@angular/material/radio';
+import * as i30 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i30 from '@angular/material/button';
+import * as i31 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i31 from '@angular/material/icon';
+import * as i32 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i34 from '@angular/material/snack-bar';
+import * as i35 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import * as i36 from '@angular/material/checkbox';
+import * as i37 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i37 from '@angular/material/card';
+import * as i38 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i38 from '@angular/material/datepicker';
+import * as i39 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i39 from '@angular/material/timepicker';
+import * as i40 from '@angular/material/timepicker';
 import { MatTimepickerModule } from '@angular/material/timepicker';
-import * as i40 from '@angular/material/badge';
+import * as i41 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
-import * as i41 from '@angular/material/expansion';
+import * as i42 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
-import * as i42 from '@angular/material/form-field';
+import * as i43 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i43 from '@angular/material/menu';
+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 { NgxEchartsModule } from 'ngx-echarts';
 import { __decorate, __param } from 'tslib';
-import * as i26 from 'ngx-vflow';
+import * as i27 from 'ngx-vflow';
 import { Vflow } from 'ngx-vflow';
 import { OwlMomentDateTimeModule } from '@danielmoncada/angular-datetime-picker-moment-adapter';
 
@@ -257,7 +257,7 @@ class FxUtils {
         return this.isNull(obj) || obj.length === 0;
     }
     static isArrayNotEmpty(obj) {
-        return !FxUtils.isArrayEmpty(obj);
+        return !this.isArrayEmpty(obj);
     }
     static replaceStartWithAsterisk(inputString, numToReplace) {
         if (numToReplace >= inputString.length) {
@@ -356,6 +356,24 @@ class FxUtils {
         const regex = /^(?=.{6,}$)(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9]).*$/;
         return regex.test(password);
     }
+    static formatSizeUnits(bytes) {
+        if (bytes >= 1073741824) {
+            return (bytes / 1073741824).toFixed(2) + " GB";
+        }
+        else if (bytes >= 1048576) {
+            return (bytes / 1048576).toFixed(2) + " MB";
+        }
+        else if (bytes >= 1024) {
+            return (bytes / 1024).toFixed(2) + " KB";
+        }
+        else if (bytes > 1) {
+            return bytes + " bytes";
+        }
+        else if (bytes == 1) {
+            return bytes + " byte";
+        }
+        return "0 bytes";
+    }
 }
 
 class HttpWrapper {
@@ -455,6 +473,7 @@ class BaseTableComponent extends BaseComponent {
     toastr;
     _lock = false;
     keywordChange$ = new Subject();
+    dataSourcePlaceholder;
     config;
     paginator;
     table;
@@ -469,10 +488,16 @@ class BaseTableComponent extends BaseComponent {
         this.keywordChange$.pipe(debounceTime(300)).subscribe(async (keyword) => {
             await this.refresh();
         });
+        this.dataSourcePlaceholder = Array(this.pageSize).fill({});
         this.init();
     }
     init() { }
     ngAfterViewInit() {
+        if (this.paginator && this.paginator.page) {
+            this.paginator.page.subscribe(event => {
+                this.onPageChange(event);
+            });
+        }
         this.ref.detectChanges();
     }
     async refresh() {
@@ -486,7 +511,7 @@ class BaseTableComponent extends BaseComponent {
     async fetch() {
         this.loading = true;
         try {
-            const params = { page: this.page + 1, pageSize: this.pageSize, ...this.filters };
+            const params = { page: (this.page ?? 0) + 1, pageSize: this.pageSize, ...this.filters };
             const result = await this.api.search(params);
             this.setDataSource(result);
         }
@@ -658,8 +683,14 @@ class BaseTableComponent extends BaseComponent {
             throw err;
         }
     }
-    value(model, key) {
-        return _.get(model, key);
+    tagClass(tag) {
+        return FxUtils.getTagClass(tag);
+    }
+    capitalize(label) {
+        return _.capitalize(label);
+    }
+    value(model, key, defaultValue) {
+        return _.get(model, key, defaultValue);
     }
     toggleExpand(element) {
         this.expandedElement = this.expandedElement === element ? null : element;
@@ -1312,18 +1343,31 @@ class ChartComponent {
     palette;
     height = '400px';
     loading = false;
+    pieLegendAlign = '10%';
+    pieLegendPosition = 'middle';
+    showPieLabel = true;
+    labelFontFamily = 'BeVietnamPro';
     chartClick = new EventEmitter();
     chartInit = new EventEmitter();
     labelFontSize = 12;
-    labelFontFamily = 'BeVietnamPro';
+    canInit = false;
     chartOptions = {};
     chartInstance;
     resizeObserver;
+    intersectionObserver;
     constructor(ref, cdr) {
         this.ref = ref;
         this.cdr = cdr;
     }
     ngAfterViewInit() {
+        this.intersectionObserver = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting && !this.canInit) {
+                this.canInit = true;
+                this.rebuildChart();
+                this.cdr.detectChanges();
+            }
+        }, { threshold: 0.1 });
+        this.intersectionObserver.observe(this.ref.nativeElement);
         this.resizeObserver = new ResizeObserver(() => {
             if (this.chartInstance)
                 this.chartInstance.resize();
@@ -1331,11 +1375,13 @@ class ChartComponent {
         this.resizeObserver.observe(this.ref.nativeElement);
     }
     ngOnDestroy() {
-        if (this.resizeObserver)
-            this.resizeObserver.disconnect();
+        this.resizeObserver?.disconnect();
+        this.intersectionObserver?.disconnect();
     }
     ngOnChanges() {
-        this.rebuildChart();
+        if (this.canInit) {
+            this.rebuildChart();
+        }
     }
     onThemeChange() {
         requestAnimationFrame(() => {
@@ -1348,8 +1394,7 @@ class ChartComponent {
     onChartInit(chart) {
         this.chartInstance = chart;
         this.chartInit.emit(chart);
-        requestAnimationFrame(() => this.chartInstance?.resize());
-        setTimeout(() => this.chartInstance?.resize(), 100);
+        requestAnimationFrame(() => chart.resize());
     }
     rebuildChart() {
         this.chartOptions = this.buildOptions();
@@ -1373,9 +1418,13 @@ class ChartComponent {
                 type: 'category',
                 data: data?.categories || [],
                 axisLabel: {
+                    interval: 0,
                     fontFamily: this.labelFontFamily,
                     fontSize: this.labelFontSize,
                     color: FxUtils.convertColorFromVariable('--text-secondary'),
+                    width: 80,
+                    overflow: 'truncate',
+                    ellipsis: '…',
                 },
                 axisLine: {
                     lineStyle: { color: FxUtils.convertColorFromVariable('--border-strong') },
@@ -1399,6 +1448,12 @@ class ChartComponent {
             series: [
                 {
                     type: 'bar',
+                    itemStyle: {
+                        color: (params) => {
+                            const palette = colors || [];
+                            return palette[params.dataIndex % palette.length];
+                        },
+                    },
                     data: data?.values || [],
                     label: {
                         show: true,
@@ -1413,58 +1468,106 @@ class ChartComponent {
                 },
             ],
         }),
-        pie: (data, colors) => ({
-            color: colors,
-            tooltip: { trigger: 'item' },
-            legend: {
-                orient: 'vertical',
-                top: 'bottom',
-                right: 10,
-                textStyle: {
-                    fontFamily: "BeVietnamPro",
-                    color: FxUtils.convertColorFromVariable('--text-primary'),
-                    fontSize: 12,
-                    fontWeight: 500,
-                },
-                icon: 'circle',
-                itemGap: 8,
-                padding: 0,
-            },
-            series: [
-                {
-                    type: 'pie',
-                    radius: ['40%', '70%'],
-                    avoidLabelOverlap: true,
-                    data,
-                    label: {
-                        //{a}	Series name
-                        //{b}	Data name (slice label)
-                        //{c}	Data value
-                        //{d}	Percentage
-                        formatter: '{b}: {c}',
-                        fontSize: this.labelFontSize,
+        pie: (data, colors) => {
+            const total = data.reduce((sum, d) => sum + d.value, 0);
+            return {
+                color: colors,
+                tooltip: { trigger: 'item' },
+                legend: {
+                    orient: 'vertical',
+                    right: this.pieLegendAlign,
+                    top: this.pieLegendPosition,
+                    icon: 'circle',
+                    align: 'left',
+                    itemGap: 12,
+                    formatter: (name) => {
+                        const item = data.find((d) => d.name === name);
+                        return item ? `${name}: ${item.value}` : name;
+                    },
+                    textStyle: {
                         fontFamily: this.labelFontFamily,
+                        fontSize: 13,
+                        fontWeight: 500,
                         color: FxUtils.convertColorFromVariable('--text-primary'),
-                        textBorderWidth: 0,
-                        textBorderColor: 'transparent',
                     },
-                    labelLine: {
-                        show: true,
-                        length: 15,
-                        length2: 15,
-                    },
-                    itemStyle: {
-                        borderWidth: 0,
+                },
+                series: [
+                    {
+                        type: 'pie',
+                        radius: ['40%', '70%'],
+                        center: ['40%', '50%'],
+                        avoidLabelOverlap: true,
+                        data,
+                        label: {
+                            show: this.showPieLabel,
+                            //{a}	Series name
+                            //{b}	Data name (slice label)
+                            //{c}	Data value
+                            //{d}	Percentage
+                            position: 'outside',
+                            formatter: '{d}%',
+                            fontSize: this.labelFontSize,
+                            fontFamily: this.labelFontFamily,
+                            color: FxUtils.convertColorFromVariable('--text-primary'),
+                            textBorderWidth: 0,
+                            textBorderColor: 'transparent',
+                        },
+                        labelLine: {
+                            show: this.showPieLabel,
+                            length: 12,
+                            length2: 12,
+                        },
+                        itemStyle: {
+                            borderWidth: 0,
+                        },
+                        emphasis: {
+                            scale: true,
+                            scaleSize: 10,
+                            itemStyle: { borderWidth: 0 },
+                            label: { textBorderWidth: 0 },
+                        },
                     },
-                    emphasis: {
-                        scale: true,
-                        scaleSize: 10,
-                        itemStyle: { borderWidth: 0 },
-                        label: { textBorderWidth: 0 },
+                ],
+                media: [
+                    {
+                        query: { maxWidth: 480 },
+                        option: {
+                            legend: {
+                                orient: 'horizontal',
+                                left: 'center',
+                                bottom: 0,
+                            },
+                            series: [
+                                {
+                                    center: ['50%', '40%'],
+                                },
+                            ],
+                        },
                     },
+                ],
+                graphic: {
+                    type: 'group',
+                    left: '40%',
+                    top: '50%',
+                    bounding: 'raw',
+                    children: [
+                        {
+                            type: 'text',
+                            style: {
+                                text: total.toString(),
+                                fontSize: 24,
+                                fontWeight: 600,
+                                fontFamily: this.labelFontFamily,
+                                fill: FxUtils.convertColorFromVariable('--text-primary'),
+                                align: 'center',
+                                verticalAlign: 'middle',
+                            },
+                            y: 0,
+                        },
+                    ],
                 },
-            ],
-        }),
+            };
+        },
         sunburst: (data, colors) => ({
             color: colors,
             series: [
@@ -1546,11 +1649,11 @@ class ChartComponent {
         });
     }
     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" }, 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  <div\n    echarts\n    [options]=\"chartOptions\"\n    (chartInit)=\"onChartInit($event)\"\n    (chartClick)=\"onChartClick($event)\"\n    class=\"w-full h-full\">\n  </div>\n\n  <div class=\"chart-loader\" *ngIf=\"loading\">\n    <span class=\"txt-default\">Loading...</span>\n  </div>\n</div>", styles: [".chart-wrapper{position:relative;width: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\" [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"] }] });
 }
 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  <div\n    echarts\n    [options]=\"chartOptions\"\n    (chartInit)=\"onChartInit($event)\"\n    (chartClick)=\"onChartClick($event)\"\n    class=\"w-full h-full\">\n  </div>\n\n  <div class=\"chart-loader\" *ngIf=\"loading\">\n    <span class=\"txt-default\">Loading...</span>\n  </div>\n</div>", styles: [".chart-wrapper{position:relative;width: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\" [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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { type: [{
                 type: Input
             }], data: [{
@@ -1563,6 +1666,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], loading: [{
                 type: Input
+            }], pieLegendAlign: [{
+                type: Input
+            }], pieLegendPosition: [{
+                type: Input
+            }], showPieLabel: [{
+                type: Input
+            }], labelFontFamily: [{
+                type: Input
             }], chartClick: [{
                 type: Output
             }], chartInit: [{
@@ -1921,7 +2032,7 @@ class FlowConnection {
         ];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FlowConnection, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: FlowConnection, isStandalone: false, selector: "fx-ui-flow-connection", inputs: { nodes: "nodes", edges: "edges", backgroundColor: "backgroundColor", view: "view" }, ngImport: i0, template: "<vflow\n  [background]=\"{\n  type: 'solid',\n  color: `rgba(var(${backgroundColor})`\n}\"\n  [nodes]=\"nodes\"\n  [edges]=\"edges\"\n  (onConnect)=\"handleConnection($event)\"\n  [view]=\"view\"\n/>\n", styles: [""], dependencies: [{ kind: "component", type: i26.VflowComponent, selector: "vflow", inputs: ["view", "minZoom", "maxZoom", "background", "optimization", "entitiesSelectable", "keyboardShortcuts", "connection", "snapGrid", "elevateNodesOnSelect", "elevateEdgesOnSelect", "nodes", "alignmentHelper", "edges"], outputs: ["onComponentNodeEvent"] }, { kind: "directive", type: i26.ConnectionControllerDirective, selector: "[onConnect], [onReconnect]", outputs: ["onConnect", "onReconnect"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: FlowConnection, isStandalone: false, selector: "fx-ui-flow-connection", inputs: { nodes: "nodes", edges: "edges", backgroundColor: "backgroundColor", view: "view" }, ngImport: i0, template: "<vflow\n  [background]=\"{\n  type: 'solid',\n  color: `rgba(var(${backgroundColor})`\n}\"\n  [nodes]=\"nodes\"\n  [edges]=\"edges\"\n  (onConnect)=\"handleConnection($event)\"\n  [view]=\"view\"\n/>\n", styles: [""], dependencies: [{ kind: "component", type: i27.VflowComponent, selector: "vflow", inputs: ["view", "minZoom", "maxZoom", "background", "optimization", "entitiesSelectable", "keyboardShortcuts", "connection", "snapGrid", "elevateNodesOnSelect", "elevateEdgesOnSelect", "nodes", "alignmentHelper", "edges"], outputs: ["onComponentNodeEvent"] }, { kind: "directive", type: i27.ConnectionControllerDirective, selector: "[onConnect], [onReconnect]", outputs: ["onConnect", "onReconnect"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FlowConnection, decorators: [{
             type: Component,
@@ -2699,6 +2810,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: ['window:resize']
             }] } });
 
+class TableCell {
+    loading;
+    skeletonClass = 'h-4 w-full';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TableCell, isStandalone: false, selector: "fx-ui-table-cell", inputs: { loading: "loading", skeletonClass: "skeletonClass" }, ngImport: i0, template: "@if (!loading) {\n  <div animate.enter=\"fade-in-animation\" class=\"inline-block my-normal\">\n    <ng-content />\n  </div>\n} @else {\n  <div animate.enter=\"fade-in-animation\" class=\"skeleton-load my-semi\" [class]=\"skeletonClass\"></div>\n}\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableCell, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-table-cell', standalone: false, template: "@if (!loading) {\n  <div animate.enter=\"fade-in-animation\" class=\"inline-block my-normal\">\n    <ng-content />\n  </div>\n} @else {\n  <div animate.enter=\"fade-in-animation\" class=\"skeleton-load my-semi\" [class]=\"skeletonClass\"></div>\n}\n" }]
+        }], propDecorators: { loading: [{
+                type: Input,
+                args: [{ required: true }]
+            }], skeletonClass: [{
+                type: Input
+            }] } });
+
 class TagComponent {
     label;
     type = 'default';
@@ -2851,6 +2978,7 @@ const FX_COMPONENTS = [
     FlowConnection,
     CircleProgressBar,
     TreeDiagram,
+    TableCell,
 ];
 
 class ConfirmationDialogComponent {
@@ -2906,7 +3034,7 @@ const MY_MOMENT_FORMATS = {
 };
 class UiModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: UiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: UiModule, declarations: [InputComponent, SelectComponent, RadioButtonComponent, CheckboxComponent, DndUploadComponent, ButtonComponent, RadioButtonToggleComponent, DatetimePicker, LoadingPanel, SearchBarComponent, TabGroupComponent, TabComponent, HeroIconComponent, ToastComponent, ToastContainerComponent, TagComponent, ChartComponent, SliderComponent, SwitchComponent, RichTextAreaComponent, SkeletonTableLoadingComponent, FlowConnection, CircleProgressBar, TreeDiagram, ConfirmationDialogComponent], imports: [CommonModule,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: UiModule, declarations: [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], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             OwlDateTimeModule,
@@ -2914,14 +3042,14 @@ class UiModule {
             OwlMomentDateTimeModule,
             HasPermissionDirective,
             TrimOnBlurDirective,
-            NgHeroiconsModule, i26.VflowComponent, i26.HandleComponent, i26.ResizableComponent, i26.SelectableDirective, i26.MiniMapComponent, i26.NodeToolbarComponent, i26.CustomTemplateEdgeComponent, i26.DragHandleDirective, i26.ConnectionControllerDirective, i26.NodeHtmlTemplateDirective, i26.NodeSvgTemplateDirective, i26.GroupNodeTemplateDirective, i26.EdgeLabelHtmlTemplateDirective, i26.EdgeTemplateDirective, i26.ConnectionTemplateDirective, i26.HandleTemplateDirective, i2$3.NgxEchartsModule, i3$1.MatSelectModule, i29.MatRadioModule, i30.MatButtonModule, i31.MatIconModule, i32.MatPaginatorModule, i33.MatTableModule, i34.MatSnackBarModule, i1$1.MatDialogModule, i36.MatCheckboxModule, i37.MatCardModule, i38.MatDatepickerModule, i39.MatTimepickerModule, i40.MatBadgeModule, i41.MatExpansionModule, i42.MatFormFieldModule, i43.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, 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, 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, 
             // Module
             FormsModule,
             ReactiveFormsModule,
             OwlDateTimeModule,
             OwlNativeDateTimeModule,
             HasPermissionDirective,
-            NgHeroiconsModule, i3$1.MatSelectModule, i29.MatRadioModule, i30.MatButtonModule, i31.MatIconModule, i32.MatPaginatorModule, i33.MatTableModule, i34.MatSnackBarModule, i1$1.MatDialogModule, i36.MatCheckboxModule, i37.MatCardModule, i38.MatDatepickerModule, i39.MatTimepickerModule, i40.MatBadgeModule, i41.MatExpansionModule, i42.MatFormFieldModule, i43.MatMenuModule] });
+            NgHeroiconsModule, 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] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: UiModule, providers: [
             importProvidersFrom(NgHeroiconsModule.forRoot()),
             { provide: OWL_DATE_TIME_FORMATS, useValue: MY_MOMENT_FORMATS },
@@ -2931,13 +3059,13 @@ class UiModule {
             OwlDateTimeModule,
             OwlNativeDateTimeModule,
             OwlMomentDateTimeModule,
-            NgHeroiconsModule, i26.VflowComponent, i26.HandleComponent, i26.ResizableComponent, i26.MiniMapComponent, i26.NodeToolbarComponent, i26.CustomTemplateEdgeComponent, NgxEchartsModule.forRoot({ echarts: () => import('echarts') }), MATERIAL_MODULE, 
+            NgHeroiconsModule, i27.VflowComponent, i27.HandleComponent, i27.ResizableComponent, i27.MiniMapComponent, i27.NodeToolbarComponent, i27.CustomTemplateEdgeComponent, NgxEchartsModule.forRoot({ echarts: () => import('echarts') }), MATERIAL_MODULE, 
             // Module
             FormsModule,
             ReactiveFormsModule,
             OwlDateTimeModule,
             OwlNativeDateTimeModule,
-            NgHeroiconsModule, i3$1.MatSelectModule, i29.MatRadioModule, i30.MatButtonModule, i31.MatIconModule, i32.MatPaginatorModule, i33.MatTableModule, i34.MatSnackBarModule, i1$1.MatDialogModule, i36.MatCheckboxModule, i37.MatCardModule, i38.MatDatepickerModule, i39.MatTimepickerModule, i40.MatBadgeModule, i41.MatExpansionModule, i42.MatFormFieldModule, i43.MatMenuModule] });
+            NgHeroiconsModule, 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] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: UiModule, decorators: [{
             type: NgModule,
@@ -2985,5 +3113,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuthInterceptor, AuthStateService, BaseComponent, BaseDialogComponent, BaseResolver, BaseTableComponent, BreadcrumbService, ButtonComponent, ChartComponent, CheckboxComponent, CircleProgressBar, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, FlowConnection, FxLoadingService, FxStorageService, FxToastrService, FxUtils, HasPermissionDirective, HeroIconComponent, HttpLoaderFactory, HttpWrapper, InputComponent, LoadingPanel, MY_MOMENT_FORMATS, PermissionGuard, PermissionService, QuillStyleLoaderService, RadioButtonComponent, RadioButtonToggleComponent, RichTextAreaComponent, SearchBarComponent, SelectComponent, SkeletonTableLoadingComponent, SliderComponent, SwitchComponent, TabComponent, TabGroupComponent, TagComponent, ThemeService, ToastComponent, ToastContainerComponent, TranslationModule, TranslationService, TreeDiagram, TrimOnBlurDirective, UiModule };
+export { AuthInterceptor, AuthStateService, BaseComponent, BaseDialogComponent, BaseResolver, BaseTableComponent, BreadcrumbService, ButtonComponent, ChartComponent, CheckboxComponent, CircleProgressBar, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, FlowConnection, FxLoadingService, FxStorageService, FxToastrService, FxUtils, HasPermissionDirective, HeroIconComponent, HttpLoaderFactory, HttpWrapper, InputComponent, LoadingPanel, MY_MOMENT_FORMATS, PermissionGuard, PermissionService, QuillStyleLoaderService, RadioButtonComponent, RadioButtonToggleComponent, RichTextAreaComponent, SearchBarComponent, SelectComponent, SkeletonTableLoadingComponent, SliderComponent, SwitchComponent, TabComponent, TabGroupComponent, TableCell, TagComponent, ThemeService, ToastComponent, ToastContainerComponent, TranslationModule, TranslationService, TreeDiagram, TrimOnBlurDirective, UiModule };
 //# sourceMappingURL=fxlt-common-ui.mjs.map