@foxeltech/angular-ui 0.0.1

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/table-cell/table-cell.component.html

@@ -0,0 +1,7 @@
+@if (!loading) {
+  <div animate.enter="fade-in-animation" class="inline-block my-normal">
+    <ng-content />
+  </div>
+} @else {
+  <div animate.enter="fade-in-animation" class="skeleton-load my-semi" [class]="skeletonClass"></div>
+}

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

@@ -0,0 +1,15 @@
+<div
+  [class]="`flex flex-row gap-small ${rounded ? 'tag-round' : 'tag-square'} tag-${type}${solid ? '-solid' : ''}`"
+>
+  @if(icon){
+  <fx-ui-hero-icon
+    [class]="`flex txt-tag-${type} ${solid ? 'text-white': ''}`"
+    [icon]="icon"
+    [size]="18"
+  ></fx-ui-hero-icon>
+  }
+
+  <div [class]="`txt-tag-${type} ${solid ? 'text-white': ''}`">
+    {{ 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-[400px] 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/components/tree-diagram/tree-diagram.component.html

@@ -0,0 +1,40 @@
+<div class="relative p-8" #container>
+
+  <!-- ROOT -->
+  <div
+    #root
+    class="mx-auto w-fit bg-blue-600 text-white px-7 py-3 rounded-md font-semibold text-center"
+  >
+    {{ data.label }}
+  </div>
+
+  <!-- CHILDREN -->
+  <div class="mt-16 flex justify-center gap-16">
+    <div
+      *ngFor="let child of data.children"
+      #child
+      class="w-48 bg-rose-600 text-white px-4 py-4 rounded-lg text-center"
+    >
+      <div class="font-semibold text-lg">{{ child.label }}</div>
+      <div class="mt-1 text-sm opacity-90">{{ child.status }}</div>
+    </div>
+  </div>
+
+  <!-- SVG CONNECTORS -->
+  <svg
+    class="absolute inset-0 pointer-events-none"
+    [attr.width]="svgWidth"
+    [attr.height]="svgHeight"
+  >
+    <line
+      *ngFor="let line of lines"
+      [attr.x1]="line.x1"
+      [attr.y1]="line.y1"
+      [attr.x2]="line.x2"
+      [attr.y2]="line.y2"
+      stroke="#1f2937"
+      stroke-width="2"
+    />
+  </svg>
+
+</div>

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

@@ -0,0 +1,17 @@
+<div animate.enter="fade-in-animation" class="dialog-container">
+  <h1 class="txt-heading-05 dialog-header">{{ title }}</h1>
+  <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()"
+      [loading]="loading"
+      class="min-w-[100px]"
+    ></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,88 @@
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        'gradient-primary-start': 'rgb(var(--gradient-primary-start) / <alpha-value>)',
+        'gradient-primary-end': 'rgb(var(--gradient-primary-end) / <alpha-value>)',
+        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>)',
+        },
+      },
+      backgroundImage: {
+        'gradient-primary':
+          'linear-gradient(135deg, rgb(var(--gradient-primary-start)) 0%, rgb(var(--gradient-primary-end)) 100%)',
+      },
+      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'],
+        dmsans: ['DMSans', 'sans-serif'],
+        orbitron: ['Orbitron', 'sans-serif'],
+        bevn: ['BeVietnamPro', 'sans-serif'],
+      },
+      fontSize: {
+        xs: '0.75rem',
+        sm: '0.875rem',
+        base: '1rem',
+        xl: '1.25rem',
+        '2xl': '1.625rem',
+        '3xl': '2rem',
+        '4xl': '2.25rem',
+        '5xl': '3rem',
+      }
+    },
+  },
+  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: 'BeVietnamPro';
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  background: rgb(var(--bg-primary));
+}

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