@foxeltech/angular-ui 0.4.0 → 0.7.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foxeltech/angular-ui",
-  "version": "0.4.0",
+  "version": "0.7.44",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -22,7 +22,10 @@
     "ngx-echarts": "^20.0.2",
     "quill": "^2.0.3",
     "ngx-vflow": "^1.16.2",
-    "@microsoft/signalr": "^10.0.0"
+    "@microsoft/signalr": "^10.0.0",
+    "d3-drag": "^3.0.0",
+    "d3-selection": "^3.0.0",
+    "d3-zoom": "^3.0.0"
   },
   "exports": {
     "./tailwind.css": "./tailwind.css",

package/src/lib/styles/components.css

@@ -77,7 +77,7 @@
   margin-right: 0px !important;
 }
 .mat-mdc-tooltip {
-  border-radius: 6px !important;
+  border-radius: var(--og-radius-control) !important;
   background-color: rgb(var(--bg-primary)) !important;
   --mdc-plain-tooltip-container-color: rgb(var(--bg-primary));
   --mdc-plain-tooltip-supporting-text-color: rgb(var(--text-primary));
@@ -88,7 +88,7 @@
 
 .mat-mdc-table {
   border: 1px solid rgb(var(--border-default)) !important;
-  border-radius: 12px !important;
+  border-radius: var(--og-radius-card) !important;
   overflow: hidden !important;
   border-collapse: separate !important;
   border-spacing: 0 !important;
@@ -106,7 +106,7 @@
   padding-top: 8px !important;
   padding-bottom: 8px !important;
   line-height: 24px !important;
-  font-family: 'Roboto';
+  font-family: var(--og-font-body);
 }
 
 .mdc-data-table__row {
@@ -122,7 +122,7 @@
 .mdc-data-table__cell {
   border-bottom: 1px solid rgb(var(--border-default)) !important;
   background-color: rgb(var(--bg-primary)) !important;
-  font-family: 'Roboto';
+  font-family: var(--og-font-body);
 }
 
 .mat-mdc-row:last-child .mdc-data-table__cell {
@@ -136,7 +136,7 @@
 .mat-mdc-select-panel {
   background-color: rgb(var(--bg-primary)) !important;
   border: 1px solid rgb(var(--border-default)) !important;
-  border-radius: 0.5rem !important;
+  border-radius: var(--og-radius-card) !important;
   box-shadow: 0 2px 4px rgb(var(--shadow-color) / 0.1) !important;
 }
 
@@ -145,11 +145,11 @@
 }
 
 .mat-mdc-menu-panel {
-  border-radius: 6px !important;
+  border-radius: var(--og-radius-card) !important;
   border-color: rgb(var(--border-default)) !important;
 }
 .mat-mdc-menu-panel .mat-mdc-menu-content {
-  @apply bg-bg-primary shadow-none border rounded-[6px] border-border-default flex flex-col;
+  @apply bg-bg-primary shadow-none border rounded-card border-border-default flex flex-col;
 }
 
 .mat-mdc-option .mat-pseudo-checkbox {
@@ -158,7 +158,7 @@
 
 .mat-mdc-dialog-surface {
   background-color: rgb(var(--bg-primary)) !important;
-  border-radius: 8px !important;
+  border-radius: var(--og-radius-card) !important;
 }
 .mat-mdc-dialog-container .mat-mdc-dialog-content {
   letter-spacing: 0 !important;
@@ -203,7 +203,7 @@ input[type='password'] {
   @apply font-semibold text-sm tracking-normal leading-5 text-text-primary;
 }
 .txt-heading-table {
-  @apply text-base font-roboto font-semibold text-text-primary tracking-tight;
+  @apply text-base font-body font-semibold text-text-primary tracking-tight;
 }
 .txt-heading-compact-02 {
   @apply font-semibold text-sm tracking-normal leading-5 text-text-primary;
@@ -334,7 +334,7 @@ input[type='password'] {
   @apply btn-common bg-gradient-primary hover:opacity-75 text-text-focus;
 }
 .btn-success {
-  @apply btn-common bg-gradient-success hover:opacity-75 text-white;
+  @apply btn-common bg-gradient-success hover:opacity-75 text-surface;
 }
 .btn-alternative {
   @apply btn-common hover:bg-bg-hover text-text-primary border border-border-default;
@@ -474,7 +474,7 @@ input[type='password'] {
 .border-gradient-primary {
   border: 1px solid transparent;
   background:
-    linear-gradient(var(--surface, #fff), var(--surface, #fff)) padding-box,
+    linear-gradient(rgb(var(--og-surface)), rgb(var(--og-surface))) padding-box,
     linear-gradient(
       135deg,
       rgb(var(--gradient-primary-start)),
@@ -482,5 +482,5 @@ input[type='password'] {
     ) border-box;
 }
 .skeleton-load {
-  @apply rounded bg-gray-200 animate-pulse motion-reduce:animate-none;
+  @apply rounded bg-track animate-pulse motion-reduce:animate-none;
 }

package/src/lib/styles/dialogs.css

@@ -1,6 +1,6 @@
 .fx-dialog {
   max-width: unset !important;
-  border-radius: 8px !important;
+  border-radius: var(--og-radius-card) !important;
   .mat-dialog-actions {
     border-top: 1px solid rgb(var(--border-default)) !important;
     margin-left: -24px;
@@ -40,7 +40,7 @@
 
     .mat-dialog-title {
       background-color: rgb(var(--bg-primary));
-      box-shadow: 0px 4px 8px rgba(26, 28, 38, 0.15);
+      box-shadow: 0px 4px 8px rgb(var(--shadow-color) / 0.15);
       color: rgb(var(--text-primary));
       padding: 12px 20px;
       min-height: 24px;