@fxlt/common-ui 0.0.1

package/fesm2022/fxlt-common-ui.mjs

@@ -0,0 +1,2439 @@
+import * as i0 from '@angular/core';
+import { Directive, Input, Component, createComponent, Injectable, ViewChild, Inject, EventEmitter, NgModule, Output, HostListener, Optional, Self, ChangeDetectionStrategy, TemplateRef, ContentChildren, importProvidersFrom } from '@angular/core';
+import * as i26 from '@angular/material/paginator';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import * as i27 from '@angular/material/table';
+import { MatTableDataSource, MatTable, MatTableModule } from '@angular/material/table';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@dimaslz/ng-heroicons';
+import { NgHeroiconsModule } from '@dimaslz/ng-heroicons';
+import _, { clamp } from 'lodash';
+import { Observable, firstValueFrom, BehaviorSubject, Subject, throwError } from 'rxjs';
+import * as i1$1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i2$1 from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
+import * as i1$2 from '@ngx-translate/core';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import * as i2$2 from '@angular/router';
+import { catchError } from 'rxjs/operators';
+import * as i1$3 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i3$1 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i23 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i24 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i25 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i28 from '@angular/material/snack-bar';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import * as i30 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i31 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import * as i32 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i33 from '@angular/material/timepicker';
+import { MatTimepickerModule } from '@angular/material/timepicker';
+import * as i34 from '@angular/material/badge';
+import { MatBadgeModule } from '@angular/material/badge';
+import * as i35 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
+import * as i36 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i3 from '@danielmoncada/angular-datetime-picker';
+import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
+import * as i2$3 from 'ngx-echarts';
+import { NgxEchartsModule } from 'ngx-echarts';
+import { __decorate, __param } from 'tslib';
+
+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-[320px] px-large py-semi rounded shadow-lg transition-all duration-300 ease-in-out transform opacity-100 translate-y-0\"\n  [ngClass]=\"{\n    'border-success': type === 'success',\n    'border-critical': type === 'error',\n    'border-warning': type === 'warning',\n    'border-information': type === 'info'\n  }\"\n>\n  <div class=\"\">\n    @switch (type) { @case('success') {\n    <fx-ui-hero-icon\n      icon=\"check-circle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-success\"\n    ></fx-ui-hero-icon>\n    } @case('error') {\n    <fx-ui-hero-icon\n      icon=\"exclamation-circle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-critical\"\n    ></fx-ui-hero-icon>\n    } @case('warning') {\n    <fx-ui-hero-icon\n      icon=\"exclamation-triangle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-warning\"\n    ></fx-ui-hero-icon>\n    } @default {\n    <fx-ui-hero-icon\n      icon=\"information-circle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-information\"\n    ></fx-ui-hero-icon>\n    } }\n  </div>\n\n  <div class=\"flex flex-col\">\n    <strong *ngIf=\"title\" class=\"txt-field-label\">{{ title }}</strong>\n    <p class=\"txt-default\">{{ message }}</p>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["icon", "solid", "outline", "size", "color", "class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-toast', standalone: false, template: "<div\n  animate.enter=\"horizontal-fade-in-animation\"\n  animate.leave=\"horizontal-fade-out-animation\"\n  class=\"flex border-l-[3px] items-center bg-bg-primary gap-semi min-w-[250px] max-w-[320px] px-large py-semi rounded shadow-lg transition-all duration-300 ease-in-out transform opacity-100 translate-y-0\"\n  [ngClass]=\"{\n    'border-success': type === 'success',\n    'border-critical': type === 'error',\n    'border-warning': type === 'warning',\n    'border-information': type === 'info'\n  }\"\n>\n  <div class=\"\">\n    @switch (type) { @case('success') {\n    <fx-ui-hero-icon\n      icon=\"check-circle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-success\"\n    ></fx-ui-hero-icon>\n    } @case('error') {\n    <fx-ui-hero-icon\n      icon=\"exclamation-circle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-critical\"\n    ></fx-ui-hero-icon>\n    } @case('warning') {\n    <fx-ui-hero-icon\n      icon=\"exclamation-triangle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-warning\"\n    ></fx-ui-hero-icon>\n    } @default {\n    <fx-ui-hero-icon\n      icon=\"information-circle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-information\"\n    ></fx-ui-hero-icon>\n    } }\n  </div>\n\n  <div class=\"flex flex-col\">\n    <strong *ngIf=\"title\" class=\"txt-field-label\">{{ title }}</strong>\n    <p class=\"txt-default\">{{ message }}</p>\n  </div>\n</div>\n" }]
+        }], 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 !FxUtils.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 = false) {
+        switch (key.toLowerCase()) {
+            case 'error':
+            case 'failed':
+            case 'inactive':
+            case 'critical':
+                return 'critical';
+            case 'high':
+                if (isCriticalExist) {
+                    return 'danger';
+                }
+                return 'critical';
+            case 'inprogress':
+            case 'paused':
+            case 'medium':
+                return 'warning';
+            case 'completed':
+            case 'success':
+            case 'active':
+            case 'low':
+                return 'success';
+            case 'queue':
+            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;
+    }
+}
+
+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)));
+    }
+    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 = 1;
+    pageSize = 5;
+    filters = {};
+    loading = false;
+    expandedElement;
+    toastr;
+    _lock = false;
+    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.init();
+    }
+    init() { }
+    ngAfterViewInit() {
+        this.dataSource.paginator = this.paginator;
+        this.ref.detectChanges();
+    }
+    async refresh() {
+        this.page = 1;
+        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, pageSize: this.pageSize, ...this.filters };
+            const result = await this.api.search(params);
+            this.setDataSource(result);
+            this.ref.detectChanges();
+        }
+        catch (err) {
+            this.toastr.error(FxUtils.parseError(err), 'Error');
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    async onPageChange(event) {
+        this.page = event.pageIndex;
+        this.pageSize = event.pageSize;
+        await this.fetch();
+    }
+    resolve() {
+        return {};
+    }
+    empty() {
+        return {};
+    }
+    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: {
+                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: {
+                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,
+            },
+        });
+        instance.afterClosed().subscribe(() => {
+            this._lock = false;
+        });
+    }
+    async delete(model) {
+        if (this._lock) {
+            return;
+        }
+        this._lock = true;
+        const conf = _.get(this.config, 'delete');
+        const dialog = _.get(conf, 'dialog');
+        const dialogRef = this.modal.open(dialog, {
+            panelClass: 'fx-dialog',
+            autoFocus: false,
+            width: '400px',
+            data: {
+                title: _.get(conf, 'title'),
+                message: _.get(conf, 'message'),
+                cancelTitle: _.get(conf, 'cancelTitle'),
+                confirmTitle: _.get(conf, 'confirmTitle'),
+            },
+        });
+        dialogRef.afterClosed().subscribe(async (state) => {
+            if (state) {
+                try {
+                    await this.remove(model);
+                    this.refresh();
+                }
+                catch (err) {
+                    this.toastr.error(FxUtils.parseError(err), 'Error');
+                }
+                return;
+            }
+            this._lock = false;
+        });
+    }
+    async remove(model) {
+        try {
+            return await this.api.remove({ ...model });
+        }
+        catch (err) {
+            throw err;
+        }
+    }
+    value(model, key) {
+        return _.get(model, key);
+    }
+    toggleExpand(element) {
+        this.expandedElement = this.expandedElement === element ? null : element;
+    }
+    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;
+    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.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) {
+            return;
+        }
+        if (!this.disabled) {
+            if (!this.validate())
+                return;
+            if (_.isEmpty(this.model.id)) {
+                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(error);
+        })
+            .then(() => {
+            this.loading = false;
+        });
+    }
+    update(params = null) {
+        if (this.loading) {
+            return;
+        }
+        this.loading = true;
+        let code = _.get(this.model, 'code');
+        this.api
+            .update(code, { ...this.model, ...params })
+            .then(() => {
+            this.toastr.success(this.message);
+            this.ref.close(true);
+        }, (error) => {
+            this.toastr.error(error);
+        })
+            .then(() => {
+            this.loading = false;
+        });
+    }
+    updateData(params = null) {
+        if (this.loading) {
+            return;
+        }
+        this.loading = true;
+        this.api
+            .update({ ...this.model, ...params })
+            .then(() => {
+            this.toastr.success(this.message);
+            this.ref.close(true);
+        }, (error) => {
+            this.toastr.error(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 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: i2$2.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: i2$2.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(false);
+    isLoggedIn$ = this._isLoggedIn$.asObservable();
+    unauthorized$ = new Subject();
+    constructor() {
+        const saved = localStorage.getItem('isLoggedIn') === 'true';
+        this._isLoggedIn$.next(saved);
+    }
+    setLoggedIn(value) {
+        this._isLoggedIn$.next(value);
+        localStorage.setItem('isLoggedIn', String(value));
+    }
+    get isLoggedIn() {
+        return this._isLoggedIn$.value;
+    }
+    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'
+                }]
+        }] });
+
+const MATERIAL_MODULE = [
+    MatSelectModule,
+    MatRadioModule,
+    MatButtonModule,
+    MatIconModule,
+    MatPaginatorModule,
+    MatTableModule,
+    MatSnackBarModule,
+    MatDialogModule,
+    MatCheckboxModule,
+    MatCardModule,
+    MatDatepickerModule,
+    MatTimepickerModule,
+    MatBadgeModule,
+    MatExpansionModule,
+    MatFormFieldModule
+];
+
+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      <div>{{ label }}</div>\n    </div>\n  </ng-container>\n  }\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["icon", "solid", "outline", "size", "color", "class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-button', standalone: false, template: "<button\n  [class]=\"class\"\n  [ngClass]=\"{\n    'btn-default': buttonVariant === 'default',\n    'btn-primary': buttonVariant === 'primary',\n    'btn-alternative': buttonVariant === 'alternative',\n  }\"\n  [disabled]=\"disabled || loading\"\n  (click)=\"onClick()\"\n>\n  @if (loading) {\n  <div class=\"flex w-full items-center justify-center\">\n    <svg\n      [attr.fill]=\"\n        buttonVariant !== 'alternative' ? 'rgb(var(--text-primary))' : 'rgb(var(--primary))'\n      \"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <circle cx=\"4\" cy=\"12\" r=\"0\">\n        <animate\n          begin=\"0;spinner_z0Or.end\"\n          attributeName=\"r\"\n          calcMode=\"spline\"\n          dur=\"0.5s\"\n          keySplines=\".36,.6,.31,1\"\n          values=\"0;3\"\n          fill=\"freeze\"\n        />\n        <animate\n          begin=\"spinner_OLMs.end\"\n          attributeName=\"cx\"\n          calcMode=\"spline\"\n          dur=\"0.5s\"\n          keySplines=\".36,.6,.31,1\"\n          values=\"4;12\"\n          fill=\"freeze\"\n        />\n        <animate\n          begin=\"spinner_UHR2.end\"\n          attributeName=\"cx\"\n          calcMode=\"spline\"\n          dur=\"0.5s\"\n          keySplines=\".36,.6,.31,1\"\n          values=\"12;20\"\n          fill=\"freeze\"\n        />\n        <animate\n          id=\"spinner_lo66\"\n          begin=\"spinner_Aguh.end\"\n          attributeName=\"r\"\n          calcMode=\"spline\"\n          dur=\"0.5s\"\n          keySplines=\".36,.6,.31,1\"\n          values=\"3;0\"\n          fill=\"freeze\"\n        />\n        <animate\n          id=\"spinner_z0Or\"\n          begin=\"spinner_lo66.end\"\n          attributeName=\"cx\"\n          dur=\"0.001s\"\n          values=\"20;4\"\n          fill=\"freeze\"\n        />\n      </circle>\n      <circle cx=\"4\" cy=\"12\" r=\"3\">\n        <animate\n          begin=\"0;spinner_z0Or.end\"\n          attributeName=\"cx\"\n          calcMode=\"spline\"\n          dur=\"0.5s\"\n          keySplines=\".36,.6,.31,1\"\n          values=\"4;12\"\n          fill=\"freeze\"\n        />\n        <animate\n          begin=\"spinner_OLMs.end\"\n          attributeName=\"cx\"\n          calcMode=\"spline\"\n          dur=\"0.5s\"\n          keySplines=\".36,.6,.31,1\"\n          values=\"12;20\"\n          fill=\"freeze\"\n        />\n        <animate\n          id=\"spinner_JsnR\"\n          begin=\"spinner_UHR2.end\"\n          attributeName=\"r\"\n          calcMode=\"spline\"\n          dur=\"0.5s\"\n          keySplines=\".36,.6,.31,1\"\n          values=\"3;0\"\n          fill=\"freeze\"\n        />\n        <animate\n          id=\"spinner_Aguh\"\n          begin=\"spinner_JsnR.end\"\n          attributeName=\"cx\"\n          dur=\"0.001s\"\n          values=\"20;4\"\n          fill=\"freeze\"\n        />\n        <animate\n          begin=\"spinner_Aguh.end\"\n          attributeName=\"r\"\n          calcMode=\"spline\"\n          dur=\"0.5s\"\n          keySplines=\".36,.6,.31,1\"\n          values=\"0;3\"\n          fill=\"freeze\"\n        />\n      </circle>\n      <circle cx=\"12\" cy=\"12\" r=\"3\">\n        <animate\n          begin=\"0;spinner_z0Or.end\"\n          attributeName=\"cx\"\n          calcMode=\"spline\"\n          dur=\"0.5s\"\n          keySplines=\".36,.6,.31,1\"\n          values=\"12;20\"\n          fill=\"freeze\"\n        />\n        <animate\n          id=\"spinner_hSjk\"\n          begin=\"spinner_OLMs.end\"\n          attributeName=\"r\"\n          calcMode=\"spline\"\n          dur=\"0.5s\"\n          keySplines=\".36,.6,.31,1\"\n          values=\"3;0\"\n          fill=\"freeze\"\n        />\n        <animate\n          id=\"spinner_UHR2\"\n          begin=\"spinner_hSjk.end\"\n          attributeName=\"cx\"\n          dur=\"0.001s\"\n          values=\"20;4\"\n          fill=\"freeze\"\n        />\n        <animate\n          begin=\"spinner_UHR2.end\"\n          attributeName=\"r\"\n          calcMode=\"spline\"\n          dur=\"0.5s\"\n          keySplines=\".36,.6,.31,1\"\n          values=\"0;3\"\n          fill=\"freeze\"\n        />\n        <animate\n          begin=\"spinner_Aguh.end\"\n          attributeName=\"cx\"\n          calcMode=\"spline\"\n          dur=\"0.5s\"\n          keySplines=\".36,.6,.31,1\"\n          values=\"4;12\"\n          fill=\"freeze\"\n        />\n      </circle>\n      <circle cx=\"20\" cy=\"12\" r=\"3\">\n        <animate\n          id=\"spinner_4v5M\"\n          begin=\"0;spinner_z0Or.end\"\n          attributeName=\"r\"\n          calcMode=\"spline\"\n          dur=\"0.5s\"\n          keySplines=\".36,.6,.31,1\"\n          values=\"3;0\"\n          fill=\"freeze\"\n        />\n        <animate\n          id=\"spinner_OLMs\"\n          begin=\"spinner_4v5M.end\"\n          attributeName=\"cx\"\n          dur=\"0.001s\"\n          values=\"20;4\"\n          fill=\"freeze\"\n        />\n        <animate\n          begin=\"spinner_OLMs.end\"\n          attributeName=\"r\"\n          calcMode=\"spline\"\n          dur=\"0.5s\"\n          keySplines=\".36,.6,.31,1\"\n          values=\"0;3\"\n          fill=\"freeze\"\n        />\n        <animate\n          begin=\"spinner_UHR2.end\"\n          attributeName=\"cx\"\n          calcMode=\"spline\"\n          dur=\"0.5s\"\n          keySplines=\".36,.6,.31,1\"\n          values=\"4;12\"\n          fill=\"freeze\"\n        />\n        <animate\n          begin=\"spinner_Aguh.end\"\n          attributeName=\"cx\"\n          calcMode=\"spline\"\n          dur=\"0.5s\"\n          keySplines=\".36,.6,.31,1\"\n          values=\"12;20\"\n          fill=\"freeze\"\n        />\n      </circle>\n    </svg>\n  </div>\n  } @else {\n  <ng-container>\n    <div class=\"flex items-center justify-center gap-small\">\n      @if(icon) {<fx-ui-hero-icon [icon]=\"icon\" [size]=\"20\" class=\"flex\" [ngClass]=\"{\n        'text-text-inverse': buttonVariant !== 'default',\n        'text-text-primary': buttonVariant === 'alternative'\n      }\"></fx-ui-hero-icon>}\n      <div>{{ label }}</div>\n    </div>\n  </ng-container>\n  }\n</button>\n" }]
+        }], 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;
+    type = 'auto';
+    data;
+    options;
+    palette;
+    height = '400px';
+    loading = false;
+    chartClick = new EventEmitter();
+    chartInit = new EventEmitter();
+    labelFontSize = 12;
+    labelFontFamily = 'BeVietnamProRegular';
+    chartOptions = {};
+    chartInstance;
+    resizeObserver;
+    constructor(ref, cdr) {
+        this.ref = ref;
+        this.cdr = cdr;
+    }
+    ngAfterViewInit() {
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this.chartInstance)
+                this.chartInstance.resize();
+        });
+        this.resizeObserver.observe(this.ref.nativeElement);
+    }
+    ngOnDestroy() {
+        if (this.resizeObserver)
+            this.resizeObserver.disconnect();
+    }
+    ngOnChanges() {
+        this.rebuildChart();
+    }
+    onThemeChange() {
+        requestAnimationFrame(() => {
+            this.rebuildChart();
+        });
+    }
+    onChartClick(event) {
+        this.chartClick.emit(event);
+    }
+    onChartInit(chart) {
+        this.chartInstance = chart;
+        this.chartInit.emit(chart);
+        requestAnimationFrame(() => this.chartInstance?.resize());
+        setTimeout(() => this.chartInstance?.resize(), 100);
+    }
+    rebuildChart() {
+        this.chartOptions = this.buildOptions();
+        if (this.chartInstance) {
+            this.chartInstance.clear();
+            this.chartInstance.setOption(this.chartOptions, true);
+        }
+        this.cdr.detectChanges();
+    }
+    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: {
+                    fontFamily: this.labelFontFamily,
+                    fontSize: this.labelFontSize,
+                    color: FxUtils.convertColorFromVariable('--text-secondary'),
+                },
+                axisLine: {
+                    lineStyle: { color: FxUtils.convertColorFromVariable('--border-strong') },
+                },
+                splitLine: { show: false },
+            },
+            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 || [],
+                    label: {
+                        show: true,
+                        position: 'top',
+                        fontFamily: this.labelFontFamily,
+                        fontSize: this.labelFontSize,
+                        color: FxUtils.convertColorFromVariable('--text-primary'),
+                        textBorderWidth: 0,
+                        textBorderColor: 'transparent',
+                    },
+                    emphasis: { itemStyle: { opacity: 0.8 } },
+                },
+            ],
+        }),
+        pie: (data, colors) => ({
+            color: colors,
+            tooltip: { trigger: 'item' },
+            legend: {
+                orient: 'vertical',
+                top: 'bottom',
+                right: 10,
+                textStyle: {
+                    fontFamily: "BeVietnamProRegular",
+                    color: FxUtils.convertColorFromVariable('--text-primary'),
+                    fontSize: 12,
+                    fontWeight: 500,
+                },
+                icon: 'circle',
+                itemGap: 8,
+                padding: 0,
+            },
+            series: [
+                {
+                    type: 'pie',
+                    radius: ['40%', '70%'],
+                    avoidLabelOverlap: true,
+                    data,
+                    label: {
+                        //{a}	Series name
+                        //{b}	Data name (slice label)
+                        //{c}	Data value
+                        //{d}	Percentage
+                        formatter: '{b}: {c}',
+                        fontSize: this.labelFontSize,
+                        fontFamily: this.labelFontFamily,
+                        color: FxUtils.convertColorFromVariable('--text-primary'),
+                        textBorderWidth: 0,
+                        textBorderColor: 'transparent',
+                    },
+                    labelLine: {
+                        show: true,
+                        length: 15,
+                        length2: 15,
+                    },
+                    itemStyle: {
+                        borderWidth: 0,
+                    },
+                    emphasis: {
+                        scale: true,
+                        scaleSize: 10,
+                        itemStyle: { borderWidth: 0 },
+                        label: { textBorderWidth: 0 },
+                    },
+                },
+            ],
+        }),
+        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',
+                    },
+                },
+            ],
+        }),
+    };
+    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) && this.data[0]?.value && this.data[0]?.name)
+            return 'pie';
+        return 'bar';
+    }
+    buildOptions() {
+        const chartType = this.detectType();
+        const palette = this.resolvePalette();
+        const baseBuilder = this.registry[chartType];
+        const baseOptions = baseBuilder ? baseBuilder(this.data, palette) : {};
+        const textColor = FxUtils.convertColorFromVariable('--text-primary');
+        const mergedOptions = {
+            legend: {
+                textStyle: {
+                    fontFamily: this.labelFontFamily,
+                    color: textColor,
+                    fontSize: this.labelFontSize,
+                    fontWeight: 500,
+                },
+                icon: 'circle',
+                itemGap: 16,
+            },
+            ...baseOptions,
+            ...this.options,
+        };
+        return mergedOptions;
+    }
+    resolvePalette() {
+        const defaultPalette = [
+            'rgba(var(--critical) / 1)',
+            'rgba(var(--danger) / 1)',
+            'rgba(var(--warning) / 1)',
+            'rgba(var(--success) / 1)',
+            'rgba(var(--information) / 1)',
+            'rgba(var(--discovery) / 1)',
+        ];
+        const palette = !this.palette || this.palette.length === 0 ? defaultPalette : this.palette;
+        return palette.map((raw) => {
+            if (raw.includes('var(')) {
+                const cssVar = raw.match(/var\((.*?)\)/)?.[1];
+                const opacityMatch = raw.match(/\/\s*([\d.]+)/);
+                const opacity = opacityMatch ? parseFloat(opacityMatch[1]) : 1;
+                const rgb = getComputedStyle(document.body)
+                    .getPropertyValue(cssVar || '')
+                    .trim()
+                    .replace(/\s+/g, ',');
+                return `rgba(${rgb}, ${opacity})`;
+            }
+            return raw;
+        });
+    }
+    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" }, outputs: { chartClick: "chartClick", chartInit: "chartInit" }, host: { listeners: { "window:theme-changed": "onThemeChange()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-wrapper\" [style.height]=\"height\" [class.loading]=\"loading\">\n  <div\n    echarts\n    [options]=\"chartOptions\"\n    (chartInit)=\"onChartInit($event)\"\n    (chartClick)=\"onChartClick($event)\"\n    class=\"w-full h-full\">\n  </div>\n\n  <div class=\"chart-loader\" *ngIf=\"loading\">\n    <span class=\"txt-default\">Loading...</span>\n  </div>\n</div>", styles: [".chart-wrapper{position:relative;width: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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.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\" [class.loading]=\"loading\">\n  <div\n    echarts\n    [options]=\"chartOptions\"\n    (chartInit)=\"onChartInit($event)\"\n    (chartClick)=\"onChartClick($event)\"\n    class=\"w-full h-full\">\n  </div>\n\n  <div class=\"chart-loader\" *ngIf=\"loading\">\n    <span class=\"txt-default\">Loading...</span>\n  </div>\n</div>", styles: [".chart-wrapper{position:relative;width: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
+            }], 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;
+        control.setErrors(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}`,
+        };
+        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 = true;
+    size = 'normal';
+    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: "14.0.0", version: "20.3.4", type: CheckboxComponent, isStandalone: false, selector: "fx-ui-checkbox", inputs: { label: "label", disabled: "disabled", rounded: "rounded", size: "size" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<label\n  class=\"inline-flex items-center gap-normal cursor-pointer select-none\"\n  [class.opacity-50]=\"disabled\"\n  [class.cursor-not-allowed]=\"disabled\"\n>\n  <input\n    type=\"checkbox\"\n    class=\"hidden\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onTouched()\"\n  />\n  <span\n    class=\"relative flex items-center justify-center border rounded-full transition-colors duration-150 shrink-0\"\n    [class]=\"rounded ? 'rounded-full' : 'rounded-sm'\"\n    [class]=\"size === 'large' ? 'w-6 h-6' : 'w-4 h-4'\"\n    [ngClass]=\"{\n      'border-border-strong bg-transparent': !value,\n      'border-border-selected bg-border-selected': value\n    }\"\n  >\n    <!-- Keep SVG space reserved always -->\n    <span class=\"absolute inset-0 flex items-center justify-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"text-bg-primary transition-opacity duration-150\"\n        [class]=\"size === 'large' ? 'w-4.5 h-4.5' : 'w-3 h-3'\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        [style.opacity]=\"value ? 1 : 0\"\n      >\n        <path d=\"M5 13l4 4L19 7\" />\n      </svg>\n    </span>\n  </span>\n\n  <span class=\"mb-0 txt-field-label\">{{ label }}</span>\n</label>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-checkbox', standalone: false, template: "<label\n  class=\"inline-flex items-center gap-normal cursor-pointer select-none\"\n  [class.opacity-50]=\"disabled\"\n  [class.cursor-not-allowed]=\"disabled\"\n>\n  <input\n    type=\"checkbox\"\n    class=\"hidden\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onTouched()\"\n  />\n  <span\n    class=\"relative flex items-center justify-center border rounded-full transition-colors duration-150 shrink-0\"\n    [class]=\"rounded ? 'rounded-full' : 'rounded-sm'\"\n    [class]=\"size === 'large' ? 'w-6 h-6' : 'w-4 h-4'\"\n    [ngClass]=\"{\n      'border-border-strong bg-transparent': !value,\n      'border-border-selected bg-border-selected': value\n    }\"\n  >\n    <!-- Keep SVG space reserved always -->\n    <span class=\"absolute inset-0 flex items-center justify-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"text-bg-primary transition-opacity duration-150\"\n        [class]=\"size === 'large' ? 'w-4.5 h-4.5' : 'w-3 h-3'\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        [style.opacity]=\"value ? 1 : 0\"\n      >\n        <path d=\"M5 13l4 4L19 7\" />\n      </svg>\n    </span>\n  </span>\n\n  <span class=\"mb-0 txt-field-label\">{{ label }}</span>\n</label>\n" }]
+        }], ctorParameters: () => [{ type: i1$3.NgControl }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class DatetimePicker extends FxComponent {
+    ref;
+    label;
+    placeholder = 'Select date and time';
+    required = false;
+    showTime = true;
+    format = 'YYYY-MM-DD HH:mm:ss';
+    disabled = false;
+    errorMessages = {};
+    validateFn;
+    constructor(ngControl, ref) {
+        super(ngControl);
+        this.ref = ref;
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.ref.detectChanges();
+        });
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onBlur() {
+        this.onTouched();
+        this.validate(this.validateFn);
+    }
+    writeValue(value) {
+        this.value = 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: "14.0.0", version: "20.3.4", type: DatetimePicker, isStandalone: false, selector: "fx-ui-datetime-picker", inputs: { label: "label", placeholder: "placeholder", required: "required", showTime: "showTime", format: "format", disabled: "disabled", errorMessages: "errorMessages", validateFn: "validateFn" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col mb-4 w-full text-left\">\n  <label *ngIf=\"label\" class=\"txt-field-label\">\n    {{ label }}\n    <span *ngIf=\"required\" class=\"txt-required\">*</span>\n  </label>\n\n  <div class=\"relative\">\n    <input\n      [owlDateTimeTrigger]=\"picker\"\n      [owlDateTime]=\"picker\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      (blur)=\"onBlur()\"\n      [value]=\"value\"\n      readonly\n      class=\"input-default\"\n    />\n  </div>\n  <owl-date-time\n    #picker\n    [pickerType]=\"showTime ? 'both' : 'calendar'\"\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(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-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 .owl-dt-calendar-cell{border-radius:.375rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(var(--text-secondary) / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell:hover{background-color:#ef444433}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-selected{--tw-bg-opacity: 1;background-color:rgb(var(--border-selected) / var(--tw-bg-opacity, 1));font-weight:400;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected){border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-selected) / var(--tw-border-opacity, 1))}::ng-deep .owl-dt-timer-content .owl-dt-timer-input{border-radius:.5rem;--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 button{height:2.25rem;--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));padding-top:1rem;padding-bottom:1rem}::ng-deep .owl-dt-container-control-button .owl-dt-control-button-content{margin-bottom:1rem;--tw-text-opacity: 1;color:rgb(var(--primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-control-content .owl-dt-control-button-content{--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-header{margin-bottom:.5rem;text-align:center;font-size:.875rem;line-height:1.25rem;font-weight:600;--tw-text-opacity: 1;color:rgb(var(--text-secondary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-table th{font-size:.75rem;line-height:1rem;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"] }], 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  <label *ngIf=\"label\" class=\"txt-field-label\">\n    {{ label }}\n    <span *ngIf=\"required\" class=\"txt-required\">*</span>\n  </label>\n\n  <div class=\"relative\">\n    <input\n      [owlDateTimeTrigger]=\"picker\"\n      [owlDateTime]=\"picker\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      (blur)=\"onBlur()\"\n      [value]=\"value\"\n      readonly\n      class=\"input-default\"\n    />\n  </div>\n  <owl-date-time\n    #picker\n    [pickerType]=\"showTime ? 'both' : 'calendar'\"\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(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-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 .owl-dt-calendar-cell{border-radius:.375rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(var(--text-secondary) / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell:hover{background-color:#ef444433}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-selected{--tw-bg-opacity: 1;background-color:rgb(var(--border-selected) / var(--tw-bg-opacity, 1));font-weight:400;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected){border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-selected) / var(--tw-border-opacity, 1))}::ng-deep .owl-dt-timer-content .owl-dt-timer-input{border-radius:.5rem;--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 button{height:2.25rem;--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));padding-top:1rem;padding-bottom:1rem}::ng-deep .owl-dt-container-control-button .owl-dt-control-button-content{margin-bottom:1rem;--tw-text-opacity: 1;color:rgb(var(--primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-control-content .owl-dt-control-button-content{--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-header{margin-bottom:.5rem;text-align:center;font-size:.875rem;line-height:1.25rem;font-weight:600;--tw-text-opacity: 1;color:rgb(var(--text-secondary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-table th{font-size:.75rem;line-height:1rem;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
+            }], showTime: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], disabled: [{
+                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 = ''; // allow reselect same file
+    }
+    processFiles(files) {
+        const valid = [];
+        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;
+            }
+            valid.push(file);
+        }
+        if (valid.length) {
+            this.fileDrop.emit(valid);
+            this.onUpload(valid);
+        }
+    }
+    onUpload(files) {
+        console.log('Uploading files:', files);
+        this.uploadComplete.emit(files);
+    }
+    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 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      [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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-input', standalone: false, template: "<div class=\"mb-4 text-left w-full text-text-primary\" [class]=\"class\">\n  @if(label){<label class=\"block txt-field-label\">\n    {{ label }}\n    @if (required) {<span class=\"txt-required\">*</span>}\n  </label>\n  }\n\n  <div class=\"relative\">\n    <input\n      [type]=\"displayType\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [value]=\"value\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      [attr.maxlength]=\"maxlength\"\n      [class]=\"type === 'otp' ? 'input-otp' : 'input-default'\"\n      [ngClass]=\"{\n        'input-invalid': invalid,\n        'pr-8': type === 'password' || suffixIcon,\n        'txt-otp-input': type === 'otp'\n      }\"\n    />\n    <button\n      type=\"button\"\n      class=\"absolute inset-y-0 right-2 flex items-center text-text-primary hover:text-text-secondary\"\n      (click)=\"onSuffixClick()\"\n      [disabled]=\"disabled\"\n    >\n      @if (type === 'password') {\n      <i class=\"material-symbols-outlined text-lg select-none\">{{\n        showPassword ? 'visibility_off' : 'visibility'\n      }}</i>\n      } @else if (suffixIcon) {\n      <i [class]=\"iconClass\" class=\"text-lg select-none\">{{ suffixIcon }}</i>\n      }\n    </button>\n  </div>\n\n  @if (invalid){\n  <div class=\"txt-invalid\">\n    {{ getErrorMessage(label) }}\n  </div>\n  }\n</div>\n" }]
+        }], 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 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;
+    constructor(ngControl, ref) {
+        super(ngControl);
+        this.ref = ref;
+    }
+    ngAfterViewInit() {
+        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" }, usesInheritance: true, ngImport: i0, template: "<div class=\"mb-4 text-left w-full\" [class]=\"class\">\n  <label *ngIf=\"label\" class=\"block txt-field-label\">\n    {{ label }}\n    @if(required) {<span class=\"txt-required\">*</span>}\n  </label>\n\n  <mat-form-field class=\"fx-select-field w-full shadow-sm\" appearance=\"fill\">\n    <mat-select\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [multiple]=\"multiple\"\n      [value]=\"value\"\n      (selectionChange)=\"onSelectionChange($event.value)\"\n      (blur)=\"onTouched()\"\n    >\n      <mat-option *ngFor=\"let option of options\" [value]=\"option.value\">\n        <span class=\"txt-default\">{{ option.label }}</span>\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <div *ngIf=\"invalid\" class=\"txt-invalid text-left\">\n    {{ getErrorMessage(label) }}\n  </div>\n</div>\n", styles: ["::ng-deep .fx-select-field{display:block!important;width:100%!important;margin:0!important;padding:0!important;border-radius:.75rem;box-shadow:0 1px 1px rgb(var(--border-default))}::ng-deep .fx-select-field .mat-mdc-form-field-wrapper,::ng-deep .fx-select-field .mat-mdc-text-field-wrapper{padding:0!important;margin:0!important;width:100%!important}::ng-deep .fx-select-field .mdc-text-field{width:100%!important;margin:0!important;padding:0!important;--mdc-shape-small: 0 !important}::ng-deep .fx-select-field .mat-mdc-form-field-flex{width:100%!important;margin:0!important;padding:0 .75rem!important;border:1px solid rgb(var(--border-default));border-radius:.5rem;height:36px!important;align-items:center;background-color:rgb(var(--bg-primary))}::ng-deep .fx-select-field .mdc-notched-outline,::ng-deep .fx-select-field .mat-mdc-form-field-subscript-wrapper{display:none!important}::ng-deep .fx-select-field.mat-focused .mat-mdc-form-field-flex{border:2px solid rgb(var(--border-interactive))!important;outline:none!important;border-radius:.5rem}::ng-deep .fx-select-field.mat-form-field-invalid .mat-mdc-form-field-flex{border-color:#ef4444!important;box-shadow:none!important}::ng-deep .fx-select-field .mat-mdc-select-trigger{padding:0!important;margin:0!important}::ng-deep .fx-select-field .mat-mdc-select-arrow-wrapper{margin-right:0!important}::ng-deep .fx-select-field .mat-mdc-select-arrow-wrapper{color:rgb(var(--text-primary))}::ng-deep .mat-mdc-select-panel{background-color:rgb(var(--bg-primary))!important;border:1px solid rgb(var(--border-default))!important;border-radius:.5rem!important;box-shadow:0 2px 4px #0000001a!important}::ng-deep .fx-select-field .mat-mdc-select-placeholder{color:rgb(var(--text-placeholder))!important;font-size:14px}::ng-deep .fx-select-field .mat-mdc-select-value{color:rgb(var(--text-primary))!important;font-size:14px;font-weight:400}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-select', standalone: false, template: "<div class=\"mb-4 text-left w-full\" [class]=\"class\">\n  <label *ngIf=\"label\" class=\"block txt-field-label\">\n    {{ label }}\n    @if(required) {<span class=\"txt-required\">*</span>}\n  </label>\n\n  <mat-form-field class=\"fx-select-field w-full shadow-sm\" appearance=\"fill\">\n    <mat-select\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [multiple]=\"multiple\"\n      [value]=\"value\"\n      (selectionChange)=\"onSelectionChange($event.value)\"\n      (blur)=\"onTouched()\"\n    >\n      <mat-option *ngFor=\"let option of options\" [value]=\"option.value\">\n        <span class=\"txt-default\">{{ option.label }}</span>\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <div *ngIf=\"invalid\" class=\"txt-invalid text-left\">\n    {{ getErrorMessage(label) }}\n  </div>\n</div>\n", styles: ["::ng-deep .fx-select-field{display:block!important;width:100%!important;margin:0!important;padding:0!important;border-radius:.75rem;box-shadow:0 1px 1px rgb(var(--border-default))}::ng-deep .fx-select-field .mat-mdc-form-field-wrapper,::ng-deep .fx-select-field .mat-mdc-text-field-wrapper{padding:0!important;margin:0!important;width:100%!important}::ng-deep .fx-select-field .mdc-text-field{width:100%!important;margin:0!important;padding:0!important;--mdc-shape-small: 0 !important}::ng-deep .fx-select-field .mat-mdc-form-field-flex{width:100%!important;margin:0!important;padding:0 .75rem!important;border:1px solid rgb(var(--border-default));border-radius:.5rem;height:36px!important;align-items:center;background-color:rgb(var(--bg-primary))}::ng-deep .fx-select-field .mdc-notched-outline,::ng-deep .fx-select-field .mat-mdc-form-field-subscript-wrapper{display:none!important}::ng-deep .fx-select-field.mat-focused .mat-mdc-form-field-flex{border:2px solid rgb(var(--border-interactive))!important;outline:none!important;border-radius:.5rem}::ng-deep .fx-select-field.mat-form-field-invalid .mat-mdc-form-field-flex{border-color:#ef4444!important;box-shadow:none!important}::ng-deep .fx-select-field .mat-mdc-select-trigger{padding:0!important;margin:0!important}::ng-deep .fx-select-field .mat-mdc-select-arrow-wrapper{margin-right:0!important}::ng-deep .fx-select-field .mat-mdc-select-arrow-wrapper{color:rgb(var(--text-primary))}::ng-deep .mat-mdc-select-panel{background-color:rgb(var(--bg-primary))!important;border:1px solid rgb(var(--border-default))!important;border-radius:.5rem!important;box-shadow:0 2px 4px #0000001a!important}::ng-deep .fx-select-field .mat-mdc-select-placeholder{color:rgb(var(--text-placeholder))!important;font-size:14px}::ng-deep .fx-select-field .mat-mdc-select-value{color:rgb(var(--text-primary))!important;font-size:14px;font-weight:400}\n"] }]
+        }], 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
+            }] } });
+
+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 inline-flex items-center w-10 h-5 rounded-full transition-colors duration-300 cursor-pointer\"\n  [ngClass]=\"{\n    'bg-success': value && !disabled,\n    'bg-button-default': !value && !disabled,\n    'bg-bg-hover': disabled\n  }\"\n  (click)=\"toggle()\"\n>\n  @if(value) {\n    <i style=\"font-size: 20px;\" class=\"material-symbols-outlined absolute left-0.5 top-0 text-text-inverse\">check</i>\n    \n  }\n  @if(!value) {\n    <i style=\"font-size: 20px;\" class=\"material-symbols-outlined absolute right-0.5 top-0 text-text-inverse\">close</i>\n  }\n  <div\n    class=\"absolute top-0.5 left-0.5 w-4 h-4 bg-text-inverse rounded-full shadow-md transform transition-transform duration-300\"\n    [ngClass]=\"{ 'translate-x-5': value }\"\n  ></div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SwitchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-switch', standalone: false, template: "<div\n  class=\"relative inline-flex items-center w-10 h-5 rounded-full transition-colors duration-300 cursor-pointer\"\n  [ngClass]=\"{\n    'bg-success': value && !disabled,\n    'bg-button-default': !value && !disabled,\n    'bg-bg-hover': disabled\n  }\"\n  (click)=\"toggle()\"\n>\n  @if(value) {\n    <i style=\"font-size: 20px;\" class=\"material-symbols-outlined absolute left-0.5 top-0 text-text-inverse\">check</i>\n    \n  }\n  @if(!value) {\n    <i style=\"font-size: 20px;\" class=\"material-symbols-outlined absolute right-0.5 top-0 text-text-inverse\">close</i>\n  }\n  <div\n    class=\"absolute top-0.5 left-0.5 w-4 h-4 bg-text-inverse rounded-full shadow-md transform transition-transform duration-300\"\n    [ngClass]=\"{ 'translate-x-5': value }\"\n  ></div>\n</div>\n" }]
+        }], 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;line-height:1.25rem;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;line-height:1.25rem;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 TagComponent {
+    label;
+    type = 'default';
+    rounded = true;
+    icon;
+    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" }, ngImport: i0, template: "<div\n  class=\"flex flex-row gap-1\"\n  [class]=\"rounded ? 'tag-round' : 'tag-square'\"\n  [ngClass]=\"{\n    'tag-critical': type === 'critical',\n    'tag-success': type === 'success',\n    'tag-warning': type === 'warning',\n    'tag-information': type === 'information',\n    'tag-discovery': type === 'discovery',\n    'tag-danger': type === 'danger',\n    'tag-default': type === 'default'\n  }\"\n>\n  @if(icon){<fx-ui-hero-icon\n    class=\"flex\"\n    [icon]=\"icon\"\n    [size]=\"18\"\n    [ngClass]=\"{\n    'text-critical': type === 'critical',\n    'text-success': type === 'success',\n    'text-warning': type === 'warning',\n    'text-information': type === 'information',\n    'text-discovery': type === 'discovery',\n    'text-danger': type === 'danger',\n    'text-text-primary': type === 'default',\n  }\"\n  ></fx-ui-hero-icon\n  >}\n\n  <div\n    [ngClass]=\"{\n      'txt-tag-critical': type === 'critical',\n      'txt-tag-success': type === 'success',\n      'txt-tag-warning': type === 'warning',\n      'txt-tag-information': type === 'information',\n      'txt-tag-discovery': type === 'discovery',\n      'txt-tag-danger': type === 'danger',\n      'txt-tag-default': type === 'default',\n    }\"\n  >\n    {{ label }}\n  </div>\n</div>\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: TagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-tag', standalone: false, template: "<div\n  class=\"flex flex-row gap-1\"\n  [class]=\"rounded ? 'tag-round' : 'tag-square'\"\n  [ngClass]=\"{\n    'tag-critical': type === 'critical',\n    'tag-success': type === 'success',\n    'tag-warning': type === 'warning',\n    'tag-information': type === 'information',\n    'tag-discovery': type === 'discovery',\n    'tag-danger': type === 'danger',\n    'tag-default': type === 'default'\n  }\"\n>\n  @if(icon){<fx-ui-hero-icon\n    class=\"flex\"\n    [icon]=\"icon\"\n    [size]=\"18\"\n    [ngClass]=\"{\n    'text-critical': type === 'critical',\n    'text-success': type === 'success',\n    'text-warning': type === 'warning',\n    'text-information': type === 'information',\n    'text-discovery': type === 'discovery',\n    'text-danger': type === 'danger',\n    'text-text-primary': type === 'default',\n  }\"\n  ></fx-ui-hero-icon\n  >}\n\n  <div\n    [ngClass]=\"{\n      'txt-tag-critical': type === 'critical',\n      'txt-tag-success': type === 'success',\n      'txt-tag-warning': type === 'warning',\n      'txt-tag-information': type === 'information',\n      'txt-tag-discovery': type === 'discovery',\n      'txt-tag-danger': type === 'danger',\n      'txt-tag-default': type === 'default',\n    }\"\n  >\n    {{ label }}\n  </div>\n</div>\n" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }] } });
+
+const FX_COMPONENTS = [
+    InputComponent,
+    SelectComponent,
+    RadioButtonComponent,
+    CheckboxComponent,
+    DndUploadComponent,
+    ButtonComponent,
+    RadioButtonToggleComponent,
+    DatetimePicker,
+    LoadingPanel,
+    SearchBarComponent,
+    TabGroupComponent,
+    TabComponent,
+    HeroIconComponent,
+    ToastComponent,
+    ToastContainerComponent,
+    TagComponent,
+    ChartComponent,
+    SliderComponent,
+    SwitchComponent
+];
+
+class ConfirmationDialogComponent {
+    ref;
+    title = '';
+    message = '';
+    cancelLabel = 'Cancel';
+    confirmLabel = 'Submit';
+    constructor(ref, bindings) {
+        this.ref = ref;
+        this.title = _.get(bindings, 'title');
+        this.message = _.get(bindings, 'message');
+        this.cancelLabel = _.get(bindings, 'cancelLabel');
+        this.confirmLabel = _.get(bindings, 'confirmLabel');
+    }
+    accept() {
+        this.ref.close(true);
+    }
+    cancel() {
+        this.ref.close(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ConfirmationDialogComponent, isStandalone: false, selector: "ui-confirmation", ngImport: i0, template: "<div animate.enter=\"fade-in-animation\">\n  <div class=\"txt-section-header px-2xl py-semi\">{{title}}</div>\n  <mat-dialog-content>\n    <div class=\"txt-default\">{{message}}</div>\n  </mat-dialog-content>\n  <mat-dialog-actions align=\"end\">\n    <fx-ui-button class=\"mr-1\" [label]=\"cancelLabel\" (clicked)=\"cancel()\"></fx-ui-button>\n    <fx-ui-button buttonVariant=\"primary\" class=\"mr-1\" [label]=\"confirmLabel\" (clicked)=\"accept()\"></fx-ui-button>\n  </mat-dialog-actions>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: ButtonComponent, selector: "fx-ui-button", inputs: ["label", "disabled", "buttonVariant", "icon", "class", "loading"], outputs: ["clicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-confirmation', standalone: false, template: "<div animate.enter=\"fade-in-animation\">\n  <div class=\"txt-section-header px-2xl py-semi\">{{title}}</div>\n  <mat-dialog-content>\n    <div class=\"txt-default\">{{message}}</div>\n  </mat-dialog-content>\n  <mat-dialog-actions align=\"end\">\n    <fx-ui-button class=\"mr-1\" [label]=\"cancelLabel\" (clicked)=\"cancel()\"></fx-ui-button>\n    <fx-ui-button buttonVariant=\"primary\" class=\"mr-1\" [label]=\"confirmLabel\" (clicked)=\"accept()\"></fx-ui-button>\n  </mat-dialog-actions>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
+const DIALOGS_COMPONENT = [
+    ConfirmationDialogComponent
+];
+
+const MY_FORMATS = {
+    parseInput: 'YYYY-MM-DD HH:mm:ss',
+    fullPickerInput: 'YYYY-MM-DD HH:mm:ss',
+    datePickerInput: 'YYYY-MM-DD HH:mm:ss',
+    timePickerInput: 'HH:mm:ss',
+    monthYearLabel: 'MMM YYYY',
+    dateA11yLabel: 'YYYY-MM-DD HH:mm:ss',
+    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, ConfirmationDialogComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            OwlDateTimeModule,
+            OwlNativeDateTimeModule,
+            HasPermissionDirective,
+            NgHeroiconsModule, i2$3.NgxEchartsModule, i3$1.MatSelectModule, i23.MatRadioModule, i24.MatButtonModule, i25.MatIconModule, i26.MatPaginatorModule, i27.MatTableModule, i28.MatSnackBarModule, i1$1.MatDialogModule, i30.MatCheckboxModule, i31.MatCardModule, i32.MatDatepickerModule, i33.MatTimepickerModule, i34.MatBadgeModule, i35.MatExpansionModule, i36.MatFormFieldModule], exports: [InputComponent, SelectComponent, RadioButtonComponent, CheckboxComponent, DndUploadComponent, ButtonComponent, RadioButtonToggleComponent, DatetimePicker, LoadingPanel, SearchBarComponent, TabGroupComponent, TabComponent, HeroIconComponent, ToastComponent, ToastContainerComponent, TagComponent, ChartComponent, SliderComponent, SwitchComponent, ConfirmationDialogComponent, 
+            // Module
+            FormsModule,
+            ReactiveFormsModule,
+            OwlDateTimeModule,
+            OwlNativeDateTimeModule,
+            HasPermissionDirective,
+            NgHeroiconsModule, i3$1.MatSelectModule, i23.MatRadioModule, i24.MatButtonModule, i25.MatIconModule, i26.MatPaginatorModule, i27.MatTableModule, i28.MatSnackBarModule, i1$1.MatDialogModule, i30.MatCheckboxModule, i31.MatCardModule, i32.MatDatepickerModule, i33.MatTimepickerModule, i34.MatBadgeModule, i35.MatExpansionModule, i36.MatFormFieldModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: UiModule, providers: [
+            importProvidersFrom(NgHeroiconsModule.forRoot()),
+            // { provide: OWL_DATE_TIME_FORMATS, useValue: MY_FORMATS },
+        ], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            OwlDateTimeModule,
+            OwlNativeDateTimeModule,
+            NgHeroiconsModule,
+            NgxEchartsModule.forRoot({ echarts: () => import('echarts') }), MATERIAL_MODULE, 
+            // Module
+            FormsModule,
+            ReactiveFormsModule,
+            OwlDateTimeModule,
+            OwlNativeDateTimeModule,
+            NgHeroiconsModule, i3$1.MatSelectModule, i23.MatRadioModule, i24.MatButtonModule, i25.MatIconModule, i26.MatPaginatorModule, i27.MatTableModule, i28.MatSnackBarModule, i1$1.MatDialogModule, i30.MatCheckboxModule, i31.MatCardModule, i32.MatDatepickerModule, i33.MatTimepickerModule, i34.MatBadgeModule, i35.MatExpansionModule, i36.MatFormFieldModule] });
+}
+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,
+                        OwlDateTimeModule,
+                        OwlNativeDateTimeModule,
+                        HasPermissionDirective,
+                        NgHeroiconsModule,
+                        NgxEchartsModule.forRoot({ echarts: () => import('echarts') }),
+                        ...MATERIAL_MODULE,
+                    ],
+                    exports: [
+                        // Component
+                        ...FX_COMPONENTS,
+                        ...DIALOGS_COMPONENT,
+                        // Module
+                        FormsModule,
+                        ReactiveFormsModule,
+                        OwlDateTimeModule,
+                        OwlNativeDateTimeModule,
+                        HasPermissionDirective,
+                        NgHeroiconsModule,
+                        ...MATERIAL_MODULE,
+                    ],
+                    providers: [
+                        importProvidersFrom(NgHeroiconsModule.forRoot()),
+                        // { provide: OWL_DATE_TIME_FORMATS, useValue: MY_FORMATS },
+                    ],
+                }]
+        }] });
+
+/*
+ * Public API Surface of ui
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AuthInterceptor, AuthStateService, BaseComponent, BaseDialogComponent, BaseResolver, BaseTableComponent, BreadcrumbService, ButtonComponent, ChartComponent, CheckboxComponent, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, FxLoadingService, FxStorageService, FxToastrService, FxUtils, HasPermissionDirective, HeroIconComponent, HttpLoaderFactory, HttpWrapper, InputComponent, LoadingPanel, MY_FORMATS, PermissionGuard, PermissionService, RadioButtonComponent, RadioButtonToggleComponent, SearchBarComponent, SelectComponent, SliderComponent, SwitchComponent, TabComponent, TabGroupComponent, TagComponent, ToastComponent, ToastContainerComponent, TranslationModule, TranslationService, UiModule };
+//# sourceMappingURL=fxlt-common-ui.mjs.map