@smartbit4all/ng-client 3.4.3 → 3.4.4

package/fesm2020/smartbit4all-ng-client.mjs

@@ -8357,6 +8357,9 @@ class UiActionFileUploadDialogComponent {
             upload: this.descriptor.upload?.uploadButtonTitle,
         };
         // TODO set max size and file formats by UiAction.params
+        if (this.service.action.params) {
+            this.maxSizeMb = (this.service.action.params['maxFileSize'] ?? 25);
+        }
         if (this.descriptor[this.service.inputTypeName]) {
             this.dialogType = this.service.inputTypeName;
         }
@@ -10655,6 +10658,22 @@ class ExpandableSectionComponent {
             });
         }
     }
+    getTitle() {
+        if (this.data.headerData?.title) {
+            return this.data.headerData.title;
+        }
+        if (this.data.title) {
+            return this.data.title;
+        }
+        return '';
+    }
+    hasSubtitle() {
+        return !!this.data.headerData?.subtitle;
+    }
+    titleStyle() {
+        const flexGrowValue = this.hasSubtitle() ? 'unset' : 1;
+        return { 'flex-grow': flexGrowValue };
+    }
     ngOnInit() { }
     ngAfterViewInit() {
         if (this.data.headerComponent) {
@@ -10701,10 +10720,10 @@ class ExpandableSectionComponent {
     }
 }
 ExpandableSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ExpandableSectionComponent, deps: [{ token: ComponentFactoryService }], target: i0.ɵɵFactoryTarget.Component });
-ExpandableSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: { data: "data", index: "index" }, viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["renderComponent"], descendants: true, read: ViewContainerRef }, { propertyName: "vcRefheader", first: true, predicate: ["headerComponent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"section-container\" [ngClass]=\"data.cssClass ?? ''\">\r\n  <mat-expansion-panel\r\n    [expanded]=\"data.isExpanded\"\r\n    (opened)=\"onStateChange(true)\"\r\n    (closed)=\"onStateChange(false)\"\r\n    [disabled]=\"!!data.isDisabled\"\r\n  >\r\n    <mat-expansion-panel-header *ngIf=\"data.headerComponent\">\r\n      <ng-template #headerComponent></ng-template>\r\n    </mat-expansion-panel-header>\r\n    <mat-expansion-panel-header *ngIf=\"!data.headerComponent\">\r\n      <mat-panel-title> {{ data.title }} </mat-panel-title>\r\n      <div class=\"btn-container\" *ngIf=\"data.button\">\r\n        <button\r\n          *ngIf=\"data.button.type === type().BUTTON\"\r\n          class=\"btn\"\r\n          (click)=\"action(data.button, $event)\"\r\n          mat-stroked-button\r\n        >\r\n          <smart-icon\r\n            *ngIf=\"\r\n              data.button.icon &&\r\n              (!data.button.iconPosition || data.button.iconPosition === position().PRE)\r\n            \"\r\n            [icon]=\"data.button.icon\"\r\n          ></smart-icon>\r\n          {{ data.button.label }}\r\n          <smart-icon\r\n            *ngIf=\"data.button.icon && data.button.iconPosition === position().POST\"\r\n            [icon]=\"data.button.icon\"\r\n          ></smart-icon>\r\n        </button>\r\n        <button\r\n          *ngIf=\"data.button.type === type().MENU\"\r\n          mat-button\r\n          [matMenuTriggerFor]=\"menu\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          color=\"{{ data.button.color }}\"\r\n        >\r\n          <smart-icon\r\n            *ngIf=\"\r\n              data.button.icon &&\r\n              (!data.button.iconPosition || data.button.iconPosition === position().PRE)\r\n            \"\r\n            [icon]=\"data.button.icon\"\r\n          ></smart-icon\r\n          >{{ data.button.label }}\r\n          <smart-icon\r\n            *ngIf=\"data.button.icon && data.button.iconPosition === position().POST\"\r\n            [icon]=\"data.button.icon\"\r\n          ></smart-icon>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <button\r\n            *ngFor=\"let button of data.button.menuItemButtons\"\r\n            (click)=\"customButtonClicked($event, button, data.index)\"\r\n            mat-menu-item\r\n          >\r\n            <smart-icon\r\n              *ngIf=\"\r\n                button.icon && (!button.iconPosition || button.iconPosition === position().PRE)\r\n              \"\r\n              [icon]=\"button.icon\"\r\n            ></smart-icon\r\n            >{{ button.label }}\r\n            <smart-icon\r\n              *ngIf=\"button.icon && button.iconPosition === position().POST\"\r\n              [icon]=\"button.icon\"\r\n            ></smart-icon>\r\n          </button>\r\n        </mat-menu>\r\n      </div>\r\n    </mat-expansion-panel-header>\r\n    <ng-template #renderComponent></ng-template>\r\n  </mat-expansion-panel>\r\n</div>\r\n", styles: [".section-container{margin-bottom:50px}:host::ng-deep .mat-expansion-panel-header{background:var(--primary-lighter-color)}:host::ng-deep .mat-expansion-panel-header-title{color:var(--primary-color)}:host::ng-deep .btn-container{margin:1em 3em 1em 1em}:host::ng-deep .btn{border-radius:24px}\n"], components: [{ type: i2$6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i2$6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { 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: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ExpandableSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: { data: "data", index: "index" }, viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["renderComponent"], descendants: true, read: ViewContainerRef }, { propertyName: "vcRefheader", first: true, predicate: ["headerComponent"], descendants: true, read: ViewContainerRef }, { propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }], ngImport: i0, template: "<div class=\"section-container\" [ngClass]=\"data.cssClass ?? ''\">\r\n  <mat-expansion-panel\r\n    [expanded]=\"data.isExpanded\"\r\n    (opened)=\"onStateChange(true)\"\r\n    (closed)=\"onStateChange(false)\"\r\n    [disabled]=\"!!data.isDisabled\"\r\n  >\r\n    <mat-expansion-panel-header *ngIf=\"data.headerComponent\">\r\n      <ng-template #headerComponent></ng-template>\r\n    </mat-expansion-panel-header>\r\n\r\n    <mat-expansion-panel-header *ngIf=\"!data.headerComponent\">\r\n      <ui-action-toolbar\r\n        *ngIf=\"data.layoutIdentifier\"\r\n        [id]=\"data.layoutIdentifier + '-toolbar'\"\r\n      ></ui-action-toolbar>\r\n\r\n      <mat-panel-title [ngStyle]=\"titleStyle()\"> {{ getTitle() }} </mat-panel-title>\r\n      <mat-pane-description *ngIf=\"hasSubtitle()\">\r\n        {{ data.headerData?.subtitle }}\r\n      </mat-pane-description>\r\n\r\n      <smart-ui-action-toolbar\r\n        *ngIf=\"!!data.headerData?.toolbarId\"\r\n        #toolbar\r\n        [id]=\"data.headerData!.toolbarId!\"\r\n      ></smart-ui-action-toolbar>\r\n\r\n      <div class=\"btn-container\" *ngIf=\"data.button\">\r\n        <button\r\n          *ngIf=\"data.button.type === type().BUTTON\"\r\n          class=\"btn\"\r\n          (click)=\"action(data.button, $event)\"\r\n          mat-stroked-button\r\n        >\r\n          <smart-icon\r\n            *ngIf=\"\r\n              data.button.icon &&\r\n              (!data.button.iconPosition || data.button.iconPosition === position().PRE)\r\n            \"\r\n            [icon]=\"data.button.icon\"\r\n          ></smart-icon>\r\n          {{ data.button.label }}\r\n          <smart-icon\r\n            *ngIf=\"data.button.icon && data.button.iconPosition === position().POST\"\r\n            [icon]=\"data.button.icon\"\r\n          ></smart-icon>\r\n        </button>\r\n        <button\r\n          *ngIf=\"data.button.type === type().MENU\"\r\n          mat-button\r\n          [matMenuTriggerFor]=\"menu\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          color=\"{{ data.button.color }}\"\r\n        >\r\n          <smart-icon\r\n            *ngIf=\"\r\n              data.button.icon &&\r\n              (!data.button.iconPosition || data.button.iconPosition === position().PRE)\r\n            \"\r\n            [icon]=\"data.button.icon\"\r\n          ></smart-icon>\r\n          {{ data.button.label }}\r\n          <smart-icon\r\n            *ngIf=\"data.button.icon && data.button.iconPosition === position().POST\"\r\n            [icon]=\"data.button.icon\"\r\n          ></smart-icon>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <button\r\n            *ngFor=\"let button of data.button.menuItemButtons\"\r\n            (click)=\"customButtonClicked($event, button, data.index)\"\r\n            mat-menu-item\r\n          >\r\n            <smart-icon\r\n              *ngIf=\"\r\n                button.icon && (!button.iconPosition || button.iconPosition === position().PRE)\r\n              \"\r\n              [icon]=\"button.icon\"\r\n            ></smart-icon>\r\n            {{ button.label }}\r\n            <smart-icon\r\n              *ngIf=\"button.icon && button.iconPosition === position().POST\"\r\n              [icon]=\"button.icon\"\r\n            ></smart-icon>\r\n          </button>\r\n        </mat-menu>\r\n      </div>\r\n    </mat-expansion-panel-header>\r\n\r\n    <ng-template #renderComponent></ng-template>\r\n  </mat-expansion-panel>\r\n</div>\r\n", styles: [".section-container{margin-bottom:50px}:host::ng-deep .mat-expansion-panel-header{background:var(--primary-lighter-color)}:host::ng-deep .mat-expansion-panel-header-title{color:var(--primary-color)}:host::ng-deep .btn-container{margin:1em 3em 1em 1em}:host::ng-deep .btn{border-radius:24px}\n"], components: [{ type: i2$6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i2$6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { 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: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ExpandableSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-expandable-section', template: "<div class=\"section-container\" [ngClass]=\"data.cssClass ?? ''\">\r\n  <mat-expansion-panel\r\n    [expanded]=\"data.isExpanded\"\r\n    (opened)=\"onStateChange(true)\"\r\n    (closed)=\"onStateChange(false)\"\r\n    [disabled]=\"!!data.isDisabled\"\r\n  >\r\n    <mat-expansion-panel-header *ngIf=\"data.headerComponent\">\r\n      <ng-template #headerComponent></ng-template>\r\n    </mat-expansion-panel-header>\r\n    <mat-expansion-panel-header *ngIf=\"!data.headerComponent\">\r\n      <mat-panel-title> {{ data.title }} </mat-panel-title>\r\n      <div class=\"btn-container\" *ngIf=\"data.button\">\r\n        <button\r\n          *ngIf=\"data.button.type === type().BUTTON\"\r\n          class=\"btn\"\r\n          (click)=\"action(data.button, $event)\"\r\n          mat-stroked-button\r\n        >\r\n          <smart-icon\r\n            *ngIf=\"\r\n              data.button.icon &&\r\n              (!data.button.iconPosition || data.button.iconPosition === position().PRE)\r\n            \"\r\n            [icon]=\"data.button.icon\"\r\n          ></smart-icon>\r\n          {{ data.button.label }}\r\n          <smart-icon\r\n            *ngIf=\"data.button.icon && data.button.iconPosition === position().POST\"\r\n            [icon]=\"data.button.icon\"\r\n          ></smart-icon>\r\n        </button>\r\n        <button\r\n          *ngIf=\"data.button.type === type().MENU\"\r\n          mat-button\r\n          [matMenuTriggerFor]=\"menu\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          color=\"{{ data.button.color }}\"\r\n        >\r\n          <smart-icon\r\n            *ngIf=\"\r\n              data.button.icon &&\r\n              (!data.button.iconPosition || data.button.iconPosition === position().PRE)\r\n            \"\r\n            [icon]=\"data.button.icon\"\r\n          ></smart-icon\r\n          >{{ data.button.label }}\r\n          <smart-icon\r\n            *ngIf=\"data.button.icon && data.button.iconPosition === position().POST\"\r\n            [icon]=\"data.button.icon\"\r\n          ></smart-icon>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <button\r\n            *ngFor=\"let button of data.button.menuItemButtons\"\r\n            (click)=\"customButtonClicked($event, button, data.index)\"\r\n            mat-menu-item\r\n          >\r\n            <smart-icon\r\n              *ngIf=\"\r\n                button.icon && (!button.iconPosition || button.iconPosition === position().PRE)\r\n              \"\r\n              [icon]=\"button.icon\"\r\n            ></smart-icon\r\n            >{{ button.label }}\r\n            <smart-icon\r\n              *ngIf=\"button.icon && button.iconPosition === position().POST\"\r\n              [icon]=\"button.icon\"\r\n            ></smart-icon>\r\n          </button>\r\n        </mat-menu>\r\n      </div>\r\n    </mat-expansion-panel-header>\r\n    <ng-template #renderComponent></ng-template>\r\n  </mat-expansion-panel>\r\n</div>\r\n", styles: [".section-container{margin-bottom:50px}:host::ng-deep .mat-expansion-panel-header{background:var(--primary-lighter-color)}:host::ng-deep .mat-expansion-panel-header-title{color:var(--primary-color)}:host::ng-deep .btn-container{margin:1em 3em 1em 1em}:host::ng-deep .btn{border-radius:24px}\n"] }]
+            args: [{ selector: 'smart-expandable-section', template: "<div class=\"section-container\" [ngClass]=\"data.cssClass ?? ''\">\r\n  <mat-expansion-panel\r\n    [expanded]=\"data.isExpanded\"\r\n    (opened)=\"onStateChange(true)\"\r\n    (closed)=\"onStateChange(false)\"\r\n    [disabled]=\"!!data.isDisabled\"\r\n  >\r\n    <mat-expansion-panel-header *ngIf=\"data.headerComponent\">\r\n      <ng-template #headerComponent></ng-template>\r\n    </mat-expansion-panel-header>\r\n\r\n    <mat-expansion-panel-header *ngIf=\"!data.headerComponent\">\r\n      <ui-action-toolbar\r\n        *ngIf=\"data.layoutIdentifier\"\r\n        [id]=\"data.layoutIdentifier + '-toolbar'\"\r\n      ></ui-action-toolbar>\r\n\r\n      <mat-panel-title [ngStyle]=\"titleStyle()\"> {{ getTitle() }} </mat-panel-title>\r\n      <mat-pane-description *ngIf=\"hasSubtitle()\">\r\n        {{ data.headerData?.subtitle }}\r\n      </mat-pane-description>\r\n\r\n      <smart-ui-action-toolbar\r\n        *ngIf=\"!!data.headerData?.toolbarId\"\r\n        #toolbar\r\n        [id]=\"data.headerData!.toolbarId!\"\r\n      ></smart-ui-action-toolbar>\r\n\r\n      <div class=\"btn-container\" *ngIf=\"data.button\">\r\n        <button\r\n          *ngIf=\"data.button.type === type().BUTTON\"\r\n          class=\"btn\"\r\n          (click)=\"action(data.button, $event)\"\r\n          mat-stroked-button\r\n        >\r\n          <smart-icon\r\n            *ngIf=\"\r\n              data.button.icon &&\r\n              (!data.button.iconPosition || data.button.iconPosition === position().PRE)\r\n            \"\r\n            [icon]=\"data.button.icon\"\r\n          ></smart-icon>\r\n          {{ data.button.label }}\r\n          <smart-icon\r\n            *ngIf=\"data.button.icon && data.button.iconPosition === position().POST\"\r\n            [icon]=\"data.button.icon\"\r\n          ></smart-icon>\r\n        </button>\r\n        <button\r\n          *ngIf=\"data.button.type === type().MENU\"\r\n          mat-button\r\n          [matMenuTriggerFor]=\"menu\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          color=\"{{ data.button.color }}\"\r\n        >\r\n          <smart-icon\r\n            *ngIf=\"\r\n              data.button.icon &&\r\n              (!data.button.iconPosition || data.button.iconPosition === position().PRE)\r\n            \"\r\n            [icon]=\"data.button.icon\"\r\n          ></smart-icon>\r\n          {{ data.button.label }}\r\n          <smart-icon\r\n            *ngIf=\"data.button.icon && data.button.iconPosition === position().POST\"\r\n            [icon]=\"data.button.icon\"\r\n          ></smart-icon>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <button\r\n            *ngFor=\"let button of data.button.menuItemButtons\"\r\n            (click)=\"customButtonClicked($event, button, data.index)\"\r\n            mat-menu-item\r\n          >\r\n            <smart-icon\r\n              *ngIf=\"\r\n                button.icon && (!button.iconPosition || button.iconPosition === position().PRE)\r\n              \"\r\n              [icon]=\"button.icon\"\r\n            ></smart-icon>\r\n            {{ button.label }}\r\n            <smart-icon\r\n              *ngIf=\"button.icon && button.iconPosition === position().POST\"\r\n              [icon]=\"button.icon\"\r\n            ></smart-icon>\r\n          </button>\r\n        </mat-menu>\r\n      </div>\r\n    </mat-expansion-panel-header>\r\n\r\n    <ng-template #renderComponent></ng-template>\r\n  </mat-expansion-panel>\r\n</div>\r\n", styles: [".section-container{margin-bottom:50px}:host::ng-deep .mat-expansion-panel-header{background:var(--primary-lighter-color)}:host::ng-deep .mat-expansion-panel-header-title{color:var(--primary-color)}:host::ng-deep .btn-container{margin:1em 3em 1em 1em}:host::ng-deep .btn{border-radius:24px}\n"] }]
         }], ctorParameters: function () { return [{ type: ComponentFactoryService }]; }, propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -10715,6 +10734,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
             }], vcRefheader: [{
                 type: ViewChild,
                 args: ['headerComponent', { read: ViewContainerRef }]
+            }], toolbar: [{
+                type: ViewChild,
+                args: ['toolbar']
             }] } });
 
 class SmartGridComponent {
@@ -13710,6 +13732,7 @@ var ComponentWidgetType;
     ComponentWidgetType["FILTER"] = "filter";
     ComponentWidgetType["TREE"] = "tree";
     ComponentWidgetType["TOOLBAR"] = "toolbar";
+    ComponentWidgetType["MAP"] = "map";
 })(ComponentWidgetType || (ComponentWidgetType = {}));
 
 /**
@@ -13886,6 +13909,11 @@ class SmartComponentLayoutComponent {
                 ['parentSmartComponent', this.parentSmartComponent],
                 ['parentLayoutComponent', this.parentLayoutComponent],
             ]),
+            headerData: {
+                title: this.smartComponentLayout?.expandableSectionLabel ?? '',
+                subtitle: this.smartComponentLayout?.expandableSectionSubtitle,
+                toolbarId: this.smartComponentLayout?.expandableSectionHeaderToolbarId,
+            },
             customComponent: SmartComponentLayoutComponent,
         };
     }
@@ -15457,6 +15485,14 @@ class SmartComponentLayoutUtility {
         }
         const expandable = this.getExpandableComponent(comp);
         if (expandable) {
+            const headerToolbarId = comp.expandableSection?.headerData?.toolbarId;
+            if (headerToolbarId) {
+                const headerToolbar = comp.expandableComponents?.first.toolbar;
+                if (headerToolbar) {
+                    headerToolbar.id = headerToolbarId;
+                    result.push(headerToolbar);
+                }
+            }
             result.push(...this.getToolbars(expandable));
         }
         if (comp.toolbar) {