@acorex/platform 20.2.2 → 20.2.4-next.0

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

@@ -1,16 +1,17 @@
 import * as i1$1 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
+import * as i2 from '@acorex/core/translation';
+import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
 import { PortalModule } from '@angular/cdk/portal';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { signal, computed, Injectable, InjectionToken, inject, Injector, ChangeDetectorRef, ViewChild, Input, ChangeDetectionStrategy, Component, EventEmitter, effect, Output, input, output, ViewContainerRef, Directive, Optional, Inject, NgModule, ElementRef } from '@angular/core';
 import { AXDataTableColumnComponent, AXBaseDataTable } from '@acorex/components/data-table';
+import { getSmart, setSmart, AXPExpressionEvaluatorService, AXPDataSourceDefinitionProviderService, extractValue } from '@acorex/platform/core';
 import { set, merge, cloneDeep, isNil, isEqual, get, sum, isEmpty, isString, isUndefined, isObjectLike } from 'lodash-es';
 import { Subject, filter, BehaviorSubject } from 'rxjs';
-import { getSmart, setSmart, AXPExpressionEvaluatorService, AXPDataSourceDefinitionProviderService, extractValue } from '@acorex/platform/core';
 import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
-import { AXTranslationService } from '@acorex/core/translation';
 import { AXUnsubscriber } from '@acorex/core/utils';
 import { convertArrayToDataSource, AXDataSource } from '@acorex/cdk/common';
 
@@ -256,6 +257,9 @@ const AXPWidgetsCatalog = {
     notification: 'notification',
     taskList: 'task-list',
     comment: 'comment',
+    list: 'list',
+    listToolbar: 'list-toolbar',
+    entityList: 'entity-list',
 };
 
 function cloneProperty(property, values) {
@@ -405,14 +409,14 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
                 },
             ],
         });
-        this.width = this.customWidth ? this.customWidth : this.mergedOptions().width ?? '200px';
+        this.width = this.customWidth ? this.customWidth : (this.mergedOptions().width ?? '200px');
         this.allowResizing = this.mergedOptions().allowResizing || true;
         this.cdr.detectChanges();
     }
     getInputs(data) {
         return {
             rawValue: getSmart(data, this.node.path),
-            rowData: data
+            rowData: data,
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPWidgetColumnRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -420,63 +424,69 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
             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 #header>{{ caption | translate | async }}</ng-template>
     <ng-template #cell let-row>
       <div class="ax-flex ax-gap-2 ax-items-center">
         @if (expandHandler) {
-        <div
-          (click)="handleExpandRow(row)"
-          class="ax-expand-handler"
-          [class.ax-invisible]="row.data.hasChild === false"
-          id="ax-expand-handler-container"
-          [style.padding-inline-start.rem]="row.data?.__meta__?.level * 2"
-        >
-          @if (loadingRow() === row) {
-          <i class="fas fa-spinner-third ax-animate-twSpin ax-animate-infinite"></i>
-          } @else { @if (row.data?.__meta__?.expanded) {
-          <i [class]="customCollapseIcon || 'far fa-minus-square ax-text-md ax-opacity-75'"></i>
-          } @else {
-          <i [class]="customExpandIcon || 'far fa-plus-square ax-text-md  ax-opacity-75'"></i>
-          } }
-        </div>
-        } @if(component && widgetInjector && row?.data) {
-        <ng-container
-          *ngComponentOutlet="component; injector: widgetInjector; inputs: getInputs(row.data)"
-        ></ng-container>
+          <div
+            (click)="handleExpandRow(row)"
+            class="ax-expand-handler"
+            [class.ax-invisible]="row.data.hasChild === false"
+            id="ax-expand-handler-container"
+            [style.padding-inline-start.rem]="row.data?.__meta__?.level * 2"
+          >
+            @if (loadingRow() === row) {
+              <i class="fas fa-spinner-third ax-animate-twSpin ax-animate-infinite"></i>
+            } @else {
+              @if (row.data?.__meta__?.expanded) {
+                <i [class]="customCollapseIcon || 'far fa-minus-square ax-text-md ax-opacity-75'"></i>
+              } @else {
+                <i [class]="customExpandIcon || 'far fa-plus-square ax-text-md  ax-opacity-75'"></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", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, 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.1.6", ngImport: i0, type: AXPWidgetColumnRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-widget-column-renderer',
                     template: `
-    <ng-template #header>{{ caption }}</ng-template>
+    <ng-template #header>{{ caption | translate | async }}</ng-template>
     <ng-template #cell let-row>
       <div class="ax-flex ax-gap-2 ax-items-center">
         @if (expandHandler) {
-        <div
-          (click)="handleExpandRow(row)"
-          class="ax-expand-handler"
-          [class.ax-invisible]="row.data.hasChild === false"
-          id="ax-expand-handler-container"
-          [style.padding-inline-start.rem]="row.data?.__meta__?.level * 2"
-        >
-          @if (loadingRow() === row) {
-          <i class="fas fa-spinner-third ax-animate-twSpin ax-animate-infinite"></i>
-          } @else { @if (row.data?.__meta__?.expanded) {
-          <i [class]="customCollapseIcon || 'far fa-minus-square ax-text-md ax-opacity-75'"></i>
-          } @else {
-          <i [class]="customExpandIcon || 'far fa-plus-square ax-text-md  ax-opacity-75'"></i>
-          } }
-        </div>
-        } @if(component && widgetInjector && row?.data) {
-        <ng-container
-          *ngComponentOutlet="component; injector: widgetInjector; inputs: getInputs(row.data)"
-        ></ng-container>
+          <div
+            (click)="handleExpandRow(row)"
+            class="ax-expand-handler"
+            [class.ax-invisible]="row.data.hasChild === false"
+            id="ax-expand-handler-container"
+            [style.padding-inline-start.rem]="row.data?.__meta__?.level * 2"
+          >
+            @if (loadingRow() === row) {
+              <i class="fas fa-spinner-third ax-animate-twSpin ax-animate-infinite"></i>
+            } @else {
+              @if (row.data?.__meta__?.expanded) {
+                <i [class]="customCollapseIcon || 'far fa-minus-square ax-text-md ax-opacity-75'"></i>
+              } @else {
+                <i [class]="customExpandIcon || 'far fa-plus-square ax-text-md  ax-opacity-75'"></i>
+              }
+            }
+          </div>
+        }
+        @if (component && widgetInjector && row?.data) {
+          <ng-container
+            *ngComponentOutlet="component; injector: widgetInjector; inputs: getInputs(row.data)"
+          ></ng-container>
         }
       </div>
     </ng-template>
@@ -786,8 +796,10 @@ class AXPWidgetRendererDirective {
             //
             const widget = this.widgetRegistery.resolve(this.node().type);
             //
-            const propertiesToProcess = [...(widget?.properties ?? []), ...(widget?.components[this.mode()]?.properties ?? [])]
-                ?.filter((c) => c.schema.defaultValue != null);
+            const propertiesToProcess = [
+                ...(widget?.properties ?? []),
+                ...(widget?.components[this.mode()]?.properties ?? []),
+            ]?.filter((c) => c.schema.defaultValue != null);
             // Process default values (evaluate expressions if needed)
             const props = {};
             for (const property of propertiesToProcess) {
@@ -1195,13 +1207,13 @@ class AXPLayoutBuilderModule {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutBuilderModule, deps: [{ token: 'AXPLayoutBuilderModuleFactory', optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutBuilderModule, declarations: [AXPWidgetContainerComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective], imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule], exports: [AXPWidgetContainerComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutBuilderModule, imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutBuilderModule, 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.1.6", ngImport: i0, type: AXPLayoutBuilderModule, imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule, AXTranslationModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutBuilderModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule],
+                    imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule, AXTranslationModule],
                     exports: [...COMPONENTS],
                     declarations: [...COMPONENTS],
                 }]