@foxeltech/angular-ui 0.0.1 → 0.0.3

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

@@ -1,8 +1,11 @@
 <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>
+  @if (label) {
+    <label class="block txt-field-label">
+      {{ label }}
+      @if (required) {
+        <span class="txt-required">*</span>
+      }
+    </label>
   }
 
   <div class="relative">
@@ -18,31 +21,31 @@
       (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'
-      }"
+      [class.input-invalid]="invalid"
+      [class.pr-8]="type === 'password' || suffixIcon"
+      [class.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>
+    @if (type === 'password' || suffixIcon) {
+      <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>
+  @if (invalid) {
+    <div class="txt-invalid">
+      {{ getErrorMessage(label) }}
+    </div>
   }
 </div>

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

@@ -26,7 +26,7 @@
   margin: 0 !important;
   padding: 0 0.75rem !important;
   border: 1px solid rgb(var(--border-default));
-  border-radius: 0.5rem;
+  border-radius: 0.375rem;
   height: 36px !important;
   align-items: center;
   background-color: rgb(var(--bg-primary));
@@ -38,13 +38,18 @@
 }
 
 ::ng-deep .fx-select-field.mat-focused .mat-mdc-form-field-flex {
-  border: 2px solid rgb(var(--border-interactive)) !important;
+  border: 2px solid rgb(var(--gradient-primary-start)) !important;
   outline: none !important;
-  border-radius: 0.5rem;
+  border-radius: 0.375rem;
 }
 
 ::ng-deep .fx-select-field.mat-form-field-invalid .mat-mdc-form-field-flex {
-  border-color: #ef4444 !important;
+  border: 1px solid rgb(var(--bg-error-bold)) !important;
+  box-shadow: none !important;
+}
+
+::ng-deep mat-form-field[invalid] .mat-mdc-form-field-flex {
+  border: 1px solid rgb(var(--bg-error-bold)) !important;
   box-shadow: none !important;
 }
 
@@ -64,7 +69,7 @@
 ::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;
+  border-radius: 0.375rem !important;
   box-shadow: 0 2px 4px rgb(0 0 0 / 0.1) !important;
 }
 

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

@@ -1,12 +1,18 @@
 <div class="mb-4 text-left w-full" [class]="class">
   @if (label) {
-  <label class="block txt-field-label">
-    {{ label }}
-    @if(required) {<span class="txt-required">*</span>}
-  </label>
+    <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-form-field
+    [attr.invalid]="invalid || null"
+    class="fx-select-field w-full shadow-sm"
+    appearance="fill"
+  >
     <mat-select
       [placeholder]="placeholder"
       [disabled]="disabled"
@@ -16,17 +22,17 @@
       (openedChange)="onOpened($event)"
       (blur)="onTouched()"
     >
-      @if(enableSearch){
-      <div class="px-semi w-full">
-        <input
-          type="text"
-          [placeholder]="'Search'"
-          [(ngModel)]="searchTerm"
-          (ngModelChange)="onSearchChange($event)"
-          (click)="$event.stopPropagation()"
-          class="text-text-primary placeholder:text-text-placeholder w-full bg-bg-primary border-b px-semi py-normal border-border-default focus:outline-none focus:border-border-interactive text-sm text-text-primary tracking-normal ring-0 transition-colors duration-500 ease-in-out"
-        />
-      </div>
+      @if (enableSearch) {
+        <div class="px-semi w-full">
+          <input
+            type="text"
+            [placeholder]="'Search'"
+            [(ngModel)]="searchTerm"
+            (ngModelChange)="onSearchChange($event)"
+            (click)="$event.stopPropagation()"
+            class="text-text-primary placeholder:text-text-placeholder w-full bg-bg-primary border-b px-semi py-normal border-border-default focus:outline-none focus:border-gradient-primary-start text-sm text-text-primary tracking-normal ring-0 transition-colors duration-500 ease-in-out"
+          />
+        </div>
       }
       <mat-option *ngFor="let option of filteredOptions" [value]="option.value">
         <span class="txt-default">{{ option.label }}</span>
@@ -34,9 +40,9 @@
     </mat-select>
   </mat-form-field>
 
-  @if(invalid) {
-  <div class="txt-invalid text-left">
-    {{ getErrorMessage(label) }}
-  </div>
+  @if (invalid) {
+    <div class="txt-invalid text-left">
+      {{ getErrorMessage(label) }}
+    </div>
   }
 </div>

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

@@ -29,17 +29,24 @@
       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>
+        @if (tab.icon) {
+          <fx-ui-hero-icon
+            [icon]="tab.icon"
+            [size]="20"
+            class="flex mr-[2px]"
+            [ngClass]="{
+              'text-gradient-primary-start mb-small': i === activeIndex,
+              'text-text-placeholder': i !== activeIndex,
+            }"
+          ></fx-ui-hero-icon>
+        }
+        <div
+          [ngClass]="
+            i === activeIndex ? 'txt-field-label text-gradient-primary-start' : 'txt-placeholder'
+          "
+        >
+          {{ tab.label }}
+        </div>
       </div>
     </button>
 

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

@@ -1,15 +1,17 @@
 <div
-  [class]="`flex flex-row gap-small ${rounded ? 'tag-round' : 'tag-square'} tag-${type}${solid ? '-solid' : ''}`"
+  [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>
+  @if (icon) {
+    <fx-ui-hero-icon
+      [class]="`flex txt-tag-${type} ${solid && type !== 'default' ? 'text-white' : ''}`"
+      [icon]="icon"
+      [size]="18"
+    ></fx-ui-hero-icon>
   }
 
-  <div [class]="`txt-tag-${type} ${solid ? 'text-white': ''}`">
+  <div [class]="`txt-tag-${type} ${solid && type !== 'default' ? 'text-white font-medium' : ''}`">
     {{ label }}
   </div>
 </div>

package/tailwind.config.js

@@ -47,6 +47,7 @@ module.exports = {
         sm: '640px',
         md: '960px',
         lg: '1280px',
+        xl: '2560px'
       },
       boxShadow: {
         sm: '0 1px 2px 0 rgb(var(--shadow-color) / 0.05)',

package/tailwind.css

@@ -9,7 +9,7 @@
 @tailwind utilities;
 
 html, body {
-  font-family: 'BeVietnamPro';
+  font-family: 'DMSans';
   margin: 0;
   padding: 0;
   height: 100%;

package/theme.css

@@ -3,12 +3,12 @@
   --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;
+  --success: 18 244 146;
+  --warning: 255 199 0;
+  --critical: 254 4 83;
+  --danger: 255 122 0;
+  --discovery: 156 129 255;
+  --information: 23 127 240;
   --text-primary: 36 45 66;
   --text-secondary: 97 101 108;
   --border-default: 236 236 236;
@@ -44,7 +44,7 @@
   --discovery: 119 113 227;
   --information: 62 175 240;
   --text-primary: 247 247 247;
-  --text-secondary: 97 101 108;
+  --text-secondary: 133 136 142;
   --border-default: 55 58 65;
   --text-placeholder: 133 136 142;
   --step-bg: 255 255 255;