@fxlt/common-ui 0.0.4-rc2 → 0.0.5-rc1

package/fonts.css

@@ -47,6 +47,76 @@
   font-style: normal;
 }
 
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-Thin.ttf') format('truetype');
+  font-weight: 200;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Orbitron';
+  src: url('./orbitron/Orbitron-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Orbitron';
+  src: url('./orbitron/Orbitron-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Orbitron';
+  src: url('./orbitron/Orbitron-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Orbitron';
+  src: url('./orbitron/Orbitron-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
 @font-face {
   font-family: 'SpaceMonoRegular';
   src: url('./SpaceMono-Regular.ttf') format('truetype');

package/index.d.ts

@@ -1,41 +1,42 @@
 import * as i0 from '@angular/core';
 import { OnDestroy, Injector, ApplicationRef, OnInit, AfterViewInit, ChangeDetectorRef, Type, EventEmitter, ModuleWithProviders, TemplateRef, ViewContainerRef, ElementRef, RendererFactory2, AfterContentInit, QueryList, Renderer2, OnChanges, NgZone } from '@angular/core';
-import * as i39 from '@angular/material/paginator';
+import * as _fxlt_common_ui from '@fxlt/common-ui';
+import * as i40 from '@angular/material/paginator';
 import { MatPaginator } from '@angular/material/paginator';
-import * as i40 from '@angular/material/table';
+import * as i41 from '@angular/material/table';
 import { MatTableDataSource, MatTable } from '@angular/material/table';
 import { HttpClient, HttpEvent, HttpErrorResponse, HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
 import * as rxjs from 'rxjs';
 import { Observable, Subject } from 'rxjs';
-import * as i27 from '@angular/forms';
+import * as i28 from '@angular/forms';
 import { NgForm, NgControl, ControlValueAccessor, ValidationErrors } from '@angular/forms';
-import * as i42 from '@angular/material/dialog';
+import * as i43 from '@angular/material/dialog';
 import { MatDialogRef, MatDialog } from '@angular/material/dialog';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import * as i1 from '@ngx-translate/core';
 import { TranslateService } from '@ngx-translate/core';
 import { CanActivate, Router } from '@angular/router';
 import { EChartsOption } from 'echarts';
-import * as i33 from 'ngx-vflow';
+import * as i34 from 'ngx-vflow';
 import { Node, Edge, Connection } from 'ngx-vflow';
-import * as i26 from '@angular/common';
-import * as i28 from '@danielmoncada/angular-datetime-picker';
-import * as i29 from '@danielmoncada/angular-datetime-picker-moment-adapter';
-import * as i32 from '@dimaslz/ng-heroicons';
-import * as i34 from 'ngx-echarts';
-import * as i35 from '@angular/material/select';
-import * as i36 from '@angular/material/radio';
-import * as i37 from '@angular/material/button';
-import * as i38 from '@angular/material/icon';
-import * as i41 from '@angular/material/snack-bar';
-import * as i43 from '@angular/material/checkbox';
-import * as i44 from '@angular/material/card';
-import * as i45 from '@angular/material/datepicker';
-import * as i46 from '@angular/material/timepicker';
-import * as i47 from '@angular/material/badge';
-import * as i48 from '@angular/material/expansion';
-import * as i49 from '@angular/material/form-field';
-import * as i50 from '@angular/material/menu';
+import * as i27 from '@angular/common';
+import * as i29 from '@danielmoncada/angular-datetime-picker';
+import * as i30 from '@danielmoncada/angular-datetime-picker-moment-adapter';
+import * as i33 from '@dimaslz/ng-heroicons';
+import * as i35 from 'ngx-echarts';
+import * as i36 from '@angular/material/select';
+import * as i37 from '@angular/material/radio';
+import * as i38 from '@angular/material/button';
+import * as i39 from '@angular/material/icon';
+import * as i42 from '@angular/material/snack-bar';
+import * as i44 from '@angular/material/checkbox';
+import * as i45 from '@angular/material/card';
+import * as i46 from '@angular/material/datepicker';
+import * as i47 from '@angular/material/timepicker';
+import * as i48 from '@angular/material/badge';
+import * as i49 from '@angular/material/expansion';
+import * as i50 from '@angular/material/form-field';
+import * as i51 from '@angular/material/menu';
 
 declare abstract class BaseComponent implements OnDestroy {
     protected injector: Injector;
@@ -111,6 +112,7 @@ declare class BaseTableComponent<T = any> extends BaseComponent implements OnIni
     toastr: FxToastrService;
     _lock: boolean;
     keywordChange$: Subject<string>;
+    dataSourcePlaceholder: any[];
     config: {
         create?: {
             dialog?: Type<{}>;
@@ -162,7 +164,9 @@ declare class BaseTableComponent<T = any> extends BaseComponent implements OnIni
     view(model: any): Promise<void>;
     delete(model: any): Promise<void>;
     remove(model: any): Promise<any>;
-    value(model: any, key: string): any;
+    tagClass(tag: string): _fxlt_common_ui.TagType;
+    capitalize(label: string): string;
+    value(model: any, key: string, defaultValue?: any): any;
     toggleExpand(element: any): void;
     updateStatus(params: any): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseTableComponent<any>, never>;
@@ -237,6 +241,7 @@ declare class FxUtils {
     static getTagClass(key: string, isCriticalExist?: boolean): TagType;
     static validateEmail(value: string): boolean;
     static isStrongPassword(password: string): boolean;
+    static formatSizeUnits(bytes: number): string;
 }
 
 declare function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader;
@@ -686,8 +691,9 @@ declare class TagComponent {
     type: TagType;
     rounded: boolean;
     icon?: any;
+    solid: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<TagComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TagComponent, "fx-ui-tag", never, { "label": { "alias": "label"; "required": false; }; "type": { "alias": "type"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TagComponent, "fx-ui-tag", never, { "label": { "alias": "label"; "required": false; }; "type": { "alias": "type"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "solid": { "alias": "solid"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 type IChartType = 'bar' | 'pie' | 'line' | 'sunburst' | 'radar' | 'auto';
@@ -700,13 +706,18 @@ declare class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
     palette?: string[];
     height: string;
     loading: boolean;
+    pieLegendAlign: any;
+    pieLegendPosition: any;
+    showPieLabel: boolean;
+    labelFontFamily: string;
     chartClick: EventEmitter<any>;
     chartInit: EventEmitter<any>;
     labelFontSize: number;
-    labelFontFamily: string;
+    canInit: boolean;
     chartOptions: EChartsOption;
     private chartInstance?;
     private resizeObserver?;
+    private intersectionObserver?;
     constructor(ref: ElementRef, cdr: ChangeDetectorRef);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -720,7 +731,7 @@ declare class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
     private buildOptions;
     private resolvePalette;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChartComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ChartComponent, "fx-ui-chart", never, { "type": { "alias": "type"; "required": false; }; "data": { "alias": "data"; "required": false; }; "options": { "alias": "options"; "required": false; }; "palette": { "alias": "palette"; "required": false; }; "height": { "alias": "height"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; }, { "chartClick": "chartClick"; "chartInit": "chartInit"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChartComponent, "fx-ui-chart", never, { "type": { "alias": "type"; "required": false; }; "data": { "alias": "data"; "required": false; }; "options": { "alias": "options"; "required": false; }; "palette": { "alias": "palette"; "required": false; }; "height": { "alias": "height"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "pieLegendAlign": { "alias": "pieLegendAlign"; "required": false; }; "pieLegendPosition": { "alias": "pieLegendPosition"; "required": false; }; "showPieLabel": { "alias": "showPieLabel"; "required": false; }; "labelFontFamily": { "alias": "labelFontFamily"; "required": false; }; }, { "chartClick": "chartClick"; "chartInit": "chartInit"; }, never, never, false, never>;
 }
 
 declare class SliderComponent extends FxComponent<any> implements AfterViewInit {
@@ -849,6 +860,13 @@ declare class TreeDiagram implements AfterViewInit, OnDestroy {
     static ɵcmp: i0.ɵɵComponentDeclaration<TreeDiagram, "fx-ui-tree-diagram", never, { "data": { "alias": "data"; "required": false; }; }, {}, never, never, false, never>;
 }
 
+declare class TableCell {
+    loading: boolean;
+    skeletonClass: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableCell, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TableCell, "fx-ui-table-cell", never, { "loading": { "alias": "loading"; "required": true; }; "skeletonClass": { "alias": "skeletonClass"; "required": false; }; }, {}, never, ["*"], false, never>;
+}
+
 declare class ConfirmationDialogComponent {
     private ref;
     bindings: any;
@@ -875,9 +893,9 @@ declare const MY_MOMENT_FORMATS: {
 };
 declare class UiModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<UiModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<UiModule, [typeof InputComponent, typeof SelectComponent, typeof RadioButtonComponent, typeof CheckboxComponent, typeof DndUploadComponent, typeof ButtonComponent, typeof RadioButtonToggleComponent, typeof DatetimePicker, typeof LoadingPanel, typeof SearchBarComponent, typeof TabGroupComponent, typeof TabComponent, typeof HeroIconComponent, typeof ToastComponent, typeof ToastContainerComponent, typeof TagComponent, typeof ChartComponent, typeof SliderComponent, typeof SwitchComponent, typeof RichTextAreaComponent, typeof SkeletonTableLoadingComponent, typeof FlowConnection, typeof CircleProgressBar, typeof TreeDiagram, typeof ConfirmationDialogComponent], [typeof i26.CommonModule, typeof i27.FormsModule, typeof i27.ReactiveFormsModule, typeof i28.OwlDateTimeModule, typeof i28.OwlNativeDateTimeModule, typeof i29.OwlMomentDateTimeModule, typeof HasPermissionDirective, typeof TrimOnBlurDirective, typeof i32.NgHeroiconsModule, typeof i33.VflowComponent, typeof i33.HandleComponent, typeof i33.ResizableComponent, typeof i33.SelectableDirective, typeof i33.MiniMapComponent, typeof i33.NodeToolbarComponent, typeof i33.CustomTemplateEdgeComponent, typeof i33.DragHandleDirective, typeof i33.ConnectionControllerDirective, typeof i33.NodeHtmlTemplateDirective, typeof i33.NodeSvgTemplateDirective, typeof i33.GroupNodeTemplateDirective, typeof i33.EdgeLabelHtmlTemplateDirective, typeof i33.EdgeTemplateDirective, typeof i33.ConnectionTemplateDirective, typeof i33.HandleTemplateDirective, typeof i34.NgxEchartsModule, typeof i35.MatSelectModule, typeof i36.MatRadioModule, typeof i37.MatButtonModule, typeof i38.MatIconModule, typeof i39.MatPaginatorModule, typeof i40.MatTableModule, typeof i41.MatSnackBarModule, typeof i42.MatDialogModule, typeof i43.MatCheckboxModule, typeof i44.MatCardModule, typeof i45.MatDatepickerModule, typeof i46.MatTimepickerModule, typeof i47.MatBadgeModule, typeof i48.MatExpansionModule, typeof i49.MatFormFieldModule, typeof i50.MatMenuModule], [typeof InputComponent, typeof SelectComponent, typeof RadioButtonComponent, typeof CheckboxComponent, typeof DndUploadComponent, typeof ButtonComponent, typeof RadioButtonToggleComponent, typeof DatetimePicker, typeof LoadingPanel, typeof SearchBarComponent, typeof TabGroupComponent, typeof TabComponent, typeof HeroIconComponent, typeof ToastComponent, typeof ToastContainerComponent, typeof TagComponent, typeof ChartComponent, typeof SliderComponent, typeof SwitchComponent, typeof RichTextAreaComponent, typeof SkeletonTableLoadingComponent, typeof FlowConnection, typeof CircleProgressBar, typeof TreeDiagram, typeof ConfirmationDialogComponent, typeof i27.FormsModule, typeof i27.ReactiveFormsModule, typeof i28.OwlDateTimeModule, typeof i28.OwlNativeDateTimeModule, typeof HasPermissionDirective, typeof i32.NgHeroiconsModule, typeof i35.MatSelectModule, typeof i36.MatRadioModule, typeof i37.MatButtonModule, typeof i38.MatIconModule, typeof i39.MatPaginatorModule, typeof i40.MatTableModule, typeof i41.MatSnackBarModule, typeof i42.MatDialogModule, typeof i43.MatCheckboxModule, typeof i44.MatCardModule, typeof i45.MatDatepickerModule, typeof i46.MatTimepickerModule, typeof i47.MatBadgeModule, typeof i48.MatExpansionModule, typeof i49.MatFormFieldModule, typeof i50.MatMenuModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<UiModule, [typeof InputComponent, typeof SelectComponent, typeof RadioButtonComponent, typeof CheckboxComponent, typeof DndUploadComponent, typeof ButtonComponent, typeof RadioButtonToggleComponent, typeof DatetimePicker, typeof LoadingPanel, typeof SearchBarComponent, typeof TabGroupComponent, typeof TabComponent, typeof HeroIconComponent, typeof ToastComponent, typeof ToastContainerComponent, typeof TagComponent, typeof ChartComponent, typeof SliderComponent, typeof SwitchComponent, typeof RichTextAreaComponent, typeof SkeletonTableLoadingComponent, typeof FlowConnection, typeof CircleProgressBar, typeof TreeDiagram, typeof TableCell, typeof ConfirmationDialogComponent], [typeof i27.CommonModule, typeof i28.FormsModule, typeof i28.ReactiveFormsModule, typeof i29.OwlDateTimeModule, typeof i29.OwlNativeDateTimeModule, typeof i30.OwlMomentDateTimeModule, typeof HasPermissionDirective, typeof TrimOnBlurDirective, typeof i33.NgHeroiconsModule, typeof i34.VflowComponent, typeof i34.HandleComponent, typeof i34.ResizableComponent, typeof i34.SelectableDirective, typeof i34.MiniMapComponent, typeof i34.NodeToolbarComponent, typeof i34.CustomTemplateEdgeComponent, typeof i34.DragHandleDirective, typeof i34.ConnectionControllerDirective, typeof i34.NodeHtmlTemplateDirective, typeof i34.NodeSvgTemplateDirective, typeof i34.GroupNodeTemplateDirective, typeof i34.EdgeLabelHtmlTemplateDirective, typeof i34.EdgeTemplateDirective, typeof i34.ConnectionTemplateDirective, typeof i34.HandleTemplateDirective, typeof i35.NgxEchartsModule, typeof i36.MatSelectModule, typeof i37.MatRadioModule, typeof i38.MatButtonModule, typeof i39.MatIconModule, typeof i40.MatPaginatorModule, typeof i41.MatTableModule, typeof i42.MatSnackBarModule, typeof i43.MatDialogModule, typeof i44.MatCheckboxModule, typeof i45.MatCardModule, typeof i46.MatDatepickerModule, typeof i47.MatTimepickerModule, typeof i48.MatBadgeModule, typeof i49.MatExpansionModule, typeof i50.MatFormFieldModule, typeof i51.MatMenuModule], [typeof InputComponent, typeof SelectComponent, typeof RadioButtonComponent, typeof CheckboxComponent, typeof DndUploadComponent, typeof ButtonComponent, typeof RadioButtonToggleComponent, typeof DatetimePicker, typeof LoadingPanel, typeof SearchBarComponent, typeof TabGroupComponent, typeof TabComponent, typeof HeroIconComponent, typeof ToastComponent, typeof ToastContainerComponent, typeof TagComponent, typeof ChartComponent, typeof SliderComponent, typeof SwitchComponent, typeof RichTextAreaComponent, typeof SkeletonTableLoadingComponent, typeof FlowConnection, typeof CircleProgressBar, typeof TreeDiagram, typeof TableCell, typeof ConfirmationDialogComponent, typeof i28.FormsModule, typeof i28.ReactiveFormsModule, typeof i29.OwlDateTimeModule, typeof i29.OwlNativeDateTimeModule, typeof HasPermissionDirective, typeof i33.NgHeroiconsModule, typeof i36.MatSelectModule, typeof i37.MatRadioModule, typeof i38.MatButtonModule, typeof i39.MatIconModule, typeof i40.MatPaginatorModule, typeof i41.MatTableModule, typeof i42.MatSnackBarModule, typeof i43.MatDialogModule, typeof i44.MatCheckboxModule, typeof i45.MatCardModule, typeof i46.MatDatepickerModule, typeof i47.MatTimepickerModule, typeof i48.MatBadgeModule, typeof i49.MatExpansionModule, typeof i50.MatFormFieldModule, typeof i51.MatMenuModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<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 };
+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 };
 export type { Breadcrumb, IChartType, IRadioButton, TableResult, TagType, ToastData, TreeNode, UploadResult };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fxlt/common-ui",
-  "version": "0.0.4-rc2",
+  "version": "0.0.5-rc1",
   "license": "MIT",
   "main": "bundles/ui.umd.js",
   "module": "fesm2022/fxlt-common-ui.mjs",
@@ -36,8 +36,6 @@
     "ngx-vflow": "^1.16.2"
   },
   "exports": {
-    "./SpaceMono-Regular.ttf": "./SpaceMono-Regular.ttf",
-    "./BeVietnamPro-Regular.ttf": "./BeVietnamPro-Regular.ttf",
     "./tailwind-config": "./tailwind.config.js",
     "./tailwind.css": "./tailwind.css",
     "./theme.css": "./theme.css",

package/src/lib/styles/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/src/lib/styles/components.css

@@ -93,7 +93,7 @@
   padding-top: 4px !important;
   padding-bottom: 4px !important;
   line-height: 24px !important;
-  font-family: 'BeVietnamProRegular';
+  font-family: 'BeVietnamPro';
 }
 
 .mdc-data-table__row {
@@ -104,11 +104,7 @@
 .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: 'BeVietnamProRegular';
+  font-family: 'BeVietnamPro';
 }
 
 .mat-mdc-cell {
@@ -181,6 +177,9 @@ input[type='password'] {
 .txt-heading-07 {
   @apply font-semibold text-sm tracking-normal leading-5 text-text-primary;
 }
+.txt-heading-table {
+  @apply text-base font-dmsans font-semibold text-text-primary tracking-tight;
+}
 .txt-heading-compact-02 {
   @apply font-semibold text-sm tracking-normal leading-5 text-text-primary;
 }
@@ -381,6 +380,27 @@ input[type='password'] {
 .tag-information {
   @apply tag-common bg-information/10;
 }
+.tag-default-solid {
+  @apply tag-common bg-bg-hover;
+}
+.tag-success-solid {
+  @apply tag-common bg-success;
+}
+.tag-warning-solid {
+  @apply tag-common bg-warning;
+}
+.tag-danger-solid {
+  @apply tag-common bg-danger;
+}
+.tag-critical-solid {
+  @apply tag-common bg-critical;
+}
+.tag-discovery-solid {
+  @apply tag-common bg-discovery;
+}
+.tag-information-solid {
+  @apply tag-common bg-information;
+}
 .tag-square {
   @apply rounded px-semi py-small;
 }
@@ -389,25 +409,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;
@@ -451,3 +458,16 @@ input[type='password'] {
 .dialog-header {
   @apply px-xl py-semi;
 }
+.border-gradient-primary {
+  border: 1px solid transparent;
+  background:
+    linear-gradient(var(--surface, #fff), var(--surface, #fff)) padding-box,
+    linear-gradient(
+      135deg,
+      rgb(var(--gradient-primary-start)),
+      rgb(var(--gradient-primary-end))
+    ) border-box;
+}
+.skeleton-load {
+  @apply rounded bg-gray-200 animate-pulse motion-reduce:animate-none;
+}

package/src/lib/styles/fonts.css

@@ -47,6 +47,76 @@
   font-style: normal;
 }
 
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-Thin.ttf') format('truetype');
+  font-weight: 200;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Orbitron';
+  src: url('./orbitron/Orbitron-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Orbitron';
+  src: url('./orbitron/Orbitron-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Orbitron';
+  src: url('./orbitron/Orbitron-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Orbitron';
+  src: url('./orbitron/Orbitron-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
 @font-face {
   font-family: 'SpaceMonoRegular';
   src: url('./SpaceMono-Regular.ttf') format('truetype');

package/src/lib/styles/theme.css

@@ -1,4 +1,6 @@
 .light_theme {
+  --gradient-primary-start: 156 129 255;
+  --gradient-primary-end: 4 255 135;
   --bg-primary: 255 255 255;
   --primary: 236 25 56;
   --success: 15 140 96;
@@ -31,6 +33,8 @@
 }
 
 :root {
+  --gradient-primary-start: 156 129 255;
+  --gradient-primary-end: 4 255 135;
   --bg-primary: 12 14 18;
   --primary: 236 25 56;
   --success: 76 175 80;
@@ -40,7 +44,7 @@
   --discovery: 119 113 227;
   --information: 62 175 240;
   --text-primary: 247 247 247;
-  --text-secondary: 148 151 156;
+  --text-secondary: 97 101 108;
   --border-default: 55 58 65;
   --text-placeholder: 133 136 142;
   --step-bg: 255 255 255;

package/src/lib/ui/components/chart/chart.component.html

@@ -1,13 +1,15 @@
 <div class="chart-wrapper" [style.height]="height" [class.loading]="loading">
-  <div
-    echarts
-    [options]="chartOptions"
-    (chartInit)="onChartInit($event)"
-    (chartClick)="onChartClick($event)"
-    class="w-full h-full">
-  </div>
+  <ng-container *ngIf="canInit">
+    <div
+      echarts
+      [options]="chartOptions"
+      (chartInit)="onChartInit($event)"
+      (chartClick)="onChartClick($event)"
+      class="w-full h-full">
+    </div>
+  </ng-container>
 
   <div class="chart-loader" *ngIf="loading">
     <span class="txt-default">Loading...</span>
   </div>
-</div>
+</div>

package/src/lib/ui/components/table-cell/table-cell.component.html

@@ -0,0 +1,7 @@
+@if (!loading) {
+  <div animate.enter="fade-in-animation" class="inline-block my-normal">
+    <ng-content />
+  </div>
+} @else {
+  <div animate.enter="fade-in-animation" class="skeleton-load my-semi" [class]="skeletonClass"></div>
+}

package/src/lib/ui/components/tag/tag.component.html

@@ -1,43 +1,15 @@
 <div
-  class="flex flex-row gap-1"
-  [class]="rounded ? 'tag-round' : 'tag-square'"
-  [ngClass]="{
-    'tag-critical': type === 'critical',
-    'tag-success': type === 'success',
-    'tag-warning': type === 'warning',
-    'tag-information': type === 'information',
-    'tag-discovery': type === 'discovery',
-    'tag-danger': type === 'danger',
-    'tag-default': type === 'default'
-  }"
+  [class]="`flex flex-row gap-small ${rounded ? 'tag-round' : 'tag-square'} tag-${type}${solid ? '-solid' : ''}`"
 >
-  @if(icon){<fx-ui-hero-icon
-    class="flex"
+  @if(icon){
+  <fx-ui-hero-icon
+    [class]="`flex txt-tag-${type} ${solid ? 'text-white': ''}`"
     [icon]="icon"
     [size]="18"
-    [ngClass]="{
-    'text-critical': type === 'critical',
-    'text-success': type === 'success',
-    'text-warning': type === 'warning',
-    'text-information': type === 'information',
-    'text-discovery': type === 'discovery',
-    'text-danger': type === 'danger',
-    'text-text-primary': type === 'default',
-  }"
-  ></fx-ui-hero-icon
-  >}
+  ></fx-ui-hero-icon>
+  }
 
-  <div
-    [ngClass]="{
-      'txt-tag-critical': type === 'critical',
-      'txt-tag-success': type === 'success',
-      'txt-tag-warning': type === 'warning',
-      'txt-tag-information': type === 'information',
-      'txt-tag-discovery': type === 'discovery',
-      'txt-tag-danger': type === 'danger',
-      'txt-tag-default': type === 'default',
-    }"
-  >
+  <div [class]="`txt-tag-${type} ${solid ? 'text-white': ''}`">
     {{ label }}
   </div>
 </div>

package/tailwind.config.js

@@ -2,6 +2,8 @@ module.exports = {
   theme: {
     extend: {
       colors: {
+        'gradient-primary-start': 'rgb(var(--gradient-primary-start) / <alpha-value>)',
+        'gradient-primary-end': 'rgb(var(--gradient-primary-end) / <alpha-value>)',
         primary: 'rgb(var(--primary) / <alpha-value>)',
         success: 'rgb(var(--success) / <alpha-value>)',
         danger: 'rgb(var(--danger) / <alpha-value>)',
@@ -37,6 +39,10 @@ module.exports = {
           primary: 'rgb(var(--button-primary) / <alpha-value>)',
         },
       },
+      backgroundImage: {
+        'gradient-primary':
+          'linear-gradient(135deg, rgb(var(--gradient-primary-start)) 0%, rgb(var(--gradient-primary-end)) 100%)',
+      },
       screens: {
         sm: '640px',
         md: '960px',
@@ -62,6 +68,9 @@ module.exports = {
       },
       fontFamily:{
         spmono: ['SpaceMonoRegular', 'monospace'],
+        dmsans: ['DMSans', 'sans-serif'],
+        orbitron: ['Orbitron', 'sans-serif'],
+        bevn: ['BeVietnamPro', 'sans-serif'],
       },
       fontSize: {
         xs: '0.75rem',

package/theme.css

@@ -1,4 +1,6 @@
 .light_theme {
+  --gradient-primary-start: 156 129 255;
+  --gradient-primary-end: 4 255 135;
   --bg-primary: 255 255 255;
   --primary: 236 25 56;
   --success: 15 140 96;
@@ -31,6 +33,8 @@
 }
 
 :root {
+  --gradient-primary-start: 156 129 255;
+  --gradient-primary-end: 4 255 135;
   --bg-primary: 12 14 18;
   --primary: 236 25 56;
   --success: 76 175 80;
@@ -40,7 +44,7 @@
   --discovery: 119 113 227;
   --information: 62 175 240;
   --text-primary: 247 247 247;
-  --text-secondary: 148 151 156;
+  --text-secondary: 97 101 108;
   --border-default: 55 58 65;
   --text-placeholder: 133 136 142;
   --step-bg: 255 255 255;