@fxlt/common-ui 0.0.1

package/src/lib/ui/components/select/select.component.css

@@ -0,0 +1,80 @@
+::ng-deep .fx-select-field {
+  display: block !important;
+  width: 100% !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border-radius: 0.75rem;
+  box-shadow: 0 1px 1px rgb(var(--border-default));
+}
+
+::ng-deep .fx-select-field .mat-mdc-form-field-wrapper,
+::ng-deep .fx-select-field .mat-mdc-text-field-wrapper {
+  padding: 0 !important;
+  margin: 0 !important;
+  width: 100% !important;
+}
+
+::ng-deep .fx-select-field .mdc-text-field {
+  width: 100% !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  --mdc-shape-small: 0 !important;
+}
+
+::ng-deep .fx-select-field .mat-mdc-form-field-flex {
+  width: 100% !important;
+  margin: 0 !important;
+  padding: 0 0.75rem !important;
+  border: 1px solid rgb(var(--border-default));
+  border-radius: 0.5rem;
+  height: 36px !important;
+  align-items: center;
+  background-color: rgb(var(--bg-primary));
+}
+
+::ng-deep .fx-select-field .mdc-notched-outline,
+::ng-deep .fx-select-field .mat-mdc-form-field-subscript-wrapper {
+  display: none !important;
+}
+
+::ng-deep .fx-select-field.mat-focused .mat-mdc-form-field-flex {
+  border: 2px solid rgb(var(--border-interactive)) !important;
+  outline: none !important;
+  border-radius: 0.5rem;
+}
+
+::ng-deep .fx-select-field.mat-form-field-invalid .mat-mdc-form-field-flex {
+  border-color: #ef4444 !important;
+  box-shadow: none !important;
+}
+
+::ng-deep .fx-select-field .mat-mdc-select-trigger {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+::ng-deep .fx-select-field .mat-mdc-select-arrow-wrapper {
+  margin-right: 0 !important;
+}
+
+::ng-deep .fx-select-field .mat-mdc-select-arrow-wrapper {
+  color: rgb(var(--text-primary));
+}
+
+::ng-deep .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(0 0 0 / 0.1) !important;
+}
+
+::ng-deep .fx-select-field .mat-mdc-select-placeholder {
+  color: rgb(var(--text-placeholder)) !important;
+  font-size: 14px;
+}
+
+::ng-deep .fx-select-field .mat-mdc-select-value {
+  color: rgb(var(--text-primary)) !important;
+  font-size: 14px;
+  font-weight: 400;
+}

package/src/lib/ui/components/select/select.component.html

@@ -0,0 +1,25 @@
+<div class="mb-4 text-left w-full" [class]="class">
+  <label *ngIf="label" class="block txt-field-label">
+    {{ label }}
+    @if(required) {<span class="txt-required">*</span>}
+  </label>
+
+  <mat-form-field class="fx-select-field w-full shadow-sm" appearance="fill">
+    <mat-select
+      [placeholder]="placeholder"
+      [disabled]="disabled"
+      [multiple]="multiple"
+      [value]="value"
+      (selectionChange)="onSelectionChange($event.value)"
+      (blur)="onTouched()"
+    >
+      <mat-option *ngFor="let option of options" [value]="option.value">
+        <span class="txt-default">{{ option.label }}</span>
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <div *ngIf="invalid" class="txt-invalid text-left">
+    {{ getErrorMessage(label) }}
+  </div>
+</div>

package/src/lib/ui/components/slider/slider.component.html

@@ -0,0 +1,54 @@
+<div
+  class="w-full select-none"
+  [class.cursor-not-allowed]="disabled"
+  [class.opacity-60]="disabled"
+  role="group"
+>
+  <div
+    #track
+    class="relative touch-none py-4"
+    (click)="onTrackClick($event)"
+    [attr.aria-disabled]="disabled"
+    [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+  >
+    <div
+      class="relative flex items-center"
+      [ngClass]="{ 'flex-col h-48': vertical }"
+    >
+      <div
+        class="relative flex-1 rounded-full bg-gray-600 h-2"
+        [ngClass]="{ 'w-1 rotate-0 h-full w-auto bg-border-gray-700': vertical }"
+      >
+        <div
+          class="absolute left-0 top-0 h-full rounded-full bg-primary"
+          *ngIf="!vertical"
+          [style.width.%]="percent"
+        ></div>
+
+        <div
+          class="absolute bottom-0 left-0 w-full rounded-full bg-primary"
+          *ngIf="vertical"
+          [style.height.%]="percent"
+          style="transform-origin: bottom;"
+        ></div>
+
+        <button
+          #thumb
+          type="button"
+          class="absolute -mt-1 -ml-1.5 w-4 h-4 rounded-full shadow focus:ring-primary bg-primary border-2 border-text-primary"
+          [ngStyle]="thumbStyle()"
+          role="slider"
+          [attr.aria-valuemin]="min"
+          [attr.aria-valuemax]="max"
+          [attr.aria-valuenow]="value"
+          [attr.aria-disabled]="disabled"
+          tabindex="0"
+          (pointerdown)="onPointerDown($event)"
+          (pointermove)="onPointerMove($event)"
+          (pointerup)="onPointerUp($event)"
+          [disabled]="disabled"
+        ></button>
+      </div>
+    </div>
+  </div>
+</div>

package/src/lib/ui/components/switch/switch.component.html

@@ -0,0 +1,21 @@
+<div
+  class="relative inline-flex items-center w-10 h-5 rounded-full transition-colors duration-300 cursor-pointer"
+  [ngClass]="{
+    'bg-success': value && !disabled,
+    'bg-button-default': !value && !disabled,
+    'bg-bg-hover': disabled
+  }"
+  (click)="toggle()"
+>
+  @if(value) {
+    <i style="font-size: 20px;" class="material-symbols-outlined absolute left-0.5 top-0 text-text-inverse">check</i>
+    
+  }
+  @if(!value) {
+    <i style="font-size: 20px;" class="material-symbols-outlined absolute right-0.5 top-0 text-text-inverse">close</i>
+  }
+  <div
+    class="absolute top-0.5 left-0.5 w-4 h-4 bg-text-inverse rounded-full shadow-md transform transition-transform duration-300"
+    [ngClass]="{ 'translate-x-5': value }"
+  ></div>
+</div>

package/src/lib/ui/components/tab-component/tab.component.html

@@ -0,0 +1 @@
+<ng-template><ng-content></ng-content></ng-template>

package/src/lib/ui/components/tab-group/tab-group.component.html

@@ -0,0 +1,75 @@
+<div class="relative">
+  <!-- Left scroll button -->
+  <button
+    class="left-scroll-button"
+    type="button"
+    (click)="scroll('left')"
+    [style.opacity]="canScrollLeft ? 1 : 0"
+    [style.pointerEvents]="canScrollLeft ? 'auto' : 'none'"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-5 w-5 text-text-primary"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+    </svg>
+  </button>
+
+  <div
+    #tabList
+    class="relative flex overflow-x-auto no-scrollbar scroll-smooth"
+    (scroll)="onScroll()"
+  >
+    <button
+      *ngFor="let tab of tabs.toArray(); let i = index"
+      (click)="selectTab(i)"
+      class="tab-btn tab-bar-btn"
+    >
+      <div class="flex flex-row items-center justify-center">
+        @if(tab.icon) {<fx-ui-hero-icon
+          [icon]="tab.icon"
+          [size]="20"
+          class="flex mr-[2px]"
+          [ngClass]="{
+            'text-primary mb-small': i === activeIndex,
+            'text-text-placeholder': i !== activeIndex
+          }"
+        ></fx-ui-hero-icon
+        >}
+        <div [ngClass]="i === activeIndex ? 'txt-field-label text-primary' : 'txt-placeholder'">{{ tab.label }}</div>
+      </div>
+    </button>
+
+    <span #underline class="underline" style="width: 0; transform: translateX(0)"></span>
+  </div>
+
+  <button
+    class="right-scroll-button"
+    type="button"
+    (click)="scroll('right')"
+    [style.opacity]="canScrollRight ? 1 : 0"
+    [style.pointerEvents]="canScrollRight ? 'auto' : 'none'"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-5 w-5 text-text-primary"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+    </svg>
+  </button>
+</div>
+
+<!-- Tab content -->
+<div class="transition-all duration-300 ease-in-out mt-4">
+  <ng-container *ngFor="let tab of tabs.toArray(); let i = index">
+    <div *ngIf="i === activeIndex" class="animate-fadeIn">
+      <ng-container *ngTemplateOutlet="tab.content"></ng-container>
+    </div>
+  </ng-container>
+</div>

package/src/lib/ui/components/tag/tag.component.html

@@ -0,0 +1,43 @@
+<div
+  class="flex flex-row gap-1"
+  [class]="rounded ? 'tag-round' : 'tag-square'"
+  [ngClass]="{
+    'tag-critical': type === 'critical',
+    'tag-success': type === 'success',
+    'tag-warning': type === 'warning',
+    'tag-information': type === 'information',
+    'tag-discovery': type === 'discovery',
+    'tag-danger': type === 'danger',
+    'tag-default': type === 'default'
+  }"
+>
+  @if(icon){<fx-ui-hero-icon
+    class="flex"
+    [icon]="icon"
+    [size]="18"
+    [ngClass]="{
+    'text-critical': type === 'critical',
+    'text-success': type === 'success',
+    'text-warning': type === 'warning',
+    'text-information': type === 'information',
+    'text-discovery': type === 'discovery',
+    'text-danger': type === 'danger',
+    'text-text-primary': type === 'default',
+  }"
+  ></fx-ui-hero-icon
+  >}
+
+  <div
+    [ngClass]="{
+      'txt-tag-critical': type === 'critical',
+      'txt-tag-success': type === 'success',
+      'txt-tag-warning': type === 'warning',
+      'txt-tag-information': type === 'information',
+      'txt-tag-discovery': type === 'discovery',
+      'txt-tag-danger': type === 'danger',
+      'txt-tag-default': type === 'default',
+    }"
+  >
+    {{ label }}
+  </div>
+</div>

package/src/lib/ui/components/toast/toast.component.html

@@ -0,0 +1,48 @@
+<div
+  animate.enter="horizontal-fade-in-animation"
+  animate.leave="horizontal-fade-out-animation"
+  class="flex border-l-[3px] items-center bg-bg-primary gap-semi min-w-[250px] max-w-[320px] px-large py-semi rounded shadow-lg transition-all duration-300 ease-in-out transform opacity-100 translate-y-0"
+  [ngClass]="{
+    'border-success': type === 'success',
+    'border-critical': type === 'error',
+    'border-warning': type === 'warning',
+    'border-information': type === 'info'
+  }"
+>
+  <div class="">
+    @switch (type) { @case('success') {
+    <fx-ui-hero-icon
+      icon="check-circle"
+      [solid]="true"
+      [size]="30"
+      class="text-success"
+    ></fx-ui-hero-icon>
+    } @case('error') {
+    <fx-ui-hero-icon
+      icon="exclamation-circle"
+      [solid]="true"
+      [size]="30"
+      class="text-critical"
+    ></fx-ui-hero-icon>
+    } @case('warning') {
+    <fx-ui-hero-icon
+      icon="exclamation-triangle"
+      [solid]="true"
+      [size]="30"
+      class="text-warning"
+    ></fx-ui-hero-icon>
+    } @default {
+    <fx-ui-hero-icon
+      icon="information-circle"
+      [solid]="true"
+      [size]="30"
+      class="text-information"
+    ></fx-ui-hero-icon>
+    } }
+  </div>
+
+  <div class="flex flex-col">
+    <strong *ngIf="title" class="txt-field-label">{{ title }}</strong>
+    <p class="txt-default">{{ message }}</p>
+  </div>
+</div>

package/src/lib/ui/components/toast-container/toast-container.component.html

@@ -0,0 +1,12 @@
+<div
+  class="fixed top-5 right-5 flex flex-col items-end gap-3 z-[10000] pointer-events-none"
+>
+  @for (toast of toasts; track toast) {
+    <fx-ui-toast
+      class="pointer-events-auto"
+      [message]="toast.message"
+      [title]="toast.title"
+      [type]="toast.type"
+    ></fx-ui-toast>
+  }
+</div>

package/src/lib/ui/dialogs/confirmation/confirmation.component.html

@@ -0,0 +1,10 @@
+<div animate.enter="fade-in-animation">
+  <div class="txt-section-header px-2xl py-semi">{{title}}</div>
+  <mat-dialog-content>
+    <div class="txt-default">{{message}}</div>
+  </mat-dialog-content>
+  <mat-dialog-actions align="end">
+    <fx-ui-button class="mr-1" [label]="cancelLabel" (clicked)="cancel()"></fx-ui-button>
+    <fx-ui-button buttonVariant="primary" class="mr-1" [label]="confirmLabel" (clicked)="accept()"></fx-ui-button>
+  </mat-dialog-actions>
+</div>

package/tailwind-config.d.ts

@@ -0,0 +1,4 @@
+declare module '@fx/ui/tailwind.config' {
+  const config: any;
+  export default config;
+}

package/tailwind.config.js

@@ -0,0 +1,69 @@
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        primary: 'rgb(var(--primary) / <alpha-value>)',
+        success: 'rgb(var(--success) / <alpha-value>)',
+        danger: 'rgb(var(--danger) / <alpha-value>)',
+        warning: 'rgb(var(--warning) / <alpha-value>)',
+        critical: 'rgb(var(--critical) / <alpha-value>)',
+        discovery: 'rgb(var(--discovery) / <alpha-value>)',
+        information: 'rgb(var(--information) / <alpha-value>)',
+        bg: {
+          primary: 'rgb(var(--bg-primary) / <alpha-value>)',
+          hover: 'rgb(var(--bg-primary-hover) / <alpha-value>)',
+          error: 'rgb(var(--bg-error-bold) / <alpha-value>)',
+          hover2: 'rgb(var(--bg-secondary-hover) / <alpha-value>)',
+        },
+        text: {
+          primary: 'rgb(var(--text-primary) / <alpha-value>)',
+          secondary: 'rgb(var(--text-secondary) / <alpha-value>)',
+          placeholder: 'rgb(var(--text-placeholder) / <alpha-value>)',
+          selected: 'rgb(var(--text-selected-primary) / <alpha-value>)',
+          focus: 'rgb(var(--text-focus) / <alpha-value>)',
+          inverse: 'rgb(var(--text-inverse) / <alpha-value>)',
+          error: 'rgb(var(--text-error) / <alpha-value>)',
+          link: 'rgb(var(--text-link-primary) / <alpha-value>)',
+        },
+        border: {
+          default: 'rgb(var(--border-default) / <alpha-value>)',
+          interactive: 'rgb(var(--border-interactive) / <alpha-value>)',
+          selected: 'rgb(var(--border-selected) / <alpha-value>)',
+          strong: 'rgb(var(--border-strong) / <alpha-value>)',
+          hover2: 'rgb(var(--border-secondary-hover) / <alpha-value>)'
+        },
+        button: {
+          default: 'rgb(var(--button-default) / <alpha-value>)',
+          primary: 'rgb(var(--button-primary) / <alpha-value>)',
+        },
+      },
+      screens: {
+        sm: '640px',
+        md: '960px',
+        lg: '1280px',
+      },
+      boxShadow: {
+        sm: '0 1px 2px 0 rgb(var(--shadow-color) / 0.05)',
+        DEFAULT: '0 1px 3px 0 rgb(var(--shadow-color) / 0.1), 0 1px 2px -1px rgb(var(--shadow-color) / 0.1)',
+        md: '0 4px 6px -1px rgb(var(--shadow-color) / 0.1), 0 2px 4px -2px rgb(var(--shadow-color) / 0.1)',
+        lg: '0 10px 15px -3px rgb(var(--shadow-color) / 0.1), 0 4px 6px -4px rgb(var(--shadow-color) / 0.1)',
+        xl: '0 20px 25px -5px rgb(var(--shadow-color) / 0.1), 0 10px 10px -5px rgb(var(--shadow-color) / 0.1)',
+        '2xl': '0 25px 50px -12px rgb(var(--shadow-color) / 0.25)',
+        inner: 'inset 0 2px 4px 0 rgb(var(--shadow-color) / 0.05)',
+      },
+      spacing: {
+        xs: '0.125rem',
+        small: '0.25rem',
+        normal: '0.5rem',
+        semi: '0.75rem',
+        large: '1rem',
+        xl: '1.25rem',
+        '2xl': '1.5rem',
+      },
+      fontFamily:{
+        spmono: ['SpaceMonoRegular', 'monospace'],
+      }
+    },
+  },
+  plugins: [],
+};

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

package/theme.css

@@ -0,0 +1,63 @@
+.light_theme {
+  --bg-primary: 255 255 255;
+  --primary: 236 25 56;
+  --success: 15 140 96;
+  --warning: 255 188 59;
+  --critical: 236 25 56;
+  --danger: 249 133 7;
+  --discovery: 119 113 227;
+  --information: 62 175 240;
+  --text-primary: 12 14 18;
+  --text-secondary: 97 101 108;
+  --border-default: 236 236 236;
+  --text-placeholder:148 151 156;
+  --step-bg: 12 14 18;
+  --text-link-primary: 29 122 252;
+  --bg-primary-hover: 247 247 247;
+  --text-focus: 255 255 255;
+  --bg-primary-neutral: 12 14 18;
+  --text-selected-primary: 199 14 41;
+  --button-default: 34 38 47; 
+  --text-inverse: 255 255 255;
+  --bg-error-bold: 215 0 68;
+  --text-error: 215 0 68;
+  --border-interactive: 236 25 56;
+  --border-selected: 254 53 83;
+  --button-primary: 236 25 56;
+  --border-strong: 206 207 210;
+  --border-secondary-hover: 0 199 205;
+  --bg-secondary-hover: 6 59 70;
+  --shadow-color: 0 0 0;
+}
+
+:root {
+  --bg-primary: 12 14 18;
+  --primary: 236 25 56;
+  --success: 76 175 80;
+  --warning: 255 188 59;
+  --critical: 236 25 56;
+  --danger: 249 133 7;
+  --discovery: 119 113 227;
+  --information: 62 175 240;
+  --text-primary: 247 247 247;
+  --text-secondary: 148 151 156;
+  --border-default: 55 58 65;
+  --text-placeholder: 133 136 142;
+  --step-bg: 255 255 255;
+  --text-link-primary: 87 157 255;
+  --bg-primary-hover: 34 38 47;
+  --text-focus: 255 255 255;
+  --bg-primary-neutral: 12 14 18;
+  --text-selected-primary: 254 53 83;
+  --button-default: 236 236 236; 
+  --text-inverse: 12 14 18;
+  --bg-error-bold: 215 0 68;
+  --text-error: 255 0 81;
+  --border-interactive: 236 25 56;
+  --border-selected: 254 53 83;
+  --button-primary: 236 25 56;
+  --border-strong: 97 101 108;
+  --border-secondary-hover: 0 199 205;
+  --bg-secondary-hover: 6 59 70;
+  --shadow-color: 255 255 255;
+}