@acorex/platform 19.2.7 → 19.2.8

package/fesm2022/acorex-platform-widgets.mjs

@@ -12,7 +12,7 @@ import { AXLoadingModule } from '@acorex/components/loading';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { computed, EventEmitter, Component, ChangeDetectionStrategy, inject, afterNextRender, HostBinding, signal, effect, ViewEncapsulation, InjectionToken, ViewChild, untracked, ChangeDetectorRef, viewChild, ElementRef, afterRender, NgZone, model, input, linkedSignal, HostListener, NgModule } from '@angular/core';
+import { computed, EventEmitter, Component, ChangeDetectionStrategy, inject, afterNextRender, HostBinding, signal, ViewEncapsulation, InjectionToken, effect, ViewChild, untracked, ChangeDetectorRef, viewChild, ElementRef, afterRender, NgZone, model, input, linkedSignal, HostListener, NgModule } from '@angular/core';
 import * as i1 from '@acorex/components/check-box';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
 import * as i3$1 from '@acorex/components/form';
@@ -1794,7 +1794,7 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPWidgetComponent {
         this.disabled = computed(() => this.options()['disabled']);
         this.placeholder = computed(() => this.options()['placeholder']);
         this.internalValue = computed(() => Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()]);
-        this._validationRules = [];
+        this.validationRules = computed(() => this.options()['validationRules'] ?? []);
         this.calendarFormat = computed(() => {
             if (this.format() === 'date')
                 return 'dd/MM/yyyy';
@@ -1804,12 +1804,6 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPWidgetComponent {
                 return 'dd/MM/yyyy HH:mm';
         });
     }
-    get validationRules() {
-        return this._validationRules;
-    }
-    set validationRules(v) {
-        this._validationRules = v;
-    }
     handleValueChange(e, i) {
         if (e.isUserInteraction) {
             const newValues = this.internalValue().map((item, index) => (i === index ? e.value : item));
@@ -1845,7 +1839,7 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPWidgetComponent {
         [format]="calendarFormat()"
         [placeholder]="placeholder()"
       >
-        @for (validation of validationRules; track $index) {
+        @for (validation of validationRules(); track $index) {
         <ax-validation-rule
           [rule]="validation.rule"
           [message]="validation.options?.message"
@@ -1887,7 +1881,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         [format]="calendarFormat()"
         [placeholder]="placeholder()"
       >
-        @for (validation of validationRules; track $index) {
+        @for (validation of validationRules(); track $index) {
         <ax-validation-rule
           [rule]="validation.rule"
           [message]="validation.options?.message"
@@ -4446,16 +4440,19 @@ class AXPRichTextWidgetEditComponent extends AXPWidgetComponent {
         super(...arguments);
         this.placeholder = computed(() => this.options()['placeholder']);
         this.disabled = computed(() => this.options()['disabled']);
+        this.minLineCount = computed(() => this.options()['minLineCount'] ?? 3);
+        this.maxLineCount = computed(() => this.options()['maxLineCount'] ?? 3);
+        this.isFitLine = computed(() => this.options()['fitLineCount'] ?? false);
         this.validationRules = computed(() => this.options()['validationRules'] ?? []);
-        this.eff = effect(() => {
-            console.log(this.getValue());
-        });
     }
     setWysiwyg(e) {
         if (e) {
             this.setValue(e.value);
         }
     }
+    getLinePx(count) {
+        return 24 + 18.46 * count + 'px';
+    }
     get __class() {
         const cls = {};
         cls[`ax-block`] = true;
@@ -4469,7 +4466,11 @@ class AXPRichTextWidgetEditComponent extends AXPWidgetComponent {
     [ngModel]="getValue()"
     (onValueChanged)="setWysiwyg($event)"
   >
-    <ax-wysiwyg-view class="ax-min-h-28"></ax-wysiwyg-view>
+    <ax-wysiwyg-view
+      [style.min-height]="getLinePx(minLineCount())"
+      [style.max-height]="getLinePx(maxLineCount())"
+      [style.height]="'fit-content !important'"
+    ></ax-wysiwyg-view>
     <!-- <ax-wysiwyg-toolbar>
       <ax-wysiwyg-history></ax-wysiwyg-history>
       <ax-wysiwyg-font-style></ax-wysiwyg-font-style>
@@ -4510,7 +4511,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
     [ngModel]="getValue()"
     (onValueChanged)="setWysiwyg($event)"
   >
-    <ax-wysiwyg-view class="ax-min-h-28"></ax-wysiwyg-view>
+    <ax-wysiwyg-view
+      [style.min-height]="getLinePx(minLineCount())"
+      [style.max-height]="getLinePx(maxLineCount())"
+      [style.height]="'fit-content !important'"
+    ></ax-wysiwyg-view>
     <!-- <ax-wysiwyg-toolbar>
       <ax-wysiwyg-history></ax-wysiwyg-history>
       <ax-wysiwyg-font-style></ax-wysiwyg-font-style>
@@ -4654,7 +4659,7 @@ const AXPRichTextWidget = {
         AXP_DATA_PATH_PROPERTY,
         AXP_ALLOW_MULTIPLE_PROPERTY,
         AXP_DISABLED_PROPERTY,
-        AXP_VALIDATION_PROPERTY,
+        // AXP_VALIDATION_PROPERTY,
         AXP_PLACEHOLDER_PROPERTY,
         //cloneProperty(AXP_TABLE_COLUMN_WIDTH_PROPERTY, { schema: { defaultValue: '300px' } }),
     ],
@@ -5613,7 +5618,7 @@ const AXP_REQUIRED_VALIDATION_PROPERTY = {
             name: 'requiredValidation',
             path: 'options.requiredValidation',
             type: AXPWidgetsCatalog.requiredValidation,
-            // defaultValue: false,
+            defaultValue: false,
         },
     },
     visible: true,
@@ -5628,7 +5633,7 @@ const AXP_MIN_LENGTH_VALIDATION_PROPERTY = {
             name: 'minLengthValidation',
             path: 'options.minLengthValidation',
             type: AXPWidgetsCatalog.minLengthValidation,
-            // defaultValue: false,
+            defaultValue: false,
         },
     },
     visible: true,
@@ -5643,7 +5648,7 @@ const AXP_MAX_LENGTH_VALIDATION_PROPERTY = {
             name: 'maxLengthValidation',
             path: 'options.maxLengthValidation',
             type: AXPWidgetsCatalog.maxLengthValidation,
-            // defaultValue: false,
+            defaultValue: false,
         },
     },
     visible: true,
@@ -5658,7 +5663,7 @@ const AXP_REGULAR_EXPRESSION_VALIDATION_PROPERTY = {
             name: 'regularExpressionValidation',
             path: 'options.regularExpressionValidation',
             type: AXPWidgetsCatalog.regularExpressionValidation,
-            // defaultValue: false,
+            defaultValue: false,
         },
     },
     visible: true,
@@ -5673,7 +5678,7 @@ const AXP_LESS_THAN_VALIDATION_PROPERTY = {
             name: 'lessThanValidation',
             path: 'options.lessThanValidation',
             type: AXPWidgetsCatalog.lessThanValidation,
-            // defaultValue: false,
+            defaultValue: false,
         },
     },
     visible: true,
@@ -5688,7 +5693,7 @@ const AXP_GREATER_THAN_VALIDATION_PROPERTY = {
             name: 'greaterThanValidation',
             path: 'options.greaterThanValidation',
             type: AXPWidgetsCatalog.greaterThanValidation,
-            // defaultValue: false,
+            defaultValue: false,
         },
     },
     visible: true,
@@ -5703,7 +5708,7 @@ const AXP_BETWEEN_VALIDATION_PROPERTY = {
             name: 'betweenValidation',
             path: 'options.betweenValidation',
             type: AXPWidgetsCatalog.betweenValidation,
-            // defaultValue: false,
+            defaultValue: false,
         },
     },
     visible: true,
@@ -5718,7 +5723,7 @@ const AXP_EQUAL_VALIDATION_PROPERTY = {
             name: 'equalValidation',
             path: 'options.equalValidation',
             type: AXPWidgetsCatalog.equalValidation,
-            // defaultValue: false,
+            defaultValue: false,
         },
     },
     visible: true,
@@ -5733,7 +5738,7 @@ const AXP_CALLBACK_VALIDATION_PROPERTY = {
             name: 'callbackValidation',
             path: 'options.callbackValidation',
             type: AXPWidgetsCatalog.callbackValidation,
-            // defaultValue: false,
+            defaultValue: false,
         },
     },
     visible: true,
@@ -5752,7 +5757,6 @@ const AXPTextBoxWidget = {
         AXP_DATA_PATH_PROPERTY,
         AXP_ALLOW_MULTIPLE_PROPERTY,
         AXP_DISABLED_PROPERTY,
-        AXP_VALIDATION_PROPERTY,
         AXP_PLACEHOLDER_PROPERTY,
         AXP_HAS_CLEAR_BUTTON_PROPERTY,
         plainTextDefaultProperty(),
@@ -11538,101 +11542,311 @@ class AXPBarChartWidgetEditComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
         this.chartEl = viewChild.required('chart');
-        this.af = afterNextRender(async () => {
+        this.data = linkedSignal(() => this.getValue());
+        this.isRendered = false;
+        this.#af = afterNextRender(async () => {
             await this.loadD3();
-            this.createChart();
+            this.initializeChart();
+            this.isRendered = true;
+        });
+        this.#eff = effect(() => {
+            this.data();
+            if (this.isRendered) {
+                this.updateChart(this.data());
+            }
         });
     }
+    #af;
+    #eff;
     async loadD3() {
         try {
             this.d3 = await import('d3');
-            window.d3 = this.d3;
         }
         catch (error) {
             console.error('Failed to load D3.js:', error);
         }
     }
-    createChart() {
-        const chartElement = this.chartEl().nativeElement;
-        this.d3.select(chartElement).selectAll('*').remove();
-        const width = this.getValue().options.width;
-        const height = this.getValue().options.height;
-        const margin = { top: 30, right: 0, bottom: 30, left: 40 };
-        const x = this.d3
+    initializeChart() {
+        const chartValue = this.data();
+        const { width, height, margin } = this.getChartDimensions(chartValue.options);
+        this.svg = this.d3.select(this.chartEl().nativeElement).append('svg').attr('width', width).attr('height', height);
+        this.drawChart(chartValue);
+    }
+    drawChart(chartValue) {
+        const { data, options } = chartValue;
+        const { width, height, margin } = this.getChartDimensions(options);
+        const x = this.createXScale(data, width, margin);
+        const y = this.createYScale(data, height, margin);
+        this.drawBars(data, x, y, height, margin, options);
+        this.drawAxes(x, y, height, margin, options);
+        if (options.enableTooltip) {
+            this.addTooltips(data, x, y, options);
+        }
+        if (options.enableLegend) {
+            this.addLegend(data, width, margin, options);
+        }
+        if (options.enableZoom) {
+            this.addZoom();
+        }
+        if (options.enableExport) {
+            this.addExportButton();
+        }
+    }
+    updateChart(chartValue) {
+        const { data, options } = chartValue;
+        const { width, height, margin } = this.getChartDimensions(options);
+        const x = this.createXScale(data, width, margin);
+        const y = this.createYScale(data, height, margin);
+        this.updateBars(data, x, y, height, margin, options);
+        this.updateAxes(x, y, height, margin, options);
+        if (options.enableTooltip) {
+            this.updateTooltips(data, x, y, options);
+        }
+        if (options.enableLegend) {
+            this.updateLegend(data, width, margin, options);
+        }
+    }
+    getChartDimensions(options) {
+        const width = options.width || 400;
+        const height = options.height || 200;
+        const margin = options.margin || { top: 20, right: 20, bottom: 30, left: 40 };
+        return { width, height, margin };
+    }
+    createXScale(data, width, margin) {
+        return this.d3
             .scaleBand()
-            .domain(this.getValue().data.map((d) => d.name))
+            .domain(data.map((d) => d.name)) // Use name instead of id
             .range([margin.left, width - margin.right])
             .padding(0.1);
-        const y = this.d3
+    }
+    createYScale(data, height, margin) {
+        return this.d3
             .scaleLinear()
-            .domain([0, this.d3.max(this.getValue().data, (d) => d.value)])
+            .domain([0, this.d3.max(data, (d) => d.value)])
+            .nice()
             .range([height - margin.bottom, margin.top]);
-        const svg = this.d3
-            .select(chartElement)
-            .append('svg')
-            .attr('width', width)
-            .attr('height', height)
-            .attr('viewBox', [0, 0, width, height])
-            .style('max-width', '100%')
-            .style('height', 'auto');
-        // Add the vertical line on the y-axis
-        svg
-            .append('line')
-            .attr('x1', margin.left)
-            .attr('y1', margin.top)
-            .attr('x2', margin.left)
-            .attr('y2', height - margin.bottom)
-            .attr('stroke', 'black')
-            .attr('stroke-width', 1);
-        // Add the bars
-        svg
-            .append('g')
+    }
+    drawBars(data, x, y, height, margin, options) {
+        this.svg
             .selectAll('rect')
-            .data(this.getValue().data)
-            .join('rect')
-            .attr('fill', (d) => d.color || this.getValue().options.color || 'steelblue')
-            .attr('x', (d) => x(d.name))
+            .data(data)
+            .enter()
+            .append('rect')
+            .attr('x', (d) => x(d.name) || 0) // Use name instead of id
+            .attr('y', height - margin.bottom)
+            .attr('width', x.bandwidth())
+            .attr('height', 0)
+            .attr('fill', (d) => d.color || options.color || 'teal')
+            .transition()
+            .duration(500)
             .attr('y', (d) => y(d.value))
+            .attr('height', (d) => y(0) - y(d.value));
+    }
+    updateBars(data, x, y, height, margin, options) {
+        const bars = this.svg.selectAll('rect').data(data, (d) => d.id);
+        // Enter new bars
+        bars
+            .enter()
+            .append('rect')
+            .attr('x', (d) => x(d.name) || 0) // Use name instead of id
+            .attr('y', height - margin.bottom)
+            .attr('width', x.bandwidth())
+            .attr('height', 0)
+            .attr('fill', (d) => d.color || options.color || 'teal')
+            .transition()
+            .duration(500)
+            .attr('y', (d) => y(d.value))
+            .attr('height', (d) => y(0) - y(d.value));
+        // Update existing bars
+        bars
+            .transition()
+            .duration(500)
+            .attr('x', (d) => x(d.name) || 0) // Use name instead of id
+            .attr('y', (d) => y(d.value))
+            .attr('width', x.bandwidth())
             .attr('height', (d) => y(0) - y(d.value))
-            .attr('width', x.bandwidth());
-        // Add the x-axis
-        svg
+            .attr('fill', (d) => d.color || options.color || 'teal');
+        // Exit old bars
+        bars
+            .exit()
+            .transition()
+            .duration(500)
+            .attr('y', height - margin.bottom)
+            .attr('height', 0)
+            .remove();
+    }
+    drawAxes(x, y, height, margin, options) {
+        const axisColor = options.axisColor || '#000';
+        const axisFontSize = options.axisFontSize || 12;
+        // Draw X axis
+        this.svg
             .append('g')
+            .attr('class', 'x-axis')
             .attr('transform', `translate(0,${height - margin.bottom})`)
-            .call(this.d3.axisBottom(x));
-        // Add the y-axis with tick lines
-        const yAxis = this.d3.axisLeft(y).tickFormat((d) => `${d}`);
-        svg
+            .call(this.d3.axisBottom(x).tickSizeOuter(0))
+            .attr('color', axisColor)
+            .style('font-size', `${axisFontSize}px`);
+        // Draw Y axis
+        this.svg
             .append('g')
+            .attr('class', 'y-axis')
             .attr('transform', `translate(${margin.left},0)`)
-            .call(yAxis)
-            .call((g) => g.select('.domain').remove());
-        if (this.getValue().options.yAxisTick === undefined || this.getValue().options.yAxisTick === true) {
-            // Add tick lines for each y-axis value
-            svg
-                .selectAll('.y-tick-line')
-                .data(y.ticks())
-                .enter()
-                .append('line')
-                .attr('class', 'y-tick-line')
-                .attr('x1', margin.left)
-                .attr('y1', (d) => y(d))
-                .attr('x2', width - margin.right)
-                .attr('y2', (d) => y(d))
-                .attr('stroke', '#0001')
-                .attr('stroke-width', 0.5);
+            .call(this.d3.axisLeft(y))
+            .attr('color', axisColor)
+            .style('font-size', `${axisFontSize}px`);
+    }
+    updateAxes(x, y, height, margin, options) {
+        const axisColor = options.axisColor || '#000';
+        const axisFontSize = options.axisFontSize || 12;
+        // Update X axis
+        this.svg
+            .select('.x-axis')
+            .transition()
+            .duration(500)
+            .call(this.d3.axisBottom(x).tickSizeOuter(0))
+            .attr('color', axisColor)
+            .style('font-size', `${axisFontSize}px`);
+        // Update Y axis
+        this.svg
+            .select('.y-axis')
+            .transition()
+            .duration(500)
+            .call(this.d3.axisLeft(y))
+            .attr('color', axisColor)
+            .style('font-size', `${axisFontSize}px`);
+    }
+    addTooltips(data, x, y, options) {
+        this.tooltip = this.d3
+            .select('body')
+            .append('div')
+            .attr('class', 'tooltip')
+            .style('opacity', 0)
+            .style('position', 'absolute')
+            .style('background', options.tooltipBackground || '#fff')
+            .style('color', options.tooltipTextColor || '#000')
+            .style('padding', '5px')
+            .style('border-radius', '3px');
+        this.svg
+            .selectAll('rect')
+            .on('mouseover', (event, d) => {
+            const [xPos, yPos] = this.d3.pointer(event);
+            this.tooltip.transition().duration(200).style('opacity', 0.9);
+            this.tooltip
+                .html(`Value: ${d.value}`)
+                .style('left', `${xPos + 10}px`)
+                .style('top', `${yPos - 10}px`);
+        })
+            .on('mouseout', () => {
+            this.tooltip.transition().duration(500).style('opacity', 0);
+        });
+    }
+    updateTooltips(data, x, y, options) {
+        if (!this.tooltip) {
+            this.addTooltips(data, x, y, options);
         }
     }
+    addLegend(data, width, margin, options) {
+        const legend = this.svg
+            .append('g')
+            .attr('class', 'legend')
+            .attr('transform', `translate(${width - margin.right - 100}, ${margin.top})`);
+        const legendItems = legend
+            .selectAll('.legend-item')
+            .data(data)
+            .enter()
+            .append('g')
+            .attr('class', 'legend-item')
+            .attr('transform', (d, i) => `translate(0, ${i * 20})`);
+        legendItems
+            .append('rect')
+            .attr('width', 18)
+            .attr('height', 18)
+            .attr('fill', (d) => d.color || options.color || 'teal');
+        legendItems
+            .append('text')
+            .attr('x', 24)
+            .attr('y', 9)
+            .attr('dy', '.35em')
+            .text((d) => d.name); // Use name instead of id
+    }
+    updateLegend(data, width, margin, options) {
+        const legend = this.svg.select('.legend').data([data]);
+        const legendItems = legend.selectAll('.legend-item').data(data, (d) => d.id);
+        // Enter new legend items
+        const newLegendItems = legendItems
+            .enter()
+            .append('g')
+            .attr('class', 'legend-item')
+            .attr('transform', (d, i) => `translate(0, ${i * 20})`);
+        newLegendItems
+            .append('rect')
+            .attr('width', 18)
+            .attr('height', 18)
+            .attr('fill', (d) => d.color || options.color || 'teal');
+        newLegendItems
+            .append('text')
+            .attr('x', 24)
+            .attr('y', 9)
+            .attr('dy', '.35em')
+            .text((d) => d.name); // Use name instead of id
+        // Update existing legend items
+        legendItems.select('text').text((d) => d.name); // Use name instead of id
+        // Exit old legend items
+        legendItems.exit().remove();
+    }
+    addZoom() {
+        const zoom = this.d3
+            .zoom()
+            .scaleExtent([1, 10])
+            .on('zoom', (event) => {
+            this.svg.attr('transform', event.transform.toString());
+        });
+        this.svg.call(zoom);
+    }
+    addExportButton() {
+        const exportButton = this.d3
+            .select(this.chartEl().nativeElement)
+            .append('button')
+            .text('Export to PNG')
+            .style('position', 'absolute')
+            .style('top', '10px')
+            .style('right', '10px')
+            .on('click', () => {
+            const svgElement = this.svg.node();
+            if (svgElement) {
+                const serializer = new XMLSerializer();
+                const svgString = serializer.serializeToString(svgElement);
+                const canvas = document.createElement('canvas');
+                const ctx = canvas.getContext('2d');
+                const img = new Image();
+                img.onload = () => {
+                    canvas.width = img.width;
+                    canvas.height = img.height;
+                    ctx?.drawImage(img, 0, 0);
+                    const link = document.createElement('a');
+                    link.download = 'chart.png';
+                    link.href = canvas.toDataURL('image/png');
+                    link.click();
+                };
+                img.src = 'data:image/svg+xml;base64,' + btoa(svgString);
+            }
+        });
+    }
     ngOnDestroy() {
-        this.d3.select(this.chartEl().nativeElement).selectAll('*').remove();
+        if (this.svg) {
+            this.svg.selectAll('*').remove();
+        }
+        if (this.tooltip) {
+            this.tooltip.remove();
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBarChartWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: AXPBarChartWidgetEditComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "chartEl", first: true, predicate: ["chart"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: ` <div class="ax-flex ax-justify-center ax-items-center" #chart></div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: AXPBarChartWidgetEditComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "chartEl", first: true, predicate: ["chart"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<div class="ax-flex ax-justify-center ax-items-center" #chart></div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBarChartWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
-                    template: ` <div class="ax-flex ax-justify-center ax-items-center" #chart></div>`,
+                    template: `<div class="ax-flex ax-justify-center ax-items-center" #chart></div>`,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
@@ -12257,12 +12471,12 @@ class AXPTabularDataEditorWidgetEditComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
         this.columns = computed(() => this.options()['columns']);
-        this.isPopup = computed(() => this.options()['isPopup']);
+        this.defaultRowCount = computed(() => this.options()['defaultRowCount']);
         this.popupService = inject(AXPopupService);
         this.platform = inject(AXPlatform);
     }
     async openPopup() {
-        const { AXPTabularDataPopupComponent } = await import('./acorex-platform-widgets-tabular-data-edit-popup.component-D2-nHqYy.mjs');
+        const { AXPTabularDataPopupComponent } = await import('./acorex-platform-widgets-tabular-data-edit-popup.component-B90if8wb.mjs');
         const popupData = await this.popupService.open(AXPTabularDataPopupComponent, {
             size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md',
             header: true,
@@ -12273,24 +12487,19 @@ class AXPTabularDataEditorWidgetEditComponent extends AXPWidgetComponent {
             data: {
                 columns: this.columns(),
                 context: this.getValue(),
+                defaultRowCount: this.defaultRowCount(),
             },
         });
         this.setValue(popupData.data?.context);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTabularDataEditorWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPTabularDataEditorWidgetEditComponent, isStandalone: true, selector: "axp-tabular-data-editor-widget", usesInheritance: true, ngImport: i0, template: `
-    <span class="ax-truncate ax-underline ax-cursor-pointer" (click)="openPopup()">
-      Click To Edit</span>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "ngmodule", type: AXDataTableModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPTabularDataEditorWidgetEditComponent, isStandalone: true, selector: "axp-tabular-data-editor-widget", usesInheritance: true, ngImport: i0, template: ` <span class="ax-truncate ax-underline ax-cursor-pointer" (click)="openPopup()"> Click To Edit</span> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "ngmodule", type: AXDataTableModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTabularDataEditorWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-tabular-data-editor-widget',
-                    template: `
-    <span class="ax-truncate ax-underline ax-cursor-pointer" (click)="openPopup()">
-      Click To Edit</span>
-  `,
+                    template: ` <span class="ax-truncate ax-underline ax-cursor-pointer" (click)="openPopup()"> Click To Edit</span> `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [
                         CommonModule,
@@ -12356,20 +12565,9 @@ class AXPTabularDataEditorWidgetViewComponent extends AXPWidgetComponent {
         this.popupService = inject(AXPopupService);
         this.platform = inject(AXPlatform);
         this.columns = this.options()['columns'];
-        this.dataSource = new AXDataSource({
-            load: async () => {
-                const items = this.getValue() ?? [];
-                return {
-                    items: items,
-                    total: items.length,
-                };
-            },
-            pageSize: 1000,
-            key: 'gridItem',
-        });
     }
     async openPopup() {
-        const { AXPTabularDataPopupComponent } = await import('./acorex-platform-widgets-tabular-data-view-popup.component-BBRVgZLu.mjs');
+        const { AXPTabularDataPopupComponent } = await import('./acorex-platform-widgets-tabular-data-view-popup.component-BaslkAPS.mjs');
         this.popupService.open(AXPTabularDataPopupComponent, {
             size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md',
             header: true,
@@ -12378,7 +12576,7 @@ class AXPTabularDataEditorWidgetViewComponent extends AXPWidgetComponent {
             draggable: true,
             title: this.path ?? '',
             data: {
-                dataSource: this.dataSource,
+                items: this.getValue() ?? [],
                 columns: this.columns,
             },
         });