@foxeltech/angular-ui 0.0.1

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

package/src/lib/styles/fonts.css

@@ -0,0 +1,125 @@
+@font-face {
+  font-family: 'BeVietnamPro';
+  src: url('./BeVietnamPro/BeVietnamPro-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'BeVietnamPro';
+  src: url('./BeVietnamPro/BeVietnamPro-ExtraLight.ttf') format('truetype');
+  font-weight: 200;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'BeVietnamPro';
+  src: url('./BeVietnamPro/BeVietnamPro-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'BeVietnamPro';
+  src: url('./BeVietnamPro/BeVietnamPro-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'BeVietnamPro';
+  src: url('./BeVietnamPro/BeVietnamPro-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'BeVietnamPro';
+  src: url('./BeVietnamPro/BeVietnamPro-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'BeVietnamPro';
+  src: url('./BeVietnamPro/BeVietnamPro-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-Thin.ttf') format('truetype');
+  font-weight: 200;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Orbitron';
+  src: url('./orbitron/Orbitron-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Orbitron';
+  src: url('./orbitron/Orbitron-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Orbitron';
+  src: url('./orbitron/Orbitron-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Orbitron';
+  src: url('./orbitron/Orbitron-Bold.ttf') format('truetype');
+  font-weight: 700;
+  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: 'BeVietnamPro';
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  background: rgb(var(--bg-primary));
+}

package/src/lib/styles/theme.css

@@ -0,0 +1,67 @@
+.light_theme {
+  --gradient-primary-start: 156 129 255;
+  --gradient-primary-end: 4 255 135;
+  --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: 36 45 66;
+  --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 {
+  --gradient-primary-start: 156 129 255;
+  --gradient-primary-end: 4 255 135;
+  --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: 97 101 108;
+  --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>}
+      @if(label){<div>{{ label }}</div>}
+    </div>
+  </ng-container>
+  }
+</button>

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

@@ -0,0 +1,11 @@
+<div class="chart-wrapper" [style.height]="height">
+  <div
+    echarts
+    [options]="chartOptions"
+    [loading]="loading"
+    (chartInit)="onChartInit($event)"
+    (chartClick)="onChartClick($event)"
+    class="fx-chart"
+    [style.height]="height"
+  ></div>
+</div>

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

@@ -0,0 +1,42 @@
+<label
+  class="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 w-4 h-4 border rounded-full transition-colors duration-150 shrink-0"
+    [ngClass]="{
+      'rounded-full': rounded,
+      'rounded-sm': !rounded,
+      '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 w-4 h-4 transition-opacity duration-150"
+        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>
+
+  @if(label){<span class="mb-0 txt-field-label">{{ label }}</span>}
+</label>

package/src/lib/ui/components/circle-progress-bar/circle-progress-bar.component.html

@@ -0,0 +1,44 @@
+<div class="flex items-center justify-center w-full h-full">
+  <svg
+    class="transform -rotate-90 block"
+    [attr.viewBox]="'0 0 ' + radius * 2 + ' ' + radius * 2"
+    width="100%"
+    height="100%"
+  >
+    <circle
+      class="opacity-20"
+      [attr.cx]="radius"
+      [attr.cy]="radius"
+      [attr.r]="normalizedRadius"
+      [attr.stroke-width]="stroke"
+      fill="transparent"
+      stroke="currentColor"
+    ></circle>
+
+    <circle
+      class="stroke-current"
+      [attr.cx]="radius"
+      [attr.cy]="radius"
+      [attr.r]="normalizedRadius"
+      [attr.stroke-width]="stroke"
+      fill="transparent"
+      stroke-linecap="round"
+      [attr.stroke-dasharray]="circumference"
+      [attr.stroke-dashoffset]="dashOffset"
+      style="transition: stroke-dashoffset 300ms linear"
+    ></circle>
+
+    @if(showPercent){
+      <text
+        [attr.x]="radius"
+        [attr.y]="radius"
+        dominant-baseline="central"
+        text-anchor="middle"
+        class="text-xs font-medium"
+        fill="currentColor"
+      >
+        {{ percent }}%
+      </text>
+    }
+  </svg>
+</div>

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

@@ -0,0 +1,36 @@
+<div class="flex flex-col mb-4 w-full text-left">
+  @if (label) {
+    <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"
+      [min]="minDate"
+      [max]="maxDate"
+      (blur)="onBlur()"
+      [value]="value"
+      readonly
+      class="input-default pr-9"
+    />
+    <span
+      [owlDateTimeTrigger]="picker"
+      class="absolute inset-y-0 right-0 flex items-center pr-2.5 cursor-pointer text-text-placeholder hover:text-text-primary transition-colors"
+    >
+      <fx-ui-hero-icon icon="calendar" [size]="20" class="text-text-primary"></fx-ui-hero-icon>
+    </span>
+  </div>
+  <owl-date-time
+    #picker
+    [startAt]="startAt"
+    [pickerType]="type"
+    (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>