@fxlt/common-ui 0.0.4-rc1 → 0.0.4

package/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 {
@@ -108,7 +108,7 @@
   padding-bottom: 8px !important;
   padding-left: 16px !important;
   padding-right: 16px !important; */
-  font-family: 'BeVietnamProRegular';
+  font-family: 'BeVietnamPro';
 }
 
 .mat-mdc-cell {
@@ -181,6 +181,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 +384,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;
 }
@@ -451,3 +475,13 @@ 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;
+}

package/fesm2022/fxlt-common-ui.mjs

@@ -317,6 +317,7 @@ class FxUtils {
             case 'failed':
             case 'inactive':
             case 'critical':
+            case 'stopped':
                 return 'critical';
             case 'high':
                 if (isCriticalExist) {
@@ -327,13 +328,16 @@ class FxUtils {
             case 'processing':
             case 'paused':
             case 'medium':
+            case 'warning':
                 return 'warning';
             case 'completed':
             case 'success':
             case 'active':
             case 'low':
+            case 'running':
                 return 'success';
             case 'queue':
+            case 'waiting':
             case 'info':
                 return 'information';
             case 'discovery':
@@ -1311,7 +1315,7 @@ class ChartComponent {
     chartClick = new EventEmitter();
     chartInit = new EventEmitter();
     labelFontSize = 12;
-    labelFontFamily = 'BeVietnamProRegular';
+    labelFontFamily = 'BeVietnamPro';
     chartOptions = {};
     chartInstance;
     resizeObserver;
@@ -1417,7 +1421,7 @@ class ChartComponent {
                 top: 'bottom',
                 right: 10,
                 textStyle: {
-                    fontFamily: "BeVietnamProRegular",
+                    fontFamily: "BeVietnamPro",
                     color: FxUtils.convertColorFromVariable('--text-primary'),
                     fontSize: 12,
                     fontWeight: 500,
@@ -2700,12 +2704,13 @@ class TagComponent {
     type = 'default';
     rounded = true;
     icon;
+    solid = false;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TagComponent, isStandalone: false, selector: "fx-ui-tag", inputs: { label: "label", type: "type", rounded: "rounded", icon: "icon" }, ngImport: i0, template: "<div\n  class=\"flex flex-row gap-1\"\n  [class]=\"rounded ? 'tag-round' : 'tag-square'\"\n  [ngClass]=\"{\n    'tag-critical': type === 'critical',\n    'tag-success': type === 'success',\n    'tag-warning': type === 'warning',\n    'tag-information': type === 'information',\n    'tag-discovery': type === 'discovery',\n    'tag-danger': type === 'danger',\n    'tag-default': type === 'default'\n  }\"\n>\n  @if(icon){<fx-ui-hero-icon\n    class=\"flex\"\n    [icon]=\"icon\"\n    [size]=\"18\"\n    [ngClass]=\"{\n    'text-critical': type === 'critical',\n    'text-success': type === 'success',\n    'text-warning': type === 'warning',\n    'text-information': type === 'information',\n    'text-discovery': type === 'discovery',\n    'text-danger': type === 'danger',\n    'text-text-primary': type === 'default',\n  }\"\n  ></fx-ui-hero-icon\n  >}\n\n  <div\n    [ngClass]=\"{\n      'txt-tag-critical': type === 'critical',\n      'txt-tag-success': type === 'success',\n      'txt-tag-warning': type === 'warning',\n      'txt-tag-information': type === 'information',\n      'txt-tag-discovery': type === 'discovery',\n      'txt-tag-danger': type === 'danger',\n      'txt-tag-default': type === 'default',\n    }\"\n  >\n    {{ label }}\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["icon", "solid", "outline", "size", "color", "class"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TagComponent, isStandalone: false, selector: "fx-ui-tag", inputs: { label: "label", type: "type", rounded: "rounded", icon: "icon", solid: "solid" }, ngImport: i0, template: "<div\n  [class]=\"`flex flex-row gap-small ${rounded ? 'tag-round' : 'tag-square'} tag-${type}${solid ? '-solid' : ''}`\"\n>\n  @if(icon){\n  <fx-ui-hero-icon\n    [class]=\"`flex txt-tag-${type} ${solid ? 'text-white': ''}`\"\n    [icon]=\"icon\"\n    [size]=\"18\"\n  ></fx-ui-hero-icon>\n  }\n\n  <div [class]=\"`txt-tag-${type} ${solid ? 'text-white': ''}`\">\n    {{ label }}\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["icon", "solid", "outline", "size", "color", "class"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-tag', standalone: false, template: "<div\n  class=\"flex flex-row gap-1\"\n  [class]=\"rounded ? 'tag-round' : 'tag-square'\"\n  [ngClass]=\"{\n    'tag-critical': type === 'critical',\n    'tag-success': type === 'success',\n    'tag-warning': type === 'warning',\n    'tag-information': type === 'information',\n    'tag-discovery': type === 'discovery',\n    'tag-danger': type === 'danger',\n    'tag-default': type === 'default'\n  }\"\n>\n  @if(icon){<fx-ui-hero-icon\n    class=\"flex\"\n    [icon]=\"icon\"\n    [size]=\"18\"\n    [ngClass]=\"{\n    'text-critical': type === 'critical',\n    'text-success': type === 'success',\n    'text-warning': type === 'warning',\n    'text-information': type === 'information',\n    'text-discovery': type === 'discovery',\n    'text-danger': type === 'danger',\n    'text-text-primary': type === 'default',\n  }\"\n  ></fx-ui-hero-icon\n  >}\n\n  <div\n    [ngClass]=\"{\n      'txt-tag-critical': type === 'critical',\n      'txt-tag-success': type === 'success',\n      'txt-tag-warning': type === 'warning',\n      'txt-tag-information': type === 'information',\n      'txt-tag-discovery': type === 'discovery',\n      'txt-tag-danger': type === 'danger',\n      'txt-tag-default': type === 'default',\n    }\"\n  >\n    {{ label }}\n  </div>\n</div>\n" }]
+            args: [{ selector: 'fx-ui-tag', standalone: false, template: "<div\n  [class]=\"`flex flex-row gap-small ${rounded ? 'tag-round' : 'tag-square'} tag-${type}${solid ? '-solid' : ''}`\"\n>\n  @if(icon){\n  <fx-ui-hero-icon\n    [class]=\"`flex txt-tag-${type} ${solid ? 'text-white': ''}`\"\n    [icon]=\"icon\"\n    [size]=\"18\"\n  ></fx-ui-hero-icon>\n  }\n\n  <div [class]=\"`txt-tag-${type} ${solid ? 'text-white': ''}`\">\n    {{ label }}\n  </div>\n</div>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], type: [{
@@ -2714,6 +2719,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], icon: [{
                 type: Input
+            }], solid: [{
+                type: Input
             }] } });
 
 class TreeDiagram {