@foxeltech/angular-ui 0.0.1

package/fesm2022/foxeltech-angular-ui.mjs

@@ -0,0 +1,3450 @@
+import * as i0 from '@angular/core';
+import { Directive, Input, Component, createComponent, Injectable, ViewChild, Inject, EventEmitter, NgModule, HostListener, PLATFORM_ID, Output, Optional, Self, ChangeDetectionStrategy, TemplateRef, ContentChildren, ViewChildren, importProvidersFrom } from '@angular/core';
+import * as i35 from '@angular/material/paginator';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import * as i36 from '@angular/material/table';
+import { MatTableDataSource, MatTable, MatTableModule } from '@angular/material/table';
+import * as i2 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, Subject, debounceTime, BehaviorSubject, throwError, distinctUntilChanged, filter, takeUntil } from 'rxjs';
+import * as i2$1 from '@angular/common/http';
+import { HttpRequest, HttpClient } from '@angular/common/http';
+import * as i1$1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i1$2 from '@ngx-translate/core';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import * as i1$3 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i1$4 from '@angular/router';
+import { NavigationEnd, RouterModule } from '@angular/router';
+import { catchError } from 'rxjs/operators';
+import * as signalR from '@microsoft/signalr';
+import * as i3$1 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i32 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i33 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i34 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i37 from '@angular/material/snack-bar';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import * as i39 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i40 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import * as i41 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i42 from '@angular/material/timepicker';
+import { MatTimepickerModule } from '@angular/material/timepicker';
+import * as i43 from '@angular/material/badge';
+import { MatBadgeModule } from '@angular/material/badge';
+import * as i44 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
+import * as i45 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i46 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i47 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i2$2 from '@angular/cdk/drag-drop';
+import { DragDropModule, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
+import * as i3 from '@danielmoncada/angular-datetime-picker';
+import { OwlDateTimeModule, OwlNativeDateTimeModule, OWL_DATE_TIME_FORMATS } from '@danielmoncada/angular-datetime-picker';
+import * as i1$5 from 'ngx-echarts';
+import { NgxEchartsModule } from 'ngx-echarts';
+import { __decorate, __param } from 'tslib';
+import * as i29 from 'ngx-vflow';
+import { Vflow } from 'ngx-vflow';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import { OwlMomentDateTimeModule } from '@danielmoncada/angular-datetime-picker-moment-adapter';
+
+class BaseComponent {
+    injector;
+    constructor(injector) {
+        this.injector = injector;
+    }
+    ngOnDestroy() {
+        // clean up if needed later
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BaseComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: BaseComponent, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BaseComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: i0.Injector }] });
+
+class HeroIconComponent {
+    icon;
+    solid;
+    outline;
+    size;
+    color;
+    class;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: HeroIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: HeroIconComponent, isStandalone: false, selector: "fx-ui-hero-icon", inputs: { icon: "icon", solid: "solid", outline: "outline", size: "size", color: "color", class: "class" }, ngImport: i0, template: "<ng-heroicons\n  [icon]=\"icon\"\n  [size]=\"size\"\n  [solid]=\"solid\"\n  [outline]=\"outline\"\n  [color]=\"color\"\n  [class]=\"class\"\n/>\n", styles: [""], dependencies: [{ kind: "component", type: i1.DynamicComponent, selector: "ng-heroicons", inputs: ["icon", "size", "color", "stroke", "outline", "solid", "class", "style"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: HeroIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-hero-icon', standalone: false, template: "<ng-heroicons\n  [icon]=\"icon\"\n  [size]=\"size\"\n  [solid]=\"solid\"\n  [outline]=\"outline\"\n  [color]=\"color\"\n  [class]=\"class\"\n/>\n" }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], solid: [{
+                type: Input
+            }], outline: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }] } });
+
+class ToastComponent {
+    toastId;
+    title = '';
+    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-[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-[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: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }] } });
+
+class ToastContainerComponent {
+    ref;
+    toasts = [];
+    constructor(ref) {
+        this.ref = ref;
+    }
+    addToast(toast) {
+        this.toasts.push(toast);
+        this.ref.detectChanges();
+        setTimeout(() => this.removeToast(toast.id), 3000);
+    }
+    removeToast(id) {
+        this.toasts = this.toasts.filter(t => t.id !== id);
+        this.ref.detectChanges();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ToastContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ToastContainerComponent, isStandalone: false, selector: "fx-ui-toast-container", ngImport: i0, template: "<div\n  class=\"fixed top-5 right-5 flex flex-col items-end gap-3 z-[10000] pointer-events-none\"\n>\n  @for (toast of toasts; track toast) {\n    <fx-ui-toast\n      class=\"pointer-events-auto\"\n      [message]=\"toast.message\"\n      [title]=\"toast.title\"\n      [type]=\"toast.type\"\n    ></fx-ui-toast>\n  }\n</div>", styles: [""], dependencies: [{ kind: "component", type: ToastComponent, selector: "fx-ui-toast", inputs: ["toastId", "title", "message", "type"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ToastContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-toast-container', standalone: false, template: "<div\n  class=\"fixed top-5 right-5 flex flex-col items-end gap-3 z-[10000] pointer-events-none\"\n>\n  @for (toast of toasts; track toast) {\n    <fx-ui-toast\n      class=\"pointer-events-auto\"\n      [message]=\"toast.message\"\n      [title]=\"toast.title\"\n      [type]=\"toast.type\"\n    ></fx-ui-toast>\n  }\n</div>" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+
+class FxToastrService {
+    appRef;
+    containerRef;
+    idCounter = 0;
+    constructor(appRef) {
+        this.appRef = appRef;
+        this.ensureContainerExists();
+    }
+    ensureContainerExists() {
+        if (!this.containerRef) {
+            this.containerRef = createComponent(ToastContainerComponent, {
+                environmentInjector: this.appRef.injector,
+            });
+            this.appRef.attachView(this.containerRef.hostView);
+            document.body.appendChild(this.containerRef.location.nativeElement);
+        }
+    }
+    show(message, type, title) {
+        const toast = {
+            id: ++this.idCounter,
+            message,
+            title,
+            type,
+        };
+        this.containerRef?.instance.addToast(toast);
+    }
+    success(message, title) {
+        this.show(message, 'success', title);
+    }
+    error(message, title) {
+        this.show(message, 'error', title);
+    }
+    info(message, title) {
+        this.show(message, 'info', title);
+    }
+    warning(message, title) {
+        this.show(message, 'warning', title);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FxToastrService, deps: [{ token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FxToastrService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FxToastrService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i0.ApplicationRef }] });
+
+class FxUtils {
+    static async preresolve(promises, value, key) {
+        if (key === 'callback' || key === 'socket' || key === 'listener') {
+            promises.push(value);
+            return;
+        }
+        if (value instanceof Function) {
+            this.preresolve(promises, value());
+        }
+        else if (value instanceof Array) {
+            const inpromises = [];
+            value.forEach((v) => {
+                this.preresolve(inpromises, v);
+            });
+            promises.push(Promise.all(inpromises));
+        }
+        else if (value instanceof Observable) {
+            promises.push(firstValueFrom(value));
+        }
+        else if (value instanceof Promise) {
+            promises.push(value);
+        }
+        else if (value instanceof Object) {
+            promises.push(this.resolve(value));
+        }
+        else {
+            promises.push(value);
+        }
+    }
+    static async resolve(value) {
+        const keys = [];
+        const promises = [];
+        for (const i in value) {
+            if (value.hasOwnProperty(i)) {
+                keys.push(i);
+                this.preresolve(promises, value[i], i);
+            }
+        }
+        const values = await Promise.all(promises);
+        const raw = {};
+        keys.forEach((key, index) => {
+            _.set(raw, key, values[index]);
+        });
+        return raw;
+    }
+    static isNotNull(obj) {
+        return !this.isNull(obj);
+    }
+    static isNull(obj) {
+        return obj === undefined || obj === null;
+    }
+    static isFunction(obj) {
+        return this.isNotNull(obj) && obj instanceof Function;
+    }
+    static isNotFunction(obj) {
+        return !this.isFunction(obj);
+    }
+    static isStringEmpty(obj) {
+        return this.isNull(obj) || obj === '';
+    }
+    static isStringNotEmpty(obj) {
+        return !this.isStringEmpty(obj);
+    }
+    static isArrayEmpty(obj) {
+        return this.isNull(obj) || obj.length === 0;
+    }
+    static isArrayNotEmpty(obj) {
+        return !this.isArrayEmpty(obj);
+    }
+    static replaceStartWithAsterisk(inputString, numToReplace) {
+        if (numToReplace >= inputString.length) {
+            return '*'.repeat(inputString.length);
+        }
+        else if (numToReplace <= 0) {
+            return inputString;
+        }
+        else {
+            const asterisks = '*'.repeat(numToReplace);
+            const remainingString = inputString.substring(numToReplace);
+            return asterisks + remainingString;
+        }
+    }
+    static checkInvalidField(form) {
+        Object.keys(form.controls).forEach((field) => {
+            const control = form.controls[field];
+            control.markAsTouched({ onlySelf: true });
+        });
+    }
+    static checkInlineErrorField(err, f) {
+        if (err) {
+            Object.keys(err).forEach((field) => {
+                const formControl = f.form.get(field);
+                if (formControl) {
+                    const error = { apiError: err[field] };
+                    formControl.setErrors(error);
+                }
+            });
+        }
+    }
+    static isSameCollection(collection, compareCollection) {
+        return _.isEmpty(_.xor(collection, compareCollection));
+    }
+    static isSameValue(model, compareModel) {
+        return _.isEqual(model, compareModel);
+    }
+    static parseError(err) {
+        if (_.get(err, 'status') === 401) {
+            return 'Session timeout. Please login again.';
+        }
+        if (this.isStringEmpty(_.get(err, 'error.code'))) {
+            return _.get(err, 'error.message', 'Unknown Error');
+        }
+        return `${_.get(err, 'error.code')}: ${_.get(err, 'error.message', 'Unknown Error')}`;
+    }
+    static convertColorFromVariable(name, alpha = 1) {
+        const value = getComputedStyle(document.body)
+            .getPropertyValue(name)
+            .trim()
+            .replace(/\s+/g, ' ');
+        return value ? `rgba(${value} / ${alpha})` : `rgba(255 255 255 / ${alpha})`;
+    }
+    static getTagClass(key, isCriticalExist = true) {
+        switch (key.toLowerCase()) {
+            case 'error':
+            case 'failed':
+            case 'inactive':
+            case 'critical':
+            case 'stopped':
+                return 'critical';
+            case 'high':
+                if (!isCriticalExist) {
+                    return 'critical';
+                }
+                return 'danger';
+            case 'inprogress':
+            case 'processing':
+            case 'paused':
+            case 'medium':
+            case 'warning':
+                return 'warning';
+            case 'completed':
+            case 'success':
+            case 'active':
+            case 'low':
+            case 'running':
+                return 'success';
+            case 'queue':
+            case 'waiting':
+            case 'info':
+                return 'information';
+            case 'discovery':
+                return 'discovery';
+            case 'disabled':
+            default:
+                return 'default';
+        }
+    }
+    static validateEmail(value) {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        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);
+    }
+    static formatSizeUnits(bytes) {
+        if (bytes >= 1073741824) {
+            return (bytes / 1073741824).toFixed(2) + ' GB';
+        }
+        else if (bytes >= 1048576) {
+            return (bytes / 1048576).toFixed(2) + ' MB';
+        }
+        else if (bytes >= 1024) {
+            return (bytes / 1024).toFixed(2) + ' KB';
+        }
+        else if (bytes > 1) {
+            return bytes + ' bytes';
+        }
+        else if (bytes == 1) {
+            return bytes + ' byte';
+        }
+        return '0 bytes';
+    }
+}
+
+class HttpWrapper {
+    http;
+    baseURL;
+    constructor(http, baseURL) {
+        this.http = http;
+        this.baseURL = baseURL;
+    }
+    addCredentials(options = {}) {
+        return {
+            withCredentials: true,
+            ...options,
+        };
+    }
+    async get(url = '', params) {
+        const options = {
+            withCredentials: true,
+            params: {
+                ...params,
+            },
+        };
+        return firstValueFrom(this.http.get(this.baseURL + url, options));
+    }
+    async post(url, body = {}, options = {}) {
+        return firstValueFrom(this.http.post(this.baseURL + url, body, this.addCredentials(options)));
+    }
+    async put(url, body, options = {}) {
+        return firstValueFrom(this.http.put(this.baseURL + url, body, this.addCredentials(options)));
+    }
+    async delete(url, options = {}) {
+        return firstValueFrom(this.http.delete(this.baseURL + url, this.addCredentials(options)));
+    }
+    upload(url, body, options = {}) {
+        const req = new HttpRequest('POST', this.baseURL + url, body, {
+            reportProgress: true,
+            ...this.addCredentials(options)
+        });
+        return this.http.request(req);
+    }
+    async search(params = {}) {
+        return await this.get('/search', params);
+    }
+    async detail(params) {
+        return await this.get(`/detail`, params);
+    }
+    async remove(params = {}) {
+        return await this.delete(`/remove`, params);
+    }
+    async create(data) {
+        return await this.post(`/create`, data);
+    }
+    async updateInfo(data, params) {
+        return await this.put(`/update-info`, data, { params: params });
+    }
+    async updateStatus(data, params) {
+        return await this.put(`/update-status`, data, { params: params });
+    }
+    async update(data, params) {
+        return await this.put(`/update`, data, { params: params });
+    }
+    async single(code) {
+        return await this.post(`/${code}`, {});
+    }
+    async selectize() {
+        return await this.post('/search', {});
+    }
+    async fetch(filter = {}, params = {}) {
+        return await this.post('', filter, { params: params });
+    }
+    async published(idOrCode) {
+        return await this.post(`/published/${idOrCode}`);
+    }
+    async unpublished(idOrCode) {
+        return await this.post(`/unpublished/${idOrCode}`);
+    }
+    async terminated(idOrCode) {
+        return await this.post(`/terminated/${idOrCode}`);
+    }
+    async disable(params) {
+        return await this.post(`/disable`, params);
+    }
+}
+
+class BaseTableComponent extends BaseComponent {
+    api;
+    modal;
+    ref;
+    dataSource = new MatTableDataSource();
+    cols = [];
+    total = 0;
+    page = 0;
+    pageSize = 10;
+    filters = {};
+    loading = false;
+    expandedElement;
+    toastr;
+    _lock = false;
+    keywordChange$ = new Subject();
+    dataSourcePlaceholder;
+    config;
+    paginator;
+    table;
+    constructor(injector, api, modal, ref) {
+        super(injector);
+        this.api = api;
+        this.modal = modal;
+        this.ref = ref;
+        this.toastr = injector.get(FxToastrService);
+    }
+    ngOnInit() {
+        this.keywordChange$.pipe(debounceTime(300)).subscribe(async (keyword) => {
+            await this.refresh();
+        });
+        this.dataSourcePlaceholder = Array(this.pageSize).fill({});
+        this.init();
+    }
+    init() { }
+    ngAfterViewInit() {
+        if (this.paginator && this.paginator.page) {
+            this.paginator.page.subscribe(event => {
+                this.onPageChange(event);
+            });
+        }
+        this.ref.detectChanges();
+    }
+    async refresh() {
+        this.page = 0;
+        await this.fetch();
+    }
+    setDataSource(result) {
+        this.dataSource.data = _.get(result, 'data');
+        this.total = _.get(result, 'total');
+    }
+    async fetch() {
+        this.loading = true;
+        try {
+            const params = { page: (this.page ?? 0) + 1, pageSize: this.pageSize, ...this.filters };
+            const result = await this.api.search(params);
+            this.setDataSource(result);
+        }
+        catch (err) {
+            this.toastr.error(FxUtils.parseError(err));
+        }
+        finally {
+            this.loading = false;
+            this.ref.detectChanges();
+        }
+    }
+    async onPageChange(event) {
+        this.page = event.pageIndex;
+        this.pageSize = event.pageSize;
+        await this.fetch();
+    }
+    resolve() {
+        return {};
+    }
+    empty() {
+        return {};
+    }
+    onKeywordChange(keyword) {
+        this.keywordChange$.next(keyword);
+    }
+    async create() {
+        const conf = _.get(this.config, 'create');
+        const dialog = _.get(conf, 'dialog');
+        const size = _.get(conf, 'size');
+        if (_.isNil(conf) || _.isNil(dialog)) {
+            return;
+        }
+        if (this._lock) {
+            return;
+        }
+        this._lock = true;
+        let panelClass = 'fx-dialog';
+        if (size == '100%') {
+            panelClass = 'fx-fullsize-dialog';
+        }
+        let instance = this.modal.open(dialog, {
+            panelClass: panelClass,
+            autoFocus: false,
+            width: size,
+            disableClose: true,
+            data: {
+                method: 'create',
+                data: this.empty(),
+                title: conf.title,
+                message: conf.message,
+                resolve: this.resolve(),
+            },
+        });
+        instance.afterClosed().subscribe((result) => {
+            if (result) {
+                this.refresh();
+            }
+            this._lock = false;
+        });
+    }
+    async update(model) {
+        const conf = _.get(this.config, 'update');
+        const dialog = _.get(conf, 'dialog');
+        const size = _.get(conf, 'size');
+        if (_.isNil(dialog) || _.isNil(conf)) {
+            return;
+        }
+        if (this._lock) {
+            return;
+        }
+        this._lock = true;
+        let panelClass = 'fx-dialog';
+        if (size == '100%') {
+            panelClass = 'fx-fullsize-dialog';
+        }
+        let instance = this.modal.open(dialog, {
+            panelClass: panelClass,
+            autoFocus: false,
+            width: size,
+            disableClose: true,
+            data: {
+                method: 'update',
+                data: model,
+                title: conf.title,
+                message: conf.message,
+                resolve: this.resolve(),
+            },
+        });
+        instance.afterClosed().subscribe((result) => {
+            if (result) {
+                this.refresh();
+            }
+            this._lock = false;
+        });
+    }
+    async view(model) {
+        const conf = _.get(this.config, 'view');
+        const dialog = _.get(conf, 'dialog');
+        const size = _.get(conf, 'size');
+        if (_.isNil(dialog) || _.isNil(conf)) {
+            return;
+        }
+        if (this._lock) {
+            return;
+        }
+        this._lock = true;
+        let panelClass = 'fx-dialog';
+        if (size == '100%') {
+            panelClass = 'fx-fullsize-dialog';
+        }
+        let instance = this.modal.open(dialog, {
+            panelClass: panelClass,
+            autoFocus: false,
+            width: size,
+            disableClose: true,
+            data: {
+                data: model,
+                title: conf.title,
+                message: conf.message,
+                resolve: this.resolve(),
+                disabled: true,
+                method: 'view',
+            },
+        });
+        instance.afterClosed().subscribe(() => {
+            this._lock = false;
+        });
+    }
+    async delete(model) {
+        if (this._lock) {
+            return;
+        }
+        this._lock = true;
+        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.refresh();
+                }
+                catch (err) {
+                    this.toastr.error(FxUtils.parseError(err));
+                }
+            }
+        }
+        finally {
+            this._lock = false;
+        }
+    }
+    async remove(model) {
+        try {
+            return await this.api.remove({ ...model });
+        }
+        catch (err) {
+            throw err;
+        }
+    }
+    tagClass(tag) {
+        return FxUtils.getTagClass(tag, true);
+    }
+    capitalize(label) {
+        return _.capitalize(label);
+    }
+    value(model, key, defaultValue) {
+        return _.get(model, key, defaultValue);
+    }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BaseTableComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: HttpWrapper }, { type: undefined }, { type: i0.ChangeDetectorRef }], propDecorators: { paginator: [{
+                type: ViewChild,
+                args: [MatPaginator]
+            }], table: [{
+                type: ViewChild,
+                args: [MatTable]
+            }] } });
+
+class BaseDialogComponent extends BaseComponent {
+    ref;
+    bindings;
+    toastr;
+    api;
+    dialog;
+    ngForm;
+    method;
+    title;
+    model;
+    disabled;
+    loading;
+    message;
+    resolve;
+    formChangesSubscription;
+    onSubmit = true;
+    constructor(ref, bindings, toastr, api, dialog) {
+        super(bindings);
+        this.ref = ref;
+        this.bindings = bindings;
+        this.toastr = toastr;
+        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');
+        this.resolve = _.get(bindings, 'resolve');
+    }
+    ngAfterViewInit() { }
+    ngOnInit() { }
+    accept(form, params = null) {
+        if (form.invalid) {
+            FxUtils.checkInvalidField(form);
+            return;
+        }
+        if (!this.disabled) {
+            if (!this.validate())
+                return;
+            if (this.method === 'create') {
+                this.create(params);
+                return;
+            }
+            else {
+                this.update(params);
+                return;
+            }
+        }
+        this.cancel();
+    }
+    create(params = null) {
+        if (this.loading) {
+            return;
+        }
+        this.loading = true;
+        this.api
+            .create({ ...this.model, ...params })
+            .then(() => {
+            this.toastr.success(this.message);
+            this.ref.close(true);
+        }, (error) => {
+            this.toastr.error(FxUtils.parseError(error));
+        })
+            .then(() => {
+            this.loading = false;
+        });
+    }
+    update(params = null) {
+        if (this.loading) {
+            return;
+        }
+        this.loading = true;
+        this.api
+            .update({ ...this.model, ...params })
+            .then(() => {
+            this.toastr.success(this.message);
+            this.ref.close(true);
+        }, (error) => {
+            this.toastr.error(FxUtils.parseError(error));
+        })
+            .then(() => {
+            this.loading = false;
+        });
+    }
+    updateInfo(params = null) {
+        if (this.loading) {
+            return;
+        }
+        this.loading = true;
+        this.api
+            .updateInfo({ ...this.model, ...params })
+            .then(() => {
+            this.toastr.success(this.message);
+            this.ref.close(true);
+        }, (error) => {
+            this.toastr.error(error);
+        })
+            .then(() => {
+            this.loading = false;
+        });
+    }
+    cancel() {
+        this.ref.close(false);
+    }
+    validate() {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BaseDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: FxToastrService }, { token: HttpWrapper }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: BaseDialogComponent, isStandalone: true, viewQueries: [{ propertyName: "ngForm", first: true, predicate: ["f"], descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BaseDialogComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: FxToastrService }, { type: HttpWrapper }, { type: i1$1.MatDialog }], propDecorators: { ngForm: [{
+                type: ViewChild,
+                args: ['f', { static: true }]
+            }] } });
+
+class FxLoadingService {
+    listener = new EventEmitter();
+    listenerAction = new EventEmitter();
+    start() {
+        this.listener.emit(true);
+    }
+    stop() {
+        this.listener.emit(false);
+    }
+    startAction() {
+        this.listenerAction.emit(true);
+    }
+    stopAction() {
+        this.listenerAction.emit(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FxLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FxLoadingService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FxLoadingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class BaseResolver {
+    loadingService;
+    injector;
+    constructor(loadingService, injector) {
+        this.loadingService = loadingService;
+        this.injector = injector;
+    }
+    baseResolverInit() {
+        this.loadingService.start();
+    }
+}
+
+function HttpLoaderFactory(http) {
+    return new TranslateHttpLoader(http, '/assets/i18n/', '.json');
+}
+class TranslationModule {
+    static forRoot() {
+        return {
+            ngModule: TranslationModule,
+            providers: [
+                {
+                    provide: TranslateLoader,
+                    useFactory: HttpLoaderFactory,
+                    deps: [HttpClient]
+                }
+            ]
+        };
+    }
+    static forChild() {
+        return {
+            ngModule: TranslationModule,
+            providers: []
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TranslationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: TranslationModule, imports: [TranslateModule], exports: [TranslateModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TranslationModule, imports: [TranslateModule, TranslateModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TranslationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [TranslateModule],
+                    exports: [TranslateModule]
+                }]
+        }] });
+
+class TranslationService {
+    translate;
+    http;
+    currentLangSubject = new BehaviorSubject('en');
+    currentLang$ = this.currentLangSubject.asObservable();
+    constructor(translate, http) {
+        this.translate = translate;
+        this.http = http;
+        // Default fallback
+        this.translate.addLangs(['en', 'vi']);
+        this.translate.setDefaultLang('en');
+    }
+    init(lang) {
+        this.setLanguage(lang);
+    }
+    currentLang() {
+        return this.translate.currentLang || this.translate.defaultLang;
+    }
+    setLanguage(lang) {
+        this.translate.use(lang);
+        this.currentLangSubject.next(lang);
+    }
+    loadTranslations(lang, path) {
+        const url = `${path}${lang}.json`;
+        this.http.get(url).subscribe({
+            next: (translations) => {
+                this.translate.setTranslation(lang, translations, true);
+            },
+            error: (err) => {
+                console.warn(`[TranslationService] Failed to load ${url}`, err);
+            }
+        });
+    }
+    onLanguageChange(callback) {
+        this.currentLang$.subscribe(callback);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TranslationService, deps: [{ token: i1$2.TranslateService }, { token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TranslationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TranslationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1$2.TranslateService }, { type: i2$1.HttpClient }] });
+
+class PermissionService {
+    permissions = [];
+    setPermissions(perms) {
+        this.permissions = perms;
+    }
+    hasPermission(requiredPermissions) {
+        return _.some(requiredPermissions, permission => this.permissions.includes(permission));
+    }
+    getPermissions() {
+        return [...this.permissions];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PermissionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PermissionService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PermissionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class HasPermissionDirective {
+    templateRef;
+    viewContainerRef;
+    permissionService;
+    constructor(templateRef, viewContainerRef, permissionService) {
+        this.templateRef = templateRef;
+        this.viewContainerRef = viewContainerRef;
+        this.permissionService = permissionService;
+    }
+    set hasPermission(required) {
+        const requiredPermissions = _.isArray(required) ? required : [required];
+        this.viewContainerRef.clear();
+        if (this.permissionService.hasPermission(requiredPermissions)) {
+            this.viewContainerRef.createEmbeddedView(this.templateRef);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: HasPermissionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: PermissionService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: HasPermissionDirective, isStandalone: true, selector: "[hasPermission]", inputs: { hasPermission: "hasPermission" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: HasPermissionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hasPermission]'
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: PermissionService }], propDecorators: { hasPermission: [{
+                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;
+    constructor(permissionService, router) {
+        this.permissionService = permissionService;
+        this.router = router;
+    }
+    canActivate(route) {
+        const requiredPermissions = route.data?.['permissions'];
+        if (!requiredPermissions || this.permissionService.hasPermission(requiredPermissions)) {
+            return true;
+        }
+        this.router.navigate(['/unauthorized']);
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PermissionGuard, deps: [{ token: PermissionService }, { token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PermissionGuard, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PermissionGuard, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: PermissionService }, { type: i1$4.Router }] });
+
+class FxStorageService {
+    resolve(key, value) {
+        if (FxUtils.isNotNull(value)) {
+            localStorage.setItem(key, JSON.stringify(value));
+        }
+        const loc = localStorage.getItem(key);
+        return loc ? JSON.parse(loc) : undefined;
+    }
+    remove(key) {
+        localStorage.removeItem(key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FxStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FxStorageService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FxStorageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class AuthStateService {
+    _isLoggedIn$ = new BehaviorSubject(null);
+    isLoggedIn$ = this._isLoggedIn$.asObservable();
+    unauthorized$ = new Subject();
+    constructor() { }
+    setLoggedIn(value) {
+        this._isLoggedIn$.next(value);
+    }
+    get isLoggedIn() {
+        return this._isLoggedIn$.value === true;
+    }
+    handleUnauthorized() {
+        this.setLoggedIn(false);
+        this.unauthorized$.next();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AuthStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AuthStateService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AuthStateService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class AuthInterceptor {
+    authState;
+    constructor(authState) {
+        this.authState = authState;
+    }
+    intercept(req, next) {
+        const cloned = req.clone({ withCredentials: true });
+        return next.handle(cloned).pipe(catchError((error) => {
+            if (error.status === 401) {
+                this.authState.handleUnauthorized();
+            }
+            return throwError(() => error);
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AuthInterceptor, deps: [{ token: AuthStateService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AuthInterceptor });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AuthInterceptor, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: AuthStateService }] });
+
+class BreadcrumbService {
+    breadcrumbs$ = new BehaviorSubject([]);
+    set(breadcrumbs) {
+        this.breadcrumbs$.next(breadcrumbs);
+    }
+    get() {
+        return this.breadcrumbs$.asObservable();
+    }
+    clear() {
+        this.breadcrumbs$.next([]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BreadcrumbService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BreadcrumbService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+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]
+                }] }] });
+
+class ThemeService {
+    renderer;
+    lightClass = 'light_theme';
+    theme$ = new BehaviorSubject('dark');
+    themeStorageKey = 'host-theme';
+    constructor(rendererFactory) {
+        this.renderer = rendererFactory.createRenderer(null, null);
+        const savedTheme = localStorage.getItem(this.themeStorageKey);
+        if (savedTheme) {
+            this.setLightMode(savedTheme === 'light');
+        }
+        else {
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const isDark = document.body.classList.contains(this.lightClass) || prefersDark;
+            this.setLightMode(isDark);
+        }
+    }
+    setLightMode(enable) {
+        if (enable) {
+            this.renderer.addClass(document.body, this.lightClass);
+            this.theme$.next('light');
+            localStorage.setItem(this.themeStorageKey, 'light');
+        }
+        else {
+            this.renderer.removeClass(document.body, this.lightClass);
+            this.theme$.next('dark');
+            localStorage.setItem(this.themeStorageKey, 'dark');
+        }
+        window.dispatchEvent(new CustomEvent('theme-changed', { detail: { dark: !enable } }));
+    }
+    toggleTheme() {
+        const isLight = this.theme$.value === 'light';
+        this.setLightMode(!isLight);
+    }
+    themeChanges() {
+        return this.theme$.asObservable();
+    }
+    getCurrentTheme() {
+        return this.theme$.value;
+    }
+    isLight() {
+        return this.theme$.value === 'light';
+    }
+    getLogoPath() {
+        return 'assets/images/logo.png';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ThemeService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ThemeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i0.RendererFactory2 }] });
+
+class NotificationService {
+    hubConnection = null;
+    connectionStatus = 'disconnected';
+    constructor() { }
+    /**
+     * Connect to SignalR Hub
+     * @param hubUrl - The URL of the SignalR hub
+     * @returns Promise that resolves when connected
+     */
+    async connect(hubUrl, options) {
+        if (this.hubConnection && this.connectionStatus === 'connected') {
+            console.log('Already connected to SignalR hub');
+            return;
+        }
+        try {
+            this.connectionStatus = 'connecting';
+            console.log(`Connecting to SignalR hub: ${hubUrl}`);
+            const connectionOptions = {
+                skipNegotiation: true,
+                transport: signalR.HttpTransportType.WebSockets,
+                withCredentials: true, // Include cookies if any
+                ...options
+            };
+            this.hubConnection = new signalR.HubConnectionBuilder()
+                .withUrl(hubUrl, connectionOptions)
+                .withAutomaticReconnect()
+                .configureLogging(signalR.LogLevel.Information)
+                .build();
+            // Handle connection closed
+            this.hubConnection.onclose((error) => {
+                this.connectionStatus = 'disconnected';
+                if (error) {
+                    console.error('SignalR connection closed with error:', error);
+                }
+                else {
+                    console.log('SignalR connection closed');
+                }
+            });
+            // Handle reconnecting
+            this.hubConnection.onreconnecting((error) => {
+                this.connectionStatus = 'connecting';
+                console.log('SignalR reconnecting...', error);
+            });
+            // Handle reconnected
+            this.hubConnection.onreconnected((connectionId) => {
+                this.connectionStatus = 'connected';
+                console.log('SignalR reconnected. Connection ID:', connectionId);
+            });
+            await this.hubConnection.start();
+            this.connectionStatus = 'connected';
+            console.log('SignalR connected successfully. Connection ID:', this.hubConnection.connectionId);
+        }
+        catch (error) {
+            this.connectionStatus = 'disconnected';
+            console.error('Error connecting to SignalR hub:', error);
+            throw error;
+        }
+    }
+    /**
+     * Disconnect from SignalR Hub
+     */
+    async disconnect() {
+        if (this.hubConnection) {
+            try {
+                await this.hubConnection.stop();
+                this.connectionStatus = 'disconnected';
+                console.log('SignalR disconnected successfully');
+            }
+            catch (error) {
+                console.error('Error disconnecting from SignalR hub:', error);
+            }
+        }
+    }
+    /**
+     * Listen to a specific event from the server
+     * @param eventName - Name of the event to listen to
+     * @param callback - Callback function to execute when event is received
+     */
+    on(eventName, callback) {
+        if (!this.hubConnection) {
+            console.error('Cannot listen to events: not connected to hub');
+            return;
+        }
+        console.log(`Registering listener for event: ${eventName}`);
+        this.hubConnection.on(eventName, callback);
+    }
+    /**
+     * Remove listener for a specific event
+     * @param eventName - Name of the event to stop listening to
+     */
+    off(eventName) {
+        if (!this.hubConnection) {
+            return;
+        }
+        console.log(`Removing listener for event: ${eventName}`);
+        this.hubConnection.off(eventName);
+    }
+    /**
+     * Invoke a method on the server
+     * @param methodName - Name of the method to invoke
+     * @param args - Arguments to pass to the method
+     */
+    async invoke(methodName, ...args) {
+        if (!this.hubConnection || this.connectionStatus !== 'connected') {
+            throw new Error('Not connected to SignalR hub');
+        }
+        try {
+            console.log(`Invoking method: ${methodName}`, args);
+            return await this.hubConnection.invoke(methodName, ...args);
+        }
+        catch (error) {
+            console.error(`Error invoking method ${methodName}:`, error);
+            throw error;
+        }
+    }
+    /**
+     * Get current connection status
+     */
+    getConnectionStatus() {
+        return this.connectionStatus;
+    }
+    /**
+     * Get connection ID
+     */
+    getConnectionId() {
+        return this.hubConnection?.connectionId ?? null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: NotificationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: NotificationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+const MATERIAL_MODULE = [
+    MatSelectModule,
+    MatRadioModule,
+    MatButtonModule,
+    MatIconModule,
+    MatPaginatorModule,
+    MatTableModule,
+    MatSnackBarModule,
+    MatDialogModule,
+    MatCheckboxModule,
+    MatCardModule,
+    MatDatepickerModule,
+    MatTimepickerModule,
+    MatBadgeModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatMenuModule,
+    MatTooltipModule,
+    DragDropModule,
+];
+
+class ButtonComponent {
+    label;
+    disabled = false;
+    buttonVariant = 'alternative';
+    icon;
+    class;
+    loading = false;
+    clicked = new EventEmitter();
+    onClick() {
+        if (!this.disabled)
+            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      @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      @if(label){<div>{{ label }}</div>}\n    </div>\n  </ng-container>\n  }\n</button>\n" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], buttonVariant: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class ChartComponent {
+    ref;
+    cdr;
+    /* ================= INPUTS ================= */
+    type = 'auto';
+    data;
+    options;
+    palette;
+    height = '400px';
+    loading = false;
+    // pie controls
+    pieLegendAlign = '10%';
+    pieLegendPosition = 'middle';
+    showPieLabel = true;
+    mobileWidth = 350;
+    labelFontFamily = 'BeVietnamPro';
+    /* ================= OUTPUTS ================= */
+    chartClick = new EventEmitter();
+    chartInit = new EventEmitter();
+    /* ================= INTERNAL ================= */
+    chartOptions = {};
+    labelFontSize = 12;
+    chartInstance;
+    resizeObserver;
+    intersectionObserver;
+    canInit = false;
+    isMobile = false;
+    constructor(ref, cdr) {
+        this.ref = ref;
+        this.cdr = cdr;
+    }
+    /* ================= LIFECYCLE ================= */
+    ngAfterViewInit() {
+        // Only initialize when visible (tab-safe)
+        this.intersectionObserver = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting && !this.canInit) {
+                this.canInit = true;
+                this.updateResponsiveState();
+                this.rebuildChart();
+                this.cdr.detectChanges();
+            }
+        }, { threshold: 0.1 });
+        this.intersectionObserver.observe(this.ref.nativeElement);
+        // Resize-safe (tabs, flex, async layout)
+        this.resizeObserver = new ResizeObserver(() => {
+            if (!this.canInit)
+                return;
+            this.updateResponsiveState();
+            this.forceMediaRecalc();
+        });
+        this.resizeObserver.observe(this.ref.nativeElement);
+    }
+    ngOnChanges() {
+        if (this.canInit) {
+            this.updateResponsiveState();
+            this.rebuildChart();
+        }
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        this.intersectionObserver?.disconnect();
+    }
+    onThemeChange() {
+        if (!this.canInit)
+            return;
+        requestAnimationFrame(() => this.rebuildChart());
+    }
+    /* ================= EVENTS ================= */
+    onChartClick(event) {
+        this.chartClick.emit(event);
+    }
+    onChartInit(chart) {
+        this.chartInstance = chart;
+        this.chartInit.emit(chart);
+        requestAnimationFrame(() => this.forceMediaRecalc());
+    }
+    /* ================= CORE FIX ================= */
+    updateResponsiveState() {
+        const { width } = this.ref.nativeElement.getBoundingClientRect();
+        if (width > 0) {
+            this.isMobile = width < this.mobileWidth;
+        }
+    }
+    forceMediaRecalc(retry = 0) {
+        if (!this.chartInstance)
+            return;
+        const { width, height } = this.ref.nativeElement.getBoundingClientRect();
+        if ((width === 0 || height === 0) && retry < 10) {
+            requestAnimationFrame(() => this.forceMediaRecalc(retry + 1));
+            return;
+        }
+        this.chartInstance.setOption(this.chartOptions, true);
+        this.chartInstance.resize();
+    }
+    rebuildChart() {
+        this.chartOptions = this.buildOptions();
+        if (this.chartInstance) {
+            this.chartInstance.clear();
+            this.chartInstance.setOption(this.chartOptions, true);
+        }
+    }
+    /* ================= REGISTRY ================= */
+    registry = {
+        bar: (data, colors) => ({
+            color: colors,
+            tooltip: { trigger: 'axis' },
+            grid: { left: '5%', right: '5%', bottom: '10%', containLabel: true },
+            xAxis: {
+                type: 'category',
+                data: data?.categories || [],
+                axisLabel: {
+                    interval: 0,
+                    width: 80,
+                    overflow: 'truncate',
+                    ellipsis: '…',
+                    fontFamily: this.labelFontFamily,
+                    fontSize: this.labelFontSize,
+                    color: FxUtils.convertColorFromVariable('--text-secondary'),
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: FxUtils.convertColorFromVariable('--border-strong'),
+                    },
+                },
+            },
+            yAxis: {
+                type: 'value',
+                axisLabel: {
+                    fontFamily: this.labelFontFamily,
+                    fontSize: this.labelFontSize,
+                    color: FxUtils.convertColorFromVariable('--text-secondary'),
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: FxUtils.convertColorFromVariable('--border-strong'),
+                    },
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: FxUtils.convertColorFromVariable('--border-default'),
+                    },
+                },
+            },
+            series: [
+                {
+                    type: 'bar',
+                    data: data?.values || [],
+                    itemStyle: {
+                        color: (p) => colors[p.dataIndex % colors.length],
+                    },
+                    label: {
+                        show: true,
+                        position: 'top',
+                        fontFamily: this.labelFontFamily,
+                        fontSize: this.labelFontSize,
+                        color: FxUtils.convertColorFromVariable('--text-primary'),
+                    },
+                },
+            ],
+        }),
+        pie: (data, colors) => {
+            const total = data.reduce((sum, d) => sum + d.value, 0);
+            const isMobile = this.isMobile;
+            return {
+                color: colors,
+                tooltip: { trigger: 'item' },
+                legend: {
+                    orient: isMobile ? 'horizontal' : 'vertical',
+                    icon: 'circle',
+                    itemGap: 12,
+                    width: 160,
+                    // 🔑 layout switch
+                    right: isMobile ? undefined : this.pieLegendAlign,
+                    top: isMobile ? undefined : this.pieLegendPosition,
+                    left: isMobile ? 'center' : undefined,
+                    bottom: isMobile ? 0 : undefined,
+                    formatter: (name) => {
+                        const item = data.find((d) => d.name === name);
+                        return item ? `${name}: ${item.value}` : name;
+                    },
+                    textStyle: {
+                        fontFamily: this.labelFontFamily,
+                        fontSize: 13,
+                        fontWeight: 500,
+                        color: FxUtils.convertColorFromVariable('--text-primary'),
+                        overflow: 'truncate',
+                    },
+                },
+                series: [
+                    {
+                        type: 'pie',
+                        radius: ['40%', '70%'],
+                        center: isMobile ? ['50%', '40%'] : ['35%', '50%'],
+                        data,
+                        label: {
+                            show: this.showPieLabel,
+                            position: 'outside',
+                            formatter: '{d}%',
+                            fontSize: this.labelFontSize,
+                            fontFamily: this.labelFontFamily,
+                            color: FxUtils.convertColorFromVariable('--text-primary'),
+                            textBorderWidth: 0,
+                            textBorderColor: 'transparent',
+                        },
+                        labelLine: {
+                            show: this.showPieLabel,
+                            length: 7,
+                            length2: 7,
+                        },
+                    },
+                ],
+                graphic: {
+                    type: 'group',
+                    left: isMobile ? '50%' : '35%',
+                    top: isMobile ? '40%' : '50%',
+                    bounding: 'raw',
+                    children: [
+                        {
+                            type: 'text',
+                            style: {
+                                text: total.toString(),
+                                fontSize: 24,
+                                fontWeight: 600,
+                                fontFamily: this.labelFontFamily,
+                                fill: FxUtils.convertColorFromVariable('--text-primary'),
+                                align: 'center',
+                                verticalAlign: 'middle',
+                            },
+                        },
+                    ],
+                },
+            };
+        },
+        sunburst: (data, colors) => ({
+            color: colors,
+            series: [
+                {
+                    type: 'sunburst',
+                    data,
+                    radius: ['15%', '90%'],
+                    itemStyle: {
+                        borderWidth: 1,
+                        borderColor: FxUtils.convertColorFromVariable('--border-default'),
+                    },
+                    label: {
+                        rotate: 'tangential',
+                        fontSize: this.labelFontSize,
+                        fontFamily: this.labelFontFamily,
+                        color: FxUtils.convertColorFromVariable('--text-primary'),
+                        textBorderWidth: 0,
+                        textBorderColor: 'transparent',
+                    },
+                },
+            ],
+        }),
+    };
+    /* ================= BUILD ================= */
+    detectType() {
+        if (this.type !== 'auto')
+            return this.type;
+        if (this.data?.children)
+            return 'sunburst';
+        if (this.data?.categories && this.data?.values)
+            return 'bar';
+        if (Array.isArray(this.data))
+            return 'pie';
+        return 'bar';
+    }
+    buildOptions() {
+        const type = this.detectType();
+        const palette = this.resolvePalette();
+        const base = this.registry[type]?.(this.data, palette) || {};
+        return {
+            ...base,
+            ...this.options,
+        };
+    }
+    resolvePalette() {
+        const defaults = [
+            'rgba(var(--success) / 1)',
+            'rgba(var(--information) / 1)',
+            'rgba(var(--critical) / 1)',
+            'rgba(var(--danger) / 1)',
+            'rgba(var(--warning) / 1)',
+            'rgba(var(--discovery) / 1)',
+        ];
+        const palette = this.palette?.length ? this.palette : defaults;
+        return palette.map((raw) => {
+            if (!raw.includes('var('))
+                return raw;
+            const cssVar = raw.match(/var\((.*?)\)/)?.[1];
+            const rgb = getComputedStyle(document.body)
+                .getPropertyValue(cssVar || '')
+                .trim()
+                .replace(/\s+/g, ',');
+            return `rgba(${rgb},1)`;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChartComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ChartComponent, isStandalone: false, selector: "fx-ui-chart", inputs: { type: "type", data: "data", options: "options", palette: "palette", height: "height", loading: "loading", pieLegendAlign: "pieLegendAlign", pieLegendPosition: "pieLegendPosition", showPieLabel: "showPieLabel", mobileWidth: "mobileWidth", labelFontFamily: "labelFontFamily" }, outputs: { chartClick: "chartClick", chartInit: "chartInit" }, host: { listeners: { "window:theme-changed": "onThemeChange()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-wrapper\" [style.height]=\"height\">\n  <div\n    echarts\n    [options]=\"chartOptions\"\n    [loading]=\"loading\"\n    (chartInit)=\"onChartInit($event)\"\n    (chartClick)=\"onChartClick($event)\"\n    class=\"fx-chart\"\n    [style.height]=\"height\"\n  ></div>\n</div>\n", styles: [":host{display:block;width:100%}.chart-wrapper{position:relative;width:100%;height:100%}.chart-container{width:100%;height:100%}.chart-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--bg-primary-hover)/.6);font-weight:500;font-size:1.1rem;z-index:2;border-radius:4px}\n"], dependencies: [{ kind: "directive", type: i1$5.NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-chart', standalone: false, template: "<div class=\"chart-wrapper\" [style.height]=\"height\">\n  <div\n    echarts\n    [options]=\"chartOptions\"\n    [loading]=\"loading\"\n    (chartInit)=\"onChartInit($event)\"\n    (chartClick)=\"onChartClick($event)\"\n    class=\"fx-chart\"\n    [style.height]=\"height\"\n  ></div>\n</div>\n", styles: [":host{display:block;width:100%}.chart-wrapper{position:relative;width:100%;height:100%}.chart-container{width:100%;height:100%}.chart-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--bg-primary-hover)/.6);font-weight:500;font-size:1.1rem;z-index:2;border-radius:4px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { type: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], palette: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], pieLegendAlign: [{
+                type: Input
+            }], pieLegendPosition: [{
+                type: Input
+            }], showPieLabel: [{
+                type: Input
+            }], mobileWidth: [{
+                type: Input
+            }], labelFontFamily: [{
+                type: Input
+            }], chartClick: [{
+                type: Output
+            }], chartInit: [{
+                type: Output
+            }], onThemeChange: [{
+                type: HostListener,
+                args: ['window:theme-changed']
+            }] } });
+
+let FxComponent = class FxComponent {
+    ngControl;
+    value;
+    onChange = (value) => { };
+    onTouched = () => { };
+    validationError;
+    errorMessages;
+    constructor(ngControl) {
+        this.ngControl = ngControl;
+        if (ngControl)
+            ngControl.valueAccessor = this;
+    }
+    setValue(value) {
+        if (this.onChange) {
+            this.onChange(value);
+        }
+    }
+    onEnter(value) {
+        if (this.onChange) {
+            this.onChange(value);
+        }
+    }
+    writeValue(value) {
+        this.value = value ?? '';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    get invalid() {
+        return !!(this.ngControl?.invalid && this.ngControl?.touched);
+    }
+    get errors() {
+        return this.ngControl?.errors || {};
+    }
+    validate(validateFn) {
+        if (this.invalid)
+            return;
+        if (validateFn) {
+            const error = validateFn(this.value);
+            if (FxUtils.isNotNull(error)) {
+                this.setErrors(error ?? {});
+            }
+        }
+    }
+    setErrors(error) {
+        this.validationError = error;
+        const control = this.ngControl?.control;
+        if (!control)
+            return;
+        control.setErrors(error);
+    }
+    clearErrors() {
+        const control = this.ngControl?.control;
+        if (!control)
+            return;
+        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)
+            return null;
+        const displayLabel = FxUtils.isStringEmpty(label ?? '') ? 'This field' : label;
+        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];
+        return messages[firstKey] || `Invalid ${label ?? 'value'}`;
+    }
+};
+FxComponent = __decorate([
+    __param(0, Optional()),
+    __param(0, Self())
+], FxComponent);
+
+class CheckboxComponent extends FxComponent {
+    ref;
+    label = '';
+    disabled = false;
+    rounded;
+    valueChange = new EventEmitter();
+    constructor(ngControl, ref) {
+        super(ngControl);
+        this.ref = ref;
+    }
+    ngAfterViewInit() {
+        this.ref.detectChanges();
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onInputChange(event) {
+        const checked = event.target.checked;
+        this.value = checked;
+        this.onChange(checked);
+        this.valueChange.emit(checked);
+    }
+    markTouched() {
+        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: "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=\"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
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class CircleProgressBar {
+    percent = 0;
+    showPercent = false;
+    radius = 35;
+    stroke = 10;
+    normalizedRadius = this.radius - this.stroke / 2;
+    circumference = 2 * Math.PI * this.normalizedRadius;
+    get dashOffset() {
+        const clamped = Math.max(0, Math.min(100, this.percent));
+        return this.circumference - (clamped / 100) * this.circumference;
+    }
+    get ariaLabel() {
+        return `${Math.round(this.percent)}%`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CircleProgressBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: CircleProgressBar, isStandalone: false, selector: "fx-ui-circle-progress-bar", inputs: { percent: "percent", showPercent: "showPercent" }, ngImport: i0, template: "<div class=\"flex items-center justify-center w-full h-full\">\n  <svg\n    class=\"transform -rotate-90 block\"\n    [attr.viewBox]=\"'0 0 ' + radius * 2 + ' ' + radius * 2\"\n    width=\"100%\"\n    height=\"100%\"\n  >\n    <circle\n      class=\"opacity-20\"\n      [attr.cx]=\"radius\"\n      [attr.cy]=\"radius\"\n      [attr.r]=\"normalizedRadius\"\n      [attr.stroke-width]=\"stroke\"\n      fill=\"transparent\"\n      stroke=\"currentColor\"\n    ></circle>\n\n    <circle\n      class=\"stroke-current\"\n      [attr.cx]=\"radius\"\n      [attr.cy]=\"radius\"\n      [attr.r]=\"normalizedRadius\"\n      [attr.stroke-width]=\"stroke\"\n      fill=\"transparent\"\n      stroke-linecap=\"round\"\n      [attr.stroke-dasharray]=\"circumference\"\n      [attr.stroke-dashoffset]=\"dashOffset\"\n      style=\"transition: stroke-dashoffset 300ms linear\"\n    ></circle>\n\n    @if(showPercent){\n      <text\n        [attr.x]=\"radius\"\n        [attr.y]=\"radius\"\n        dominant-baseline=\"central\"\n        text-anchor=\"middle\"\n        class=\"text-xs font-medium\"\n        fill=\"currentColor\"\n      >\n        {{ percent }}%\n      </text>\n    }\n  </svg>\n</div>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CircleProgressBar, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-circle-progress-bar', standalone: false, template: "<div class=\"flex items-center justify-center w-full h-full\">\n  <svg\n    class=\"transform -rotate-90 block\"\n    [attr.viewBox]=\"'0 0 ' + radius * 2 + ' ' + radius * 2\"\n    width=\"100%\"\n    height=\"100%\"\n  >\n    <circle\n      class=\"opacity-20\"\n      [attr.cx]=\"radius\"\n      [attr.cy]=\"radius\"\n      [attr.r]=\"normalizedRadius\"\n      [attr.stroke-width]=\"stroke\"\n      fill=\"transparent\"\n      stroke=\"currentColor\"\n    ></circle>\n\n    <circle\n      class=\"stroke-current\"\n      [attr.cx]=\"radius\"\n      [attr.cy]=\"radius\"\n      [attr.r]=\"normalizedRadius\"\n      [attr.stroke-width]=\"stroke\"\n      fill=\"transparent\"\n      stroke-linecap=\"round\"\n      [attr.stroke-dasharray]=\"circumference\"\n      [attr.stroke-dashoffset]=\"dashOffset\"\n      style=\"transition: stroke-dashoffset 300ms linear\"\n    ></circle>\n\n    @if(showPercent){\n      <text\n        [attr.x]=\"radius\"\n        [attr.y]=\"radius\"\n        dominant-baseline=\"central\"\n        text-anchor=\"middle\"\n        class=\"text-xs font-medium\"\n        fill=\"currentColor\"\n      >\n        {{ percent }}%\n      </text>\n    }\n  </svg>\n</div>\n" }]
+        }], propDecorators: { percent: [{
+                type: Input
+            }], showPercent: [{
+                type: Input
+            }] } });
+
+class DatetimePicker extends FxComponent {
+    ref;
+    label;
+    placeholder = 'Select date and time';
+    required = false;
+    type = 'both';
+    disabled = false;
+    minDate;
+    maxDate;
+    errorMessages = {};
+    validateFn;
+    startAt;
+    constructor(ngControl, ref) {
+        super(ngControl);
+        this.ref = ref;
+    }
+    ngOnInit() { }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.ref.detectChanges();
+        });
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onBlur() {
+        this.onTouched();
+        this.validate(this.validateFn);
+    }
+    writeValue(value) {
+        this.value = value ?? '';
+        this.startAt = value ?? '';
+        this.ref.markForCheck();
+    }
+    onValueChange(date) {
+        if (this.disabled)
+            return;
+        this.value = date;
+        this.onChange(date);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DatetimePicker, 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: DatetimePicker, isStandalone: false, selector: "fx-ui-datetime-picker", inputs: { label: "label", placeholder: "placeholder", required: "required", type: "type", disabled: "disabled", minDate: "minDate", maxDate: "maxDate", errorMessages: "errorMessages", validateFn: "validateFn" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col mb-4 w-full text-left\">\n  @if (label) {\n    <label class=\"txt-field-label\">\n      {{ label }}\n      <span *ngIf=\"required\" class=\"txt-required\">*</span>\n    </label>\n  }\n\n  <div class=\"relative\">\n    <input\n      [owlDateTimeTrigger]=\"picker\"\n      [owlDateTime]=\"picker\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [min]=\"minDate\"\n      [max]=\"maxDate\"\n      (blur)=\"onBlur()\"\n      [value]=\"value\"\n      readonly\n      class=\"input-default pr-9\"\n    />\n    <span\n      [owlDateTimeTrigger]=\"picker\"\n      class=\"absolute inset-y-0 right-0 flex items-center pr-2.5 cursor-pointer text-text-placeholder hover:text-text-primary transition-colors\"\n    >\n      <fx-ui-hero-icon icon=\"calendar\" [size]=\"20\" class=\"text-text-primary\"></fx-ui-hero-icon>\n    </span>\n  </div>\n  <owl-date-time\n    #picker\n    [startAt]=\"startAt\"\n    [pickerType]=\"type\"\n    (afterPickerClosed)=\"onValueChange($event)\"\n  ></owl-date-time>\n  <div *ngIf=\"invalid\" class=\"txt-invalid\">{{ getErrorMessage(label) }}</div>\n</div>\n", styles: ["::ng-deep .owl-dt-container{border-radius:.75rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));--tw-shadow: 0 20px 25px -5px rgb(var(--shadow-color) / .1), 0 10px 10px -5px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 10px 10px -5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);width:320px!important}::ng-deep .owl-dt-calendar-table{width:100%;border-collapse:collapse}::ng-deep .owl-dt-calendar-table :not(.owl-dt-calendar-cell-disabled):hover>.owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected){--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1))}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-content{color:rgb(var(--text-primary))}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-selected{background-color:rgb(var(--primary))!important;color:#fff!important}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected){border-color:rgb(var(--primary))!important}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-disabled>.owl-dt-calendar-cell-content{color:rgb(var(--text-placeholder))!important;opacity:.6!important;cursor:not-allowed;pointer-events:none}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-content.owl-dt-calendar-cell-out{color:rgb(var(--text-secondary))!important;opacity:.6!important}::ng-deep .owl-dt-timer-content .owl-dt-timer-input{border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-strong) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-control-period-button .owl-dt-control-button-arrow{display:none}::ng-deep .owl-dt-container-buttons{height:auto!important;color:rgb(var(--text-primary))!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px;padding:8px 12px;border-top:1px solid rgb(var(--border-default))}::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button{width:auto!important;height:32px!important;border-radius:6px!important;width:60px!important;padding-top:4px!important;padding-bottom:4px!important;font-size:13px!important;font-weight:600!important;border:1px solid rgb(var(--border-default))!important;background-color:rgb(var(--bg-primary))!important;color:rgb(var(--text-primary))!important;cursor:pointer;transition:opacity .15s ease}::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button:hover{background-color:rgb(var(--bg-hover))!important}::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button:last-child{background-color:rgb(var(--primary))!important;border-color:rgb(var(--primary))!important;color:#fff!important}::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button:last-child:hover{opacity:.85}::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button .owl-dt-control-button-content{height:100%!important;width:100%!important;padding:0!important;background-color:transparent!important;color:inherit!important;display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .owl-dt-calendar-control-content .owl-dt-control-button-content{font-weight:500;--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-control-arrow-button .owl-dt-control-button-content{--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-header{--tw-text-opacity: 1;color:rgb(var(--text-secondary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-header .owl-dt-weekdays th{font-weight:500;--tw-text-opacity: 1;color:rgb(var(--text-secondary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-inline-container,::ng-deep .owl-dt-popup-container{border-radius:.75rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-strong) / var(--tw-border-opacity, 1));--tw-shadow: 0 10px 15px -3px rgb(var(--shadow-color) / .1), 0 4px 6px -4px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i3.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i3.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "endAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "beforePickerOpen", "afterPickerOpen", "yearSelected", "monthSelected", "dateSelected"], exportAs: ["owlDateTime"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["icon", "solid", "outline", "size", "color", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DatetimePicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-datetime-picker', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col mb-4 w-full text-left\">\n  @if (label) {\n    <label class=\"txt-field-label\">\n      {{ label }}\n      <span *ngIf=\"required\" class=\"txt-required\">*</span>\n    </label>\n  }\n\n  <div class=\"relative\">\n    <input\n      [owlDateTimeTrigger]=\"picker\"\n      [owlDateTime]=\"picker\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [min]=\"minDate\"\n      [max]=\"maxDate\"\n      (blur)=\"onBlur()\"\n      [value]=\"value\"\n      readonly\n      class=\"input-default pr-9\"\n    />\n    <span\n      [owlDateTimeTrigger]=\"picker\"\n      class=\"absolute inset-y-0 right-0 flex items-center pr-2.5 cursor-pointer text-text-placeholder hover:text-text-primary transition-colors\"\n    >\n      <fx-ui-hero-icon icon=\"calendar\" [size]=\"20\" class=\"text-text-primary\"></fx-ui-hero-icon>\n    </span>\n  </div>\n  <owl-date-time\n    #picker\n    [startAt]=\"startAt\"\n    [pickerType]=\"type\"\n    (afterPickerClosed)=\"onValueChange($event)\"\n  ></owl-date-time>\n  <div *ngIf=\"invalid\" class=\"txt-invalid\">{{ getErrorMessage(label) }}</div>\n</div>\n", styles: ["::ng-deep .owl-dt-container{border-radius:.75rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));--tw-shadow: 0 20px 25px -5px rgb(var(--shadow-color) / .1), 0 10px 10px -5px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 10px 10px -5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);width:320px!important}::ng-deep .owl-dt-calendar-table{width:100%;border-collapse:collapse}::ng-deep .owl-dt-calendar-table :not(.owl-dt-calendar-cell-disabled):hover>.owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected){--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1))}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-content{color:rgb(var(--text-primary))}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-selected{background-color:rgb(var(--primary))!important;color:#fff!important}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected){border-color:rgb(var(--primary))!important}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-disabled>.owl-dt-calendar-cell-content{color:rgb(var(--text-placeholder))!important;opacity:.6!important;cursor:not-allowed;pointer-events:none}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-content.owl-dt-calendar-cell-out{color:rgb(var(--text-secondary))!important;opacity:.6!important}::ng-deep .owl-dt-timer-content .owl-dt-timer-input{border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-strong) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-control-period-button .owl-dt-control-button-arrow{display:none}::ng-deep .owl-dt-container-buttons{height:auto!important;color:rgb(var(--text-primary))!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px;padding:8px 12px;border-top:1px solid rgb(var(--border-default))}::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button{width:auto!important;height:32px!important;border-radius:6px!important;width:60px!important;padding-top:4px!important;padding-bottom:4px!important;font-size:13px!important;font-weight:600!important;border:1px solid rgb(var(--border-default))!important;background-color:rgb(var(--bg-primary))!important;color:rgb(var(--text-primary))!important;cursor:pointer;transition:opacity .15s ease}::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button:hover{background-color:rgb(var(--bg-hover))!important}::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button:last-child{background-color:rgb(var(--primary))!important;border-color:rgb(var(--primary))!important;color:#fff!important}::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button:last-child:hover{opacity:.85}::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button .owl-dt-control-button-content{height:100%!important;width:100%!important;padding:0!important;background-color:transparent!important;color:inherit!important;display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .owl-dt-calendar-control-content .owl-dt-control-button-content{font-weight:500;--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-control-arrow-button .owl-dt-control-button-content{--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-header{--tw-text-opacity: 1;color:rgb(var(--text-secondary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-header .owl-dt-weekdays th{font-weight:500;--tw-text-opacity: 1;color:rgb(var(--text-secondary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-inline-container,::ng-deep .owl-dt-popup-container{border-radius:.75rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-strong) / var(--tw-border-opacity, 1));--tw-shadow: 0 10px 15px -3px rgb(var(--shadow-color) / .1), 0 4px 6px -4px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.NgControl }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], errorMessages: [{
+                type: Input
+            }], validateFn: [{
+                type: Input
+            }] } });
+
+class DndUploadComponent {
+    multiple = false;
+    accept = '';
+    maxSizeMB = 10;
+    strictSize = true;
+    fileDrop = new EventEmitter();
+    fileClick = new EventEmitter();
+    uploadComplete = new EventEmitter();
+    uploadError = new EventEmitter();
+    isDragOver = false;
+    isOpening = false;
+    onDragOver(event) {
+        event.preventDefault();
+        this.isDragOver = true;
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        this.isDragOver = false;
+    }
+    onDrop(event) {
+        event.preventDefault();
+        this.isDragOver = false;
+        if (!event.dataTransfer?.files?.length)
+            return;
+        const files = Array.from(event.dataTransfer.files);
+        this.processFiles(files);
+    }
+    onAreaClick(inputEl, event) {
+        if (this.isOpening)
+            return;
+        this.isOpening = true;
+        this.fileClick.emit();
+        event?.currentTarget?.blur?.();
+        setTimeout(() => {
+            inputEl?.click();
+            this.isOpening = false;
+        }, 0);
+    }
+    onFileSelected(event) {
+        const input = event.target;
+        if (!input.files?.length)
+            return;
+        const files = Array.from(input.files);
+        this.processFiles(files);
+        input.value = '';
+    }
+    processFiles(files) {
+        const valid = [];
+        const acceptedTypes = this.accept
+            .split(',')
+            .map(t => t.trim().toLowerCase())
+            .filter(t => t);
+        for (const file of files) {
+            const sizeMB = file.size / 1024 / 1024;
+            if (this.strictSize && sizeMB > this.maxSizeMB) {
+                this.uploadError.emit({
+                    file,
+                    reason: `File too large: ${sizeMB.toFixed(2)} MB > ${this.maxSizeMB} MB`
+                });
+                continue;
+            }
+            if (acceptedTypes.length && !this.isAccepted(file, acceptedTypes)) {
+                this.uploadError.emit({
+                    file,
+                    reason: `File type not allowed: "${file.name}"`
+                });
+                continue;
+            }
+            valid.push(file);
+        }
+        if (valid.length) {
+            this.fileDrop.emit(valid);
+            this.onUpload(valid);
+        }
+    }
+    onUpload(files) {
+        console.log('Uploading files:', files);
+        this.uploadComplete.emit(files);
+    }
+    isAccepted(file, accepted) {
+        const fileType = file.type.toLowerCase();
+        const fileExt = '.' + file.name.split('.').pop().toLowerCase();
+        return accepted.some(a => {
+            if (a.startsWith('.')) {
+                return a === fileExt;
+            }
+            if (a.endsWith('/*')) {
+                return fileType.startsWith(a.replace('/*', ''));
+            }
+            return a === fileType;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DndUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: DndUploadComponent, isStandalone: false, selector: "fx-ui-dnd-upload", inputs: { multiple: "multiple", accept: "accept", maxSizeMB: "maxSizeMB", strictSize: "strictSize" }, outputs: { fileDrop: "fileDrop", fileClick: "fileClick", uploadComplete: "uploadComplete", uploadError: "uploadError" }, ngImport: i0, template: "<div\n  class=\"block w-full\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <div\n    role=\"button\"\n    tabindex=\"0\"\n    class=\"flex flex-col items-center justify-center gap-1 border-2 border-dashed rounded-md p-4 cursor-pointer select-none outline-none focus:ring-2 focus:ring-primary\"\n    [ngClass]=\"{\n      'border-border-default bg-bg-hover': !isDragOver,\n      'border-border-interactive bg-secondary': isDragOver\n    }\"\n    (click)=\"onAreaClick(fileInput, $event)\"\n    (keydown.enter)=\"onAreaClick(fileInput, $event)\"\n  >\n    <div class=\"text-sm text-text-link font-medium\">\n      Click to upload <span class=\"text-text-secondary opacity-50\">or drag and drop</span>\n    </div>\n    <div class=\"text-xs text-text-secondary\">\n      Allowed: {{ accept || 'any file type' }} (max {{ maxSizeMB }} MB)\n    </div>\n\n    <input\n      #fileInput\n      type=\"file\"\n      class=\"hidden\"\n      [attr.multiple]=\"multiple ? '' : null\"\n      [attr.accept]=\"accept\"\n      (change)=\"onFileSelected($event)\"\n    />\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: DndUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-dnd-upload', standalone: false, template: "<div\n  class=\"block w-full\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <div\n    role=\"button\"\n    tabindex=\"0\"\n    class=\"flex flex-col items-center justify-center gap-1 border-2 border-dashed rounded-md p-4 cursor-pointer select-none outline-none focus:ring-2 focus:ring-primary\"\n    [ngClass]=\"{\n      'border-border-default bg-bg-hover': !isDragOver,\n      'border-border-interactive bg-secondary': isDragOver\n    }\"\n    (click)=\"onAreaClick(fileInput, $event)\"\n    (keydown.enter)=\"onAreaClick(fileInput, $event)\"\n  >\n    <div class=\"text-sm text-text-link font-medium\">\n      Click to upload <span class=\"text-text-secondary opacity-50\">or drag and drop</span>\n    </div>\n    <div class=\"text-xs text-text-secondary\">\n      Allowed: {{ accept || 'any file type' }} (max {{ maxSizeMB }} MB)\n    </div>\n\n    <input\n      #fileInput\n      type=\"file\"\n      class=\"hidden\"\n      [attr.multiple]=\"multiple ? '' : null\"\n      [attr.accept]=\"accept\"\n      (change)=\"onFileSelected($event)\"\n    />\n  </div>\n</div>\n" }]
+        }], propDecorators: { multiple: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], maxSizeMB: [{
+                type: Input
+            }], strictSize: [{
+                type: Input
+            }], fileDrop: [{
+                type: Output
+            }], fileClick: [{
+                type: Output
+            }], uploadComplete: [{
+                type: Output
+            }], uploadError: [{
+                type: Output
+            }] } });
+
+class FlowConnection {
+    nodes = [];
+    edges = [];
+    backgroundColor = '--bg-hover-primary';
+    view = ['100%', '400px'];
+    handleConnection(connection) {
+        this.edges = [
+            ...this.edges,
+            {
+                id: `${connection.source} -> ${connection.target}`,
+                ...connection,
+            },
+        ];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FlowConnection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: FlowConnection, isStandalone: false, selector: "fx-ui-flow-connection", inputs: { nodes: "nodes", edges: "edges", backgroundColor: "backgroundColor", view: "view" }, ngImport: i0, template: "<vflow\n  [background]=\"{\n  type: 'solid',\n  color: `rgba(var(${backgroundColor})`\n}\"\n  [nodes]=\"nodes\"\n  [edges]=\"edges\"\n  (onConnect)=\"handleConnection($event)\"\n  [view]=\"view\"\n/>\n", styles: [""], dependencies: [{ kind: "component", type: i29.VflowComponent, selector: "vflow", inputs: ["view", "minZoom", "maxZoom", "background", "optimization", "entitiesSelectable", "keyboardShortcuts", "connection", "snapGrid", "elevateNodesOnSelect", "elevateEdgesOnSelect", "nodes", "alignmentHelper", "edges"], outputs: ["onComponentNodeEvent"] }, { kind: "directive", type: i29.ConnectionControllerDirective, selector: "[onConnect], [onReconnect], [connect], [reconnect]", outputs: ["onConnect", "connect", "onReconnect", "reconnect"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FlowConnection, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-flow-connection', standalone: false, template: "<vflow\n  [background]=\"{\n  type: 'solid',\n  color: `rgba(var(${backgroundColor})`\n}\"\n  [nodes]=\"nodes\"\n  [edges]=\"edges\"\n  (onConnect)=\"handleConnection($event)\"\n  [view]=\"view\"\n/>\n" }]
+        }], propDecorators: { nodes: [{
+                type: Input
+            }], edges: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }], view: [{
+                type: Input
+            }] } });
+
+class InputComponent extends FxComponent {
+    ref;
+    label = '';
+    type = 'text';
+    placeholder = '';
+    errorMessages = {};
+    required = false;
+    disabled = false;
+    iconClass = 'material-symbols-outlined';
+    suffixIcon;
+    class;
+    maxlength;
+    validateFn;
+    blurred = new EventEmitter();
+    focused = new EventEmitter();
+    suffixClick = new EventEmitter();
+    showPassword = false;
+    validateError = null;
+    constructor(ngControl, ref) {
+        super(ngControl);
+        this.ref = ref;
+    }
+    ngAfterViewInit() {
+        this.ref.detectChanges();
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onInput(event) {
+        const input = event.target;
+        let newValue = input.value;
+        if (this.maxlength && newValue.length > this.maxlength) {
+            newValue = newValue.slice(0, this.maxlength);
+            input.value = newValue;
+        }
+        this.value = newValue;
+        this.onChange(this.value);
+    }
+    onFocus() {
+        this.clearErrors();
+        this.focused.emit();
+    }
+    onBlur() {
+        this.onTouched();
+        this.blurred.emit();
+        if (this.validateFn) {
+            this.validateError = this.validateFn(this.value);
+            this.validate(this.validateFn);
+        }
+    }
+    togglePassword() {
+        this.showPassword = !this.showPassword;
+    }
+    onSuffixClick() {
+        if (this.type === 'password') {
+            this.togglePassword();
+        }
+        else {
+            this.suffixClick.emit();
+        }
+    }
+    get displayType() {
+        if (this.type === 'password' && this.showPassword)
+            return 'text';
+        if (this.type === 'otp')
+            return 'number';
+        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      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      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: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], errorMessages: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], suffixIcon: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], maxlength: [{
+                type: Input
+            }], validateFn: [{
+                type: Input
+            }], blurred: [{
+                type: Output
+            }], focused: [{
+                type: Output
+            }], suffixClick: [{
+                type: Output
+            }] } });
+
+class LoadingPanel {
+    show = false;
+    message = "Loading";
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LoadingPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: LoadingPanel, isStandalone: false, selector: "fx-ui-loading-panel", inputs: { show: "show", message: "message" }, ngImport: i0, template: "<!-- Full-screen glass overlay -->\n<div\n  *ngIf=\"show\"\n  class=\"fixed inset-0 z-50 flex items-center justify-center\"\n  aria-hidden=\"false\"\n  role=\"alert\"\n  aria-busy=\"true\"\n>\n  <div class=\"absolute inset-0 bg-bg-primary/30 backdrop-blur-xl\" aria-hidden=\"true\"></div>\n\n  <div\n    class=\"relative z-10 flex flex-col items-center gap-4 p-6 rounded-2xl shadow-xl bg-bg-primary/70 border border-border-strong backdrop-bg-primary/70\"\n    style=\"min-width: 220px; max-width: 90%\"\n  >\n  <svg fill=\"rgb(var(--primary))\" width=\"50\" height=\"50\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"4\" cy=\"12\" r=\"0\">\n      <animate begin=\"0;spinner_z0Or.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"0;3\" fill=\"freeze\"/>\n      <animate begin=\"spinner_OLMs.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"4;12\" fill=\"freeze\"/>\n      <animate begin=\"spinner_UHR2.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"12;20\" fill=\"freeze\"/>\n      <animate id=\"spinner_lo66\" begin=\"spinner_Aguh.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"3;0\" fill=\"freeze\"/>\n      <animate id=\"spinner_z0Or\" begin=\"spinner_lo66.end\" attributeName=\"cx\" dur=\"0.001s\" values=\"20;4\" fill=\"freeze\"/>\n    </circle>\n    <circle cx=\"4\" cy=\"12\" r=\"3\">\n      <animate begin=\"0;spinner_z0Or.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"4;12\" fill=\"freeze\"/>\n      <animate begin=\"spinner_OLMs.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"12;20\" fill=\"freeze\"/>\n      <animate id=\"spinner_JsnR\" begin=\"spinner_UHR2.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"3;0\" fill=\"freeze\"/>\n      <animate id=\"spinner_Aguh\" begin=\"spinner_JsnR.end\" attributeName=\"cx\" dur=\"0.001s\" values=\"20;4\" fill=\"freeze\"/>\n      <animate begin=\"spinner_Aguh.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"0;3\" fill=\"freeze\"/>\n    </circle>\n    <circle cx=\"12\" cy=\"12\" r=\"3\">\n      <animate begin=\"0;spinner_z0Or.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"12;20\" fill=\"freeze\"/>\n      <animate id=\"spinner_hSjk\" begin=\"spinner_OLMs.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"3;0\" fill=\"freeze\"/>\n      <animate id=\"spinner_UHR2\" begin=\"spinner_hSjk.end\" attributeName=\"cx\" dur=\"0.001s\" values=\"20;4\" fill=\"freeze\"/>\n      <animate begin=\"spinner_UHR2.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"0;3\" fill=\"freeze\"/>\n      <animate begin=\"spinner_Aguh.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"4;12\" fill=\"freeze\"/>\n    </circle>\n    <circle cx=\"20\" cy=\"12\" r=\"3\">\n      <animate id=\"spinner_4v5M\" begin=\"0;spinner_z0Or.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"3;0\" fill=\"freeze\"/>\n      <animate id=\"spinner_OLMs\" begin=\"spinner_4v5M.end\" attributeName=\"cx\" dur=\"0.001s\" values=\"20;4\" fill=\"freeze\"/>\n      <animate begin=\"spinner_OLMs.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"0;3\" fill=\"freeze\"/>\n      <animate begin=\"spinner_UHR2.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"4;12\" fill=\"freeze\"/>\n      <animate begin=\"spinner_Aguh.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"12;20\" fill=\"freeze\"/>\n    </circle>\n  </svg>\n  \n\n    <div *ngIf=\"message\" class=\"text-sm text-text-primary text-center\">\n      {{ message }}\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LoadingPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-loading-panel', standalone: false, template: "<!-- Full-screen glass overlay -->\n<div\n  *ngIf=\"show\"\n  class=\"fixed inset-0 z-50 flex items-center justify-center\"\n  aria-hidden=\"false\"\n  role=\"alert\"\n  aria-busy=\"true\"\n>\n  <div class=\"absolute inset-0 bg-bg-primary/30 backdrop-blur-xl\" aria-hidden=\"true\"></div>\n\n  <div\n    class=\"relative z-10 flex flex-col items-center gap-4 p-6 rounded-2xl shadow-xl bg-bg-primary/70 border border-border-strong backdrop-bg-primary/70\"\n    style=\"min-width: 220px; max-width: 90%\"\n  >\n  <svg fill=\"rgb(var(--primary))\" width=\"50\" height=\"50\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"4\" cy=\"12\" r=\"0\">\n      <animate begin=\"0;spinner_z0Or.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"0;3\" fill=\"freeze\"/>\n      <animate begin=\"spinner_OLMs.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"4;12\" fill=\"freeze\"/>\n      <animate begin=\"spinner_UHR2.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"12;20\" fill=\"freeze\"/>\n      <animate id=\"spinner_lo66\" begin=\"spinner_Aguh.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"3;0\" fill=\"freeze\"/>\n      <animate id=\"spinner_z0Or\" begin=\"spinner_lo66.end\" attributeName=\"cx\" dur=\"0.001s\" values=\"20;4\" fill=\"freeze\"/>\n    </circle>\n    <circle cx=\"4\" cy=\"12\" r=\"3\">\n      <animate begin=\"0;spinner_z0Or.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"4;12\" fill=\"freeze\"/>\n      <animate begin=\"spinner_OLMs.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"12;20\" fill=\"freeze\"/>\n      <animate id=\"spinner_JsnR\" begin=\"spinner_UHR2.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"3;0\" fill=\"freeze\"/>\n      <animate id=\"spinner_Aguh\" begin=\"spinner_JsnR.end\" attributeName=\"cx\" dur=\"0.001s\" values=\"20;4\" fill=\"freeze\"/>\n      <animate begin=\"spinner_Aguh.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"0;3\" fill=\"freeze\"/>\n    </circle>\n    <circle cx=\"12\" cy=\"12\" r=\"3\">\n      <animate begin=\"0;spinner_z0Or.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"12;20\" fill=\"freeze\"/>\n      <animate id=\"spinner_hSjk\" begin=\"spinner_OLMs.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"3;0\" fill=\"freeze\"/>\n      <animate id=\"spinner_UHR2\" begin=\"spinner_hSjk.end\" attributeName=\"cx\" dur=\"0.001s\" values=\"20;4\" fill=\"freeze\"/>\n      <animate begin=\"spinner_UHR2.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"0;3\" fill=\"freeze\"/>\n      <animate begin=\"spinner_Aguh.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"4;12\" fill=\"freeze\"/>\n    </circle>\n    <circle cx=\"20\" cy=\"12\" r=\"3\">\n      <animate id=\"spinner_4v5M\" begin=\"0;spinner_z0Or.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"3;0\" fill=\"freeze\"/>\n      <animate id=\"spinner_OLMs\" begin=\"spinner_4v5M.end\" attributeName=\"cx\" dur=\"0.001s\" values=\"20;4\" fill=\"freeze\"/>\n      <animate begin=\"spinner_OLMs.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"0;3\" fill=\"freeze\"/>\n      <animate begin=\"spinner_UHR2.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"4;12\" fill=\"freeze\"/>\n      <animate begin=\"spinner_Aguh.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"12;20\" fill=\"freeze\"/>\n    </circle>\n  </svg>\n  \n\n    <div *ngIf=\"message\" class=\"text-sm text-text-primary text-center\">\n      {{ message }}\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { show: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }] } });
+
+class RadioButtonToggleComponent extends FxComponent {
+    ref;
+    label;
+    required = false;
+    options = [];
+    disabled = false;
+    errorMessages = {};
+    class;
+    constructor(ngControl, ref) {
+        super(ngControl);
+        this.ref = ref;
+    }
+    ngAfterViewInit() {
+        this.ref.detectChanges();
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onSelectValue(value) {
+        if (this.disabled)
+            return;
+        this.value = value;
+        this.onChange(value);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RadioButtonToggleComponent, 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: RadioButtonToggleComponent, isStandalone: false, selector: "fx-ui-radio-toggle, [fx-ui-radio-toggle]", inputs: { label: "label", required: "required", options: "options", disabled: "disabled", errorMessages: "errorMessages", class: "class" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col text-left mb-4 w-full\" [class]=\"class\">\n  @if(label){<label class=\"txt-field-label\">\n    {{ label }}\n    @if(required) {<span class=\"txt-required\">*</span>} </label\n  >}\n\n  <div class=\"inline-flex w-full rounded-lg overflow-hidden\" role=\"radiogroup\">\n    @for(opt of options; track opt){<button\n      type=\"button\"\n      role=\"radio\"\n      [attr.aria-checked]=\"value === opt.value\"\n      (click)=\"onSelectValue(opt.value)\"\n      [disabled]=\"disabled\"\n      [class.text-gray-900]=\"value !== opt.value\"\n      class=\"flex-1 bg-bg-primary flex items-center pl-normal gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed\"\n    >\n      <span\n        [ngClass]=\"{\n          'radio-checked': value === opt.value,\n          'radio-uncheck': value !== opt.value\n        }\"\n        class=\"radio-container\"\n      >\n        @if(value === opt.value) {<span class=\"radio-dot\"></span>}\n      </span>\n\n      <span class=\"txt-field-label mb-0\">{{ opt.label }}</span></button\n    >}\n  </div>\n\n  @if(invalid){\n  <div class=\"txt-invalid\">{{ getErrorMessage(label) }}</div>\n  }\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: RadioButtonToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-radio-toggle, [fx-ui-radio-toggle]', standalone: false, template: "<div class=\"flex flex-col text-left mb-4 w-full\" [class]=\"class\">\n  @if(label){<label class=\"txt-field-label\">\n    {{ label }}\n    @if(required) {<span class=\"txt-required\">*</span>} </label\n  >}\n\n  <div class=\"inline-flex w-full rounded-lg overflow-hidden\" role=\"radiogroup\">\n    @for(opt of options; track opt){<button\n      type=\"button\"\n      role=\"radio\"\n      [attr.aria-checked]=\"value === opt.value\"\n      (click)=\"onSelectValue(opt.value)\"\n      [disabled]=\"disabled\"\n      [class.text-gray-900]=\"value !== opt.value\"\n      class=\"flex-1 bg-bg-primary flex items-center pl-normal gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed\"\n    >\n      <span\n        [ngClass]=\"{\n          'radio-checked': value === opt.value,\n          'radio-uncheck': value !== opt.value\n        }\"\n        class=\"radio-container\"\n      >\n        @if(value === opt.value) {<span class=\"radio-dot\"></span>}\n      </span>\n\n      <span class=\"txt-field-label mb-0\">{{ opt.label }}</span></button\n    >}\n  </div>\n\n  @if(invalid){\n  <div class=\"txt-invalid\">{{ getErrorMessage(label) }}</div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$3.NgControl }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], errorMessages: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }] } });
+
+class RadioButtonComponent extends FxComponent {
+    ref;
+    label;
+    required = false;
+    options = [];
+    disabled = false;
+    errorMessages = {};
+    class;
+    constructor(ngControl, ref) {
+        super(ngControl);
+        this.ref = ref;
+    }
+    ngAfterViewInit() {
+        this.ref.detectChanges();
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onSelectValue(value) {
+        if (this.disabled)
+            return;
+        this.value = value;
+        this.onChange(value);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RadioButtonComponent, deps: [{ token: i1$3.NgControl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RadioButtonComponent, isStandalone: false, selector: "fx-ui-radio", inputs: { label: "label", required: "required", options: "options", disabled: "disabled", errorMessages: "errorMessages", class: "class" }, usesInheritance: true, ngImport: i0, template: "<div class=\"w-full rounded-lg overflow-hidden\" [class]=\"class\" role=\"radiogroup\">\n  @if (label){\n  <label class=\"txt-field-label\">\n    {{ label }}\n    @if(required){<span class=\"txt-required\">*</span>} </label\n  >}\n\n  <button\n    *ngFor=\"let opt of options\"\n    type=\"button\"\n    role=\"radio\"\n    [attr.aria-checked]=\"value === opt.value\"\n    (click)=\"onSelectValue(opt.value)\"\n    [disabled]=\"disabled\"\n    [class.text-gray-900]=\"value !== opt.value\"\n    class=\"flex-1 px-normal w-full flex items-center gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed\"\n  >\n    <span\n      [ngClass]=\"{\n        'radio-checked': value === opt.value,\n        'radio-uncheck': value !== opt.value\n      }\"\n      class=\"radio-container\"\n    >\n      @if(value === opt.value) {<span class=\"radio-dot\"></span>}\n    </span>\n\n    <span class=\"txt-default mb-0\">{{ opt.label }}</span>\n  </button>\n  @if (invalid){\n  <div class=\"txt-invalid\">\n    {{ getErrorMessage(label) }}\n  </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-radio', standalone: false, template: "<div class=\"w-full rounded-lg overflow-hidden\" [class]=\"class\" role=\"radiogroup\">\n  @if (label){\n  <label class=\"txt-field-label\">\n    {{ label }}\n    @if(required){<span class=\"txt-required\">*</span>} </label\n  >}\n\n  <button\n    *ngFor=\"let opt of options\"\n    type=\"button\"\n    role=\"radio\"\n    [attr.aria-checked]=\"value === opt.value\"\n    (click)=\"onSelectValue(opt.value)\"\n    [disabled]=\"disabled\"\n    [class.text-gray-900]=\"value !== opt.value\"\n    class=\"flex-1 px-normal w-full flex items-center gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed\"\n  >\n    <span\n      [ngClass]=\"{\n        'radio-checked': value === opt.value,\n        'radio-uncheck': value !== opt.value\n      }\"\n      class=\"radio-container\"\n    >\n      @if(value === opt.value) {<span class=\"radio-dot\"></span>}\n    </span>\n\n    <span class=\"txt-default mb-0\">{{ opt.label }}</span>\n  </button>\n  @if (invalid){\n  <div class=\"txt-invalid\">\n    {{ getErrorMessage(label) }}\n  </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$3.NgControl }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], errorMessages: [{
+                type: Input
+            }], class: [{
+                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}\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}\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...';
+    disabled = false;
+    search = new EventEmitter();
+    valueChange = new EventEmitter();
+    constructor(ngControl, ref) {
+        super(ngControl);
+        this.ref = ref;
+    }
+    ngAfterViewInit() {
+        this.ref.detectChanges();
+    }
+    onValueChange(value) {
+        this.value = value;
+        this.setValue(value);
+        this.valueChange.emit(value);
+    }
+    onEnterKey() {
+        this.onEnter(this.value);
+        this.search.emit(this.value.trim());
+    }
+    clear() {
+        this.value = '';
+        this.setValue(this.value);
+        this.valueChange.emit('');
+        this.search.emit('');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SearchBarComponent, 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: SearchBarComponent, isStandalone: false, selector: "fx-ui-search-bar", inputs: { placeholder: "placeholder", disabled: "disabled" }, outputs: { search: "search", valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"relative\">\n  <fx-ui-hero-icon icon=\"magnifying-glass\" [size]=\"18\" class=\"absolute left-1 top-[3px] text-text-primary\"></fx-ui-hero-icon>\n  <input\n    type=\"text\"\n    class=\"input-default px-9\"\n    [attr.placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [value]=\"value\"\n    (input)=\"onValueChange($any($event.target).value)\"\n    (keydown.enter)=\"onEnterKey()\"\n  />\n\n  <button\n    *ngIf=\"value && !disabled\"\n    type=\"button\"\n    class=\"absolute inset-y-0 right-2 flex items-center text-text-primary hover:text-text-secondary\"\n    (click)=\"clear()\"\n    aria-label=\"Clear\"\n  >\n    <i class=\"material-symbols-outlined text-lg select-none\">close</i>\n  </button>\n</div>\n", styles: [""], dependencies: [{ 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: SearchBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-search-bar', standalone: false, template: "<div class=\"relative\">\n  <fx-ui-hero-icon icon=\"magnifying-glass\" [size]=\"18\" class=\"absolute left-1 top-[3px] text-text-primary\"></fx-ui-hero-icon>\n  <input\n    type=\"text\"\n    class=\"input-default px-9\"\n    [attr.placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [value]=\"value\"\n    (input)=\"onValueChange($any($event.target).value)\"\n    (keydown.enter)=\"onEnterKey()\"\n  />\n\n  <button\n    *ngIf=\"value && !disabled\"\n    type=\"button\"\n    class=\"absolute inset-y-0 right-2 flex items-center text-text-primary hover:text-text-secondary\"\n    (click)=\"clear()\"\n    aria-label=\"Clear\"\n  >\n    <i class=\"material-symbols-outlined text-lg select-none\">close</i>\n  </button>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$3.NgControl }, { type: i0.ChangeDetectorRef }], propDecorators: { placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], search: [{
+                type: Output
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class SelectComponent extends FxComponent {
+    ref;
+    label = '';
+    placeholder = '';
+    options = [];
+    multiple = false;
+    disabled = false;
+    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);
+    }
+    isSelected(value) {
+        if (Array.isArray(this.value)) {
+            return this.value.includes(value);
+        }
+        return this.value === value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectComponent, deps: [{ token: i1$3.NgControl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SelectComponent, isStandalone: false, selector: "fx-ui-select", inputs: { label: "label", placeholder: "placeholder", options: "options", multiple: "multiple", disabled: "disabled", errorMessages: "errorMessages", required: "required", class: "class", enableSearch: "enableSearch", searchFn: "searchFn" }, usesInheritance: true, ngImport: i0, template: "<div class=\"mb-4 text-left w-full\" [class]=\"class\">\n  @if (label) {\n  <label class=\"block txt-field-label\">\n    {{ label }}\n    @if(required) {<span class=\"txt-required\">*</span>}\n  </label>\n  }\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  @if(invalid) {\n  <div class=\"txt-invalid text-left\">\n    {{ getErrorMessage(label) }}\n  </div>\n  }\n</div>\n", styles: ["::ng-deep .fx-select-field{display:block!important;width:100%!important;margin:0!important;padding:0!important;border-radius:.75rem;box-shadow:0 1px 1px rgb(var(--border-default))}::ng-deep .fx-select-field .mat-mdc-form-field-wrapper,::ng-deep .fx-select-field .mat-mdc-text-field-wrapper{padding:0!important;margin:0!important;width:100%!important}::ng-deep .fx-select-field .mdc-text-field{width:100%!important;margin:0!important;padding:0!important;--mdc-shape-small: 0 !important}::ng-deep .fx-select-field .mat-mdc-form-field-flex{width:100%!important;margin:0!important;padding:0 .75rem!important;border:1px solid rgb(var(--border-default));border-radius:.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: 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  @if (label) {\n  <label class=\"block txt-field-label\">\n    {{ label }}\n    @if(required) {<span class=\"txt-required\">*</span>}\n  </label>\n  }\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  @if(invalid) {\n  <div class=\"txt-invalid text-left\">\n    {{ getErrorMessage(label) }}\n  </div>\n  }\n</div>\n", styles: ["::ng-deep .fx-select-field{display:block!important;width:100%!important;margin:0!important;padding:0!important;border-radius:.75rem;box-shadow:0 1px 1px rgb(var(--border-default))}::ng-deep .fx-select-field .mat-mdc-form-field-wrapper,::ng-deep .fx-select-field .mat-mdc-text-field-wrapper{padding:0!important;margin:0!important;width:100%!important}::ng-deep .fx-select-field .mdc-text-field{width:100%!important;margin:0!important;padding:0!important;--mdc-shape-small: 0 !important}::ng-deep .fx-select-field .mat-mdc-form-field-flex{width:100%!important;margin:0!important;padding:0 .75rem!important;border:1px solid rgb(var(--border-default));border-radius:.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: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], errorMessages: [{
+                type: Input
+            }], required: [{
+                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 {
+    ref;
+    trackRef;
+    thumbRef;
+    min = 0;
+    max = 100;
+    step = 1;
+    vertical = false;
+    disabled = false;
+    valueChange = new EventEmitter();
+    dragging = false;
+    constructor(ngControl, ref) {
+        super(ngControl);
+        this.ref = ref;
+    }
+    ngAfterViewInit() {
+        this._normalizeValue(this.value);
+        this.ref.markForCheck();
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.ref.markForCheck();
+    }
+    writeValue(value) {
+        this.value = this._normalizeValue(value ?? this.min);
+        this.ref.markForCheck();
+    }
+    _normalizeValue(v) {
+        if (!Number.isFinite(v))
+            v = this.min;
+        const clamped = clamp(v, this.min, this.max);
+        const stepped = Math.round((clamped - this.min) / this.step) * this.step + this.min;
+        const precision = Math.max(0, this._decimalPlaces(this.step));
+        return parseFloat(stepped.toFixed(precision));
+    }
+    _decimalPlaces(n) {
+        const s = String(n);
+        if (s.indexOf('.') === -1)
+            return 0;
+        return s.length - s.indexOf('.') - 1;
+    }
+    /** Pointer events */
+    onPointerDown(event) {
+        if (this.disabled)
+            return;
+        event.target.setPointerCapture(event.pointerId);
+        this.dragging = true;
+        this._setFromPointer(event);
+    }
+    onPointerMove(event) {
+        if (!this.dragging || this.disabled)
+            return;
+        this._setFromPointer(event);
+    }
+    onPointerUp(event) {
+        if (this.disabled)
+            return;
+        try {
+            event.target.releasePointerCapture(event.pointerId);
+        }
+        catch { }
+        this.dragging = false;
+        this.onTouched();
+    }
+    _setFromPointer(event) {
+        const newVal = this._coordToValue(event.clientX, event.clientY);
+        this._applyValue(newVal);
+    }
+    _coordToValue(clientX, clientY) {
+        const rect = this.trackRef.nativeElement.getBoundingClientRect();
+        let ratio = this.vertical
+            ? 1 - (clientY - rect.top) / rect.height
+            : (clientX - rect.left) / rect.width;
+        ratio = clamp(ratio, 0, 1);
+        const raw = this.min + ratio * (this.max - this.min);
+        return this._normalizeValue(raw);
+    }
+    onTrackClick(event) {
+        if (this.disabled)
+            return;
+        const newVal = this._coordToValue(event.clientX, event.clientY);
+        this._applyValue(newVal);
+        this.onTouched();
+    }
+    onKeydown(ev) {
+        if (this.disabled)
+            return;
+        const key = ev.key;
+        const largeStep = (this.max - this.min) / 10;
+        let delta = 0;
+        if (key === 'ArrowLeft' || key === 'ArrowDown')
+            delta = -this.step;
+        else if (key === 'ArrowRight' || key === 'ArrowUp')
+            delta = this.step;
+        else if (key === 'PageDown')
+            delta = -largeStep;
+        else if (key === 'PageUp')
+            delta = largeStep;
+        else if (key === 'Home')
+            return this._applyValue(this.min);
+        else if (key === 'End')
+            return this._applyValue(this.max);
+        if (delta !== 0) {
+            this._applyValue(this.value + delta);
+            ev.preventDefault();
+        }
+    }
+    _applyValue(newVal) {
+        const v = this._normalizeValue(newVal);
+        if (v !== this.value) {
+            this.value = v;
+            this.ref.markForCheck();
+            this.valueChange.emit(v);
+            this.onChange(v);
+        }
+    }
+    get percent() {
+        if (this.max === this.min)
+            return 0;
+        return ((this.value - this.min) / (this.max - this.min)) * 100;
+    }
+    thumbStyle() {
+        return this.vertical
+            ? { bottom: `${this.percent}%`, transform: 'translateY(50%)' }
+            : { left: `${this.percent}%`, transform: 'translateX(-50%)' };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SliderComponent, 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: SliderComponent, isStandalone: false, selector: "fx-ui-slider", inputs: { min: "min", max: "max", step: "step", vertical: "vertical", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, static: true }, { propertyName: "thumbRef", first: true, predicate: ["thumb"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"w-full select-none\"\n  [class.cursor-not-allowed]=\"disabled\"\n  [class.opacity-60]=\"disabled\"\n  role=\"group\"\n>\n  <div\n    #track\n    class=\"relative touch-none py-4\"\n    (click)=\"onTrackClick($event)\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-orientation]=\"vertical ? 'vertical' : 'horizontal'\"\n  >\n    <div\n      class=\"relative flex items-center\"\n      [ngClass]=\"{ 'flex-col h-48': vertical }\"\n    >\n      <div\n        class=\"relative flex-1 rounded-full bg-gray-600 h-2\"\n        [ngClass]=\"{ 'w-1 rotate-0 h-full w-auto bg-border-gray-700': vertical }\"\n      >\n        <div\n          class=\"absolute left-0 top-0 h-full rounded-full bg-primary\"\n          *ngIf=\"!vertical\"\n          [style.width.%]=\"percent\"\n        ></div>\n\n        <div\n          class=\"absolute bottom-0 left-0 w-full rounded-full bg-primary\"\n          *ngIf=\"vertical\"\n          [style.height.%]=\"percent\"\n          style=\"transform-origin: bottom;\"\n        ></div>\n\n        <button\n          #thumb\n          type=\"button\"\n          class=\"absolute -mt-1 -ml-1.5 w-4 h-4 rounded-full shadow focus:ring-primary bg-primary border-2 border-text-primary\"\n          [ngStyle]=\"thumbStyle()\"\n          role=\"slider\"\n          [attr.aria-valuemin]=\"min\"\n          [attr.aria-valuemax]=\"max\"\n          [attr.aria-valuenow]=\"value\"\n          [attr.aria-disabled]=\"disabled\"\n          tabindex=\"0\"\n          (pointerdown)=\"onPointerDown($event)\"\n          (pointermove)=\"onPointerMove($event)\"\n          (pointerup)=\"onPointerUp($event)\"\n          [disabled]=\"disabled\"\n        ></button>\n      </div>\n    </div>\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: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-slider', standalone: false, template: "<div\n  class=\"w-full select-none\"\n  [class.cursor-not-allowed]=\"disabled\"\n  [class.opacity-60]=\"disabled\"\n  role=\"group\"\n>\n  <div\n    #track\n    class=\"relative touch-none py-4\"\n    (click)=\"onTrackClick($event)\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-orientation]=\"vertical ? 'vertical' : 'horizontal'\"\n  >\n    <div\n      class=\"relative flex items-center\"\n      [ngClass]=\"{ 'flex-col h-48': vertical }\"\n    >\n      <div\n        class=\"relative flex-1 rounded-full bg-gray-600 h-2\"\n        [ngClass]=\"{ 'w-1 rotate-0 h-full w-auto bg-border-gray-700': vertical }\"\n      >\n        <div\n          class=\"absolute left-0 top-0 h-full rounded-full bg-primary\"\n          *ngIf=\"!vertical\"\n          [style.width.%]=\"percent\"\n        ></div>\n\n        <div\n          class=\"absolute bottom-0 left-0 w-full rounded-full bg-primary\"\n          *ngIf=\"vertical\"\n          [style.height.%]=\"percent\"\n          style=\"transform-origin: bottom;\"\n        ></div>\n\n        <button\n          #thumb\n          type=\"button\"\n          class=\"absolute -mt-1 -ml-1.5 w-4 h-4 rounded-full shadow focus:ring-primary bg-primary border-2 border-text-primary\"\n          [ngStyle]=\"thumbStyle()\"\n          role=\"slider\"\n          [attr.aria-valuemin]=\"min\"\n          [attr.aria-valuemax]=\"max\"\n          [attr.aria-valuenow]=\"value\"\n          [attr.aria-disabled]=\"disabled\"\n          tabindex=\"0\"\n          (pointerdown)=\"onPointerDown($event)\"\n          (pointermove)=\"onPointerMove($event)\"\n          (pointerup)=\"onPointerUp($event)\"\n          [disabled]=\"disabled\"\n        ></button>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$3.NgControl }, { type: i0.ChangeDetectorRef }], propDecorators: { trackRef: [{
+                type: ViewChild,
+                args: ['track', { static: true }]
+            }], thumbRef: [{
+                type: ViewChild,
+                args: ['thumb', { static: true }]
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], vertical: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class SwitchComponent extends FxComponent {
+    cdr;
+    disabled = false;
+    onSwitch = new EventEmitter();
+    ngAfterViewInit() {
+        this.cdr.detectChanges();
+    }
+    constructor(ngControl, cdr) {
+        super(ngControl);
+        this.cdr = cdr;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    toggle() {
+        if (this.disabled)
+            return;
+        this.value = !this.value;
+        this.onSwitch.emit(this.value);
+        this.onChange(this.value);
+        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 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 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: [{
+                type: Output
+            }] } });
+
+class TabComponent {
+    label;
+    icon;
+    content;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: TabComponent, isStandalone: false, selector: "fx-ui-tab", inputs: { label: "label", icon: "icon" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<ng-template><ng-content></ng-content></ng-template>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-tab', standalone: false, template: "<ng-template><ng-content></ng-content></ng-template>\n" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], content: [{
+                type: ViewChild,
+                args: [TemplateRef, { static: true }]
+            }] } });
+
+class TabGroupComponent {
+    renderer;
+    tabs;
+    activeIndex = 0;
+    tabListRef;
+    underlineRef;
+    canScrollLeft = false;
+    canScrollRight = false;
+    animateDelay = 50;
+    scrollAmount = 160;
+    sidePadding = 32; // same as button width space
+    constructor(renderer) {
+        this.renderer = renderer;
+    }
+    ngAfterContentInit() {
+        setTimeout(() => {
+            this.updateScrollButtons();
+            this.updateUnderlinePosition();
+            this.scrollToActiveTab(false);
+        }, 0);
+    }
+    selectTab(index) {
+        this.activeIndex = index;
+        this.scrollToActiveTab(true);
+    }
+    updateUnderlinePosition() {
+        const tabListEl = this.tabListRef.nativeElement;
+        const underlineEl = this.underlineRef.nativeElement;
+        const tabButtons = tabListEl.querySelectorAll('.tab-btn');
+        const activeTab = tabButtons[this.activeIndex];
+        if (!activeTab || !underlineEl)
+            return;
+        const tabRect = activeTab.getBoundingClientRect();
+        const containerRect = tabListEl.getBoundingClientRect();
+        // Calculate X position relative to scrollable area (not viewport)
+        const translateX = tabRect.left - containerRect.left + tabListEl.scrollLeft - this.sidePadding;
+        this.renderer.setStyle(underlineEl, 'width', `${activeTab.offsetWidth}px`);
+        this.renderer.setStyle(underlineEl, 'transform', `translateX(${translateX}px)`);
+    }
+    scrollToActiveTab(updateUnderlineAfter = true) {
+        const tabListEl = this.tabListRef.nativeElement;
+        const tabButtons = tabListEl.querySelectorAll('.tab-btn');
+        const activeTab = tabButtons[this.activeIndex];
+        if (!activeTab)
+            return;
+        const elLeft = activeTab.offsetLeft;
+        const elRight = elLeft + activeTab.offsetWidth;
+        const containerLeft = tabListEl.scrollLeft;
+        const containerRight = containerLeft + tabListEl.clientWidth;
+        if (elLeft < containerLeft) {
+            tabListEl.scrollTo({ left: Math.max(elLeft - 32, 0), behavior: 'smooth' });
+        }
+        else if (elRight > containerRight) {
+            const target = elRight - tabListEl.clientWidth + 32;
+            tabListEl.scrollTo({ left: target, behavior: 'smooth' });
+        }
+        setTimeout(() => {
+            this.updateScrollButtons();
+            this.updateUnderlinePosition();
+        }, updateUnderlineAfter ? this.animateDelay : 0);
+    }
+    scroll(direction) {
+        const tabListEl = this.tabListRef.nativeElement;
+        const delta = direction === 'left' ? -this.scrollAmount : this.scrollAmount;
+        tabListEl.scrollBy({ left: delta, behavior: 'smooth' });
+        setTimeout(() => {
+            this.updateScrollButtons();
+            this.updateUnderlinePosition();
+        }, this.animateDelay);
+    }
+    onScroll() {
+        this.updateScrollButtons();
+        this.updateUnderlinePosition();
+    }
+    updateScrollButtons() {
+        const el = this.tabListRef.nativeElement;
+        const scrollLeft = el.scrollLeft;
+        const maxScrollLeft = el.scrollWidth - el.clientWidth;
+        this.canScrollLeft = scrollLeft > 2;
+        this.canScrollRight = scrollLeft < maxScrollLeft - 2;
+    }
+    onResize() {
+        this.updateUnderlinePosition();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabGroupComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TabGroupComponent, isStandalone: false, selector: "fx-ui-tab-group", inputs: { activeIndex: "activeIndex" }, host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "tabs", predicate: TabComponent }], viewQueries: [{ propertyName: "tabListRef", first: true, predicate: ["tabList"], descendants: true, static: true }, { propertyName: "underlineRef", first: true, predicate: ["underline"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"relative\">\n  <!-- Left scroll button -->\n  <button\n    class=\"left-scroll-button\"\n    type=\"button\"\n    (click)=\"scroll('left')\"\n    [style.opacity]=\"canScrollLeft ? 1 : 0\"\n    [style.pointerEvents]=\"canScrollLeft ? 'auto' : 'none'\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"h-5 w-5 text-text-primary\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n    >\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\n    </svg>\n  </button>\n\n  <div\n    #tabList\n    class=\"relative flex overflow-x-auto no-scrollbar scroll-smooth\"\n    (scroll)=\"onScroll()\"\n  >\n    <button\n      *ngFor=\"let tab of tabs.toArray(); let i = index\"\n      (click)=\"selectTab(i)\"\n      class=\"tab-btn tab-bar-btn\"\n    >\n      <div class=\"flex flex-row items-center justify-center\">\n        @if(tab.icon) {<fx-ui-hero-icon\n          [icon]=\"tab.icon\"\n          [size]=\"20\"\n          class=\"flex mr-[2px]\"\n          [ngClass]=\"{\n            'text-primary mb-small': i === activeIndex,\n            'text-text-placeholder': i !== activeIndex\n          }\"\n        ></fx-ui-hero-icon\n        >}\n        <div [ngClass]=\"i === activeIndex ? 'txt-field-label text-primary' : 'txt-placeholder'\">{{ tab.label }}</div>\n      </div>\n    </button>\n\n    <span #underline class=\"underline\" style=\"width: 0; transform: translateX(0)\"></span>\n  </div>\n\n  <button\n    class=\"right-scroll-button\"\n    type=\"button\"\n    (click)=\"scroll('right')\"\n    [style.opacity]=\"canScrollRight ? 1 : 0\"\n    [style.pointerEvents]=\"canScrollRight ? 'auto' : 'none'\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"h-5 w-5 text-text-primary\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n    >\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" />\n    </svg>\n  </button>\n</div>\n\n<!-- Tab content -->\n<div class=\"transition-all duration-300 ease-in-out mt-4\">\n  <ng-container *ngFor=\"let tab of tabs.toArray(); let i = index\">\n    <div *ngIf=\"i === activeIndex\" class=\"animate-fadeIn\">\n      <ng-container *ngTemplateOutlet=\"tab.content\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n", styles: ["@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.animate-fadeIn{animation:fadeIn .28s ease-in-out}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.underline{position:absolute;bottom:0;height:2px;background-color:rgb(var(--primary));transition:transform .25s cubic-bezier(.2,.9,.2,1),width .25s cubic-bezier(.2,.9,.2,1);will-change:transform,width;transform:translate(0);width:0;margin-left:32px;margin-right:32px}.left-scroll-button{position:absolute;left:0;top:0;z-index:10;display:flex;height:100%;align-items:center;--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));padding-left:.5rem;padding-right:.5rem;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.right-scroll-button{position:absolute;right:0;top:0;z-index:10;display:flex;height:100%;align-items:center;--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));padding-left:.5rem;padding-right:.5rem;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.tab-bar-btn{position:relative;white-space:nowrap;padding:.5rem 1rem;font-size:.875rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "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: TabGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-tab-group', standalone: false, template: "<div class=\"relative\">\n  <!-- Left scroll button -->\n  <button\n    class=\"left-scroll-button\"\n    type=\"button\"\n    (click)=\"scroll('left')\"\n    [style.opacity]=\"canScrollLeft ? 1 : 0\"\n    [style.pointerEvents]=\"canScrollLeft ? 'auto' : 'none'\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"h-5 w-5 text-text-primary\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n    >\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\n    </svg>\n  </button>\n\n  <div\n    #tabList\n    class=\"relative flex overflow-x-auto no-scrollbar scroll-smooth\"\n    (scroll)=\"onScroll()\"\n  >\n    <button\n      *ngFor=\"let tab of tabs.toArray(); let i = index\"\n      (click)=\"selectTab(i)\"\n      class=\"tab-btn tab-bar-btn\"\n    >\n      <div class=\"flex flex-row items-center justify-center\">\n        @if(tab.icon) {<fx-ui-hero-icon\n          [icon]=\"tab.icon\"\n          [size]=\"20\"\n          class=\"flex mr-[2px]\"\n          [ngClass]=\"{\n            'text-primary mb-small': i === activeIndex,\n            'text-text-placeholder': i !== activeIndex\n          }\"\n        ></fx-ui-hero-icon\n        >}\n        <div [ngClass]=\"i === activeIndex ? 'txt-field-label text-primary' : 'txt-placeholder'\">{{ tab.label }}</div>\n      </div>\n    </button>\n\n    <span #underline class=\"underline\" style=\"width: 0; transform: translateX(0)\"></span>\n  </div>\n\n  <button\n    class=\"right-scroll-button\"\n    type=\"button\"\n    (click)=\"scroll('right')\"\n    [style.opacity]=\"canScrollRight ? 1 : 0\"\n    [style.pointerEvents]=\"canScrollRight ? 'auto' : 'none'\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"h-5 w-5 text-text-primary\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n    >\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" />\n    </svg>\n  </button>\n</div>\n\n<!-- Tab content -->\n<div class=\"transition-all duration-300 ease-in-out mt-4\">\n  <ng-container *ngFor=\"let tab of tabs.toArray(); let i = index\">\n    <div *ngIf=\"i === activeIndex\" class=\"animate-fadeIn\">\n      <ng-container *ngTemplateOutlet=\"tab.content\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n", styles: ["@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.animate-fadeIn{animation:fadeIn .28s ease-in-out}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.underline{position:absolute;bottom:0;height:2px;background-color:rgb(var(--primary));transition:transform .25s cubic-bezier(.2,.9,.2,1),width .25s cubic-bezier(.2,.9,.2,1);will-change:transform,width;transform:translate(0);width:0;margin-left:32px;margin-right:32px}.left-scroll-button{position:absolute;left:0;top:0;z-index:10;display:flex;height:100%;align-items:center;--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));padding-left:.5rem;padding-right:.5rem;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.right-scroll-button{position:absolute;right:0;top:0;z-index:10;display:flex;height:100%;align-items:center;--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));padding-left:.5rem;padding-right:.5rem;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.tab-bar-btn{position:relative;white-space:nowrap;padding:.5rem 1rem;font-size:.875rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { tabs: [{
+                type: ContentChildren,
+                args: [TabComponent]
+            }], activeIndex: [{
+                type: Input
+            }], tabListRef: [{
+                type: ViewChild,
+                args: ['tabList', { static: true }]
+            }], underlineRef: [{
+                type: ViewChild,
+                args: ['underline', { static: true }]
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+class TableCell {
+    loading;
+    skeletonClass = 'h-4 w-full';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TableCell, isStandalone: false, selector: "fx-ui-table-cell", inputs: { loading: "loading", skeletonClass: "skeletonClass" }, ngImport: i0, template: "@if (!loading) {\n  <div animate.enter=\"fade-in-animation\" class=\"inline-block my-normal\">\n    <ng-content />\n  </div>\n} @else {\n  <div animate.enter=\"fade-in-animation\" class=\"skeleton-load my-semi\" [class]=\"skeletonClass\"></div>\n}\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableCell, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-table-cell', standalone: false, template: "@if (!loading) {\n  <div animate.enter=\"fade-in-animation\" class=\"inline-block my-normal\">\n    <ng-content />\n  </div>\n} @else {\n  <div animate.enter=\"fade-in-animation\" class=\"skeleton-load my-semi\" [class]=\"skeletonClass\"></div>\n}\n" }]
+        }], propDecorators: { loading: [{
+                type: Input,
+                args: [{ required: true }]
+            }], skeletonClass: [{
+                type: Input
+            }] } });
+
+class TagComponent {
+    label;
+    type = 'default';
+    rounded = true;
+    icon;
+    solid = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TagComponent, isStandalone: false, selector: "fx-ui-tag", inputs: { label: "label", type: "type", rounded: "rounded", icon: "icon", solid: "solid" }, ngImport: i0, template: "<div\n  [class]=\"`flex flex-row gap-small ${rounded ? 'tag-round' : 'tag-square'} tag-${type}${solid ? '-solid' : ''}`\"\n>\n  @if(icon){\n  <fx-ui-hero-icon\n    [class]=\"`flex txt-tag-${type} ${solid ? 'text-white': ''}`\"\n    [icon]=\"icon\"\n    [size]=\"18\"\n  ></fx-ui-hero-icon>\n  }\n\n  <div [class]=\"`txt-tag-${type} ${solid ? 'text-white': ''}`\">\n    {{ label }}\n  </div>\n</div>\n", styles: [""], dependencies: [{ 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: TagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-tag', standalone: false, template: "<div\n  [class]=\"`flex flex-row gap-small ${rounded ? 'tag-round' : 'tag-square'} tag-${type}${solid ? '-solid' : ''}`\"\n>\n  @if(icon){\n  <fx-ui-hero-icon\n    [class]=\"`flex txt-tag-${type} ${solid ? 'text-white': ''}`\"\n    [icon]=\"icon\"\n    [size]=\"18\"\n  ></fx-ui-hero-icon>\n  }\n\n  <div [class]=\"`txt-tag-${type} ${solid ? 'text-white': ''}`\">\n    {{ label }}\n  </div>\n</div>\n" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], solid: [{
+                type: Input
+            }] } });
+
+class TreeDiagram {
+    zone;
+    cdr;
+    data;
+    container;
+    root;
+    children;
+    lines = [];
+    svgWidth = 0;
+    svgHeight = 0;
+    resizeObserver;
+    rafId;
+    constructor(zone, cdr) {
+        this.zone = zone;
+        this.cdr = cdr;
+    }
+    ngAfterViewInit() {
+        this.zone.runOutsideAngular(() => {
+            this.resizeObserver = new ResizeObserver((entries) => {
+                const rect = entries[0].contentRect;
+                if (rect.width === 0 || rect.height === 0)
+                    return;
+                this.scheduleDraw();
+            });
+            this.resizeObserver.observe(this.container.nativeElement);
+            setTimeout(() => this.scheduleDraw(), 50);
+            setTimeout(() => this.scheduleDraw(), 150);
+        });
+        this.children.changes.subscribe(() => this.scheduleDraw());
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        if (this.rafId)
+            cancelAnimationFrame(this.rafId);
+    }
+    scheduleDraw() {
+        if (this.rafId)
+            cancelAnimationFrame(this.rafId);
+        this.rafId = requestAnimationFrame(() => {
+            this.drawLines();
+        });
+    }
+    drawLines() {
+        if (!this.root || !this.children.length)
+            return;
+        const containerEl = this.container.nativeElement;
+        const rect = containerEl.getBoundingClientRect();
+        if (rect.width === 0 || rect.height === 0)
+            return;
+        const rootRect = this.root.nativeElement.getBoundingClientRect();
+        const rootX = rootRect.left + rootRect.width / 2 - rect.left;
+        const rootBottomY = rootRect.bottom - rect.top;
+        const childRects = this.children.map(c => c.nativeElement.getBoundingClientRect());
+        const childCenters = childRects.map(r => ({
+            x: r.left + r.width / 2 - rect.left,
+            y: r.top - rect.top
+        }));
+        const horizontalY = childCenters[0].y - 24;
+        this.zone.run(() => {
+            this.svgWidth = rect.width;
+            this.svgHeight = rect.height;
+            this.lines = [
+                {
+                    x1: rootX,
+                    y1: rootBottomY,
+                    x2: rootX,
+                    y2: horizontalY
+                },
+                {
+                    x1: childCenters[0].x,
+                    y1: horizontalY,
+                    x2: childCenters[childCenters.length - 1].x,
+                    y2: horizontalY
+                },
+                ...childCenters.map(c => ({
+                    x1: c.x,
+                    y1: horizontalY,
+                    x2: c.x,
+                    y2: c.y
+                }))
+            ];
+        });
+        this.cdr.detectChanges();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TreeDiagram, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: TreeDiagram, isStandalone: false, selector: "fx-ui-tree-diagram", inputs: { data: "data" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "root", first: true, predicate: ["root"], descendants: true }, { propertyName: "children", predicate: ["child"], descendants: true }], ngImport: i0, template: "<div class=\"relative p-8\" #container>\n\n  <!-- ROOT -->\n  <div\n    #root\n    class=\"mx-auto w-fit bg-blue-600 text-white px-7 py-3 rounded-md font-semibold text-center\"\n  >\n    {{ data.label }}\n  </div>\n\n  <!-- CHILDREN -->\n  <div class=\"mt-16 flex justify-center gap-16\">\n    <div\n      *ngFor=\"let child of data.children\"\n      #child\n      class=\"w-48 bg-rose-600 text-white px-4 py-4 rounded-lg text-center\"\n    >\n      <div class=\"font-semibold text-lg\">{{ child.label }}</div>\n      <div class=\"mt-1 text-sm opacity-90\">{{ child.status }}</div>\n    </div>\n  </div>\n\n  <!-- SVG CONNECTORS -->\n  <svg\n    class=\"absolute inset-0 pointer-events-none\"\n    [attr.width]=\"svgWidth\"\n    [attr.height]=\"svgHeight\"\n  >\n    <line\n      *ngFor=\"let line of lines\"\n      [attr.x1]=\"line.x1\"\n      [attr.y1]=\"line.y1\"\n      [attr.x2]=\"line.x2\"\n      [attr.y2]=\"line.y2\"\n      stroke=\"#1f2937\"\n      stroke-width=\"2\"\n    />\n  </svg>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TreeDiagram, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-tree-diagram', standalone: false, template: "<div class=\"relative p-8\" #container>\n\n  <!-- ROOT -->\n  <div\n    #root\n    class=\"mx-auto w-fit bg-blue-600 text-white px-7 py-3 rounded-md font-semibold text-center\"\n  >\n    {{ data.label }}\n  </div>\n\n  <!-- CHILDREN -->\n  <div class=\"mt-16 flex justify-center gap-16\">\n    <div\n      *ngFor=\"let child of data.children\"\n      #child\n      class=\"w-48 bg-rose-600 text-white px-4 py-4 rounded-lg text-center\"\n    >\n      <div class=\"font-semibold text-lg\">{{ child.label }}</div>\n      <div class=\"mt-1 text-sm opacity-90\">{{ child.status }}</div>\n    </div>\n  </div>\n\n  <!-- SVG CONNECTORS -->\n  <svg\n    class=\"absolute inset-0 pointer-events-none\"\n    [attr.width]=\"svgWidth\"\n    [attr.height]=\"svgHeight\"\n  >\n    <line\n      *ngFor=\"let line of lines\"\n      [attr.x1]=\"line.x1\"\n      [attr.y1]=\"line.y1\"\n      [attr.x2]=\"line.x2\"\n      [attr.y2]=\"line.y2\"\n      stroke=\"#1f2937\"\n      stroke-width=\"2\"\n    />\n  </svg>\n\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { data: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ['container']
+            }], root: [{
+                type: ViewChild,
+                args: ['root']
+            }], children: [{
+                type: ViewChildren,
+                args: ['child']
+            }] } });
+
+class KanbanBoardComponent {
+    columns = [];
+    itemTemplate;
+    columnChanged = new EventEmitter();
+    /**
+     * Get all column IDs for connecting drop lists
+     */
+    getColumnIds() {
+        return this.columns.map((col) => col.id);
+    }
+    /**
+     * Handle drop event when item is moved
+     */
+    onDrop(event, columnId) {
+        const previousColumnId = event.previousContainer.id;
+        const currentColumnId = columnId;
+        if (event.previousContainer === event.container) {
+            // Reorder within the same column
+            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+        }
+        else {
+            // Transfer between columns
+            transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
+        }
+        // Emit the change event
+        const item = event.container.data[event.currentIndex];
+        this.columnChanged.emit({
+            previousColumnId,
+            currentColumnId,
+            item,
+            previousIndex: event.previousIndex,
+            currentIndex: event.currentIndex,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KanbanBoardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: KanbanBoardComponent, isStandalone: false, selector: "fx-ui-kanban-board", inputs: { columns: "columns", itemTemplate: "itemTemplate" }, outputs: { columnChanged: "columnChanged" }, ngImport: i0, template: "<div class=\"kanban-board\">\n  <div class=\"kanban-columns\">\n    @for (column of columns; track column.id) {\n      <div class=\"kanban-column\">\n        <div class=\"kanban-column-header\">\n          <h3 class=\"kanban-column-title\">{{ column.title }}</h3>\n          <span class=\"kanban-column-count\">{{ column.items.length }}</span>\n        </div>\n        \n        <div\n          class=\"kanban-column-content\"\n          cdkDropList\n          [id]=\"column.id\"\n          [cdkDropListData]=\"column.items\"\n          [cdkDropListConnectedTo]=\"getColumnIds()\"\n          (cdkDropListDropped)=\"onDrop($event, column.id)\"\n        >\n          @for (item of column.items; track $index) {\n            <div class=\"kanban-item\" cdkDrag>\n              <div class=\"kanban-item-placeholder\" *cdkDragPlaceholder></div>\n              \n              @if (itemTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, index: $index }\"\n                ></ng-container>\n              } @else {\n                <div class=\"kanban-item-default\">\n                  {{ item }}\n                </div>\n              }\n            </div>\n          }\n          \n          @if (column.items.length === 0) {\n            <div class=\"kanban-column-empty\">\n              Drop items here\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".kanban-board{height:100%;width:100%;overflow-x:auto}.kanban-columns{display:flex;min-height:100%;gap:1rem;padding:1rem}.kanban-column{display:flex;min-width:300px;flex-direction:column;border-radius:.5rem;--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-column{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}}.kanban-column{flex-shrink:0}.kanban-column-header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));padding:1rem}@media(prefers-color-scheme:dark){.kanban-column-header{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}}.kanban-column-title{margin:0;font-size:1.125rem;line-height:1.75rem;font-weight:600;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-column-title{--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}}.kanban-column-count{border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.875rem;font-weight:500;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-column-count{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}}.kanban-column-content{flex:1 1 0%}.kanban-column-content>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.kanban-column-content{overflow-y:auto;padding:1rem;min-height:200px}.kanban-item{border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(var(--shadow-color) / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}@media(prefers-color-scheme:dark){.kanban-item{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}}.kanban-item{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;cursor:move}.kanban-item:hover{--tw-shadow: 0 4px 6px -1px rgb(var(--shadow-color) / .1), 0 2px 4px -2px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.kanban-item-default{padding:1rem;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-item-default{--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}}.kanban-item-placeholder{border-radius:.5rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-item-placeholder{--tw-border-opacity: 1;border-color:rgb(107 114 128 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}}.kanban-item-placeholder{opacity:.5;min-height:60px}.kanban-column-empty{display:flex;height:8rem;align-items:center;justify-content:center;font-size:.875rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-column-empty{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}}.kanban-column-empty{border-radius:.5rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-column-empty{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}}.cdk-drag-preview{border-radius:.5rem;opacity:.8;--tw-shadow: 0 10px 15px -3px rgb(var(--shadow-color) / .1), 0 4px 6px -4px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.kanban-column-content.cdk-drop-list-dragging .kanban-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$2.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KanbanBoardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-kanban-board', standalone: false, template: "<div class=\"kanban-board\">\n  <div class=\"kanban-columns\">\n    @for (column of columns; track column.id) {\n      <div class=\"kanban-column\">\n        <div class=\"kanban-column-header\">\n          <h3 class=\"kanban-column-title\">{{ column.title }}</h3>\n          <span class=\"kanban-column-count\">{{ column.items.length }}</span>\n        </div>\n        \n        <div\n          class=\"kanban-column-content\"\n          cdkDropList\n          [id]=\"column.id\"\n          [cdkDropListData]=\"column.items\"\n          [cdkDropListConnectedTo]=\"getColumnIds()\"\n          (cdkDropListDropped)=\"onDrop($event, column.id)\"\n        >\n          @for (item of column.items; track $index) {\n            <div class=\"kanban-item\" cdkDrag>\n              <div class=\"kanban-item-placeholder\" *cdkDragPlaceholder></div>\n              \n              @if (itemTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, index: $index }\"\n                ></ng-container>\n              } @else {\n                <div class=\"kanban-item-default\">\n                  {{ item }}\n                </div>\n              }\n            </div>\n          }\n          \n          @if (column.items.length === 0) {\n            <div class=\"kanban-column-empty\">\n              Drop items here\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".kanban-board{height:100%;width:100%;overflow-x:auto}.kanban-columns{display:flex;min-height:100%;gap:1rem;padding:1rem}.kanban-column{display:flex;min-width:300px;flex-direction:column;border-radius:.5rem;--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-column{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}}.kanban-column{flex-shrink:0}.kanban-column-header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));padding:1rem}@media(prefers-color-scheme:dark){.kanban-column-header{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}}.kanban-column-title{margin:0;font-size:1.125rem;line-height:1.75rem;font-weight:600;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-column-title{--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}}.kanban-column-count{border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.875rem;font-weight:500;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-column-count{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}}.kanban-column-content{flex:1 1 0%}.kanban-column-content>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.kanban-column-content{overflow-y:auto;padding:1rem;min-height:200px}.kanban-item{border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(var(--shadow-color) / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}@media(prefers-color-scheme:dark){.kanban-item{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}}.kanban-item{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;cursor:move}.kanban-item:hover{--tw-shadow: 0 4px 6px -1px rgb(var(--shadow-color) / .1), 0 2px 4px -2px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.kanban-item-default{padding:1rem;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-item-default{--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}}.kanban-item-placeholder{border-radius:.5rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-item-placeholder{--tw-border-opacity: 1;border-color:rgb(107 114 128 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}}.kanban-item-placeholder{opacity:.5;min-height:60px}.kanban-column-empty{display:flex;height:8rem;align-items:center;justify-content:center;font-size:.875rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-column-empty{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}}.kanban-column-empty{border-radius:.5rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-column-empty{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}}.cdk-drag-preview{border-radius:.5rem;opacity:.8;--tw-shadow: 0 10px 15px -3px rgb(var(--shadow-color) / .1), 0 4px 6px -4px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.kanban-column-content.cdk-drop-list-dragging .kanban-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+        }], propDecorators: { columns: [{
+                type: Input
+            }], itemTemplate: [{
+                type: Input
+            }], columnChanged: [{
+                type: Output
+            }] } });
+
+class DrawerComponent {
+    router;
+    items = [];
+    isExpanded = true;
+    logo;
+    toggleExpanded = new EventEmitter();
+    itemClicked = new EventEmitter();
+    expandedItems = new Set();
+    currentRoute = '';
+    destroy$ = new Subject();
+    constructor(router) {
+        this.router = router;
+    }
+    ngOnInit() {
+        // Track current route
+        this.currentRoute = this.router.url;
+        // Subscribe to route changes
+        this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), takeUntil(this.destroy$))
+            .subscribe((event) => {
+            this.currentRoute = event.urlAfterRedirects || event.url;
+            this.autoExpandActiveParents();
+        });
+        // Auto-expand parents of active route on init
+        this.autoExpandActiveParents();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    toggleDrawer() {
+        this.isExpanded = !this.isExpanded;
+        this.toggleExpanded.emit(this.isExpanded);
+    }
+    toggleAccordion(itemId) {
+        if (this.expandedItems.has(itemId)) {
+            this.expandedItems.delete(itemId);
+        }
+        else {
+            this.expandedItems.add(itemId);
+        }
+    }
+    isAccordionExpanded(itemId) {
+        return this.expandedItems.has(itemId);
+    }
+    onItemClick(item, event) {
+        // If item has children, toggle accordion
+        if (item.children && item.children.length > 0) {
+            event?.preventDefault();
+            this.toggleAccordion(item.id);
+            return;
+        }
+        // Emit click event
+        this.itemClicked.emit(item);
+        // If item has action, execute it
+        if (item.action) {
+            event?.preventDefault();
+            item.action();
+        }
+        // Navigation is handled by routerLink in template
+    }
+    isActiveRoute(route) {
+        if (!route)
+            return false;
+        return this.currentRoute === route || this.currentRoute.startsWith(route + '/');
+    }
+    hasActiveChild(item) {
+        if (!item.children)
+            return false;
+        return item.children.some((child) => {
+            if (this.isActiveRoute(child.route))
+                return true;
+            if (child.children)
+                return this.hasActiveChild(child);
+            return false;
+        });
+    }
+    autoExpandActiveParents() {
+        const expandParents = (items) => {
+            for (const item of items) {
+                if (item.route && this.isActiveRoute(item.route)) {
+                    return true;
+                }
+                if (item.children) {
+                    const hasActiveChild = expandParents(item.children);
+                    if (hasActiveChild) {
+                        this.expandedItems.add(item.id);
+                        return true;
+                    }
+                }
+            }
+            return false;
+        };
+        expandParents(this.items);
+    }
+    getAccordionState(itemId) {
+        return this.isAccordionExpanded(itemId) ? 'expanded' : 'collapsed';
+    }
+    getDrawerState() {
+        return this.isExpanded ? 'expanded' : 'collapsed';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DrawerComponent, deps: [{ token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: DrawerComponent, isStandalone: false, selector: "fx-ui-drawer", inputs: { items: "items", isExpanded: "isExpanded", logo: "logo" }, outputs: { toggleExpanded: "toggleExpanded", itemClicked: "itemClicked" }, ngImport: i0, template: "<div class=\"drawer-host-wrapper\">\n  <a href=\"/\" class=\"h-[60px] p-4\">\n    @if (logo) {\n      <img\n        [src]=\"logo\"\n        class=\"h-[20px] w-auto transition-all duration-300 ease-in-out\"\n        [ngClass]=\"{ 'scale-90 ml-2': !isExpanded, 'ml-5': isExpanded }\"\n      />\n    } @else {\n      <div class=\"h-[30px] w-auto transition-all duration-300 ease-in-out\"></div>\n    }\n  </a>\n  <div class=\"drawer-container\" [@drawerExpand]=\"getDrawerState()\">\n    <!-- Navigation Items -->\n    <nav class=\"drawer-nav\">\n      <ng-container *ngFor=\"let item of items\">\n        <ng-container\n          *ngTemplateOutlet=\"drawerItem; context: { $implicit: item, level: 0 }\"\n        ></ng-container>\n      </ng-container>\n    </nav>\n  </div>\n\n  <!-- Floating Toggle Button on right border -->\n  <button\n    type=\"button\"\n    class=\"toggle-btn\"\n    (click)=\"toggleDrawer()\"\n    [matTooltip]=\"isExpanded ? 'Collapse' : 'Expand'\"\n    matTooltipClass=\"text-text-primary text-xs font-semibold\"\n    matTooltipPosition=\"right\"\n  >\n    <fx-ui-hero-icon\n      [icon]=\"isExpanded ? 'chevron-left' : 'chevron-right'\"\n      [size]=\"16\"\n      class=\"text-text-primary\"\n    ></fx-ui-hero-icon>\n  </button>\n</div>\n\n<!-- Recursive Template for Drawer Items -->\n<ng-template #drawerItem let-item let-level=\"level\">\n  <div class=\"drawer-item-wrapper\">\n    <!-- Item Button/Link -->\n    <a\n      *ngIf=\"item.route && !item.children\"\n      [routerLink]=\"item.route\"\n      class=\"drawer-item\"\n      [class.active]=\"isActiveRoute(item.route)\"\n      [class.has-children]=\"item.children && item.children.length > 0\"\n      [style.paddingLeft.px]=\"isExpanded ? 16 + level * 16 : 16\"\n      [matTooltip]=\"!isExpanded ? item.label : ''\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"text-text-primary text-xs font-semibold\"\n      (click)=\"onItemClick(item, $event)\"\n    >\n      <div class=\"item-content\">\n        <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"20\" class=\"item-icon\"></fx-ui-hero-icon>\n        <span *ngIf=\"isExpanded\" class=\"item-label\">{{ item.label }}</span>\n      </div>\n    </a>\n\n    <button\n      *ngIf=\"!item.route || item.children\"\n      type=\"button\"\n      class=\"drawer-item\"\n      [class.active]=\"isActiveRoute(item.route)\"\n      [class.has-children]=\"item.children && item.children.length > 0\"\n      [style.paddingLeft.px]=\"isExpanded ? 16 + level * 16 : 16\"\n      [matTooltip]=\"!isExpanded ? item.label : ''\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"text-text-primary text-sm font-semibold\"\n      (click)=\"onItemClick(item, $event)\"\n    >\n      <div class=\"item-content\">\n        <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"20\" class=\"item-icon\"></fx-ui-hero-icon>\n        <span *ngIf=\"isExpanded\" class=\"item-label\">{{ item.label }}</span>\n        <fx-ui-hero-icon\n          *ngIf=\"isExpanded && item.children && item.children.length > 0\"\n          [icon]=\"'chevron-down'\"\n          [size]=\"16\"\n          class=\"chevron-icon\"\n          [class.rotated]=\"isAccordionExpanded(item.id)\"\n        ></fx-ui-hero-icon>\n      </div>\n    </button>\n\n    <!-- Accordion Children -->\n    <div\n      *ngIf=\"item.children && item.children.length > 0\"\n      class=\"accordion-children\"\n      [@accordionExpand]=\"getAccordionState(item.id)\"\n    >\n      <ng-container *ngFor=\"let child of item.children\">\n        <ng-container\n          *ngTemplateOutlet=\"drawerItem; context: { $implicit: child, level: level + 1 }\"\n        ></ng-container>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%}.drawer-host-wrapper{position:relative;height:100%;border-right-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1))}.drawer-container{display:flex;height:100%;flex-direction:column;overflow:auto;--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));padding-left:.5rem;padding-right:.5rem;transition:width .3s cubic-bezier(.4,0,.2,1)}.toggle-btn{position:absolute;top:50%;z-index:50;display:flex;height:1.5rem;width:1.5rem;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(var(--shadow-color) / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);right:-12px;transition:all .2s ease}.toggle-btn:hover{--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(var(--shadow-color) / .1), 0 2px 4px -2px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.toggle-btn:active{transform:translateY(-50%) scale(.9)}.toggle-btn:focus-visible{outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary) / 1)}.drawer-nav{flex:1 1 0%;overflow-y:auto;overflow-x:hidden;padding-top:.5rem;padding-bottom:.5rem}.drawer-nav::-webkit-scrollbar{width:.375rem}.drawer-nav::-webkit-scrollbar-track{background-color:transparent}.drawer-nav::-webkit-scrollbar-thumb{border-radius:.125rem;--tw-bg-opacity: 1;background-color:rgb(var(--border-default) / var(--tw-bg-opacity, 1))}.drawer-nav::-webkit-scrollbar-thumb:hover{--tw-bg-opacity: 1;background-color:rgb(var(--text-placeholder) / var(--tw-bg-opacity, 1))}.drawer-item-wrapper{position:relative}.drawer-item{position:relative;margin-top:.25rem;display:flex;min-height:2rem;width:100%;cursor:pointer;align-items:center;border-radius:.25rem;border-style:none;background-color:transparent;padding:.5rem 1rem;--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1));text-decoration-line:none;transition:all .2s ease}.drawer-item:hover{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}.drawer-item.active{--tw-bg-opacity: 1;background-color:rgb(var(--primary) / var(--tw-bg-opacity, 1));font-weight:500;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.drawer-item.active .item-icon{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.drawer-item:active{transform:scale(.98)}.drawer-item:focus-visible{outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary) / 1)}.drawer-item{-webkit-tap-highlight-color:transparent;outline:2px solid transparent;outline-offset:2px}.item-content{display:flex;width:100%;align-items:center;gap:.75rem;overflow:hidden}.item-icon{flex-shrink:0;color:inherit}.item-label{flex:1 1 0%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:13px;line-height:1.25rem}.chevron-icon{margin-left:auto;flex-shrink:0;--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1));transition:transform .3s cubic-bezier(.4,0,.2,1)}.chevron-icon.rotated{transform:rotate(180deg)}.accordion-children{overflow:hidden}.drawer-container[style*=\"width: 64px\"] .drawer-item{justify-content:center;padding-left:16px!important}.drawer-container[style*=\"width: 64px\"] .item-content{justify-content:center}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i47.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["icon", "solid", "outline", "size", "color", "class"] }], animations: [
+            trigger('drawerExpand', [
+                state('collapsed', style({ width: '70px' })),
+                state('expanded', style({ width: '240px' })),
+                transition('collapsed <=> expanded', animate('300ms cubic-bezier(0.4, 0, 0.2, 1)')),
+            ]),
+            trigger('accordionExpand', [
+                state('collapsed', style({ height: '0', overflow: 'hidden', opacity: 0 })),
+                state('expanded', style({ height: '*', overflow: 'visible', opacity: 1 })),
+                transition('collapsed <=> expanded', animate('300ms cubic-bezier(0.4, 0, 0.2, 1)')),
+            ]),
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-drawer', standalone: false, animations: [
+                        trigger('drawerExpand', [
+                            state('collapsed', style({ width: '70px' })),
+                            state('expanded', style({ width: '240px' })),
+                            transition('collapsed <=> expanded', animate('300ms cubic-bezier(0.4, 0, 0.2, 1)')),
+                        ]),
+                        trigger('accordionExpand', [
+                            state('collapsed', style({ height: '0', overflow: 'hidden', opacity: 0 })),
+                            state('expanded', style({ height: '*', overflow: 'visible', opacity: 1 })),
+                            transition('collapsed <=> expanded', animate('300ms cubic-bezier(0.4, 0, 0.2, 1)')),
+                        ]),
+                    ], template: "<div class=\"drawer-host-wrapper\">\n  <a href=\"/\" class=\"h-[60px] p-4\">\n    @if (logo) {\n      <img\n        [src]=\"logo\"\n        class=\"h-[20px] w-auto transition-all duration-300 ease-in-out\"\n        [ngClass]=\"{ 'scale-90 ml-2': !isExpanded, 'ml-5': isExpanded }\"\n      />\n    } @else {\n      <div class=\"h-[30px] w-auto transition-all duration-300 ease-in-out\"></div>\n    }\n  </a>\n  <div class=\"drawer-container\" [@drawerExpand]=\"getDrawerState()\">\n    <!-- Navigation Items -->\n    <nav class=\"drawer-nav\">\n      <ng-container *ngFor=\"let item of items\">\n        <ng-container\n          *ngTemplateOutlet=\"drawerItem; context: { $implicit: item, level: 0 }\"\n        ></ng-container>\n      </ng-container>\n    </nav>\n  </div>\n\n  <!-- Floating Toggle Button on right border -->\n  <button\n    type=\"button\"\n    class=\"toggle-btn\"\n    (click)=\"toggleDrawer()\"\n    [matTooltip]=\"isExpanded ? 'Collapse' : 'Expand'\"\n    matTooltipClass=\"text-text-primary text-xs font-semibold\"\n    matTooltipPosition=\"right\"\n  >\n    <fx-ui-hero-icon\n      [icon]=\"isExpanded ? 'chevron-left' : 'chevron-right'\"\n      [size]=\"16\"\n      class=\"text-text-primary\"\n    ></fx-ui-hero-icon>\n  </button>\n</div>\n\n<!-- Recursive Template for Drawer Items -->\n<ng-template #drawerItem let-item let-level=\"level\">\n  <div class=\"drawer-item-wrapper\">\n    <!-- Item Button/Link -->\n    <a\n      *ngIf=\"item.route && !item.children\"\n      [routerLink]=\"item.route\"\n      class=\"drawer-item\"\n      [class.active]=\"isActiveRoute(item.route)\"\n      [class.has-children]=\"item.children && item.children.length > 0\"\n      [style.paddingLeft.px]=\"isExpanded ? 16 + level * 16 : 16\"\n      [matTooltip]=\"!isExpanded ? item.label : ''\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"text-text-primary text-xs font-semibold\"\n      (click)=\"onItemClick(item, $event)\"\n    >\n      <div class=\"item-content\">\n        <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"20\" class=\"item-icon\"></fx-ui-hero-icon>\n        <span *ngIf=\"isExpanded\" class=\"item-label\">{{ item.label }}</span>\n      </div>\n    </a>\n\n    <button\n      *ngIf=\"!item.route || item.children\"\n      type=\"button\"\n      class=\"drawer-item\"\n      [class.active]=\"isActiveRoute(item.route)\"\n      [class.has-children]=\"item.children && item.children.length > 0\"\n      [style.paddingLeft.px]=\"isExpanded ? 16 + level * 16 : 16\"\n      [matTooltip]=\"!isExpanded ? item.label : ''\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"text-text-primary text-sm font-semibold\"\n      (click)=\"onItemClick(item, $event)\"\n    >\n      <div class=\"item-content\">\n        <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"20\" class=\"item-icon\"></fx-ui-hero-icon>\n        <span *ngIf=\"isExpanded\" class=\"item-label\">{{ item.label }}</span>\n        <fx-ui-hero-icon\n          *ngIf=\"isExpanded && item.children && item.children.length > 0\"\n          [icon]=\"'chevron-down'\"\n          [size]=\"16\"\n          class=\"chevron-icon\"\n          [class.rotated]=\"isAccordionExpanded(item.id)\"\n        ></fx-ui-hero-icon>\n      </div>\n    </button>\n\n    <!-- Accordion Children -->\n    <div\n      *ngIf=\"item.children && item.children.length > 0\"\n      class=\"accordion-children\"\n      [@accordionExpand]=\"getAccordionState(item.id)\"\n    >\n      <ng-container *ngFor=\"let child of item.children\">\n        <ng-container\n          *ngTemplateOutlet=\"drawerItem; context: { $implicit: child, level: level + 1 }\"\n        ></ng-container>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%}.drawer-host-wrapper{position:relative;height:100%;border-right-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1))}.drawer-container{display:flex;height:100%;flex-direction:column;overflow:auto;--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));padding-left:.5rem;padding-right:.5rem;transition:width .3s cubic-bezier(.4,0,.2,1)}.toggle-btn{position:absolute;top:50%;z-index:50;display:flex;height:1.5rem;width:1.5rem;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(var(--shadow-color) / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);right:-12px;transition:all .2s ease}.toggle-btn:hover{--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(var(--shadow-color) / .1), 0 2px 4px -2px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.toggle-btn:active{transform:translateY(-50%) scale(.9)}.toggle-btn:focus-visible{outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary) / 1)}.drawer-nav{flex:1 1 0%;overflow-y:auto;overflow-x:hidden;padding-top:.5rem;padding-bottom:.5rem}.drawer-nav::-webkit-scrollbar{width:.375rem}.drawer-nav::-webkit-scrollbar-track{background-color:transparent}.drawer-nav::-webkit-scrollbar-thumb{border-radius:.125rem;--tw-bg-opacity: 1;background-color:rgb(var(--border-default) / var(--tw-bg-opacity, 1))}.drawer-nav::-webkit-scrollbar-thumb:hover{--tw-bg-opacity: 1;background-color:rgb(var(--text-placeholder) / var(--tw-bg-opacity, 1))}.drawer-item-wrapper{position:relative}.drawer-item{position:relative;margin-top:.25rem;display:flex;min-height:2rem;width:100%;cursor:pointer;align-items:center;border-radius:.25rem;border-style:none;background-color:transparent;padding:.5rem 1rem;--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1));text-decoration-line:none;transition:all .2s ease}.drawer-item:hover{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}.drawer-item.active{--tw-bg-opacity: 1;background-color:rgb(var(--primary) / var(--tw-bg-opacity, 1));font-weight:500;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.drawer-item.active .item-icon{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.drawer-item:active{transform:scale(.98)}.drawer-item:focus-visible{outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary) / 1)}.drawer-item{-webkit-tap-highlight-color:transparent;outline:2px solid transparent;outline-offset:2px}.item-content{display:flex;width:100%;align-items:center;gap:.75rem;overflow:hidden}.item-icon{flex-shrink:0;color:inherit}.item-label{flex:1 1 0%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:13px;line-height:1.25rem}.chevron-icon{margin-left:auto;flex-shrink:0;--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1));transition:transform .3s cubic-bezier(.4,0,.2,1)}.chevron-icon.rotated{transform:rotate(180deg)}.accordion-children{overflow:hidden}.drawer-container[style*=\"width: 64px\"] .drawer-item{justify-content:center;padding-left:16px!important}.drawer-container[style*=\"width: 64px\"] .item-content{justify-content:center}\n"] }]
+        }], ctorParameters: () => [{ type: i1$4.Router }], propDecorators: { items: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }], logo: [{
+                type: Input
+            }], toggleExpanded: [{
+                type: Output
+            }], itemClicked: [{
+                type: Output
+            }] } });
+
+const FX_COMPONENTS = [
+    InputComponent,
+    SelectComponent,
+    RadioButtonComponent,
+    CheckboxComponent,
+    DndUploadComponent,
+    ButtonComponent,
+    RadioButtonToggleComponent,
+    DatetimePicker,
+    LoadingPanel,
+    SearchBarComponent,
+    TabGroupComponent,
+    TabComponent,
+    HeroIconComponent,
+    ToastComponent,
+    ToastContainerComponent,
+    TagComponent,
+    ChartComponent,
+    SliderComponent,
+    SwitchComponent,
+    RichTextAreaComponent,
+    SkeletonTableLoadingComponent,
+    FlowConnection,
+    CircleProgressBar,
+    TreeDiagram,
+    TableCell,
+    KanbanBoardComponent,
+    DrawerComponent,
+];
+
+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');
+    }
+    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: "fx-ui-confirmation-dialog", ngImport: i0, template: "<div animate.enter=\"fade-in-animation\" class=\"dialog-container\">\n  <h1 class=\"txt-heading-05 dialog-header\">{{ title }}</h1>\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\n      buttonVariant=\"primary\"\n      class=\"mr-1\"\n      [label]=\"confirmLabel\"\n      (clicked)=\"accept()\"\n      [loading]=\"loading\"\n      class=\"min-w-[100px]\"\n    ></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: 'fx-ui-confirmation-dialog', standalone: false, template: "<div animate.enter=\"fade-in-animation\" class=\"dialog-container\">\n  <h1 class=\"txt-heading-05 dialog-header\">{{ title }}</h1>\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\n      buttonVariant=\"primary\"\n      class=\"mr-1\"\n      [label]=\"confirmLabel\"\n      (clicked)=\"accept()\"\n      [loading]=\"loading\"\n      class=\"min-w-[100px]\"\n    ></fx-ui-button>\n  </mat-dialog-actions>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
+const DIALOGS_COMPONENT = [
+    ConfirmationDialogComponent
+];
+
+const MY_MOMENT_FORMATS = {
+    parseInput: 'YYYY-MM-DD',
+    fullPickerInput: 'YYYY-MM-DD HH:mm',
+    datePickerInput: 'YYYY-MM-DD',
+    timePickerInput: 'HH:mm',
+    monthYearLabel: 'MMM YYYY',
+    dateA11yLabel: 'LL',
+    monthYearA11yLabel: 'MMMM YYYY',
+};
+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, RichTextAreaComponent, SkeletonTableLoadingComponent, FlowConnection, CircleProgressBar, TreeDiagram, TableCell, KanbanBoardComponent, DrawerComponent, ConfirmationDialogComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            RouterModule,
+            OwlDateTimeModule,
+            OwlNativeDateTimeModule,
+            OwlMomentDateTimeModule,
+            HasPermissionDirective,
+            TrimOnBlurDirective,
+            NgHeroiconsModule, i29.VflowComponent, i29.HandleComponent, i29.ResizableComponent, i29.SelectableDirective, i29.MiniMapComponent, i29.NodeToolbarComponent, i29.CustomTemplateEdgeComponent, i29.DragHandleDirective, i29.ConnectionControllerDirective, i29.NodeHtmlTemplateDirective, i29.NodeSvgTemplateDirective, i29.GroupNodeTemplateDirective, i29.EdgeLabelHtmlTemplateDirective, i29.EdgeTemplateDirective, i29.ConnectionTemplateDirective, i29.HandleTemplateDirective, i1$5.NgxEchartsModule, i3$1.MatSelectModule, i32.MatRadioModule, i33.MatButtonModule, i34.MatIconModule, i35.MatPaginatorModule, i36.MatTableModule, i37.MatSnackBarModule, i1$1.MatDialogModule, i39.MatCheckboxModule, i40.MatCardModule, i41.MatDatepickerModule, i42.MatTimepickerModule, i43.MatBadgeModule, i44.MatExpansionModule, i45.MatFormFieldModule, i46.MatMenuModule, i47.MatTooltipModule, i2$2.DragDropModule], exports: [InputComponent, SelectComponent, RadioButtonComponent, CheckboxComponent, DndUploadComponent, ButtonComponent, RadioButtonToggleComponent, DatetimePicker, LoadingPanel, SearchBarComponent, TabGroupComponent, TabComponent, HeroIconComponent, ToastComponent, ToastContainerComponent, TagComponent, ChartComponent, SliderComponent, SwitchComponent, RichTextAreaComponent, SkeletonTableLoadingComponent, FlowConnection, CircleProgressBar, TreeDiagram, TableCell, KanbanBoardComponent, DrawerComponent, ConfirmationDialogComponent, 
+            // Module
+            FormsModule,
+            ReactiveFormsModule,
+            RouterModule,
+            OwlDateTimeModule,
+            OwlNativeDateTimeModule,
+            HasPermissionDirective,
+            NgHeroiconsModule, i3$1.MatSelectModule, i32.MatRadioModule, i33.MatButtonModule, i34.MatIconModule, i35.MatPaginatorModule, i36.MatTableModule, i37.MatSnackBarModule, i1$1.MatDialogModule, i39.MatCheckboxModule, i40.MatCardModule, i41.MatDatepickerModule, i42.MatTimepickerModule, i43.MatBadgeModule, i44.MatExpansionModule, i45.MatFormFieldModule, i46.MatMenuModule, i47.MatTooltipModule, i2$2.DragDropModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: UiModule, providers: [
+            importProvidersFrom(NgHeroiconsModule.forRoot()),
+            { provide: OWL_DATE_TIME_FORMATS, useValue: MY_MOMENT_FORMATS },
+        ], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            RouterModule,
+            OwlDateTimeModule,
+            OwlNativeDateTimeModule,
+            OwlMomentDateTimeModule,
+            NgHeroiconsModule, i29.VflowComponent, i29.HandleComponent, i29.ResizableComponent, i29.MiniMapComponent, i29.NodeToolbarComponent, i29.CustomTemplateEdgeComponent, NgxEchartsModule.forRoot({ echarts: () => import('echarts') }), MATERIAL_MODULE, 
+            // Module
+            FormsModule,
+            ReactiveFormsModule,
+            RouterModule,
+            OwlDateTimeModule,
+            OwlNativeDateTimeModule,
+            NgHeroiconsModule, i3$1.MatSelectModule, i32.MatRadioModule, i33.MatButtonModule, i34.MatIconModule, i35.MatPaginatorModule, i36.MatTableModule, i37.MatSnackBarModule, i1$1.MatDialogModule, i39.MatCheckboxModule, i40.MatCardModule, i41.MatDatepickerModule, i42.MatTimepickerModule, i43.MatBadgeModule, i44.MatExpansionModule, i45.MatFormFieldModule, i46.MatMenuModule, i47.MatTooltipModule, i2$2.DragDropModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: UiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...FX_COMPONENTS, ...DIALOGS_COMPONENT],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        RouterModule,
+                        OwlDateTimeModule,
+                        OwlNativeDateTimeModule,
+                        OwlMomentDateTimeModule,
+                        HasPermissionDirective,
+                        TrimOnBlurDirective,
+                        NgHeroiconsModule,
+                        ...Vflow,
+                        NgxEchartsModule.forRoot({ echarts: () => import('echarts') }),
+                        ...MATERIAL_MODULE,
+                    ],
+                    exports: [
+                        // Component
+                        ...FX_COMPONENTS,
+                        ...DIALOGS_COMPONENT,
+                        // Module
+                        FormsModule,
+                        ReactiveFormsModule,
+                        RouterModule,
+                        OwlDateTimeModule,
+                        OwlNativeDateTimeModule,
+                        HasPermissionDirective,
+                        NgHeroiconsModule,
+                        ...MATERIAL_MODULE,
+                    ],
+                    providers: [
+                        importProvidersFrom(NgHeroiconsModule.forRoot()),
+                        { provide: OWL_DATE_TIME_FORMATS, useValue: MY_MOMENT_FORMATS },
+                    ],
+                }]
+        }] });
+
+/*
+ * Public API Surface of ui
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AuthInterceptor, AuthStateService, BaseComponent, BaseDialogComponent, BaseResolver, BaseTableComponent, BreadcrumbService, ButtonComponent, ChartComponent, CheckboxComponent, CircleProgressBar, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, DrawerComponent, FlowConnection, FxLoadingService, FxStorageService, FxToastrService, FxUtils, HasPermissionDirective, HeroIconComponent, HttpLoaderFactory, HttpWrapper, InputComponent, KanbanBoardComponent, LoadingPanel, MY_MOMENT_FORMATS, NotificationService, PermissionGuard, PermissionService, QuillStyleLoaderService, RadioButtonComponent, RadioButtonToggleComponent, RichTextAreaComponent, SearchBarComponent, SelectComponent, SkeletonTableLoadingComponent, SliderComponent, SwitchComponent, TabComponent, TabGroupComponent, TableCell, TagComponent, ThemeService, ToastComponent, ToastContainerComponent, TranslationModule, TranslationService, TreeDiagram, TrimOnBlurDirective, UiModule };
+//# sourceMappingURL=foxeltech-angular-ui.mjs.map