@fxlt/common-ui 0.0.1

package/README.md

@@ -0,0 +1,63 @@
+# Ui
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build ui
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/ui
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/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/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/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;
+      }
+  }
+}