wuic-framework-lib 1.0.11 → 1.0.20

package/fesm2022/{wuic-framework-lib-chart-list.component-vuzmQW9F.mjs → wuic-framework-lib-chart-list.component-B44k_wZe.mjs}

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, ViewChild, Output, Input, Component } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
-import { W as WtoolboxService, k as WuicClientException, l as WuicErrorCodes, G as GlobalHandler, M as MetadataProviderService, T as TranslationManagerService, U as UserInfoService, A as ArchetypeConfiguratorComponent } from './wuic-framework-lib-wuic-framework-lib-DDokY6wY.mjs';
+import { W as WtoolboxService, k as WuicClientException, l as WuicErrorCodes, G as GlobalHandler, M as MetadataProviderService, T as TranslationManagerService, U as UserInfoService, A as ArchetypeConfiguratorComponent } from './wuic-framework-lib-wuic-framework-lib-CGCZvtKK.mjs';
 import * as i5 from 'primeng/chart';
 import { ChartModule } from 'primeng/chart';
-import * as i2 from '@ngx-translate/core';
+import * as i8 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i1 from '@angular/platform-browser';
 import * as i1$1 from '@angular/router';
@@ -330,6 +330,16 @@ class ChartListComponent {
                 const metaChartOptions = info.metaInfo.tableMetadata.extraProps?.archetypes?.chart?.options || {};
                 const metaChartType = info.metaInfo.tableMetadata.extraProps?.archetypes?.chart?.type || "bar";
                 this.metaChartOptions = metaChartOptions;
+                // Seed UI controls (stacked/indexAxis) from dataOptions when present.
+                // Permette config 'stacked: true' + 'indexAxis: y' nel mdpropsbag.archetypes.chart.dataOptions
+                // direttamente, senza che l'utente debba toggle-are nel chart settings dialog.
+                const seedDataOptions = info.metaInfo.tableMetadata.extraProps?.archetypes?.chart?.dataOptions || {};
+                if (seedDataOptions.stacked !== undefined && !this.hasUserChartTypeOverride) {
+                    this.ui.stacked = !!seedDataOptions.stacked;
+                }
+                if (seedDataOptions.indexAxis && !this.hasUserChartTypeOverride) {
+                    this.ui.indexAxis = (String(seedDataOptions.indexAxis).toLowerCase() === 'y') ? 'y' : 'x';
+                }
                 this.basicOptions = this.deepMerge({}, this.defaultChartOptions, this.getThemeChartOptions(), this.metaChartOptions);
                 if (!this.hasUserChartTypeOverride) {
                     this.selectedChartType = metaChartType;
@@ -337,7 +347,7 @@ class ChartListComponent {
                 this.refreshChartOptions();
                 this.startChartResizeObserver();
                 this.scheduleChartResizePasses();
-                var title = this.metaInfo.tableMetadata.md_display_string;
+                let title = this.metaInfo.tableMetadata.md_display_string;
                 this.titleService.setTitle(title);
                 if (info.resultInfo.dato) {
                     this.lastResultInfo = info.resultInfo;
@@ -386,7 +396,7 @@ class ChartListComponent {
      */
     drillDown($event) {
         this.onChartDataSelect.emit($event);
-        var clicked = this.datasource?.value?.resultInfo?.dato?.[$event?.element?.index];
+        let clicked = this.datasource?.value?.resultInfo?.dato?.[$event?.element?.index];
         this.onChartDrillDown.emit({
             event: $event,
             clickedItem: clicked,
@@ -1046,7 +1056,7 @@ class ChartListComponent {
         }
     }
     _parseDataInternal(result, runtimeCutOff) {
-        var chartData;
+        let chartData;
         // = {
         //   labels: ['Q1', 'Q2', 'Q3', 'Q4'],
         //   datasets: [
@@ -1060,7 +1070,7 @@ class ChartListComponent {
         //   ]
         // };
         if (this.metaInfo.tableMetadata.extraProps?.archetypes?.chart?.dataOptions) {
-            var dataOptions = this.metaInfo.tableMetadata.extraProps.archetypes.chart.dataOptions;
+            let dataOptions = this.metaInfo.tableMetadata.extraProps.archetypes.chart.dataOptions;
             if (dataOptions.getChartData) {
                 chartData = typeof dataOptions.getChartData === 'string' ? new Function("data", dataOptions.getChartData)(result) : dataOptions.getChartData(result);
             }
@@ -1069,7 +1079,7 @@ class ChartListComponent {
                     labels: [],
                     datasets: []
                 };
-                var data = Array.isArray(result[dataOptions.dataProperty]) ? result[dataOptions.dataProperty] : [];
+                let data = Array.isArray(result[dataOptions.dataProperty]) ? result[dataOptions.dataProperty] : [];
                 const groupRows = data.filter((d) => d && d.__group_header === 1);
                 const chartRows = groupRows.length ? groupRows : data;
                 const sortField = dataOptions.datasets?.[0]?.dataField;
@@ -1091,21 +1101,50 @@ class ChartListComponent {
                         chartData.datasets.push(typeof ds.parseData === 'string' ? new Function("data", ds.parseData)(result) : ds.parseData(data));
                     }
                     else if (ds.labelField && ds.dataField) {
-                        var dsInstance = {
-                            label: ds.label,
-                            // backgroundColor: ds.backgroundColor,
-                            // borderColor: ds.borderColor,
-                            // borderWidth: ds.borderWidth
+                        let dsInstance = {
+                            label: ds.label
                         };
                         dsInstance.data = orderedRows.map((d) => this.getSeriesValue(d, ds.dataField));
-                        if (ds.backgroundColorField) {
-                            dsInstance.backgroundColor = orderedRows.map((d) => d[ds.backgroundColorField]);
+                        // Static colors per dataset (multi-series stacked / semantic palette).
+                        // Priority: backgroundColorField (per-row) > backgroundColor (static dataset)
+                        // > generateRandomColor (random per row) > applyDatasetAppearance (theme palette).
+                        // Cast `any` perche' ChartDatasetOptions del modello custom non espone
+                        // backgroundColor diretto (solo backgroundColorField), ma Chart.js runtime
+                        // accetta entrambi.
+                        const dsCfgAny = ds;
+                        if (dsCfgAny.backgroundColorField) {
+                            dsInstance.backgroundColor = orderedRows.map((d) => d[dsCfgAny.backgroundColorField]);
+                        }
+                        else if (dsCfgAny.backgroundColor) {
+                            dsInstance.backgroundColor = dsCfgAny.backgroundColor;
                         }
-                        else if (ds.generateRandomColor) {
+                        else if (dsCfgAny.generateRandomColor) {
                             dsInstance.backgroundColor = orderedRows.map(() => {
                                 return 'rgba(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',0.8)';
                             });
                         }
+                        // Cast `any` per Chart.js types: ChartDatasetOptions limita le keys
+                        // sul livello root, ma a runtime Chart.js le accetta tutte (chart-type-specific).
+                        const dsAny = ds;
+                        const dsInstAny = dsInstance;
+                        if (dsAny.borderColor)
+                            dsInstAny.borderColor = dsAny.borderColor;
+                        if (dsAny.borderWidth !== undefined)
+                            dsInstAny.borderWidth = dsAny.borderWidth;
+                        // `stack` raggruppa datasets in stacked bar separati per gruppo
+                        if (dsAny.stack)
+                            dsInstAny.stack = dsAny.stack;
+                        // Pass-through bar sizing controls (Chart.js bar/horizontal-bar):
+                        // evita che con poche categorie i bar si espandano a tutta altezza.
+                        // maxBarThickness=24 => bar mai oltre 24px anche con 2-3 categorie.
+                        if (dsAny.maxBarThickness !== undefined)
+                            dsInstAny.maxBarThickness = dsAny.maxBarThickness;
+                        if (dsAny.barThickness !== undefined)
+                            dsInstAny.barThickness = dsAny.barThickness;
+                        if (dsAny.barPercentage !== undefined)
+                            dsInstAny.barPercentage = dsAny.barPercentage;
+                        if (dsAny.categoryPercentage !== undefined)
+                            dsInstAny.categoryPercentage = dsAny.categoryPercentage;
                         if (ds.borderColorField) {
                             dsInstance.borderColor = orderedRows.map((d) => d[ds.borderColorField]);
                             dsInstance.borderWidth = 1;
@@ -1188,6 +1227,27 @@ class ChartListComponent {
                 nextHeight -= overflowDelta;
             }
         }
+        // Cap al bounding del TD/cella dashboard. Quando il chart-list e' embedded
+        // come widget di cella in una dashboard, NON deve espandersi oltre il box
+        // riservato dalla cella — altrimenti lo strato sotto (es. tabella) viene
+        // spinto fuori dal viewport. Solo TD veri (DOM tag) o ancestor con classe
+        // CRM_HOME_CELL del designer (non qualsiasi ancestor con height esplicita,
+        // perche' il chart-list ha un wrapper interno con height inline che
+        // creerebbe un cap-loop).
+        let constrainAncestor = chartHost.parentElement;
+        while (constrainAncestor && constrainAncestor !== layoutContainer) {
+            const isDashboardCell = constrainAncestor.tagName === 'TD'
+                || (constrainAncestor.className && constrainAncestor.className.indexOf('CRM_HOME_CELL') >= 0);
+            if (isDashboardCell) {
+                const ancRect = constrainAncestor.getBoundingClientRect();
+                const cappedHeight = Math.floor(ancRect.bottom - hostTop - this.chartBottomPadding);
+                if (cappedHeight > 0 && cappedHeight < nextHeight) {
+                    nextHeight = cappedHeight;
+                }
+                break;
+            }
+            constrainAncestor = constrainAncestor.parentElement;
+        }
         // Restore inline styles before updating the binding
         chartHost.style.height = prevH;
         chartHost.style.maxHeight = prevMH;
@@ -1284,10 +1344,10 @@ class ChartListComponent {
         this.parentResizeObserver?.disconnect();
         this.parentResizeObserver = undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ChartListComponent, deps: [{ token: i1.Title }, { token: i0.ChangeDetectorRef }, { token: i1$1.ActivatedRoute }, { token: TranslationManagerService }, { token: UserInfoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ChartListComponent, isStandalone: true, selector: "wuic-chart-list", inputs: { hardcodedRoute: "hardcodedRoute", parentRecord: "parentRecord", parentMetaInfo: "parentMetaInfo", datasource: "datasource", hardcodedDatasource: "hardcodedDatasource", hideToolbar: "hideToolbar" }, outputs: { onChartDataSelect: "onChartDataSelect", onChartDrillDown: "onChartDrillDown", onChartDataBound: "onChartDataBound" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chartRef"], descendants: true }, { propertyName: "chartHostRef", first: true, predicate: ["chartHostRef"], descendants: true }], ngImport: i0, template: "@if (chartOptions) {\n  <div class=\"chart-list-root\">\n    @if (!hideToolbar) {\n    <div class=\"chart-list-toolbar\">\n      @if (isAdmin) {\n      <button class=\"p-element p-button p-component\" (click)=\"openConfigPopup()\">{{'chart.settings' | translate}}</button>\n      }\n      <button class=\"p-element p-button p-component\" (click)=\"exportChart()\">{{'chart.export' | translate}}</button>\n      @if (isAdmin) {\n      <button class=\"p-element p-button p-component\" (click)=\"saveChartMetadataPropsBag()\">{{ 'metadata.save_table' | translate }}</button>\n      }\n    </div>\n    }\n\n    <div class=\"chart-list-chart-host\" #chartHostRef [style.height.px]=\"chartHostHeightPx\" [style.max-height.px]=\"chartHostHeightPx\">\n      <p-chart #chartRef [type]=\"chartOptions.type\" [data]=\"data\" [options]=\"chartOptions\" width=\"100%\"\n        height=\"100%\" [responsive]=\"true\" (onDataSelect)=\"drillDown($event)\" />\n    </div>\n  </div>\n\n  <wuic-archetype-configurator\n    [visible]=\"showConfigPopup\"\n    (visibleChange)=\"showConfigPopup = $event\"\n    [archetype]=\"'chart'\"\n    [metaInfo]=\"metaInfo\"\n    [value]=\"getChartConfigValue()\"\n    (applyConfig)=\"onArchetypeConfigApply($event)\">\n  </wuic-archetype-configurator>\n}\n", styles: [":host{display:block;height:100%;min-height:0;overflow:hidden}.chart-list-root{display:flex;flex-direction:column;height:100%;width:100%;min-height:0;overflow:hidden}.chart-list-cutoff{flex:0 0 auto;padding:.5rem 0}.chart-list-toolbar{flex:0 0 auto;padding:.5rem 0;display:flex;gap:.5rem;flex-wrap:wrap}.chart-list-config{flex:0 0 auto;padding:.5rem 0}.chart-list-modal-backdrop{position:fixed;inset:0;background:#0006;z-index:1200;display:flex;align-items:center;justify-content:center;padding:1rem}.chart-list-modal{width:min(900px,100%);max-height:85vh;overflow:auto;background:#fff;color:#111827;border-radius:8px;box-shadow:0 10px 32px #00000040;padding:1rem}.chart-list-modal-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}.chart-list-modal-header h4{margin:0}.chart-list-config-row{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.5rem}.chart-list-inline{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.chart-list-inline label{display:inline-flex;align-items:center;gap:.35rem}.chart-list-type-select,.chart-list-inline select,.chart-list-input,.chart-list-input-sm{background:#fff;color:#111827;border:1px solid #d1d5db;border-radius:6px;padding:.35rem .45rem}.chart-list-config-label{font-weight:600;font-size:.9rem}.chart-list-type-select,.chart-list-input,.chart-list-input-sm{width:100%;box-sizing:border-box}.chart-list-input-sm{width:8rem}:host-context(.theme-dark) .chart-list-modal-backdrop{background:#000000a6}:host-context(.theme-dark) .chart-list-modal{background:#111827;color:#e5e7eb;box-shadow:0 10px 32px #0000008c}:host-context(.theme-dark) .chart-list-config-label,:host-context(.theme-dark) .chart-list-inline label{color:#e5e7eb}:host-context(.theme-dark) .chart-list-type-select,:host-context(.theme-dark) .chart-list-inline select,:host-context(.theme-dark) .chart-list-input,:host-context(.theme-dark) .chart-list-input-sm{background:#0f172a;color:#e5e7eb;border-color:#374151}:host-context(.theme-dark) .chart-list-type-select:focus,:host-context(.theme-dark) .chart-list-inline select:focus,:host-context(.theme-dark) .chart-list-input:focus,:host-context(.theme-dark) .chart-list-input-sm:focus{outline:1px solid #60a5fa;outline-offset:0}.chart-list-cutoff-label{display:block;font-weight:600}.chart-list-cutoff-slider{width:100%}.chart-list-chart-host{flex:1 1 auto;min-height:0;overflow:hidden}.chart-list-chart-host p-chart{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: ChartModule }, { kind: "component", type: i5.UIChart, selector: "p-chart", inputs: ["type", "plugins", "width", "height", "responsive", "ariaLabel", "ariaLabelledBy", "data", "options"], outputs: ["onDataSelect"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: ArchetypeConfiguratorComponent, selector: "wuic-archetype-configurator", inputs: ["visible", "archetype", "metaInfo", "value"], outputs: ["visibleChange", "applyConfig"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartListComponent, deps: [{ token: i1.Title }, { token: i0.ChangeDetectorRef }, { token: i1$1.ActivatedRoute }, { token: TranslationManagerService }, { token: UserInfoService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ChartListComponent, isStandalone: true, selector: "wuic-chart-list", inputs: { hardcodedRoute: "hardcodedRoute", parentRecord: "parentRecord", parentMetaInfo: "parentMetaInfo", datasource: "datasource", hardcodedDatasource: "hardcodedDatasource", hideToolbar: "hideToolbar" }, outputs: { onChartDataSelect: "onChartDataSelect", onChartDrillDown: "onChartDrillDown", onChartDataBound: "onChartDataBound" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chartRef"], descendants: true }, { propertyName: "chartHostRef", first: true, predicate: ["chartHostRef"], descendants: true }], ngImport: i0, template: "@if (chartOptions) {\n  <div class=\"chart-list-root\">\n    @if (!hideToolbar) {\n    <div class=\"chart-list-toolbar\">\n      @if (isAdmin) {\n      <button class=\"p-element p-button p-component\" (click)=\"openConfigPopup()\">{{'chart.settings' | translate}}</button>\n      }\n      <button class=\"p-element p-button p-component\" (click)=\"exportChart()\">{{'chart.export' | translate}}</button>\n      @if (isAdmin) {\n      <button class=\"p-element p-button p-component\" (click)=\"saveChartMetadataPropsBag()\">{{ 'metadata.save_table' | translate }}</button>\n      }\n    </div>\n    }\n\n    <div class=\"chart-list-chart-host\" #chartHostRef [style.height.px]=\"chartHostHeightPx\" [style.max-height.px]=\"chartHostHeightPx\">\n      <p-chart #chartRef [type]=\"chartOptions.type\" [data]=\"data\" [options]=\"chartOptions\" width=\"100%\"\n        height=\"100%\" [responsive]=\"true\" (onDataSelect)=\"drillDown($event)\" />\n    </div>\n  </div>\n\n  <wuic-archetype-configurator\n    [visible]=\"showConfigPopup\"\n    (visibleChange)=\"showConfigPopup = $event\"\n    [archetype]=\"'chart'\"\n    [metaInfo]=\"metaInfo\"\n    [value]=\"getChartConfigValue()\"\n    (applyConfig)=\"onArchetypeConfigApply($event)\">\n  </wuic-archetype-configurator>\n}\n", styles: [":host{display:block;height:100%;min-height:0;overflow:hidden}.chart-list-root{display:flex;flex-direction:column;height:100%;width:100%;min-height:0;overflow:hidden}.chart-list-cutoff{flex:0 0 auto;padding:.5rem 0}.chart-list-toolbar{flex:0 0 auto;padding:.5rem 0;display:flex;gap:.5rem;flex-wrap:wrap}.chart-list-config{flex:0 0 auto;padding:.5rem 0}.chart-list-modal-backdrop{position:fixed;inset:0;background:#0006;z-index:1200;display:flex;align-items:center;justify-content:center;padding:1rem}.chart-list-modal{width:min(900px,100%);max-height:85vh;overflow:auto;background:#fff;color:#111827;border-radius:8px;box-shadow:0 10px 32px #00000040;padding:1rem}.chart-list-modal-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}.chart-list-modal-header h4{margin:0}.chart-list-config-row{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.5rem}.chart-list-inline{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.chart-list-inline label{display:inline-flex;align-items:center;gap:.35rem}.chart-list-type-select,.chart-list-inline select,.chart-list-input,.chart-list-input-sm{background:#fff;color:#111827;border:1px solid #d1d5db;border-radius:6px;padding:.35rem .45rem}.chart-list-config-label{font-weight:600;font-size:.9rem}.chart-list-type-select,.chart-list-input,.chart-list-input-sm{width:100%;box-sizing:border-box}.chart-list-input-sm{width:8rem}:host-context(.theme-dark) .chart-list-modal-backdrop{background:#000000a6}:host-context(.theme-dark) .chart-list-modal{background:#111827;color:#e5e7eb;box-shadow:0 10px 32px #0000008c}:host-context(.theme-dark) .chart-list-config-label,:host-context(.theme-dark) .chart-list-inline label{color:#e5e7eb}:host-context(.theme-dark) .chart-list-type-select,:host-context(.theme-dark) .chart-list-inline select,:host-context(.theme-dark) .chart-list-input,:host-context(.theme-dark) .chart-list-input-sm{background:#0f172a;color:#e5e7eb;border-color:#374151}:host-context(.theme-dark) .chart-list-type-select:focus,:host-context(.theme-dark) .chart-list-inline select:focus,:host-context(.theme-dark) .chart-list-input:focus,:host-context(.theme-dark) .chart-list-input-sm:focus{outline:1px solid #60a5fa;outline-offset:0}.chart-list-cutoff-label{display:block;font-weight:600}.chart-list-cutoff-slider{width:100%}.chart-list-chart-host{flex:1 1 auto;min-height:0;overflow:hidden}.chart-list-chart-host p-chart{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: ChartModule }, { kind: "component", type: i5.UIChart, selector: "p-chart", inputs: ["type", "plugins", "width", "height", "responsive", "ariaLabel", "ariaLabelledBy", "data", "options"], outputs: ["onDataSelect"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: ArchetypeConfiguratorComponent, selector: "wuic-archetype-configurator", inputs: ["visible", "archetype", "metaInfo", "value"], outputs: ["visibleChange", "applyConfig"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ChartListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wuic-chart-list', imports: [ChartModule, TranslateModule, ArchetypeConfiguratorComponent], template: "@if (chartOptions) {\n  <div class=\"chart-list-root\">\n    @if (!hideToolbar) {\n    <div class=\"chart-list-toolbar\">\n      @if (isAdmin) {\n      <button class=\"p-element p-button p-component\" (click)=\"openConfigPopup()\">{{'chart.settings' | translate}}</button>\n      }\n      <button class=\"p-element p-button p-component\" (click)=\"exportChart()\">{{'chart.export' | translate}}</button>\n      @if (isAdmin) {\n      <button class=\"p-element p-button p-component\" (click)=\"saveChartMetadataPropsBag()\">{{ 'metadata.save_table' | translate }}</button>\n      }\n    </div>\n    }\n\n    <div class=\"chart-list-chart-host\" #chartHostRef [style.height.px]=\"chartHostHeightPx\" [style.max-height.px]=\"chartHostHeightPx\">\n      <p-chart #chartRef [type]=\"chartOptions.type\" [data]=\"data\" [options]=\"chartOptions\" width=\"100%\"\n        height=\"100%\" [responsive]=\"true\" (onDataSelect)=\"drillDown($event)\" />\n    </div>\n  </div>\n\n  <wuic-archetype-configurator\n    [visible]=\"showConfigPopup\"\n    (visibleChange)=\"showConfigPopup = $event\"\n    [archetype]=\"'chart'\"\n    [metaInfo]=\"metaInfo\"\n    [value]=\"getChartConfigValue()\"\n    (applyConfig)=\"onArchetypeConfigApply($event)\">\n  </wuic-archetype-configurator>\n}\n", styles: [":host{display:block;height:100%;min-height:0;overflow:hidden}.chart-list-root{display:flex;flex-direction:column;height:100%;width:100%;min-height:0;overflow:hidden}.chart-list-cutoff{flex:0 0 auto;padding:.5rem 0}.chart-list-toolbar{flex:0 0 auto;padding:.5rem 0;display:flex;gap:.5rem;flex-wrap:wrap}.chart-list-config{flex:0 0 auto;padding:.5rem 0}.chart-list-modal-backdrop{position:fixed;inset:0;background:#0006;z-index:1200;display:flex;align-items:center;justify-content:center;padding:1rem}.chart-list-modal{width:min(900px,100%);max-height:85vh;overflow:auto;background:#fff;color:#111827;border-radius:8px;box-shadow:0 10px 32px #00000040;padding:1rem}.chart-list-modal-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}.chart-list-modal-header h4{margin:0}.chart-list-config-row{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.5rem}.chart-list-inline{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.chart-list-inline label{display:inline-flex;align-items:center;gap:.35rem}.chart-list-type-select,.chart-list-inline select,.chart-list-input,.chart-list-input-sm{background:#fff;color:#111827;border:1px solid #d1d5db;border-radius:6px;padding:.35rem .45rem}.chart-list-config-label{font-weight:600;font-size:.9rem}.chart-list-type-select,.chart-list-input,.chart-list-input-sm{width:100%;box-sizing:border-box}.chart-list-input-sm{width:8rem}:host-context(.theme-dark) .chart-list-modal-backdrop{background:#000000a6}:host-context(.theme-dark) .chart-list-modal{background:#111827;color:#e5e7eb;box-shadow:0 10px 32px #0000008c}:host-context(.theme-dark) .chart-list-config-label,:host-context(.theme-dark) .chart-list-inline label{color:#e5e7eb}:host-context(.theme-dark) .chart-list-type-select,:host-context(.theme-dark) .chart-list-inline select,:host-context(.theme-dark) .chart-list-input,:host-context(.theme-dark) .chart-list-input-sm{background:#0f172a;color:#e5e7eb;border-color:#374151}:host-context(.theme-dark) .chart-list-type-select:focus,:host-context(.theme-dark) .chart-list-inline select:focus,:host-context(.theme-dark) .chart-list-input:focus,:host-context(.theme-dark) .chart-list-input-sm:focus{outline:1px solid #60a5fa;outline-offset:0}.chart-list-cutoff-label{display:block;font-weight:600}.chart-list-cutoff-slider{width:100%}.chart-list-chart-host{flex:1 1 auto;min-height:0;overflow:hidden}.chart-list-chart-host p-chart{display:block;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1.Title }, { type: i0.ChangeDetectorRef }, { type: i1$1.ActivatedRoute }, { type: TranslationManagerService }, { type: UserInfoService }], propDecorators: { hardcodedRoute: [{
@@ -1317,4 +1377,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
             }] } });
 
 export { ChartListComponent };
-//# sourceMappingURL=wuic-framework-lib-chart-list.component-vuzmQW9F.mjs.map
+//# sourceMappingURL=wuic-framework-lib-chart-list.component-B44k_wZe.mjs.map