@acorex/platform 19.2.9 → 19.2.10

package/fesm2022/acorex-platform-widgets.mjs

@@ -1,5 +1,5 @@
 import * as i1$6 from '@acorex/platform/layout/builder';
-import { AXPWidgetsCatalog, createStringProperty, createBooleanProperty, createSelectProperty, cloneProperty, AXPWidgetComponent, AXP_WIDGETS_ACTION_GROUP, AXP_WIDGETS_EDITOR_GROUP, AXPColumnWidgetComponent, AXPDataListWidgetComponent, AXPWidgetStatus, AXPPageStatus, AXP_WIDGETS_ADVANCE_GROUP, AXPLayoutBuilderModule, AXP_WIDGETS_LAYOUT_GROUP, AXP_WIDGETS_VALIDATION_GROUP, AXP_WIDGETS_CHART_GROUP, AXP_WIDGETS_FILTER_GROUP } from '@acorex/platform/layout/builder';
+import { AXPWidgetsCatalog, createStringProperty, createBooleanProperty, createSelectProperty, cloneProperty, AXPWidgetComponent, AXP_WIDGETS_ACTION_GROUP, AXP_WIDGETS_EDITOR_GROUP, AXPColumnWidgetComponent, createNumberProperty, AXPDataListWidgetComponent, AXPWidgetStatus, AXPPageStatus, AXP_WIDGETS_ADVANCE_GROUP, AXPLayoutBuilderModule, AXP_WIDGETS_LAYOUT_GROUP, AXP_WIDGETS_VALIDATION_GROUP, AXP_WIDGETS_CHART_GROUP, AXP_WIDGETS_FILTER_GROUP } from '@acorex/platform/layout/builder';
 import { AX_STYLE_COLOR_TYPES, AX_STYLE_LOOK_TYPES, AXDataSource } from '@acorex/components/common';
 import * as i1$2 from '@acorex/components/badge';
 import { AXBadgeModule } from '@acorex/components/badge';
@@ -107,7 +107,7 @@ const AXP_WIDGET_PROPERTY_GROUP = {
 const AXP_VALIDATION_PROPERTY_GROUP = {
     name: 'validation',
     order: 4,
-    title: 'validation',
+    title: 'Validation',
 };
 
 const AXP_DATA_SOURCE_PROPERTY = {
@@ -3788,6 +3788,7 @@ const AXPNumberBoxWidget = {
         numberDefaultProperty(),
         numberMinValueProperty(),
         numberMaxValueProperty(),
+        createNumberProperty({ defaultValue: 0, name: 'decimals', title: "Decimals", path: "options.decimals", group: AXP_BEHAVIOR_PROPERTY_GROUP }),
         cloneProperty(AXP_TABLE_COLUMN_WIDTH_PROPERTY, { schema: { defaultValue: '200px' } }),
         //
         AXP_REQUIRED_VALIDATION_PROPERTY,
@@ -4813,7 +4814,6 @@ const AXPRichTextWidget = {
     properties: [
         AXP_NAME_PROPERTY,
         AXP_DATA_PATH_PROPERTY,
-        AXP_ALLOW_MULTIPLE_PROPERTY,
         AXP_DISABLED_PROPERTY,
         AXP_PLACEHOLDER_PROPERTY,
         //cloneProperty(AXP_TABLE_COLUMN_WIDTH_PROPERTY, { schema: { defaultValue: '300px' } }),
@@ -6346,29 +6346,36 @@ class AXPFileBoxWidgetEditComponent extends AXPWidgetComponent {
                 return [];
             return this.getValue() ? (Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()]) : [{}];
         });
+        this.files = signal([]);
         this.markedListAsCommitted = null;
         this.markedListAsDeleted = null;
-        this.#effect2 = effect(async () => {
-            const status = this.layoutService.status();
-            if (status == AXPPageStatus.Submitted) {
-                if (this.markedListAsCommitted) {
-                    for (const fileId of this.markedListAsCommitted) {
-                        await this.fileStorage.commit(fileId);
-                    }
-                    this.markedListAsCommitted = null;
+    }
+    async ngOnDestroy() {
+        const status = this.layoutService.status();
+        if (status == AXPPageStatus.Submitted) {
+            if (this.markedListAsCommitted) {
+                for (const fileId of this.markedListAsCommitted) {
+                    await this.fileStorage.commit(fileId);
                 }
-                if (this.markedListAsDeleted) {
-                    for (const fileId of this.markedListAsDeleted) {
-                        await this.fileStorage.markForDeletion(fileId);
-                    }
-                    this.markedListAsDeleted = null;
+                this.markedListAsCommitted = null;
+            }
+            if (this.markedListAsDeleted) {
+                for (const fileId of this.markedListAsDeleted) {
+                    await this.fileStorage.markForDeletion(fileId);
                 }
+                this.markedListAsDeleted = null;
             }
-        });
+        }
+    }
+    handleOnFileRemove(file) {
+        debugger;
+        this.files.update((files) => files.filter((f) => f !== file));
     }
-    #effect2;
     handleOnFileUploadComplete(e) { }
-    handleOnFilesUploadComplete(e) { }
+    handleOnFilesUploadComplete(e) {
+        this.files.set(e.uploadedFiles);
+        console.log(e.uploadedFiles[0].onComplete);
+    }
     async handleChanged(e) {
         const results = [];
         for (var i = 0; i < e.requests.length; i++) {
@@ -6379,7 +6386,9 @@ class AXPFileBoxWidgetEditComponent extends AXPWidgetComponent {
                 refType: this.refType(),
                 isPrimary: true,
             }));
-            e.requests[i].finish();
+            e.requests[i].finish({
+                id: results[i].fileId,
+            });
         }
         if (!this.multiple()) {
             this.setValue(results[0].fileId);
@@ -6394,45 +6403,45 @@ class AXPFileBoxWidgetEditComponent extends AXPWidgetComponent {
         const extension = fileName?.split('.')?.pop()?.toLowerCase();
         switch (extension) {
             case 'txt':
-                return { icon: 'fa-file-alt', color: 'ax-bg-blue-100 ax-text-blue-500' };
+                return { icon: ' far fa-file-alt', color: 'ax-bg-blue-100 ax-text-blue-500' };
             case 'pdf':
-                return { icon: 'fa-file-pdf', color: 'ax-bg-red-100 ax-text-red-500' };
+                return { icon: ' far fa-file-pdf', color: 'ax-bg-red-100 ax-text-red-500' };
             case 'doc':
             case 'docx':
-                return { icon: 'fa-file-word', color: 'ax-bg-blue-200 ax-text-blue-600' };
+                return { icon: ' far fa-file-word', color: 'ax-bg-blue-200 ax-text-blue-600' };
             case 'xls':
             case 'xlsx':
-                return { icon: 'fa-file-excel', color: 'ax-bg-green-100 ax-text-green-500' };
+                return { icon: ' far fa-file-excel', color: 'ax-bg-green-100 ax-text-green-500' };
             case 'ppt':
             case 'pptx':
-                return { icon: 'fa-file-powerpoint', color: 'ax-bg-orange-100 ax-text-orange-500' };
+                return { icon: ' far fa-file-powerpoint', color: 'ax-bg-orange-100 ax-text-orange-500' };
             case 'jpg':
             case 'jpeg':
             case 'png':
             case 'gif':
             case 'bmp':
-                return { icon: 'fa-file-image', color: 'ax-bg-purple-100 ax-text-purple-500' };
+                return { icon: ' far fa-file-image', color: 'ax-bg-purple-100 ax-text-purple-500' };
             case 'zip':
             case 'rar':
             case '7z':
-                return { icon: 'fa-file-archive', color: 'ax-bg-yellow-100 ax-text-yellow-500' };
+                return { icon: ' far fa-file-archive', color: 'ax-bg-yellow-100 ax-text-yellow-500' };
             case 'mp3':
             case 'wav':
             case 'ogg':
-                return { icon: 'fa-file-audio', color: 'ax-bg-pink-100 ax-text-pink-500' };
+                return { icon: ' far fa-file-audio', color: 'ax-bg-pink-100 ax-text-pink-500' };
             case 'mp4':
             case 'avi':
             case 'mkv':
             case 'mov':
-                return { icon: 'fa-file-video', color: 'ax-bg-blue-100 ax-text-blue-500' };
+                return { icon: ' far fa-file-video', color: 'ax-bg-blue-100 ax-text-blue-500' };
             case 'js':
             case 'jsx':
             case 'ts':
             case 'tsx':
-                return { icon: 'fa-file-code', color: 'ax-bg-yellow-100 ax-text-yellow-500' };
+                return { icon: ' far fa-file-code', color: 'ax-bg-yellow-100 ax-text-yellow-500' };
             // Add more cases as needed for other file types
             default:
-                return { icon: 'fa-file', color: 'ax-bg-gray-100 ax-text-gray-500' };
+                return { icon: ' far fa-file', color: 'ax-bg-gray-100 ax-text-gray-500' };
         }
     }
     get __class() {
@@ -6442,7 +6451,7 @@ class AXPFileBoxWidgetEditComponent extends AXPWidgetComponent {
         return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPFileBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPFileBoxWidgetEditComponent, isStandalone: true, selector: "axp-file-widget-edit", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPFileBoxWidgetEditComponent, isStandalone: true, selector: "axp-file-widget-edit", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     <div class="ax-grid ax-grid-cols-12">
       <div class="ax-col-span-12">
         <ax-uploader-drop-zone
@@ -6456,7 +6465,17 @@ class AXPFileBoxWidgetEditComponent extends AXPWidgetComponent {
         ></ax-uploader-drop-zone>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXUploaderModule }, { kind: "component", type: i5$3.AXUploaderDropZoneComponent, selector: "ax-uploader-drop-zone", inputs: ["description"] }, { kind: "directive", type: i5$3.AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: ["multiple", "accept"], outputs: ["onChanged", "onFileUploadComplete", "onFilesUploadComplete"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    @for(file of files(); track $index){
+    <div class="ax-grid ax-mt-10 ax-grid-cols-12 ax-gap-1 ax-px-4">
+      <ax-icon class="{{ getFileInfo(file.file.name).icon }} {{ getFileInfo(file.file.name).color }}"></ax-icon>
+      <ax-text class="ax-col-span-10" [textContent]="file.file.name"></ax-text>
+      <div>
+        <ax-icon class="fa-light fa-download ax-px-2"></ax-icon>
+        <ax-icon (click)="handleOnFileRemove(file)" class="fa-light fa-xmark"></ax-icon>
+      </div>
+    </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXUploaderModule }, { kind: "component", type: i5$3.AXUploaderDropZoneComponent, selector: "ax-uploader-drop-zone", inputs: ["description"] }, { kind: "directive", type: i5$3.AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: ["multiple", "accept"], outputs: ["onChanged", "onFileUploadComplete", "onFilesUploadComplete"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPFileBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -6476,6 +6495,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         ></ax-uploader-drop-zone>
       </div>
     </div>
+    @for(file of files(); track $index){
+    <div class="ax-grid ax-mt-10 ax-grid-cols-12 ax-gap-1 ax-px-4">
+      <ax-icon class="{{ getFileInfo(file.file.name).icon }} {{ getFileInfo(file.file.name).color }}"></ax-icon>
+      <ax-text class="ax-col-span-10" [textContent]="file.file.name"></ax-text>
+      <div>
+        <ax-icon class="fa-light fa-download ax-px-2"></ax-icon>
+        <ax-icon (click)="handleOnFileRemove(file)" class="fa-light fa-xmark"></ax-icon>
+      </div>
+    </div>
+    }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, FormsModule, AXButtonModule, AXDecoratorModule, AXUploaderModule],
@@ -7407,6 +7436,7 @@ const AXPMapBoxWidget = {
                     options: {
                         minValue: -90,
                         maxValue: 90,
+                        decimals: 5
                     },
                 },
             },
@@ -7426,6 +7456,7 @@ const AXPMapBoxWidget = {
                     options: {
                         minValue: -180,
                         maxValue: 180,
+                        decimals: 5
                     },
                 },
             },
@@ -11624,12 +11655,6 @@ class AXPBarChartWidgetEditComponent extends AXPWidgetComponent {
         if (options.enableTooltip) {
             this.addTooltips(data, x, y, options);
         }
-        if (options.enableLegend) {
-            this.addLegend(data, width, height, margin, options);
-        }
-        if (options.enableExport) {
-            this.addExportButton();
-        }
     }
     updateChart(chartValue) {
         const { data, options } = chartValue;
@@ -11641,26 +11666,8 @@ class AXPBarChartWidgetEditComponent extends AXPWidgetComponent {
     getChartDimensions(options) {
         const baseWidth = options.width || 400;
         const baseHeight = options.height || 200;
-        const margin = options.margin || { top: 20, right: 20, bottom: 30, left: 40 };
-        // Reserve space for legend
-        const legendSpace = 100; // 100px reserved for legend
-        let width = baseWidth;
-        let height = baseHeight;
-        if (options.enableLegend) {
-            switch (options.legendPosition) {
-                case 'top-right':
-                case 'top-left':
-                    height -= legendSpace; // Reserve space at the top
-                    margin.top += legendSpace;
-                    break;
-                case 'bottom-right':
-                case 'bottom-left':
-                    height -= legendSpace; // Reserve space at the bottom
-                    margin.bottom += legendSpace;
-                    break;
-            }
-        }
-        return { width, height, margin };
+        const margin = options.margin || { top: 100, right: 20, bottom: 30, left: 40 };
+        return { width: baseWidth, height: baseHeight, margin };
     }
     createXScale(data, width, margin) {
         return this.d3
@@ -11698,7 +11705,7 @@ class AXPBarChartWidgetEditComponent extends AXPWidgetComponent {
         // Draw X axis
         this.svg
             .append('g')
-            .attr('class', 'x-axis')
+            .attr('class', 'axp-bar-chart-x-axis')
             .attr('transform', `translate(0,${height - margin.bottom})`)
             .call(this.d3.axisBottom(x).tickSizeOuter(0))
             .attr('color', axisColor)
@@ -11706,14 +11713,14 @@ class AXPBarChartWidgetEditComponent extends AXPWidgetComponent {
         // Draw Y axis
         this.svg
             .append('g')
-            .attr('class', 'y-axis')
+            .attr('class', 'axp-bar-chart-y-axis')
             .attr('transform', `translate(${margin.left},0)`)
             .call(this.d3.axisLeft(y))
             .attr('color', axisColor)
             .style('font-size', `${axisFontSize}px`);
     }
     addTooltips(data, x, y, options) {
-        this.tooltip = this.svg.append('g').attr('class', 'tooltip').style('opacity', 0);
+        this.tooltip = this.svg.append('g').attr('class', 'axp-bar-chart-tooltip').style('opacity', 0);
         this.tooltip
             .append('rect')
             .attr('width', 80)
@@ -11733,80 +11740,48 @@ class AXPBarChartWidgetEditComponent extends AXPWidgetComponent {
             .on('mouseover', (event, d) => {
             const barX = x(d.name) || 0;
             const barY = y(d.value);
-            this.tooltip.style('opacity', 1).attr('transform', `translate(${barX + x.bandwidth() / 2 - 40},${barY - 40})`);
+            // Adjust tooltip position to stay within SVG boundaries
+            const tooltipX = Math.min(barX + x.bandwidth() / 2 - 40, Number.parseInt(this.svg.attr('width')) - 80);
+            const tooltipY = Math.max(barY - 40, 0);
+            this.tooltip.style('opacity', 1).attr('transform', `translate(${tooltipX},${tooltipY})`);
             this.tooltip.select('text').text(`${d.name}: ${d.value}`);
         })
             .on('mouseout', () => {
             this.tooltip.style('opacity', 0);
         });
     }
-    addLegend(data, width, height, margin, options) {
-        const legendPosition = options.legendPosition || 'top-right';
-        const legend = this.svg.append('g').attr('class', 'legend');
+    // API to render legend in another component
+    renderLegend(data, options, container) {
+        const legend = this.d3.select(container).append('div').attr('class', 'axp-bar-chart-legend');
         const legendItems = legend
             .selectAll('.legend-item')
             .data(data)
             .enter()
-            .append('g')
-            .attr('class', 'legend-item')
-            .attr('transform', (d, i) => `translate(0, ${i * 20})`);
+            .append('div')
+            .attr('class', 'axp-bar-chart-legend-item')
+            .style('display', 'flex')
+            .style('align-items', 'center')
+            .style('margin-bottom', '5px');
         legendItems
-            .append('rect')
-            .attr('width', 16)
-            .attr('height', 16)
-            .attr('fill', (d) => d.color || options.color || 'teal');
+            .append('div')
+            .style('width', '16px')
+            .style('height', '16px')
+            .style('background-color', (d) => d.color || options.color || 'teal')
+            .style('margin-right', '8px');
         legendItems
-            .append('text')
-            .attr('x', 24)
-            .attr('y', 12)
-            .attr('fill', '#000')
-            .style('font-size', '12px')
-            .text((d) => d.name);
-        // Position the legend
-        switch (legendPosition) {
-            case 'top-right':
-                legend.attr('transform', `translate(${width - margin.right - 100}, ${margin.top - 80})`);
-                break;
-            case 'top-left':
-                legend.attr('transform', `translate(${margin.left}, ${margin.top - 80})`);
-                break;
-            case 'bottom-right':
-                legend.attr('transform', `translate(${width - margin.right - 100}, ${height - margin.bottom + 20})`);
-                break;
-            case 'bottom-left':
-                legend.attr('transform', `translate(${margin.left}, ${height - margin.bottom + 20})`);
-                break;
-        }
+            .append('div')
+            .text((d) => d.name)
+            .style('font-size', '12px');
     }
-    addExportButton() {
-        const exportButton = this.d3
-            .select(this.chartEl().nativeElement)
-            .append('button')
-            .text('Export to PNG')
-            .style('position', 'absolute')
-            .style('top', '10px')
-            .style('right', '10px')
-            .style('z-index', '1000')
-            .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);
-            }
-        });
+    // API to export chart as PNG
+    exportChartAsPNG() {
+        const svgElement = this.svg.node();
+        if (svgElement) {
+            const serializer = new XMLSerializer();
+            const svgString = serializer.serializeToString(svgElement);
+            return 'data:image/svg+xml;base64,' + btoa(svgString);
+        }
+        return null;
     }
     ngOnDestroy() {
         if (this.svg) {
@@ -12215,6 +12190,119 @@ const AXPQrcodeWidget = {
     },
 };
 
+class AXPGaugeChartWidgetEditComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.chartEl = viewChild.required('chart');
+        this.#af = afterNextRender(async () => {
+            await this.loadD3();
+            this.createChart();
+        });
+    }
+    #af;
+    async loadD3() {
+        try {
+            this.d3 = await import('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 minValue = this.getValue().options.minValue;
+        const maxValue = this.getValue().options.maxValue;
+        const arcThickness = this.getValue().options.arcThickness;
+        const labelOffset = this.getValue().options.labelOffset;
+        const radius = Math.min(width, height) / 2;
+        const arc = this.d3
+            .arc()
+            .innerRadius(radius - arcThickness)
+            .outerRadius(radius)
+            .startAngle(-Math.PI / 2)
+            .endAngle(Math.PI / 2);
+        const scale = this.d3
+            .scaleLinear()
+            .domain([minValue, maxValue])
+            .range([-Math.PI / 2, Math.PI / 2]);
+        const svg = this.d3
+            .select(chartElement)
+            .append('svg')
+            .attr('width', width)
+            .attr('height', height)
+            .attr('role', 'img')
+            .attr('aria-label', 'Gauge chart')
+            .attr('viewBox', `0 0 ${width} ${height}`) // Adjusted viewBox
+            .style('max-width', '100%')
+            .style('height', 'auto')
+            .append('g')
+            .attr('transform', `translate(${width / 2}, ${height / 2})`); // Center the chart
+        const gaugeArc = svg
+            .append('g')
+            .selectAll('path')
+            .data(this.getValue().data)
+            .enter()
+            .append('path')
+            .attr('fill', (d) => d.color || this.getRandomColor())
+            .attr('d', arc);
+        const label = svg
+            .append('text')
+            .attr('text-anchor', 'middle')
+            .attr('font-size', '16px')
+            .attr('y', labelOffset)
+            .text(`${this.getValue().data[0].value}`);
+        const pointer = svg
+            .append('line')
+            .attr('x1', 0)
+            .attr('y1', 0)
+            .attr('x2', 0)
+            .attr('y2', -radius + arcThickness / 2)
+            .attr('stroke', 'black')
+            .attr('stroke-width', 2)
+            .attr('transform', `rotate(${scale(this.getValue().data[0].value) * (180 / Math.PI)})`);
+    }
+    getRandomColor() {
+        // Generate a random hex color
+        return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+    }
+    ngOnDestroy() {
+        this.d3.select(this.chartEl().nativeElement).selectAll('*').remove();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPGaugeChartWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: AXPGaugeChartWidgetEditComponent, 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: AXPGaugeChartWidgetEditComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ` <div class="ax-flex ax-justify-center ax-items-center" #chart></div>`,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+var gaugeChartWidgetEdit_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPGaugeChartWidgetEditComponent: AXPGaugeChartWidgetEditComponent
+});
+
+const AXPGaugeChartWidget = {
+    name: 'gauge-chart',
+    title: 'Gauge Chart Widget',
+    group: AXP_WIDGETS_CHART_GROUP,
+    type: 'chart',
+    icon: 'fa-solid fa-gauge',
+    visible: false,
+    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
+    components: {
+        edit: {
+            component: () => Promise.resolve().then(function () { return gaugeChartWidgetEdit_component; }).then((c) => c.AXPGaugeChartWidgetEditComponent),
+        },
+    },
+};
+
 class AXPColorBoxWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
@@ -12575,7 +12663,7 @@ var tabularDataWidgetView_component = /*#__PURE__*/Object.freeze({
 
 const AXPTableEditorWidget = {
     name: 'table-editor',
-    title: 'Table Editor Box',
+    title: 'Table Editor',
     icon: 'fa-solid fa-input-text',
     description: 'Inputs single-line text',
     group: AXP_WIDGETS_EDITOR_GROUP,
@@ -12610,6 +12698,7 @@ const AXPTableEditorWidget = {
             component: () => Promise.resolve().then(function () { return tabularDataWidgetEdit_component; }).then((c) => c.AXPTabularDataEditorWidgetEditComponent),
         },
     },
+    visible: false
 };
 
 class AXPBooleanFilterWidgetEditComponent extends AXPWidgetComponent {
@@ -14293,6 +14382,7 @@ class AXPWidgetsModule {
                     //charts
                     AXPDonutChartWidget,
                     AXPBarChartWidget,
+                    AXPGaugeChartWidget,
                 ],
             })] }); }
 }
@@ -14362,6 +14452,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                                 //charts
                                 AXPDonutChartWidget,
                                 AXPBarChartWidget,
+                                AXPGaugeChartWidget,
                             ],
                         }),
                     ],