eru-grid 0.0.31 → 0.0.32

package/fesm2022/eru-grid.mjs

@@ -2556,6 +2556,11 @@ class EruGridStore {
     // Consumers (e.g. eru-studio) listen to persist the design back into their config.
     _columnDesignUpdate = signal(null, ...(ngDevMode ? [{ debugName: "_columnDesignUpdate" }] : []));
     columnDesignUpdate = this._columnDesignUpdate.asReadonly();
+    // Emits ONLY the changed attribute(s) for a single column on each design edit.
+    // Lets consumers store per-column overrides (deltas) rather than a full snapshot,
+    // so non-overridden attributes keep flowing from their source (e.g. entity fields).
+    _columnMetaPatch = signal(null, ...(ngDevMode ? [{ debugName: "_columnMetaPatch" }] : []));
+    columnMetaPatch = this._columnMetaPatch.asReadonly();
     // Computed signals
     columns = this._columns.asReadonly();
     groups = this._groups.asReadonly();
@@ -2799,6 +2804,7 @@ class EruGridStore {
         const columns = this.columns().map(col => col.name === columnName ? { ...col, ...patch } : col);
         this.setColumns(columns);
         this._columnDesignUpdate.set(this.columns());
+        this._columnMetaPatch.set({ name: columnName, patch });
     }
     selectDesignColumn(columnName) {
         this._selectedDesignColumn.set(columnName);
@@ -3080,7 +3086,6 @@ class EruGridStore {
     transformToPivot() {
         // Prefer explicit pivot configuration signal, fall back to configuration().pivot
         const pivotConfig = this.pivotConfiguration() || this.configuration().pivot;
-        console.log('transformToPivot', pivotConfig, this.configuration().data, this.pivotResult());
         // Prefer explicit source data, fall back to all loaded group rows
         let sourceData = this.configuration().data || [];
         if (sourceData.length === 0) {
@@ -3290,7 +3295,6 @@ class EruGridStore {
         this.updateGroupLoadingState(groupId, false);
     }
     resetGroupRows() {
-        console.log('resetGroupRows');
         this._groupRows.set(new Map());
     }
     /**
@@ -3644,7 +3648,6 @@ class EruGridService {
      * Switch grid to table mode or pivot mode
      */
     set_grid_mode(mode) {
-        console.log('set_grid_mode called for ', mode);
         if (mode === 'pivot') {
             this.eruGridStore.setGridMode('pivot');
         }
@@ -6454,6 +6457,17 @@ class ProgressComponent {
         // Clamp between 0 and 100
         return Math.max(0, Math.min(100, numVal));
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    // Bar colour from the column's configured value ranges (e.g. 0-20 green).
+    // Applies in both editable and view/disabled modes. Null when no range
+    // matches, so the bar falls back to the default theme colour.
+    barColor = computed(() => {
+        const ranges = this.config()?.color_ranges;
+        if (!Array.isArray(ranges) || ranges.length === 0)
+            return null;
+        const v = this.displayValue();
+        const match = ranges.find((r) => v >= Number(r?.from) && v <= Number(r?.to));
+        return match?.color || null;
+    }, ...(ngDevMode ? [{ debugName: "barColor" }] : []));
     constructor() {
         // Sync signal-based input with internal state
         effect(() => {
@@ -6504,11 +6518,11 @@ class ProgressComponent {
         return cfg[property];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: ProgressComponent, isStandalone: true, selector: "eru-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, isEditable: { classPropertyName: "isEditable", publicName: "isEditable", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isDrillable: { classPropertyName: "isDrillable", publicName: "isDrillable", isSignal: true, isRequired: false, transformFunction: null }, columnWidth: { classPropertyName: "columnWidth", publicName: "columnWidth", isSignal: true, isRequired: false, transformFunction: null }, fieldSize: { classPropertyName: "fieldSize", publicName: "fieldSize", isSignal: true, isRequired: false, transformFunction: null }, eruGridStore: { classPropertyName: "eruGridStore", publicName: "eruGridStore", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus", drilldownClick: "drilldownClick", editModeChange: "editModeChange" }, ngImport: i0, template: "<div class=\"progress-input-container\" [class.disabled]=\"!isActive()\" (dblclick)=\"onActivate(); $event.stopPropagation()\">\n  <span class=\"progress-value\">{{displayValue()}}%</span>\n  <mat-slider \n    class=\"progress-slider\" \n    [min]=\"0\" \n    [max]=\"100\" \n    [step]=\"1\" \n    [discrete]=\"true\" \n    [showTickMarks]=\"true\"\n    [disabled]=\"!isActive()\">\n    <input \n      matSliderThumb \n      [ngModel]=\"displayValue()\" \n      (ngModelChange)=\"onValueChange($event)\" \n      (blur)=\"onBlur()\"\n      [disabled]=\"!isActive()\">\n  </mat-slider>\n</div>\n\n", styles: [":root{--mat-slider-with-overlap-handle-outline-color: var(--grid-primary, #6750a4) !important;--mat-slider-with-tick-marks-active-container-color: var(--grid-primary, #6750a4) !important;--mat-slider-handle-height: 12px;--mat-slider-handle-width: 12px;--mat-slider-disabled-active-track-color: var(--grid-primary, #6750a4);--mat-slider-active-track-color: var(--grid-primary, #6750a4)}:host{display:block;height:100%;width:100%}.progress-bar-container{width:100%;height:100%;min-height:30px;position:relative;background:#e0e0e0;border-radius:4px;cursor:pointer}.progress-bar{height:100%;background:var(--grid-primary, #6750a4);transition:width .3s;border-radius:4px}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:var(--grid-font-size-body, 12px);font-weight:500;color:var(--grid-on-surface, #1d1b20);pointer-events:none;z-index:1}.drillable-value{color:inherit;text-decoration:underline;cursor:pointer;pointer-events:auto}.drillable-value:hover{opacity:.8}.progress-input-container{display:flex;flex-direction:row-reverse;align-items:center;padding:4px;width:100%;box-sizing:border-box;overflow:visible;max-height:30px}.progress-input-container.disabled{cursor:pointer}.progress-input-container.disabled .progress-slider{pointer-events:none}.progress-value{font-size:var(--grid-font-size-body, 12px);font-weight:500;color:var(--grid-on-surface, #1d1b20);flex:0 0 auto;min-width:35px;text-align:right;white-space:nowrap;flex-shrink:0}.progress-slider{flex:1 1 0%;min-width:0!important;max-width:100%!important;overflow:visible}.progress-slider .mdc-slider__track{left:0!important}.progress-slider .mdc-slider{padding-left:0!important;margin-left:0!important}.progress-slider .mdc-slider__value-indicator,.progress-slider .mdc-slider__value-indicator-container{display:none!important;visibility:hidden!important}.progress-slider .mdc-slider__thumb:before,.progress-slider .mdc-slider__thumb:after{display:none!important;content:none!important}.progress-slider .mdc-slider__thumb-knob:before,.progress-slider .mdc-slider__thumb-knob:after{display:none!important;content:none!important}.progress-slider [class*=value-indicator],.progress-slider [class*=tooltip]{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i2$3.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2$3.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: ProgressComponent, isStandalone: true, selector: "eru-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, isEditable: { classPropertyName: "isEditable", publicName: "isEditable", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isDrillable: { classPropertyName: "isDrillable", publicName: "isDrillable", isSignal: true, isRequired: false, transformFunction: null }, columnWidth: { classPropertyName: "columnWidth", publicName: "columnWidth", isSignal: true, isRequired: false, transformFunction: null }, fieldSize: { classPropertyName: "fieldSize", publicName: "fieldSize", isSignal: true, isRequired: false, transformFunction: null }, eruGridStore: { classPropertyName: "eruGridStore", publicName: "eruGridStore", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus", drilldownClick: "drilldownClick", editModeChange: "editModeChange" }, ngImport: i0, template: "<div class=\"progress-input-container\" [class.disabled]=\"!isActive()\"\n  [style.--mat-slider-active-track-color]=\"barColor()\"\n  [style.--mat-slider-disabled-active-track-color]=\"barColor()\"\n  [style.--mat-slider-with-tick-marks-active-container-color]=\"barColor()\"\n  [style.--mat-slider-handle-color]=\"barColor()\"\n  [style.--mat-slider-focus-handle-color]=\"barColor()\"\n  [style.--mat-slider-hover-handle-color]=\"barColor()\"\n  [style.--mat-slider-disabled-handle-color]=\"barColor()\"\n  [style.--mat-slider-ripple-color]=\"barColor()\"\n  (dblclick)=\"onActivate(); $event.stopPropagation()\">\n  <span class=\"progress-value\" [style.color]=\"barColor()\">{{displayValue()}}%</span>\n  <mat-slider \n    class=\"progress-slider\" \n    [min]=\"0\" \n    [max]=\"100\" \n    [step]=\"1\" \n    [discrete]=\"true\" \n    [showTickMarks]=\"true\"\n    [disabled]=\"!isActive()\">\n    <input \n      matSliderThumb \n      [ngModel]=\"displayValue()\" \n      (ngModelChange)=\"onValueChange($event)\" \n      (blur)=\"onBlur()\"\n      [disabled]=\"!isActive()\">\n  </mat-slider>\n</div>\n\n", styles: [":root{--mat-slider-with-overlap-handle-outline-color: var(--grid-primary, #6750a4) !important;--mat-slider-with-tick-marks-active-container-color: var(--grid-primary, #6750a4) !important;--mat-slider-handle-height: 12px;--mat-slider-handle-width: 12px;--mat-slider-disabled-active-track-color: var(--grid-primary, #6750a4);--mat-slider-active-track-color: var(--grid-primary, #6750a4)}:host{display:block;height:100%;width:100%}.progress-bar-container{width:100%;height:100%;min-height:30px;position:relative;background:#e0e0e0;border-radius:4px;cursor:pointer}.progress-bar{height:100%;background:var(--grid-primary, #6750a4);transition:width .3s;border-radius:4px}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:var(--grid-font-size-body, 12px);font-weight:500;color:var(--grid-on-surface, #1d1b20);pointer-events:none;z-index:1}.drillable-value{color:inherit;text-decoration:underline;cursor:pointer;pointer-events:auto}.drillable-value:hover{opacity:.8}.progress-input-container{display:flex;flex-direction:row-reverse;align-items:center;padding:4px;width:100%;box-sizing:border-box;overflow:visible;max-height:30px}.progress-input-container.disabled{cursor:pointer}.progress-input-container.disabled .progress-slider{pointer-events:none}.progress-value{font-size:var(--grid-font-size-body, 12px);font-weight:500;color:var(--grid-on-surface, #1d1b20);flex:0 0 auto;min-width:35px;text-align:right;white-space:nowrap;flex-shrink:0}.progress-slider{flex:1 1 0%;min-width:0!important;max-width:100%!important;overflow:visible}.progress-slider .mdc-slider__track{left:0!important}.progress-slider .mdc-slider{padding-left:0!important;margin-left:0!important}.progress-slider .mdc-slider__value-indicator,.progress-slider .mdc-slider__value-indicator-container{display:none!important;visibility:hidden!important}.progress-slider .mdc-slider__thumb:before,.progress-slider .mdc-slider__thumb:after{display:none!important;content:none!important}.progress-slider .mdc-slider__thumb-knob:before,.progress-slider .mdc-slider__thumb-knob:after{display:none!important;content:none!important}.progress-slider [class*=value-indicator],.progress-slider [class*=tooltip]{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i2$3.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2$3.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ProgressComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eru-progress', standalone: true, imports: [FormsModule, MatSliderModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"progress-input-container\" [class.disabled]=\"!isActive()\" (dblclick)=\"onActivate(); $event.stopPropagation()\">\n  <span class=\"progress-value\">{{displayValue()}}%</span>\n  <mat-slider \n    class=\"progress-slider\" \n    [min]=\"0\" \n    [max]=\"100\" \n    [step]=\"1\" \n    [discrete]=\"true\" \n    [showTickMarks]=\"true\"\n    [disabled]=\"!isActive()\">\n    <input \n      matSliderThumb \n      [ngModel]=\"displayValue()\" \n      (ngModelChange)=\"onValueChange($event)\" \n      (blur)=\"onBlur()\"\n      [disabled]=\"!isActive()\">\n  </mat-slider>\n</div>\n\n", styles: [":root{--mat-slider-with-overlap-handle-outline-color: var(--grid-primary, #6750a4) !important;--mat-slider-with-tick-marks-active-container-color: var(--grid-primary, #6750a4) !important;--mat-slider-handle-height: 12px;--mat-slider-handle-width: 12px;--mat-slider-disabled-active-track-color: var(--grid-primary, #6750a4);--mat-slider-active-track-color: var(--grid-primary, #6750a4)}:host{display:block;height:100%;width:100%}.progress-bar-container{width:100%;height:100%;min-height:30px;position:relative;background:#e0e0e0;border-radius:4px;cursor:pointer}.progress-bar{height:100%;background:var(--grid-primary, #6750a4);transition:width .3s;border-radius:4px}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:var(--grid-font-size-body, 12px);font-weight:500;color:var(--grid-on-surface, #1d1b20);pointer-events:none;z-index:1}.drillable-value{color:inherit;text-decoration:underline;cursor:pointer;pointer-events:auto}.drillable-value:hover{opacity:.8}.progress-input-container{display:flex;flex-direction:row-reverse;align-items:center;padding:4px;width:100%;box-sizing:border-box;overflow:visible;max-height:30px}.progress-input-container.disabled{cursor:pointer}.progress-input-container.disabled .progress-slider{pointer-events:none}.progress-value{font-size:var(--grid-font-size-body, 12px);font-weight:500;color:var(--grid-on-surface, #1d1b20);flex:0 0 auto;min-width:35px;text-align:right;white-space:nowrap;flex-shrink:0}.progress-slider{flex:1 1 0%;min-width:0!important;max-width:100%!important;overflow:visible}.progress-slider .mdc-slider__track{left:0!important}.progress-slider .mdc-slider{padding-left:0!important;margin-left:0!important}.progress-slider .mdc-slider__value-indicator,.progress-slider .mdc-slider__value-indicator-container{display:none!important;visibility:hidden!important}.progress-slider .mdc-slider__thumb:before,.progress-slider .mdc-slider__thumb:after{display:none!important;content:none!important}.progress-slider .mdc-slider__thumb-knob:before,.progress-slider .mdc-slider__thumb-knob:after{display:none!important;content:none!important}.progress-slider [class*=value-indicator],.progress-slider [class*=tooltip]{display:none!important}\n"] }]
+            args: [{ selector: 'eru-progress', standalone: true, imports: [FormsModule, MatSliderModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"progress-input-container\" [class.disabled]=\"!isActive()\"\n  [style.--mat-slider-active-track-color]=\"barColor()\"\n  [style.--mat-slider-disabled-active-track-color]=\"barColor()\"\n  [style.--mat-slider-with-tick-marks-active-container-color]=\"barColor()\"\n  [style.--mat-slider-handle-color]=\"barColor()\"\n  [style.--mat-slider-focus-handle-color]=\"barColor()\"\n  [style.--mat-slider-hover-handle-color]=\"barColor()\"\n  [style.--mat-slider-disabled-handle-color]=\"barColor()\"\n  [style.--mat-slider-ripple-color]=\"barColor()\"\n  (dblclick)=\"onActivate(); $event.stopPropagation()\">\n  <span class=\"progress-value\" [style.color]=\"barColor()\">{{displayValue()}}%</span>\n  <mat-slider \n    class=\"progress-slider\" \n    [min]=\"0\" \n    [max]=\"100\" \n    [step]=\"1\" \n    [discrete]=\"true\" \n    [showTickMarks]=\"true\"\n    [disabled]=\"!isActive()\">\n    <input \n      matSliderThumb \n      [ngModel]=\"displayValue()\" \n      (ngModelChange)=\"onValueChange($event)\" \n      (blur)=\"onBlur()\"\n      [disabled]=\"!isActive()\">\n  </mat-slider>\n</div>\n\n", styles: [":root{--mat-slider-with-overlap-handle-outline-color: var(--grid-primary, #6750a4) !important;--mat-slider-with-tick-marks-active-container-color: var(--grid-primary, #6750a4) !important;--mat-slider-handle-height: 12px;--mat-slider-handle-width: 12px;--mat-slider-disabled-active-track-color: var(--grid-primary, #6750a4);--mat-slider-active-track-color: var(--grid-primary, #6750a4)}:host{display:block;height:100%;width:100%}.progress-bar-container{width:100%;height:100%;min-height:30px;position:relative;background:#e0e0e0;border-radius:4px;cursor:pointer}.progress-bar{height:100%;background:var(--grid-primary, #6750a4);transition:width .3s;border-radius:4px}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:var(--grid-font-size-body, 12px);font-weight:500;color:var(--grid-on-surface, #1d1b20);pointer-events:none;z-index:1}.drillable-value{color:inherit;text-decoration:underline;cursor:pointer;pointer-events:auto}.drillable-value:hover{opacity:.8}.progress-input-container{display:flex;flex-direction:row-reverse;align-items:center;padding:4px;width:100%;box-sizing:border-box;overflow:visible;max-height:30px}.progress-input-container.disabled{cursor:pointer}.progress-input-container.disabled .progress-slider{pointer-events:none}.progress-value{font-size:var(--grid-font-size-body, 12px);font-weight:500;color:var(--grid-on-surface, #1d1b20);flex:0 0 auto;min-width:35px;text-align:right;white-space:nowrap;flex-shrink:0}.progress-slider{flex:1 1 0%;min-width:0!important;max-width:100%!important;overflow:visible}.progress-slider .mdc-slider__track{left:0!important}.progress-slider .mdc-slider{padding-left:0!important;margin-left:0!important}.progress-slider .mdc-slider__value-indicator,.progress-slider .mdc-slider__value-indicator-container{display:none!important;visibility:hidden!important}.progress-slider .mdc-slider__thumb:before,.progress-slider .mdc-slider__thumb:after{display:none!important;content:none!important}.progress-slider .mdc-slider__thumb-knob:before,.progress-slider .mdc-slider__thumb-knob:after{display:none!important;content:none!important}.progress-slider [class*=value-indicator],.progress-slider [class*=tooltip]{display:none!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], isEditable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditable", required: false }] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], isDrillable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDrillable", required: false }] }], columnWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnWidth", required: false }] }], fieldSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldSize", required: false }] }], eruGridStore: [{ type: i0.Input, args: [{ isSignal: true, alias: "eruGridStore", required: false }] }], valueChange: [{
                 type: Output
             }], blur: [{
@@ -7054,8 +7068,6 @@ class StatusComponent {
             openOptions = filter(openOptions);
             closeOptions = filter(closeOptions);
         }
-        console.log('openOptions', openOptions);
-        console.log('closeOptions', closeOptions);
         return { open: openOptions, close: closeOptions };
     }, ...(ngDevMode ? [{ debugName: "groupedOptions" }] : []));
     filteredOptions = computed(() => {
@@ -8310,7 +8322,6 @@ class AttachmentComponent {
             this.pendingViewRequests.forEach((requestKey, fileName) => {
                 if (dynamicDataMap.has(requestKey)) {
                     const data = dynamicDataMap.get(requestKey);
-                    console.log('[eru-attachment] view-file response received', { requestKey, data });
                     if (data && data.file && data.file_type) {
                         this.openBase64InNewTab(data.file, data.file_type, fileName);
                     }
@@ -8485,7 +8496,6 @@ class AttachmentComponent {
         const requestKey = `ds_view_file_grid:${file}`;
         this.pendingViewRequests.set(file, requestKey);
         store.setDynamicDataRequest(requestKey);
-        console.log('[eru-attachment] view-file request fired', { requestKey });
     }
     openBase64InNewTab(base64, fileType, fileName) {
         try {
@@ -9749,7 +9759,6 @@ class DataCellComponent {
         // })
     }
     fileInputChange(e) {
-        debugger;
         Array.from(e.target.files).forEach((file) => {
             this.processFile(file);
         });
@@ -10406,8 +10415,8 @@ const OPTION_FIELDS = [
         showWhen: f => f.option_type === 'API',
     },
 ];
-// Priority options are always static and carry a colour — no option source.
-const PRIORITY_FIELDS = [
+// Priority and tag options are always static and carry a colour — no option source.
+const STATIC_COLOR_OPTION_FIELDS = [
     { key: 'options', label: 'Options', control: 'color_list', defaultColor: '#9CA3AF' },
 ];
 const DATATYPE_FIELDS = {
@@ -10415,8 +10424,8 @@ const DATATYPE_FIELDS = {
     currency: NUMBER_FIELDS,
     dropdown_single_select: OPTION_FIELDS,
     dropdown_multi_select: OPTION_FIELDS,
-    tag: OPTION_FIELDS,
-    priority: PRIORITY_FIELDS,
+    tag: STATIC_COLOR_OPTION_FIELDS,
+    priority: STATIC_COLOR_OPTION_FIELDS,
     status: [
         { key: 'open_status', label: 'Open statuses', control: 'color_list', defaultColor: '#22C55E' },
         { key: 'close_status', label: 'Close statuses', control: 'color_list', defaultColor: '#EF4444' },
@@ -10433,6 +10442,9 @@ const DATATYPE_FIELDS = {
     ],
     phone: [{ key: 'default_country', label: 'Default country (ISO)', control: 'text' }],
     textbox: [{ key: 'data_length', label: 'Max length', control: 'number' }],
+    progress: [
+        { key: 'color_ranges', label: 'Colour ranges (by %)', control: 'range_color_list' },
+    ],
 };
 function getMetaFields(field) {
     if (!field)
@@ -10508,11 +10520,40 @@ class ColumnDesignPanelComponent {
         const items = this.colorListItems(key).map((it, i) => i === index ? { ...it, color } : it);
         this.patch(key, items);
     }
+    // ── Range-colour-list control (value ranges -> colour, e.g. progress) ──
+    rangeListItems(key) {
+        const arr = this.field()?.[key];
+        if (!Array.isArray(arr))
+            return [];
+        return arr.map(it => ({
+            from: Number(it?.from) || 0,
+            to: Number(it?.to) || 0,
+            color: it?.color ?? '#22C55E',
+        }));
+    }
+    addRangeItem(key) {
+        const items = this.rangeListItems(key);
+        const lastTo = items.length ? items[items.length - 1].to : -1;
+        const from = Math.min(100, lastTo + 1);
+        this.patch(key, [...items, { from, to: 100, color: '#22C55E' }]);
+    }
+    removeRangeItem(key, index) {
+        this.patch(key, this.rangeListItems(key).filter((_, i) => i !== index));
+    }
+    onRangeChange(key, index, prop, value) {
+        const num = value === '' ? 0 : Number(value);
+        const items = this.rangeListItems(key).map((it, i) => i === index ? { ...it, [prop]: num } : it);
+        this.patch(key, items);
+    }
+    onRangeColorChange(key, index, color) {
+        const items = this.rangeListItems(key).map((it, i) => i === index ? { ...it, color } : it);
+        this.patch(key, items);
+    }
     close() {
         this.gridStore.selectDesignColumn(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ColumnDesignPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ColumnDesignPanelComponent, isStandalone: true, selector: "eru-column-design-panel", ngImport: i0, template: "@if (isOpen()) {\n<div class=\"design-panel-backdrop\" (click)=\"close()\"></div>\n}\n<aside class=\"column-design-panel\" [class.open]=\"isOpen()\">\n  @if (field(); as col) {\n  <header class=\"design-panel-header\">\n    <div class=\"design-panel-title\">\n      <mat-icon>tune</mat-icon>\n      <span>{{ col.label || col.name }}</span>\n    </div>\n    <button mat-icon-button (click)=\"close()\" title=\"Close\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </header>\n\n  <div class=\"design-panel-body\">\n    @for (def of metaFields(); track def.key) {\n    <div class=\"design-field\">\n      @switch (def.control) {\n\n      @case ('text') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <input matInput [ngModel]=\"getValue(def.key)\" (ngModelChange)=\"onText(def.key, $event)\" />\n      </mat-form-field>\n      }\n\n      @case ('number') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <input matInput type=\"number\" [ngModel]=\"getValue(def.key)\" (ngModelChange)=\"onNumber(def.key, $event)\" />\n      </mat-form-field>\n      }\n\n      @case ('select') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <mat-select [ngModel]=\"getValue(def.key)\" (ngModelChange)=\"onSelect(def.key, $event)\">\n          @for (opt of def.options; track opt.value) {\n          <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      }\n\n      @case ('checkbox') {\n      <mat-checkbox [checked]=\"!!getValue(def.key)\" (change)=\"onCheckbox(def.key, $event.checked)\">\n        {{ def.label }}\n      </mat-checkbox>\n      }\n\n      @case ('list') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <textarea matInput rows=\"4\" [ngModel]=\"listText(def.key)\"\n          (ngModelChange)=\"onList(def.key, $event)\"></textarea>\n      </mat-form-field>\n      }\n\n      @case ('color_list') {\n      <div class=\"color-list\">\n        <label class=\"color-list-label\">{{ def.label }}</label>\n        <div class=\"color-list-chips\">\n          @for (opt of colorListItems(def.key); track $index) {\n          <div class=\"color-list-chip\">\n            <input type=\"color\" class=\"color-list-dot\" [value]=\"opt.color || '#9CA3AF'\"\n              (input)=\"onColorListColorChange(def.key, $index, $any($event.target).value)\" title=\"Change colour\" />\n            <span class=\"color-list-name\">{{ opt.name }}</span>\n            <button type=\"button\" class=\"color-list-remove\" (click)=\"removeColorListItem(def.key, $index)\"\n              title=\"Remove\">&times;</button>\n          </div>\n          }\n        </div>\n        <input class=\"color-list-add\" type=\"text\" placeholder=\"Add option, press Enter\"\n          (keydown.enter)=\"addColorListItem(def.key, $any($event.target).value, def.defaultColor || '#9CA3AF'); $any($event.target).value = ''\" />\n      </div>\n      }\n\n      }\n    </div>\n    }\n  </div>\n  }\n</aside>\n", styles: [".design-panel-backdrop{position:fixed;inset:0;background:#0000002e;z-index:1000}.column-design-panel{position:fixed;top:0;right:0;bottom:0;width:360px;max-width:90vw;background:var(--grid-surface, #fff);box-shadow:-4px 0 16px #00000029;transform:translate(100%);transition:transform .22s ease;z-index:1001;display:flex;flex-direction:column;font-family:var(--grid-font-family, inherit)}.column-design-panel.open{transform:translate(0)}.design-panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--grid-border-color, #e0e0e0)}.design-panel-header .design-panel-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.design-panel-body{padding:16px;overflow-y:auto;flex:1}.design-panel-body .design-field{margin-bottom:4px}.design-panel-body .design-field .full-width{width:100%}.design-panel-body .design-field mat-checkbox{display:block;margin:8px 0 16px}.design-panel-body .color-list{margin:4px 0 16px}.design-panel-body .color-list .color-list-label{display:block;font-size:12px;color:var(--grid-on-surface-variant, #49454f);margin-bottom:6px}.design-panel-body .color-list .color-list-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.design-panel-body .color-list .color-list-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 4px;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:16px;background:var(--grid-surface, #fff);font-size:12px}.design-panel-body .color-list .color-list-dot{width:18px;height:18px;padding:0;border:none;background:none;border-radius:50%;cursor:pointer}.design-panel-body .color-list .color-list-remove{border:none;background:none;cursor:pointer;font-size:14px;line-height:1;color:var(--grid-on-surface-variant, #49454f)}.design-panel-body .color-list .color-list-remove:hover{color:var(--grid-error, #b3261e)}.design-panel-body .color-list .color-list-add{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:6px;font-size:13px;outline:none}.design-panel-body .color-list .color-list-add:focus{border-color:var(--grid-primary, #6750a4)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$2.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: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ColumnDesignPanelComponent, isStandalone: true, selector: "eru-column-design-panel", ngImport: i0, template: "@if (isOpen()) {\n<div class=\"design-panel-backdrop\" (click)=\"close()\"></div>\n}\n<aside class=\"column-design-panel\" [class.open]=\"isOpen()\">\n  @if (field(); as col) {\n  <header class=\"design-panel-header\">\n    <div class=\"design-panel-title\">\n      <mat-icon>tune</mat-icon>\n      <span>{{ col.label || col.name }}</span>\n    </div>\n    <button mat-icon-button (click)=\"close()\" title=\"Close\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </header>\n\n  <div class=\"design-panel-body\">\n    @for (def of metaFields(); track def.key) {\n    <div class=\"design-field\">\n      @switch (def.control) {\n\n      @case ('text') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <input matInput [ngModel]=\"getValue(def.key)\" (ngModelChange)=\"onText(def.key, $event)\" />\n      </mat-form-field>\n      }\n\n      @case ('number') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <input matInput type=\"number\" [ngModel]=\"getValue(def.key)\" (ngModelChange)=\"onNumber(def.key, $event)\" />\n      </mat-form-field>\n      }\n\n      @case ('select') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <mat-select [ngModel]=\"getValue(def.key)\" (ngModelChange)=\"onSelect(def.key, $event)\">\n          @for (opt of def.options; track opt.value) {\n          <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      }\n\n      @case ('checkbox') {\n      <mat-checkbox [checked]=\"!!getValue(def.key)\" (change)=\"onCheckbox(def.key, $event.checked)\">\n        {{ def.label }}\n      </mat-checkbox>\n      }\n\n      @case ('list') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <textarea matInput rows=\"4\" [ngModel]=\"listText(def.key)\"\n          (ngModelChange)=\"onList(def.key, $event)\"></textarea>\n      </mat-form-field>\n      }\n\n      @case ('color_list') {\n      <div class=\"color-list\">\n        <label class=\"color-list-label\">{{ def.label }}</label>\n        <div class=\"color-list-chips\">\n          @for (opt of colorListItems(def.key); track $index) {\n          <div class=\"color-list-chip\">\n            <input type=\"color\" class=\"color-list-dot\" [value]=\"opt.color || '#9CA3AF'\"\n              (input)=\"onColorListColorChange(def.key, $index, $any($event.target).value)\" title=\"Change colour\" />\n            <span class=\"color-list-name\">{{ opt.name }}</span>\n            <button type=\"button\" class=\"color-list-remove\" (click)=\"removeColorListItem(def.key, $index)\"\n              title=\"Remove\">&times;</button>\n          </div>\n          }\n        </div>\n        <input class=\"color-list-add\" type=\"text\" placeholder=\"Add option, press Enter\"\n          (keydown.enter)=\"addColorListItem(def.key, $any($event.target).value, def.defaultColor || '#9CA3AF'); $any($event.target).value = ''\" />\n      </div>\n      }\n\n      @case ('range_color_list') {\n      <div class=\"range-list\">\n        <label class=\"range-list-label\">{{ def.label }}</label>\n        @for (r of rangeListItems(def.key); track $index) {\n        <div class=\"range-list-row\">\n          <input type=\"number\" class=\"range-list-num\" min=\"0\" max=\"100\" [value]=\"r.from\"\n            (input)=\"onRangeChange(def.key, $index, 'from', $any($event.target).value)\" title=\"From\" />\n          <span class=\"range-list-sep\">\u2013</span>\n          <input type=\"number\" class=\"range-list-num\" min=\"0\" max=\"100\" [value]=\"r.to\"\n            (input)=\"onRangeChange(def.key, $index, 'to', $any($event.target).value)\" title=\"To\" />\n          <input type=\"color\" class=\"range-list-color\" [value]=\"r.color || '#22C55E'\"\n            (input)=\"onRangeColorChange(def.key, $index, $any($event.target).value)\" title=\"Colour\" />\n          <button type=\"button\" class=\"range-list-remove\" (click)=\"removeRangeItem(def.key, $index)\"\n            title=\"Remove\">&times;</button>\n        </div>\n        }\n        <button type=\"button\" class=\"range-list-add\" (click)=\"addRangeItem(def.key)\">+ Add range</button>\n      </div>\n      }\n\n      }\n    </div>\n    }\n  </div>\n  }\n</aside>\n", styles: [".design-panel-backdrop{position:fixed;inset:0;background:#0000002e;z-index:1000}.column-design-panel{position:fixed;top:0;right:0;bottom:0;width:360px;max-width:90vw;background:var(--grid-surface, #fff);box-shadow:-4px 0 16px #00000029;transform:translate(100%);transition:transform .22s ease;z-index:1001;display:flex;flex-direction:column;font-family:var(--grid-font-family, inherit)}.column-design-panel.open{transform:translate(0)}.design-panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--grid-border-color, #e0e0e0)}.design-panel-header .design-panel-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.design-panel-body{padding:16px;overflow-y:auto;flex:1}.design-panel-body .design-field{margin-bottom:4px}.design-panel-body .design-field .full-width{width:100%}.design-panel-body .design-field mat-checkbox{display:block;margin:8px 0 16px}.design-panel-body .color-list{margin:4px 0 16px}.design-panel-body .color-list .color-list-label{display:block;font-size:12px;color:var(--grid-on-surface-variant, #49454f);margin-bottom:6px}.design-panel-body .color-list .color-list-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.design-panel-body .color-list .color-list-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 4px;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:16px;background:var(--grid-surface, #fff);font-size:12px}.design-panel-body .color-list .color-list-dot{width:18px;height:18px;padding:0;border:none;background:none;border-radius:50%;cursor:pointer}.design-panel-body .color-list .color-list-remove{border:none;background:none;cursor:pointer;font-size:14px;line-height:1;color:var(--grid-on-surface-variant, #49454f)}.design-panel-body .color-list .color-list-remove:hover{color:var(--grid-error, #b3261e)}.design-panel-body .color-list .color-list-add{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:6px;font-size:13px;outline:none}.design-panel-body .color-list .color-list-add:focus{border-color:var(--grid-primary, #6750a4)}.range-list{margin:4px 0 16px}.range-list .range-list-label{display:block;font-size:12px;color:var(--grid-on-surface-variant, #49454f);margin-bottom:6px}.range-list .range-list-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}.range-list .range-list-num{width:56px;padding:6px 8px;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:6px;font-size:13px;outline:none}.range-list .range-list-num:focus{border-color:var(--grid-primary, #6750a4)}.range-list .range-list-sep{color:var(--grid-on-surface-variant, #49454f)}.range-list .range-list-color{width:28px;height:28px;padding:0;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:6px;background:none;cursor:pointer}.range-list .range-list-remove{margin-left:auto;border:none;background:none;cursor:pointer;font-size:18px;line-height:1;color:var(--grid-on-surface-variant, #49454f)}.range-list .range-list-remove:hover{color:var(--grid-error, #b3261e)}.range-list .range-list-add{margin-top:2px;padding:6px 10px;border:1px dashed var(--grid-outline-variant, #cac4d0);border-radius:6px;background:none;font-size:13px;cursor:pointer;color:var(--grid-primary, #6750a4)}.range-list .range-list-add:hover{background:var(--grid-surface-variant, #f3edf7)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$2.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: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ColumnDesignPanelComponent, decorators: [{
             type: Component,
@@ -10525,7 +10566,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                         MatCheckboxModule,
                         MatIconModule,
                         MatButtonModule,
-                    ], template: "@if (isOpen()) {\n<div class=\"design-panel-backdrop\" (click)=\"close()\"></div>\n}\n<aside class=\"column-design-panel\" [class.open]=\"isOpen()\">\n  @if (field(); as col) {\n  <header class=\"design-panel-header\">\n    <div class=\"design-panel-title\">\n      <mat-icon>tune</mat-icon>\n      <span>{{ col.label || col.name }}</span>\n    </div>\n    <button mat-icon-button (click)=\"close()\" title=\"Close\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </header>\n\n  <div class=\"design-panel-body\">\n    @for (def of metaFields(); track def.key) {\n    <div class=\"design-field\">\n      @switch (def.control) {\n\n      @case ('text') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <input matInput [ngModel]=\"getValue(def.key)\" (ngModelChange)=\"onText(def.key, $event)\" />\n      </mat-form-field>\n      }\n\n      @case ('number') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <input matInput type=\"number\" [ngModel]=\"getValue(def.key)\" (ngModelChange)=\"onNumber(def.key, $event)\" />\n      </mat-form-field>\n      }\n\n      @case ('select') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <mat-select [ngModel]=\"getValue(def.key)\" (ngModelChange)=\"onSelect(def.key, $event)\">\n          @for (opt of def.options; track opt.value) {\n          <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      }\n\n      @case ('checkbox') {\n      <mat-checkbox [checked]=\"!!getValue(def.key)\" (change)=\"onCheckbox(def.key, $event.checked)\">\n        {{ def.label }}\n      </mat-checkbox>\n      }\n\n      @case ('list') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <textarea matInput rows=\"4\" [ngModel]=\"listText(def.key)\"\n          (ngModelChange)=\"onList(def.key, $event)\"></textarea>\n      </mat-form-field>\n      }\n\n      @case ('color_list') {\n      <div class=\"color-list\">\n        <label class=\"color-list-label\">{{ def.label }}</label>\n        <div class=\"color-list-chips\">\n          @for (opt of colorListItems(def.key); track $index) {\n          <div class=\"color-list-chip\">\n            <input type=\"color\" class=\"color-list-dot\" [value]=\"opt.color || '#9CA3AF'\"\n              (input)=\"onColorListColorChange(def.key, $index, $any($event.target).value)\" title=\"Change colour\" />\n            <span class=\"color-list-name\">{{ opt.name }}</span>\n            <button type=\"button\" class=\"color-list-remove\" (click)=\"removeColorListItem(def.key, $index)\"\n              title=\"Remove\">&times;</button>\n          </div>\n          }\n        </div>\n        <input class=\"color-list-add\" type=\"text\" placeholder=\"Add option, press Enter\"\n          (keydown.enter)=\"addColorListItem(def.key, $any($event.target).value, def.defaultColor || '#9CA3AF'); $any($event.target).value = ''\" />\n      </div>\n      }\n\n      }\n    </div>\n    }\n  </div>\n  }\n</aside>\n", styles: [".design-panel-backdrop{position:fixed;inset:0;background:#0000002e;z-index:1000}.column-design-panel{position:fixed;top:0;right:0;bottom:0;width:360px;max-width:90vw;background:var(--grid-surface, #fff);box-shadow:-4px 0 16px #00000029;transform:translate(100%);transition:transform .22s ease;z-index:1001;display:flex;flex-direction:column;font-family:var(--grid-font-family, inherit)}.column-design-panel.open{transform:translate(0)}.design-panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--grid-border-color, #e0e0e0)}.design-panel-header .design-panel-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.design-panel-body{padding:16px;overflow-y:auto;flex:1}.design-panel-body .design-field{margin-bottom:4px}.design-panel-body .design-field .full-width{width:100%}.design-panel-body .design-field mat-checkbox{display:block;margin:8px 0 16px}.design-panel-body .color-list{margin:4px 0 16px}.design-panel-body .color-list .color-list-label{display:block;font-size:12px;color:var(--grid-on-surface-variant, #49454f);margin-bottom:6px}.design-panel-body .color-list .color-list-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.design-panel-body .color-list .color-list-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 4px;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:16px;background:var(--grid-surface, #fff);font-size:12px}.design-panel-body .color-list .color-list-dot{width:18px;height:18px;padding:0;border:none;background:none;border-radius:50%;cursor:pointer}.design-panel-body .color-list .color-list-remove{border:none;background:none;cursor:pointer;font-size:14px;line-height:1;color:var(--grid-on-surface-variant, #49454f)}.design-panel-body .color-list .color-list-remove:hover{color:var(--grid-error, #b3261e)}.design-panel-body .color-list .color-list-add{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:6px;font-size:13px;outline:none}.design-panel-body .color-list .color-list-add:focus{border-color:var(--grid-primary, #6750a4)}\n"] }]
+                    ], template: "@if (isOpen()) {\n<div class=\"design-panel-backdrop\" (click)=\"close()\"></div>\n}\n<aside class=\"column-design-panel\" [class.open]=\"isOpen()\">\n  @if (field(); as col) {\n  <header class=\"design-panel-header\">\n    <div class=\"design-panel-title\">\n      <mat-icon>tune</mat-icon>\n      <span>{{ col.label || col.name }}</span>\n    </div>\n    <button mat-icon-button (click)=\"close()\" title=\"Close\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </header>\n\n  <div class=\"design-panel-body\">\n    @for (def of metaFields(); track def.key) {\n    <div class=\"design-field\">\n      @switch (def.control) {\n\n      @case ('text') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <input matInput [ngModel]=\"getValue(def.key)\" (ngModelChange)=\"onText(def.key, $event)\" />\n      </mat-form-field>\n      }\n\n      @case ('number') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <input matInput type=\"number\" [ngModel]=\"getValue(def.key)\" (ngModelChange)=\"onNumber(def.key, $event)\" />\n      </mat-form-field>\n      }\n\n      @case ('select') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <mat-select [ngModel]=\"getValue(def.key)\" (ngModelChange)=\"onSelect(def.key, $event)\">\n          @for (opt of def.options; track opt.value) {\n          <mat-option [value]=\"opt.value\">{{ opt.label }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      }\n\n      @case ('checkbox') {\n      <mat-checkbox [checked]=\"!!getValue(def.key)\" (change)=\"onCheckbox(def.key, $event.checked)\">\n        {{ def.label }}\n      </mat-checkbox>\n      }\n\n      @case ('list') {\n      <mat-form-field appearance=\"outline\" class=\"full-width\">\n        <mat-label>{{ def.label }}</mat-label>\n        <textarea matInput rows=\"4\" [ngModel]=\"listText(def.key)\"\n          (ngModelChange)=\"onList(def.key, $event)\"></textarea>\n      </mat-form-field>\n      }\n\n      @case ('color_list') {\n      <div class=\"color-list\">\n        <label class=\"color-list-label\">{{ def.label }}</label>\n        <div class=\"color-list-chips\">\n          @for (opt of colorListItems(def.key); track $index) {\n          <div class=\"color-list-chip\">\n            <input type=\"color\" class=\"color-list-dot\" [value]=\"opt.color || '#9CA3AF'\"\n              (input)=\"onColorListColorChange(def.key, $index, $any($event.target).value)\" title=\"Change colour\" />\n            <span class=\"color-list-name\">{{ opt.name }}</span>\n            <button type=\"button\" class=\"color-list-remove\" (click)=\"removeColorListItem(def.key, $index)\"\n              title=\"Remove\">&times;</button>\n          </div>\n          }\n        </div>\n        <input class=\"color-list-add\" type=\"text\" placeholder=\"Add option, press Enter\"\n          (keydown.enter)=\"addColorListItem(def.key, $any($event.target).value, def.defaultColor || '#9CA3AF'); $any($event.target).value = ''\" />\n      </div>\n      }\n\n      @case ('range_color_list') {\n      <div class=\"range-list\">\n        <label class=\"range-list-label\">{{ def.label }}</label>\n        @for (r of rangeListItems(def.key); track $index) {\n        <div class=\"range-list-row\">\n          <input type=\"number\" class=\"range-list-num\" min=\"0\" max=\"100\" [value]=\"r.from\"\n            (input)=\"onRangeChange(def.key, $index, 'from', $any($event.target).value)\" title=\"From\" />\n          <span class=\"range-list-sep\">\u2013</span>\n          <input type=\"number\" class=\"range-list-num\" min=\"0\" max=\"100\" [value]=\"r.to\"\n            (input)=\"onRangeChange(def.key, $index, 'to', $any($event.target).value)\" title=\"To\" />\n          <input type=\"color\" class=\"range-list-color\" [value]=\"r.color || '#22C55E'\"\n            (input)=\"onRangeColorChange(def.key, $index, $any($event.target).value)\" title=\"Colour\" />\n          <button type=\"button\" class=\"range-list-remove\" (click)=\"removeRangeItem(def.key, $index)\"\n            title=\"Remove\">&times;</button>\n        </div>\n        }\n        <button type=\"button\" class=\"range-list-add\" (click)=\"addRangeItem(def.key)\">+ Add range</button>\n      </div>\n      }\n\n      }\n    </div>\n    }\n  </div>\n  }\n</aside>\n", styles: [".design-panel-backdrop{position:fixed;inset:0;background:#0000002e;z-index:1000}.column-design-panel{position:fixed;top:0;right:0;bottom:0;width:360px;max-width:90vw;background:var(--grid-surface, #fff);box-shadow:-4px 0 16px #00000029;transform:translate(100%);transition:transform .22s ease;z-index:1001;display:flex;flex-direction:column;font-family:var(--grid-font-family, inherit)}.column-design-panel.open{transform:translate(0)}.design-panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--grid-border-color, #e0e0e0)}.design-panel-header .design-panel-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.design-panel-body{padding:16px;overflow-y:auto;flex:1}.design-panel-body .design-field{margin-bottom:4px}.design-panel-body .design-field .full-width{width:100%}.design-panel-body .design-field mat-checkbox{display:block;margin:8px 0 16px}.design-panel-body .color-list{margin:4px 0 16px}.design-panel-body .color-list .color-list-label{display:block;font-size:12px;color:var(--grid-on-surface-variant, #49454f);margin-bottom:6px}.design-panel-body .color-list .color-list-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.design-panel-body .color-list .color-list-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 4px;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:16px;background:var(--grid-surface, #fff);font-size:12px}.design-panel-body .color-list .color-list-dot{width:18px;height:18px;padding:0;border:none;background:none;border-radius:50%;cursor:pointer}.design-panel-body .color-list .color-list-remove{border:none;background:none;cursor:pointer;font-size:14px;line-height:1;color:var(--grid-on-surface-variant, #49454f)}.design-panel-body .color-list .color-list-remove:hover{color:var(--grid-error, #b3261e)}.design-panel-body .color-list .color-list-add{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:6px;font-size:13px;outline:none}.design-panel-body .color-list .color-list-add:focus{border-color:var(--grid-primary, #6750a4)}.range-list{margin:4px 0 16px}.range-list .range-list-label{display:block;font-size:12px;color:var(--grid-on-surface-variant, #49454f);margin-bottom:6px}.range-list .range-list-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}.range-list .range-list-num{width:56px;padding:6px 8px;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:6px;font-size:13px;outline:none}.range-list .range-list-num:focus{border-color:var(--grid-primary, #6750a4)}.range-list .range-list-sep{color:var(--grid-on-surface-variant, #49454f)}.range-list .range-list-color{width:28px;height:28px;padding:0;border:1px solid var(--grid-outline-variant, #cac4d0);border-radius:6px;background:none;cursor:pointer}.range-list .range-list-remove{margin-left:auto;border:none;background:none;cursor:pointer;font-size:18px;line-height:1;color:var(--grid-on-surface-variant, #49454f)}.range-list .range-list-remove:hover{color:var(--grid-error, #b3261e)}.range-list .range-list-add{margin-top:2px;padding:6px 10px;border:1px dashed var(--grid-outline-variant, #cac4d0);border-radius:6px;background:none;font-size:13px;cursor:pointer;color:var(--grid-primary, #6750a4)}.range-list .range-list-add:hover{background:var(--grid-surface-variant, #f3edf7)}\n"] }]
         }] });
 
 /**
@@ -10657,6 +10698,14 @@ class EruGridComponent {
             if (rowCount === 0) {
                 height = Math.min(minHeight / 2, 200);
             }
+            else if (groups.length === 1) {
+                // Single (ungrouped) group — the common table case. Fill the grid's
+                // available height so the table occupies the configured gridHeight and
+                // only scrolls once the rows exceed it. Sizing to the estimated content
+                // height instead (rowCount * ROW_HEIGHT) under-counts taller rows
+                // (progress/status/chips), producing a scrollbar even for a few rows.
+                height = availableViewHeight;
+            }
             else if (rowCount < 50 && rowsHeight < availableViewHeight) {
                 // Add scrollbar buffer so the CDK viewport has enough room to render all rows even
                 // when a horizontal scrollbar is present (scrollbar ~17px reduces usable height).
@@ -10911,6 +10960,11 @@ class EruGridComponent {
      } */
     ROWS_PER_PAGE = 50;
     SCROLL_THRESHOLD = 10;
+    /** Rows per lazy page: grid config `pageSize` if set, else ROWS_PER_PAGE. */
+    get rowsPerPage() {
+        const size = this.gridStore.configuration()?.pageSize;
+        return typeof size === 'number' && size > 0 ? size : this.ROWS_PER_PAGE;
+    }
     lastLoadedGroupIds = new Set();
     requestedGroupIds = new Set(); // Track which groups have been requested for data
     columnsInitialized = signal(false, ...(ngDevMode ? [{ debugName: "columnsInitialized" }] : []));
@@ -11426,7 +11480,7 @@ class EruGridComponent {
             groupId: group.id,
             groupKey: group.key,
             page: group.currentPage || 0,
-            pageSize: group.totalRowCount < this.ROWS_PER_PAGE ? group.totalRowCount : this.ROWS_PER_PAGE,
+            pageSize: group.totalRowCount < this.rowsPerPage ? group.totalRowCount : this.rowsPerPage,
             timestamp: Date.now(),
             groupTitle: group.title
         };
@@ -12245,7 +12299,7 @@ class EruGridComponent {
             groupId: group.id,
             groupKey: group.key,
             page: group.currentPage || 0,
-            pageSize: this.ROWS_PER_PAGE,
+            pageSize: this.rowsPerPage,
             timestamp: Date.now(),
             groupTitle: group.title,
         };