@acorex/platform 18.0.9 → 18.0.11

package/fesm2022/acorex-platform-core.mjs

@@ -0,0 +1,87 @@
+import * as i0 from '@angular/core';
+import { signal, Pipe, inject, Injectable } from '@angular/core';
+import { interval } from 'rxjs';
+import { startWith, map } from 'rxjs/operators';
+import { DomSanitizer } from '@angular/platform-browser';
+
+function getNestedKeys(obj, prefix = '') {
+    let keys = [];
+    for (const key in obj) {
+        if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {
+            keys = [...keys, ...getNestedKeys(obj[key], prefix + key + '.')];
+        }
+        else {
+            keys.push(prefix + key);
+        }
+    }
+    return keys;
+}
+
+class AXPCountdownPipe {
+    constructor() {
+        this.countdownSignal = signal(this.setupTimer());
+        this.targetDate = 0;
+    }
+    transform(value) {
+        this.updateTargetDate(value);
+        return this.countdownSignal();
+    }
+    setupTimer() {
+        return interval(1000).pipe(startWith(0), map(() => {
+            const diff = this.targetDate - new Date().getTime();
+            if (diff < 0) {
+                return "Time's up!";
+            }
+            const times = [86400, 3600, 60, 1].map((seconds) => Math.floor((diff / 1000 / seconds) % (seconds === 1 ? 60 : 24)));
+            const labels = ['d', 'h', 'm', 's'];
+            return times
+                .map((t, i) => (t > 0 || i === 3 ? `${t}${labels[i]}` : ''))
+                .join(' ')
+                .trim();
+        }));
+    }
+    updateTargetDate(value) {
+        this.targetDate = new Date(value).getTime();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPCountdownPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXPCountdownPipe, isStandalone: true, name: "countdown", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPCountdownPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'countdown',
+                    pure: false,
+                    standalone: true,
+                }]
+        }] });
+
+class AXPHtmlUtils {
+    constructor() {
+        this.sanitizer = inject(DomSanitizer);
+    }
+    getTextFromHTML(html) {
+        if (!html)
+            return '';
+        const tempElement = document.createElement('div');
+        tempElement.innerHTML = html;
+        return tempElement.innerText || tempElement.textContent || '';
+    }
+    getSafeHTMLfromHTML(html) {
+        if (!html)
+            return null;
+        return this.sanitizer.bypassSecurityTrustHtml(html);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPHtmlUtils, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPHtmlUtils, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPHtmlUtils, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXPCountdownPipe, AXPHtmlUtils, getNestedKeys };
+//# sourceMappingURL=acorex-platform-core.mjs.map

package/fesm2022/acorex-platform-core.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-platform-core.mjs","sources":["../../../../libs/platform/core/src/lib/types.ts","../../../../libs/platform/core/src/utils/countdown-timer.ts","../../../../libs/platform/core/src/utils/html-utils.ts","../../../../libs/platform/core/src/acorex-platform-core.ts"],"sourcesContent":["export type AXPPartialNested<T> = {\n    [K in keyof T]?: T[K] extends object ? AXPPartialNested<T[K]> : T[K];\n};\n\nexport type AXPMetaData = Record<string, any>;\n\nexport type AXPOptionsData = Record<string, any>;\n\nexport type AXPValidationRule = { rule: string; message?: string; options?: any; disabled?: boolean };\n\nexport type AXPValidationRules = AXPValidationRule[];\n\n\nexport function getNestedKeys(obj: any, prefix: string = ''): string[] {\n    let keys: string[] = [];\n    for (const key in obj) {\n        if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {\n            keys = [...keys, ...getNestedKeys(obj[key], prefix + key + '.')];\n        } else {\n            keys.push(prefix + key);\n        }\n    }\n    return keys;\n}","import { Pipe, PipeTransform, signal } from '@angular/core';\nimport { interval, Observable } from 'rxjs';\nimport { map, startWith } from 'rxjs/operators';\n\n@Pipe({\n  name: 'countdown',\n  pure: false,\n  standalone: true,\n})\nexport class AXPCountdownPipe implements PipeTransform {\n  private countdownSignal = signal(this.setupTimer());\n\n  transform(value: string): Observable<string> {\n    this.updateTargetDate(value);\n    return this.countdownSignal();\n  }\n\n  private setupTimer() {\n    return interval(1000).pipe(\n      startWith(0),\n      map(() => {\n        const diff = this.targetDate - new Date().getTime();\n        if (diff < 0) {\n          return \"Time's up!\";\n        }\n\n        const times = [86400, 3600, 60, 1].map((seconds) => Math.floor((diff / 1000 / seconds) % (seconds === 1 ? 60 : 24)));\n        const labels = ['d', 'h', 'm', 's'];\n        return times\n          .map((t, i) => (t > 0 || i === 3 ? `${t}${labels[i]}` : ''))\n          .join(' ')\n          .trim();\n      })\n    );\n  }\n\n  private updateTargetDate(value: string) {\n    this.targetDate = new Date(value).getTime();\n  }\n\n  private targetDate: number = 0;\n}\n","import { inject, Injectable } from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\n\n@Injectable({ providedIn: 'root' })\nexport class AXPHtmlUtils {\n  private sanitizer = inject(DomSanitizer);\n  getTextFromHTML(html: string | undefined | null): string {\n    if (!html) return '';\n    const tempElement = document.createElement('div');\n    tempElement.innerHTML = html;\n    return tempElement.innerText || tempElement.textContent || '';\n  }\n  getSafeHTMLfromHTML(html: string | undefined | null): SafeHtml | null {\n    if (!html) return null;\n    return this.sanitizer.bypassSecurityTrustHtml(html);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-platform-layout-builder.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, InjectionToken, inject, ChangeDetectorRef, computed, EventEmitter, Component, ChangeDetectionStrategy, Output, Input, Injector, ViewChild, NgModule, Optional, Inject } from '@angular/core';
+import { signal, Injectable, InjectionToken, inject, computed, afterNextRender, EventEmitter, model, effect, Component, ChangeDetectionStrategy, Output, Input, Injector, ChangeDetectorRef, ViewChild, NgModule, Optional, Inject } from '@angular/core';
 import { set, get, isEqual, clone, merge, cloneDeep, sum } from 'lodash-es';
 import { Subject, debounceTime, filter } from 'rxjs';
 import { AXUnsubscriber } from '@acorex/core/utils';
@@ -11,6 +11,11 @@ import * as i3 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
 import { AXDataTableColumnComponent } from '@acorex/components/data-table';
 
+class AXPLayoutElement {
+    api() {
+        return {};
+    }
+}
 class AXPLayoutBuilderService {
     constructor() {
         this.context$ = signal({});
@@ -19,7 +24,9 @@ class AXPLayoutBuilderService {
         this.onChanged = new Subject();
         this.debouncers = {};
         this.debouncerSubscriptions = {};
+        this.widgets = new Map();
     }
+    ;
     get context() {
         return this.context$();
     }
@@ -76,6 +83,13 @@ class AXPLayoutBuilderService {
     getValue(path) {
         return get(this.context, path);
     }
+    registerWidget(id, widget) {
+        this.widgets.set(id, widget);
+        //console.log(this.widgets.entries());
+    }
+    getWidget(id) {
+        return this.widgets.get(id);
+    }
     unsubscribeDebouncers() {
         Object.keys(this.debouncerSubscriptions).forEach((path) => {
             this.debouncerSubscriptions[path].unsubscribe();
@@ -86,47 +100,69 @@ class AXPLayoutBuilderService {
     ngOnDestroy() {
         this.unsubscribeDebouncers();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLayoutBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLayoutBuilderService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutBuilderService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLayoutBuilderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutBuilderService, decorators: [{
             type: Injectable
         }] });
 
+function cloneProperty(property, values) {
+    return merge(cloneDeep(property), values);
+}
 const AXP_WIDGET_TOKEN = new InjectionToken('AXP_WIDGET_TOKEN');
 const AXP_WIDGET_COLUMN_TOKEN = new InjectionToken('AXP_WIDGET_COLUMN_TOKEN');
-class AXPWidgetBase {
+class AXPWidgetComponent extends AXPLayoutElement {
     constructor() {
+        super(...arguments);
         this.token = inject(AXP_WIDGET_TOKEN);
-        this.cdr = inject(ChangeDetectorRef);
-        this.id = this.token.id;
-        this.path = this.token.path;
-        this.mode = this.token.mode;
-        this.type = this.token.type;
-        this.children = this.token.children;
+        this.path = this.token.node.path ?? `V${Math.random() * Math.pow(10, 18)}`;
+        this.name = this.token.node.name;
+        this.defaultValue = this.token.node.defaultValue;
+        this._children = signal(this.token.node.children ?? []);
+        this.children = this._children.asReadonly();
+        this.config = this.token.config;
+        this._options = signal(this.token.node.options ?? {});
+        this.options = this._options.asReadonly();
         this.contextService = inject(AXPLayoutBuilderService);
-        this.rawValue = computed(() => (this.path ? get(this.contextService.context, this.path) : null));
+        this.rawValue = computed(() => (this._fullPath ? get(this.contextService.context, this._fullPath) : null));
+        this.onReady = new Subject();
+        this.isRendered = false;
+        this.nextRender = afterNextRender(() => {
+            //
+            if (!this.isRendered) {
+                //this.detectFullPath();
+                //
+                this.onReady.next();
+                //
+                this.isRendered = true;
+            }
+        });
+    }
+    get id() {
+        return this._id;
     }
     ngOnInit() {
-        this.setOptions(this.token.options);
+        this.initRender();
+    }
+    initRender() {
+        this.detectFullPath();
+        if (this.defaultValue != null) {
+            this.setValue(this.defaultValue);
+        }
     }
     getValue() {
         return this.rawValue();
     }
     setValue(value) {
         const oldValue = this.rawValue();
-        if (this.path) {
-            this.contextService.setValue(this.path, value);
+        if (this._fullPath) {
+            this.contextService.setValue(this._fullPath, value);
             this.onValueChanged(oldValue, value);
         }
     }
-    setOption(path, value) {
-        set(this, path, value);
-        this.cdr.markForCheck();
-    }
     setOptions(values) {
-        merge(this, values);
-        this.cdr.markForCheck();
+        this._options.set({ ...this.options(), ...values });
     }
     call(name, ...args) {
         const fn = get(this, name);
@@ -134,51 +170,81 @@ class AXPWidgetBase {
             fn.bind(this)(...args);
         }
     }
-    onValueChanged(oldValue, newValue) {
+    setChildren(children) {
+        this._children.set([...children]);
+    }
+    onValueChanged(oldValue, newValue) { }
+    detectFullPath() {
+        let sections = [];
+        let ids = [];
+        //
+        let parent = this;
+        //
+        while (parent) {
+            const path = parent.path ?? parent.name;
+            const id = parent.name;
+            //
+            if (path) {
+                sections.push(path);
+                if (parent.index != null) {
+                    sections.push(`[${parent.index}]`);
+                }
+            }
+            if (id) {
+                ids.push(id);
+                if (parent.index != null) {
+                    ids.push(`${parent.index}`);
+                }
+            }
+            parent = parent.parent;
+        }
+        //
+        this._fullPath = sections.reverse().join('.');
+        this._id = this.name || this.parent ? ids.reverse().join('_') : null;
+        if (this._id) {
+            this.contextService.registerWidget(this._id, this);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXPContainerWidgetComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.node = this.token.node;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPWidgetBase, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPWidgetBase }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPContainerWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPContainerWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPWidgetBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPContainerWidgetComponent, decorators: [{
             type: Injectable
         }] });
-class AXPColumnWidgetBase {
+class AXPColumnWidgetComponent {
     constructor() {
         this.token = inject(AXP_WIDGET_COLUMN_TOKEN);
         this.path = this.token.path;
-        this.options = this.token.options;
-    }
-    get rawValue() {
-        return this._rawValue;
-    }
-    set rawValue(v) {
-        this._rawValue = v;
-    }
-    ngOnInit() {
-        this.setOptions(this.token.options);
-    }
-    setOptions(values) {
-        merge(this, values);
+        this.options = this.token.options ?? {};
+        this.rawValue = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPColumnWidgetBase, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPColumnWidgetBase }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPColumnWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPColumnWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPColumnWidgetBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPColumnWidgetComponent, decorators: [{
             type: Injectable
         }] });
 
 class AXPWidgetContainerComponent {
     constructor() {
-        this.contextChange = new EventEmitter();
+        this.onChanged = new EventEmitter();
+        this.context = model({});
         this.unsubscriber = inject(AXUnsubscriber);
         this.builderService = inject(AXPLayoutBuilderService);
-    }
-    get context() {
-        return this._context;
-    }
-    set context(v) {
-        this._context = v;
-        this.builderService.initial(this.context);
+        this.ef = effect(() => {
+            this.builderService.initial(this.context());
+        }, { allowSignalWrites: true });
     }
     set variables(v) {
         this.builderService.setVariables(v);
@@ -187,18 +253,18 @@ class AXPWidgetContainerComponent {
         this.builderService.setFunctions(v);
     }
     ngOnInit() {
-        this.builderService.initial(this.context);
         this.builderService
             .onChanged
             .pipe(this.unsubscriber.takeUntilDestroy)
-            .subscribe(ctx => {
-            this.contextChange.emit(cloneDeep(ctx.data));
+            .subscribe(e => {
+            this.context.set(e.data);
+            this.onChanged.emit(e);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPWidgetContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: { context: "context", variables: "variables", functions: "functions" }, outputs: { contextChange: "contextChange" }, host: { styleAttribute: "display: contents;" }, providers: [AXPLayoutBuilderService, AXUnsubscriber], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: { context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, variables: { classPropertyName: "variables", publicName: "variables", isSignal: false, isRequired: false, transformFunction: null }, functions: { classPropertyName: "functions", publicName: "functions", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onChanged: "onChanged", context: "contextChange" }, host: { styleAttribute: "display: contents;" }, providers: [AXPLayoutBuilderService, AXUnsubscriber], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPWidgetContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-widgets-container',
@@ -207,10 +273,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                     host: { style: 'display: contents;' },
                     providers: [AXPLayoutBuilderService, AXUnsubscriber],
                 }]
-        }], propDecorators: { contextChange: [{
+        }], propDecorators: { onChanged: [{
                 type: Output
-            }], context: [{
-                type: Input
             }], variables: [{
                 type: Input
             }], functions: [{
@@ -237,10 +301,13 @@ class AXPWidgetRegistryService {
         }
         return widget;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPWidgetRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPWidgetRegistryService, providedIn: 'root' }); }
+    all() {
+        return Array.from(this.types.values());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetRegistryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPWidgetRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetRegistryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -255,7 +322,14 @@ class AXPWidgetRendererComponent {
         this._node = v;
         this.loadComponent();
     }
+    get mode() {
+        return this._mode;
+    }
+    set mode(v) {
+        this._mode = v;
+    }
     constructor() {
+        this._mode = 'edit';
         this.mergedOptions = signal({});
         this.injector = inject(Injector);
         this.builderService = inject(AXPLayoutBuilderService);
@@ -266,7 +340,7 @@ class AXPWidgetRendererComponent {
         this.expressionEvaluators = new Map();
         this.scope = null;
         this.builderService.onChanged.pipe(this.unsubscriber.takeUntilDestroy).subscribe(async (e) => {
-            if (await this.updateOptionsBasedOnContext() > 0) {
+            if ((await this.updateOptionsBasedOnContext()) > 0) {
                 this.applyOptions();
             }
             if (this.checkFormulaForUpdate(this.node.formula, e.path)) {
@@ -277,16 +351,21 @@ class AXPWidgetRendererComponent {
     async loadComponent() {
         this.isLoading.set(true);
         const widget = this.widgetRegistery.resolve(this.node.type);
-        this.mergedOptions.set(merge(cloneDeep(widget?.defaultOptions), cloneDeep(widget?.components[this.node.mode]?.defaultOptions), this.node.options) || {});
+        //
+        const props = widget?.components[this.mode]?.properties
+            ?.filter((c) => c.schema.defaultValue)
+            .map((c) => ({ [c.name]: c.schema.defaultValue }))
+            .reduce((acc, curr) => {
+            return { ...acc, ...curr };
+        }, {});
+        //
+        this.mergedOptions.set(merge(props, this.node.options) || {});
         this.preprocessAndInitialOptions(cloneDeep(this.node.options));
         await this.updateOptionsBasedOnContext();
         const tokenValue = {
-            id: this.node.id,
-            path: this.node.path,
-            mode: this.node.mode,
-            type: this.node.type,
-            children: this.node.children,
-            options: this.mergedOptions()
+            node: this.node,
+            options: this.mergedOptions(),
+            config: widget,
         };
         const token = Injector.create({
             parent: this.injector,
@@ -297,13 +376,16 @@ class AXPWidgetRendererComponent {
                 },
             ],
         });
-        var com = await widget?.components[this.node.mode]?.component();
+        var com = await widget?.components[this.mode]?.component();
         this.portal = new ComponentPortal(com, null, token);
         this.isLoading.set(false);
     }
     async handleAttached(portalOutletRef) {
         portalOutletRef = portalOutletRef;
         this.instance = portalOutletRef.instance;
+        this.instance.parent = this.parentNode;
+        this.instance.index = this.index;
+        this.instance.mode = this.mode;
         await this.updateValueBasedOnFormula();
         await this.assignTriggers();
     }
@@ -351,7 +433,7 @@ class AXPWidgetRendererComponent {
         }
         // Apply updates to mergedOptions
         if (updates.length > 0) {
-            this.mergedOptions.update(o => {
+            this.mergedOptions.update((o) => {
                 const updatedOptions = { ...o };
                 updates.forEach(({ path, newValue }) => {
                     // Set the new value in the updatedOptions object by path
@@ -419,6 +501,7 @@ class AXPWidgetRendererComponent {
     getEventScope() {
         const scope = {};
         set(scope, 'context', (path) => this.builderService.onChanged.pipe(filter((c) => c.path == path)));
+        set(scope, 'from', (event) => get(this.instance.api(), event));
         return scope;
     }
     getWidgetScope() {
@@ -426,6 +509,9 @@ class AXPWidgetRendererComponent {
         set(scope, 'call', (name, ...args) => {
             this.instance.call(name, ...args);
         });
+        set(scope, 'find', (id) => {
+            return this.builderService.getWidget(id)?.api();
+        });
         return scope;
     }
     getFunctionScope() {
@@ -433,7 +519,7 @@ class AXPWidgetRendererComponent {
         set(scope, 'sum', (values) => {
             return sum(values);
         });
-        Object.entries(this.builderService.functions).forEach(i => {
+        Object.entries(this.builderService.functions).forEach((i) => {
             set(scope, i[0], (...args) => {
                 return i[1](...args);
             });
@@ -486,8 +572,8 @@ class AXPWidgetRendererComponent {
             console.error('Error evaluating expression:', error);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPWidgetRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: { node: "node" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: { node: "node", mode: "mode", parentNode: "parentNode", index: "index" }, providers: [
             {
                 provide: AXUnsubscriber,
             },
@@ -502,7 +588,7 @@ class AXPWidgetRendererComponent {
     </ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i3.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPWidgetRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-widget-renderer',
@@ -526,6 +612,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
         }], ctorParameters: () => [], propDecorators: { node: [{
                 type: Input,
                 args: [{ required: true }]
+            }], mode: [{
+                type: Input
+            }], parentNode: [{
+                type: Input
+            }], index: [{
+                type: Input
             }] } });
 
 class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
@@ -561,7 +653,14 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
         const widget = this.widgetRegistery.resolve(this.node.type);
         const mode = 'column';
         this.component = await widget?.components[mode]?.component();
-        this.mergedOptions.set(merge(widget?.defaultOptions, widget?.components[mode]?.defaultOptions, this.node.options) || {});
+        //
+        const props = widget?.components[mode]?.properties?.filter(c => c.schema.defaultValue)
+            .map(c => ({ [c.name]: c.schema.defaultValue }))
+            .reduce((acc, curr) => {
+            return { ...acc, ...curr };
+        }, {});
+        //
+        this.mergedOptions.set(merge(props, this.node.options) || {});
         const tokenValue = {
             path: this.node.path,
             options: this.mergedOptions()
@@ -582,8 +681,8 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
     getInputs(data) {
         return { rawValue: get(data, this.node.path) };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPWidgetColumnRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: { caption: "caption", node: "node", footerTemplate: "footerTemplate", cellTemplate: "cellTemplate", headerTemplate: "headerTemplate" }, providers: [AXPLayoutBuilderService, { 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetColumnRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: { caption: "caption", node: "node", footerTemplate: "footerTemplate", cellTemplate: "cellTemplate", headerTemplate: "headerTemplate" }, providers: [AXPLayoutBuilderService, { 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: `
     <ng-template #header>{{ caption }}</ng-template>
     <ng-template #cell let-row>
       @if(component && widgetInjector && row?.data) {
@@ -593,7 +692,7 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
     <ng-template #footer></ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPWidgetColumnRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetColumnRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-widget-column-renderer',
@@ -670,11 +769,11 @@ class AXPLayoutBuilderModule {
             f();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLayoutBuilderModule, deps: [{ token: 'AXPLayoutBuilderModuleFactory', optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.2", ngImport: i0, type: AXPLayoutBuilderModule, declarations: [AXPWidgetContainerComponent, AXPWidgetRendererComponent, AXPWidgetColumnRendererComponent], imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule], exports: [AXPWidgetContainerComponent, AXPWidgetRendererComponent, AXPWidgetColumnRendererComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLayoutBuilderModule, imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutBuilderModule, deps: [{ token: 'AXPLayoutBuilderModuleFactory', optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutBuilderModule, declarations: [AXPWidgetContainerComponent, AXPWidgetRendererComponent, AXPWidgetColumnRendererComponent], imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule], exports: [AXPWidgetContainerComponent, AXPWidgetRendererComponent, AXPWidgetColumnRendererComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutBuilderModule, imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLayoutBuilderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutBuilderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule],
@@ -688,9 +787,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                     args: ['AXPLayoutBuilderModuleFactory']
                 }] }] });
 
+// export interface AXPLayoutPage {
+//     id: string,
+//     title: string,
+//     forms: AXPLayoutForm[]
+// }
+// export interface AXPLayoutForm {
+//     id: string,
+//     title: string,
+// }
+// export interface AXPLayoutFormRootGroup {
+//     id: string,
+//     title: string,
+//     layout?: AXPGridLayoutOptions
+// }
+// export interface AXPLayoutFormGroup {
+//     id: string,
+//     title: string,
+//     groups: AXPLayoutFormGroup
+//     fields: AXPLayoutFormField[]
+// }
+// export interface AXPLayoutFormField {
+//     name: string;
+//     title: string;
+//     description?: string;
+//     order?: number,
+//     editable: boolean,
+//     widget: AXPWidgetNode,
+// }
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXPColumnWidgetBase, AXPLayoutBuilderModule, AXPLayoutBuilderService, AXPWidgetBase, AXPWidgetColumnRendererComponent, AXPWidgetContainerComponent, AXPWidgetRegistryService, AXPWidgetRendererComponent, AXP_WIDGET_COLUMN_TOKEN, AXP_WIDGET_TOKEN };
+export { AXPColumnWidgetComponent, AXPContainerWidgetComponent, AXPLayoutBuilderModule, AXPLayoutBuilderService, AXPLayoutElement, AXPWidgetColumnRendererComponent, AXPWidgetComponent, AXPWidgetContainerComponent, AXPWidgetRegistryService, AXPWidgetRendererComponent, AXP_WIDGET_COLUMN_TOKEN, AXP_WIDGET_TOKEN, cloneProperty };
 //# sourceMappingURL=acorex-platform-layout-builder.mjs.map