@fxlt/common-ui 0.0.1

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

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

@@ -0,0 +1,223 @@
+<button
+  [class]="class"
+  [ngClass]="{
+    'btn-default': buttonVariant === 'default',
+    'btn-primary': buttonVariant === 'primary',
+    'btn-alternative': buttonVariant === 'alternative',
+  }"
+  [disabled]="disabled || loading"
+  (click)="onClick()"
+>
+  @if (loading) {
+  <div class="flex w-full items-center justify-center">
+    <svg
+      [attr.fill]="
+        buttonVariant !== 'alternative' ? 'rgb(var(--text-primary))' : 'rgb(var(--primary))'
+      "
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="4" cy="12" r="0">
+        <animate
+          begin="0;spinner_z0Or.end"
+          attributeName="r"
+          calcMode="spline"
+          dur="0.5s"
+          keySplines=".36,.6,.31,1"
+          values="0;3"
+          fill="freeze"
+        />
+        <animate
+          begin="spinner_OLMs.end"
+          attributeName="cx"
+          calcMode="spline"
+          dur="0.5s"
+          keySplines=".36,.6,.31,1"
+          values="4;12"
+          fill="freeze"
+        />
+        <animate
+          begin="spinner_UHR2.end"
+          attributeName="cx"
+          calcMode="spline"
+          dur="0.5s"
+          keySplines=".36,.6,.31,1"
+          values="12;20"
+          fill="freeze"
+        />
+        <animate
+          id="spinner_lo66"
+          begin="spinner_Aguh.end"
+          attributeName="r"
+          calcMode="spline"
+          dur="0.5s"
+          keySplines=".36,.6,.31,1"
+          values="3;0"
+          fill="freeze"
+        />
+        <animate
+          id="spinner_z0Or"
+          begin="spinner_lo66.end"
+          attributeName="cx"
+          dur="0.001s"
+          values="20;4"
+          fill="freeze"
+        />
+      </circle>
+      <circle cx="4" cy="12" r="3">
+        <animate
+          begin="0;spinner_z0Or.end"
+          attributeName="cx"
+          calcMode="spline"
+          dur="0.5s"
+          keySplines=".36,.6,.31,1"
+          values="4;12"
+          fill="freeze"
+        />
+        <animate
+          begin="spinner_OLMs.end"
+          attributeName="cx"
+          calcMode="spline"
+          dur="0.5s"
+          keySplines=".36,.6,.31,1"
+          values="12;20"
+          fill="freeze"
+        />
+        <animate
+          id="spinner_JsnR"
+          begin="spinner_UHR2.end"
+          attributeName="r"
+          calcMode="spline"
+          dur="0.5s"
+          keySplines=".36,.6,.31,1"
+          values="3;0"
+          fill="freeze"
+        />
+        <animate
+          id="spinner_Aguh"
+          begin="spinner_JsnR.end"
+          attributeName="cx"
+          dur="0.001s"
+          values="20;4"
+          fill="freeze"
+        />
+        <animate
+          begin="spinner_Aguh.end"
+          attributeName="r"
+          calcMode="spline"
+          dur="0.5s"
+          keySplines=".36,.6,.31,1"
+          values="0;3"
+          fill="freeze"
+        />
+      </circle>
+      <circle cx="12" cy="12" r="3">
+        <animate
+          begin="0;spinner_z0Or.end"
+          attributeName="cx"
+          calcMode="spline"
+          dur="0.5s"
+          keySplines=".36,.6,.31,1"
+          values="12;20"
+          fill="freeze"
+        />
+        <animate
+          id="spinner_hSjk"
+          begin="spinner_OLMs.end"
+          attributeName="r"
+          calcMode="spline"
+          dur="0.5s"
+          keySplines=".36,.6,.31,1"
+          values="3;0"
+          fill="freeze"
+        />
+        <animate
+          id="spinner_UHR2"
+          begin="spinner_hSjk.end"
+          attributeName="cx"
+          dur="0.001s"
+          values="20;4"
+          fill="freeze"
+        />
+        <animate
+          begin="spinner_UHR2.end"
+          attributeName="r"
+          calcMode="spline"
+          dur="0.5s"
+          keySplines=".36,.6,.31,1"
+          values="0;3"
+          fill="freeze"
+        />
+        <animate
+          begin="spinner_Aguh.end"
+          attributeName="cx"
+          calcMode="spline"
+          dur="0.5s"
+          keySplines=".36,.6,.31,1"
+          values="4;12"
+          fill="freeze"
+        />
+      </circle>
+      <circle cx="20" cy="12" r="3">
+        <animate
+          id="spinner_4v5M"
+          begin="0;spinner_z0Or.end"
+          attributeName="r"
+          calcMode="spline"
+          dur="0.5s"
+          keySplines=".36,.6,.31,1"
+          values="3;0"
+          fill="freeze"
+        />
+        <animate
+          id="spinner_OLMs"
+          begin="spinner_4v5M.end"
+          attributeName="cx"
+          dur="0.001s"
+          values="20;4"
+          fill="freeze"
+        />
+        <animate
+          begin="spinner_OLMs.end"
+          attributeName="r"
+          calcMode="spline"
+          dur="0.5s"
+          keySplines=".36,.6,.31,1"
+          values="0;3"
+          fill="freeze"
+        />
+        <animate
+          begin="spinner_UHR2.end"
+          attributeName="cx"
+          calcMode="spline"
+          dur="0.5s"
+          keySplines=".36,.6,.31,1"
+          values="4;12"
+          fill="freeze"
+        />
+        <animate
+          begin="spinner_Aguh.end"
+          attributeName="cx"
+          calcMode="spline"
+          dur="0.5s"
+          keySplines=".36,.6,.31,1"
+          values="12;20"
+          fill="freeze"
+        />
+      </circle>
+    </svg>
+  </div>
+  } @else {
+  <ng-container>
+    <div class="flex items-center justify-center gap-small">
+      @if(icon) {<fx-ui-hero-icon [icon]="icon" [size]="20" class="flex" [ngClass]="{
+        'text-text-inverse': buttonVariant !== 'default',
+        'text-text-primary': buttonVariant === 'alternative'
+      }"></fx-ui-hero-icon>}
+      <div>{{ label }}</div>
+    </div>
+  </ng-container>
+  }
+</button>

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

@@ -0,0 +1,13 @@
+<div class="chart-wrapper" [style.height]="height" [class.loading]="loading">
+  <div
+    echarts
+    [options]="chartOptions"
+    (chartInit)="onChartInit($event)"
+    (chartClick)="onChartClick($event)"
+    class="w-full h-full">
+  </div>
+
+  <div class="chart-loader" *ngIf="loading">
+    <span class="txt-default">Loading...</span>
+  </div>
+</div>

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

@@ -0,0 +1,43 @@
+<label
+  class="inline-flex items-center gap-normal cursor-pointer select-none"
+  [class.opacity-50]="disabled"
+  [class.cursor-not-allowed]="disabled"
+>
+  <input
+    type="checkbox"
+    class="hidden"
+    [checked]="value"
+    [disabled]="disabled"
+    (change)="onInputChange($event)"
+    (blur)="onTouched()"
+  />
+  <span
+    class="relative flex items-center justify-center border rounded-full transition-colors duration-150 shrink-0"
+    [class]="rounded ? 'rounded-full' : 'rounded-sm'"
+    [class]="size === 'large' ? 'w-6 h-6' : 'w-4 h-4'"
+    [ngClass]="{
+      'border-border-strong bg-transparent': !value,
+      'border-border-selected bg-border-selected': value
+    }"
+  >
+    <!-- Keep SVG space reserved always -->
+    <span class="absolute inset-0 flex items-center justify-center">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="text-bg-primary transition-opacity duration-150"
+        [class]="size === 'large' ? 'w-4.5 h-4.5' : 'w-3 h-3'"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="3"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        [style.opacity]="value ? 1 : 0"
+      >
+        <path d="M5 13l4 4L19 7" />
+      </svg>
+    </span>
+  </span>
+
+  <span class="mb-0 txt-field-label">{{ label }}</span>
+</label>

package/src/lib/ui/components/datetime-picker/datetime-picker.component.html

@@ -0,0 +1,25 @@
+<div class="flex flex-col mb-4 w-full text-left">
+  <label *ngIf="label" class="txt-field-label">
+    {{ label }}
+    <span *ngIf="required" class="txt-required">*</span>
+  </label>
+
+  <div class="relative">
+    <input
+      [owlDateTimeTrigger]="picker"
+      [owlDateTime]="picker"
+      [placeholder]="placeholder"
+      [disabled]="disabled"
+      (blur)="onBlur()"
+      [value]="value"
+      readonly
+      class="input-default"
+    />
+  </div>
+  <owl-date-time
+    #picker
+    [pickerType]="showTime ? 'both' : 'calendar'"
+    (afterPickerClosed)="onValueChange($event)"
+  ></owl-date-time>
+  <div *ngIf="invalid" class="txt-invalid">{{ getErrorMessage(label) }}</div>
+</div>

package/src/lib/ui/components/dnd-upload/dnd-upload.component.html

@@ -0,0 +1,34 @@
+<div
+  class="block w-full"
+  (dragover)="onDragOver($event)"
+  (dragleave)="onDragLeave($event)"
+  (drop)="onDrop($event)"
+>
+  <div
+    role="button"
+    tabindex="0"
+    class="flex flex-col items-center justify-center gap-1 border-2 border-dashed rounded-md p-4 cursor-pointer select-none outline-none focus:ring-2 focus:ring-primary"
+    [ngClass]="{
+      'border-border-default bg-bg-hover': !isDragOver,
+      'border-border-interactive bg-secondary': isDragOver
+    }"
+    (click)="onAreaClick(fileInput, $event)"
+    (keydown.enter)="onAreaClick(fileInput, $event)"
+  >
+    <div class="text-sm text-text-link font-medium">
+      Click to upload <span class="text-text-secondary opacity-50">or drag and drop</span>
+    </div>
+    <div class="text-xs text-text-secondary">
+      Allowed: {{ accept || 'any file type' }} (max {{ maxSizeMB }} MB)
+    </div>
+
+    <input
+      #fileInput
+      type="file"
+      class="hidden"
+      [attr.multiple]="multiple ? '' : null"
+      [attr.accept]="accept"
+      (change)="onFileSelected($event)"
+    />
+  </div>
+</div>

package/src/lib/ui/components/hero-icon/hero-icon.component.html

@@ -0,0 +1,8 @@
+<ng-heroicons
+  [icon]="icon"
+  [size]="size"
+  [solid]="solid"
+  [outline]="outline"
+  [color]="color"
+  [class]="class"
+/>

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

@@ -0,0 +1,46 @@
+<div class="mb-4 text-left w-full text-text-primary" [class]="class">
+  @if(label){<label class="block txt-field-label">
+    {{ label }}
+    @if (required) {<span class="txt-required">*</span>}
+  </label>
+  }
+
+  <div class="relative">
+    <input
+      [type]="displayType"
+      [placeholder]="placeholder"
+      [disabled]="disabled"
+      [value]="value"
+      (input)="onInput($event)"
+      (blur)="onBlur()"
+      (focus)="onFocus()"
+      [attr.maxlength]="maxlength"
+      [class]="type === 'otp' ? 'input-otp' : 'input-default'"
+      [ngClass]="{
+        'input-invalid': invalid,
+        'pr-8': type === 'password' || suffixIcon,
+        'txt-otp-input': type === 'otp'
+      }"
+    />
+    <button
+      type="button"
+      class="absolute inset-y-0 right-2 flex items-center text-text-primary hover:text-text-secondary"
+      (click)="onSuffixClick()"
+      [disabled]="disabled"
+    >
+      @if (type === 'password') {
+      <i class="material-symbols-outlined text-lg select-none">{{
+        showPassword ? 'visibility_off' : 'visibility'
+      }}</i>
+      } @else if (suffixIcon) {
+      <i [class]="iconClass" class="text-lg select-none">{{ suffixIcon }}</i>
+      }
+    </button>
+  </div>
+
+  @if (invalid){
+  <div class="txt-invalid">
+    {{ getErrorMessage(label) }}
+  </div>
+  }
+</div>

package/src/lib/ui/components/loading-panel/loading-panel.component.html

@@ -0,0 +1,51 @@
+<!-- Full-screen glass overlay -->
+<div
+  *ngIf="show"
+  class="fixed inset-0 z-50 flex items-center justify-center"
+  aria-hidden="false"
+  role="alert"
+  aria-busy="true"
+>
+  <div class="absolute inset-0 bg-bg-primary/30 backdrop-blur-xl" aria-hidden="true"></div>
+
+  <div
+    class="relative z-10 flex flex-col items-center gap-4 p-6 rounded-2xl shadow-xl bg-bg-primary/70 border border-border-strong backdrop-bg-primary/70"
+    style="min-width: 220px; max-width: 90%"
+  >
+  <svg fill="rgb(var(--primary))" width="50" height="50" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="4" cy="12" r="0">
+      <animate begin="0;spinner_z0Or.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3" fill="freeze"/>
+      <animate begin="spinner_OLMs.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12" fill="freeze"/>
+      <animate begin="spinner_UHR2.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20" fill="freeze"/>
+      <animate id="spinner_lo66" begin="spinner_Aguh.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0" fill="freeze"/>
+      <animate id="spinner_z0Or" begin="spinner_lo66.end" attributeName="cx" dur="0.001s" values="20;4" fill="freeze"/>
+    </circle>
+    <circle cx="4" cy="12" r="3">
+      <animate begin="0;spinner_z0Or.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12" fill="freeze"/>
+      <animate begin="spinner_OLMs.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20" fill="freeze"/>
+      <animate id="spinner_JsnR" begin="spinner_UHR2.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0" fill="freeze"/>
+      <animate id="spinner_Aguh" begin="spinner_JsnR.end" attributeName="cx" dur="0.001s" values="20;4" fill="freeze"/>
+      <animate begin="spinner_Aguh.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3" fill="freeze"/>
+    </circle>
+    <circle cx="12" cy="12" r="3">
+      <animate begin="0;spinner_z0Or.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20" fill="freeze"/>
+      <animate id="spinner_hSjk" begin="spinner_OLMs.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0" fill="freeze"/>
+      <animate id="spinner_UHR2" begin="spinner_hSjk.end" attributeName="cx" dur="0.001s" values="20;4" fill="freeze"/>
+      <animate begin="spinner_UHR2.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3" fill="freeze"/>
+      <animate begin="spinner_Aguh.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12" fill="freeze"/>
+    </circle>
+    <circle cx="20" cy="12" r="3">
+      <animate id="spinner_4v5M" begin="0;spinner_z0Or.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0" fill="freeze"/>
+      <animate id="spinner_OLMs" begin="spinner_4v5M.end" attributeName="cx" dur="0.001s" values="20;4" fill="freeze"/>
+      <animate begin="spinner_OLMs.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3" fill="freeze"/>
+      <animate begin="spinner_UHR2.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12" fill="freeze"/>
+      <animate begin="spinner_Aguh.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20" fill="freeze"/>
+    </circle>
+  </svg>
+  
+
+    <div *ngIf="message" class="text-sm text-text-primary text-center">
+      {{ message }}
+    </div>
+  </div>
+</div>

package/src/lib/ui/components/radio-button/radio-button.component.html

@@ -0,0 +1,35 @@
+<div class="w-full rounded-lg overflow-hidden" [class]="class" role="radiogroup">
+  @if (label){
+  <label class="txt-field-label">
+    {{ label }}
+    @if(required){<span class="txt-required">*</span>} </label
+  >}
+
+  <button
+    *ngFor="let opt of options"
+    type="button"
+    role="radio"
+    [attr.aria-checked]="value === opt.value"
+    (click)="onSelectValue(opt.value)"
+    [disabled]="disabled"
+    [class.text-gray-900]="value !== opt.value"
+    class="flex-1 px-normal w-full flex items-center gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed"
+  >
+    <span
+      [ngClass]="{
+        'radio-checked': value === opt.value,
+        'radio-uncheck': value !== opt.value
+      }"
+      class="radio-container"
+    >
+      @if(value === opt.value) {<span class="radio-dot"></span>}
+    </span>
+
+    <span class="txt-default mb-0">{{ opt.label }}</span>
+  </button>
+  @if (invalid){
+  <div class="txt-invalid">
+    {{ getErrorMessage(label) }}
+  </div>
+  }
+</div>

package/src/lib/ui/components/radio-button-toggle/radio-button-toggle.component.html

@@ -0,0 +1,34 @@
+<div class="flex flex-col text-left mb-4 w-full" [class]="class">
+  @if(label){<label class="txt-field-label">
+    {{ label }}
+    @if(required) {<span class="txt-required">*</span>} </label
+  >}
+
+  <div class="inline-flex w-full rounded-lg overflow-hidden" role="radiogroup">
+    @for(opt of options; track opt){<button
+      type="button"
+      role="radio"
+      [attr.aria-checked]="value === opt.value"
+      (click)="onSelectValue(opt.value)"
+      [disabled]="disabled"
+      [class.text-gray-900]="value !== opt.value"
+      class="flex-1 bg-bg-primary flex items-center pl-normal gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed"
+    >
+      <span
+        [ngClass]="{
+          'radio-checked': value === opt.value,
+          'radio-uncheck': value !== opt.value
+        }"
+        class="radio-container"
+      >
+        @if(value === opt.value) {<span class="radio-dot"></span>}
+      </span>
+
+      <span class="txt-field-label mb-0">{{ opt.label }}</span></button
+    >}
+  </div>
+
+  @if(invalid){
+  <div class="txt-invalid">{{ getErrorMessage(label) }}</div>
+  }
+</div>

package/src/lib/ui/components/search-bar/search-bar.component.html

@@ -0,0 +1,22 @@
+<div class="relative">
+  <fx-ui-hero-icon icon="magnifying-glass" [size]="18" class="absolute left-1 top-[3px] text-text-primary"></fx-ui-hero-icon>
+  <input
+    type="text"
+    class="input-default px-9"
+    [attr.placeholder]="placeholder"
+    [disabled]="disabled"
+    [value]="value"
+    (input)="onValueChange($any($event.target).value)"
+    (keydown.enter)="onEnterKey()"
+  />
+
+  <button
+    *ngIf="value && !disabled"
+    type="button"
+    class="absolute inset-y-0 right-2 flex items-center text-text-primary hover:text-text-secondary"
+    (click)="clear()"
+    aria-label="Clear"
+  >
+    <i class="material-symbols-outlined text-lg select-none">close</i>
+  </button>
+</div>