@foxeltech/angular-ui 0.0.1

package/README.md

@@ -0,0 +1,3 @@
+# @fxlt/common-ui
+
+Common UI & Service Library

package/animations.css

@@ -0,0 +1,130 @@
+@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;
+}
+
+@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/components.css

@@ -0,0 +1,480 @@
+/* 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-tooltip {
+  border-radius: 6px !important;
+  background-color: rgb(var(--bg-primary)) !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: 'BeVietnamPro';
+}
+
+.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;
+  font-family: 'BeVietnamPro';
+}
+
+.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;
+}
+.mat-mdc-dialog-container .mat-mdc-dialog-content {
+  letter-spacing: 0 !important;
+  padding: 10px 20px !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-heading-02 {
+  @apply font-semibold text-4xl tracking-normal leading-10 text-text-primary;
+}
+.txt-heading-03 {
+  @apply font-semibold text-3xl tracking-normal leading-10 text-text-primary;
+}
+.txt-heading-04 {
+  @apply font-semibold text-2xl tracking-normal leading-9 text-text-primary;
+}
+.txt-heading-05 {
+  @apply font-semibold text-xl tracking-normal leading-7 text-text-primary;
+}
+.txt-heading-06 {
+  @apply font-semibold text-base tracking-normal leading-6 text-text-primary;
+}
+.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;
+}
+.txt-body-compact-01 {
+  @apply font-normal text-sm tracking-normal leading-5 text-text-primary;
+}
+.txt-body-01 {
+  @apply font-normal text-sm tracking-normal leading-5 text-text-primary;
+}
+.txt-body-02 {
+  @apply font-normal text-base tracking-normal leading-6 text-text-primary;
+}
+.txt-body-medium-01 {
+  @apply font-medium text-sm tracking-normal leading-5 text-text-primary;
+}
+.txt-body-medium-02 {
+  @apply font-medium text-base tracking-normal leading-6 text-text-primary;
+}
+.txt-body-p-bold {
+  @apply font-semibold text-sm tracking-normal leading-5 text-text-primary;
+}
+.txt-body-p-normal {
+  @apply font-normal text-sm tracking-normal leading-5 text-text-primary;
+}
+.txt-utility-caption {
+  @apply font-normal text-xs tracking-normal leading-4 text-text-primary;
+}
+.txt-utility-button {
+  @apply font-semibold text-sm tracking-normal leading-5 text-text-primary;
+}
+.txt-utility-description {
+  @apply font-light text-xs tracking-normal leading-4 text-text-secondary;
+}
+.txt-tag-label {
+  @apply font-medium text-xs;
+}
+
+.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-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;
+}
+.tag-round {
+  @apply rounded-2xl;
+}
+/* progress bar */
+.progress-bar-container {
+  @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-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;
+}
+
+.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;
+}
+.table-action-col {
+  width: 40px;
+}
+.table-status-col {
+  width: 200px;
+}
+.table-empty {
+  @apply w-full h-[100px] flex items-center justify-center;
+}
+.dialog-container {
+  @apply rounded-lg border border-border-default;
+}
+.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/dialogs.css

@@ -0,0 +1,70 @@
+.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;
+    letter-spacing: 0 !important;
+  }
+
+  .mat-dialog-content {
+    min-height: 110px;
+    letter-spacing: 0 !important;
+  }
+}
+
+.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;
+    }
+  }
+}