@smartbit4all/ng-client 1.1.34 → 1.1.36

package/fesm2020/smartbit4all-ng-client.mjs

@@ -25,10 +25,11 @@ import { catchError as catchError$1, switchMap } from 'rxjs/operators';
 import * as i4$4 from '@angular/material/snack-bar';
 import { MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
 import { Validators } from '@angular/forms';
-import * as i5 from '@smartbit4all/form';
+import * as i1$2 from '@smartbit4all/form';
 import { SmartFormWidgetType, SmartValidatorName, SmartFormWidgetDirection, SmartformModule } from '@smartbit4all/form';
+import * as i2$2 from '@smartbit4all/grid';
+import { SmartLayoutDef, GridUiActionType, SmartGridModule, SmartGridComponent } from '@smartbit4all/grid';
 import { __decorate, __param } from 'tslib';
-import { SmartGridComponent } from '@smartbit4all/grid';
 import { SmarttreeGenericService } from '@smartbit4all/tree';
 
 /**
@@ -3910,7 +3911,7 @@ class UiActionInputDialogComponent {
     }
 }
 UiActionInputDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UiActionInputDialogComponent, deps: [{ token: UiActionInputDialogService }, { token: UiActionDescriptorService }], target: i0.ɵɵFactoryTarget.Component });
-UiActionInputDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UiActionInputDialogComponent, selector: "smart-ui-action-input-dialog", viewQueries: [{ propertyName: "folderFormChild", first: true, predicate: ["form"], descendants: true }], ngImport: i0, template: "<div class=\"folderNameDialogContainer\">\n\t<div class=\"headerContainer\">\n\t\t<h3 class=\"color-accent-700\">\n\t\t\t{{ getTitle() }}\n\t\t</h3>\n\t\t<button mat-icon-button title=\"close\" (click)=\"cancel()\">\n\t\t\t<smart-icon [color]=\"'primary'\" [icon]=\"'X'\"></smart-icon>\n\t\t</button>\n\t</div>\n\t<p>\n\t\t{{ getText() }}\n\t</p>\n\t<smartform #form [smartForm]=\"folderForm\"></smartform>\n\t<div class=\"folderNameDialogButtonsContainer\">\n\t\t<button mat-button color=\"accent\" [color]=\"getCancelButtonColor()\" (click)=\"cancel()\">\n\t\t\t{{ getCancelButtonLabel() }}\n\t\t</button>\n\t\t<button mat-raised-button [color]=\"getActionButtonColor()\" (click)=\"save()\">\n\t\t\t{{ getActionButtonLabel() }}\n\t\t</button>\n\t</div>\n</div>\n", styles: [".folderNameDialogContainer{width:25rem;display:flex;flex-direction:column;gap:1rem}.headerContainer{display:flex;flex-direction:row;justify-content:space-between}.headerContainer h3{margin:0}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}\n"], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$2.SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { type: i5.SmartformComponent, selector: "smartform", inputs: ["smartForm"] }] });
+UiActionInputDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UiActionInputDialogComponent, selector: "smart-ui-action-input-dialog", viewQueries: [{ propertyName: "folderFormChild", first: true, predicate: ["form"], descendants: true }], ngImport: i0, template: "<div class=\"folderNameDialogContainer\">\n\t<div class=\"headerContainer\">\n\t\t<h3 class=\"color-accent-700\">\n\t\t\t{{ getTitle() }}\n\t\t</h3>\n\t\t<button mat-icon-button title=\"close\" (click)=\"cancel()\">\n\t\t\t<smart-icon [color]=\"'primary'\" [icon]=\"'X'\"></smart-icon>\n\t\t</button>\n\t</div>\n\t<p>\n\t\t{{ getText() }}\n\t</p>\n\t<smartform #form [smartForm]=\"folderForm\"></smartform>\n\t<div class=\"folderNameDialogButtonsContainer\">\n\t\t<button mat-button color=\"accent\" [color]=\"getCancelButtonColor()\" (click)=\"cancel()\">\n\t\t\t{{ getCancelButtonLabel() }}\n\t\t</button>\n\t\t<button mat-raised-button [color]=\"getActionButtonColor()\" (click)=\"save()\">\n\t\t\t{{ getActionButtonLabel() }}\n\t\t</button>\n\t</div>\n</div>\n", styles: [".folderNameDialogContainer{width:25rem;display:flex;flex-direction:column;gap:1rem}.headerContainer{display:flex;flex-direction:row;justify-content:space-between}.headerContainer h3{margin:0}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}\n"], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$2.SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { type: i1$2.SmartformComponent, selector: "smartform", inputs: ["smartForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UiActionInputDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'smart-ui-action-input-dialog', template: "<div class=\"folderNameDialogContainer\">\n\t<div class=\"headerContainer\">\n\t\t<h3 class=\"color-accent-700\">\n\t\t\t{{ getTitle() }}\n\t\t</h3>\n\t\t<button mat-icon-button title=\"close\" (click)=\"cancel()\">\n\t\t\t<smart-icon [color]=\"'primary'\" [icon]=\"'X'\"></smart-icon>\n\t\t</button>\n\t</div>\n\t<p>\n\t\t{{ getText() }}\n\t</p>\n\t<smartform #form [smartForm]=\"folderForm\"></smartform>\n\t<div class=\"folderNameDialogButtonsContainer\">\n\t\t<button mat-button color=\"accent\" [color]=\"getCancelButtonColor()\" (click)=\"cancel()\">\n\t\t\t{{ getCancelButtonLabel() }}\n\t\t</button>\n\t\t<button mat-raised-button [color]=\"getActionButtonColor()\" (click)=\"save()\">\n\t\t\t{{ getActionButtonLabel() }}\n\t\t</button>\n\t</div>\n</div>\n", styles: [".folderNameDialogContainer{width:25rem;display:flex;flex-direction:column;gap:1rem}.headerContainer{display:flex;flex-direction:row;justify-content:space-between}.headerContainer h3{margin:0}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}\n"] }]
@@ -4018,7 +4019,7 @@ class UiActionFileUploadDialogComponent {
     }
 }
 UiActionFileUploadDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UiActionFileUploadDialogComponent, deps: [{ token: UiActionFileUploadDialogService }, { token: UiActionDescriptorService }], target: i0.ɵɵFactoryTarget.Component });
-UiActionFileUploadDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UiActionFileUploadDialogComponent, selector: "lib-ui-action-file-upload-dialog", ngImport: i0, template: "<div class=\"folderNameDialogContainer\">\n  <div class=\"headerContainer\">\n    <h3 class=\"color-accent-700\">\n      {{ getTitle() }}\n    </h3>\n    <button mat-icon-button title=\"close\" (click)=\"cancel()\">\n      <smart-icon [color]=\"'primary'\" [icon]=\"'X'\"></smart-icon>\n    </button>\n  </div>\n  <p>\n    {{ getText() }}\n  </p>\n  <smartfileuploader\n    [i18n]=\"i18n\"\n    [fileFormats]=\"fileFormats\"\n    [maxSizeMb]=\"maxSizeMb\"\n    [uploadCallback]=\"upload.bind(this)\"\n    [isMultiple]=\"isMultiple\"\n  ></smartfileuploader>\n  <div class=\"folderNameDialogButtonsContainer\">\n    <button mat-button color=\"accent\" [color]=\"getCancelButtonColor()\" (click)=\"cancel()\">\n      {{ getCancelButtonLabel() }}\n    </button>\n    <!-- <button mat-raised-button [color]=\"getActionButtonColor()\" (click)=\"upload()\">\n      {{ getActionButtonLabel() }}\n    </button> -->\n  </div>\n</div>\n", styles: [".folderNameDialogContainer{width:25rem;display:flex;flex-direction:column;gap:1rem}.headerContainer{display:flex;flex-direction:row;justify-content:space-between}.headerContainer h3{margin:0}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}\n"], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$2.SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { type: i5.SmartfileuploaderComponent, selector: "smartfileuploader", inputs: ["uploadCallback", "fileFormats", "maxSizeMb", "i18n", "useIconButton", "isMultiple"] }] });
+UiActionFileUploadDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UiActionFileUploadDialogComponent, selector: "lib-ui-action-file-upload-dialog", ngImport: i0, template: "<div class=\"folderNameDialogContainer\">\n  <div class=\"headerContainer\">\n    <h3 class=\"color-accent-700\">\n      {{ getTitle() }}\n    </h3>\n    <button mat-icon-button title=\"close\" (click)=\"cancel()\">\n      <smart-icon [color]=\"'primary'\" [icon]=\"'X'\"></smart-icon>\n    </button>\n  </div>\n  <p>\n    {{ getText() }}\n  </p>\n  <smartfileuploader\n    [i18n]=\"i18n\"\n    [fileFormats]=\"fileFormats\"\n    [maxSizeMb]=\"maxSizeMb\"\n    [uploadCallback]=\"upload.bind(this)\"\n    [isMultiple]=\"isMultiple\"\n  ></smartfileuploader>\n  <div class=\"folderNameDialogButtonsContainer\">\n    <button mat-button color=\"accent\" [color]=\"getCancelButtonColor()\" (click)=\"cancel()\">\n      {{ getCancelButtonLabel() }}\n    </button>\n    <!-- <button mat-raised-button [color]=\"getActionButtonColor()\" (click)=\"upload()\">\n      {{ getActionButtonLabel() }}\n    </button> -->\n  </div>\n</div>\n", styles: [".folderNameDialogContainer{width:25rem;display:flex;flex-direction:column;gap:1rem}.headerContainer{display:flex;flex-direction:row;justify-content:space-between}.headerContainer h3{margin:0}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}\n"], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$2.SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { type: i1$2.SmartfileuploaderComponent, selector: "smartfileuploader", inputs: ["uploadCallback", "fileFormats", "maxSizeMb", "i18n", "useIconButton", "isMultiple"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UiActionFileUploadDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-ui-action-file-upload-dialog', template: "<div class=\"folderNameDialogContainer\">\n  <div class=\"headerContainer\">\n    <h3 class=\"color-accent-700\">\n      {{ getTitle() }}\n    </h3>\n    <button mat-icon-button title=\"close\" (click)=\"cancel()\">\n      <smart-icon [color]=\"'primary'\" [icon]=\"'X'\"></smart-icon>\n    </button>\n  </div>\n  <p>\n    {{ getText() }}\n  </p>\n  <smartfileuploader\n    [i18n]=\"i18n\"\n    [fileFormats]=\"fileFormats\"\n    [maxSizeMb]=\"maxSizeMb\"\n    [uploadCallback]=\"upload.bind(this)\"\n    [isMultiple]=\"isMultiple\"\n  ></smartfileuploader>\n  <div class=\"folderNameDialogButtonsContainer\">\n    <button mat-button color=\"accent\" [color]=\"getCancelButtonColor()\" (click)=\"cancel()\">\n      {{ getCancelButtonLabel() }}\n    </button>\n    <!-- <button mat-raised-button [color]=\"getActionButtonColor()\" (click)=\"upload()\">\n      {{ getActionButtonLabel() }}\n    </button> -->\n  </div>\n</div>\n", styles: [".folderNameDialogContainer{width:25rem;display:flex;flex-direction:column;gap:1rem}.headerContainer{display:flex;flex-direction:row;justify-content:space-between}.headerContainer h3{margin:0}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}\n"] }]
@@ -4457,7 +4458,7 @@ class SmartFileUploaderComponent {
     }
 }
 SmartFileUploaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SmartFileUploaderComponent, deps: [{ token: UiActionService }, { token: UiActionDescriptorService }], target: i0.ɵɵFactoryTarget.Component });
-SmartFileUploaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SmartFileUploaderComponent, selector: "smart-file-uploader4sc", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<smartfileuploader\n  *ngIf=\"i18n\"\n  [i18n]=\"i18n\"\n  [fileFormats]=\"config?.fileFormats\"\n  [isMultiple]=\"config?.isMultiple\"\n  [maxSizeMb]=\"config?.maxSizeMb\"\n  [uploadCallback]=\"executeUpload.bind(this)\"\n></smartfileuploader>\n", styles: [""], components: [{ type: i5.SmartfileuploaderComponent, selector: "smartfileuploader", inputs: ["uploadCallback", "fileFormats", "maxSizeMb", "i18n", "useIconButton", "isMultiple"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SmartFileUploaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SmartFileUploaderComponent, selector: "smart-file-uploader4sc", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<smartfileuploader\n  *ngIf=\"i18n\"\n  [i18n]=\"i18n\"\n  [fileFormats]=\"config?.fileFormats\"\n  [isMultiple]=\"config?.isMultiple\"\n  [maxSizeMb]=\"config?.maxSizeMb\"\n  [uploadCallback]=\"executeUpload.bind(this)\"\n></smartfileuploader>\n", styles: [""], components: [{ type: i1$2.SmartfileuploaderComponent, selector: "smartfileuploader", inputs: ["uploadCallback", "fileFormats", "maxSizeMb", "i18n", "useIconButton", "isMultiple"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SmartFileUploaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'smart-file-uploader4sc', template: "<smartfileuploader\n  *ngIf=\"i18n\"\n  [i18n]=\"i18n\"\n  [fileFormats]=\"config?.fileFormats\"\n  [isMultiple]=\"config?.isMultiple\"\n  [maxSizeMb]=\"config?.maxSizeMb\"\n  [uploadCallback]=\"executeUpload.bind(this)\"\n></smartfileuploader>\n", styles: [""] }]
@@ -4465,33 +4466,129 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
+const LayoutDirection = {
+    Horizontal: 'horizontal',
+    Vertical: 'vertical',
+};
+const ComponentType = {
+    Container: 'container',
+    Form: 'form',
+    Widget: 'widget',
+};
+const ComponentWidgetType = {
+    Grid: 'grid',
+};
+
+class SmartComponentLayoutComponent {
+    constructor(layoutService) {
+        this.layoutService = layoutService;
+    }
+    ngOnChanges(changes) {
+        this.smartComponentLayout = changes['smartComponentLayout'].currentValue;
+        if (this.smartComponentLayout?.type === ComponentType.Form) {
+            this.constructForm();
+        }
+        else if (this.smartComponentLayout?.type === ComponentType.Widget) {
+            if (this.smartComponentLayout.widget?.type === ComponentWidgetType.Grid) {
+                this.constructGrid();
+            }
+        }
+    }
+    type() {
+        return ComponentType;
+    }
+    constructForm() {
+        const widgets = this.layoutService.render({
+            layoutDefinitions: this.smartComponentLayout?.form,
+        });
+        this.smartForm = {
+            direction: SmartFormWidgetDirection.COL,
+            model: this.smartComponentLayout?.parentComponent.model,
+            constraints: this.smartComponentLayout?.parentComponent.model?.constraints,
+            widgets,
+        };
+        this.smartComponentLayout?.parentComponent.addForm(
+        // unique identifier for the form
+        `form_${this.makeid(5)}`, this.smartForm, this.formChild);
+    }
+    makeid(length) {
+        let result = '';
+        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        const charactersLength = characters.length;
+        let counter = 0;
+        while (counter < length) {
+            result += characters.charAt(Math.floor(Math.random() * charactersLength));
+            counter += 1;
+        }
+        return result;
+    }
+    constructGrid() {
+        this.smartGrid = {
+            gridIdentifier: this.smartComponentLayout?.widget?.gridIdentifier,
+            gridModel: {
+                page: {},
+            },
+            layoutDef: SmartLayoutDef.TABLE,
+        };
+        this.smartGrid = this.smartComponentLayout?.parentComponent.addGrid(this.smartGrid, {
+            rowUiActionType: GridUiActionType.POPUP_MENU,
+        }, false, this.gridChild);
+    }
+}
+SmartComponentLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SmartComponentLayoutComponent, deps: [{ token: i1$2.SmartformLayoutDefinitionService }], target: i0.ɵɵFactoryTarget.Component });
+SmartComponentLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: { smartComponentLayout: "smartComponentLayout" }, viewQueries: [{ propertyName: "formChild", first: true, predicate: ["form"], descendants: true }, { propertyName: "gridChild", first: true, predicate: ["grid"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"smartComponentLayout?.type === type().Container\"\n  [ngClass]=\"smartComponentLayout?.direction ?? 'vertical'\"\n>\n  <smart-component-layout\n    [smartComponentLayout]=\"layout\"\n    *ngFor=\"let layout of smartComponentLayout?.components\"\n  ></smart-component-layout>\n</div>\n<smartform #form [smartForm]=\"smartForm\"></smartform>\n<smart-grid\n  #grid\n  [smartGrid]=\"smartGrid\"\n  [uuid]=\"smartComponentLayout?.parentComponent?.uuid!\"\n></smart-grid>\n", styles: [".horizontal{display:flex;flex-direction:row}.vertical{display:flex;flex-direction:column}\n"], components: [{ type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout"] }, { type: i1$2.SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { type: i2$2.SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "dev"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SmartComponentLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-component-layout', template: "<div\n  *ngIf=\"smartComponentLayout?.type === type().Container\"\n  [ngClass]=\"smartComponentLayout?.direction ?? 'vertical'\"\n>\n  <smart-component-layout\n    [smartComponentLayout]=\"layout\"\n    *ngFor=\"let layout of smartComponentLayout?.components\"\n  ></smart-component-layout>\n</div>\n<smartform #form [smartForm]=\"smartForm\"></smartform>\n<smart-grid\n  #grid\n  [smartGrid]=\"smartGrid\"\n  [uuid]=\"smartComponentLayout?.parentComponent?.uuid!\"\n></smart-grid>\n", styles: [".horizontal{display:flex;flex-direction:row}.vertical{display:flex;flex-direction:column}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.SmartformLayoutDefinitionService }]; }, propDecorators: { smartComponentLayout: [{
+                type: Input
+            }], formChild: [{
+                type: ViewChild,
+                args: ['form']
+            }], gridChild: [{
+                type: ViewChild,
+                args: ['grid']
+            }] } });
+
 class SmartNgClientModule {
 }
 SmartNgClientModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SmartNgClientModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SmartNgClientModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SmartNgClientModule, declarations: [SmartFileUploaderComponent], imports: [BrowserModule,
+SmartNgClientModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SmartNgClientModule, declarations: [SmartFileUploaderComponent, SmartComponentLayoutComponent], imports: [BrowserModule,
         MatCommonModule,
         SmartSessionModule,
         SmartViewContextModule,
-        SmartformModule], exports: [SmartSessionModule, SmartViewContextModule, SmartFileUploaderComponent] });
+        SmartformModule,
+        SmartGridModule], exports: [SmartSessionModule,
+        SmartViewContextModule,
+        SmartFileUploaderComponent,
+        SmartComponentLayoutComponent] });
 SmartNgClientModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SmartNgClientModule, providers: [SmartNgClientService], imports: [[
             BrowserModule,
             MatCommonModule,
             SmartSessionModule,
             SmartViewContextModule,
             SmartformModule,
-        ], SmartSessionModule, SmartViewContextModule] });
+            SmartGridModule,
+        ], SmartSessionModule,
+        SmartViewContextModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SmartNgClientModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [SmartFileUploaderComponent],
+                    declarations: [SmartFileUploaderComponent, SmartComponentLayoutComponent],
                     imports: [
                         BrowserModule,
                         MatCommonModule,
                         SmartSessionModule,
                         SmartViewContextModule,
                         SmartformModule,
+                        SmartGridModule,
+                    ],
+                    exports: [
+                        SmartSessionModule,
+                        SmartViewContextModule,
+                        SmartFileUploaderComponent,
+                        SmartComponentLayoutComponent,
                     ],
-                    exports: [SmartSessionModule, SmartViewContextModule, SmartFileUploaderComponent],
                     providers: [SmartNgClientService],
                 }]
         }] });
@@ -4658,6 +4755,14 @@ let SmartComponentApiClient = class SmartComponentApiClient {
         throw new Error('handleSpecificDemandsAsynchronously method not implemented.');
     }
     //#endregion
+    addSmartLayout(layout) {
+        this.smartComponentLayoutDefinition = this.setParentComponent(layout);
+    }
+    setParentComponent(layout) {
+        layout.parentComponent = this;
+        layout.components = layout.components?.map((l) => this.setParentComponent(l));
+        return layout;
+    }
     addGrid(smartGrid, options, useAsDefaultGrid, componentReference) {
         smartGrid.options = options;
         smartGrid.uiActionService = this.uiActionService;
@@ -4904,5 +5009,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { APIS, ApiModule, ApiQueueService, BASE_PATH, COLLECTION_FORMATS, CloseResult, Configuration, DataChangeKind, IS_ASYNC_PARAM_NAME, MessageOptionType, MessageType, SessionAPIS, SessionErrorBehaviour, SessionService, SmartAuthService, SmartComponent, SmartComponentApiClient, SmartDevToolDatePipe, SmartDevToolFloatingButtonComponent, SmartDevToolService, SmartFileUploaderComponent, SmartLinkChannelVariableInPath, SmartLinkUuidVariableInPath, SmartNgClientModule, SmartNgClientService, SmartService, SmartSessionModule, SmartSessionService, SmartSessionTimerComponent, SmartSessionTimerService, SmartViewContextErrorDialogButtonLabel, SmartViewContextErrorDialogMessage, SmartViewContextErrorDialogTitle, SmartViewContextModule, SmartViewContextService, SmartViewRedirect, UiActionButtonIconPos, UiActionButtonType, UiActionConfirmDialogComponent, UiActionConfirmDialogService, UiActionDescriptorService, UiActionDialogType, UiActionFeedbackType, UiActionInputDialogComponent, UiActionInputDialogService, UiActionInputType, UiActionService, UiActionToolbarComponent, ViewEventHandler, ViewService, ViewState, ViewType, WidgetMap };
+export { APIS, ApiModule, ApiQueueService, BASE_PATH, COLLECTION_FORMATS, CloseResult, ComponentType, ComponentWidgetType, Configuration, DataChangeKind, IS_ASYNC_PARAM_NAME, LayoutDirection, MessageOptionType, MessageType, SessionAPIS, SessionErrorBehaviour, SessionService, SmartAuthService, SmartComponent, SmartComponentApiClient, SmartComponentLayoutComponent, SmartDevToolDatePipe, SmartDevToolFloatingButtonComponent, SmartDevToolService, SmartFileUploaderComponent, SmartLinkChannelVariableInPath, SmartLinkUuidVariableInPath, SmartNgClientModule, SmartNgClientService, SmartService, SmartSessionModule, SmartSessionService, SmartSessionTimerComponent, SmartSessionTimerService, SmartViewContextErrorDialogButtonLabel, SmartViewContextErrorDialogMessage, SmartViewContextErrorDialogTitle, SmartViewContextModule, SmartViewContextService, SmartViewRedirect, UiActionButtonIconPos, UiActionButtonType, UiActionConfirmDialogComponent, UiActionConfirmDialogService, UiActionDescriptorService, UiActionDialogType, UiActionFeedbackType, UiActionInputDialogComponent, UiActionInputDialogService, UiActionInputType, UiActionService, UiActionToolbarComponent, ViewEventHandler, ViewService, ViewState, ViewType, WidgetMap };
 //# sourceMappingURL=smartbit4all-ng-client.mjs.map