@acorex/platform 19.0.1 → 19.1.0

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

@@ -10,7 +10,7 @@ import { AXUnsubscriber } from '@acorex/core/utils';
 import { set, get, isEqual, clone, merge, cloneDeep, isNil, isUndefined, sum } from 'lodash-es';
 import { Subject, debounceTime, filter } from 'rxjs';
 import { convertArrayToDataSource, AXDataSource } from '@acorex/components/common';
-import { AXDataTableColumnComponent } from '@acorex/components/data-table';
+import { AXDataTableColumnComponent, AXBaseDataTable } from '@acorex/components/data-table';
 
 class AXPLayoutElement {
     api() {
@@ -207,6 +207,7 @@ const AXPWidgetsCatalog = {
     template: 'template',
     templateDesigner: 'template-designer',
     cronJob: 'cron-job',
+    spacing: 'spacing',
 };
 
 function cloneProperty(property, values) {
@@ -320,11 +321,22 @@ class AXPWidgetComponent extends AXPLayoutElement {
                 this.setValue(this.defaultValue, true);
             }
         }
+        //
+        if (get(this.node, '__meta__.added')) {
+            this.onAdded();
+        }
     }
     extractValue(path) {
-        return get(this.contextService.context(), path);
+        const rawValue = get(this.contextService.context(), path);
+        if (this.node.valueTransforms?.getter) {
+            return this.node.valueTransforms?.getter(rawValue);
+        }
+        return rawValue;
     }
     setValue(value, init = false) {
+        if (this.node.valueTransforms?.setter) {
+            value = this.node.valueTransforms?.setter(value);
+        }
         const oldValue = this.getValue();
         value = isUndefined(value) ? null : value;
         if (isNil(value) && isNil(oldValue)) {
@@ -351,9 +363,10 @@ class AXPWidgetComponent extends AXPLayoutElement {
         this._children.set([...children]);
     }
     onValueChanged(oldValue, newValue) { }
+    onAdded() { }
     detectFullPath() {
-        let sections = [];
-        let ids = [];
+        const sections = [];
+        const ids = [];
         //
         let parent = this;
         //
@@ -393,13 +406,6 @@ class AXPWidgetComponent extends AXPLayoutElement {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetComponent, decorators: [{
             type: Injectable
         }] });
-class AXPContainerWidgetComponent extends AXPWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPContainerWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPContainerWidgetComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPContainerWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
 class AXPDataListWidgetComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
@@ -817,7 +823,9 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
     constructor() {
         super(...arguments);
         this.widgetRegistery = inject(AXPWidgetRegistryService);
+        this.grid = inject(AXBaseDataTable);
         this.mergedOptions = signal({});
+        this.loadingRow = signal(null);
         this.injector = inject(Injector);
         this.cdr = inject(ChangeDetectorRef);
     }
@@ -833,6 +841,14 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
     get renderCellTemplate() {
         return this.cellTemplate ?? this._contentCellTemplate;
     }
+    async handleExpandRow(row) {
+        this.loadingRow.set(row);
+        await this.grid.expandRow(row);
+        this.loadingRow.set(null);
+        // if (row.data?.__meta__?.expanded === undefined) {
+        //   this.width = `${parseInt(this.width as string) + 24}px`;
+        // }
+    }
     get renderHeaderTemplate() {
         return this.headerTemplate ?? this._contentHeaderTemplate;
     }
@@ -876,17 +892,34 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
         return { rawValue: get(data, this.node.path) };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetColumnRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPWidgetColumnRendererComponent, isStandalone: false, selector: "axp-widget-column-renderer", inputs: { caption: "caption", node: "node", footerTemplate: "footerTemplate", cellTemplate: "cellTemplate", headerTemplate: "headerTemplate" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPWidgetColumnRendererComponent, isStandalone: false, selector: "axp-widget-column-renderer", inputs: { caption: "caption", node: "node", footerTemplate: "footerTemplate", expandHandler: "expandHandler", 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) {
-      <ng-container
-        *ngComponentOutlet="component; injector: widgetInjector; inputs: getInputs(row.data)"
-      ></ng-container>
-      }
+      <div class="ax-flex ax-gap-2 ax-items-center">
+        @if (expandHandler) {
+        <div
+          (click)="handleExpandRow(row)"
+          class="ax-expand-handler"
+          id="ax-expand-handler-container"
+          [style.padding-inline-start.rem]="row.data?.__meta__?.level * 1.5"
+        >
+          @if (loadingRow() === row) {
+          <i class="fas fa-spinner-third ax-animate-twSpin ax-animate-infinite"></i>
+          } @else { @if (row.data?.__meta__?.expanded) {
+          <i class="fas fa-chevron-down"></i>
+          } @else {
+          <i class="fas fa-chevron-right"></i>
+          } }
+        </div>
+        } @if(component && widgetInjector && row?.data) {
+        <ng-container
+          *ngComponentOutlet="component; injector: widgetInjector; inputs: getInputs(row.data)"
+        ></ng-container>
+        }
+      </div>
     </ng-template>
     <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 }); }
@@ -898,11 +931,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                     template: `
     <ng-template #header>{{ caption }}</ng-template>
     <ng-template #cell let-row>
-      @if(component && widgetInjector && row?.data) {
-      <ng-container
-        *ngComponentOutlet="component; injector: widgetInjector; inputs: getInputs(row.data)"
-      ></ng-container>
-      }
+      <div class="ax-flex ax-gap-2 ax-items-center">
+        @if (expandHandler) {
+        <div
+          (click)="handleExpandRow(row)"
+          class="ax-expand-handler"
+          id="ax-expand-handler-container"
+          [style.padding-inline-start.rem]="row.data?.__meta__?.level * 1.5"
+        >
+          @if (loadingRow() === row) {
+          <i class="fas fa-spinner-third ax-animate-twSpin ax-animate-infinite"></i>
+          } @else { @if (row.data?.__meta__?.expanded) {
+          <i class="fas fa-chevron-down"></i>
+          } @else {
+          <i class="fas fa-chevron-right"></i>
+          } }
+        </div>
+        } @if(component && widgetInjector && row?.data) {
+        <ng-container
+          *ngComponentOutlet="component; injector: widgetInjector; inputs: getInputs(row.data)"
+        ></ng-container>
+        }
+      </div>
     </ng-template>
     <ng-template #footer></ng-template>
   `,
@@ -912,7 +962,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     inputs: ['caption'],
-                    standalone: false
+                    standalone: false,
                 }]
         }], propDecorators: { node: [{
                 type: Input,
@@ -922,6 +972,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             }], _contentFooterTemplate: [{
                 type: ViewChild,
                 args: ['footer']
+            }], expandHandler: [{
+                type: Input
             }], cellTemplate: [{
                 type: Input
             }], _contentCellTemplate: [{
@@ -940,6 +992,8 @@ class AXPWidgetRendererDirective {
         this.index = input();
         this.mode = input.required();
         this.node = input.required();
+        this._options = signal({ needLabel: true });
+        this.options = this._options.asReadonly();
         this.mergedOptions = signal({});
         this.injector = inject(Injector);
         this.builderService = inject(AXPLayoutBuilderService);
@@ -996,6 +1050,8 @@ class AXPWidgetRendererDirective {
         //
         const widget = this.widgetRegistery.resolve(this.node().type);
         //
+        this._options.update((val) => ({ ...val, ...widget?.options }));
+        //
         const props = [...(widget?.properties ?? []), ...(widget?.components[this.mode()]?.properties ?? [])]
             ?.filter((c) => c.schema.defaultValue != null)
             .map((c) => ({ [c.name]: c.schema.defaultValue }))
@@ -1225,12 +1281,13 @@ class AXPWidgetRendererDirective {
             {
                 provide: AXUnsubscriber,
             },
-        ], usesOnChanges: true, ngImport: i0 }); }
+        ], exportAs: ["widgetRenderer"], usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetRendererDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axp-widget-renderer]',
+                    exportAs: 'widgetRenderer', // Add this line
                     providers: [
                         {
                             provide: AXUnsubscriber,
@@ -1329,5 +1386,5 @@ const AXP_WIDGETS_GROUPS = [
  * Generated bundle index. Do not edit.
  */
 
-export { AXPColumnWidgetComponent, AXPContainerWidgetComponent, AXPDataListWidgetComponent, AXPLayoutBuilderModule, AXPLayoutBuilderService, AXPLayoutElement, AXPWidgetColumnRendererComponent, AXPWidgetComponent, AXPWidgetContainerComponent, AXPWidgetDataSourceProviderService, AXPWidgetRegistryService, AXPWidgetRendererComponent, AXPWidgetRendererDirective, AXPWidgetsCatalog, AXP_WIDGETS_ACTION_GROUP, AXP_WIDGETS_ADVANCE_GROUP, AXP_WIDGETS_EDITOR_GROUP, AXP_WIDGETS_GROUPS, AXP_WIDGETS_LAYOUT_GROUP, AXP_WIDGET_COLUMN_TOKEN, AXP_WIDGET_DATASOURCE_PROVIDER, AXP_WIDGET_TOKEN, cloneProperty, createBooleanProperty, createSelectProperty, createStringProperty };
+export { AXPColumnWidgetComponent, AXPDataListWidgetComponent, AXPLayoutBuilderModule, AXPLayoutBuilderService, AXPLayoutElement, AXPWidgetColumnRendererComponent, AXPWidgetComponent, AXPWidgetContainerComponent, AXPWidgetDataSourceProviderService, AXPWidgetRegistryService, AXPWidgetRendererComponent, AXPWidgetRendererDirective, AXPWidgetsCatalog, AXP_WIDGETS_ACTION_GROUP, AXP_WIDGETS_ADVANCE_GROUP, AXP_WIDGETS_EDITOR_GROUP, AXP_WIDGETS_GROUPS, AXP_WIDGETS_LAYOUT_GROUP, AXP_WIDGET_COLUMN_TOKEN, AXP_WIDGET_DATASOURCE_PROVIDER, AXP_WIDGET_TOKEN, cloneProperty, createBooleanProperty, createSelectProperty, createStringProperty };
 //# sourceMappingURL=acorex-platform-layout-builder.mjs.map