@foxeltech/angular-ui 0.0.11 → 0.0.13

package/components.css

@@ -82,20 +82,24 @@
 }
 
 .mat-mdc-table {
-  border: 2px solid rgb(var(--border-default)) !important;
-  border-radius: 4px !important;
+  border: 1px solid rgb(var(--border-default)) !important;
+  border-radius: 12px !important;
+  overflow: hidden !important;
+  border-collapse: separate !important;
+  border-spacing: 0 !important;
+  background-color: rgb(var(--bg-primary)) !important;
 }
 
 .mdc-data-table__header-row {
-  height: 32px !important;
-  min-height: 32px !important;
+  height: 40px !important;
+  min-height: 40px !important;
 }
 
 .mdc-data-table__header-cell {
-  border-left: 1px solid rgb(var(--border-default)) !important;
   background-color: rgb(var(--bg-primary-hover)) !important;
-  padding-top: 4px !important;
-  padding-bottom: 4px !important;
+  border-bottom: 1px solid rgb(var(--border-default)) !important;
+  padding-top: 8px !important;
+  padding-bottom: 8px !important;
   line-height: 24px !important;
   font-family: 'Roboto';
 }
@@ -103,14 +107,23 @@
 .mdc-data-table__row {
   height: 0 !important;
   min-height: 0 !important;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.mat-mdc-row:hover .mdc-data-table__cell {
+  background-color: rgb(var(--bg-primary-hover)) !important;
 }
 
 .mdc-data-table__cell {
-  border-left: 1px solid rgb(var(--border-default)) !important;
+  border-bottom: 1px solid rgb(var(--border-default)) !important;
   background-color: rgb(var(--bg-primary)) !important;
   font-family: 'Roboto';
 }
 
+.mat-mdc-row:last-child .mdc-data-table__cell {
+  border-bottom: none !important;
+}
+
 .mat-mdc-cell {
   border-color: rgb(var(--border-default)) !important;
 }
@@ -279,7 +292,7 @@ input[type='password'] {
   @apply text-xs font-light text-text-secondary tracking-normal;
 }
 .txt-tag-common {
-  @apply font-medium text-xs;
+  @apply font-semibold text-xs;
 }
 .txt-tag-default {
   @apply txt-tag-common text-text-secondary;
@@ -321,6 +334,9 @@ input[type='password'] {
 .btn-primary {
   @apply btn-common bg-gradient-primary hover:opacity-75 text-text-focus;
 }
+.btn-success {
+  @apply btn-common bg-gradient-success hover:opacity-75 text-white;
+}
 .btn-alternative {
   @apply btn-common hover:bg-bg-hover text-text-primary border border-border-default;
 }
@@ -364,28 +380,28 @@ input[type='password'] {
 }
 
 .tag-common {
-  @apply flex min-w-7 px-normal py-small hover:opacity-70 items-center justify-center;
+  @apply flex min-w-7 px-[10px] py-[2px] leading-5 hover:opacity-70 items-center justify-center;
 }
 .tag-default {
   @apply tag-common bg-bg-hover;
 }
 .tag-success {
-  @apply tag-common bg-success/10;
+  @apply tag-common bg-success/20;
 }
 .tag-warning {
-  @apply tag-common bg-warning/10;
+  @apply tag-common bg-warning/20;
 }
 .tag-danger {
-  @apply tag-common bg-danger/10;
+  @apply tag-common bg-danger/20;
 }
 .tag-critical {
-  @apply tag-common bg-critical/10;
+  @apply tag-common bg-critical/20;
 }
 .tag-discovery {
-  @apply tag-common bg-discovery/10;
+  @apply tag-common bg-discovery/20;
 }
 .tag-information {
-  @apply tag-common bg-information/10;
+  @apply tag-common bg-information/20;
 }
 .tag-default-solid {
   @apply tag-common bg-bg-hover;
@@ -409,10 +425,10 @@ input[type='password'] {
   @apply tag-common bg-information;
 }
 .tag-square {
-  @apply rounded px-semi py-small;
+  @apply rounded-md px-semi py-small;
 }
 .tag-round {
-  @apply rounded-2xl;
+  @apply rounded-full;
 }
 /* progress bar */
 .progress-bar-container {

package/fesm2022/foxeltech-angular-ui.mjs

@@ -23,7 +23,7 @@ import * as i1$4 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
 import { catchError } from 'rxjs/operators';
 import * as signalR from '@microsoft/signalr';
-import * as i3$1 from '@angular/material/select';
+import * as i3$2 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i32 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
@@ -49,7 +49,7 @@ import * as i45 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i46 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i47 from '@angular/material/tooltip';
+import * as i3$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i2$2 from '@angular/cdk/drag-drop';
 import { DragDropModule, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
@@ -1616,11 +1616,11 @@ class ButtonComponent {
             this.clicked.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ButtonComponent, isStandalone: false, selector: "fx-ui-button", inputs: { label: "label", disabled: "disabled", buttonVariant: "buttonVariant", icon: "icon", class: "class", loading: "loading" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  [class]=\"class\"\n  [ngClass]=\"{\n    'btn-default': buttonVariant === 'default',\n    'btn-primary': buttonVariant === 'primary',\n    'btn-alternative': buttonVariant === 'alternative',\n  }\"\n  [disabled]=\"disabled || loading\"\n  (click)=\"onClick()\"\n>\n  @if (loading) {\n    <div class=\"flex w-full items-center justify-center\">\n      <svg\n        [attr.fill]=\"\n          buttonVariant !== 'alternative' ? 'rgb(var(--text-primary))' : 'rgb(var(--primary))'\n        \"\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle cx=\"4\" cy=\"12\" r=\"0\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_lo66\"\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_z0Or\"\n            begin=\"spinner_lo66.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"4\" cy=\"12\" r=\"3\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_JsnR\"\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_Aguh\"\n            begin=\"spinner_JsnR.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"12\" cy=\"12\" r=\"3\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_hSjk\"\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_UHR2\"\n            begin=\"spinner_hSjk.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"20\" cy=\"12\" r=\"3\">\n          <animate\n            id=\"spinner_4v5M\"\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_OLMs\"\n            begin=\"spinner_4v5M.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n        </circle>\n      </svg>\n    </div>\n  } @else {\n    <ng-container>\n      <div class=\"flex items-center justify-center gap-small\">\n        @if (icon) {\n          <fx-ui-hero-icon\n            [icon]=\"icon\"\n            [size]=\"20\"\n            class=\"flex\"\n            [ngClass]=\"{\n              'text-text-inverse': buttonVariant === 'default',\n              'text-text-primary': buttonVariant === 'alternative',\n              'text-white': buttonVariant === 'primary',\n            }\"\n          ></fx-ui-hero-icon>\n        }\n        @if (label) {\n          <div>{{ label }}</div>\n        }\n      </div>\n    </ng-container>\n  }\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ButtonComponent, isStandalone: false, selector: "fx-ui-button", inputs: { label: "label", disabled: "disabled", buttonVariant: "buttonVariant", icon: "icon", class: "class", loading: "loading" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  [class]=\"class\"\n  [ngClass]=\"{\n    'btn-default': buttonVariant === 'default',\n    'btn-primary': buttonVariant === 'primary',\n    'btn-success': buttonVariant === 'success',\n    'btn-alternative': buttonVariant === 'alternative',\n  }\"\n  [disabled]=\"disabled || loading\"\n  (click)=\"onClick()\"\n>\n  @if (loading) {\n    <div class=\"flex w-full items-center justify-center\">\n      <svg\n        [attr.fill]=\"\n          buttonVariant !== 'alternative' ? 'rgb(var(--text-primary))' : 'rgb(var(--primary))'\n        \"\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle cx=\"4\" cy=\"12\" r=\"0\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_lo66\"\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_z0Or\"\n            begin=\"spinner_lo66.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"4\" cy=\"12\" r=\"3\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_JsnR\"\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_Aguh\"\n            begin=\"spinner_JsnR.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"12\" cy=\"12\" r=\"3\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_hSjk\"\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_UHR2\"\n            begin=\"spinner_hSjk.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"20\" cy=\"12\" r=\"3\">\n          <animate\n            id=\"spinner_4v5M\"\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_OLMs\"\n            begin=\"spinner_4v5M.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n        </circle>\n      </svg>\n    </div>\n  } @else {\n    <ng-container>\n      <div class=\"flex items-center justify-center gap-small\">\n        @if (icon) {\n          <fx-ui-hero-icon\n            [icon]=\"icon\"\n            [size]=\"20\"\n            class=\"flex\"\n            [ngClass]=\"{\n              'text-text-inverse': buttonVariant === 'default',\n              'text-text-primary': buttonVariant === 'alternative',\n              'text-white': buttonVariant === 'primary' || buttonVariant === 'success',\n            }\"\n          ></fx-ui-hero-icon>\n        }\n        @if (label) {\n          <div>{{ label }}</div>\n        }\n      </div>\n    </ng-container>\n  }\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-button', standalone: false, template: "<button\n  [class]=\"class\"\n  [ngClass]=\"{\n    'btn-default': buttonVariant === 'default',\n    'btn-primary': buttonVariant === 'primary',\n    'btn-alternative': buttonVariant === 'alternative',\n  }\"\n  [disabled]=\"disabled || loading\"\n  (click)=\"onClick()\"\n>\n  @if (loading) {\n    <div class=\"flex w-full items-center justify-center\">\n      <svg\n        [attr.fill]=\"\n          buttonVariant !== 'alternative' ? 'rgb(var(--text-primary))' : 'rgb(var(--primary))'\n        \"\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle cx=\"4\" cy=\"12\" r=\"0\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_lo66\"\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_z0Or\"\n            begin=\"spinner_lo66.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"4\" cy=\"12\" r=\"3\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_JsnR\"\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_Aguh\"\n            begin=\"spinner_JsnR.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"12\" cy=\"12\" r=\"3\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_hSjk\"\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_UHR2\"\n            begin=\"spinner_hSjk.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"20\" cy=\"12\" r=\"3\">\n          <animate\n            id=\"spinner_4v5M\"\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_OLMs\"\n            begin=\"spinner_4v5M.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n        </circle>\n      </svg>\n    </div>\n  } @else {\n    <ng-container>\n      <div class=\"flex items-center justify-center gap-small\">\n        @if (icon) {\n          <fx-ui-hero-icon\n            [icon]=\"icon\"\n            [size]=\"20\"\n            class=\"flex\"\n            [ngClass]=\"{\n              'text-text-inverse': buttonVariant === 'default',\n              'text-text-primary': buttonVariant === 'alternative',\n              'text-white': buttonVariant === 'primary',\n            }\"\n          ></fx-ui-hero-icon>\n        }\n        @if (label) {\n          <div>{{ label }}</div>\n        }\n      </div>\n    </ng-container>\n  }\n</button>\n" }]
+            args: [{ selector: 'fx-ui-button', standalone: false, template: "<button\n  [class]=\"class\"\n  [ngClass]=\"{\n    'btn-default': buttonVariant === 'default',\n    'btn-primary': buttonVariant === 'primary',\n    'btn-success': buttonVariant === 'success',\n    'btn-alternative': buttonVariant === 'alternative',\n  }\"\n  [disabled]=\"disabled || loading\"\n  (click)=\"onClick()\"\n>\n  @if (loading) {\n    <div class=\"flex w-full items-center justify-center\">\n      <svg\n        [attr.fill]=\"\n          buttonVariant !== 'alternative' ? 'rgb(var(--text-primary))' : 'rgb(var(--primary))'\n        \"\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle cx=\"4\" cy=\"12\" r=\"0\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_lo66\"\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_z0Or\"\n            begin=\"spinner_lo66.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"4\" cy=\"12\" r=\"3\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_JsnR\"\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_Aguh\"\n            begin=\"spinner_JsnR.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"12\" cy=\"12\" r=\"3\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_hSjk\"\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_UHR2\"\n            begin=\"spinner_hSjk.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"20\" cy=\"12\" r=\"3\">\n          <animate\n            id=\"spinner_4v5M\"\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_OLMs\"\n            begin=\"spinner_4v5M.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n        </circle>\n      </svg>\n    </div>\n  } @else {\n    <ng-container>\n      <div class=\"flex items-center justify-center gap-small\">\n        @if (icon) {\n          <fx-ui-hero-icon\n            [icon]=\"icon\"\n            [size]=\"20\"\n            class=\"flex\"\n            [ngClass]=\"{\n              'text-text-inverse': buttonVariant === 'default',\n              'text-text-primary': buttonVariant === 'alternative',\n              'text-white': buttonVariant === 'primary' || buttonVariant === 'success',\n            }\"\n          ></fx-ui-hero-icon>\n        }\n        @if (label) {\n          <div>{{ label }}</div>\n        }\n      </div>\n    </ng-container>\n  }\n</button>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], disabled: [{
@@ -2423,6 +2423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 class InputComponent extends FxComponent {
     ref;
     label = '';
+    tooltip = '';
     type = 'text';
     placeholder = '';
     errorMessages = {};
@@ -2488,13 +2489,15 @@ class InputComponent extends FxComponent {
         return this.type;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InputComponent, deps: [{ token: i1$3.NgControl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: InputComponent, isStandalone: false, selector: "fx-ui-input", inputs: { label: "label", type: "type", placeholder: "placeholder", errorMessages: "errorMessages", required: "required", disabled: "disabled", suffixIcon: "suffixIcon", class: "class", maxlength: "maxlength", validateFn: "validateFn" }, outputs: { blurred: "blurred", focused: "focused", suffixClick: "suffixClick" }, usesInheritance: true, ngImport: i0, template: "<div class=\"mb-4 text-left w-full text-text-primary\" [class]=\"class\">\n  @if (label) {\n    <label class=\"block txt-field-label\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <input\n      appTrimOnBlur\n      [appTrimOnBlurCollapse]=\"true\"\n      [type]=\"displayType\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [value]=\"value\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      [attr.maxlength]=\"maxlength\"\n      [class]=\"type === 'otp' ? 'input-otp' : 'input-default'\"\n      [class.input-invalid]=\"invalid\"\n      [class.pr-8]=\"type === 'password' || suffixIcon\"\n      [class.txt-otp-input]=\"type === 'otp'\"\n    />\n    @if (type === 'password' || suffixIcon) {\n      <button\n        type=\"button\"\n        class=\"absolute inset-y-0 right-2 flex items-center text-text-primary hover:text-text-secondary\"\n        (click)=\"onSuffixClick()\"\n        [disabled]=\"disabled\"\n      >\n        @if (type === 'password') {\n          <fx-ui-hero-icon\n            [icon]=\"showPassword ? 'eye-slash' : 'eye'\"\n            [size]=\"18\"\n            class=\"text-text-primary\"\n          ></fx-ui-hero-icon>\n        } @else if (suffixIcon) {\n          <fx-ui-hero-icon\n            [icon]=\"suffixIcon\"\n            [size]=\"18\"\n            class=\"text-text-primary\"\n          ></fx-ui-hero-icon>\n        }\n      </button>\n    }\n  </div>\n\n  @if (invalid) {\n    <div class=\"txt-invalid\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: TrimOnBlurDirective, selector: "[appTrimOnBlur]", inputs: ["appTrimOnBlurCollapse"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: InputComponent, isStandalone: false, selector: "fx-ui-input", inputs: { label: "label", tooltip: "tooltip", type: "type", placeholder: "placeholder", errorMessages: "errorMessages", required: "required", disabled: "disabled", suffixIcon: "suffixIcon", class: "class", maxlength: "maxlength", validateFn: "validateFn" }, outputs: { blurred: "blurred", focused: "focused", suffixClick: "suffixClick" }, usesInheritance: true, ngImport: i0, template: "<div class=\"mb-4 text-left w-full text-text-primary\" [class]=\"class\">\n  @if (label) {\n    <label class=\"block txt-field-label\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\">*</span>\n      }\n      @if (tooltip) {\n        <fx-ui-hero-icon\n          icon=\"information-circle\"\n          [size]=\"16\"\n          class=\"inline-block align-middle ml-0.5 text-text-secondary cursor-help relative -top-px\"\n          [matTooltip]=\"tooltip\"\n          matTooltipPosition=\"above\"\n          matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        ></fx-ui-hero-icon>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <input\n      appTrimOnBlur\n      [appTrimOnBlurCollapse]=\"true\"\n      [type]=\"displayType\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [value]=\"value\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      [attr.maxlength]=\"maxlength\"\n      [class]=\"type === 'otp' ? 'input-otp' : 'input-default'\"\n      [class.input-invalid]=\"invalid\"\n      [class.pr-8]=\"type === 'password' || suffixIcon\"\n      [class.txt-otp-input]=\"type === 'otp'\"\n    />\n    @if (type === 'password' || suffixIcon) {\n      <button\n        type=\"button\"\n        class=\"absolute inset-y-0 right-2 flex items-center text-text-primary hover:text-text-secondary\"\n        (click)=\"onSuffixClick()\"\n        [disabled]=\"disabled\"\n      >\n        @if (type === 'password') {\n          <fx-ui-hero-icon\n            [icon]=\"showPassword ? 'eye-slash' : 'eye'\"\n            [size]=\"18\"\n            class=\"text-text-primary\"\n          ></fx-ui-hero-icon>\n        } @else if (suffixIcon) {\n          <fx-ui-hero-icon\n            [icon]=\"suffixIcon\"\n            [size]=\"18\"\n            class=\"text-text-primary\"\n          ></fx-ui-hero-icon>\n        }\n      </button>\n    }\n  </div>\n\n  @if (invalid) {\n    <div class=\"txt-invalid\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: TrimOnBlurDirective, selector: "[appTrimOnBlur]", inputs: ["appTrimOnBlurCollapse"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-input', standalone: false, template: "<div class=\"mb-4 text-left w-full text-text-primary\" [class]=\"class\">\n  @if (label) {\n    <label class=\"block txt-field-label\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <input\n      appTrimOnBlur\n      [appTrimOnBlurCollapse]=\"true\"\n      [type]=\"displayType\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [value]=\"value\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      [attr.maxlength]=\"maxlength\"\n      [class]=\"type === 'otp' ? 'input-otp' : 'input-default'\"\n      [class.input-invalid]=\"invalid\"\n      [class.pr-8]=\"type === 'password' || suffixIcon\"\n      [class.txt-otp-input]=\"type === 'otp'\"\n    />\n    @if (type === 'password' || suffixIcon) {\n      <button\n        type=\"button\"\n        class=\"absolute inset-y-0 right-2 flex items-center text-text-primary hover:text-text-secondary\"\n        (click)=\"onSuffixClick()\"\n        [disabled]=\"disabled\"\n      >\n        @if (type === 'password') {\n          <fx-ui-hero-icon\n            [icon]=\"showPassword ? 'eye-slash' : 'eye'\"\n            [size]=\"18\"\n            class=\"text-text-primary\"\n          ></fx-ui-hero-icon>\n        } @else if (suffixIcon) {\n          <fx-ui-hero-icon\n            [icon]=\"suffixIcon\"\n            [size]=\"18\"\n            class=\"text-text-primary\"\n          ></fx-ui-hero-icon>\n        }\n      </button>\n    }\n  </div>\n\n  @if (invalid) {\n    <div class=\"txt-invalid\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'fx-ui-input', standalone: false, template: "<div class=\"mb-4 text-left w-full text-text-primary\" [class]=\"class\">\n  @if (label) {\n    <label class=\"block txt-field-label\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\">*</span>\n      }\n      @if (tooltip) {\n        <fx-ui-hero-icon\n          icon=\"information-circle\"\n          [size]=\"16\"\n          class=\"inline-block align-middle ml-0.5 text-text-secondary cursor-help relative -top-px\"\n          [matTooltip]=\"tooltip\"\n          matTooltipPosition=\"above\"\n          matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        ></fx-ui-hero-icon>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <input\n      appTrimOnBlur\n      [appTrimOnBlurCollapse]=\"true\"\n      [type]=\"displayType\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [value]=\"value\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      [attr.maxlength]=\"maxlength\"\n      [class]=\"type === 'otp' ? 'input-otp' : 'input-default'\"\n      [class.input-invalid]=\"invalid\"\n      [class.pr-8]=\"type === 'password' || suffixIcon\"\n      [class.txt-otp-input]=\"type === 'otp'\"\n    />\n    @if (type === 'password' || suffixIcon) {\n      <button\n        type=\"button\"\n        class=\"absolute inset-y-0 right-2 flex items-center text-text-primary hover:text-text-secondary\"\n        (click)=\"onSuffixClick()\"\n        [disabled]=\"disabled\"\n      >\n        @if (type === 'password') {\n          <fx-ui-hero-icon\n            [icon]=\"showPassword ? 'eye-slash' : 'eye'\"\n            [size]=\"18\"\n            class=\"text-text-primary\"\n          ></fx-ui-hero-icon>\n        } @else if (suffixIcon) {\n          <fx-ui-hero-icon\n            [icon]=\"suffixIcon\"\n            [size]=\"18\"\n            class=\"text-text-primary\"\n          ></fx-ui-hero-icon>\n        }\n      </button>\n    }\n  </div>\n\n  @if (invalid) {\n    <div class=\"txt-invalid\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$3.NgControl }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
+            }], tooltip: [{
+                type: Input
             }], type: [{
                 type: Input
             }], placeholder: [{
@@ -2584,6 +2587,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 class RadioButtonComponent extends FxComponent {
     ref;
     label;
+    tooltip = '';
     required = false;
     options = [];
     disabled = false;
@@ -2607,13 +2611,15 @@ class RadioButtonComponent extends FxComponent {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RadioButtonComponent, deps: [{ token: i1$3.NgControl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RadioButtonComponent, isStandalone: false, selector: "fx-ui-radio", inputs: { label: "label", required: "required", options: "options", disabled: "disabled", errorMessages: "errorMessages", class: "class" }, usesInheritance: true, ngImport: i0, template: "<div class=\"w-full rounded-lg overflow-hidden\" [class]=\"class\" role=\"radiogroup\">\n  @if (label){\n  <label class=\"txt-field-label\">\n    {{ label }}\n    @if(required){<span class=\"txt-required\">*</span>} </label\n  >}\n\n  <button\n    *ngFor=\"let opt of options\"\n    type=\"button\"\n    role=\"radio\"\n    [attr.aria-checked]=\"value === opt.value\"\n    (click)=\"onSelectValue(opt.value)\"\n    [disabled]=\"disabled\"\n    [class.text-gray-900]=\"value !== opt.value\"\n    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\"\n  >\n    <span\n      [ngClass]=\"{\n        'radio-checked': value === opt.value,\n        'radio-uncheck': value !== opt.value\n      }\"\n      class=\"radio-container\"\n    >\n      @if(value === opt.value) {<span class=\"radio-dot\"></span>}\n    </span>\n\n    <span class=\"txt-default mb-0\">{{ opt.label }}</span>\n  </button>\n  @if (invalid){\n  <div class=\"txt-invalid\">\n    {{ getErrorMessage(label) }}\n  </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RadioButtonComponent, isStandalone: false, selector: "fx-ui-radio", inputs: { label: "label", tooltip: "tooltip", required: "required", options: "options", disabled: "disabled", errorMessages: "errorMessages", class: "class" }, usesInheritance: true, ngImport: i0, template: "<div class=\"w-full rounded-lg overflow-hidden\" [class]=\"class\" role=\"radiogroup\">\n  @if (label) {\n    <label class=\"txt-field-label\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\">*</span>\n      }\n      @if (tooltip) {\n        <fx-ui-hero-icon\n          icon=\"information-circle\"\n          [size]=\"16\"\n          class=\"inline-block align-middle ml-0.5 text-text-secondary cursor-help relative -top-px\"\n          [matTooltip]=\"tooltip\"\n          matTooltipPosition=\"above\"\n          matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        ></fx-ui-hero-icon>\n      }\n    </label>\n  }\n\n  <button\n    *ngFor=\"let opt of options\"\n    type=\"button\"\n    role=\"radio\"\n    [attr.aria-checked]=\"value === opt.value\"\n    (click)=\"onSelectValue(opt.value)\"\n    [disabled]=\"disabled\"\n    [class.text-gray-900]=\"value !== opt.value\"\n    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\"\n    [matTooltip]=\"opt.tooltip || ''\"\n    matTooltipPosition=\"right\"\n    matTooltipClass=\"text-text-primary text-xs font-semibold\"\n  >\n    <span\n      [ngClass]=\"{\n        'radio-checked': value === opt.value,\n        'radio-uncheck': value !== opt.value,\n      }\"\n      class=\"radio-container\"\n    >\n      @if (value === opt.value) {\n        <span class=\"radio-dot\"></span>\n      }\n    </span>\n\n    <span class=\"txt-default mb-0\">{{ opt.label }}</span>\n  </button>\n  @if (invalid) {\n    <div class=\"txt-invalid\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-radio', standalone: false, template: "<div class=\"w-full rounded-lg overflow-hidden\" [class]=\"class\" role=\"radiogroup\">\n  @if (label){\n  <label class=\"txt-field-label\">\n    {{ label }}\n    @if(required){<span class=\"txt-required\">*</span>} </label\n  >}\n\n  <button\n    *ngFor=\"let opt of options\"\n    type=\"button\"\n    role=\"radio\"\n    [attr.aria-checked]=\"value === opt.value\"\n    (click)=\"onSelectValue(opt.value)\"\n    [disabled]=\"disabled\"\n    [class.text-gray-900]=\"value !== opt.value\"\n    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\"\n  >\n    <span\n      [ngClass]=\"{\n        'radio-checked': value === opt.value,\n        'radio-uncheck': value !== opt.value\n      }\"\n      class=\"radio-container\"\n    >\n      @if(value === opt.value) {<span class=\"radio-dot\"></span>}\n    </span>\n\n    <span class=\"txt-default mb-0\">{{ opt.label }}</span>\n  </button>\n  @if (invalid){\n  <div class=\"txt-invalid\">\n    {{ getErrorMessage(label) }}\n  </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'fx-ui-radio', standalone: false, template: "<div class=\"w-full rounded-lg overflow-hidden\" [class]=\"class\" role=\"radiogroup\">\n  @if (label) {\n    <label class=\"txt-field-label\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\">*</span>\n      }\n      @if (tooltip) {\n        <fx-ui-hero-icon\n          icon=\"information-circle\"\n          [size]=\"16\"\n          class=\"inline-block align-middle ml-0.5 text-text-secondary cursor-help relative -top-px\"\n          [matTooltip]=\"tooltip\"\n          matTooltipPosition=\"above\"\n          matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        ></fx-ui-hero-icon>\n      }\n    </label>\n  }\n\n  <button\n    *ngFor=\"let opt of options\"\n    type=\"button\"\n    role=\"radio\"\n    [attr.aria-checked]=\"value === opt.value\"\n    (click)=\"onSelectValue(opt.value)\"\n    [disabled]=\"disabled\"\n    [class.text-gray-900]=\"value !== opt.value\"\n    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\"\n    [matTooltip]=\"opt.tooltip || ''\"\n    matTooltipPosition=\"right\"\n    matTooltipClass=\"text-text-primary text-xs font-semibold\"\n  >\n    <span\n      [ngClass]=\"{\n        'radio-checked': value === opt.value,\n        'radio-uncheck': value !== opt.value,\n      }\"\n      class=\"radio-container\"\n    >\n      @if (value === opt.value) {\n        <span class=\"radio-dot\"></span>\n      }\n    </span>\n\n    <span class=\"txt-default mb-0\">{{ opt.label }}</span>\n  </button>\n  @if (invalid) {\n    <div class=\"txt-invalid\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$3.NgControl }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
+            }], tooltip: [{
+                type: Input
             }], required: [{
                 type: Input
             }], options: [{
@@ -2763,6 +2769,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 class SelectComponent extends FxComponent {
     ref;
     label = '';
+    tooltip = '';
     placeholder = '';
     options = [];
     multiple = false;
@@ -2829,13 +2836,15 @@ class SelectComponent extends FxComponent {
         return this.value === value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectComponent, deps: [{ token: i1$3.NgControl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SelectComponent, isStandalone: false, selector: "fx-ui-select", inputs: { label: "label", placeholder: "placeholder", options: "options", multiple: "multiple", disabled: "disabled", errorMessages: "errorMessages", required: "required", class: "class", enableSearch: "enableSearch", searchFn: "searchFn" }, outputs: { closed: "closed" }, usesInheritance: true, ngImport: i0, template: "<div class=\"mb-4 text-left w-full\" [class]=\"class\">\n  @if (label) {\n    <label class=\"block txt-field-label\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\">*</span>\n      }\n    </label>\n  }\n\n  <mat-form-field\n    [attr.invalid]=\"invalid || null\"\n    class=\"fx-select-field w-full shadow-sm\"\n    appearance=\"fill\"\n  >\n    <mat-select\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [multiple]=\"multiple\"\n      [value]=\"value\"\n      (selectionChange)=\"onSelectionChange($event.value)\"\n      (openedChange)=\"onOpened($event)\"\n      (blur)=\"onTouched()\"\n    >\n      @if (enableSearch) {\n        <div class=\"px-semi w-full\">\n          <input\n            type=\"text\"\n            [placeholder]=\"'Search'\"\n            [(ngModel)]=\"searchTerm\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            (click)=\"$event.stopPropagation()\"\n            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\"\n          />\n        </div>\n      }\n      <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option.value\">\n        <span class=\"txt-default\">{{ option.label }}</span>\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  @if (invalid) {\n    <div class=\"txt-invalid text-left\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n", styles: ["::ng-deep .fx-select-field{display:block!important;width:100%!important;margin:0!important;padding:0!important;border-radius:.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 .75rem!important;border:1px solid rgb(var(--border-default));border-radius:.375rem;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(--gradient-primary-start))!important;outline:none!important;border-radius:.375rem}::ng-deep .fx-select-field.mat-form-field-invalid .mat-mdc-form-field-flex{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}::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:.375rem!important;box-shadow:0 2px 4px #0000001a!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}.mat-select-panel .search-option-full-width{padding-left:0!important;padding-right:0!important;display:block;pointer-events:none;line-height:initial;height:auto}.mat-select-panel .search-option-full-width .search-bar{width:100%;padding:8px 16px;border:none;border-bottom:1px solid #ddd;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SelectComponent, isStandalone: false, selector: "fx-ui-select", inputs: { label: "label", tooltip: "tooltip", placeholder: "placeholder", options: "options", multiple: "multiple", disabled: "disabled", errorMessages: "errorMessages", required: "required", class: "class", enableSearch: "enableSearch", searchFn: "searchFn" }, outputs: { closed: "closed" }, usesInheritance: true, ngImport: i0, template: "<div class=\"mb-4 text-left w-full\" [class]=\"class\">\n  @if (label) {\n    <label class=\"block txt-field-label\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\">*</span>\n      }\n      @if (tooltip) {\n        <fx-ui-hero-icon\n          icon=\"information-circle\"\n          [size]=\"16\"\n          class=\"inline-block align-middle ml-0.5 text-text-secondary cursor-help relative -top-px\"\n          [matTooltip]=\"tooltip\"\n          matTooltipPosition=\"above\"\n          matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        ></fx-ui-hero-icon>\n      }\n    </label>\n  }\n\n  <mat-form-field\n    [attr.invalid]=\"invalid || null\"\n    class=\"fx-select-field w-full shadow-sm\"\n    appearance=\"fill\"\n  >\n    <mat-select\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [multiple]=\"multiple\"\n      [value]=\"value\"\n      (selectionChange)=\"onSelectionChange($event.value)\"\n      (openedChange)=\"onOpened($event)\"\n      (blur)=\"onTouched()\"\n    >\n      @if (enableSearch) {\n        <div class=\"px-semi w-full\">\n          <input\n            type=\"text\"\n            [placeholder]=\"'Search'\"\n            [(ngModel)]=\"searchTerm\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            (click)=\"$event.stopPropagation()\"\n            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\"\n          />\n        </div>\n      }\n      <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option.value\">\n        <span class=\"txt-default\">{{ option.label }}</span>\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  @if (invalid) {\n    <div class=\"txt-invalid text-left\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n", styles: ["::ng-deep .fx-select-field{display:block!important;width:100%!important;margin:0!important;padding:0!important;border-radius:.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 .75rem!important;border:1px solid rgb(var(--border-default));border-radius:.375rem;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(--gradient-primary-start))!important;outline:none!important;border-radius:.375rem}::ng-deep .fx-select-field.mat-form-field-invalid .mat-mdc-form-field-flex{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}::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:.375rem!important;box-shadow:0 2px 4px #0000001a!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}.mat-select-panel .search-option-full-width{padding-left:0!important;padding-right:0!important;display:block;pointer-events:none;line-height:initial;height:auto}.mat-select-panel .search-option-full-width .search-bar{width:100%;padding:8px 16px;border:none;border-bottom:1px solid #ddd;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-select', standalone: false, template: "<div class=\"mb-4 text-left w-full\" [class]=\"class\">\n  @if (label) {\n    <label class=\"block txt-field-label\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\">*</span>\n      }\n    </label>\n  }\n\n  <mat-form-field\n    [attr.invalid]=\"invalid || null\"\n    class=\"fx-select-field w-full shadow-sm\"\n    appearance=\"fill\"\n  >\n    <mat-select\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [multiple]=\"multiple\"\n      [value]=\"value\"\n      (selectionChange)=\"onSelectionChange($event.value)\"\n      (openedChange)=\"onOpened($event)\"\n      (blur)=\"onTouched()\"\n    >\n      @if (enableSearch) {\n        <div class=\"px-semi w-full\">\n          <input\n            type=\"text\"\n            [placeholder]=\"'Search'\"\n            [(ngModel)]=\"searchTerm\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            (click)=\"$event.stopPropagation()\"\n            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\"\n          />\n        </div>\n      }\n      <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option.value\">\n        <span class=\"txt-default\">{{ option.label }}</span>\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  @if (invalid) {\n    <div class=\"txt-invalid text-left\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n", styles: ["::ng-deep .fx-select-field{display:block!important;width:100%!important;margin:0!important;padding:0!important;border-radius:.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 .75rem!important;border:1px solid rgb(var(--border-default));border-radius:.375rem;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(--gradient-primary-start))!important;outline:none!important;border-radius:.375rem}::ng-deep .fx-select-field.mat-form-field-invalid .mat-mdc-form-field-flex{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}::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:.375rem!important;box-shadow:0 2px 4px #0000001a!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}.mat-select-panel .search-option-full-width{padding-left:0!important;padding-right:0!important;display:block;pointer-events:none;line-height:initial;height:auto}.mat-select-panel .search-option-full-width .search-bar{width:100%;padding:8px 16px;border:none;border-bottom:1px solid #ddd;box-sizing:border-box}\n"] }]
+            args: [{ selector: 'fx-ui-select', standalone: false, template: "<div class=\"mb-4 text-left w-full\" [class]=\"class\">\n  @if (label) {\n    <label class=\"block txt-field-label\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\">*</span>\n      }\n      @if (tooltip) {\n        <fx-ui-hero-icon\n          icon=\"information-circle\"\n          [size]=\"16\"\n          class=\"inline-block align-middle ml-0.5 text-text-secondary cursor-help relative -top-px\"\n          [matTooltip]=\"tooltip\"\n          matTooltipPosition=\"above\"\n          matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        ></fx-ui-hero-icon>\n      }\n    </label>\n  }\n\n  <mat-form-field\n    [attr.invalid]=\"invalid || null\"\n    class=\"fx-select-field w-full shadow-sm\"\n    appearance=\"fill\"\n  >\n    <mat-select\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [multiple]=\"multiple\"\n      [value]=\"value\"\n      (selectionChange)=\"onSelectionChange($event.value)\"\n      (openedChange)=\"onOpened($event)\"\n      (blur)=\"onTouched()\"\n    >\n      @if (enableSearch) {\n        <div class=\"px-semi w-full\">\n          <input\n            type=\"text\"\n            [placeholder]=\"'Search'\"\n            [(ngModel)]=\"searchTerm\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            (click)=\"$event.stopPropagation()\"\n            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\"\n          />\n        </div>\n      }\n      <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option.value\">\n        <span class=\"txt-default\">{{ option.label }}</span>\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  @if (invalid) {\n    <div class=\"txt-invalid text-left\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n", styles: ["::ng-deep .fx-select-field{display:block!important;width:100%!important;margin:0!important;padding:0!important;border-radius:.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 .75rem!important;border:1px solid rgb(var(--border-default));border-radius:.375rem;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(--gradient-primary-start))!important;outline:none!important;border-radius:.375rem}::ng-deep .fx-select-field.mat-form-field-invalid .mat-mdc-form-field-flex{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}::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:.375rem!important;box-shadow:0 2px 4px #0000001a!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}.mat-select-panel .search-option-full-width{padding-left:0!important;padding-right:0!important;display:block;pointer-events:none;line-height:initial;height:auto}.mat-select-panel .search-option-full-width .search-bar{width:100%;padding:8px 16px;border:none;border-bottom:1px solid #ddd;box-sizing:border-box}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.NgControl }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
+            }], tooltip: [{
+                type: Input
             }], placeholder: [{
                 type: Input
             }], options: [{
@@ -3487,7 +3496,7 @@ class DrawerComponent {
         return this.isExpanded ? 'expanded' : 'collapsed';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DrawerComponent, deps: [{ token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: DrawerComponent, isStandalone: false, selector: "fx-ui-drawer", inputs: { items: "items", isExpanded: "isExpanded", logo: "logo", version: "version" }, outputs: { toggleExpanded: "toggleExpanded", itemClicked: "itemClicked" }, ngImport: i0, template: "<div class=\"drawer-host-wrapper\">\n  <a\n    href=\"/\"\n    class=\"h-[60px]\"\n    [ngClass]=\"{ 'flex items-center justify-center': !isExpanded, 'p-4': isExpanded }\"\n  >\n    @if (logo) {\n      <img\n        [src]=\"logo\"\n        class=\"h-[20px] w-auto transition-all duration-300 ease-in-out\"\n        [ngClass]=\"{ 'scale-90': !isExpanded, 'ml-5': isExpanded }\"\n      />\n    } @else {\n      <div class=\"h-[30px] w-auto transition-all duration-300 ease-in-out\"></div>\n    }\n  </a>\n  <div class=\"drawer-container\" [@drawerExpand]=\"getDrawerState()\">\n    <!-- Navigation Items -->\n    <nav class=\"drawer-nav\">\n      <ng-container *ngFor=\"let item of items\">\n        <ng-container\n          *ngTemplateOutlet=\"drawerItem; context: { $implicit: item, level: 0 }\"\n        ></ng-container>\n      </ng-container>\n    </nav>\n\n    <!-- Version -->\n    <div *ngIf=\"version\" class=\"drawer-version\" [matTooltip]=\"!isExpanded ? version : ''\" matTooltipPosition=\"right\">\n      <span *ngIf=\"isExpanded\">{{ version }}</span>\n      <span *ngIf=\"!isExpanded\" class=\"drawer-version-dot\"></span>\n    </div>\n  </div>\n\n  <!-- Floating Toggle Button on right border -->\n  <button\n    type=\"button\"\n    class=\"toggle-btn\"\n    (click)=\"toggleDrawer()\"\n    [matTooltip]=\"isExpanded ? 'Collapse' : 'Expand'\"\n    matTooltipClass=\"text-text-primary text-xs font-semibold\"\n    matTooltipPosition=\"right\"\n  >\n    <fx-ui-hero-icon\n      [icon]=\"isExpanded ? 'chevron-left' : 'chevron-right'\"\n      [size]=\"16\"\n      class=\"text-text-primary\"\n    ></fx-ui-hero-icon>\n  </button>\n</div>\n\n<!-- Recursive Template for Drawer Items -->\n<ng-template #drawerItem let-item let-level=\"level\">\n  <div class=\"drawer-item-wrapper\">\n    <!-- Item Button/Link -->\n    <a\n      *ngIf=\"item.route && !item.children\"\n      [routerLink]=\"item.route\"\n      class=\"drawer-item\"\n      [class.active]=\"isActiveRoute(item.route)\"\n      [class.has-children]=\"item.children && item.children.length > 0\"\n      [style.paddingLeft.px]=\"isExpanded ? 16 + level * 16 : 16\"\n      [matTooltip]=\"!isExpanded ? item.label : ''\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"text-text-primary text-xs font-semibold\"\n      (click)=\"onItemClick(item, $event)\"\n    >\n      <div class=\"item-content\">\n        <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"20\" class=\"item-icon\"></fx-ui-hero-icon>\n        <span *ngIf=\"isExpanded\" class=\"item-label\">{{ item.label }}</span>\n      </div>\n    </a>\n\n    <button\n      *ngIf=\"!item.route || item.children\"\n      type=\"button\"\n      class=\"drawer-item\"\n      [class.active]=\"isActiveRoute(item.route)\"\n      [class.has-children]=\"item.children && item.children.length > 0\"\n      [style.paddingLeft.px]=\"isExpanded ? 16 + level * 16 : 16\"\n      [matTooltip]=\"!isExpanded ? item.label : ''\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"text-text-primary text-sm font-semibold\"\n      (click)=\"onItemClick(item, $event)\"\n    >\n      <div class=\"item-content\">\n        <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"20\" class=\"item-icon\"></fx-ui-hero-icon>\n        <span *ngIf=\"isExpanded\" class=\"item-label\">{{ item.label }}</span>\n        <fx-ui-hero-icon\n          *ngIf=\"isExpanded && item.children && item.children.length > 0\"\n          [icon]=\"'chevron-down'\"\n          [size]=\"16\"\n          class=\"chevron-icon\"\n          [class.rotated]=\"isAccordionExpanded(item.id)\"\n        ></fx-ui-hero-icon>\n      </div>\n    </button>\n\n    <!-- Accordion Children -->\n    <div\n      *ngIf=\"item.children && item.children.length > 0\"\n      class=\"accordion-children\"\n      [@accordionExpand]=\"getAccordionState(item.id)\"\n    >\n      <ng-container *ngFor=\"let child of item.children\">\n        <ng-container\n          *ngTemplateOutlet=\"drawerItem; context: { $implicit: child, level: level + 1 }\"\n        ></ng-container>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%}.drawer-host-wrapper{position:relative;height:100%;border-right-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1))}.drawer-container{display:flex;height:100%;flex-direction:column;overflow:auto;--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));padding-left:.5rem;padding-right:.5rem;transition:width .3s cubic-bezier(.4,0,.2,1)}.toggle-btn{position:absolute;top:50%;z-index:50;display:flex;height:1.5rem;width:1.5rem;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(var(--shadow-color) / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);right:-12px;transition:all .2s ease}.toggle-btn:hover{--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(var(--shadow-color) / .1), 0 2px 4px -2px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.toggle-btn:active{transform:translateY(-50%) scale(.9)}.toggle-btn:focus-visible{outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary) / 1)}.drawer-nav{flex:1 1 0%;overflow-y:auto;overflow-x:hidden;padding-top:.5rem;padding-bottom:.5rem}.drawer-nav::-webkit-scrollbar{width:.375rem}.drawer-nav::-webkit-scrollbar-track{background-color:transparent}.drawer-nav::-webkit-scrollbar-thumb{border-radius:.125rem;--tw-bg-opacity: 1;background-color:rgb(var(--border-default) / var(--tw-bg-opacity, 1))}.drawer-nav::-webkit-scrollbar-thumb:hover{--tw-bg-opacity: 1;background-color:rgb(var(--text-placeholder) / var(--tw-bg-opacity, 1))}.drawer-item-wrapper{position:relative}.drawer-item{position:relative;margin-top:.25rem;display:flex;min-height:2rem;width:100%;cursor:pointer;align-items:center;border-radius:.25rem;border-style:none;background-color:transparent;padding:.5rem 1rem;--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1));text-decoration-line:none;transition:all .2s ease}.drawer-item:hover{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}.drawer-item.active{background-image:linear-gradient(135deg,rgb(var(--gradient-primary-start)),rgb(var(--gradient-primary-end)));font-weight:500;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.drawer-item.active .item-icon{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.drawer-item:active{transform:scale(.98)}.drawer-item:focus-visible{outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary) / 1)}.drawer-item{-webkit-tap-highlight-color:transparent;outline:2px solid transparent;outline-offset:2px}.item-content{display:flex;width:100%;align-items:center;gap:.75rem;overflow:hidden}.item-icon{flex-shrink:0;color:inherit}.item-label{flex:1 1 0%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:13px;line-height:1.25rem}.chevron-icon{margin-left:auto;flex-shrink:0;--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1));transition:transform .3s cubic-bezier(.4,0,.2,1)}.chevron-icon.rotated{transform:rotate(180deg)}.accordion-children{overflow:hidden}.drawer-version{display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1));padding:.75rem 1rem;font-size:11px;--tw-text-opacity: 1;color:rgb(var(--text-placeholder) / var(--tw-text-opacity, 1));font-family:Roboto,monospace}.drawer-version-dot{display:block;height:.375rem;width:.375rem;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(var(--text-placeholder) / var(--tw-bg-opacity, 1))}.drawer-container[style*=\"width: 64px\"] .drawer-item{justify-content:center;padding-left:16px!important}.drawer-container[style*=\"width: 64px\"] .item-content{justify-content:center}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i47.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: DrawerComponent, isStandalone: false, selector: "fx-ui-drawer", inputs: { items: "items", isExpanded: "isExpanded", logo: "logo", version: "version" }, outputs: { toggleExpanded: "toggleExpanded", itemClicked: "itemClicked" }, ngImport: i0, template: "<div class=\"drawer-host-wrapper\">\n  <a\n    href=\"/\"\n    class=\"h-[60px]\"\n    [ngClass]=\"{ 'flex items-center justify-center': !isExpanded, 'p-4': isExpanded }\"\n  >\n    @if (logo) {\n      <img\n        [src]=\"logo\"\n        class=\"h-[20px] w-auto transition-all duration-300 ease-in-out\"\n        [ngClass]=\"{ 'scale-90': !isExpanded, 'ml-5': isExpanded }\"\n      />\n    } @else {\n      <div class=\"h-[30px] w-auto transition-all duration-300 ease-in-out\"></div>\n    }\n  </a>\n  <div class=\"drawer-container\" [@drawerExpand]=\"getDrawerState()\">\n    <!-- Navigation Items -->\n    <nav class=\"drawer-nav\">\n      <ng-container *ngFor=\"let item of items\">\n        <ng-container\n          *ngTemplateOutlet=\"drawerItem; context: { $implicit: item, level: 0 }\"\n        ></ng-container>\n      </ng-container>\n    </nav>\n\n    <!-- Version -->\n    <div *ngIf=\"version\" class=\"drawer-version\" [matTooltip]=\"!isExpanded ? version : ''\" matTooltipPosition=\"right\">\n      <span *ngIf=\"isExpanded\">{{ version }}</span>\n      <span *ngIf=\"!isExpanded\" class=\"drawer-version-dot\"></span>\n    </div>\n  </div>\n\n  <!-- Floating Toggle Button on right border -->\n  <button\n    type=\"button\"\n    class=\"toggle-btn\"\n    (click)=\"toggleDrawer()\"\n    [matTooltip]=\"isExpanded ? 'Collapse' : 'Expand'\"\n    matTooltipClass=\"text-text-primary text-xs font-semibold\"\n    matTooltipPosition=\"right\"\n  >\n    <fx-ui-hero-icon\n      [icon]=\"isExpanded ? 'chevron-left' : 'chevron-right'\"\n      [size]=\"16\"\n      class=\"text-text-primary\"\n    ></fx-ui-hero-icon>\n  </button>\n</div>\n\n<!-- Recursive Template for Drawer Items -->\n<ng-template #drawerItem let-item let-level=\"level\">\n  <div class=\"drawer-item-wrapper\">\n    <!-- Item Button/Link -->\n    <a\n      *ngIf=\"item.route && !item.children\"\n      [routerLink]=\"item.route\"\n      class=\"drawer-item\"\n      [class.active]=\"isActiveRoute(item.route)\"\n      [class.has-children]=\"item.children && item.children.length > 0\"\n      [style.paddingLeft.px]=\"isExpanded ? 16 + level * 16 : 16\"\n      [matTooltip]=\"!isExpanded ? item.label : ''\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"text-text-primary text-xs font-semibold\"\n      (click)=\"onItemClick(item, $event)\"\n    >\n      <div class=\"item-content\">\n        <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"20\" class=\"item-icon\"></fx-ui-hero-icon>\n        <span *ngIf=\"isExpanded\" class=\"item-label\">{{ item.label }}</span>\n      </div>\n    </a>\n\n    <button\n      *ngIf=\"!item.route || item.children\"\n      type=\"button\"\n      class=\"drawer-item\"\n      [class.active]=\"isActiveRoute(item.route)\"\n      [class.has-children]=\"item.children && item.children.length > 0\"\n      [style.paddingLeft.px]=\"isExpanded ? 16 + level * 16 : 16\"\n      [matTooltip]=\"!isExpanded ? item.label : ''\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"text-text-primary text-sm font-semibold\"\n      (click)=\"onItemClick(item, $event)\"\n    >\n      <div class=\"item-content\">\n        <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"20\" class=\"item-icon\"></fx-ui-hero-icon>\n        <span *ngIf=\"isExpanded\" class=\"item-label\">{{ item.label }}</span>\n        <fx-ui-hero-icon\n          *ngIf=\"isExpanded && item.children && item.children.length > 0\"\n          [icon]=\"'chevron-down'\"\n          [size]=\"16\"\n          class=\"chevron-icon\"\n          [class.rotated]=\"isAccordionExpanded(item.id)\"\n        ></fx-ui-hero-icon>\n      </div>\n    </button>\n\n    <!-- Accordion Children -->\n    <div\n      *ngIf=\"item.children && item.children.length > 0\"\n      class=\"accordion-children\"\n      [@accordionExpand]=\"getAccordionState(item.id)\"\n    >\n      <ng-container *ngFor=\"let child of item.children\">\n        <ng-container\n          *ngTemplateOutlet=\"drawerItem; context: { $implicit: child, level: level + 1 }\"\n        ></ng-container>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%}.drawer-host-wrapper{position:relative;height:100%;border-right-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1))}.drawer-container{display:flex;height:100%;flex-direction:column;overflow:auto;--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));padding-left:.5rem;padding-right:.5rem;transition:width .3s cubic-bezier(.4,0,.2,1)}.toggle-btn{position:absolute;top:50%;z-index:50;display:flex;height:1.5rem;width:1.5rem;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(var(--shadow-color) / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);right:-12px;transition:all .2s ease}.toggle-btn:hover{--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(var(--shadow-color) / .1), 0 2px 4px -2px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.toggle-btn:active{transform:translateY(-50%) scale(.9)}.toggle-btn:focus-visible{outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary) / 1)}.drawer-nav{flex:1 1 0%;overflow-y:auto;overflow-x:hidden;padding-top:.5rem;padding-bottom:.5rem}.drawer-nav::-webkit-scrollbar{width:.375rem}.drawer-nav::-webkit-scrollbar-track{background-color:transparent}.drawer-nav::-webkit-scrollbar-thumb{border-radius:.125rem;--tw-bg-opacity: 1;background-color:rgb(var(--border-default) / var(--tw-bg-opacity, 1))}.drawer-nav::-webkit-scrollbar-thumb:hover{--tw-bg-opacity: 1;background-color:rgb(var(--text-placeholder) / var(--tw-bg-opacity, 1))}.drawer-item-wrapper{position:relative}.drawer-item{position:relative;margin-top:.25rem;display:flex;min-height:2rem;width:100%;cursor:pointer;align-items:center;border-radius:.25rem;border-style:none;background-color:transparent;padding:.5rem 1rem;--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1));text-decoration-line:none;transition:all .2s ease}.drawer-item:hover{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}.drawer-item.active{background-image:linear-gradient(135deg,rgb(var(--gradient-primary-start)),rgb(var(--gradient-primary-end)));font-weight:500;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.drawer-item.active .item-icon{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.drawer-item:active{transform:scale(.98)}.drawer-item:focus-visible{outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary) / 1)}.drawer-item{-webkit-tap-highlight-color:transparent;outline:2px solid transparent;outline-offset:2px}.item-content{display:flex;width:100%;align-items:center;gap:.75rem;overflow:hidden}.item-icon{flex-shrink:0;color:inherit}.item-label{flex:1 1 0%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:13px;line-height:1.25rem}.chevron-icon{margin-left:auto;flex-shrink:0;--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1));transition:transform .3s cubic-bezier(.4,0,.2,1)}.chevron-icon.rotated{transform:rotate(180deg)}.accordion-children{overflow:hidden}.drawer-version{display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1));padding:.75rem 1rem;font-size:11px;--tw-text-opacity: 1;color:rgb(var(--text-placeholder) / var(--tw-text-opacity, 1));font-family:Roboto,monospace}.drawer-version-dot{display:block;height:.375rem;width:.375rem;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(var(--text-placeholder) / var(--tw-bg-opacity, 1))}.drawer-container[style*=\"width: 64px\"] .drawer-item{justify-content:center;padding-left:16px!important}.drawer-container[style*=\"width: 64px\"] .item-content{justify-content:center}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }], animations: [
             trigger('drawerExpand', [
                 state('collapsed', style({ width: '70px' })),
                 state('expanded', style({ width: '260px' })),
@@ -3620,7 +3629,7 @@ class UiModule {
             OwlMomentDateTimeModule,
             HasPermissionDirective,
             TrimOnBlurDirective,
-            NgHeroiconsModule, i29.VflowComponent, i29.HandleComponent, i29.ResizableComponent, i29.SelectableDirective, i29.MiniMapComponent, i29.NodeToolbarComponent, i29.CustomTemplateEdgeComponent, i29.DragHandleDirective, i29.ConnectionControllerDirective, i29.NodeHtmlTemplateDirective, i29.NodeSvgTemplateDirective, i29.GroupNodeTemplateDirective, i29.EdgeLabelHtmlTemplateDirective, i29.EdgeTemplateDirective, i29.ConnectionTemplateDirective, i29.HandleTemplateDirective, i1$5.NgxEchartsModule, i3$1.MatSelectModule, i32.MatRadioModule, i33.MatButtonModule, i34.MatIconModule, i35.MatPaginatorModule, i36.MatTableModule, i37.MatSnackBarModule, i1$1.MatDialogModule, i39.MatCheckboxModule, i40.MatCardModule, i41.MatDatepickerModule, i42.MatTimepickerModule, i43.MatBadgeModule, i44.MatExpansionModule, i45.MatFormFieldModule, i46.MatMenuModule, i47.MatTooltipModule, i2$2.DragDropModule], exports: [InputComponent, SelectComponent, RadioButtonComponent, CheckboxComponent, DndUploadComponent, ButtonComponent, RadioButtonToggleComponent, DatetimePicker, LoadingPanel, SearchBarComponent, TabGroupComponent, TabComponent, HeroIconComponent, ToastComponent, ToastContainerComponent, TagComponent, ChartComponent, SliderComponent, SwitchComponent, RichTextAreaComponent, SkeletonTableLoadingComponent, FlowConnection, CircleProgressBar, TreeDiagram, TableCell, KanbanBoardComponent, DrawerComponent, ConfirmationDialogComponent, 
+            NgHeroiconsModule, i29.VflowComponent, i29.HandleComponent, i29.ResizableComponent, i29.SelectableDirective, i29.MiniMapComponent, i29.NodeToolbarComponent, i29.CustomTemplateEdgeComponent, i29.DragHandleDirective, i29.ConnectionControllerDirective, i29.NodeHtmlTemplateDirective, i29.NodeSvgTemplateDirective, i29.GroupNodeTemplateDirective, i29.EdgeLabelHtmlTemplateDirective, i29.EdgeTemplateDirective, i29.ConnectionTemplateDirective, i29.HandleTemplateDirective, i1$5.NgxEchartsModule, i3$2.MatSelectModule, i32.MatRadioModule, i33.MatButtonModule, i34.MatIconModule, i35.MatPaginatorModule, i36.MatTableModule, i37.MatSnackBarModule, i1$1.MatDialogModule, i39.MatCheckboxModule, i40.MatCardModule, i41.MatDatepickerModule, i42.MatTimepickerModule, i43.MatBadgeModule, i44.MatExpansionModule, i45.MatFormFieldModule, i46.MatMenuModule, i3$1.MatTooltipModule, i2$2.DragDropModule], exports: [InputComponent, SelectComponent, RadioButtonComponent, CheckboxComponent, DndUploadComponent, ButtonComponent, RadioButtonToggleComponent, DatetimePicker, LoadingPanel, SearchBarComponent, TabGroupComponent, TabComponent, HeroIconComponent, ToastComponent, ToastContainerComponent, TagComponent, ChartComponent, SliderComponent, SwitchComponent, RichTextAreaComponent, SkeletonTableLoadingComponent, FlowConnection, CircleProgressBar, TreeDiagram, TableCell, KanbanBoardComponent, DrawerComponent, ConfirmationDialogComponent, 
             // Module
             FormsModule,
             ReactiveFormsModule,
@@ -3628,7 +3637,7 @@ class UiModule {
             OwlDateTimeModule,
             OwlNativeDateTimeModule,
             HasPermissionDirective,
-            NgHeroiconsModule, i3$1.MatSelectModule, i32.MatRadioModule, i33.MatButtonModule, i34.MatIconModule, i35.MatPaginatorModule, i36.MatTableModule, i37.MatSnackBarModule, i1$1.MatDialogModule, i39.MatCheckboxModule, i40.MatCardModule, i41.MatDatepickerModule, i42.MatTimepickerModule, i43.MatBadgeModule, i44.MatExpansionModule, i45.MatFormFieldModule, i46.MatMenuModule, i47.MatTooltipModule, i2$2.DragDropModule] });
+            NgHeroiconsModule, i3$2.MatSelectModule, i32.MatRadioModule, i33.MatButtonModule, i34.MatIconModule, i35.MatPaginatorModule, i36.MatTableModule, i37.MatSnackBarModule, i1$1.MatDialogModule, i39.MatCheckboxModule, i40.MatCardModule, i41.MatDatepickerModule, i42.MatTimepickerModule, i43.MatBadgeModule, i44.MatExpansionModule, i45.MatFormFieldModule, i46.MatMenuModule, i3$1.MatTooltipModule, i2$2.DragDropModule] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: UiModule, providers: [
             importProvidersFrom(NgHeroiconsModule.forRoot()),
             { provide: OWL_DATE_TIME_FORMATS, useValue: MY_MOMENT_FORMATS },
@@ -3646,7 +3655,7 @@ class UiModule {
             RouterModule,
             OwlDateTimeModule,
             OwlNativeDateTimeModule,
-            NgHeroiconsModule, i3$1.MatSelectModule, i32.MatRadioModule, i33.MatButtonModule, i34.MatIconModule, i35.MatPaginatorModule, i36.MatTableModule, i37.MatSnackBarModule, i1$1.MatDialogModule, i39.MatCheckboxModule, i40.MatCardModule, i41.MatDatepickerModule, i42.MatTimepickerModule, i43.MatBadgeModule, i44.MatExpansionModule, i45.MatFormFieldModule, i46.MatMenuModule, i47.MatTooltipModule, i2$2.DragDropModule] });
+            NgHeroiconsModule, i3$2.MatSelectModule, i32.MatRadioModule, i33.MatButtonModule, i34.MatIconModule, i35.MatPaginatorModule, i36.MatTableModule, i37.MatSnackBarModule, i1$1.MatDialogModule, i39.MatCheckboxModule, i40.MatCardModule, i41.MatDatepickerModule, i42.MatTimepickerModule, i43.MatBadgeModule, i44.MatExpansionModule, i45.MatFormFieldModule, i46.MatMenuModule, i3$1.MatTooltipModule, i2$2.DragDropModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: UiModule, decorators: [{
             type: NgModule,