@foxeltech/angular-ui 0.0.6 → 0.0.8

package/fesm2022/foxeltech-angular-ui.mjs

@@ -156,6 +156,7 @@ class FxToastrService {
     appRef;
     containerRef;
     idCounter = 0;
+    recentMessages = new Set();
     constructor(appRef) {
         this.appRef = appRef;
         this.ensureContainerExists();
@@ -170,6 +171,12 @@ class FxToastrService {
         }
     }
     show(message, type, title) {
+        const dedupeKey = `${type}:${message}`;
+        if (this.recentMessages.has(dedupeKey)) {
+            return;
+        }
+        this.recentMessages.add(dedupeKey);
+        setTimeout(() => this.recentMessages.delete(dedupeKey), 2000);
         const toast = {
             id: ++this.idCounter,
             message,
@@ -306,8 +313,30 @@ class FxUtils {
         return _.isEqual(model, compareModel);
     }
     static parseError(err) {
-        if (_.get(err, 'status') === 401) {
-            return 'Session timeout. Please login again.';
+        const status = _.get(err, 'status');
+        switch (status) {
+            case 401:
+                return 'Session timeout. Please login again.';
+            case 403:
+                return 'You do not have permission to perform this action.';
+            case 404:
+                return 'The requested resource was not found.';
+            case 408:
+                return 'The request timed out. Please try again.';
+            case 409:
+                return 'A conflict occurred. Please refresh and try again.';
+            case 413:
+                return 'The uploaded data is too large.';
+            case 429:
+                return 'Too many requests. Please wait a moment and try again.';
+            case 500:
+                return 'An internal server error occurred. Please try again later.';
+            case 502:
+                return 'The server is temporarily unavailable. Please try again later.';
+            case 503:
+                return 'The service is currently unavailable. Please try again later.';
+            case 504:
+                return 'The server took too long to respond. Please try again later.';
         }
         if (this.isStringEmpty(_.get(err, 'error.code'))) {
             return _.get(err, 'error.errors', 'Unknown Error');
@@ -700,7 +729,7 @@ class BaseTableComponent extends BaseComponent {
     capitalize(label) {
         return _.capitalize(label);
     }
-    value(model, key, defaultValue) {
+    value(model, key, defaultValue = '---') {
         return _.get(model, key, defaultValue);
     }
     toggleExpand(element) {
@@ -1249,14 +1278,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 
 class AuthInterceptor {
     authState;
+    handlingUnauthorized = false;
     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) {
+            if (error.status === 401 && !this.handlingUnauthorized) {
+                this.handlingUnauthorized = true;
                 this.authState.handleUnauthorized();
+                setTimeout(() => {
+                    this.handlingUnauthorized = false;
+                }, 2000);
             }
             return throwError(() => error);
         }));
@@ -1614,11 +1648,13 @@ class ChartComponent {
     showPieLabel = true;
     mobileWidth = 350;
     labelFontFamily = 'DMSans';
+    emptyText = 'No data available';
     /* ================= OUTPUTS ================= */
     chartClick = new EventEmitter();
     chartInit = new EventEmitter();
     /* ================= INTERNAL ================= */
     chartOptions = {};
+    isEmpty = false;
     labelFontSize = 12;
     chartInstance;
     resizeObserver;
@@ -1695,12 +1731,34 @@ class ChartComponent {
         this.chartInstance.resize();
     }
     rebuildChart() {
+        this.isEmpty = this.checkEmpty();
+        if (this.isEmpty) {
+            if (this.chartInstance) {
+                this.chartInstance.clear();
+            }
+            return;
+        }
         this.chartOptions = this.buildOptions();
         if (this.chartInstance) {
             this.chartInstance.clear();
             this.chartInstance.setOption(this.chartOptions, true);
         }
     }
+    checkEmpty() {
+        const type = this.detectType();
+        if (type === 'bar') {
+            const categories = this.data?.categories;
+            const values = this.data?.values;
+            return !categories?.length || !values?.length;
+        }
+        if (type === 'pie') {
+            if (!Array.isArray(this.data) || this.data.length === 0)
+                return true;
+            const total = this.data.reduce((sum, d) => sum + (d.value || 0), 0);
+            return total === 0;
+        }
+        return false;
+    }
     /* ================= REGISTRY ================= */
     registry = {
         bar: (data, colors) => ({
@@ -1940,11 +1998,11 @@ class ChartComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChartComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ChartComponent, isStandalone: false, selector: "fx-ui-chart", inputs: { type: "type", data: "data", options: "options", palette: "palette", height: "height", loading: "loading", pieLegendAlign: "pieLegendAlign", pieLegendPosition: "pieLegendPosition", showPieLabel: "showPieLabel", mobileWidth: "mobileWidth", labelFontFamily: "labelFontFamily" }, outputs: { chartClick: "chartClick", chartInit: "chartInit" }, host: { listeners: { "window:theme-changed": "onThemeChange()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-wrapper\" [style.height]=\"height\">\n  <div\n    echarts\n    [options]=\"chartOptions\"\n    [loading]=\"loading\"\n    (chartInit)=\"onChartInit($event)\"\n    (chartClick)=\"onChartClick($event)\"\n    class=\"fx-chart\"\n    [style.height]=\"height\"\n  ></div>\n</div>\n", styles: [":host{display:block;width:100%}.chart-wrapper{position:relative;width:100%;height:100%}.chart-container{width:100%;height:100%}.chart-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--bg-primary-hover)/.6);font-weight:500;font-size:1.1rem;z-index:2;border-radius:4px}\n"], dependencies: [{ kind: "directive", type: i1$5.NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ChartComponent, isStandalone: false, selector: "fx-ui-chart", inputs: { type: "type", data: "data", options: "options", palette: "palette", height: "height", loading: "loading", pieLegendAlign: "pieLegendAlign", pieLegendPosition: "pieLegendPosition", showPieLabel: "showPieLabel", mobileWidth: "mobileWidth", labelFontFamily: "labelFontFamily", emptyText: "emptyText" }, outputs: { chartClick: "chartClick", chartInit: "chartInit" }, host: { listeners: { "window:theme-changed": "onThemeChange()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-wrapper\" [style.height]=\"height\">\n  @if (isEmpty) {\n    <div class=\"chart-empty\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"chart-empty-icon\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z\" />\n      </svg>\n      <span class=\"chart-empty-text\">{{ emptyText }}</span>\n    </div>\n  } @else {\n    <div\n      echarts\n      [options]=\"chartOptions\"\n      [loading]=\"loading\"\n      (chartInit)=\"onChartInit($event)\"\n      (chartClick)=\"onChartClick($event)\"\n      class=\"fx-chart\"\n      [style.height]=\"height\"\n    ></div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.chart-wrapper{position:relative;width:100%;height:100%}.chart-container{width:100%;height:100%}.chart-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--bg-primary-hover)/.6);font-weight:500;font-size:1.1rem;z-index:2;border-radius:4px}.chart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:rgba(var(--text-secondary)/1)}.chart-empty-icon{width:48px;height:48px;opacity:.4}.chart-empty-text{font-size:14px;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1$5.NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-chart', standalone: false, template: "<div class=\"chart-wrapper\" [style.height]=\"height\">\n  <div\n    echarts\n    [options]=\"chartOptions\"\n    [loading]=\"loading\"\n    (chartInit)=\"onChartInit($event)\"\n    (chartClick)=\"onChartClick($event)\"\n    class=\"fx-chart\"\n    [style.height]=\"height\"\n  ></div>\n</div>\n", styles: [":host{display:block;width:100%}.chart-wrapper{position:relative;width:100%;height:100%}.chart-container{width:100%;height:100%}.chart-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--bg-primary-hover)/.6);font-weight:500;font-size:1.1rem;z-index:2;border-radius:4px}\n"] }]
+            args: [{ selector: 'fx-ui-chart', standalone: false, template: "<div class=\"chart-wrapper\" [style.height]=\"height\">\n  @if (isEmpty) {\n    <div class=\"chart-empty\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"chart-empty-icon\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z\" />\n      </svg>\n      <span class=\"chart-empty-text\">{{ emptyText }}</span>\n    </div>\n  } @else {\n    <div\n      echarts\n      [options]=\"chartOptions\"\n      [loading]=\"loading\"\n      (chartInit)=\"onChartInit($event)\"\n      (chartClick)=\"onChartClick($event)\"\n      class=\"fx-chart\"\n      [style.height]=\"height\"\n    ></div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.chart-wrapper{position:relative;width:100%;height:100%}.chart-container{width:100%;height:100%}.chart-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--bg-primary-hover)/.6);font-weight:500;font-size:1.1rem;z-index:2;border-radius:4px}.chart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:rgba(var(--text-secondary)/1)}.chart-empty-icon{width:48px;height:48px;opacity:.4}.chart-empty-text{font-size:14px;font-weight:500}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { type: [{
                 type: Input
             }], data: [{
@@ -1967,6 +2025,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], labelFontFamily: [{
                 type: Input
+            }], emptyText: [{
+                type: Input
             }], chartClick: [{
                 type: Output
             }], chartInit: [{
@@ -2202,12 +2262,21 @@ class DndUploadComponent {
     accept = '';
     maxSizeMB = 10;
     strictSize = true;
+    /** Icon name from heroicons (outline). Default: 'arrow-up-tray' */
+    icon = 'arrow-up-tray';
+    /** CSS color value for accent (border, icon, link). Default uses --gradient-primary-start */
+    accentColor = '';
     fileDrop = new EventEmitter();
     fileClick = new EventEmitter();
     uploadComplete = new EventEmitter();
     uploadError = new EventEmitter();
     isDragOver = false;
     isOpening = false;
+    get accentStyle() {
+        if (!this.accentColor)
+            return {};
+        return { '--dnd-accent': this.accentColor };
+    }
     onDragOver(event) {
         event.preventDefault();
         this.isDragOver = true;
@@ -2247,21 +2316,21 @@ class DndUploadComponent {
         const valid = [];
         const acceptedTypes = this.accept
             .split(',')
-            .map(t => t.trim().toLowerCase())
-            .filter(t => t);
+            .map((t) => t.trim().toLowerCase())
+            .filter((t) => t);
         for (const file of files) {
             const sizeMB = file.size / 1024 / 1024;
             if (this.strictSize && sizeMB > this.maxSizeMB) {
                 this.uploadError.emit({
                     file,
-                    reason: `File too large: ${sizeMB.toFixed(2)} MB > ${this.maxSizeMB} MB`
+                    reason: `File too large: ${sizeMB.toFixed(2)} MB > ${this.maxSizeMB} MB`,
                 });
                 continue;
             }
             if (acceptedTypes.length && !this.isAccepted(file, acceptedTypes)) {
                 this.uploadError.emit({
                     file,
-                    reason: `File type not allowed: "${file.name}"`
+                    reason: `File type not allowed: "${file.name}"`,
                 });
                 continue;
             }
@@ -2273,13 +2342,12 @@ class DndUploadComponent {
         }
     }
     onUpload(files) {
-        console.log('Uploading files:', files);
         this.uploadComplete.emit(files);
     }
     isAccepted(file, accepted) {
         const fileType = file.type.toLowerCase();
         const fileExt = '.' + file.name.split('.').pop().toLowerCase();
-        return accepted.some(a => {
+        return accepted.some((a) => {
             if (a.startsWith('.')) {
                 return a === fileExt;
             }
@@ -2290,11 +2358,11 @@ class DndUploadComponent {
         });
     }
     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-gradient-primary-start\"\n    [ngClass]=\"{\n      'border-border-default bg-bg-hover': !isDragOver,\n      'border-gradient-primary-start 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: DndUploadComponent, isStandalone: false, selector: "fx-ui-dnd-upload", inputs: { multiple: "multiple", accept: "accept", maxSizeMB: "maxSizeMB", strictSize: "strictSize", icon: "icon", accentColor: "accentColor" }, outputs: { fileDrop: "fileDrop", fileClick: "fileClick", uploadComplete: "uploadComplete", uploadError: "uploadError" }, ngImport: i0, template: "<div\n  class=\"dnd-wrapper\"\n  [ngStyle]=\"accentStyle\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <div\n    role=\"button\"\n    tabindex=\"0\"\n    class=\"dnd-area\"\n    [class.drag-over]=\"isDragOver\"\n    (click)=\"onAreaClick(fileInput, $event)\"\n    (keydown.enter)=\"onAreaClick(fileInput, $event)\"\n  >\n    <fx-ui-hero-icon\n      [icon]=\"icon\"\n      [size]=\"40\"\n      class=\"flex dnd-icon\"\n    ></fx-ui-hero-icon>\n    <div class=\"dnd-text\">\n      <span class=\"dnd-link\">Click to upload</span>\n      <span class=\"dnd-or\">or drag and drop</span>\n    </div>\n    <div class=\"dnd-hint\">\n      @if (accept) {\n        Accepted: {{ accept }}\n      } @else {\n        Any file type\n      }\n      \u2014 Max {{ maxSizeMB }} MB\n    </div>\n\n    <input\n      #fileInput\n      type=\"file\"\n      class=\"dnd-input\"\n      [attr.multiple]=\"multiple ? '' : null\"\n      [attr.accept]=\"accept\"\n      (change)=\"onFileSelected($event)\"\n    />\n  </div>\n</div>\n", styles: [":host{--dnd-accent: rgba(var(--gradient-primary-start) / 1)}.dnd-wrapper{display:block;width:100%}.dnd-area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:160px;padding:32px 24px;border:2px dashed color-mix(in srgb,var(--dnd-accent) 40%,transparent);border-radius:12px;background:color-mix(in srgb,var(--dnd-accent) 4%,transparent);cursor:pointer;outline:none;transition:all .2s ease;position:relative}.dnd-area:hover{border-color:color-mix(in srgb,var(--dnd-accent) 70%,transparent);background:color-mix(in srgb,var(--dnd-accent) 8%,transparent)}.dnd-area:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--dnd-accent) 20%,transparent)}.dnd-area.drag-over{border-color:var(--dnd-accent);background:color-mix(in srgb,var(--dnd-accent) 10%,transparent)}.dnd-icon{color:var(--dnd-accent)}.dnd-text{display:flex;align-items:center;gap:4px;font-size:14px;flex-wrap:wrap;justify-content:center}.dnd-link{color:var(--dnd-accent);font-weight:600;text-decoration:underline}.dnd-or{color:rgba(var(--text-secondary)/1)}.dnd-hint{font-size:12px;color:rgba(var(--text-secondary)/.7)}.dnd-input{position:absolute;width:0;height:0;overflow:hidden;opacity:0}@media(max-width:640px){.dnd-area{min-height:120px;padding:24px 16px}.dnd-text{font-size:13px}}\n"], dependencies: [{ kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: 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-gradient-primary-start\"\n    [ngClass]=\"{\n      'border-border-default bg-bg-hover': !isDragOver,\n      'border-gradient-primary-start 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" }]
+            args: [{ selector: 'fx-ui-dnd-upload', standalone: false, template: "<div\n  class=\"dnd-wrapper\"\n  [ngStyle]=\"accentStyle\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <div\n    role=\"button\"\n    tabindex=\"0\"\n    class=\"dnd-area\"\n    [class.drag-over]=\"isDragOver\"\n    (click)=\"onAreaClick(fileInput, $event)\"\n    (keydown.enter)=\"onAreaClick(fileInput, $event)\"\n  >\n    <fx-ui-hero-icon\n      [icon]=\"icon\"\n      [size]=\"40\"\n      class=\"flex dnd-icon\"\n    ></fx-ui-hero-icon>\n    <div class=\"dnd-text\">\n      <span class=\"dnd-link\">Click to upload</span>\n      <span class=\"dnd-or\">or drag and drop</span>\n    </div>\n    <div class=\"dnd-hint\">\n      @if (accept) {\n        Accepted: {{ accept }}\n      } @else {\n        Any file type\n      }\n      \u2014 Max {{ maxSizeMB }} MB\n    </div>\n\n    <input\n      #fileInput\n      type=\"file\"\n      class=\"dnd-input\"\n      [attr.multiple]=\"multiple ? '' : null\"\n      [attr.accept]=\"accept\"\n      (change)=\"onFileSelected($event)\"\n    />\n  </div>\n</div>\n", styles: [":host{--dnd-accent: rgba(var(--gradient-primary-start) / 1)}.dnd-wrapper{display:block;width:100%}.dnd-area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:160px;padding:32px 24px;border:2px dashed color-mix(in srgb,var(--dnd-accent) 40%,transparent);border-radius:12px;background:color-mix(in srgb,var(--dnd-accent) 4%,transparent);cursor:pointer;outline:none;transition:all .2s ease;position:relative}.dnd-area:hover{border-color:color-mix(in srgb,var(--dnd-accent) 70%,transparent);background:color-mix(in srgb,var(--dnd-accent) 8%,transparent)}.dnd-area:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--dnd-accent) 20%,transparent)}.dnd-area.drag-over{border-color:var(--dnd-accent);background:color-mix(in srgb,var(--dnd-accent) 10%,transparent)}.dnd-icon{color:var(--dnd-accent)}.dnd-text{display:flex;align-items:center;gap:4px;font-size:14px;flex-wrap:wrap;justify-content:center}.dnd-link{color:var(--dnd-accent);font-weight:600;text-decoration:underline}.dnd-or{color:rgba(var(--text-secondary)/1)}.dnd-hint{font-size:12px;color:rgba(var(--text-secondary)/.7)}.dnd-input{position:absolute;width:0;height:0;overflow:hidden;opacity:0}@media(max-width:640px){.dnd-area{min-height:120px;padding:24px 16px}.dnd-text{font-size:13px}}\n"] }]
         }], propDecorators: { multiple: [{
                 type: Input
             }], accept: [{
@@ -2303,6 +2371,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], strictSize: [{
                 type: Input
+            }], icon: [{
+                type: Input
+            }], accentColor: [{
+                type: Input
             }], fileDrop: [{
                 type: Output
             }], fileClick: [{
@@ -2698,6 +2770,8 @@ class SelectComponent extends FxComponent {
     class;
     enableSearch = false;
     searchFn;
+    /** Emits the current value when the select panel closes (useful for multiple mode). */
+    closed = new EventEmitter();
     searchTerm = '';
     filteredOptions = [];
     search$ = new Subject();
@@ -2720,6 +2794,9 @@ class SelectComponent extends FxComponent {
             if (this.enableSearch)
                 this.searchTerm = '';
         }
+        else {
+            this.closed.emit(this.value);
+        }
     }
     onSearchChange(value) {
         if (!this.enableSearch)
@@ -2750,7 +2827,7 @@ class SelectComponent extends FxComponent {
         return this.value === value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectComponent, deps: [{ token: i1$3.NgControl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SelectComponent, isStandalone: false, selector: "fx-ui-select", inputs: { label: "label", placeholder: "placeholder", options: "options", multiple: "multiple", disabled: "disabled", errorMessages: "errorMessages", required: "required", class: "class", enableSearch: "enableSearch", searchFn: "searchFn" }, usesInheritance: true, ngImport: i0, template: "<div class=\"mb-4 text-left w-full\" [class]=\"class\">\n  @if (label) {\n    <label class=\"block txt-field-label\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\">*</span>\n      }\n    </label>\n  }\n\n  <mat-form-field\n    [attr.invalid]=\"invalid || null\"\n    class=\"fx-select-field w-full shadow-sm\"\n    appearance=\"fill\"\n  >\n    <mat-select\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [multiple]=\"multiple\"\n      [value]=\"value\"\n      (selectionChange)=\"onSelectionChange($event.value)\"\n      (openedChange)=\"onOpened($event)\"\n      (blur)=\"onTouched()\"\n    >\n      @if (enableSearch) {\n        <div class=\"px-semi w-full\">\n          <input\n            type=\"text\"\n            [placeholder]=\"'Search'\"\n            [(ngModel)]=\"searchTerm\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            (click)=\"$event.stopPropagation()\"\n            class=\"text-text-primary placeholder:text-text-placeholder w-full bg-bg-primary border-b px-semi py-normal border-border-default focus:outline-none focus:border-gradient-primary-start text-sm text-text-primary tracking-normal ring-0 transition-colors duration-500 ease-in-out\"\n          />\n        </div>\n      }\n      <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option.value\">\n        <span class=\"txt-default\">{{ option.label }}</span>\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  @if (invalid) {\n    <div class=\"txt-invalid text-left\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n", styles: ["::ng-deep .fx-select-field{display:block!important;width:100%!important;margin:0!important;padding:0!important;border-radius:.75rem;box-shadow:0 1px 1px rgb(var(--border-default))}::ng-deep .fx-select-field .mat-mdc-form-field-wrapper,::ng-deep .fx-select-field .mat-mdc-text-field-wrapper{padding:0!important;margin:0!important;width:100%!important}::ng-deep .fx-select-field .mdc-text-field{width:100%!important;margin:0!important;padding:0!important;--mdc-shape-small: 0 !important}::ng-deep .fx-select-field .mat-mdc-form-field-flex{width:100%!important;margin:0!important;padding:0 .75rem!important;border:1px solid rgb(var(--border-default));border-radius:.375rem;height:36px!important;align-items:center;background-color:rgb(var(--bg-primary))}::ng-deep .fx-select-field .mdc-notched-outline,::ng-deep .fx-select-field .mat-mdc-form-field-subscript-wrapper{display:none!important}::ng-deep .fx-select-field.mat-focused .mat-mdc-form-field-flex{border:2px solid rgb(var(--gradient-primary-start))!important;outline:none!important;border-radius:.375rem}::ng-deep .fx-select-field.mat-form-field-invalid .mat-mdc-form-field-flex{border:1px solid rgb(var(--bg-error-bold))!important;box-shadow:none!important}::ng-deep mat-form-field[invalid] .mat-mdc-form-field-flex{border:1px solid rgb(var(--bg-error-bold))!important;box-shadow:none!important}::ng-deep .fx-select-field .mat-mdc-select-trigger{padding:0!important;margin:0!important}::ng-deep .fx-select-field .mat-mdc-select-arrow-wrapper{margin-right:0!important}::ng-deep .fx-select-field .mat-mdc-select-arrow-wrapper{color:rgb(var(--text-primary))}::ng-deep .mat-mdc-select-panel{background-color:rgb(var(--bg-primary))!important;border:1px solid rgb(var(--border-default))!important;border-radius:.375rem!important;box-shadow:0 2px 4px #0000001a!important}::ng-deep .fx-select-field .mat-mdc-select-placeholder{color:rgb(var(--text-placeholder))!important;font-size:14px}::ng-deep .fx-select-field .mat-mdc-select-value{color:rgb(var(--text-primary))!important;font-size:14px;font-weight:400}.mat-select-panel .search-option-full-width{padding-left:0!important;padding-right:0!important;display:block;pointer-events:none;line-height:initial;height:auto}.mat-select-panel .search-option-full-width .search-bar{width:100%;padding:8px 16px;border:none;border-bottom:1px solid #ddd;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SelectComponent, isStandalone: false, selector: "fx-ui-select", inputs: { label: "label", placeholder: "placeholder", options: "options", multiple: "multiple", disabled: "disabled", errorMessages: "errorMessages", required: "required", class: "class", enableSearch: "enableSearch", searchFn: "searchFn" }, outputs: { closed: "closed" }, usesInheritance: true, ngImport: i0, template: "<div class=\"mb-4 text-left w-full\" [class]=\"class\">\n  @if (label) {\n    <label class=\"block txt-field-label\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\">*</span>\n      }\n    </label>\n  }\n\n  <mat-form-field\n    [attr.invalid]=\"invalid || null\"\n    class=\"fx-select-field w-full shadow-sm\"\n    appearance=\"fill\"\n  >\n    <mat-select\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [multiple]=\"multiple\"\n      [value]=\"value\"\n      (selectionChange)=\"onSelectionChange($event.value)\"\n      (openedChange)=\"onOpened($event)\"\n      (blur)=\"onTouched()\"\n    >\n      @if (enableSearch) {\n        <div class=\"px-semi w-full\">\n          <input\n            type=\"text\"\n            [placeholder]=\"'Search'\"\n            [(ngModel)]=\"searchTerm\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            (click)=\"$event.stopPropagation()\"\n            class=\"text-text-primary placeholder:text-text-placeholder w-full bg-bg-primary border-b px-semi py-normal border-border-default focus:outline-none focus:border-gradient-primary-start text-sm text-text-primary tracking-normal ring-0 transition-colors duration-500 ease-in-out\"\n          />\n        </div>\n      }\n      <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option.value\">\n        <span class=\"txt-default\">{{ option.label }}</span>\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  @if (invalid) {\n    <div class=\"txt-invalid text-left\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n", styles: ["::ng-deep .fx-select-field{display:block!important;width:100%!important;margin:0!important;padding:0!important;border-radius:.75rem;box-shadow:0 1px 1px rgb(var(--border-default))}::ng-deep .fx-select-field .mat-mdc-form-field-wrapper,::ng-deep .fx-select-field .mat-mdc-text-field-wrapper{padding:0!important;margin:0!important;width:100%!important}::ng-deep .fx-select-field .mdc-text-field{width:100%!important;margin:0!important;padding:0!important;--mdc-shape-small: 0 !important}::ng-deep .fx-select-field .mat-mdc-form-field-flex{width:100%!important;margin:0!important;padding:0 .75rem!important;border:1px solid rgb(var(--border-default));border-radius:.375rem;height:36px!important;align-items:center;background-color:rgb(var(--bg-primary))}::ng-deep .fx-select-field .mdc-notched-outline,::ng-deep .fx-select-field .mat-mdc-form-field-subscript-wrapper{display:none!important}::ng-deep .fx-select-field.mat-focused .mat-mdc-form-field-flex{border:2px solid rgb(var(--gradient-primary-start))!important;outline:none!important;border-radius:.375rem}::ng-deep .fx-select-field.mat-form-field-invalid .mat-mdc-form-field-flex{border:1px solid rgb(var(--bg-error-bold))!important;box-shadow:none!important}::ng-deep mat-form-field[invalid] .mat-mdc-form-field-flex{border:1px solid rgb(var(--bg-error-bold))!important;box-shadow:none!important}::ng-deep .fx-select-field .mat-mdc-select-trigger{padding:0!important;margin:0!important}::ng-deep .fx-select-field .mat-mdc-select-arrow-wrapper{margin-right:0!important}::ng-deep .fx-select-field .mat-mdc-select-arrow-wrapper{color:rgb(var(--text-primary))}::ng-deep .mat-mdc-select-panel{background-color:rgb(var(--bg-primary))!important;border:1px solid rgb(var(--border-default))!important;border-radius:.375rem!important;box-shadow:0 2px 4px #0000001a!important}::ng-deep .fx-select-field .mat-mdc-select-placeholder{color:rgb(var(--text-placeholder))!important;font-size:14px}::ng-deep .fx-select-field .mat-mdc-select-value{color:rgb(var(--text-primary))!important;font-size:14px;font-weight:400}.mat-select-panel .search-option-full-width{padding-left:0!important;padding-right:0!important;display:block;pointer-events:none;line-height:initial;height:auto}.mat-select-panel .search-option-full-width .search-bar{width:100%;padding:8px 16px;border:none;border-bottom:1px solid #ddd;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -2775,6 +2852,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], searchFn: [{
                 type: Input
+            }], closed: [{
+                type: Output
             }] } });
 
 class SkeletonTableLoadingComponent {
@@ -3128,12 +3207,16 @@ class TagComponent {
     rounded = true;
     icon;
     solid = false;
+    click = new EventEmitter();
+    onClick() {
+        this.click.emit();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TagComponent, isStandalone: false, selector: "fx-ui-tag", inputs: { label: "label", type: "type", rounded: "rounded", icon: "icon", solid: "solid" }, ngImport: i0, template: "<div\n  [class]=\"\n    `flex flex-row gap-small ${rounded ? 'tag-round' : 'tag-square'} tag-${type}${solid ? '-solid' : ''}`\n  \"\n>\n  @if (icon) {\n    <fx-ui-hero-icon\n      [class]=\"`flex txt-tag-${type} ${solid && type !== 'default' ? 'text-white' : ''}`\"\n      [icon]=\"icon\"\n      [size]=\"18\"\n    ></fx-ui-hero-icon>\n  }\n\n  <div [class]=\"`txt-tag-${type} ${solid && type !== 'default' ? 'text-white font-medium' : ''}`\">\n    {{ label }}\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TagComponent, isStandalone: false, selector: "fx-ui-tag", inputs: { label: "label", type: "type", rounded: "rounded", icon: "icon", solid: "solid" }, outputs: { click: "click" }, ngImport: i0, template: "<div\n  (click)=\"onClick()\"\n  [class]=\"\n    `flex flex-row gap-small ${rounded ? 'tag-round' : 'tag-square'} tag-${type}${solid ? '-solid' : ''}`\n  \"\n>\n  @if (icon) {\n    <fx-ui-hero-icon\n      [class]=\"`flex txt-tag-${type} ${solid && type !== 'default' ? 'text-white' : ''}`\"\n      [icon]=\"icon\"\n      [size]=\"18\"\n    ></fx-ui-hero-icon>\n  }\n\n  <div [class]=\"`txt-tag-${type} ${solid && type !== 'default' ? 'text-white font-medium' : ''}`\">\n    {{ label }}\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-tag', standalone: false, template: "<div\n  [class]=\"\n    `flex flex-row gap-small ${rounded ? 'tag-round' : 'tag-square'} tag-${type}${solid ? '-solid' : ''}`\n  \"\n>\n  @if (icon) {\n    <fx-ui-hero-icon\n      [class]=\"`flex txt-tag-${type} ${solid && type !== 'default' ? 'text-white' : ''}`\"\n      [icon]=\"icon\"\n      [size]=\"18\"\n    ></fx-ui-hero-icon>\n  }\n\n  <div [class]=\"`txt-tag-${type} ${solid && type !== 'default' ? 'text-white font-medium' : ''}`\">\n    {{ label }}\n  </div>\n</div>\n" }]
+            args: [{ selector: 'fx-ui-tag', standalone: false, template: "<div\n  (click)=\"onClick()\"\n  [class]=\"\n    `flex flex-row gap-small ${rounded ? 'tag-round' : 'tag-square'} tag-${type}${solid ? '-solid' : ''}`\n  \"\n>\n  @if (icon) {\n    <fx-ui-hero-icon\n      [class]=\"`flex txt-tag-${type} ${solid && type !== 'default' ? 'text-white' : ''}`\"\n      [icon]=\"icon\"\n      [size]=\"18\"\n    ></fx-ui-hero-icon>\n  }\n\n  <div [class]=\"`txt-tag-${type} ${solid && type !== 'default' ? 'text-white font-medium' : ''}`\">\n    {{ label }}\n  </div>\n</div>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], type: [{
@@ -3144,6 +3227,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], solid: [{
                 type: Input
+            }], click: [{
+                type: Output
             }] } });
 
 class TreeDiagram {