@acorex/platform 20.6.0-next.1 → 20.6.0-next.11

package/fesm2022/acorex-platform-layout-widget-core.mjs

@@ -281,17 +281,16 @@ class AXPWidgetCoreService {
         return Array.from(this.widgets.keys());
     }
     ngOnDestroy() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetCoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetCoreService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetCoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetCoreService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetCoreService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetCoreService, decorators: [{
             type: Injectable
         }] });
 
 const AXPWidgetsCatalog = {
     timeDuration: 'time-duration',
     timeDurationFilter: 'time-duration-filter',
-    tagable: 'tagable-editor',
     checkbox: 'checkbox-editor',
     color: 'color-editor',
     connectedLists: 'connected-lists-editor',
@@ -324,6 +323,7 @@ const AXPWidgetsCatalog = {
     lookup: 'lookup-editor',
     formField: 'form-field',
     qrcode: 'qrcode',
+    schedulerPicker: 'scheduler-picker',
     advancedGrid: 'advanced-grid-layout',
     advancedGridItem: 'advanced-grid-item-layout',
     grid: 'grid-layout',
@@ -388,6 +388,7 @@ const AXPWidgetsCatalog = {
     dataList: 'data-list',
     listToolbar: 'list-toolbar',
     entityList: 'entity-list',
+    editorJs: 'editor-js-editor',
     documentUploader: 'document-uploader',
     signatureList: 'signature-list',
     status: 'status-widget',
@@ -544,10 +545,10 @@ class AXPBaseWidgetComponent extends AXPWidgetCoreElement {
         this._children.set([...children]);
     }
     onAdded() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPBaseWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPBaseWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPBaseWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPBaseWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPBaseWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPBaseWidgetComponent, decorators: [{
             type: Injectable
         }] });
 class AXPLayoutBaseWidgetComponent extends AXPBaseWidgetComponent {
@@ -558,10 +559,10 @@ class AXPLayoutBaseWidgetComponent extends AXPBaseWidgetComponent {
         }
         super.ngOnInit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPLayoutBaseWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPLayoutBaseWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLayoutBaseWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLayoutBaseWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPLayoutBaseWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPLayoutBaseWidgetComponent, decorators: [{
             type: Injectable
         }] });
 class AXPValueWidgetComponent extends AXPLayoutBaseWidgetComponent {
@@ -665,10 +666,10 @@ class AXPValueWidgetComponent extends AXPLayoutBaseWidgetComponent {
             this.setValue(e.value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPValueWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPValueWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPValueWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPValueWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPValueWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPValueWidgetComponent, decorators: [{
             type: Injectable
         }] });
 class AXPDataListWidgetComponent extends AXPValueWidgetComponent {
@@ -677,74 +678,86 @@ class AXPDataListWidgetComponent extends AXPValueWidgetComponent {
         this.dataService = inject(AXPDataSourceDefinitionProviderService);
         this.textField = computed(() => this.options()['textField'] ?? 'title', ...(ngDevMode ? [{ debugName: "textField" }] : []));
         this.valueField = computed(() => this.options()['valueField'] ?? 'id', ...(ngDevMode ? [{ debugName: "valueField" }] : []));
-        this.textTemplate = computed(() => (this.options()['textTemplate'] ?? '').replaceAll('{', '{{').replaceAll('}', '}}'), ...(ngDevMode ? [{ debugName: "textTemplate" }] : []));
+        this.textTemplate = computed(() => isNil(this.options()['textTemplate']) ? undefined : this.options()['textTemplate'].replace(/{/g, '{{').replace(/}/g, '}}'), ...(ngDevMode ? [{ debugName: "textTemplate" }] : []));
         this.dataSource = signal(convertArrayToDataSource([]), ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
-        this.isReady = computed(() => {
-            const key = this.dataSource().config?.key;
-            const valueField = this.valueField();
-            const result = key == valueField;
-            return result;
-        }, ...(ngDevMode ? [{ debugName: "isReady" }] : []));
         this.selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
+        //#region ----   DataSource Loading Effect   ----
+        /**
+         * Track the last loaded string dataSource reference to prevent infinite loops
+         * Only used for string-based datasources (not arrays or AXDataSource instances)
+         */
+        this.lastStringDataSourceRef = null;
         this.rf = effect(async () => {
             const rawValue = this.options()['dataSource'];
-            // static  datasource class
-            untracked(async () => {
-                if (!isEqual(this.options()['dataSource'].config, this.dataSource().config)) {
-                    if (rawValue instanceof AXDataSource) {
+            // For string datasources: prevent infinite loop by checking reference
+            if (typeof rawValue === 'string') {
+                if (rawValue === this.lastStringDataSourceRef) {
+                    return;
+                }
+                this.lastStringDataSourceRef = rawValue;
+            }
+            else {
+                // Reset string reference when dataSource changes to non-string
+                this.lastStringDataSourceRef = null;
+            }
+            // Process dataSource creation in untracked context
+            await untracked(async () => {
+                if (rawValue instanceof AXDataSource) {
+                    // For AXDataSource instances, check if config changed
+                    if (!isEqual(rawValue.config, this.dataSource().config)) {
                         this.dataSource.set(rawValue);
                     }
-                    // static array datasource
-                    else if (Array.isArray(rawValue)) {
-                        const ds = new AXDataSource({
+                }
+                // static array datasource - always recreate when options change
+                else if (Array.isArray(rawValue)) {
+                    const ds = new AXDataSource({
+                        key: this.valueField(),
+                        pageSize: 10,
+                        load: async (e) => {
+                            const raw = this.options()['dataSource'];
+                            const skip = e.skip ?? 0;
+                            const take = e.take ?? raw.length;
+                            return {
+                                items: raw.slice(skip, skip + take),
+                                total: raw.length,
+                            };
+                        },
+                        byKey: (key) => {
+                            const raw = this.options()['dataSource'];
+                            const item = raw.filter((c) => c[this.valueField()] == key);
+                            return Promise.resolve(item[0]);
+                        },
+                    });
+                    this.dataSource.set(ds);
+                }
+                // resolve data source by name (string or object with id)
+                else if (rawValue && (typeof rawValue == 'string' || typeof rawValue == 'object')) {
+                    const id = typeof rawValue == 'object' ? rawValue['id'] : rawValue;
+                    const c = await this.dataService.get(id);
+                    if (this.mode == 'designer' && c?.samples?.length) {
+                        this.dataSource.set(convertArrayToDataSource(c.samples, {
                             key: this.valueField(),
-                            pageSize: 10,
-                            load: async (e) => {
-                                const raw = this.options()['dataSource'];
-                                const skip = e.skip ?? 0;
-                                const take = e.take ?? raw.length;
-                                return {
-                                    items: raw.slice(skip, skip + take),
-                                    total: raw.length,
-                                };
-                            },
-                            byKey: (key) => {
-                                const raw = this.options()['dataSource'];
-                                const item = raw.filter((c) => c[this.valueField()] == key);
-                                return Promise.resolve(item[0]);
-                            },
-                        });
-                        this.dataSource.set(ds);
+                            pageSize: 500,
+                        }));
                     }
-                    // resolve data source by name
-                    else if (rawValue && (typeof rawValue == 'string' || typeof rawValue == 'object')) {
-                        const id = typeof rawValue == 'object' ? rawValue['id'] : rawValue;
-                        const c = await this.dataService.get(id);
-                        if (this.mode == 'designer' && c?.samples?.length) {
-                            this.dataSource.set(convertArrayToDataSource(c.samples, {
-                                key: this.valueField(),
-                                pageSize: 500,
-                            }));
+                    else {
+                        const ds = c?.source();
+                        if (ds && ds instanceof Promise) {
+                            const d = await ds;
+                            this.dataSource.set(d);
                         }
+                        else if (ds) {
+                            this.dataSource.set(ds);
+                        }
+                        // empty datasource
                         else {
-                            const ds = c?.source();
-                            if (ds && ds instanceof Promise) {
-                                const d = await ds;
-                                this.dataSource.set(d);
-                            }
-                            else if (ds) {
-                                this.dataSource.set(ds);
-                            }
-                            // empty datasource
-                            else {
-                                this.dataSource.set(convertArrayToDataSource([]));
-                            }
+                            this.dataSource.set(convertArrayToDataSource([]));
                         }
                     }
-                    // empty datasource
-                    else {
-                        this.dataSource.set(convertArrayToDataSource([]));
-                    }
+                }
+                // empty datasource
+                else {
+                    this.dataSource.set(convertArrayToDataSource([]));
                 }
             });
         }, ...(ngDevMode ? [{ debugName: "rf" }] : []));
@@ -760,6 +773,7 @@ class AXPDataListWidgetComponent extends AXPValueWidgetComponent {
             this.selectedItems.set(items.filter((c) => c != null));
         }, ...(ngDevMode ? [{ debugName: "effect2" }] : []));
     }
+    //#endregion
     async extractItem(item) {
         if (isNil(item)) {
             return null;
@@ -782,10 +796,10 @@ class AXPDataListWidgetComponent extends AXPValueWidgetComponent {
                 [this.textField()]: item,
             };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPDataListWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPDataListWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPDataListWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPDataListWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPDataListWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPDataListWidgetComponent, decorators: [{
             type: Injectable
         }] });
 class AXPColumnWidgetComponent {
@@ -803,10 +817,10 @@ class AXPColumnWidgetComponent {
             return this.rawValue;
         }, ...(ngDevMode ? [{ debugName: "value" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPColumnWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPColumnWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPColumnWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPColumnWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPColumnWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPColumnWidgetComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -869,10 +883,10 @@ class AXPBoxModelLayoutWidgetComponent extends AXPLayoutBaseWidgetComponent {
             };
         }, ...(ngDevMode ? [{ debugName: "inlineClass" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPBoxModelLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPBoxModelLayoutWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPBoxModelLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPBoxModelLayoutWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPBoxModelLayoutWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPBoxModelLayoutWidgetComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -882,10 +896,10 @@ class AXPBlockBaseLayoutWidgetComponent extends AXPBoxModelLayoutWidgetComponent
         this.hostClass = computed(() => this.blockClass(), ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
         this.hostStyle = computed(() => this.blockStyle(), ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPBlockBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPBlockBaseLayoutWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPBlockBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPBlockBaseLayoutWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPBlockBaseLayoutWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPBlockBaseLayoutWidgetComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -946,10 +960,10 @@ class AXPFlexBaseLayoutWidgetComponent extends AXPBlockBaseLayoutWidgetComponent
             return this.hostFlexStyle();
         }, ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPFlexBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPFlexBaseLayoutWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPFlexBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPFlexBaseLayoutWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPFlexBaseLayoutWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPFlexBaseLayoutWidgetComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -959,10 +973,10 @@ class AXPInlineBaseLayoutWidgetComponent extends AXPBoxModelLayoutWidgetComponen
         this.hostClass = computed(() => this.inlineClass(), ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
         this.hostStyle = computed(() => this.inlineStyle(), ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPInlineBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPInlineBaseLayoutWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPInlineBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPInlineBaseLayoutWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPInlineBaseLayoutWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPInlineBaseLayoutWidgetComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -1018,10 +1032,10 @@ class AXPFlexItemBaseLayoutWidgetComponent extends AXPInlineBaseLayoutWidgetComp
             return this.hostFlexItemStyle();
         }, ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPFlexItemBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPFlexItemBaseLayoutWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPFlexItemBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPFlexItemBaseLayoutWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPFlexItemBaseLayoutWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPFlexItemBaseLayoutWidgetComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -1057,10 +1071,10 @@ class AXPGridBaseLayoutWidgetComponent extends AXPBlockBaseLayoutWidgetComponent
         this.hostClass = computed(() => this.hostGridClass(), ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
         this.hostStyle = computed(() => this.hostGridStyle(), ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPGridBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPGridBaseLayoutWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPGridBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPGridBaseLayoutWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPGridBaseLayoutWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPGridBaseLayoutWidgetComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -1097,10 +1111,10 @@ class AXPGridItemBaseLayoutWidgetComponent extends AXPFlexBaseLayoutWidgetCompon
         this.hostClass = computed(() => this.hostGridItemClass(), ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
         this.hostStyle = computed(() => this.hostGridItemStyle(), ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPGridItemBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPGridItemBaseLayoutWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPGridItemBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPGridItemBaseLayoutWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPGridItemBaseLayoutWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPGridItemBaseLayoutWidgetComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -1118,18 +1132,18 @@ class AXPTableBaseLayoutWidgetComponent extends AXPBlockBaseLayoutWidgetComponen
         this.hostClass = computed(() => this.hostTableClass(), ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
         this.hostStyle = computed(() => this.hostTableStyle(), ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPTableBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPTableBaseLayoutWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTableBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTableBaseLayoutWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPTableBaseLayoutWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTableBaseLayoutWidgetComponent, decorators: [{
             type: Injectable
         }] });
 
 class AXPTableItemOpsBaseLayoutWidgetComponent extends AXPBlockBaseLayoutWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPTableItemOpsBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPTableItemOpsBaseLayoutWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTableItemOpsBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTableItemOpsBaseLayoutWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPTableItemOpsBaseLayoutWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTableItemOpsBaseLayoutWidgetComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -1147,10 +1161,10 @@ class AXPTableItemBaseLayoutWidgetComponent extends AXPTableItemOpsBaseLayoutWid
         this.hostClass = computed(() => this.blockClass(), ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
         this.hostStyle = computed(() => this.blockStyle(), ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPTableItemBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPTableItemBaseLayoutWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTableItemBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTableItemBaseLayoutWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPTableItemBaseLayoutWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTableItemBaseLayoutWidgetComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -1181,10 +1195,10 @@ class AXPWidgetRegistryService {
     all() {
         return Array.from(this.types.values());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetRegistryService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetRegistryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetRegistryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1256,7 +1270,7 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
                 },
             ],
         });
-        this.width = this.customWidth ? this.customWidth : (this.mergedOptions().width ?? '200px');
+        this.width = this.mergedOptions().width === 'auto' ? 'auto' : this.customWidth ? this.customWidth : (this.mergedOptions().width ?? '200px');
         this.allowResizing = this.mergedOptions().allowResizing || true;
         this.cdr.detectChanges();
     }
@@ -1266,8 +1280,8 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
             rowData: data,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetColumnRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: AXPWidgetColumnRendererComponent, isStandalone: false, selector: "axp-widget-column-renderer", inputs: { caption: "caption", customExpandIcon: "customExpandIcon", customCollapseIcon: "customCollapseIcon", customWidth: "customWidth", node: "node", footerTemplate: "footerTemplate", expandHandler: "expandHandler", cellTemplate: "cellTemplate", headerTemplate: "headerTemplate" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetColumnRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPWidgetColumnRendererComponent, isStandalone: false, selector: "axp-widget-column-renderer", inputs: { caption: "caption", customExpandIcon: "customExpandIcon", customCollapseIcon: "customCollapseIcon", customWidth: "customWidth", node: "node", footerTemplate: "footerTemplate", expandHandler: "expandHandler", cellTemplate: "cellTemplate", headerTemplate: "headerTemplate" }, providers: [
             AXPWidgetCoreService,
             { provide: AXDataTableColumnComponent, useExisting: AXPWidgetColumnRendererComponent },
         ], viewQueries: [{ propertyName: "_contentFooterTemplate", first: true, predicate: ["footer"], descendants: true }, { propertyName: "_contentCellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "_contentHeaderTemplate", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
@@ -1303,7 +1317,7 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
     <ng-template #footer></ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetColumnRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetColumnRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-widget-column-renderer',
@@ -1404,10 +1418,10 @@ class AXPWidgetContainerComponent {
     find(name) {
         return this.builderService.waitForWidget(name);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: AXPWidgetContainerComponent, isStandalone: false, selector: "axp-widgets-container", inputs: { context: "context", functions: "functions" }, outputs: { onContextChanged: "onContextChanged" }, host: { styleAttribute: "display: contents;" }, providers: [AXPWidgetCoreService, AXPWidgetCoreContextStore], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPWidgetContainerComponent, isStandalone: false, selector: "axp-widgets-container", inputs: { context: "context", functions: "functions" }, outputs: { onContextChanged: "onContextChanged" }, host: { styleAttribute: "display: contents;" }, providers: [AXPWidgetCoreService, AXPWidgetCoreContextStore], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-widgets-container',
@@ -1426,12 +1440,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
             }] } });
 
 class AXPWidgetPlaceholderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: AXPWidgetPlaceholderComponent, isStandalone: true, selector: "axp-widget-placeholder", ngImport: i0, template: `<div>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPWidgetPlaceholderComponent, isStandalone: true, selector: "axp-widget-placeholder", ngImport: i0, template: `<div>
     <ax-skeleton class="ax-w-full ax-h-10 ax-rounded-md"></ax-skeleton>
   </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i1$1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetPlaceholderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetPlaceholderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-widget-placeholder',
@@ -1456,6 +1470,13 @@ class AXPWidgetRendererDirective {
         this.options = this._options.asReadonly();
         this.onOptionsChanged = output();
         this.onValueChanged = output();
+        //#region ----   Public API   ----
+        /**
+         * Signal that emits the component reference when it's ready
+         */
+        this._componentRefSignal = signal(null, ...(ngDevMode ? [{ debugName: "_componentRefSignal" }] : []));
+        this.componentRefSignal = this._componentRefSignal.asReadonly();
+        //#endregion
         //#region ----   Properties   ----
         this.mergedOptions = signal({}, ...(ngDevMode ? [{ debugName: "mergedOptions" }] : []));
         this.injector = inject(Injector);
@@ -1858,6 +1879,8 @@ class AXPWidgetRendererDirective {
                 this.componentRef.destroy();
             }
             this.viewContainerRef.clear();
+            // Reset the component ref signal
+            this._componentRefSignal.set(null);
             //
             const widget = this.widgetRegistery.resolve(this.node().type);
             //
@@ -1930,6 +1953,8 @@ class AXPWidgetRendererDirective {
             this.instance.index = this.index();
             this.instance.mode = this.mode();
             this.instance.setStatus(AXPWidgetStatus.Rendered);
+            // Update the component ref signal for reactive access
+            this._componentRefSignal.set(this.componentRef);
             this.instance?.onOptionsChanged?.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
                 this.onOptionsChanged.emit({ sender: this, widget: c.sender });
             });
@@ -2336,14 +2361,14 @@ class AXPWidgetRendererDirective {
             // console.error('Error evaluating action expression:', templateExpression, error);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetRendererDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.10", type: AXPWidgetRendererDirective, isStandalone: false, selector: "[axp-widget-renderer]", inputs: { parentNode: { classPropertyName: "parentNode", publicName: "parentNode", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onOptionsChanged: "onOptionsChanged", onValueChanged: "onValueChanged" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetRendererDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.12", type: AXPWidgetRendererDirective, isStandalone: false, selector: "[axp-widget-renderer]", inputs: { parentNode: { classPropertyName: "parentNode", publicName: "parentNode", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onOptionsChanged: "onOptionsChanged", onValueChanged: "onValueChanged" }, providers: [
             {
                 provide: AXUnsubscriber,
             },
         ], exportAs: ["widgetRenderer"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetRendererDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetRendererDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axp-widget-renderer]',
@@ -2399,11 +2424,11 @@ class AXPWidgetCoreModule {
             f();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetCoreModule, deps: [{ token: 'AXPWidgetCoreModuleFactory', optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetCoreModule, declarations: [AXPWidgetContainerComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective], imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule, AXTranslationModule], exports: [AXPWidgetContainerComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetCoreModule, imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule, AXTranslationModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetCoreModule, deps: [{ token: 'AXPWidgetCoreModuleFactory', optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetCoreModule, declarations: [AXPWidgetContainerComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective], imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule, AXTranslationModule], exports: [AXPWidgetContainerComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetCoreModule, imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule, AXTranslationModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetCoreModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetCoreModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule, AXTranslationModule],
@@ -2628,20 +2653,21 @@ var AXPWidgetGroupEnum;
     AXPWidgetGroupEnum["MetaData"] = "meta-data";
     AXPWidgetGroupEnum["SettingWidget"] = "setting-widget";
     AXPWidgetGroupEnum["EntityWidget"] = "entity-widget";
+    AXPWidgetGroupEnum["UtilityWidget"] = "utility-widget";
 })(AXPWidgetGroupEnum || (AXPWidgetGroupEnum = {}));
 
 class AXPWidgetStandaloneRendererHostComponent {
     constructor() {
         this.mode = 'edit';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetStandaloneRendererHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: AXPWidgetStandaloneRendererHostComponent, isStandalone: true, selector: "axp-widget-standalone-renderer-host", inputs: { mode: "mode", node: "node", context: "context", functions: "functions" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetStandaloneRendererHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPWidgetStandaloneRendererHostComponent, isStandalone: true, selector: "axp-widget-standalone-renderer-host", inputs: { mode: "mode", node: "node", context: "context", functions: "functions" }, ngImport: i0, template: `
     <axp-widgets-container [context]="context" [functions]="functions">
       <ng-container axp-widget-renderer [mode]="mode" [node]="node"></ng-container>
     </axp-widgets-container>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetStandaloneRendererHostComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetStandaloneRendererHostComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-widget-standalone-renderer-host',
@@ -2689,10 +2715,10 @@ class WidgetCoreRendererEngine {
             },
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WidgetCoreRendererEngine, deps: [{ token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WidgetCoreRendererEngine, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: WidgetCoreRendererEngine, deps: [{ token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: WidgetCoreRendererEngine, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WidgetCoreRendererEngine, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: WidgetCoreRendererEngine, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }] });