@fxlt/common-ui 0.0.3 → 0.0.4-beta2

package/components.css

@@ -166,6 +166,58 @@ input[type='password'] {
 }
 
 /* system style */
+.txt-heading-03 {
+  @apply font-semibold text-2xl tracking-normal leading-10 text-text-primary;
+}
+.txt-heading-04 {
+  @apply font-semibold text-xl tracking-normal leading-7 text-text-primary;
+}
+.txt-heading-05 {
+  @apply font-semibold text-lg tracking-normal leading-7 text-text-primary;
+}
+.txt-heading-06 {
+  @apply font-semibold text-base tracking-normal leading-6 text-text-primary;
+}
+.txt-heading-07 {
+  @apply font-semibold text-sm tracking-normal leading-5 text-text-primary;
+}
+.txt-heading-compact-02 {
+  @apply font-semibold text-sm tracking-normal leading-5 text-text-primary;
+}
+.txt-body-compact-01 {
+  @apply font-normal text-sm tracking-normal leading-5 text-text-primary;
+}
+.txt-body-01 {
+  @apply font-normal text-sm tracking-normal leading-5 text-text-primary;
+}
+.txt-body-02 {
+  @apply font-normal text-base tracking-normal leading-6 text-text-primary;
+}
+.txt-body-medium-01 {
+  @apply font-medium text-sm tracking-normal leading-5 text-text-primary;
+}
+.txt-body-medium-02 {
+  @apply font-medium text-base tracking-normal leading-6 text-text-primary;
+}
+.txt-body-p-bold {
+  @apply font-semibold text-sm tracking-normal leading-5 text-text-primary;
+}
+.txt-body-p-normal {
+  @apply font-normal text-sm tracking-normal leading-5 text-text-primary;
+}
+.txt-utility-caption {
+  @apply font-normal text-xs tracking-normal leading-4 text-text-primary;
+}
+.txt-utility-button {
+  @apply font-semibold text-sm tracking-normal leading-5 text-text-primary;
+}
+.txt-utility-description {
+  @apply font-light text-xs tracking-normal leading-4 text-text-secondary;
+}
+.txt-tag-label {
+  @apply font-medium text-xs;
+}
+
 .txt-page-title {
   @apply text-3xl text-text-primary font-semibold tracking-normal leading-10;
 }
@@ -190,9 +242,6 @@ input[type='password'] {
 .txt-section-header {
   @apply mb-1 text-xl text-text-primary font-semibold tracking-normal leading-7;
 }
-.txt-dialog-header {
-  @apply text-xl text-text-primary font-semibold tracking-normal leading-7 px-xl py-semi;
-}
 .txt-section-subtitle {
   @apply text-sm text-text-secondary font-normal tracking-normal;
 }
@@ -393,9 +442,12 @@ input[type='password'] {
 .table-status-col {
   width: 200px;
 }
+.table-empty {
+  @apply w-full h-[100px] flex items-center justify-center;
+}
 .dialog-container {
   @apply rounded-lg border border-border-default;
 }
-.table-empty {
-  @apply w-full h-[100px] flex items-center justify-center;
+.dialog-header {
+  @apply px-xl py-semi;
 }

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, importProvidersFrom } from '@angular/core';
-import * as i31 from '@angular/material/paginator';
+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 { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import * as i32 from '@angular/material/table';
+import * as i33 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 i28 from '@angular/material/radio';
+import * as i29 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i29 from '@angular/material/button';
+import * as i30 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i30 from '@angular/material/icon';
+import * as i31 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i33 from '@angular/material/snack-bar';
+import * as i34 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import * as i35 from '@angular/material/checkbox';
+import * as i36 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i36 from '@angular/material/card';
+import * as i37 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i37 from '@angular/material/datepicker';
+import * as i38 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i38 from '@angular/material/timepicker';
+import * as i39 from '@angular/material/timepicker';
 import { MatTimepickerModule } from '@angular/material/timepicker';
-import * as i39 from '@angular/material/badge';
+import * as i40 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
-import * as i40 from '@angular/material/expansion';
+import * as i41 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
-import * as i41 from '@angular/material/form-field';
+import * as i42 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i42 from '@angular/material/menu';
+import * as i43 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 i25 from 'ngx-vflow';
+import * as i26 from 'ngx-vflow';
 import { Vflow } from 'ngx-vflow';
 import { OwlMomentDateTimeModule } from '@danielmoncada/angular-datetime-picker-moment-adapter';
 
@@ -1192,6 +1192,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                     args: [PLATFORM_ID]
                 }] }] });
 
+class ThemeService {
+    renderer;
+    lightClass = 'light_theme';
+    theme$ = new BehaviorSubject('dark');
+    themeStorageKey = 'host-theme';
+    constructor(rendererFactory) {
+        this.renderer = rendererFactory.createRenderer(null, null);
+        const savedTheme = localStorage.getItem(this.themeStorageKey);
+        if (savedTheme) {
+            this.setLightMode(savedTheme === 'light');
+        }
+        else {
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const isDark = document.body.classList.contains(this.lightClass) || prefersDark;
+            this.setLightMode(isDark);
+        }
+    }
+    setLightMode(enable) {
+        if (enable) {
+            this.renderer.addClass(document.body, this.lightClass);
+            this.theme$.next('light');
+            localStorage.setItem(this.themeStorageKey, 'light');
+        }
+        else {
+            this.renderer.removeClass(document.body, this.lightClass);
+            this.theme$.next('dark');
+            localStorage.setItem(this.themeStorageKey, 'dark');
+        }
+        window.dispatchEvent(new CustomEvent('theme-changed', { detail: { dark: !enable } }));
+    }
+    toggleTheme() {
+        const isLight = this.theme$.value === 'light';
+        this.setLightMode(!isLight);
+    }
+    themeChanges() {
+        return this.theme$.asObservable();
+    }
+    getCurrentTheme() {
+        return this.theme$.value;
+    }
+    isLight() {
+        return this.theme$.value === 'light';
+    }
+    getLogoPath() {
+        return 'assets/images/logo.png';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ThemeService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ThemeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i0.RendererFactory2 }] });
+
 const MATERIAL_MODULE = [
     MatSelectModule,
     MatRadioModule,
@@ -1863,7 +1917,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: i25.VflowComponent, selector: "vflow", inputs: ["view", "minZoom", "maxZoom", "background", "optimization", "entitiesSelectable", "keyboardShortcuts", "connection", "snapGrid", "elevateNodesOnSelect", "elevateEdgesOnSelect", "nodes", "alignmentHelper", "edges"], outputs: ["onComponentNodeEvent"] }, { kind: "directive", type: i25.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: 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FlowConnection, decorators: [{
             type: Component,
@@ -2662,6 +2716,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }] } });
 
+class TreeDiagram {
+    zone;
+    cdr;
+    data;
+    container;
+    root;
+    children;
+    lines = [];
+    svgWidth = 0;
+    svgHeight = 0;
+    resizeObserver;
+    rafId;
+    constructor(zone, cdr) {
+        this.zone = zone;
+        this.cdr = cdr;
+    }
+    ngAfterViewInit() {
+        this.zone.runOutsideAngular(() => {
+            this.resizeObserver = new ResizeObserver((entries) => {
+                const rect = entries[0].contentRect;
+                if (rect.width === 0 || rect.height === 0)
+                    return;
+                this.scheduleDraw();
+            });
+            this.resizeObserver.observe(this.container.nativeElement);
+            setTimeout(() => this.scheduleDraw(), 50);
+            setTimeout(() => this.scheduleDraw(), 150);
+        });
+        this.children.changes.subscribe(() => this.scheduleDraw());
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        if (this.rafId)
+            cancelAnimationFrame(this.rafId);
+    }
+    scheduleDraw() {
+        if (this.rafId)
+            cancelAnimationFrame(this.rafId);
+        this.rafId = requestAnimationFrame(() => {
+            this.drawLines();
+        });
+    }
+    drawLines() {
+        if (!this.root || !this.children.length)
+            return;
+        const containerEl = this.container.nativeElement;
+        const rect = containerEl.getBoundingClientRect();
+        if (rect.width === 0 || rect.height === 0)
+            return;
+        const rootRect = this.root.nativeElement.getBoundingClientRect();
+        const rootX = rootRect.left + rootRect.width / 2 - rect.left;
+        const rootBottomY = rootRect.bottom - rect.top;
+        const childRects = this.children.map(c => c.nativeElement.getBoundingClientRect());
+        const childCenters = childRects.map(r => ({
+            x: r.left + r.width / 2 - rect.left,
+            y: r.top - rect.top
+        }));
+        const horizontalY = childCenters[0].y - 24;
+        this.zone.run(() => {
+            this.svgWidth = rect.width;
+            this.svgHeight = rect.height;
+            this.lines = [
+                {
+                    x1: rootX,
+                    y1: rootBottomY,
+                    x2: rootX,
+                    y2: horizontalY
+                },
+                {
+                    x1: childCenters[0].x,
+                    y1: horizontalY,
+                    x2: childCenters[childCenters.length - 1].x,
+                    y2: horizontalY
+                },
+                ...childCenters.map(c => ({
+                    x1: c.x,
+                    y1: horizontalY,
+                    x2: c.x,
+                    y2: c.y
+                }))
+            ];
+        });
+        this.cdr.detectChanges();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TreeDiagram, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: TreeDiagram, isStandalone: false, selector: "fx-ui-tree-diagram", inputs: { data: "data" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "root", first: true, predicate: ["root"], descendants: true }, { propertyName: "children", predicate: ["child"], descendants: true }], ngImport: i0, template: "<div class=\"relative p-8\" #container>\n\n  <!-- ROOT -->\n  <div\n    #root\n    class=\"mx-auto w-fit bg-blue-600 text-white px-7 py-3 rounded-md font-semibold text-center\"\n  >\n    {{ data.label }}\n  </div>\n\n  <!-- CHILDREN -->\n  <div class=\"mt-16 flex justify-center gap-16\">\n    <div\n      *ngFor=\"let child of data.children\"\n      #child\n      class=\"w-48 bg-rose-600 text-white px-4 py-4 rounded-lg text-center\"\n    >\n      <div class=\"font-semibold text-lg\">{{ child.label }}</div>\n      <div class=\"mt-1 text-sm opacity-90\">{{ child.status }}</div>\n    </div>\n  </div>\n\n  <!-- SVG CONNECTORS -->\n  <svg\n    class=\"absolute inset-0 pointer-events-none\"\n    [attr.width]=\"svgWidth\"\n    [attr.height]=\"svgHeight\"\n  >\n    <line\n      *ngFor=\"let line of lines\"\n      [attr.x1]=\"line.x1\"\n      [attr.y1]=\"line.y1\"\n      [attr.x2]=\"line.x2\"\n      [attr.y2]=\"line.y2\"\n      stroke=\"#1f2937\"\n      stroke-width=\"2\"\n    />\n  </svg>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TreeDiagram, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-tree-diagram', standalone: false, template: "<div class=\"relative p-8\" #container>\n\n  <!-- ROOT -->\n  <div\n    #root\n    class=\"mx-auto w-fit bg-blue-600 text-white px-7 py-3 rounded-md font-semibold text-center\"\n  >\n    {{ data.label }}\n  </div>\n\n  <!-- CHILDREN -->\n  <div class=\"mt-16 flex justify-center gap-16\">\n    <div\n      *ngFor=\"let child of data.children\"\n      #child\n      class=\"w-48 bg-rose-600 text-white px-4 py-4 rounded-lg text-center\"\n    >\n      <div class=\"font-semibold text-lg\">{{ child.label }}</div>\n      <div class=\"mt-1 text-sm opacity-90\">{{ child.status }}</div>\n    </div>\n  </div>\n\n  <!-- SVG CONNECTORS -->\n  <svg\n    class=\"absolute inset-0 pointer-events-none\"\n    [attr.width]=\"svgWidth\"\n    [attr.height]=\"svgHeight\"\n  >\n    <line\n      *ngFor=\"let line of lines\"\n      [attr.x1]=\"line.x1\"\n      [attr.y1]=\"line.y1\"\n      [attr.x2]=\"line.x2\"\n      [attr.y2]=\"line.y2\"\n      stroke=\"#1f2937\"\n      stroke-width=\"2\"\n    />\n  </svg>\n\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { data: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ['container']
+            }], root: [{
+                type: ViewChild,
+                args: ['root']
+            }], children: [{
+                type: ViewChildren,
+                args: ['child']
+            }] } });
+
 const FX_COMPONENTS = [
     InputComponent,
     SelectComponent,
@@ -2686,6 +2843,7 @@ const FX_COMPONENTS = [
     SkeletonTableLoadingComponent,
     FlowConnection,
     CircleProgressBar,
+    TreeDiagram,
 ];
 
 class ConfirmationDialogComponent {
@@ -2741,7 +2899,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, 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, ConfirmationDialogComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             OwlDateTimeModule,
@@ -2749,14 +2907,14 @@ class UiModule {
             OwlMomentDateTimeModule,
             HasPermissionDirective,
             TrimOnBlurDirective,
-            NgHeroiconsModule, i25.VflowComponent, i25.HandleComponent, i25.ResizableComponent, i25.SelectableDirective, i25.MiniMapComponent, i25.NodeToolbarComponent, i25.CustomTemplateEdgeComponent, i25.DragHandleDirective, i25.ConnectionControllerDirective, i25.NodeHtmlTemplateDirective, i25.NodeSvgTemplateDirective, i25.GroupNodeTemplateDirective, i25.EdgeLabelHtmlTemplateDirective, i25.EdgeTemplateDirective, i25.ConnectionTemplateDirective, i25.HandleTemplateDirective, i2$3.NgxEchartsModule, i3$1.MatSelectModule, i28.MatRadioModule, i29.MatButtonModule, i30.MatIconModule, i31.MatPaginatorModule, i32.MatTableModule, i33.MatSnackBarModule, i1$1.MatDialogModule, i35.MatCheckboxModule, i36.MatCardModule, i37.MatDatepickerModule, i38.MatTimepickerModule, i39.MatBadgeModule, i40.MatExpansionModule, i41.MatFormFieldModule, i42.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, ConfirmationDialogComponent, 
+            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, 
             // Module
             FormsModule,
             ReactiveFormsModule,
             OwlDateTimeModule,
             OwlNativeDateTimeModule,
             HasPermissionDirective,
-            NgHeroiconsModule, i3$1.MatSelectModule, i28.MatRadioModule, i29.MatButtonModule, i30.MatIconModule, i31.MatPaginatorModule, i32.MatTableModule, i33.MatSnackBarModule, i1$1.MatDialogModule, i35.MatCheckboxModule, i36.MatCardModule, i37.MatDatepickerModule, i38.MatTimepickerModule, i39.MatBadgeModule, i40.MatExpansionModule, i41.MatFormFieldModule, i42.MatMenuModule] });
+            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] });
     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 },
@@ -2766,13 +2924,13 @@ class UiModule {
             OwlDateTimeModule,
             OwlNativeDateTimeModule,
             OwlMomentDateTimeModule,
-            NgHeroiconsModule, i25.VflowComponent, i25.HandleComponent, i25.ResizableComponent, i25.MiniMapComponent, i25.NodeToolbarComponent, i25.CustomTemplateEdgeComponent, NgxEchartsModule.forRoot({ echarts: () => import('echarts') }), MATERIAL_MODULE, 
+            NgHeroiconsModule, i26.VflowComponent, i26.HandleComponent, i26.ResizableComponent, i26.MiniMapComponent, i26.NodeToolbarComponent, i26.CustomTemplateEdgeComponent, NgxEchartsModule.forRoot({ echarts: () => import('echarts') }), MATERIAL_MODULE, 
             // Module
             FormsModule,
             ReactiveFormsModule,
             OwlDateTimeModule,
             OwlNativeDateTimeModule,
-            NgHeroiconsModule, i3$1.MatSelectModule, i28.MatRadioModule, i29.MatButtonModule, i30.MatIconModule, i31.MatPaginatorModule, i32.MatTableModule, i33.MatSnackBarModule, i1$1.MatDialogModule, i35.MatCheckboxModule, i36.MatCardModule, i37.MatDatepickerModule, i38.MatTimepickerModule, i39.MatBadgeModule, i40.MatExpansionModule, i41.MatFormFieldModule, i42.MatMenuModule] });
+            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] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: UiModule, decorators: [{
             type: NgModule,
@@ -2820,5 +2978,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, ToastComponent, ToastContainerComponent, TranslationModule, TranslationService, 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, TagComponent, ThemeService, ToastComponent, ToastContainerComponent, TranslationModule, TranslationService, TreeDiagram, TrimOnBlurDirective, UiModule };
 //# sourceMappingURL=fxlt-common-ui.mjs.map