@fxlt/common-ui 0.0.1 → 0.0.3-rc1

package/fesm2022/fxlt-common-ui.mjs

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, Component, createComponent, Injectable, ViewChild, Inject, EventEmitter, NgModule, Output, HostListener, Optional, Self, ChangeDetectionStrategy, TemplateRef, ContentChildren, importProvidersFrom } from '@angular/core';
-import * as i26 from '@angular/material/paginator';
+import { Directive, Input, Component, createComponent, Injectable, ViewChild, Inject, EventEmitter, NgModule, HostListener, PLATFORM_ID, Output, Optional, Self, ChangeDetectionStrategy, TemplateRef, ContentChildren, importProvidersFrom } from '@angular/core';
+import * as i28 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import * as i27 from '@angular/material/table';
+import * as i29 from '@angular/material/table';
 import { MatTableDataSource, MatTable, MatTableModule } from '@angular/material/table';
 import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i1 from '@dimaslz/ng-heroicons';
 import { NgHeroiconsModule } from '@dimaslz/ng-heroicons';
 import _, { clamp } from 'lodash';
-import { Observable, firstValueFrom, BehaviorSubject, Subject, throwError } from 'rxjs';
+import { Observable, firstValueFrom, Subject, debounceTime, BehaviorSubject, throwError, distinctUntilChanged } from 'rxjs';
 import * as i1$1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i2$1 from '@angular/common/http';
@@ -17,33 +17,33 @@ import { HttpClient } from '@angular/common/http';
 import * as i1$2 from '@ngx-translate/core';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-import * as i2$2 from '@angular/router';
-import { catchError } from 'rxjs/operators';
 import * as i1$3 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i2$2 from '@angular/router';
+import { catchError } from 'rxjs/operators';
 import * as i3$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i23 from '@angular/material/radio';
+import * as i25 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i24 from '@angular/material/button';
+import * as i26 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i25 from '@angular/material/icon';
+import * as i27 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i28 from '@angular/material/snack-bar';
+import * as i30 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import * as i30 from '@angular/material/checkbox';
+import * as i32 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i31 from '@angular/material/card';
+import * as i33 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i32 from '@angular/material/datepicker';
+import * as i34 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i33 from '@angular/material/timepicker';
+import * as i35 from '@angular/material/timepicker';
 import { MatTimepickerModule } from '@angular/material/timepicker';
-import * as i34 from '@angular/material/badge';
+import * as i36 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
-import * as i35 from '@angular/material/expansion';
+import * as i37 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
-import * as i36 from '@angular/material/form-field';
+import * as i38 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i3 from '@danielmoncada/angular-datetime-picker';
 import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
@@ -99,11 +99,11 @@ class ToastComponent {
     message = '';
     type;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ToastComponent, isStandalone: false, selector: "fx-ui-toast", inputs: { toastId: "toastId", title: "title", message: "message", type: "type" }, ngImport: i0, template: "<div\n  animate.enter=\"horizontal-fade-in-animation\"\n  animate.leave=\"horizontal-fade-out-animation\"\n  class=\"flex border-l-[3px] items-center bg-bg-primary gap-semi min-w-[250px] max-w-[320px] px-large py-semi rounded shadow-lg transition-all duration-300 ease-in-out transform opacity-100 translate-y-0\"\n  [ngClass]=\"{\n    'border-success': type === 'success',\n    'border-critical': type === 'error',\n    'border-warning': type === 'warning',\n    'border-information': type === 'info'\n  }\"\n>\n  <div class=\"\">\n    @switch (type) { @case('success') {\n    <fx-ui-hero-icon\n      icon=\"check-circle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-success\"\n    ></fx-ui-hero-icon>\n    } @case('error') {\n    <fx-ui-hero-icon\n      icon=\"exclamation-circle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-critical\"\n    ></fx-ui-hero-icon>\n    } @case('warning') {\n    <fx-ui-hero-icon\n      icon=\"exclamation-triangle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-warning\"\n    ></fx-ui-hero-icon>\n    } @default {\n    <fx-ui-hero-icon\n      icon=\"information-circle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-information\"\n    ></fx-ui-hero-icon>\n    } }\n  </div>\n\n  <div class=\"flex flex-col\">\n    <strong *ngIf=\"title\" class=\"txt-field-label\">{{ title }}</strong>\n    <p class=\"txt-default\">{{ message }}</p>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["icon", "solid", "outline", "size", "color", "class"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ToastComponent, isStandalone: false, selector: "fx-ui-toast", inputs: { toastId: "toastId", title: "title", message: "message", type: "type" }, ngImport: i0, template: "<div\n  animate.enter=\"horizontal-fade-in-animation\"\n  animate.leave=\"horizontal-fade-out-animation\"\n  class=\"flex border-l-[3px] items-center bg-bg-primary gap-semi min-w-[250px] max-w-[400px] px-large py-semi rounded shadow-lg transition-all duration-300 ease-in-out transform opacity-100 translate-y-0\"\n  [ngClass]=\"{\n    'border-success': type === 'success',\n    'border-critical': type === 'error',\n    'border-warning': type === 'warning',\n    'border-information': type === 'info'\n  }\"\n>\n  <div class=\"\">\n    @switch (type) { @case('success') {\n    <fx-ui-hero-icon\n      icon=\"check-circle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-success\"\n    ></fx-ui-hero-icon>\n    } @case('error') {\n    <fx-ui-hero-icon\n      icon=\"exclamation-circle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-critical\"\n    ></fx-ui-hero-icon>\n    } @case('warning') {\n    <fx-ui-hero-icon\n      icon=\"exclamation-triangle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-warning\"\n    ></fx-ui-hero-icon>\n    } @default {\n    <fx-ui-hero-icon\n      icon=\"information-circle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-information\"\n    ></fx-ui-hero-icon>\n    } }\n  </div>\n\n  <div class=\"flex flex-col\">\n    <strong *ngIf=\"title\" class=\"txt-field-label\">{{ title }}</strong>\n    <p class=\"txt-default\">{{ message }}</p>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["icon", "solid", "outline", "size", "color", "class"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-toast', standalone: false, template: "<div\n  animate.enter=\"horizontal-fade-in-animation\"\n  animate.leave=\"horizontal-fade-out-animation\"\n  class=\"flex border-l-[3px] items-center bg-bg-primary gap-semi min-w-[250px] max-w-[320px] px-large py-semi rounded shadow-lg transition-all duration-300 ease-in-out transform opacity-100 translate-y-0\"\n  [ngClass]=\"{\n    'border-success': type === 'success',\n    'border-critical': type === 'error',\n    'border-warning': type === 'warning',\n    'border-information': type === 'info'\n  }\"\n>\n  <div class=\"\">\n    @switch (type) { @case('success') {\n    <fx-ui-hero-icon\n      icon=\"check-circle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-success\"\n    ></fx-ui-hero-icon>\n    } @case('error') {\n    <fx-ui-hero-icon\n      icon=\"exclamation-circle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-critical\"\n    ></fx-ui-hero-icon>\n    } @case('warning') {\n    <fx-ui-hero-icon\n      icon=\"exclamation-triangle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-warning\"\n    ></fx-ui-hero-icon>\n    } @default {\n    <fx-ui-hero-icon\n      icon=\"information-circle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-information\"\n    ></fx-ui-hero-icon>\n    } }\n  </div>\n\n  <div class=\"flex flex-col\">\n    <strong *ngIf=\"title\" class=\"txt-field-label\">{{ title }}</strong>\n    <p class=\"txt-default\">{{ message }}</p>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'fx-ui-toast', standalone: false, template: "<div\n  animate.enter=\"horizontal-fade-in-animation\"\n  animate.leave=\"horizontal-fade-out-animation\"\n  class=\"flex border-l-[3px] items-center bg-bg-primary gap-semi min-w-[250px] max-w-[400px] px-large py-semi rounded shadow-lg transition-all duration-300 ease-in-out transform opacity-100 translate-y-0\"\n  [ngClass]=\"{\n    'border-success': type === 'success',\n    'border-critical': type === 'error',\n    'border-warning': type === 'warning',\n    'border-information': type === 'info'\n  }\"\n>\n  <div class=\"\">\n    @switch (type) { @case('success') {\n    <fx-ui-hero-icon\n      icon=\"check-circle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-success\"\n    ></fx-ui-hero-icon>\n    } @case('error') {\n    <fx-ui-hero-icon\n      icon=\"exclamation-circle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-critical\"\n    ></fx-ui-hero-icon>\n    } @case('warning') {\n    <fx-ui-hero-icon\n      icon=\"exclamation-triangle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-warning\"\n    ></fx-ui-hero-icon>\n    } @default {\n    <fx-ui-hero-icon\n      icon=\"information-circle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-information\"\n    ></fx-ui-hero-icon>\n    } }\n  </div>\n\n  <div class=\"flex flex-col\">\n    <strong *ngIf=\"title\" class=\"txt-field-label\">{{ title }}</strong>\n    <p class=\"txt-default\">{{ message }}</p>\n  </div>\n</div>\n" }]
         }], propDecorators: { toastId: [{
                 type: Input
             }], title: [{
@@ -342,6 +342,10 @@ class FxUtils {
         const isEmail = emailRegex.test(value);
         return isEmail;
     }
+    static isStrongPassword(password) {
+        const regex = /^(?=.{6,}$)(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9]).*$/;
+        return regex.test(password);
+    }
 }
 
 class HttpWrapper {
@@ -427,12 +431,13 @@ class BaseTableComponent extends BaseComponent {
     cols = [];
     total = 0;
     page = 1;
-    pageSize = 5;
+    pageSize = 10;
     filters = {};
     loading = false;
     expandedElement;
     toastr;
     _lock = false;
+    keywordChange$ = new Subject();
     config;
     paginator;
     table;
@@ -444,6 +449,9 @@ class BaseTableComponent extends BaseComponent {
         this.toastr = injector.get(FxToastrService);
     }
     ngOnInit() {
+        this.keywordChange$.pipe(debounceTime(300)).subscribe(async (keyword) => {
+            await this.refresh();
+        });
         this.init();
     }
     init() { }
@@ -465,13 +473,13 @@ class BaseTableComponent extends BaseComponent {
             const params = { page: this.page, pageSize: this.pageSize, ...this.filters };
             const result = await this.api.search(params);
             this.setDataSource(result);
-            this.ref.detectChanges();
         }
         catch (err) {
-            this.toastr.error(FxUtils.parseError(err), 'Error');
+            this.toastr.error(FxUtils.parseError(err));
         }
         finally {
             this.loading = false;
+            this.ref.detectChanges();
         }
     }
     async onPageChange(event) {
@@ -485,6 +493,9 @@ class BaseTableComponent extends BaseComponent {
     empty() {
         return {};
     }
+    onKeywordChange(keyword) {
+        this.keywordChange$.next(keyword);
+    }
     async create() {
         const conf = _.get(this.config, 'create');
         const dialog = _.get(conf, 'dialog');
@@ -506,6 +517,7 @@ class BaseTableComponent extends BaseComponent {
             width: size,
             disableClose: true,
             data: {
+                method: 'create',
                 data: this.empty(),
                 title: conf.title,
                 message: conf.message,
@@ -540,6 +552,7 @@ class BaseTableComponent extends BaseComponent {
             width: size,
             disableClose: true,
             data: {
+                method: 'update',
                 data: model,
                 title: conf.title,
                 message: conf.message,
@@ -590,32 +603,36 @@ class BaseTableComponent extends BaseComponent {
             return;
         }
         this._lock = true;
-        const conf = _.get(this.config, 'delete');
-        const dialog = _.get(conf, 'dialog');
-        const dialogRef = this.modal.open(dialog, {
-            panelClass: 'fx-dialog',
-            autoFocus: false,
-            width: '400px',
-            data: {
-                title: _.get(conf, 'title'),
-                message: _.get(conf, 'message'),
-                cancelTitle: _.get(conf, 'cancelTitle'),
-                confirmTitle: _.get(conf, 'confirmTitle'),
-            },
-        });
-        dialogRef.afterClosed().subscribe(async (state) => {
+        try {
+            const conf = _.get(this.config, 'delete');
+            const dialog = _.get(conf, 'dialog');
+            const dialogRef = this.modal.open(dialog, {
+                panelClass: 'fx-dialog',
+                autoFocus: false,
+                width: '400px',
+                data: {
+                    title: _.get(conf, 'title'),
+                    message: _.get(conf, 'message'),
+                    cancelLabel: _.get(conf, 'cancelTitle'),
+                    confirmLabel: _.get(conf, 'confirmTitle'),
+                    callback: async () => {
+                        await this.remove(model);
+                    },
+                },
+            });
+            const state = await firstValueFrom(dialogRef.afterClosed());
             if (state) {
                 try {
-                    await this.remove(model);
-                    this.refresh();
+                    await this.refresh();
                 }
                 catch (err) {
-                    this.toastr.error(FxUtils.parseError(err), 'Error');
+                    this.toastr.error(FxUtils.parseError(err));
                 }
-                return;
             }
+        }
+        finally {
             this._lock = false;
-        });
+        }
     }
     async remove(model) {
         try {
@@ -631,6 +648,18 @@ class BaseTableComponent extends BaseComponent {
     toggleExpand(element) {
         this.expandedElement = this.expandedElement === element ? null : element;
     }
+    async updateStatus(params) {
+        try {
+            await this.api.updateStatus(params);
+            this.toastr.success(_.get(this.config, 'updateStatus.message', 'Update Success'));
+        }
+        catch (err) {
+            this.toastr.success(FxUtils.parseError(err));
+        }
+        finally {
+            await this.refresh();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BaseTableComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: BaseTableComponent, isStandalone: true, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true }], usesInheritance: true, ngImport: i0 });
 }
@@ -651,6 +680,7 @@ class BaseDialogComponent extends BaseComponent {
     api;
     dialog;
     ngForm;
+    method;
     title;
     model;
     disabled;
@@ -667,6 +697,7 @@ class BaseDialogComponent extends BaseComponent {
         this.api = api;
         this.dialog = dialog;
         this.model = _.clone(_.get(bindings, 'data'));
+        this.method = _.get(bindings, 'method');
         this.title = _.get(bindings, 'title');
         this.disabled = _.get(bindings, 'disabled');
         this.message = _.get(bindings, 'message');
@@ -676,12 +707,13 @@ class BaseDialogComponent extends BaseComponent {
     ngOnInit() { }
     accept(form, params = null) {
         if (form.invalid) {
+            FxUtils.checkInvalidField(form);
             return;
         }
         if (!this.disabled) {
             if (!this.validate())
                 return;
-            if (_.isEmpty(this.model.id)) {
+            if (this.method === 'create') {
                 this.create(params);
                 return;
             }
@@ -703,31 +735,13 @@ class BaseDialogComponent extends BaseComponent {
             this.toastr.success(this.message);
             this.ref.close(true);
         }, (error) => {
-            this.toastr.error(error);
+            this.toastr.error(FxUtils.parseError(error));
         })
             .then(() => {
             this.loading = false;
         });
     }
     update(params = null) {
-        if (this.loading) {
-            return;
-        }
-        this.loading = true;
-        let code = _.get(this.model, 'code');
-        this.api
-            .update(code, { ...this.model, ...params })
-            .then(() => {
-            this.toastr.success(this.message);
-            this.ref.close(true);
-        }, (error) => {
-            this.toastr.error(error);
-        })
-            .then(() => {
-            this.loading = false;
-        });
-    }
-    updateData(params = null) {
         if (this.loading) {
             return;
         }
@@ -738,7 +752,7 @@ class BaseDialogComponent extends BaseComponent {
             this.toastr.success(this.message);
             this.ref.close(true);
         }, (error) => {
-            this.toastr.error(error);
+            this.toastr.error(FxUtils.parseError(error));
         })
             .then(() => {
             this.loading = false;
@@ -944,6 +958,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }] } });
 
+class TrimOnBlurDirective {
+    el;
+    ngControl;
+    collapseWhitespace = false;
+    constructor(el, ngControl) {
+        this.el = el;
+        this.ngControl = ngControl;
+    }
+    onBlur() {
+        const native = this.el.nativeElement;
+        if (!native)
+            return;
+        let value = native.value ?? '';
+        if (this.collapseWhitespace) {
+            value = value.replace(/\s+/g, ' ').trim();
+        }
+        else {
+            value = value.trim();
+        }
+        if (native.value === value)
+            return;
+        native.value = value;
+        if (this.ngControl && this.ngControl.control) {
+            this.ngControl.control.setValue(value);
+        }
+        else {
+            const ev = new Event('input', { bubbles: true });
+            native.dispatchEvent(ev);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TrimOnBlurDirective, deps: [{ token: i0.ElementRef }, { token: i1$3.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: TrimOnBlurDirective, isStandalone: true, selector: "[appTrimOnBlur]", inputs: { collapseWhitespace: ["appTrimOnBlurCollapse", "collapseWhitespace"] }, host: { listeners: { "blur": "onBlur()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TrimOnBlurDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appTrimOnBlur]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$3.NgControl }], propDecorators: { collapseWhitespace: [{
+                type: Input,
+                args: ['appTrimOnBlurCollapse']
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+
 class PermissionGuard {
     permissionService;
     router;
@@ -991,19 +1051,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
         }] });
 
 class AuthStateService {
-    _isLoggedIn$ = new BehaviorSubject(false);
+    _isLoggedIn$ = new BehaviorSubject(null);
     isLoggedIn$ = this._isLoggedIn$.asObservable();
     unauthorized$ = new Subject();
-    constructor() {
-        const saved = localStorage.getItem('isLoggedIn') === 'true';
-        this._isLoggedIn$.next(saved);
-    }
+    constructor() { }
     setLoggedIn(value) {
         this._isLoggedIn$.next(value);
-        localStorage.setItem('isLoggedIn', String(value));
     }
     get isLoggedIn() {
-        return this._isLoggedIn$.value;
+        return this._isLoggedIn$.value === true;
     }
     handleUnauthorized() {
         this.setLoggedIn(false);
@@ -1059,6 +1115,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 }]
         }] });
 
+class QuillStyleLoaderService {
+    platformId;
+    loaded = false;
+    loadingPromise = null;
+    constructor(platformId) {
+        this.platformId = platformId;
+    }
+    /**
+     * Load Quill CSS (only in browser). Returns a promise that resolves when
+     * the CSS links have been appended.
+     */
+    load() {
+        if (!isPlatformBrowser(this.platformId)) {
+            // Server: do nothing and resolve immediately.
+            return Promise.resolve();
+        }
+        if (this.loaded)
+            return Promise.resolve();
+        if (this.loadingPromise)
+            return this.loadingPromise;
+        this.loadingPromise = new Promise((resolve) => {
+            const cssUrls = [
+                // Using CDN is simplest — no consumer angular.json edits needed.
+                'https://cdn.jsdelivr.net/npm/quill/dist/quill.core.css',
+                'https://cdn.jsdelivr.net/npm/quill/dist/quill.snow.css'
+            ];
+            let remaining = cssUrls.length;
+            const onLoad = () => {
+                remaining -= 1;
+                if (remaining === 0) {
+                    this.loaded = true;
+                    resolve();
+                }
+            };
+            cssUrls.forEach((href) => {
+                // Do not add duplicate links
+                if (document.querySelector(`link[href="${href}"]`)) {
+                    onLoad();
+                    return;
+                }
+                const link = document.createElement('link');
+                link.rel = 'stylesheet';
+                link.href = href;
+                link.onload = () => onLoad();
+                link.onerror = () => {
+                    // still count it as loaded to avoid hanging if CDN fails
+                    console.warn(`[QuillStyleLoader] failed to load: ${href}`);
+                    onLoad();
+                };
+                document.head.appendChild(link);
+            });
+        });
+        return this.loadingPromise;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: QuillStyleLoaderService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: QuillStyleLoaderService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: QuillStyleLoaderService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }] });
+
 const MATERIAL_MODULE = [
     MatSelectModule,
     MatRadioModule,
@@ -1090,11 +1211,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) {<fx-ui-hero-icon [icon]=\"icon\" [size]=\"20\" class=\"flex\" [ngClass]=\"{\n        'text-text-inverse': buttonVariant !== 'default',\n        'text-text-primary': buttonVariant === 'alternative'\n      }\"></fx-ui-hero-icon>}\n      <div>{{ label }}</div>\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: ["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-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) {<fx-ui-hero-icon [icon]=\"icon\" [size]=\"20\" class=\"flex\" [ngClass]=\"{\n        'text-text-inverse': buttonVariant !== 'default',\n        'text-text-primary': buttonVariant === 'alternative'\n      }\"></fx-ui-hero-icon>}\n      @if(label){<div>{{ label }}</div>}\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: ["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) {<fx-ui-hero-icon [icon]=\"icon\" [size]=\"20\" class=\"flex\" [ngClass]=\"{\n        'text-text-inverse': buttonVariant !== 'default',\n        'text-text-primary': buttonVariant === 'alternative'\n      }\"></fx-ui-hero-icon>}\n      <div>{{ label }}</div>\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-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) {<fx-ui-hero-icon [icon]=\"icon\" [size]=\"20\" class=\"flex\" [ngClass]=\"{\n        'text-text-inverse': buttonVariant !== 'default',\n        'text-text-primary': buttonVariant === 'alternative'\n      }\"></fx-ui-hero-icon>}\n      @if(label){<div>{{ label }}</div>}\n    </div>\n  </ng-container>\n  }\n</button>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], disabled: [{
@@ -1438,7 +1559,15 @@ let FxComponent = class FxComponent {
         const control = this.ngControl?.control;
         if (!control)
             return;
-        control.setErrors(null);
+        const errors = control.errors || {};
+        const builtInErrorKeys = ['required', 'minlength', 'maxlength', 'email', 'pattern'];
+        const remaining = {};
+        for (const key of builtInErrorKeys) {
+            if (errors[key] !== undefined) {
+                remaining[key] = errors[key];
+            }
+        }
+        control.setErrors(Object.keys(remaining).length ? remaining : null);
     }
     getErrorMessage(label) {
         if (!this.errors)
@@ -1447,6 +1576,7 @@ let FxComponent = class FxComponent {
         const defaultMessages = {
             required: `${displayLabel} is required`,
             minlength: `${displayLabel} minimum length is ${this.errors['minlength']?.requiredLength}`,
+            email: "Please enter a valid email"
         };
         const messages = { ...defaultMessages, ...this.validationError, ...this.errorMessages };
         const firstKey = Object.keys(this.errors)[0];
@@ -1462,8 +1592,7 @@ class CheckboxComponent extends FxComponent {
     ref;
     label = '';
     disabled = false;
-    rounded = true;
-    size = 'normal';
+    rounded;
     valueChange = new EventEmitter();
     constructor(ngControl, ref) {
         super(ngControl);
@@ -1485,19 +1614,17 @@ class CheckboxComponent extends FxComponent {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CheckboxComponent, deps: [{ token: i1$3.NgControl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: CheckboxComponent, isStandalone: false, selector: "fx-ui-checkbox", inputs: { label: "label", disabled: "disabled", rounded: "rounded", size: "size" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<label\n  class=\"inline-flex items-center gap-normal cursor-pointer select-none\"\n  [class.opacity-50]=\"disabled\"\n  [class.cursor-not-allowed]=\"disabled\"\n>\n  <input\n    type=\"checkbox\"\n    class=\"hidden\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onTouched()\"\n  />\n  <span\n    class=\"relative flex items-center justify-center border rounded-full transition-colors duration-150 shrink-0\"\n    [class]=\"rounded ? 'rounded-full' : 'rounded-sm'\"\n    [class]=\"size === 'large' ? 'w-6 h-6' : 'w-4 h-4'\"\n    [ngClass]=\"{\n      'border-border-strong bg-transparent': !value,\n      'border-border-selected bg-border-selected': value\n    }\"\n  >\n    <!-- Keep SVG space reserved always -->\n    <span class=\"absolute inset-0 flex items-center justify-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"text-bg-primary transition-opacity duration-150\"\n        [class]=\"size === 'large' ? 'w-4.5 h-4.5' : 'w-3 h-3'\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        [style.opacity]=\"value ? 1 : 0\"\n      >\n        <path d=\"M5 13l4 4L19 7\" />\n      </svg>\n    </span>\n  </span>\n\n  <span class=\"mb-0 txt-field-label\">{{ label }}</span>\n</label>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: CheckboxComponent, isStandalone: false, selector: "fx-ui-checkbox", inputs: { label: "label", disabled: "disabled", rounded: "rounded" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<label\n  class=\"flex items-center gap-normal cursor-pointer select-none\"\n  [class.opacity-50]=\"disabled\"\n  [class.cursor-not-allowed]=\"disabled\"\n>\n  <input\n    type=\"checkbox\"\n    class=\"hidden\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onTouched()\"\n  />\n  <span\n    class=\"relative w-4 h-4 border rounded-full transition-colors duration-150 shrink-0\"\n    [ngClass]=\"{\n      'rounded-full': rounded,\n      'rounded-sm': !rounded,\n      'border-border-strong bg-transparent': !value,\n      'border-border-selected bg-border-selected': value\n    }\"\n  >\n    <!-- Keep SVG space reserved always -->\n    <span class=\"absolute inset-0 flex items-center justify-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"text-bg-primary w-4 h-4 transition-opacity duration-150\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        [style.opacity]=\"value ? 1 : 0\"\n      >\n        <path d=\"M5 13l4 4L19 7\" />\n      </svg>\n    </span>\n  </span>\n\n  @if(label){<span class=\"mb-0 txt-field-label\">{{ label }}</span>}\n</label>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-checkbox', standalone: false, template: "<label\n  class=\"inline-flex items-center gap-normal cursor-pointer select-none\"\n  [class.opacity-50]=\"disabled\"\n  [class.cursor-not-allowed]=\"disabled\"\n>\n  <input\n    type=\"checkbox\"\n    class=\"hidden\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onTouched()\"\n  />\n  <span\n    class=\"relative flex items-center justify-center border rounded-full transition-colors duration-150 shrink-0\"\n    [class]=\"rounded ? 'rounded-full' : 'rounded-sm'\"\n    [class]=\"size === 'large' ? 'w-6 h-6' : 'w-4 h-4'\"\n    [ngClass]=\"{\n      'border-border-strong bg-transparent': !value,\n      'border-border-selected bg-border-selected': value\n    }\"\n  >\n    <!-- Keep SVG space reserved always -->\n    <span class=\"absolute inset-0 flex items-center justify-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"text-bg-primary transition-opacity duration-150\"\n        [class]=\"size === 'large' ? 'w-4.5 h-4.5' : 'w-3 h-3'\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        [style.opacity]=\"value ? 1 : 0\"\n      >\n        <path d=\"M5 13l4 4L19 7\" />\n      </svg>\n    </span>\n  </span>\n\n  <span class=\"mb-0 txt-field-label\">{{ label }}</span>\n</label>\n" }]
+            args: [{ selector: 'fx-ui-checkbox', standalone: false, template: "<label\n  class=\"flex items-center gap-normal cursor-pointer select-none\"\n  [class.opacity-50]=\"disabled\"\n  [class.cursor-not-allowed]=\"disabled\"\n>\n  <input\n    type=\"checkbox\"\n    class=\"hidden\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onTouched()\"\n  />\n  <span\n    class=\"relative w-4 h-4 border rounded-full transition-colors duration-150 shrink-0\"\n    [ngClass]=\"{\n      'rounded-full': rounded,\n      'rounded-sm': !rounded,\n      'border-border-strong bg-transparent': !value,\n      'border-border-selected bg-border-selected': value\n    }\"\n  >\n    <!-- Keep SVG space reserved always -->\n    <span class=\"absolute inset-0 flex items-center justify-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"text-bg-primary w-4 h-4 transition-opacity duration-150\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        [style.opacity]=\"value ? 1 : 0\"\n      >\n        <path d=\"M5 13l4 4L19 7\" />\n      </svg>\n    </span>\n  </span>\n\n  @if(label){<span class=\"mb-0 txt-field-label\">{{ label }}</span>}\n</label>\n" }]
         }], ctorParameters: () => [{ type: i1$3.NgControl }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
             }], disabled: [{
                 type: Input
             }], rounded: [{
                 type: Input
-            }], size: [{
-                type: Input
             }], valueChange: [{
                 type: Output
             }] } });
@@ -1724,11 +1851,11 @@ 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", iconClass: "iconClass", 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){<label class=\"block txt-field-label\">\n    {{ label }}\n    @if (required) {<span class=\"txt-required\">*</span>}\n  </label>\n  }\n\n  <div class=\"relative\">\n    <input\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      [ngClass]=\"{\n        'input-invalid': invalid,\n        'pr-8': type === 'password' || suffixIcon,\n        'txt-otp-input': type === 'otp'\n      }\"\n    />\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      <i class=\"material-symbols-outlined text-lg select-none\">{{\n        showPassword ? 'visibility_off' : 'visibility'\n      }}</i>\n      } @else if (suffixIcon) {\n      <i [class]=\"iconClass\" class=\"text-lg select-none\">{{ suffixIcon }}</i>\n      }\n    </button>\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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    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", iconClass: "iconClass", 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){<label class=\"block txt-field-label\">\n    {{ label }}\n    @if (required) {<span class=\"txt-required\">*</span>}\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      [ngClass]=\"{\n        'input-invalid': invalid,\n        'pr-8': type === 'password' || suffixIcon,\n        'txt-otp-input': type === 'otp'\n      }\"\n    />\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      <i class=\"material-symbols-outlined text-lg select-none\">{{\n        showPassword ? 'visibility_off' : 'visibility'\n      }}</i>\n      } @else if (suffixIcon) {\n      <i [class]=\"iconClass\" class=\"text-lg select-none\">{{ suffixIcon }}</i>\n      }\n    </button>\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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TrimOnBlurDirective, selector: "[appTrimOnBlur]", inputs: ["appTrimOnBlurCollapse"] }] });
 }
 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){<label class=\"block txt-field-label\">\n    {{ label }}\n    @if (required) {<span class=\"txt-required\">*</span>}\n  </label>\n  }\n\n  <div class=\"relative\">\n    <input\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      [ngClass]=\"{\n        'input-invalid': invalid,\n        'pr-8': type === 'password' || suffixIcon,\n        'txt-otp-input': type === 'otp'\n      }\"\n    />\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      <i class=\"material-symbols-outlined text-lg select-none\">{{\n        showPassword ? 'visibility_off' : 'visibility'\n      }}</i>\n      } @else if (suffixIcon) {\n      <i [class]=\"iconClass\" class=\"text-lg select-none\">{{ suffixIcon }}</i>\n      }\n    </button>\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){<label class=\"block txt-field-label\">\n    {{ label }}\n    @if (required) {<span class=\"txt-required\">*</span>}\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      [ngClass]=\"{\n        'input-invalid': invalid,\n        'pr-8': type === 'password' || suffixIcon,\n        'txt-otp-input': type === 'otp'\n      }\"\n    />\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      <i class=\"material-symbols-outlined text-lg select-none\">{{\n        showPassword ? 'visibility_off' : 'visibility'\n      }}</i>\n      } @else if (suffixIcon) {\n      <i [class]=\"iconClass\" class=\"text-lg select-none\">{{ suffixIcon }}</i>\n      }\n    </button>\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
             }], type: [{
@@ -1864,6 +1991,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }] } });
 
+class RichTextAreaComponent extends FxComponent {
+    cdr;
+    styleLoader;
+    platformId;
+    editorContainer;
+    placeholder = 'Write something...';
+    toolbarOptions = [
+        // ['undo', 'redo'],
+        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+        [{ 'font': [] }],
+        [{ 'size': ['small', false, 'large', 'huge'] }],
+        [{ 'align': [] }],
+        [{ 'color': [] }, { 'background': [] }],
+        ['bold', 'italic', 'underline', 'strike'],
+        ['blockquote', 'code-block'],
+        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+        [{ 'indent': '-1' }, { 'indent': '+1' }],
+        ['link', 'image'],
+        ['clean']
+    ];
+    contentChange = new EventEmitter();
+    quillInstance;
+    constructor(ngControl, cdr, styleLoader, platformId) {
+        super(ngControl);
+        this.cdr = cdr;
+        this.styleLoader = styleLoader;
+        this.platformId = platformId;
+    }
+    async ngAfterViewInit() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        await this.styleLoader.load();
+        const QuillModule = await import('quill');
+        const Quill = QuillModule.default || QuillModule;
+        const icons = Quill.import('ui/icons');
+        // icons['undo'] = `<svg viewBox="0 0 18 18"><path d="M6.4 5.2H3L6.8 1l3.8 4.2H7.9C10.2 5.4 12 7.4 12 9.8c0 2.7-2.2 4.9-4.9 4.9S2.2 12.5 2.2 9.8H0c0 3.8 3.1 6.9 6.9 6.9s6.9-3.1 6.9-6.9S10.7 3 7 3v2.2z"></path></svg>`;
+        // icons['redo'] = `<svg viewBox="0 0 18 18"><path d="M11.6 5.2H15L11.2 1 7.4 5.2h2.7C7.8 5.4 6 7.4 6 9.8c0 2.7 2.2 4.9 4.9 4.9s4.9-2.2 4.9-4.9H18c0 3.8-3.1 6.9-6.9 6.9S4.2 13.6 4.2 9.8 7.3 3 11 3v2.2z"></path></svg>`;
+        this.quillInstance = new Quill(this.editorContainer.nativeElement, {
+            theme: 'snow',
+            placeholder: this.placeholder,
+            modules: {
+                history: true,
+                toolbar: this.toolbarOptions,
+            }
+        });
+        this.quillInstance.root.style.color = FxUtils.convertColorFromVariable('--text-primary');
+        const toolbar = this.quillInstance.getModule('toolbar');
+        toolbar.addHandler('undo', () => this.quillInstance.history.undo());
+        toolbar.addHandler('redo', () => this.quillInstance.history.redo());
+        if (this.value) {
+            this.quillInstance.root.innerHTML = this.value;
+        }
+        this.quillInstance.on('text-change', () => {
+            const html = this.quillInstance.root.innerHTML || '';
+            this.value = html;
+            this.onChange(html);
+            this.contentChange.emit(html);
+        });
+    }
+    writeValue(value) {
+        this.value = value || '';
+        if (this.quillInstance) {
+            this.quillInstance.root.innerHTML = this.value;
+        }
+    }
+    setDisabledState(isDisabled) {
+        if (this.quillInstance) {
+            this.quillInstance.enable(!isDisabled);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RichTextAreaComponent, deps: [{ token: i1$3.NgControl }, { token: i0.ChangeDetectorRef }, { token: QuillStyleLoaderService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: RichTextAreaComponent, isStandalone: false, selector: "fx-ui-rich-text-area", inputs: { placeholder: "placeholder", toolbarOptions: "toolbarOptions" }, outputs: { contentChange: "contentChange" }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-full rounded-2xl shadow-sm p-1 bg-bg-primary\">\n  <div #editorContainer class=\"min-h-[200px] text-base\"></div>\n</div>", styles: [":host{display:block}.ql-toolbar{border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1));padding:.5rem}.ql-container{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.ql-editor{min-height:200px;padding:.75rem;font-size:1rem;line-height:1.5rem}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RichTextAreaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-rich-text-area', standalone: false, template: "<div class=\"w-full rounded-2xl shadow-sm p-1 bg-bg-primary\">\n  <div #editorContainer class=\"min-h-[200px] text-base\"></div>\n</div>", styles: [":host{display:block}.ql-toolbar{border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1));padding:.5rem}.ql-container{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.ql-editor{min-height:200px;padding:.75rem;font-size:1rem;line-height:1.5rem}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.NgControl }, { type: i0.ChangeDetectorRef }, { type: QuillStyleLoaderService }, { type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }], propDecorators: { editorContainer: [{
+                type: ViewChild,
+                args: ['editorContainer', { static: true }]
+            }], placeholder: [{
+                type: Input
+            }], toolbarOptions: [{
+                type: Input
+            }], contentChange: [{
+                type: Output
+            }] } });
+
 class SearchBarComponent extends FxComponent {
     ref;
     placeholder = 'Search...';
@@ -1918,13 +2135,49 @@ class SelectComponent extends FxComponent {
     errorMessages = {};
     required = false;
     class;
+    enableSearch = false;
+    searchFn;
+    searchTerm = '';
+    filteredOptions = [];
+    search$ = new Subject();
     constructor(ngControl, ref) {
         super(ngControl);
         this.ref = ref;
     }
+    ngOnInit() {
+        this.filteredOptions = this.options;
+        this.search$
+            .pipe(debounceTime(300), distinctUntilChanged())
+            .subscribe((term) => this.performSearch(term));
+    }
     ngAfterViewInit() {
         this.ref.detectChanges();
     }
+    onOpened(open) {
+        if (open) {
+            this.filteredOptions = this.options;
+            if (this.enableSearch)
+                this.searchTerm = '';
+        }
+    }
+    onSearchChange(value) {
+        if (!this.enableSearch)
+            return;
+        this.search$.next(value);
+    }
+    async performSearch(term) {
+        if (!this.enableSearch)
+            return;
+        if (!this.searchFn) {
+            this.filteredOptions = this.options.filter((o) => o.label?.toLowerCase().includes(term.toLowerCase()));
+            this.ref.detectChanges();
+            return;
+        }
+        const result = await this.searchFn(term);
+        this.filteredOptions = result;
+        console.log(this.filteredOptions);
+        Promise.resolve().then(() => this.ref.detectChanges());
+    }
     onSelectionChange(value) {
         this.value = value;
         this.onChange(this.value);
@@ -1936,11 +2189,11 @@ 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" }, usesInheritance: true, ngImport: i0, template: "<div class=\"mb-4 text-left w-full\" [class]=\"class\">\n  <label *ngIf=\"label\" class=\"block txt-field-label\">\n    {{ label }}\n    @if(required) {<span class=\"txt-required\">*</span>}\n  </label>\n\n  <mat-form-field class=\"fx-select-field w-full shadow-sm\" appearance=\"fill\">\n    <mat-select\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [multiple]=\"multiple\"\n      [value]=\"value\"\n      (selectionChange)=\"onSelectionChange($event.value)\"\n      (blur)=\"onTouched()\"\n    >\n      <mat-option *ngFor=\"let option of options\" [value]=\"option.value\">\n        <span class=\"txt-default\">{{ option.label }}</span>\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <div *ngIf=\"invalid\" class=\"txt-invalid text-left\">\n    {{ getErrorMessage(label) }}\n  </div>\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:.5rem;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(--border-interactive))!important;outline:none!important;border-radius:.5rem}::ng-deep .fx-select-field.mat-form-field-invalid .mat-mdc-form-field-flex{border-color:#ef4444!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:.5rem!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}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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", placeholder: "placeholder", options: "options", multiple: "multiple", disabled: "disabled", errorMessages: "errorMessages", required: "required", class: "class", enableSearch: "enableSearch", searchFn: "searchFn" }, usesInheritance: true, ngImport: i0, template: "<div class=\"mb-4 text-left w-full\" [class]=\"class\">\n  <label *ngIf=\"label\" class=\"block txt-field-label\">\n    {{ label }}\n    @if(required) {<span class=\"txt-required\">*</span>}\n  </label>\n\n  <mat-form-field class=\"fx-select-field w-full shadow-sm\" appearance=\"fill\">\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-border-interactive 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  <div *ngIf=\"invalid\" class=\"txt-invalid text-left\">\n    {{ getErrorMessage(label) }}\n  </div>\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:.5rem;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(--border-interactive))!important;outline:none!important;border-radius:.5rem}::ng-deep .fx-select-field.mat-form-field-invalid .mat-mdc-form-field-flex{border-color:#ef4444!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:.5rem!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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] });
 }
 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  <label *ngIf=\"label\" class=\"block txt-field-label\">\n    {{ label }}\n    @if(required) {<span class=\"txt-required\">*</span>}\n  </label>\n\n  <mat-form-field class=\"fx-select-field w-full shadow-sm\" appearance=\"fill\">\n    <mat-select\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [multiple]=\"multiple\"\n      [value]=\"value\"\n      (selectionChange)=\"onSelectionChange($event.value)\"\n      (blur)=\"onTouched()\"\n    >\n      <mat-option *ngFor=\"let option of options\" [value]=\"option.value\">\n        <span class=\"txt-default\">{{ option.label }}</span>\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <div *ngIf=\"invalid\" class=\"txt-invalid text-left\">\n    {{ getErrorMessage(label) }}\n  </div>\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:.5rem;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(--border-interactive))!important;outline:none!important;border-radius:.5rem}::ng-deep .fx-select-field.mat-form-field-invalid .mat-mdc-form-field-flex{border-color:#ef4444!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:.5rem!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}\n"] }]
+            args: [{ selector: 'fx-ui-select', standalone: false, template: "<div class=\"mb-4 text-left w-full\" [class]=\"class\">\n  <label *ngIf=\"label\" class=\"block txt-field-label\">\n    {{ label }}\n    @if(required) {<span class=\"txt-required\">*</span>}\n  </label>\n\n  <mat-form-field class=\"fx-select-field w-full shadow-sm\" appearance=\"fill\">\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-border-interactive 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  <div *ngIf=\"invalid\" class=\"txt-invalid text-left\">\n    {{ getErrorMessage(label) }}\n  </div>\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:.5rem;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(--border-interactive))!important;outline:none!important;border-radius:.5rem}::ng-deep .fx-select-field.mat-form-field-invalid .mat-mdc-form-field-flex{border-color:#ef4444!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:.5rem!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
             }], placeholder: [{
@@ -1957,6 +2210,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], class: [{
                 type: Input
+            }], enableSearch: [{
+                type: Input
+            }], searchFn: [{
+                type: Input
+            }] } });
+
+class SkeletonTableLoadingComponent {
+    columns = 5;
+    rows = 5;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SkeletonTableLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SkeletonTableLoadingComponent, isStandalone: false, selector: "fx-ui-skeleton-table-loading", inputs: { columns: "columns", rows: "rows" }, ngImport: i0, template: "<div class=\"w-full animate-pulse space-y-normal\">\n  <div\n    class=\"grid gap-small\"\n    [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + columns + ', minmax(0, 1fr))' }\"\n  >\n    @for(col of [].constructor(columns); track col) {\n      <div class=\"h-6 bg-bg-hover rounded\"></div>\n    }\n  </div>\n\n  @for(row of [].constructor(rows); track row) {\n    <div\n      class=\"grid gap-small\"\n      [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + columns + ', minmax(0, 1fr))' }\"\n    >\n      @for(col of [].constructor(columns); track col) {\n        <div class=\"h-7 bg-bg-hover rounded\"></div>\n      }\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SkeletonTableLoadingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-skeleton-table-loading', standalone: false, template: "<div class=\"w-full animate-pulse space-y-normal\">\n  <div\n    class=\"grid gap-small\"\n    [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + columns + ', minmax(0, 1fr))' }\"\n  >\n    @for(col of [].constructor(columns); track col) {\n      <div class=\"h-6 bg-bg-hover rounded\"></div>\n    }\n  </div>\n\n  @for(row of [].constructor(rows); track row) {\n    <div\n      class=\"grid gap-small\"\n      [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + columns + ', minmax(0, 1fr))' }\"\n    >\n      @for(col of [].constructor(columns); track col) {\n        <div class=\"h-7 bg-bg-hover rounded\"></div>\n      }\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { columns: [{
+                type: Input
+            }], rows: [{
+                type: Input
             }] } });
 
 class SliderComponent extends FxComponent {
@@ -2137,11 +2409,11 @@ class SwitchComponent extends FxComponent {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SwitchComponent, 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: SwitchComponent, isStandalone: false, selector: "fx-ui-switch", inputs: { disabled: "disabled" }, outputs: { onSwitch: "onSwitch" }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"relative inline-flex items-center w-10 h-5 rounded-full transition-colors duration-300 cursor-pointer\"\n  [ngClass]=\"{\n    'bg-success': value && !disabled,\n    'bg-button-default': !value && !disabled,\n    'bg-bg-hover': disabled\n  }\"\n  (click)=\"toggle()\"\n>\n  @if(value) {\n    <i style=\"font-size: 20px;\" class=\"material-symbols-outlined absolute left-0.5 top-0 text-text-inverse\">check</i>\n    \n  }\n  @if(!value) {\n    <i style=\"font-size: 20px;\" class=\"material-symbols-outlined absolute right-0.5 top-0 text-text-inverse\">close</i>\n  }\n  <div\n    class=\"absolute top-0.5 left-0.5 w-4 h-4 bg-text-inverse rounded-full shadow-md transform transition-transform duration-300\"\n    [ngClass]=\"{ 'translate-x-5': value }\"\n  ></div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SwitchComponent, isStandalone: false, selector: "fx-ui-switch", inputs: { disabled: "disabled" }, outputs: { onSwitch: "onSwitch" }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"relative flex items-center w-10 h-5 rounded-full transition-colors duration-300 cursor-pointer\"\n  [ngClass]=\"{\n    'bg-success': value && !disabled,\n    'bg-button-default': !value && !disabled,\n    'bg-bg-hover': disabled\n  }\"\n  (click)=\"toggle()\"\n>\n  @if(value) {\n    <i style=\"font-size: 20px;\" class=\"material-symbols-outlined absolute left-0.5 top-0 text-text-inverse\">check</i>\n    \n  }\n  @if(!value) {\n    <i style=\"font-size: 20px;\" class=\"material-symbols-outlined absolute right-0.5 top-0 text-text-inverse\">close</i>\n  }\n  <div\n    class=\"absolute top-0.5 left-0.5 w-4 h-4 bg-text-inverse rounded-full shadow-md transform transition-transform duration-300\"\n    [ngClass]=\"{ 'translate-x-5': value }\"\n  ></div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-switch', standalone: false, template: "<div\n  class=\"relative inline-flex items-center w-10 h-5 rounded-full transition-colors duration-300 cursor-pointer\"\n  [ngClass]=\"{\n    'bg-success': value && !disabled,\n    'bg-button-default': !value && !disabled,\n    'bg-bg-hover': disabled\n  }\"\n  (click)=\"toggle()\"\n>\n  @if(value) {\n    <i style=\"font-size: 20px;\" class=\"material-symbols-outlined absolute left-0.5 top-0 text-text-inverse\">check</i>\n    \n  }\n  @if(!value) {\n    <i style=\"font-size: 20px;\" class=\"material-symbols-outlined absolute right-0.5 top-0 text-text-inverse\">close</i>\n  }\n  <div\n    class=\"absolute top-0.5 left-0.5 w-4 h-4 bg-text-inverse rounded-full shadow-md transform transition-transform duration-300\"\n    [ngClass]=\"{ 'translate-x-5': value }\"\n  ></div>\n</div>\n" }]
+            args: [{ selector: 'fx-ui-switch', standalone: false, template: "<div\n  class=\"relative flex items-center w-10 h-5 rounded-full transition-colors duration-300 cursor-pointer\"\n  [ngClass]=\"{\n    'bg-success': value && !disabled,\n    'bg-button-default': !value && !disabled,\n    'bg-bg-hover': disabled\n  }\"\n  (click)=\"toggle()\"\n>\n  @if(value) {\n    <i style=\"font-size: 20px;\" class=\"material-symbols-outlined absolute left-0.5 top-0 text-text-inverse\">check</i>\n    \n  }\n  @if(!value) {\n    <i style=\"font-size: 20px;\" class=\"material-symbols-outlined absolute right-0.5 top-0 text-text-inverse\">close</i>\n  }\n  <div\n    class=\"absolute top-0.5 left-0.5 w-4 h-4 bg-text-inverse rounded-full shadow-md transform transition-transform duration-300\"\n    [ngClass]=\"{ 'translate-x-5': value }\"\n  ></div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$3.NgControl }, { type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
                 type: Input
             }], onSwitch: [{
@@ -2313,34 +2585,44 @@ const FX_COMPONENTS = [
     TagComponent,
     ChartComponent,
     SliderComponent,
-    SwitchComponent
+    SwitchComponent,
+    RichTextAreaComponent,
+    SkeletonTableLoadingComponent
 ];
 
 class ConfirmationDialogComponent {
     ref;
+    bindings;
+    loading = false;
     title = '';
     message = '';
     cancelLabel = 'Cancel';
     confirmLabel = 'Submit';
     constructor(ref, bindings) {
         this.ref = ref;
+        this.bindings = bindings;
         this.title = _.get(bindings, 'title');
         this.message = _.get(bindings, 'message');
         this.cancelLabel = _.get(bindings, 'cancelLabel');
         this.confirmLabel = _.get(bindings, 'confirmLabel');
     }
-    accept() {
+    async accept() {
+        this.loading = true;
+        if (_.get(this.bindings, 'callback')) {
+            await this.bindings.callback();
+            this.loading = false;
+        }
         this.ref.close(true);
     }
     cancel() {
         this.ref.close(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ConfirmationDialogComponent, isStandalone: false, selector: "ui-confirmation", ngImport: i0, template: "<div animate.enter=\"fade-in-animation\">\n  <div class=\"txt-section-header px-2xl py-semi\">{{title}}</div>\n  <mat-dialog-content>\n    <div class=\"txt-default\">{{message}}</div>\n  </mat-dialog-content>\n  <mat-dialog-actions align=\"end\">\n    <fx-ui-button class=\"mr-1\" [label]=\"cancelLabel\" (clicked)=\"cancel()\"></fx-ui-button>\n    <fx-ui-button buttonVariant=\"primary\" class=\"mr-1\" [label]=\"confirmLabel\" (clicked)=\"accept()\"></fx-ui-button>\n  </mat-dialog-actions>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: ButtonComponent, selector: "fx-ui-button", inputs: ["label", "disabled", "buttonVariant", "icon", "class", "loading"], outputs: ["clicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ConfirmationDialogComponent, isStandalone: false, selector: "fx-ui-confirmation-dialog", ngImport: i0, template: "<div animate.enter=\"fade-in-animation\" class=\"dialog-container\">\n  <div class=\"txt-dialog-header\">{{ title }}</div>\n  <mat-dialog-content>\n    <div class=\"txt-default\">{{ message }}</div>\n  </mat-dialog-content>\n  <mat-dialog-actions align=\"end\">\n    <fx-ui-button class=\"mr-1\" [label]=\"cancelLabel\" (clicked)=\"cancel()\"></fx-ui-button>\n    <fx-ui-button buttonVariant=\"primary\" class=\"mr-1\" [label]=\"confirmLabel\" (clicked)=\"accept()\" [loading]=\"loading\" class=\"min-w-[100px]\"></fx-ui-button>\n  </mat-dialog-actions>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: ButtonComponent, selector: "fx-ui-button", inputs: ["label", "disabled", "buttonVariant", "icon", "class", "loading"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-confirmation', standalone: false, template: "<div animate.enter=\"fade-in-animation\">\n  <div class=\"txt-section-header px-2xl py-semi\">{{title}}</div>\n  <mat-dialog-content>\n    <div class=\"txt-default\">{{message}}</div>\n  </mat-dialog-content>\n  <mat-dialog-actions align=\"end\">\n    <fx-ui-button class=\"mr-1\" [label]=\"cancelLabel\" (clicked)=\"cancel()\"></fx-ui-button>\n    <fx-ui-button buttonVariant=\"primary\" class=\"mr-1\" [label]=\"confirmLabel\" (clicked)=\"accept()\"></fx-ui-button>\n  </mat-dialog-actions>\n</div>\n" }]
+            args: [{ selector: 'fx-ui-confirmation-dialog', standalone: false, template: "<div animate.enter=\"fade-in-animation\" class=\"dialog-container\">\n  <div class=\"txt-dialog-header\">{{ title }}</div>\n  <mat-dialog-content>\n    <div class=\"txt-default\">{{ message }}</div>\n  </mat-dialog-content>\n  <mat-dialog-actions align=\"end\">\n    <fx-ui-button class=\"mr-1\" [label]=\"cancelLabel\" (clicked)=\"cancel()\"></fx-ui-button>\n    <fx-ui-button buttonVariant=\"primary\" class=\"mr-1\" [label]=\"confirmLabel\" (clicked)=\"accept()\" [loading]=\"loading\" class=\"min-w-[100px]\"></fx-ui-button>\n  </mat-dialog-actions>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -2361,20 +2643,21 @@ const MY_FORMATS = {
 };
 class UiModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: UiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: UiModule, declarations: [InputComponent, SelectComponent, RadioButtonComponent, CheckboxComponent, DndUploadComponent, ButtonComponent, RadioButtonToggleComponent, DatetimePicker, LoadingPanel, SearchBarComponent, TabGroupComponent, TabComponent, HeroIconComponent, ToastComponent, ToastContainerComponent, TagComponent, ChartComponent, SliderComponent, SwitchComponent, ConfirmationDialogComponent], imports: [CommonModule,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: UiModule, declarations: [InputComponent, SelectComponent, RadioButtonComponent, CheckboxComponent, DndUploadComponent, ButtonComponent, RadioButtonToggleComponent, DatetimePicker, LoadingPanel, SearchBarComponent, TabGroupComponent, TabComponent, HeroIconComponent, ToastComponent, ToastContainerComponent, TagComponent, ChartComponent, SliderComponent, SwitchComponent, RichTextAreaComponent, SkeletonTableLoadingComponent, ConfirmationDialogComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             OwlDateTimeModule,
             OwlNativeDateTimeModule,
             HasPermissionDirective,
-            NgHeroiconsModule, i2$3.NgxEchartsModule, i3$1.MatSelectModule, i23.MatRadioModule, i24.MatButtonModule, i25.MatIconModule, i26.MatPaginatorModule, i27.MatTableModule, i28.MatSnackBarModule, i1$1.MatDialogModule, i30.MatCheckboxModule, i31.MatCardModule, i32.MatDatepickerModule, i33.MatTimepickerModule, i34.MatBadgeModule, i35.MatExpansionModule, i36.MatFormFieldModule], exports: [InputComponent, SelectComponent, RadioButtonComponent, CheckboxComponent, DndUploadComponent, ButtonComponent, RadioButtonToggleComponent, DatetimePicker, LoadingPanel, SearchBarComponent, TabGroupComponent, TabComponent, HeroIconComponent, ToastComponent, ToastContainerComponent, TagComponent, ChartComponent, SliderComponent, SwitchComponent, ConfirmationDialogComponent, 
+            TrimOnBlurDirective,
+            NgHeroiconsModule, i2$3.NgxEchartsModule, i3$1.MatSelectModule, i25.MatRadioModule, i26.MatButtonModule, i27.MatIconModule, i28.MatPaginatorModule, i29.MatTableModule, i30.MatSnackBarModule, i1$1.MatDialogModule, i32.MatCheckboxModule, i33.MatCardModule, i34.MatDatepickerModule, i35.MatTimepickerModule, i36.MatBadgeModule, i37.MatExpansionModule, i38.MatFormFieldModule], exports: [InputComponent, SelectComponent, RadioButtonComponent, CheckboxComponent, DndUploadComponent, ButtonComponent, RadioButtonToggleComponent, DatetimePicker, LoadingPanel, SearchBarComponent, TabGroupComponent, TabComponent, HeroIconComponent, ToastComponent, ToastContainerComponent, TagComponent, ChartComponent, SliderComponent, SwitchComponent, RichTextAreaComponent, SkeletonTableLoadingComponent, ConfirmationDialogComponent, 
             // Module
             FormsModule,
             ReactiveFormsModule,
             OwlDateTimeModule,
             OwlNativeDateTimeModule,
             HasPermissionDirective,
-            NgHeroiconsModule, i3$1.MatSelectModule, i23.MatRadioModule, i24.MatButtonModule, i25.MatIconModule, i26.MatPaginatorModule, i27.MatTableModule, i28.MatSnackBarModule, i1$1.MatDialogModule, i30.MatCheckboxModule, i31.MatCardModule, i32.MatDatepickerModule, i33.MatTimepickerModule, i34.MatBadgeModule, i35.MatExpansionModule, i36.MatFormFieldModule] });
+            NgHeroiconsModule, i3$1.MatSelectModule, i25.MatRadioModule, i26.MatButtonModule, i27.MatIconModule, i28.MatPaginatorModule, i29.MatTableModule, i30.MatSnackBarModule, i1$1.MatDialogModule, i32.MatCheckboxModule, i33.MatCardModule, i34.MatDatepickerModule, i35.MatTimepickerModule, i36.MatBadgeModule, i37.MatExpansionModule, i38.MatFormFieldModule] });
     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_FORMATS },
@@ -2390,7 +2673,7 @@ class UiModule {
             ReactiveFormsModule,
             OwlDateTimeModule,
             OwlNativeDateTimeModule,
-            NgHeroiconsModule, i3$1.MatSelectModule, i23.MatRadioModule, i24.MatButtonModule, i25.MatIconModule, i26.MatPaginatorModule, i27.MatTableModule, i28.MatSnackBarModule, i1$1.MatDialogModule, i30.MatCheckboxModule, i31.MatCardModule, i32.MatDatepickerModule, i33.MatTimepickerModule, i34.MatBadgeModule, i35.MatExpansionModule, i36.MatFormFieldModule] });
+            NgHeroiconsModule, i3$1.MatSelectModule, i25.MatRadioModule, i26.MatButtonModule, i27.MatIconModule, i28.MatPaginatorModule, i29.MatTableModule, i30.MatSnackBarModule, i1$1.MatDialogModule, i32.MatCheckboxModule, i33.MatCardModule, i34.MatDatepickerModule, i35.MatTimepickerModule, i36.MatBadgeModule, i37.MatExpansionModule, i38.MatFormFieldModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: UiModule, decorators: [{
             type: NgModule,
@@ -2403,6 +2686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         OwlDateTimeModule,
                         OwlNativeDateTimeModule,
                         HasPermissionDirective,
+                        TrimOnBlurDirective,
                         NgHeroiconsModule,
                         NgxEchartsModule.forRoot({ echarts: () => import('echarts') }),
                         ...MATERIAL_MODULE,
@@ -2435,5 +2719,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuthInterceptor, AuthStateService, BaseComponent, BaseDialogComponent, BaseResolver, BaseTableComponent, BreadcrumbService, ButtonComponent, ChartComponent, CheckboxComponent, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, FxLoadingService, FxStorageService, FxToastrService, FxUtils, HasPermissionDirective, HeroIconComponent, HttpLoaderFactory, HttpWrapper, InputComponent, LoadingPanel, MY_FORMATS, PermissionGuard, PermissionService, RadioButtonComponent, RadioButtonToggleComponent, SearchBarComponent, SelectComponent, SliderComponent, SwitchComponent, TabComponent, TabGroupComponent, TagComponent, ToastComponent, ToastContainerComponent, TranslationModule, TranslationService, UiModule };
+export { AuthInterceptor, AuthStateService, BaseComponent, BaseDialogComponent, BaseResolver, BaseTableComponent, BreadcrumbService, ButtonComponent, ChartComponent, CheckboxComponent, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, FxLoadingService, FxStorageService, FxToastrService, FxUtils, HasPermissionDirective, HeroIconComponent, HttpLoaderFactory, HttpWrapper, InputComponent, LoadingPanel, MY_FORMATS, PermissionGuard, PermissionService, QuillStyleLoaderService, RadioButtonComponent, RadioButtonToggleComponent, RichTextAreaComponent, SearchBarComponent, SelectComponent, SkeletonTableLoadingComponent, SliderComponent, SwitchComponent, TabComponent, TabGroupComponent, TagComponent, ToastComponent, ToastContainerComponent, TranslationModule, TranslationService, TrimOnBlurDirective, UiModule };
 //# sourceMappingURL=fxlt-common-ui.mjs.map