@fxlt/common-ui 0.0.1

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@fxlt/common-ui",
+  "version": "0.0.1",
+  "main": "bundles/ui.umd.js",
+  "module": "fesm2022/fxlt-common-ui.mjs",
+  "es2020": "fesm2020/ui.mjs",
+  "typings": "index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^3.0.0",
+    "autoprefixer": "^10.0.0",
+    "postcss": "^8.0.0",
+    "@angular/common": "^20.3.0",
+    "@angular/animations": "^20.3.0",
+    "@angular/core": "^20.3.0",
+    "@angular/forms": "^20.3.0",
+    "@angular/material": "^20.2.7",
+    "@angular/cdk": "^20.2.7",
+    "lodash": "^4.17.21",
+    "@ngx-translate/core": "^14.0.0",
+    "@ngx-translate/http-loader": "^7.0.0",
+    "moment": "^2.30.1"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0",
+    "@danielmoncada/angular-datetime-picker": "^20.0.0",
+    "echarts": "^6.0.0",
+    "ngx-echarts": "^20.0.2",
+    "d3": "^7.9.0",
+    "@dimaslz/ng-heroicons": "^1.19.1"
+  },
+  "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",
+    "./components.css": "./components.css",
+    "./dialogs.css": "./dialogs.css",
+    "./fonts.css": "./fonts.css",
+    "./animations.css": "./animations.css",
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/fxlt-common-ui.mjs"
+    }
+  },
+  "sideEffects": false
+}

package/src/lib/styles/animations.css

@@ -0,0 +1,115 @@
+@keyframes horizontal-fade-in {
+  from {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.horizontal-fade-in-animation {
+  animation: horizontal-fade-in 0.4s ease-out forwards;
+}
+
+@keyframes top-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.top-fade-in-animation {
+  animation: top-fade-in 0.4s ease-out forwards;
+}
+
+@keyframes bottom-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.bottom-fade-in-animation {
+  animation: bottom-fade-in 0.4s ease-out forwards;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.fade-in-animation {
+  animation: fade-in 0.4s ease-out forwards;
+}
+/* out animation */
+@keyframes horizontal-fade-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+}
+
+.horizontal-fade-out-animation {
+  animation: horizontal-fade-out 0.4s ease-out forwards;
+}
+
+@keyframes top-fade-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+}
+
+.top-fade-out-animation {
+  animation: top-fade-out 0.4s ease-out forwards;
+}
+
+@keyframes bottom-fade-out {
+  from {
+    opacity: 1;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(0);
+  }
+}
+
+.bottom-fade-out-animation {
+  animation: bottom-fade-out 0.4s ease-out forwards;
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.fade-out-animation {
+  animation: fade-out 0.4s ease-out forwards;
+}

package/src/lib/styles/components.css

@@ -0,0 +1,383 @@
+/* Material Override */
+.mdc-line-ripple,
+.mat-mdc-form-field-focus-overlay,
+.mat-mdc-form-field-outline,
+.mat-mdc-form-field-underline,
+.mat-form-field-underline {
+  display: none !important;
+}
+
+.cdk-overlay-container {
+  z-index: 2000 !important;
+}
+
+.mat-mdc-form-field.mat-mdc-form-field-type-mat-select .mdc-notched-outline__leading,
+.mat-mdc-form-field.mat-mdc-form-field-type-mat-select .mdc-notched-outline__notch,
+.mat-mdc-form-field.mat-mdc-form-field-type-mat-select .mdc-notched-outline__trailing {
+  border-color: rgb(var(--border-default)) !important;
+}
+
+.mat-mdc-form-field-flex {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.mat-mdc-paginator-range-label,
+.mat-mdc-paginator-page-size-label {
+  font-size: 14px;
+  color: rgb(var(--text-secondary));
+  font-weight: 500;
+}
+.mat-mdc-select-value-text {
+  color: rgb(var(--text-primary));
+}
+.mat-mdc-paginator-icon {
+  color: rgb(var(--text-primary));
+}
+.mdc-list-item__primary-text {
+  color: rgb(var(--text-primary));
+}
+.mat-mdc-option.mdc-list-item.mdc-list-item--selected.mat-mdc-option-active
+  .mdc-list-item__primary-text {
+  color: rgb(var(--text-primary)) !important;
+  font-weight: 700 !important;
+}
+
+.mat-expansion-panel {
+  box-shadow: none !important; /* Remove shadow */
+  border-radius: 0 !important; /* Remove border radius */
+  background-color: transparent !important; /* Make background transparent */
+}
+
+.mat-expansion-panel-header {
+  height: auto !important;
+  padding: 0 !important;
+  background-color: transparent !important;
+}
+
+.mat-expansion-panel-header .mat-panel-title,
+.mat-expansion-panel-header .mat-panel-description {
+  color: unset !important;
+  margin: 0 !important;
+}
+
+.mat-expansion-panel-body {
+  padding: 0 !important;
+}
+
+.mat-expansion-panel-content {
+  background-color: transparent !important;
+}
+
+.mat-expansion-indicator::after {
+  display: none !important;
+}
+
+.mat-content.mat-content-hide-toggle {
+  margin-right: 0px !important;
+}
+
+.mat-mdc-table {
+  border: 2px solid rgb(var(--border-default)) !important;
+  border-radius: 4px !important;
+}
+
+.mdc-data-table__header-row {
+  height: 32px !important;
+  min-height: 32px !important;
+}
+
+.mdc-data-table__header-cell {
+  border-left: 1px solid rgb(var(--border-default)) !important;
+  background-color: rgb(var(--bg-primary-hover)) !important;
+  padding-top: 4px !important;
+  padding-bottom: 4px !important;
+  line-height: 24px !important;
+  font-family: 'BeVietnamProRegular';
+}
+
+.mdc-data-table__row {
+  height: 0 !important;
+  min-height: 0 !important;
+}
+
+.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';
+}
+
+.mat-mdc-cell {
+  border-color: rgb(var(--border-default)) !important;
+}
+
+.mat-mdc-select-panel {
+  background-color: rgb(var(--bg-primary)) !important;
+  border: 1px solid rgb(var(--border-default)) !important;
+  border-radius: 0.5rem !important;
+  box-shadow: 0 2px 4px rgb(var(--shadow-color) / 0.1) !important;
+}
+
+.mat-mdc-select-arrow-wrapper .mat-mdc-select-arrow { 
+  color: rgb(var(--text-primary)) !important;
+}
+
+.mat-mdc-menu-panel {
+  border-radius: 6px !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;
+}
+
+.mat-mdc-option .mat-pseudo-checkbox {
+  color: rgb(var(--text-primary));
+}
+
+.mat-mdc-dialog-surface {
+  background-color: rgb(var(--bg-primary)) !important;
+  border-radius: 8px !important;
+}
+
+
+input[type='number']::-webkit-outer-spin-button,
+input[type='number']::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Hide number input arrows in Firefox */
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+
+input[type='password'] {
+  background-color: rgb(var(--bg-primary)) !important;
+  color: inherit;
+  transition: none !important;
+  -webkit-text-security: disc;
+}
+
+/* system style */
+.txt-page-title {
+  @apply text-3xl text-text-primary font-semibold tracking-normal leading-10;
+}
+.txt-page-subtitle {
+  @apply leading-6 text-base text-text-secondary font-normal tracking-normal;
+}
+.txt-default {
+  @apply text-sm font-normal text-text-primary tracking-normal;
+}
+.txt-field-label {
+  @apply mb-1 text-sm font-semibold text-text-primary tracking-normal;
+}
+.txt-invalid {
+  @apply mt-1 text-sm text-text-error text-left;
+}
+.txt-placeholder {
+  @apply text-sm font-normal text-text-placeholder tracking-normal;
+}
+.txt-required {
+  @apply ml-[1px] text-sm font-semibold text-text-error;
+}
+.txt-section-header {
+  @apply mb-1 text-xl text-text-primary font-semibold tracking-normal leading-7;
+}
+.txt-section-subtitle {
+  @apply text-sm text-text-secondary font-normal tracking-normal;
+}
+.txt-table-header {
+  @apply text-xs text-text-secondary font-semibold tracking-normal;
+}
+.txt-table-content {
+  @apply text-sm text-text-primary font-normal tracking-normal;
+}
+.txt-table-description {
+  @apply text-xs text-text-placeholder font-normal tracking-normal;
+}
+.txt-card-header {
+  @apply mb-1 text-xl text-text-primary font-medium tracking-normal;
+}
+.txt-card-content {
+  @apply text-sm font-normal text-text-secondary tracking-normal;
+}
+.txt-card-description {
+  @apply text-xs font-light text-text-secondary tracking-normal;
+}
+.txt-card-info-header {
+  @apply text-sm font-normal text-text-primary tracking-normal;
+}
+.txt-card-info-content {
+  @apply text-2xl font-semibold text-text-primary tracking-normal;
+}
+.txt-card-info-description {
+  @apply text-xs font-light text-text-secondary tracking-normal;
+}
+.txt-tag-common {
+  @apply font-medium text-xs;
+}
+.txt-tag-default {
+  @apply txt-tag-common text-text-secondary;
+}
+.txt-tag-success {
+  @apply txt-tag-common text-success;
+}
+.txt-tag-warning {
+  @apply txt-tag-common text-warning;
+}
+.txt-tag-critical {
+  @apply txt-tag-common text-critical;
+}
+.txt-tag-danger {
+  @apply txt-tag-common text-danger;
+}
+.txt-tag-information {
+  @apply txt-tag-common text-information;
+}
+.txt-tag-discovery {
+  @apply txt-tag-common text-discovery;
+}
+.txt-link {
+  @apply font-semibold text-text-link text-sm tracking-normal;
+}
+.txt-otp-input {
+  @apply text-center text-xl tracking-widest font-[700] placeholder:font-normal placeholder:text-text-placeholder placeholder:tracking-normal;
+}
+.txt-hash {
+  @apply font-mono text-sm text-text-primary tracking-normal;
+}
+
+.btn-common {
+  @apply flex text-sm h-10 font-semibold px-xl py-normal items-center justify-center rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed;
+}
+.btn-default {
+  @apply btn-common bg-button-default hover:opacity-75 text-text-inverse;
+}
+.btn-primary {
+  @apply btn-common bg-button-primary hover:opacity-75 text-text-focus;
+}
+.btn-alternative {
+  @apply btn-common hover:bg-bg-hover text-text-primary border border-border-default;
+}
+.btn-menu-common {
+  @apply flex flex-row items-center px-semi;
+}
+.btn-menu-top {
+  @apply btn-menu-common border-b border-border-default pt-small pb-semi;
+}
+.btn-menu-middle {
+  @apply btn-menu-common border-b border-border-default py-semi;
+}
+.btn-menu-bottom {
+  @apply btn-menu-common pt-semi pb-small;
+}
+
+.input-default {
+  @apply block h-[36px] text-text-primary placeholder:text-text-placeholder bg-bg-primary w-full rounded-md border px-semi py-normal border-border-default focus:outline-none focus:border-2 focus:border-border-interactive text-sm text-text-primary tracking-normal ring-0 transition-colors duration-500 ease-in-out;
+}
+.input-invalid {
+  @apply border-bg-error focus:ring-bg-error focus:border-bg-error;
+}
+.input-focus-secondary {
+  @apply focus:border-2 focus:border-border-hover2 focus:bg-bg-hover2;
+}
+.input-otp {
+  @apply bg-bg-primary w-full rounded-md border px-semi py-normal border-border-default focus:outline-none focus:border-2 focus:border-border-interactive text-text-primary ring-0 transition-colors duration-500 ease-in-out;
+}
+
+.card-common {
+  @apply text-left px-xl py-large border border-border-default rounded-lg shadow-sm transition-colors duration-500 ease-in-out;
+}
+.card-information {
+  @apply card-common hover:opacity-70 hover:shadow-md hover:border-border-selected;
+}
+.card-create-container {
+  @apply bg-bg-primary pb-normal border-b border-border-default transition-colors duration-500 ease-in-out;
+}
+.card-list-item {
+  @apply flex items-center justify-between rounded-md px-semi py-normal bg-bg-primary mb-normal last:mb-0;
+}
+
+.tag-common {
+  @apply flex min-w-7 px-normal py-small hover:opacity-70 items-center justify-center;
+}
+.tag-default {
+  @apply tag-common bg-bg-hover;
+}
+.tag-success {
+  @apply tag-common bg-success/10;
+}
+.tag-warning {
+  @apply tag-common bg-warning/10;
+}
+.tag-danger {
+  @apply tag-common bg-danger/10;
+}
+.tag-critical {
+  @apply tag-common bg-critical/10;
+}
+.tag-discovery {
+  @apply tag-common bg-discovery/10;
+}
+.tag-information {
+  @apply tag-common bg-information/10;
+}
+.tag-square {
+  @apply rounded px-semi py-small;
+}
+.tag-round {
+  @apply rounded-2xl
+}
+/* progress bar */
+.progress-bar-container {
+  @apply bg-bg-hover mt-semi rounded-full 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;
+}
+/* radio button */
+.radio-container {
+  @apply w-large h-large flex items-center justify-center rounded-full border;
+}
+
+.radio-dot {
+  @apply w-1.5 h-1.5 bg-bg-primary rounded-full;
+}
+.radio-checked {
+  @apply bg-bg-error border-bg-error;
+}
+.radio-uncheck {
+  @apply bg-bg-primary border-border-strong;
+}
+.table-page-container {
+  max-height: calc(100vh - 315px);
+  overflow: auto;
+}
+.table-cell-padding {
+  padding-top: 8px !important;
+  padding-bottom: 8px !important;
+  padding-left: 16px !important;
+  padding-right: 16px !important;
+}
+.table-expanded-row {
+  padding-top: 16px !important;
+  padding-bottom: 16px !important;
+}

package/src/lib/styles/dialogs.css

@@ -0,0 +1,116 @@
+.fx-dialog {
+  max-width: unset !important;
+  border-radius: 8px !important;
+  .mat-dialog-actions {
+      border-top: 1px solid rgb(var(--border-default)) !important;
+      margin-left: -24px;
+      margin-right: -24px;
+      padding: 12px 24px 10px 10px;
+  }
+
+  .mat-dialog-title {
+      margin-left: -24px;
+      margin-right: -24px;
+      padding-right: 24px;
+      padding-left: 24px;
+      border-bottom: 1px solid rgb(var(--border-default));
+      padding-bottom: 20px;
+  }
+  
+  .mat-dialog-content {
+      min-height: 110px;
+      letter-spacing: 0 !important;
+  }
+}
+
+.fx-dialog3 {
+  .mat-dialog-actions {
+      border-top: 1px solid rgb(var(--border-default));
+      margin-left: -24px;
+      margin-right: -24px;
+      padding: 12px 24px 10px 10px;
+  }
+
+  .mat-dialog-title {
+      margin-left: -24px;
+      margin-right: -24px;
+      padding-right: 24px;
+      padding-left: 24px;
+      border-bottom: 1px solid rgb(var(--border-default));
+      padding-bottom: 20px;
+  }
+  
+  .mat-dialog-content {
+      min-height: 50px;
+      overflow: visible;
+      letter-spacing: 0 !important;
+  }
+}
+
+.fx-dialog4 {
+  max-width: unset !important;
+  .mat-dialog-actions {
+      border-top: 1px solid rgb(var(--border-default));
+      margin-left: -24px;
+      margin-right: -24px;
+      padding: 12px 24px 10px 10px;
+  }
+
+  .mat-dialog-title {
+      margin-left: -24px;
+      margin-right: -24px;
+      padding-right: 24px;
+      padding-left: 24px;
+      border-bottom: 1px solid rgb(var(--border-default));
+      padding-bottom: 20px;
+  }
+  
+  .mat-dialog-content {
+      min-height: 50px;
+  }
+}
+
+.fx-fullsize-dialog {
+  max-width: 100vw !important;
+  height: 100%;
+
+  mat-dialog-container {
+      padding: 0;
+
+      form.wrapped-form {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          justify-content: space-between;
+      }
+
+      .mat-dialog-title {
+          background-color: rgb(var(--bg-primary));
+          box-shadow: 0px 4px 8px rgba(26, 28, 38, 0.15);
+          color: rgb(var(--text-primary));
+          padding: 12px 20px;
+          min-height: 24px;            
+
+          h2 {
+              font-weight: 500;
+              font-size: 18px;
+              line-height: 24px;
+          }
+      }
+
+      .mat-dialog-content {
+          background: rgb(var(--bg-primary));
+          padding: 16px 20px;
+          margin: unset;
+          height: 100%;
+          max-height: unset;
+          letter-spacing: 0 !important;
+      }
+
+      .mat-dialog-actions {
+          background-color: rgb(var(--bg-primary));
+          padding: 12px 20px;
+          margin-bottom: unset;
+      }
+  }
+}

package/src/lib/styles/fonts.css

@@ -0,0 +1,13 @@
+@font-face {
+  font-family: 'BeVietnamProRegular';
+  src: url('./BeVietnamPro-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'SpaceMonoRegular';
+  src: url('./SpaceMono-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}

package/src/lib/styles/tailwind.css

@@ -0,0 +1,18 @@
+@import './theme.css';
+@import './components.css';
+@import './dialogs.css';
+@import './fonts.css';
+@import './animations.css';
+@import '@danielmoncada/angular-datetime-picker/assets/style/picker.min.css';
+@tailwind base;
+@tailwind component;
+@tailwind utilities;
+
+html, body {
+  font-family: 'BeVietnamProRegular';
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  background: rgb(var(--bg-primary));
+}