@smartbit4all/ng-client 4.0.38 → 4.0.40

package/fesm2022/smartbit4all-ng-client.mjs

@@ -20,7 +20,7 @@ import * as i2$2 from '@angular/platform-browser';
 import { BrowserModule } from '@angular/platform-browser';
 import * as i2$3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i3$3 from '@angular/material/expansion';
+import * as i3$4 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import * as i9 from '@angular/forms';
 import { UntypedFormGroup, UntypedFormControl, Validators, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -76,13 +76,13 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i6 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
-import { provideNgxMask } from 'ngx-mask';
-import * as i5$3 from 'primeng/api';
+import * as i3$3 from 'primeng/api';
 import { SharedModule as SharedModule$1 } from 'primeng/api';
+import * as i5$3 from 'primeng/fileupload';
+import { FileUploadModule } from 'primeng/fileupload';
+import { provideNgxMask } from 'ngx-mask';
 import { ToastModule } from 'primeng/toast';
 import { catchError as catchError$1, switchMap } from 'rxjs/operators';
-import * as i4$3 from 'primeng/fileupload';
-import { FileUploadModule } from 'primeng/fileupload';
 import * as i9$1 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { FlatTreeControl, NestedTreeControl } from '@angular/cdk/tree';
@@ -96,10 +96,10 @@ import * as i18$1 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
 import * as i20$1 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
-import * as i3$4 from '@angular/material/toolbar';
+import * as i3$5 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatBadgeModule } from '@angular/material/badge';
-import * as i4$4 from '@angular/material/tabs';
+import * as i4$3 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 
 class SmartSubject extends Subject {
@@ -8167,6 +8167,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                     args: ['confirmDialogService']
                 }] }, { type: UiActionDescriptorService }] });
 
+var UiActionDialogType;
+(function (UiActionDialogType) {
+    UiActionDialogType["inputDialog"] = "inputDialog";
+    UiActionDialogType["confirmDialog"] = "confirmDialog";
+    UiActionDialogType["dialog"] = "dialog";
+})(UiActionDialogType || (UiActionDialogType = {}));
+
+/*
+ * Public API Surface of smart-view-context
+ */
+
 class UiActionFileUploadDialogService extends SmartdialogService {
     constructor(dialog, router) {
         super(dialog, router);
@@ -8213,10 +8224,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
         }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: i2$1.Router }] });
 
 class UiActionFileUploadDialogComponent {
-    constructor(service, manager) {
+    constructor(service, compLib, manager) {
         this.service = service;
+        this.compLib = compLib;
         this.manager = manager;
+        this.componentLibrary = ComponentLibrary;
         this.maxSizeMb = 25;
+        this.uploadedFiles = [];
         this.code = this.service.action.code;
         this.setUp();
     }
@@ -8263,18 +8277,33 @@ class UiActionFileUploadDialogComponent {
     upload(files) {
         this.service.onSave(files);
     }
+    onSelect(event) {
+        this.uploadedFiles = [];
+        for (let file of event.files) {
+            this.uploadedFiles.push(file);
+        }
+    }
+    onRemove(event) {
+        this.uploadedFiles = [];
+    }
+    uploadFiles(event) {
+        this.service.onSave(this.uploadedFiles);
+    }
     cancel() {
         this.service.cancel();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiActionFileUploadDialogComponent, deps: [{ token: 'fileUploadDialogService' }, { token: UiActionDescriptorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: UiActionFileUploadDialogComponent, selector: "lib-ui-action-file-upload-dialog", ngImport: i0, template: "<div class=\"folderNameDialogContainer\">\r\n  <div class=\"headerContainer\">\r\n    <h3 class=\"color-accent-700\">\r\n      {{ getTitle() }}\r\n    </h3>\r\n    <button mat-icon-button title=\"close\" (click)=\"cancel()\">\r\n      <smart-icon [color]=\"'primary'\" [icon]=\"'X'\"></smart-icon>\r\n    </button>\r\n  </div>\r\n  <p>\r\n    {{ getText() }}\r\n  </p>\r\n  <smartfileuploader\r\n    [i18n]=\"i18n\"\r\n    [fileFormats]=\"fileFormats\"\r\n    [maxSizeMb]=\"maxSizeMb\"\r\n    [uploadCallback]=\"upload.bind(this)\"\r\n    [isMultiple]=\"isMultiple\"\r\n  ></smartfileuploader>\r\n  <div class=\"folderNameDialogButtonsContainer\">\r\n    <button mat-button color=\"accent\" [color]=\"getCancelButtonColor()\" (click)=\"cancel()\">\r\n      {{ getCancelButtonLabel() }}\r\n    </button>\r\n    <!-- <button mat-raised-button [color]=\"getActionButtonColor()\" (click)=\"upload()\">\r\n      {{ getActionButtonLabel() }}\r\n    </button> -->\r\n  </div>\r\n</div>\r\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"], dependencies: [{ kind: "component", type: i2$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { kind: "component", type: SmartfileuploaderComponent, selector: "smartfileuploader", inputs: ["uploadCallback", "fileFormats", "maxSizeMb", "i18n", "useIconButton", "isMultiple"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiActionFileUploadDialogComponent, deps: [{ token: 'fileUploadDialogService' }, { token: COMPONENT_LIBRARY }, { token: UiActionDescriptorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: UiActionFileUploadDialogComponent, selector: "lib-ui-action-file-upload-dialog", ngImport: i0, template: "<div class=\"folderNameDialogContainer\">\r\n  <div class=\"headerContainer\">\r\n    <h3 class=\"color-accent-700\">\r\n      {{ getTitle() }}\r\n    </h3>\r\n    <button mat-icon-button title=\"close\" (click)=\"cancel()\">\r\n      <smart-icon [color]=\"'primary'\" [icon]=\"'X'\"></smart-icon>\r\n    </button>\r\n  </div>\r\n  <p>\r\n    {{ getText() }}\r\n  </p>\r\n  @if(compLib === componentLibrary.PRIMENG) {\r\n\r\n  <p-fileUpload\r\n    name=\"files[]\"\r\n    url=\"\"\r\n    (onSend)=\"uploadFiles($event)\"\r\n    (onSelect)=\"onSelect($event)\"\r\n    (onRemove)=\"onRemove($event)\"\r\n    [multiple]=\"isMultiple\"\r\n    [accept]=\"fileFormats?.join(',')\"\r\n    [maxFileSize]=\"maxSizeMb\"\r\n  >\r\n    <ng-template pTemplate=\"content\"> </ng-template>\r\n  </p-fileUpload>\r\n  }@else{\r\n  <smartfileuploader\r\n    [i18n]=\"i18n\"\r\n    [fileFormats]=\"fileFormats\"\r\n    [maxSizeMb]=\"maxSizeMb\"\r\n    [uploadCallback]=\"upload.bind(this)\"\r\n    [isMultiple]=\"isMultiple\"\r\n  ></smartfileuploader>\r\n\r\n  }\r\n\r\n  <div class=\"folderNameDialogButtonsContainer\">\r\n    <button mat-button color=\"accent\" [color]=\"getCancelButtonColor()\" (click)=\"cancel()\">\r\n      {{ getCancelButtonLabel() }}\r\n    </button>\r\n    <!-- <button mat-raised-button [color]=\"getActionButtonColor()\" (click)=\"upload()\">\r\n      {{ getActionButtonLabel() }}\r\n    </button> -->\r\n  </div>\r\n</div>\r\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"], dependencies: [{ kind: "component", type: i2$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { kind: "component", type: i5$3.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "component", type: SmartfileuploaderComponent, selector: "smartfileuploader", inputs: ["uploadCallback", "fileFormats", "maxSizeMb", "i18n", "useIconButton", "isMultiple"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiActionFileUploadDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-ui-action-file-upload-dialog', template: "<div class=\"folderNameDialogContainer\">\r\n  <div class=\"headerContainer\">\r\n    <h3 class=\"color-accent-700\">\r\n      {{ getTitle() }}\r\n    </h3>\r\n    <button mat-icon-button title=\"close\" (click)=\"cancel()\">\r\n      <smart-icon [color]=\"'primary'\" [icon]=\"'X'\"></smart-icon>\r\n    </button>\r\n  </div>\r\n  <p>\r\n    {{ getText() }}\r\n  </p>\r\n  <smartfileuploader\r\n    [i18n]=\"i18n\"\r\n    [fileFormats]=\"fileFormats\"\r\n    [maxSizeMb]=\"maxSizeMb\"\r\n    [uploadCallback]=\"upload.bind(this)\"\r\n    [isMultiple]=\"isMultiple\"\r\n  ></smartfileuploader>\r\n  <div class=\"folderNameDialogButtonsContainer\">\r\n    <button mat-button color=\"accent\" [color]=\"getCancelButtonColor()\" (click)=\"cancel()\">\r\n      {{ getCancelButtonLabel() }}\r\n    </button>\r\n    <!-- <button mat-raised-button [color]=\"getActionButtonColor()\" (click)=\"upload()\">\r\n      {{ getActionButtonLabel() }}\r\n    </button> -->\r\n  </div>\r\n</div>\r\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"] }]
+            args: [{ selector: 'lib-ui-action-file-upload-dialog', template: "<div class=\"folderNameDialogContainer\">\r\n  <div class=\"headerContainer\">\r\n    <h3 class=\"color-accent-700\">\r\n      {{ getTitle() }}\r\n    </h3>\r\n    <button mat-icon-button title=\"close\" (click)=\"cancel()\">\r\n      <smart-icon [color]=\"'primary'\" [icon]=\"'X'\"></smart-icon>\r\n    </button>\r\n  </div>\r\n  <p>\r\n    {{ getText() }}\r\n  </p>\r\n  @if(compLib === componentLibrary.PRIMENG) {\r\n\r\n  <p-fileUpload\r\n    name=\"files[]\"\r\n    url=\"\"\r\n    (onSend)=\"uploadFiles($event)\"\r\n    (onSelect)=\"onSelect($event)\"\r\n    (onRemove)=\"onRemove($event)\"\r\n    [multiple]=\"isMultiple\"\r\n    [accept]=\"fileFormats?.join(',')\"\r\n    [maxFileSize]=\"maxSizeMb\"\r\n  >\r\n    <ng-template pTemplate=\"content\"> </ng-template>\r\n  </p-fileUpload>\r\n  }@else{\r\n  <smartfileuploader\r\n    [i18n]=\"i18n\"\r\n    [fileFormats]=\"fileFormats\"\r\n    [maxSizeMb]=\"maxSizeMb\"\r\n    [uploadCallback]=\"upload.bind(this)\"\r\n    [isMultiple]=\"isMultiple\"\r\n  ></smartfileuploader>\r\n\r\n  }\r\n\r\n  <div class=\"folderNameDialogButtonsContainer\">\r\n    <button mat-button color=\"accent\" [color]=\"getCancelButtonColor()\" (click)=\"cancel()\">\r\n      {{ getCancelButtonLabel() }}\r\n    </button>\r\n    <!-- <button mat-raised-button [color]=\"getActionButtonColor()\" (click)=\"upload()\">\r\n      {{ getActionButtonLabel() }}\r\n    </button> -->\r\n  </div>\r\n</div>\r\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"] }]
         }], ctorParameters: () => [{ type: UiActionFileUploadDialogService, decorators: [{
                     type: Inject,
                     args: ['fileUploadDialogService']
+                }] }, { type: ComponentLibrary, decorators: [{
+                    type: Inject,
+                    args: [COMPONENT_LIBRARY]
                 }] }, { type: UiActionDescriptorService }] });
 
 class SmartformLayoutDefinitionService {
@@ -8870,7 +8899,8 @@ class SmartViewContextModule {
             FloatLabelModule,
             CommonModule,
             ToastModule,
-            DynamicDialogModule], exports: [UiActionToolbarComponent,
+            DynamicDialogModule,
+            FileUploadModule], exports: [UiActionToolbarComponent,
             UiActionInputDialogComponent,
             SmartformComponent,
             SmartformwidgetComponent,
@@ -8934,7 +8964,8 @@ class SmartViewContextModule {
             FloatLabelModule,
             CommonModule,
             ToastModule,
-            DynamicDialogModule] }); }
+            DynamicDialogModule,
+            FileUploadModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartViewContextModule, decorators: [{
             type: NgModule,
@@ -8995,6 +9026,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         CommonModule,
                         ToastModule,
                         DynamicDialogModule,
+                        FileUploadModule,
                     ],
                     exports: [
                         UiActionToolbarComponent,
@@ -9331,17 +9363,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 }]
         }] });
 
-var UiActionDialogType;
-(function (UiActionDialogType) {
-    UiActionDialogType["inputDialog"] = "inputDialog";
-    UiActionDialogType["confirmDialog"] = "confirmDialog";
-    UiActionDialogType["dialog"] = "dialog";
-})(UiActionDialogType || (UiActionDialogType = {}));
-
-/*
- * Public API Surface of smart-view-context
- */
-
 class SmartFileUploaderComponent {
     constructor(uiActionService, uiActionDescriptorService, compLib) {
         this.uiActionService = uiActionService;
@@ -9403,7 +9424,7 @@ class SmartFileUploaderComponent {
         this.uiActionService.execute(this.uiActionModel.uiAction);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFileUploaderComponent, deps: [{ token: UiActionService }, { token: UiActionDescriptorService }, { token: COMPONENT_LIBRARY }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SmartFileUploaderComponent, selector: "smart-file-uploader4sc", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "@if(compLib === componentLibrary.PRIMENG) {\r\n<p-fileUpload\r\n  name=\"files[]\"\r\n  url=\"\"\r\n  (onSend)=\"uploadFiles($event)\"\r\n  (onSelect)=\"onSelect($event)\"\r\n  (onRemove)=\"onRemove($event)\"\r\n  [multiple]=\"true\"\r\n  [accept]=\"config?.fileFormats?.join(',')\"\r\n  [maxFileSize]=\"config?.maxSizeMb\"\r\n>\r\n  <ng-template pTemplate=\"content\"> </ng-template>\r\n</p-fileUpload>\r\n}@else{\r\n<smartfileuploader\r\n  *ngIf=\"i18n\"\r\n  [i18n]=\"i18n\"\r\n  [fileFormats]=\"config?.fileFormats\"\r\n  [isMultiple]=\"config?.isMultiple\"\r\n  [maxSizeMb]=\"config?.maxSizeMb\"\r\n  [uploadCallback]=\"executeUpload.bind(this)\"\r\n></smartfileuploader>\r\n}\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SmartfileuploaderComponent, selector: "smartfileuploader", inputs: ["uploadCallback", "fileFormats", "maxSizeMb", "i18n", "useIconButton", "isMultiple"] }, { kind: "component", type: i4$3.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "directive", type: i5$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SmartFileUploaderComponent, selector: "smart-file-uploader4sc", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "@if(compLib === componentLibrary.PRIMENG) {\r\n<p-fileUpload\r\n  name=\"files[]\"\r\n  url=\"\"\r\n  (onSend)=\"uploadFiles($event)\"\r\n  (onSelect)=\"onSelect($event)\"\r\n  (onRemove)=\"onRemove($event)\"\r\n  [multiple]=\"true\"\r\n  [accept]=\"config?.fileFormats?.join(',')\"\r\n  [maxFileSize]=\"config?.maxSizeMb\"\r\n>\r\n  <ng-template pTemplate=\"content\"> </ng-template>\r\n</p-fileUpload>\r\n}@else{\r\n<smartfileuploader\r\n  *ngIf=\"i18n\"\r\n  [i18n]=\"i18n\"\r\n  [fileFormats]=\"config?.fileFormats\"\r\n  [isMultiple]=\"config?.isMultiple\"\r\n  [maxSizeMb]=\"config?.maxSizeMb\"\r\n  [uploadCallback]=\"executeUpload.bind(this)\"\r\n></smartfileuploader>\r\n}\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SmartfileuploaderComponent, selector: "smartfileuploader", inputs: ["uploadCallback", "fileFormats", "maxSizeMb", "i18n", "useIconButton", "isMultiple"] }, { kind: "component", type: i5$3.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFileUploaderComponent, decorators: [{
             type: Component,
@@ -10979,7 +11000,7 @@ class ExpandableSectionComponent {
         button.callback(button.args, element);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ExpandableSectionComponent, deps: [{ token: ComponentFactoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i2$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i2$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ExpandableSectionComponent, decorators: [{
             type: Component,
@@ -11821,7 +11842,7 @@ class SmartGridComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartGridComponent, deps: [{ token: SmartGridService }, { token: ComponentFactoryService }, { token: i1$1.MatDialog }, { token: i0.Injector }, { token: UiActionDescriptorService }, { token: COMPONENT_LIBRARY }, { token: 'gridMenuIcon' }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SmartGridComponent, selector: "smart-grid", inputs: { smartGrid: "smartGrid", uuid: "uuid", dev: "dev" }, providers: [SmartGridService], viewQueries: [{ propertyName: "vcRefTable", first: true, predicate: ["table"], descendants: true, read: ViewContainerRef }, { propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if(compLib === componentLibrary.PRIMENG) {\r\n<div *ngIf=\"smartGrid\" class=\"primeSmartGrid-container\">\r\n  <p-table\r\n    *ngIf=\"!smartGrid.layoutDef || smartGrid.layoutDef === layoutDef().TABLE\"\r\n    #pTable\r\n    [value]=\"smartGrid.gridModel.page.rows!\"\r\n    (sortFunction)=\"gridSort($event)\"\r\n    [customSort]=\"true\"\r\n    [sortMode]=\"'multiple'\"\r\n    [lazy]=\"true\"\r\n    (onLazyLoad)=\"lazyLoad($event)\"\r\n    [reorderableColumns]=\"smartGrid.gridModel.view?.descriptor?.showEditColumns\"\r\n    [columns]=\"columns\"\r\n    (onColReorder)=\"onColOrder($event)\"\r\n  >\r\n    <ng-template pTemplate=\"caption\">\r\n      <p-multiSelect\r\n        *ngIf=\"smartGrid.gridModel.view?.descriptor?.showEditColumns\"\r\n        display=\"chip\"\r\n        [options]=\"smartGrid.gridModel.view?.descriptor?.columns\"\r\n        optionLabel=\"label\"\r\n        [(ngModel)]=\"columns\"\r\n        selectedItemsLabel=\"{0} columns selected\"\r\n        [style]=\"{ 'min-width': '200px' }\"\r\n        placeholder=\"Choose Columns\"\r\n        (onChange)=\"headerChange($event)\"\r\n      />\r\n    </ng-template>\r\n    <ng-template pTemplate=\"header\">\r\n      <tr *ngIf=\"smartGrid.gridModel.view?.descriptor?.showEditColumns\">\r\n        <th [pSortableColumn]=\"col.propertyName\" *ngFor=\"let col of columns\" pReorderableColumn>\r\n          <p-sortIcon [field]=\"col.propertyName\" />\r\n          {{ col.label }}\r\n        </th>\r\n        <th></th>\r\n      </tr>\r\n      <tr *ngIf=\"!smartGrid.gridModel.view?.descriptor?.showEditColumns\">\r\n        <th [pSortableColumn]=\"col.propertyName\" *ngFor=\"let col of columns\">\r\n          <p-sortIcon [field]=\"col.propertyName\" />\r\n          {{ col.label }}\r\n        </th>\r\n        <th></th>\r\n      </tr>\r\n      <!--  <tr>\r\n        <th *ngFor=\"let col of smartGrid?.gridModel?.view?.orderedColumnNames\">\r\n          <p-columnFilter\r\n            type=\"text\"\r\n            [field]=\"'data.' + col\"\r\n            [placeholder]=\"'Search by ' + col\"\r\n            [ariaLabel]=\"'Filter ' + col\"\r\n          />\r\n        </th>\r\n      </tr> -->\r\n    </ng-template>\r\n    <ng-template pTemplate=\"body\" let-row>\r\n      <tr *ngIf=\"row && row.data\">\r\n        <td *ngFor=\"let col of smartGrid?.gridModel?.view?.orderedColumnNames\">\r\n          {{ row.data[col] }}\r\n        </td>\r\n        <td>\r\n          <p-button\r\n            [rounded]=\"true\"\r\n            [text]=\"true\"\r\n            *ngIf=\"row.actions && row.actions.length > 0\"\r\n            (onClick)=\"onOptionsClick($event, row)\"\r\n          >\r\n            <smart-icon icon=\"ellipsis-v\"></smart-icon>\r\n          </p-button>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n  <div\r\n    *ngIf=\"smartGrid.layoutDef === layoutDef().CARD\"\r\n    class=\"cards-container\"\r\n    [ngStyle]=\"{\r\n      'grid-template-columns':\r\n        smartGrid.numberOfColumn !== undefined\r\n          ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n          : ''\r\n    }\"\r\n  >\r\n    <app-smart-grid-card\r\n      class=\"smartGrid-card-container\"\r\n      *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n      [item]=\"task\"\r\n      [smartGrid]=\"smartGrid\"\r\n      [onSelect]=\"onSelect.bind(this)\"\r\n    ></app-smart-grid-card>\r\n  </div>\r\n  <p-paginator\r\n    *ngIf=\"smartGrid.paginator\"\r\n    [first]=\"pageIndex!\"\r\n    [totalRecords]=\"length!\"\r\n    [rows]=\"pageSize\"\r\n    [rowsPerPageOptions]=\"pageSizeOptions\"\r\n    (onPageChange)=\"onPrimeChangePage($event)\"\r\n    [showCurrentPageReport]=\"true\"\r\n  />\r\n  <p-menu #menu [model]=\"menuButtons\" [popup]=\"true\"> </p-menu>\r\n</div>\r\n}@else {\r\n<div *ngIf=\"smartGrid\" class=\"smartGrid-container\">\r\n  <div class=\"smart-grid-toolbar\">\r\n    <smart-ui-action-toolbar #toolbar [id]=\"'grid_not_initialized'\"></smart-ui-action-toolbar>\r\n    <button\r\n      (click)=\"editColumns()\"\r\n      mat-mini-fab\r\n      color=\"text-primary\"\r\n      *ngIf=\"smartGrid.showEditColumns\"\r\n    >\r\n      <mat-icon aria-hidden=\"false\" aria-label=\"Columns\" class=\"smart-grid-edit-icon\"\r\n        >view_columns</mat-icon\r\n      >\r\n    </button>\r\n  </div>\r\n  <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\r\n  <div class=\"smartGridContent\">\r\n    <div>\r\n      <div *ngIf=\"smartGrid.showResultCount\">\r\n        <div class=\"smartGrid-data-number\">\r\n          {{ smartGrid.gridModel.totalRowCount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"smart-grid-table-container\">\r\n      <ng-template #table></ng-template>\r\n    </div>\r\n\r\n    <div *ngIf=\"smartGrid.layoutDef === layoutDef().EXPANDABLE\">\r\n      <smart-expandable-section\r\n        #gridExpandableSection\r\n        *ngFor=\"let expandableSection of expandableSections\"\r\n        [data]=\"expandableSection\"\r\n      ></smart-expandable-section>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().CARD\"\r\n      class=\"cards-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <app-smart-grid-card\r\n        class=\"smartGrid-card-container\"\r\n        *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n        [item]=\"task\"\r\n        [smartGrid]=\"smartGrid\"\r\n        [onSelect]=\"onSelect.bind(this)\"\r\n      ></app-smart-grid-card>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().TREE && treeControl\"\r\n      class=\"tree-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\r\n        <mat-tree-node\r\n          *matTreeNodeDef=\"let node\"\r\n          matTreeNodeToggle\r\n          matTreeNodePadding\r\n          matTreeNodePaddingIndent=\"24\"\r\n        >\r\n          <button mat-icon-button disabled class=\"tree-button\"></button>\r\n          <mat-checkbox\r\n            class=\"checklist-leaf-node\"\r\n            [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n            (change)=\"treeNodeSelectionToggle(node)\"\r\n            >{{ getTreeItem(node) }}</mat-checkbox\r\n          >\r\n        </mat-tree-node>\r\n\r\n        <mat-tree-node\r\n          *matTreeNodeDef=\"let node; when: hasChild\"\r\n          matTreeNodePadding\r\n          matTreeNodePaddingIndent=\"24\"\r\n        >\r\n          <button\r\n            mat-icon-button\r\n            matTreeNodeToggle\r\n            class=\"tree-button\"\r\n            [attr.aria-label]=\"'Toggle ' + node.item\"\r\n          >\r\n            <mat-icon class=\"mat-icon-rtl-mirror\">\r\n              {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n            </mat-icon>\r\n          </button>\r\n          <mat-checkbox\r\n            [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n            [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n            (change)=\"treeNodeSelectionToggle(node)\"\r\n            >{{ getTreeItem(node) }}</mat-checkbox\r\n          >\r\n        </mat-tree-node>\r\n      </mat-tree>\r\n    </div>\r\n  </div>\r\n\r\n  <mat-paginator\r\n    *ngIf=\"smartGrid.paginator && !treeControl\"\r\n    #paginator\r\n    [length]=\"length\"\r\n    [pageIndex]=\"pageIndex\"\r\n    [pageSize]=\"pageSize\"\r\n    [pageSizeOptions]=\"pageSizeOptions\"\r\n    (page)=\"onChangePage($event)\"\r\n  ></mat-paginator>\r\n</div>\r\n}\r\n", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.primeSmartGrid-container{display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem;padding:1rem}.smartGrid-card-container{height:auto;border:1px solid black;border-radius:8px}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray)}.tree-button{width:24px!important;height:24px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$3.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i9$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i10$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i10$1.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i10$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i10$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i10$1.MatTreeNode, selector: "mat-tree-node", inputs: ["disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "component", type: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id"] }, { kind: "component", type: i14.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i5$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i14.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i14.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i14.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i17$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i18$1.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i20$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: SmartGridCardComponent, selector: "app-smart-grid-card", inputs: ["item", "smartGrid", "onSelect"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SmartGridComponent, selector: "smart-grid", inputs: { smartGrid: "smartGrid", uuid: "uuid", dev: "dev" }, providers: [SmartGridService], viewQueries: [{ propertyName: "vcRefTable", first: true, predicate: ["table"], descendants: true, read: ViewContainerRef }, { propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if(compLib === componentLibrary.PRIMENG) {\r\n<div *ngIf=\"smartGrid\" class=\"primeSmartGrid-container\">\r\n  <p-table\r\n    *ngIf=\"!smartGrid.layoutDef || smartGrid.layoutDef === layoutDef().TABLE\"\r\n    #pTable\r\n    [value]=\"smartGrid.gridModel.page.rows!\"\r\n    (sortFunction)=\"gridSort($event)\"\r\n    [customSort]=\"true\"\r\n    [sortMode]=\"'multiple'\"\r\n    [lazy]=\"true\"\r\n    (onLazyLoad)=\"lazyLoad($event)\"\r\n    [reorderableColumns]=\"smartGrid.gridModel.view?.descriptor?.showEditColumns\"\r\n    [columns]=\"columns\"\r\n    (onColReorder)=\"onColOrder($event)\"\r\n  >\r\n    <ng-template pTemplate=\"caption\">\r\n      <p-multiSelect\r\n        *ngIf=\"smartGrid.gridModel.view?.descriptor?.showEditColumns\"\r\n        display=\"chip\"\r\n        [options]=\"smartGrid.gridModel.view?.descriptor?.columns\"\r\n        optionLabel=\"label\"\r\n        [(ngModel)]=\"columns\"\r\n        selectedItemsLabel=\"{0} columns selected\"\r\n        [style]=\"{ 'min-width': '200px' }\"\r\n        placeholder=\"Choose Columns\"\r\n        (onChange)=\"headerChange($event)\"\r\n      />\r\n    </ng-template>\r\n    <ng-template pTemplate=\"header\">\r\n      <tr *ngIf=\"smartGrid.gridModel.view?.descriptor?.showEditColumns\">\r\n        <th [pSortableColumn]=\"col.propertyName\" *ngFor=\"let col of columns\" pReorderableColumn>\r\n          <p-sortIcon [field]=\"col.propertyName\" />\r\n          {{ col.label }}\r\n        </th>\r\n        <th></th>\r\n      </tr>\r\n      <tr *ngIf=\"!smartGrid.gridModel.view?.descriptor?.showEditColumns\">\r\n        <th [pSortableColumn]=\"col.propertyName\" *ngFor=\"let col of columns\">\r\n          <p-sortIcon [field]=\"col.propertyName\" />\r\n          {{ col.label }}\r\n        </th>\r\n        <th></th>\r\n      </tr>\r\n      <!--  <tr>\r\n        <th *ngFor=\"let col of smartGrid?.gridModel?.view?.orderedColumnNames\">\r\n          <p-columnFilter\r\n            type=\"text\"\r\n            [field]=\"'data.' + col\"\r\n            [placeholder]=\"'Search by ' + col\"\r\n            [ariaLabel]=\"'Filter ' + col\"\r\n          />\r\n        </th>\r\n      </tr> -->\r\n    </ng-template>\r\n    <ng-template pTemplate=\"body\" let-row>\r\n      <tr *ngIf=\"row && row.data\">\r\n        <td *ngFor=\"let col of smartGrid?.gridModel?.view?.orderedColumnNames\">\r\n          {{ row.data[col] }}\r\n        </td>\r\n        <td>\r\n          <p-button\r\n            [rounded]=\"true\"\r\n            [text]=\"true\"\r\n            *ngIf=\"row.actions && row.actions.length > 0\"\r\n            (onClick)=\"onOptionsClick($event, row)\"\r\n          >\r\n            <smart-icon icon=\"ellipsis-v\"></smart-icon>\r\n          </p-button>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n  <div\r\n    *ngIf=\"smartGrid.layoutDef === layoutDef().CARD\"\r\n    class=\"cards-container\"\r\n    [ngStyle]=\"{\r\n      'grid-template-columns':\r\n        smartGrid.numberOfColumn !== undefined\r\n          ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n          : ''\r\n    }\"\r\n  >\r\n    <app-smart-grid-card\r\n      class=\"smartGrid-card-container\"\r\n      *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n      [item]=\"task\"\r\n      [smartGrid]=\"smartGrid\"\r\n      [onSelect]=\"onSelect.bind(this)\"\r\n    ></app-smart-grid-card>\r\n  </div>\r\n  <p-paginator\r\n    *ngIf=\"smartGrid.paginator\"\r\n    [first]=\"pageIndex!\"\r\n    [totalRecords]=\"length!\"\r\n    [rows]=\"pageSize\"\r\n    [rowsPerPageOptions]=\"pageSizeOptions\"\r\n    (onPageChange)=\"onPrimeChangePage($event)\"\r\n    [showCurrentPageReport]=\"true\"\r\n  />\r\n  <p-menu #menu [model]=\"menuButtons\" [popup]=\"true\"> </p-menu>\r\n</div>\r\n}@else {\r\n<div *ngIf=\"smartGrid\" class=\"smartGrid-container\">\r\n  <div class=\"smart-grid-toolbar\">\r\n    <smart-ui-action-toolbar #toolbar [id]=\"'grid_not_initialized'\"></smart-ui-action-toolbar>\r\n    <button\r\n      (click)=\"editColumns()\"\r\n      mat-mini-fab\r\n      color=\"text-primary\"\r\n      *ngIf=\"smartGrid.showEditColumns\"\r\n    >\r\n      <mat-icon aria-hidden=\"false\" aria-label=\"Columns\" class=\"smart-grid-edit-icon\"\r\n        >view_columns</mat-icon\r\n      >\r\n    </button>\r\n  </div>\r\n  <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\r\n  <div class=\"smartGridContent\">\r\n    <div>\r\n      <div *ngIf=\"smartGrid.showResultCount\">\r\n        <div class=\"smartGrid-data-number\">\r\n          {{ smartGrid.gridModel.totalRowCount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"smart-grid-table-container\">\r\n      <ng-template #table></ng-template>\r\n    </div>\r\n\r\n    <div *ngIf=\"smartGrid.layoutDef === layoutDef().EXPANDABLE\">\r\n      <smart-expandable-section\r\n        #gridExpandableSection\r\n        *ngFor=\"let expandableSection of expandableSections\"\r\n        [data]=\"expandableSection\"\r\n      ></smart-expandable-section>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().CARD\"\r\n      class=\"cards-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <app-smart-grid-card\r\n        class=\"smartGrid-card-container\"\r\n        *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n        [item]=\"task\"\r\n        [smartGrid]=\"smartGrid\"\r\n        [onSelect]=\"onSelect.bind(this)\"\r\n      ></app-smart-grid-card>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().TREE && treeControl\"\r\n      class=\"tree-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\r\n        <mat-tree-node\r\n          *matTreeNodeDef=\"let node\"\r\n          matTreeNodeToggle\r\n          matTreeNodePadding\r\n          matTreeNodePaddingIndent=\"24\"\r\n        >\r\n          <button mat-icon-button disabled class=\"tree-button\"></button>\r\n          <mat-checkbox\r\n            class=\"checklist-leaf-node\"\r\n            [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n            (change)=\"treeNodeSelectionToggle(node)\"\r\n            >{{ getTreeItem(node) }}</mat-checkbox\r\n          >\r\n        </mat-tree-node>\r\n\r\n        <mat-tree-node\r\n          *matTreeNodeDef=\"let node; when: hasChild\"\r\n          matTreeNodePadding\r\n          matTreeNodePaddingIndent=\"24\"\r\n        >\r\n          <button\r\n            mat-icon-button\r\n            matTreeNodeToggle\r\n            class=\"tree-button\"\r\n            [attr.aria-label]=\"'Toggle ' + node.item\"\r\n          >\r\n            <mat-icon class=\"mat-icon-rtl-mirror\">\r\n              {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n            </mat-icon>\r\n          </button>\r\n          <mat-checkbox\r\n            [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n            [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n            (change)=\"treeNodeSelectionToggle(node)\"\r\n            >{{ getTreeItem(node) }}</mat-checkbox\r\n          >\r\n        </mat-tree-node>\r\n      </mat-tree>\r\n    </div>\r\n  </div>\r\n\r\n  <mat-paginator\r\n    *ngIf=\"smartGrid.paginator && !treeControl\"\r\n    #paginator\r\n    [length]=\"length\"\r\n    [pageIndex]=\"pageIndex\"\r\n    [pageSize]=\"pageSize\"\r\n    [pageSizeOptions]=\"pageSizeOptions\"\r\n    (page)=\"onChangePage($event)\"\r\n  ></mat-paginator>\r\n</div>\r\n}\r\n", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.primeSmartGrid-container{display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem;padding:1rem}.smartGrid-card-container{height:auto;border:1px solid black;border-radius:8px}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray)}.tree-button{width:24px!important;height:24px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$3.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i9$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i10$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i10$1.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i10$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i10$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i10$1.MatTreeNode, selector: "mat-tree-node", inputs: ["disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "component", type: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id"] }, { kind: "component", type: i14.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i14.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i14.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i14.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i17$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i18$1.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i20$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: SmartGridCardComponent, selector: "app-smart-grid-card", inputs: ["item", "smartGrid", "onSelect"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartGridComponent, decorators: [{
             type: Component,
@@ -14963,7 +14984,7 @@ class SmartNavbarComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartNavbarComponent, selector: "smart-navbar", inputs: { smartNavbar: "smartNavbar" }, viewQueries: [{ propertyName: "formComp", first: true, predicate: ["searchOption"], descendants: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <img\r\n    *ngIf=\"smartNavbar.icon\"\r\n    class=\"title\"\r\n    src=\"{{ smartNavbar.icon }}\"\r\n    alt=\"\"\r\n    (click)=\"onIconClick()\"\r\n  />\r\n  <ng-content select=\"[titleComponent]\" class=\"title\"></ng-content>\r\n  <div *ngIf=\"smartNavbar.searchBar\" class=\"input\">\r\n    <input\r\n      type=\"text\"\r\n      placeholder=\"{{ smartNavbar.searchBar.placeholder }}\"\r\n      [(ngModel)]=\"searchText\"\r\n    />\r\n    <div\r\n      *ngIf=\"smartNavbar.searchBar.quickFilterLabel && smartNavbar.searchBar.quickFilters.length\"\r\n      class=\"drop_down_btn\"\r\n    >\r\n      <smartform #searchOption [smartForm]=\"filterForm\"></smartform>\r\n      <button\r\n        class=\"search_icon\"\r\n        *ngIf=\"smartNavbar.searchBar.icon\"\r\n        mat-icon-button\r\n        (click)=\"onSearchButtonClick()\"\r\n      >\r\n        <mat-icon class=\"search_icon\">{{ smartNavbar.searchBar.icon }}</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <button\r\n    *ngIf=\"smartNavbar.filterButtonCallback\"\r\n    mat-raised-button\r\n    color=\"primary\"\r\n    class=\"filter-btn\"\r\n    (click)=\"openFilters()\"\r\n  >\r\n    <div #customFilter class=\"custom-filter-holder\">\r\n      <ng-content select=\"[filterComponent]\"></ng-content>\r\n    </div>\r\n    <ng-container *ngIf=\"!customFilter.hasChildNodes()\">\r\n      <mat-icon>filter_list</mat-icon> {{ smartNavbar.filterButtonLabel }}\r\n    </ng-container>\r\n  </button>\r\n  <div *ngIf=\"smartNavbar.userSettings\" class=\"account-content\">\r\n    <button\r\n      mat-button\r\n      *ngIf=\"smartNavbar?.notification\"\r\n      [color]=\"smartNavbar.notification?.iconColor\"\r\n      (click)=\"onNotificationClick()\"\r\n      class=\"notification-btn\"\r\n    >\r\n      <mat-icon>\r\n        {{ smartNavbar.notification?.icon }}\r\n      </mat-icon>\r\n    </button>\r\n    <button mat-button color=\"primary\" [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"smartNavbar.userSettings.icon\">\r\n        {{ smartNavbar.userSettings.icon }}\r\n      </mat-icon>\r\n      <mat-icon *ngIf=\"!smartNavbar.userSettings.icon\"> person_outline </mat-icon>\r\n      {{ smartNavbar.userSettings.label }}\r\n      <mat-icon>arrow_drop_down</mat-icon>\r\n    </button>\r\n    <mat-menu #menu=\"matMenu\">\r\n      <button\r\n        mat-menu-item\r\n        *ngFor=\"let btn of smartNavbar.userSettings.settings\"\r\n        (click)=\"btn.callback()\"\r\n        class=\"menuButton\"\r\n      >\r\n        <mat-icon class=\"menuIcon\" *ngIf=\"btn.icon && btn.iconPosition === buttonPosition().FRONT\">\r\n          {{ btn.icon }}\r\n        </mat-icon>\r\n        <div class=\"menuLabel\">\r\n          {{ btn.label }}\r\n        </div>\r\n        <mat-icon class=\"menuIcon\" *ngIf=\"btn.icon && btn.iconPosition === buttonPosition().POST\">\r\n          {{ btn.icon }}\r\n        </mat-icon>\r\n      </button>\r\n    </mat-menu>\r\n  </div>\r\n</mat-toolbar>\r\n", styles: [".filter-btn{margin-left:20px}input[type=text]{flex:1;background:#fff;height:40px;border:none;outline:none;padding:0 25px;border-radius:25px 0 0 25px}.drop_down_btn{position:relative;left:-5;border-radius:0 25px 25px 0;height:40px;border:none;outline:none;cursor:pointer;background:#fff;color:#00a8da;display:flex;align-items:center;padding-right:20px}.input{flex:1;position:relative;font-size:20px;display:flex;flex-direction:row;align-items:center;padding-left:30px}mat-toolbar{height:var(--navbar-height)}::ng-deep .navbar-form .mat-form-field-appearance-outline .mat-form-field-outline,::ng-deep .navbar-form .mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-form-field-flex:hover .mat-form-field-outline,::ng-deep .navbar-form .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline{opacity:.75!important;color:#fff}.account-content{margin-left:75px}.title{margin-right:75px}.account-content>*{margin-left:30px}.account-content>*:first-child{margin-left:0}.custom-filter-holder{display:flex;align-items:center}.menuButton{display:flex;flex-direction:row;gap:.5rem}.menuLabel{flex:1;text-align:left}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3$4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartNavbarComponent, selector: "smart-navbar", inputs: { smartNavbar: "smartNavbar" }, viewQueries: [{ propertyName: "formComp", first: true, predicate: ["searchOption"], descendants: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <img\r\n    *ngIf=\"smartNavbar.icon\"\r\n    class=\"title\"\r\n    src=\"{{ smartNavbar.icon }}\"\r\n    alt=\"\"\r\n    (click)=\"onIconClick()\"\r\n  />\r\n  <ng-content select=\"[titleComponent]\" class=\"title\"></ng-content>\r\n  <div *ngIf=\"smartNavbar.searchBar\" class=\"input\">\r\n    <input\r\n      type=\"text\"\r\n      placeholder=\"{{ smartNavbar.searchBar.placeholder }}\"\r\n      [(ngModel)]=\"searchText\"\r\n    />\r\n    <div\r\n      *ngIf=\"smartNavbar.searchBar.quickFilterLabel && smartNavbar.searchBar.quickFilters.length\"\r\n      class=\"drop_down_btn\"\r\n    >\r\n      <smartform #searchOption [smartForm]=\"filterForm\"></smartform>\r\n      <button\r\n        class=\"search_icon\"\r\n        *ngIf=\"smartNavbar.searchBar.icon\"\r\n        mat-icon-button\r\n        (click)=\"onSearchButtonClick()\"\r\n      >\r\n        <mat-icon class=\"search_icon\">{{ smartNavbar.searchBar.icon }}</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <button\r\n    *ngIf=\"smartNavbar.filterButtonCallback\"\r\n    mat-raised-button\r\n    color=\"primary\"\r\n    class=\"filter-btn\"\r\n    (click)=\"openFilters()\"\r\n  >\r\n    <div #customFilter class=\"custom-filter-holder\">\r\n      <ng-content select=\"[filterComponent]\"></ng-content>\r\n    </div>\r\n    <ng-container *ngIf=\"!customFilter.hasChildNodes()\">\r\n      <mat-icon>filter_list</mat-icon> {{ smartNavbar.filterButtonLabel }}\r\n    </ng-container>\r\n  </button>\r\n  <div *ngIf=\"smartNavbar.userSettings\" class=\"account-content\">\r\n    <button\r\n      mat-button\r\n      *ngIf=\"smartNavbar?.notification\"\r\n      [color]=\"smartNavbar.notification?.iconColor\"\r\n      (click)=\"onNotificationClick()\"\r\n      class=\"notification-btn\"\r\n    >\r\n      <mat-icon>\r\n        {{ smartNavbar.notification?.icon }}\r\n      </mat-icon>\r\n    </button>\r\n    <button mat-button color=\"primary\" [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"smartNavbar.userSettings.icon\">\r\n        {{ smartNavbar.userSettings.icon }}\r\n      </mat-icon>\r\n      <mat-icon *ngIf=\"!smartNavbar.userSettings.icon\"> person_outline </mat-icon>\r\n      {{ smartNavbar.userSettings.label }}\r\n      <mat-icon>arrow_drop_down</mat-icon>\r\n    </button>\r\n    <mat-menu #menu=\"matMenu\">\r\n      <button\r\n        mat-menu-item\r\n        *ngFor=\"let btn of smartNavbar.userSettings.settings\"\r\n        (click)=\"btn.callback()\"\r\n        class=\"menuButton\"\r\n      >\r\n        <mat-icon class=\"menuIcon\" *ngIf=\"btn.icon && btn.iconPosition === buttonPosition().FRONT\">\r\n          {{ btn.icon }}\r\n        </mat-icon>\r\n        <div class=\"menuLabel\">\r\n          {{ btn.label }}\r\n        </div>\r\n        <mat-icon class=\"menuIcon\" *ngIf=\"btn.icon && btn.iconPosition === buttonPosition().POST\">\r\n          {{ btn.icon }}\r\n        </mat-icon>\r\n      </button>\r\n    </mat-menu>\r\n  </div>\r\n</mat-toolbar>\r\n", styles: [".filter-btn{margin-left:20px}input[type=text]{flex:1;background:#fff;height:40px;border:none;outline:none;padding:0 25px;border-radius:25px 0 0 25px}.drop_down_btn{position:relative;left:-5;border-radius:0 25px 25px 0;height:40px;border:none;outline:none;cursor:pointer;background:#fff;color:#00a8da;display:flex;align-items:center;padding-right:20px}.input{flex:1;position:relative;font-size:20px;display:flex;flex-direction:row;align-items:center;padding-left:30px}mat-toolbar{height:var(--navbar-height)}::ng-deep .navbar-form .mat-form-field-appearance-outline .mat-form-field-outline,::ng-deep .navbar-form .mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-form-field-flex:hover .mat-form-field-outline,::ng-deep .navbar-form .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline{opacity:.75!important;color:#fff}.account-content{margin-left:75px}.title{margin-right:75px}.account-content>*{margin-left:30px}.account-content>*:first-child{margin-left:0}.custom-filter-holder{display:flex;align-items:center}.menuButton{display:flex;flex-direction:row;gap:.5rem}.menuLabel{flex:1;text-align:left}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3$5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartNavbarComponent, decorators: [{
             type: Component,
@@ -15049,7 +15070,7 @@ class TabGroupComponent {
         return undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TabGroupComponent, deps: [{ token: SmartNavigationService }, { token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: TabGroupComponent, selector: "smart-tab-group", inputs: { tabTiles: "tabTiles", handlers: "handlers" }, ngImport: i0, template: "<div class=\"sm-tab-group-container\">\r\n    <mat-tab-group\r\n        class=\"sm-tab-group\"\r\n        (selectedTabChange)=\"navigateTabContent($event)\"\r\n        [(selectedIndex)]=\"selectedTabIndex\"\r\n    >\r\n        <mat-tab\r\n            class=\"sm-tab\"\r\n            appearance=\"outline\"\r\n            *ngFor=\"let tabTile of tabTiles\"\r\n            label=\"{{ tabTile.tileName }}\"\r\n        >\r\n            <ng-template mat-tab-label *ngIf=\"tabTile.extra\">\r\n                <span class=\"row\"\r\n                    >{{ tabTile.tileName }}\r\n                    <div\r\n                        [ngClass]=\"\r\n                            tabTile.extra ? 'sm-tab-notification' : 'sm-tab-notification-none'\r\n                        \"\r\n                    >\r\n                        {{ tabTile.extra }}\r\n                    </div></span\r\n                >\r\n            </ng-template>\r\n        </mat-tab>\r\n    </mat-tab-group>\r\n    <div class=\"sm-tab-content-container\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n", styles: [".sm-tab-group-container{margin:50px}.sm-tab-group ::ng-deep .mat-tab-label{background-color:#f9fafb;margin-left:10px;border-radius:10px;opacity:100!important}.mat-tab-body-content{border-radius:10px}.mat-mdc-tab-nav-bar,.mat-mdc-tab-header{border-bottom:0}.tab-content-container{padding:2em;border:1px solid #e6e6e6;box-shadow:0 4px 8px -4px #1a1a1a33;border-radius:4px;background-color:#fff}.mat-tab-label-active{background-color:#00a8da!important;opacity:1!important}.sm-tab-notification-none{display:none}.sm-tab-notification{background-color:red;width:20px;height:20px;border-radius:50%;color:#ff0}.sm-tab-group-container ::ng-deep .mat-tab-label-content{width:50%}.row{display:flex;flex-direction:row;width:100%;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$4.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i4$4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i4$4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: TabGroupComponent, selector: "smart-tab-group", inputs: { tabTiles: "tabTiles", handlers: "handlers" }, ngImport: i0, template: "<div class=\"sm-tab-group-container\">\r\n    <mat-tab-group\r\n        class=\"sm-tab-group\"\r\n        (selectedTabChange)=\"navigateTabContent($event)\"\r\n        [(selectedIndex)]=\"selectedTabIndex\"\r\n    >\r\n        <mat-tab\r\n            class=\"sm-tab\"\r\n            appearance=\"outline\"\r\n            *ngFor=\"let tabTile of tabTiles\"\r\n            label=\"{{ tabTile.tileName }}\"\r\n        >\r\n            <ng-template mat-tab-label *ngIf=\"tabTile.extra\">\r\n                <span class=\"row\"\r\n                    >{{ tabTile.tileName }}\r\n                    <div\r\n                        [ngClass]=\"\r\n                            tabTile.extra ? 'sm-tab-notification' : 'sm-tab-notification-none'\r\n                        \"\r\n                    >\r\n                        {{ tabTile.extra }}\r\n                    </div></span\r\n                >\r\n            </ng-template>\r\n        </mat-tab>\r\n    </mat-tab-group>\r\n    <div class=\"sm-tab-content-container\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n", styles: [".sm-tab-group-container{margin:50px}.sm-tab-group ::ng-deep .mat-tab-label{background-color:#f9fafb;margin-left:10px;border-radius:10px;opacity:100!important}.mat-tab-body-content{border-radius:10px}.mat-mdc-tab-nav-bar,.mat-mdc-tab-header{border-bottom:0}.tab-content-container{padding:2em;border:1px solid #e6e6e6;box-shadow:0 4px 8px -4px #1a1a1a33;border-radius:4px;background-color:#fff}.mat-tab-label-active{background-color:#00a8da!important;opacity:1!important}.sm-tab-notification-none{display:none}.sm-tab-notification{background-color:red;width:20px;height:20px;border-radius:50%;color:#ff0}.sm-tab-group-container ::ng-deep .mat-tab-label-content{width:50%}.row{display:flex;flex-direction:row;width:100%;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i4$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i4$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TabGroupComponent, decorators: [{
             type: Component,
@@ -15133,7 +15154,7 @@ class SimplifiedTabGroupComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SimplifiedTabGroupComponent, deps: [{ token: ComponentFactoryService }, { token: SmartNavigationService }, { token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SimplifiedTabGroupComponent, selector: "smart-simplified-tab-group", inputs: { tabGroupData: "tabGroupData", animationDuration: "animationDuration" }, viewQueries: [{ propertyName: "vcRefTabContentChildren", predicate: ["tabContent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"sm-tab-group-container\">\r\n\t<mat-tab-group\r\n\t\tclass=\"sm-tab-group\"\r\n\t\tmat-stretch-tab=\"false\"\r\n\t\tmat-align-tabs=\"start\"\r\n\t\t[selectedIndex]=\"selectedIndex\"\r\n\t\t(selectedIndexChange)=\"changeSelectedTab($event)\"\r\n\t\t[animationDuration]=\"0\"\r\n\t>\r\n\t\t<mat-tab class=\"sm-tab\" appearance=\"outline\" *ngFor=\"let tab of tabGroupData\" [label]=\"tab.label\">\r\n\t\t\t<ng-template #tabContent></ng-template>\r\n\t\t</mat-tab>\r\n\t</mat-tab-group>\r\n</div>\r\n", styles: [".sm-tab-group-container{margin:50px}.sm-tab-group ::ng-deep .mat-tab-label{background-color:#f9fafb;margin-left:10px;border-radius:10px;opacity:100!important}.mat-tab-body-content{border-radius:10px}.mat-mdc-tab-nav-bar,.mat-mdc-tab-header{border-bottom:0}.tab-content-container{padding:2em;border:1px solid #e6e6e6;box-shadow:0 4px 8px -4px #1a1a1a33;border-radius:4px;background-color:#fff}.mat-tab-label-active{background-color:#00a8da!important;opacity:1!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4$4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i4$4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SimplifiedTabGroupComponent, selector: "smart-simplified-tab-group", inputs: { tabGroupData: "tabGroupData", animationDuration: "animationDuration" }, viewQueries: [{ propertyName: "vcRefTabContentChildren", predicate: ["tabContent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"sm-tab-group-container\">\r\n\t<mat-tab-group\r\n\t\tclass=\"sm-tab-group\"\r\n\t\tmat-stretch-tab=\"false\"\r\n\t\tmat-align-tabs=\"start\"\r\n\t\t[selectedIndex]=\"selectedIndex\"\r\n\t\t(selectedIndexChange)=\"changeSelectedTab($event)\"\r\n\t\t[animationDuration]=\"0\"\r\n\t>\r\n\t\t<mat-tab class=\"sm-tab\" appearance=\"outline\" *ngFor=\"let tab of tabGroupData\" [label]=\"tab.label\">\r\n\t\t\t<ng-template #tabContent></ng-template>\r\n\t\t</mat-tab>\r\n\t</mat-tab-group>\r\n</div>\r\n", styles: [".sm-tab-group-container{margin:50px}.sm-tab-group ::ng-deep .mat-tab-label{background-color:#f9fafb;margin-left:10px;border-radius:10px;opacity:100!important}.mat-tab-body-content{border-radius:10px}.mat-mdc-tab-nav-bar,.mat-mdc-tab-header{border-bottom:0}.tab-content-container{padding:2em;border:1px solid #e6e6e6;box-shadow:0 4px 8px -4px #1a1a1a33;border-radius:4px;background-color:#fff}.mat-tab-label-active{background-color:#00a8da!important;opacity:1!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i4$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SimplifiedTabGroupComponent, decorators: [{
             type: Component,