@smartbit4all/ng-client 6.0.55 → 6.0.57

package/fesm2022/smartbit4all-ng-client.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject, PLATFORM_ID, NgModule, SkipSelf, RendererStyleFlags2, Directive, Input, HostBinding, HostListener, input, computed, Component, EventEmitter, Output, signal, ViewChildren, ViewChild, ElementRef, forwardRef, Pipe, ViewContainerRef, ViewEncapsulation, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, output, effect, inject, ApplicationRef, viewChild, ChangeDetectorRef } from '@angular/core';
+import { InjectionToken, Injectable, Optional, Inject, PLATFORM_ID, NgModule, SkipSelf, RendererStyleFlags2, Directive, Input, HostBinding, HostListener, input, computed, Component, EventEmitter, Output, signal, ViewChildren, ViewChild, ElementRef, forwardRef, Pipe, ViewContainerRef, ViewEncapsulation, ChangeDetectionStrategy, inject, ChangeDetectorRef, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, output, effect, ApplicationRef, viewChild } from '@angular/core';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpContext, HttpErrorResponse, HttpParams, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { Subject, lastValueFrom, take, tap, takeUntil, interval, startWith, map, distinctUntilChanged, catchError, throwError, from } from 'rxjs';
@@ -104,7 +104,7 @@ import * as i5$1 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import * as i1$7 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { trigger, state, style, transition, animate } from '@angular/animations';
+import { trigger, transition, query, style, animate } from '@angular/animations';
 import * as i6 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
 import { BadgeModule } from 'primeng/badge';
@@ -7547,7 +7547,7 @@ class SmartfileuploaderComponent {
             this.files = [validFiles[0]];
         }
         if (this.autoUpload && this.errors.length == 0) {
-            this.uploadFile();
+            this.uploadFile(null);
         }
     }
     getFile(event) {
@@ -7589,7 +7589,10 @@ class SmartfileuploaderComponent {
     remove(index) {
         this.files.splice(index, 1);
     }
-    uploadFile() {
+    uploadFile(event) {
+        if (event && event.event) {
+            event.event.stopPropagation();
+        }
         this.uploadCallback(this.files);
     }
     formatSize(bytes) {
@@ -7649,11 +7652,11 @@ class SmartfileuploaderComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartfileuploaderComponent, deps: [{ token: i1$4.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartfileuploaderComponent, selector: "smartfileuploader", inputs: { uploadCallback: "uploadCallback", fileFormats: "fileFormats", maxSizeMb: "maxSizeMb", i18n: "i18n", useIconButton: "useIconButton", isMultiple: "isMultiple", autoUpload: "autoUpload", isDisabled: "isDisabled" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"container\"\n  [ngClass]=\"{ disabledWidget: isDisabled }\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.dragover]=\"isDragOver\"\n>\n  <div class=\"fileContainer\" (click)=\"fileInput.click()\">\n    <input\n      #fileInput\n      id=\"addFile\"\n      placeholder=\"fileInput\"\n      type=\"file\"\n      (change)=\"getFile($event)\"\n      class=\"file\"\n      accept=\"{{ fileFormats?.join(', ') }}\"\n      [size]=\"maxSizeMb\"\n      [multiple]=\"isMultiple\"\n      [disabled]=\"isDisabled\"\n      style=\"display: none\"\n    />\n    <div class=\"fileUploadContentContainer\">\n      <div class=\"icon\">\n        <mat-label *ngIf=\"useIconButton\" class=\"addFileButton\">\n          <mat-icon color=\"primary\" class=\"addCircle\">add_circle</mat-icon>\n        </mat-label>\n        <button *ngIf=\"!useIconButton\" mat-raised-button color=\"primary\" class=\"addFileButton\">\n          {{ i18n!.addFile }}\n        </button>\n      </div>\n      <div class=\"labels\">\n        <mat-label *ngIf=\"useIconButton\" class=\"label primary title\">\n          {{ i18n!.addFile }}\n        </mat-label>\n        <mat-label class=\"label secondary\"> {{ i18n!.browseOrDrag }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.maxSize }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.formats }} </mat-label>\n      </div>\n      <div class=\"uploadButton\" *ngIf=\"files.length\">\n        <ui-action-button\n          (actionClick)=\"uploadFile()\"\n          [code]=\"'default-upload'\"\n          [descriptor]=\"uploadButton\"\n        >\n        </ui-action-button>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"errors.length\" class=\"errorMessage\">\n    <smart-icon [icon]=\"'error'\" [color]=\"'warn'\"></smart-icon>\n    <div class=\"errors\">\n      <span *ngFor=\"let error of errors\">{{ error }}</span>\n    </div>\n  </div>\n\n  <div *ngIf=\"files.length\" class=\"uploadedFilesContainer\">\n    <div *ngFor=\"let file of files; let i = index\" class=\"uploadedFile\">\n      <ng-container *ngIf=\"filePreviewUrl(file); else fileIcon\">\n        <img [src]=\"filePreviewUrl(file)\" [alt]=\"file.name\" width=\"50\" height=\"50\" />\n      </ng-container>\n      <ng-template #fileIcon>\n        <smart-icon [icon]=\"'insert_drive_file'\"></smart-icon>\n      </ng-template>\n\n      <div class=\"fileData\">\n        <div class=\"fileDataContainer\">\n          <span class=\"fileName\">{{ file.name }}</span>\n          <span class=\"fileSize\">{{ formatSize(file.size) }}</span>\n        </div>\n      </div>\n\n      <div class=\"fileActions\">\n        <smart-icon\n          class=\"downloadIcon\"\n          icon=\"download\"\n          (click)=\"downloadFile(file)\"\n          [attr.data-testid]=\"'default_download'\"\n        ></smart-icon>\n        <smart-icon\n          class=\"removeIcon\"\n          icon=\"delete\"\n          [attr.data-testid]=\"'default_remove'\"\n          (click)=\"remove(i)\"\n        ></smart-icon>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem}.container{display:flex;flex-direction:column;border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileContainer{cursor:pointer;padding:1rem;display:flex;flex-direction:column}.fileContainer:hover{background-color:rgb(from var(--border-color) r g b / .1)}.disabledWidget ::ng-deep .fileContainer:hover{background-color:unset;cursor:unset}.disabledWidget ::ng-deep *{opacity:.85}.dragover{background-color:rgb(from var(--border-color) r g b / .1)}.fileUploadContentContainer{display:flex;flex-direction:row;gap:1rem}.icon mat-icon{font-size:3rem;width:unset;height:unset}.icon{align-content:center}.labels{flex:1;display:flex;flex-direction:column;justify-content:center;width:fit-content}.uploadButton{align-content:center}.primary{color:var(--primary-color)}.secondary{color:var(--gray)}.label{margin:unset}.subLabel{font-size:smaller}.title{padding-bottom:.3rem}.errorMessage,.uploadedFilesContainer{border-top:2px solid var(--border-color)}.errorMessage{display:flex;flex-direction:row;align-items:center;color:var(--warninig-color);padding:.5rem 1rem;gap:1rem}.errorMessage ::ng-deep mat-icon{color:var(--warninig-color)}.errors{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;gap:1rem}.uploadedFile:last-child{border-bottom:none}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep .pi{width:unset!important}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}.removeIcon ::ng-deep .pi,.downloadIcon ::ng-deep .pi{font-size:1.5rem!important}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "directive", type: i11.MatLabel, selector: "mat-label" }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartfileuploaderComponent, selector: "smartfileuploader", inputs: { uploadCallback: "uploadCallback", fileFormats: "fileFormats", maxSizeMb: "maxSizeMb", i18n: "i18n", useIconButton: "useIconButton", isMultiple: "isMultiple", autoUpload: "autoUpload", isDisabled: "isDisabled" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"container\"\n  [ngClass]=\"{ disabledWidget: isDisabled }\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.dragover]=\"isDragOver\"\n>\n  <div class=\"fileContainer\" (click)=\"fileInput.click()\">\n    <input\n      #fileInput\n      id=\"addFile\"\n      placeholder=\"fileInput\"\n      type=\"file\"\n      (change)=\"getFile($event)\"\n      class=\"file\"\n      accept=\"{{ fileFormats?.join(', ') }}\"\n      [size]=\"maxSizeMb\"\n      [multiple]=\"isMultiple\"\n      [disabled]=\"isDisabled\"\n      style=\"display: none\"\n    />\n    <div class=\"fileUploadContentContainer\">\n      <div class=\"icon\">\n        <mat-label *ngIf=\"useIconButton\" class=\"addFileButton\">\n          <mat-icon color=\"primary\" class=\"addCircle\">add_circle</mat-icon>\n        </mat-label>\n        <button *ngIf=\"!useIconButton\" mat-raised-button color=\"primary\" class=\"addFileButton\">\n          {{ i18n!.addFile }}\n        </button>\n      </div>\n      <div class=\"labels\">\n        <mat-label *ngIf=\"useIconButton\" class=\"label primary title\">\n          {{ i18n!.addFile }}\n        </mat-label>\n        <mat-label class=\"label secondary\"> {{ i18n!.browseOrDrag }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.maxSize }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.formats }} </mat-label>\n      </div>\n      <div class=\"uploadButton\" *ngIf=\"files.length\">\n        <ui-action-button\n          (actionClick)=\"uploadFile($event)\"\n          [code]=\"'default-upload'\"\n          [descriptor]=\"uploadButton\"\n        >\n        </ui-action-button>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"errors.length\" class=\"errorMessage\">\n    <smart-icon [icon]=\"'error'\" [color]=\"'warn'\"></smart-icon>\n    <div class=\"errors\">\n      <span *ngFor=\"let error of errors\">{{ error }}</span>\n    </div>\n  </div>\n\n  <div *ngIf=\"files.length\" class=\"uploadedFilesContainer\">\n    <div *ngFor=\"let file of files; let i = index\" class=\"uploadedFile\">\n      <ng-container *ngIf=\"filePreviewUrl(file); else fileIcon\">\n        <img [src]=\"filePreviewUrl(file)\" [alt]=\"file.name\" width=\"50\" height=\"50\" />\n      </ng-container>\n      <ng-template #fileIcon>\n        <smart-icon [icon]=\"'insert_drive_file'\"></smart-icon>\n      </ng-template>\n\n      <div class=\"fileData\">\n        <div class=\"fileDataContainer\">\n          <span class=\"fileName\">{{ file.name }}</span>\n          <span class=\"fileSize\">{{ formatSize(file.size) }}</span>\n        </div>\n      </div>\n\n      <div class=\"fileActions\">\n        <smart-icon\n          class=\"downloadIcon\"\n          icon=\"download\"\n          (click)=\"downloadFile(file)\"\n          [attr.data-testid]=\"'default_download'\"\n        ></smart-icon>\n        <smart-icon\n          class=\"removeIcon\"\n          icon=\"delete\"\n          [attr.data-testid]=\"'default_remove'\"\n          (click)=\"remove(i)\"\n        ></smart-icon>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem}.container{display:flex;flex-direction:column;border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileContainer{cursor:pointer;padding:1rem;display:flex;flex-direction:column}.fileContainer:hover{background-color:rgb(from var(--border-color) r g b / .1)}.disabledWidget ::ng-deep .fileContainer:hover{background-color:unset;cursor:unset}.disabledWidget ::ng-deep *{opacity:.85}.dragover{background-color:rgb(from var(--border-color) r g b / .1)}.fileUploadContentContainer{display:flex;flex-direction:row;gap:1rem}.icon mat-icon{font-size:3rem;width:unset;height:unset}.icon{align-content:center}.labels{flex:1;display:flex;flex-direction:column;justify-content:center;width:fit-content}.uploadButton{align-content:center}.primary{color:var(--primary-color)}.secondary{color:var(--gray)}.label{margin:unset}.subLabel{font-size:smaller}.title{padding-bottom:.3rem}.errorMessage,.uploadedFilesContainer{border-top:2px solid var(--border-color)}.errorMessage{display:flex;flex-direction:row;align-items:center;color:var(--warninig-color);padding:.5rem 1rem;gap:1rem}.errorMessage ::ng-deep mat-icon{color:var(--warninig-color)}.errors{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;gap:1rem}.uploadedFile:last-child{border-bottom:none}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep .pi{width:unset!important}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}.removeIcon ::ng-deep .pi,.downloadIcon ::ng-deep .pi{font-size:1.5rem!important}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "directive", type: i11.MatLabel, selector: "mat-label" }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartfileuploaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smartfileuploader', template: "<div\n  class=\"container\"\n  [ngClass]=\"{ disabledWidget: isDisabled }\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.dragover]=\"isDragOver\"\n>\n  <div class=\"fileContainer\" (click)=\"fileInput.click()\">\n    <input\n      #fileInput\n      id=\"addFile\"\n      placeholder=\"fileInput\"\n      type=\"file\"\n      (change)=\"getFile($event)\"\n      class=\"file\"\n      accept=\"{{ fileFormats?.join(', ') }}\"\n      [size]=\"maxSizeMb\"\n      [multiple]=\"isMultiple\"\n      [disabled]=\"isDisabled\"\n      style=\"display: none\"\n    />\n    <div class=\"fileUploadContentContainer\">\n      <div class=\"icon\">\n        <mat-label *ngIf=\"useIconButton\" class=\"addFileButton\">\n          <mat-icon color=\"primary\" class=\"addCircle\">add_circle</mat-icon>\n        </mat-label>\n        <button *ngIf=\"!useIconButton\" mat-raised-button color=\"primary\" class=\"addFileButton\">\n          {{ i18n!.addFile }}\n        </button>\n      </div>\n      <div class=\"labels\">\n        <mat-label *ngIf=\"useIconButton\" class=\"label primary title\">\n          {{ i18n!.addFile }}\n        </mat-label>\n        <mat-label class=\"label secondary\"> {{ i18n!.browseOrDrag }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.maxSize }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.formats }} </mat-label>\n      </div>\n      <div class=\"uploadButton\" *ngIf=\"files.length\">\n        <ui-action-button\n          (actionClick)=\"uploadFile()\"\n          [code]=\"'default-upload'\"\n          [descriptor]=\"uploadButton\"\n        >\n        </ui-action-button>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"errors.length\" class=\"errorMessage\">\n    <smart-icon [icon]=\"'error'\" [color]=\"'warn'\"></smart-icon>\n    <div class=\"errors\">\n      <span *ngFor=\"let error of errors\">{{ error }}</span>\n    </div>\n  </div>\n\n  <div *ngIf=\"files.length\" class=\"uploadedFilesContainer\">\n    <div *ngFor=\"let file of files; let i = index\" class=\"uploadedFile\">\n      <ng-container *ngIf=\"filePreviewUrl(file); else fileIcon\">\n        <img [src]=\"filePreviewUrl(file)\" [alt]=\"file.name\" width=\"50\" height=\"50\" />\n      </ng-container>\n      <ng-template #fileIcon>\n        <smart-icon [icon]=\"'insert_drive_file'\"></smart-icon>\n      </ng-template>\n\n      <div class=\"fileData\">\n        <div class=\"fileDataContainer\">\n          <span class=\"fileName\">{{ file.name }}</span>\n          <span class=\"fileSize\">{{ formatSize(file.size) }}</span>\n        </div>\n      </div>\n\n      <div class=\"fileActions\">\n        <smart-icon\n          class=\"downloadIcon\"\n          icon=\"download\"\n          (click)=\"downloadFile(file)\"\n          [attr.data-testid]=\"'default_download'\"\n        ></smart-icon>\n        <smart-icon\n          class=\"removeIcon\"\n          icon=\"delete\"\n          [attr.data-testid]=\"'default_remove'\"\n          (click)=\"remove(i)\"\n        ></smart-icon>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem}.container{display:flex;flex-direction:column;border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileContainer{cursor:pointer;padding:1rem;display:flex;flex-direction:column}.fileContainer:hover{background-color:rgb(from var(--border-color) r g b / .1)}.disabledWidget ::ng-deep .fileContainer:hover{background-color:unset;cursor:unset}.disabledWidget ::ng-deep *{opacity:.85}.dragover{background-color:rgb(from var(--border-color) r g b / .1)}.fileUploadContentContainer{display:flex;flex-direction:row;gap:1rem}.icon mat-icon{font-size:3rem;width:unset;height:unset}.icon{align-content:center}.labels{flex:1;display:flex;flex-direction:column;justify-content:center;width:fit-content}.uploadButton{align-content:center}.primary{color:var(--primary-color)}.secondary{color:var(--gray)}.label{margin:unset}.subLabel{font-size:smaller}.title{padding-bottom:.3rem}.errorMessage,.uploadedFilesContainer{border-top:2px solid var(--border-color)}.errorMessage{display:flex;flex-direction:row;align-items:center;color:var(--warninig-color);padding:.5rem 1rem;gap:1rem}.errorMessage ::ng-deep mat-icon{color:var(--warninig-color)}.errors{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;gap:1rem}.uploadedFile:last-child{border-bottom:none}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep .pi{width:unset!important}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}.removeIcon ::ng-deep .pi,.downloadIcon ::ng-deep .pi{font-size:1.5rem!important}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}\n"] }]
+            args: [{ selector: 'smartfileuploader', template: "<div\n  class=\"container\"\n  [ngClass]=\"{ disabledWidget: isDisabled }\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.dragover]=\"isDragOver\"\n>\n  <div class=\"fileContainer\" (click)=\"fileInput.click()\">\n    <input\n      #fileInput\n      id=\"addFile\"\n      placeholder=\"fileInput\"\n      type=\"file\"\n      (change)=\"getFile($event)\"\n      class=\"file\"\n      accept=\"{{ fileFormats?.join(', ') }}\"\n      [size]=\"maxSizeMb\"\n      [multiple]=\"isMultiple\"\n      [disabled]=\"isDisabled\"\n      style=\"display: none\"\n    />\n    <div class=\"fileUploadContentContainer\">\n      <div class=\"icon\">\n        <mat-label *ngIf=\"useIconButton\" class=\"addFileButton\">\n          <mat-icon color=\"primary\" class=\"addCircle\">add_circle</mat-icon>\n        </mat-label>\n        <button *ngIf=\"!useIconButton\" mat-raised-button color=\"primary\" class=\"addFileButton\">\n          {{ i18n!.addFile }}\n        </button>\n      </div>\n      <div class=\"labels\">\n        <mat-label *ngIf=\"useIconButton\" class=\"label primary title\">\n          {{ i18n!.addFile }}\n        </mat-label>\n        <mat-label class=\"label secondary\"> {{ i18n!.browseOrDrag }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.maxSize }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.formats }} </mat-label>\n      </div>\n      <div class=\"uploadButton\" *ngIf=\"files.length\">\n        <ui-action-button\n          (actionClick)=\"uploadFile($event)\"\n          [code]=\"'default-upload'\"\n          [descriptor]=\"uploadButton\"\n        >\n        </ui-action-button>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"errors.length\" class=\"errorMessage\">\n    <smart-icon [icon]=\"'error'\" [color]=\"'warn'\"></smart-icon>\n    <div class=\"errors\">\n      <span *ngFor=\"let error of errors\">{{ error }}</span>\n    </div>\n  </div>\n\n  <div *ngIf=\"files.length\" class=\"uploadedFilesContainer\">\n    <div *ngFor=\"let file of files; let i = index\" class=\"uploadedFile\">\n      <ng-container *ngIf=\"filePreviewUrl(file); else fileIcon\">\n        <img [src]=\"filePreviewUrl(file)\" [alt]=\"file.name\" width=\"50\" height=\"50\" />\n      </ng-container>\n      <ng-template #fileIcon>\n        <smart-icon [icon]=\"'insert_drive_file'\"></smart-icon>\n      </ng-template>\n\n      <div class=\"fileData\">\n        <div class=\"fileDataContainer\">\n          <span class=\"fileName\">{{ file.name }}</span>\n          <span class=\"fileSize\">{{ formatSize(file.size) }}</span>\n        </div>\n      </div>\n\n      <div class=\"fileActions\">\n        <smart-icon\n          class=\"downloadIcon\"\n          icon=\"download\"\n          (click)=\"downloadFile(file)\"\n          [attr.data-testid]=\"'default_download'\"\n        ></smart-icon>\n        <smart-icon\n          class=\"removeIcon\"\n          icon=\"delete\"\n          [attr.data-testid]=\"'default_remove'\"\n          (click)=\"remove(i)\"\n        ></smart-icon>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem}.container{display:flex;flex-direction:column;border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileContainer{cursor:pointer;padding:1rem;display:flex;flex-direction:column}.fileContainer:hover{background-color:rgb(from var(--border-color) r g b / .1)}.disabledWidget ::ng-deep .fileContainer:hover{background-color:unset;cursor:unset}.disabledWidget ::ng-deep *{opacity:.85}.dragover{background-color:rgb(from var(--border-color) r g b / .1)}.fileUploadContentContainer{display:flex;flex-direction:row;gap:1rem}.icon mat-icon{font-size:3rem;width:unset;height:unset}.icon{align-content:center}.labels{flex:1;display:flex;flex-direction:column;justify-content:center;width:fit-content}.uploadButton{align-content:center}.primary{color:var(--primary-color)}.secondary{color:var(--gray)}.label{margin:unset}.subLabel{font-size:smaller}.title{padding-bottom:.3rem}.errorMessage,.uploadedFilesContainer{border-top:2px solid var(--border-color)}.errorMessage{display:flex;flex-direction:row;align-items:center;color:var(--warninig-color);padding:.5rem 1rem;gap:1rem}.errorMessage ::ng-deep mat-icon{color:var(--warninig-color)}.errors{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;gap:1rem}.uploadedFile:last-child{border-bottom:none}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep .pi{width:unset!important}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}.removeIcon ::ng-deep .pi,.downloadIcon ::ng-deep .pi{font-size:1.5rem!important}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}\n"] }]
         }], ctorParameters: () => [{ type: i1$4.MatSnackBar }], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
@@ -11454,11 +11457,14 @@ class SmartGridToolbarActionsUtil {
 class Table {
     constructor(cfService) {
         this.cfService = cfService;
+        this.changeDetector = inject(ChangeDetectorRef);
         this._destroy$ = new Subject();
         this.tableType = SmartTableType;
         this.smartTableButtonType = SmartTableButtonType;
         this.highlightedRows = [];
         this.sortEvent = new Subject();
+        /** The `when` predicate of the detail row definition. */
+        this.isExpandedRow = (_index, row) => row === this.expandedElement;
         // Cells to UiAction models, used for toolbars in cells
         this.cellToActionMap = {};
         this.onSelectionChanged = new Subject();
@@ -11826,24 +11832,27 @@ class Table {
         if (event) {
             event?.stopPropagation();
         }
-        let oldIndex = this.smartTable.tableRows.findIndex((element) => element === this.expandedElement);
-        if (oldIndex !== -1) {
-            let ref = this.vcRef.filter((element, index) => index === oldIndex);
-            ref[0].clear();
-        }
         this.expandedElement = this.expandedElement === element ? null : element;
-        let newIndex = this.smartTable.tableRows.findIndex((element) => element === this.expandedElement);
+        // The row definitions are re-evaluated on render only: this drops the old detail row
+        // (and the component in it) and creates the new one, then the query picks it up.
+        this.myTableChild.renderRows();
+        this.changeDetector.detectChanges();
+        if (!this.expandedElement) {
+            return;
+        }
+        const container = this.vcRef.first;
         let rowDataResponse;
-        if (newIndex !== -1) {
-            if (this.smartTable.asyncOnExpand) {
-                this.componentRef = this.cfService.createComponent(this.vcRef?.filter((element, index) => index === newIndex)[0], LoadingComponent, new Map());
-                rowDataResponse = await this.smartTable.rowExpander?.expandAsync(newIndex);
-                let ref = this.vcRef.filter((element, index) => index === newIndex)[0];
-                ref.clear();
+        if (this.smartTable.asyncOnExpand) {
+            this.componentRef = this.cfService.createComponent(container, LoadingComponent, new Map());
+            rowDataResponse = await this.smartTable.rowExpander?.expandAsync(this.smartTable.tableRows.indexOf(element));
+            // Another toggle while loading has already replaced this row's detail row.
+            if (this.expandedElement !== element) {
+                return;
             }
-            this.componentRef = this.cfService.createComponent(this.vcRef?.filter((element, index) => index === newIndex)[0], this.smartTable.expandedComponent, new Map([['rowData', rowDataResponse]]));
-            this.element = undefined;
+            container.clear();
         }
+        this.componentRef = this.cfService.createComponent(container, this.smartTable.expandedComponent, new Map([['rowData', rowDataResponse]]));
+        this.element = undefined;
     }
     setSelection(element) {
         if (this.smartTable.maxNumOfSelectableRows &&
@@ -12071,23 +12080,49 @@ class MaterialTableComponent extends Table {
         super(cfService);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MaterialTableComponent, deps: [{ token: ComponentFactoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: MaterialTableComponent, selector: "lib-material-table", usesInheritance: true, ngImport: i0, template: "<table\n  #myTable\n  mat-table\n  [dataSource]=\"smartTable.tableRows\"\n  class=\"full-width\"\n  multiTemplateDataRows\n>\n  <!-- Column Descriptor -->\n  @if (smartTable.title) {\n    <caption *ngIf=\"smartTable.title\" class=\"captionTitle\">\n      {{ smartTable.title }}\n    </caption>\n  }\n  <ng-container\n    *ngFor=\"let header of smartTable.tableHeaders; let i = index\"\n    matColumnDef=\"{{ header }}\"\n  >\n    <!-- my_menu is the implicit action column present on all tables: -->\n    @if ('my_menu' === header) {\n      <th\n        mat-header-cell\n        *matHeaderCellDef\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n      >\n        <smart-ui-action-toolbar\n          #headerToolbar\n          [id]=\"\n            smartTable.getGridId()\n              ? smartTable.getGridId() + '_headerToolbar'\n              : 'grid_not_initialized'\n          \"\n        >\n        </smart-ui-action-toolbar>\n      </th>\n    } @else {\n      <th\n        mat-header-cell\n        *matHeaderCellDef\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n      >\n        <div\n          *ngIf=\"\n            header === 'icon' || header === 'img' || header === 'options' || header === 'button'\n          \"\n        ></div>\n        <div *ngIf=\"header === 'select'\">\n          <mat-checkbox\n            *ngIf=\"smartTable.customSmartTableHeaders![i].showCheckboxInHeader\"\n            (change)=\"$event ? toggleAllRows() : null\"\n            [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\n            [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\"\n            [aria-label]=\"checkboxLabel()\"\n          >\n          </mat-checkbox>\n          <div *ngIf=\"!smartTable.customSmartTableHeaders![i].showCheckboxInHeader\">\n            {{ smartTable.customTableHeaders[i] }}\n          </div>\n        </div>\n        <div\n          *ngIf=\"\n            header !== 'icon' &&\n            header !== 'img' &&\n            header !== 'options' &&\n            header !== 'button' &&\n            header !== 'select' &&\n            header !== 'expand' &&\n            header !== 'actions'\n          \"\n        >\n          <div *ngIf=\"smartTable.sortable; then sortable; else notSortable\"></div>\n          <ng-template #sortable>\n            <button\n              (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\"\n              *ngIf=\"smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])\"\n              mat-button\n              class=\"sortableHeaderButton\"\n            >\n              {{ smartTable.customTableHeaders[i] }}\n              <smart-icon\n                class=\"sortableHeaderButtonIcon\"\n                *ngIf=\"getSortIcon(header)\"\n                title=\"sort\"\n                [icon]=\"getSortIcon(header)!\"\n              ></smart-icon>\n              <smart-icon\n                class=\"sortableHeaderButtonIcon\"\n                *ngIf=\"hasSortNumIcon(header)\"\n                title=\"sort\"\n                [icon]=\"getSortNumIcon(header)\"\n              ></smart-icon>\n            </button>\n          </ng-template>\n          <ng-template #notSortable>\n            {{ smartTable.customTableHeaders[i] }}\n          </ng-template>\n        </div>\n      </th>\n    }\n    <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\n      <mat-checkbox\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\n          !isDisabled(element)\n        \"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n                  : element\n              )\n            : null\n        \"\n        [disabled]=\"isDisabled(element)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n      >\n      </mat-checkbox>\n      <div\n        *ngIf=\"\n          smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\n        \"\n      >\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME\">\n          {{\n            getValue(element, header)\n              | smartDateTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATE\">\n          {{\n            getValue(element, header)\n              | smartDate: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().TIME\">\n          {{\n            getValue(element, header)\n              | smartTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX\">\n          <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\n        </div>\n        <div\n          *ngIf=\"\n            smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n            smartTable.customSmartTableHeaders[i].properties?.icons?.length\n          \"\n        >\n          <smart-icon\n            [smartTooltip]=\"getToolTip(element, i)\"\n            [icon]=\"getIcon(getValue(element, header), i)!\"\n            [color]=\"getColor(getValue(element, header), i)\"\n          >\n          </smart-icon>\n        </div>\n      </div>\n      <div class=\"smart-table-icon-container\">\n        <div *ngFor=\"let ir of getImageResourceIcons(element, header)\">\n          <smart-icon [imageResource]=\"ir\"> </smart-icon>\n        </div>\n      </div>\n      <div\n        *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons\"\n        class=\"smart-table-buttons-col\"\n      >\n        <div *ngFor=\"let button of smartTable.customSmartTableHeaders[i].buttons\">\n          <div *ngIf=\"showButton(button, element)\" [ngSwitch]=\"button.type\">\n            <button\n              (click)=\"customButtonClicked($event, button, element)\"\n              *ngSwitchCase=\"smartTableButtonType.ICON\"\n              mat-icon-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n            </button>\n            <button\n              (click)=\"customButtonClicked($event, button, element)\"\n              *ngSwitchCase=\"smartTableButtonType.NORMAL\"\n              mat-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\n              {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n            </button>\n            <button\n              (click)=\"customButtonClicked($event, button, element)\"\n              *ngSwitchCase=\"smartTableButtonType.RAISED\"\n              mat-raised-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\n              {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n            </button>\n            <!------ MENU ------>\n            <div *ngSwitchCase=\"smartTableButtonType.MENU\" class=\"menu-button\">\n              <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n              <smart-ui-action-toolbar\n                [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n              ></smart-ui-action-toolbar>\n              <!------ GENERIC HAMBURGER ------>\n              <!------ TOOLBAR ------>\n              @if (shouldShowMenuButton(element)) {\n                <smart-ui-action-toolbar\n                  [uiActionModels]=\"getMenuActions(element)\"\n                ></smart-ui-action-toolbar>\n              }\n            </div>\n            <!------ MENU ------>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon\">\n        <smart-icon\n          *ngIf=\"smartTable.customSmartTableHeaders[i].icon?.icon\"\n          [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n          [color]=\"smartTable.customSmartTableHeaders[i].icon?.color\"\n          [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n        >\n        </smart-icon>\n      </div>\n      <div\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].translator !== undefined\n        \"\n      >\n        {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\n      </div>\n      <button\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'expand'\n        \"\n        mat-icon-button\n        aria-label=\"expand row\"\n        (click)=\"onToggle(element, $event)\"\n      >\n        <smart-icon *ngIf=\"expandedElement !== element\" [icon]=\"'keyboard_arrow_down'\"></smart-icon>\n        <smart-icon *ngIf=\"expandedElement === element\" [icon]=\"'keyboard_arrow_up'\"></smart-icon>\n      </button>\n      <div\n        *ngIf=\"\n          !smartTable.customSmartTableHeaders ||\n          (smartTable.customSmartTableHeaders &&\n            !smartTable.customSmartTableHeaders[i].properties &&\n            !smartTable.customSmartTableHeaders[i].icon &&\n            !smartTable.customSmartTableHeaders[i].buttons &&\n            !smartTable.customSmartTableHeaders[i].translator &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n        \"\n      >\n        <smart-icon *ngIf=\"header === 'icon'\" [icon]=\"getValue(element, header)!\"> </smart-icon>\n        <img\n          *ngIf=\"header === 'img'\"\n          [src]=\"getValue(element, header)\"\n          alt=\"\"\n          class=\"smarttableImg\"\n        />\n        <!------ TOOLBAR ------>\n        <ng-container *ngIf=\"showCellToolbar(element, header)\">\n          <smart-ui-action-toolbar\n            [uiActionModels]=\"getRowColumnAction(element, header)\"\n          ></smart-ui-action-toolbar>\n        </ng-container>\n        <!------ TOOLBAR ------>\n        <div\n          *ngIf=\"\n            header !== 'icon' &&\n            header !== 'img' &&\n            header !== 'option' &&\n            header !== 'button' &&\n            !isImageResource(element, header)\n          \"\n          [innerHtml]=\"getValue(element, header)\"\n        ></div>\n      </div>\n    </td>\n  </ng-container>\n\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\n      <div\n        class=\"example-element-detail\"\n        [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\"\n      >\n        <ng-template #expandedArea></ng-template>\n      </div>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\n  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\n    <tr\n      mat-row\n      class=\"example-element-row\"\n      [class.example-expanded-row]=\"expandedElement === element\"\n      [ngClass]=\"getRowClasses(element)\"\n      [ngStyle]=\"getRowStyles(element)\"\n      (click)=\"handleOnRowClick(element)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\"\n      [attr.data-testid]=\"element?.id ?? null\"\n    ></tr>\n    <lib-default-actions-popup\n      *ngIf=\"smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0\"\n      #defaultActionMenu\n      [buttons]=\"getDefaultActionsForRow(element)!\"\n      [row]=\"element\"\n    ></lib-default-actions-popup>\n  </ng-container>\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"example-detail-row\"></tr>\n</table>\n", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.example-detail-row{height:0}tr.example-element-row:not(.example-expanded-row):hover{background:#f5f5f5}tr.example-element-row:not(.example-expanded-row):active{background:#efefef}.example-element-row td{border-bottom-width:0}.example-element-detail{overflow:hidden;display:flex;flex-direction:column}.example-element-diagram{min-width:80px;border:2px solid black;padding:8px;font-weight:lighter;margin:8px 0;height:104px}.example-element-symbol{font-weight:700;font-size:40px;line-height:normal}.example-element-description{padding:16px}.example-element-description-attribution{opacity:.5}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}\n"], dependencies: [{ kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4$3.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: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: DefaultActionsPopupComponent, selector: "lib-default-actions-popup", inputs: ["buttons", "row", "colIdx"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }], animations: [
-            trigger('detailExpand', [
-                state('collapsed', style({ height: '0px', minHeight: '0' })),
-                state('expanded', style({ height: '*' })),
-                transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: MaterialTableComponent, selector: "lib-material-table", usesInheritance: true, ngImport: i0, template: "<table\n  #myTable\n  mat-table\n  [dataSource]=\"smartTable.tableRows\"\n  class=\"full-width\"\n  multiTemplateDataRows\n>\n  <!-- Column Descriptor -->\n  @if (smartTable.title) {\n    <caption *ngIf=\"smartTable.title\" class=\"captionTitle\">\n      {{ smartTable.title }}\n    </caption>\n  }\n  <ng-container\n    *ngFor=\"let header of smartTable.tableHeaders; let i = index\"\n    matColumnDef=\"{{ header }}\"\n  >\n    <!-- my_menu is the implicit action column present on all tables: -->\n    @if ('my_menu' === header) {\n      <th\n        mat-header-cell\n        *matHeaderCellDef\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n      >\n        <smart-ui-action-toolbar\n          #headerToolbar\n          [id]=\"\n            smartTable.getGridId()\n              ? smartTable.getGridId() + '_headerToolbar'\n              : 'grid_not_initialized'\n          \"\n        >\n        </smart-ui-action-toolbar>\n      </th>\n    } @else {\n      <th\n        mat-header-cell\n        *matHeaderCellDef\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n      >\n        <div\n          *ngIf=\"\n            header === 'icon' || header === 'img' || header === 'options' || header === 'button'\n          \"\n        ></div>\n        <div *ngIf=\"header === 'select'\">\n          <mat-checkbox\n            *ngIf=\"smartTable.customSmartTableHeaders![i].showCheckboxInHeader\"\n            (change)=\"$event ? toggleAllRows() : null\"\n            [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\n            [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\"\n            [aria-label]=\"checkboxLabel()\"\n          >\n          </mat-checkbox>\n          <div *ngIf=\"!smartTable.customSmartTableHeaders![i].showCheckboxInHeader\">\n            {{ smartTable.customTableHeaders[i] }}\n          </div>\n        </div>\n        <div\n          *ngIf=\"\n            header !== 'icon' &&\n            header !== 'img' &&\n            header !== 'options' &&\n            header !== 'button' &&\n            header !== 'select' &&\n            header !== 'expand' &&\n            header !== 'actions'\n          \"\n        >\n          <div *ngIf=\"smartTable.sortable; then sortable; else notSortable\"></div>\n          <ng-template #sortable>\n            <button\n              (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\"\n              *ngIf=\"smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])\"\n              mat-button\n              class=\"sortableHeaderButton\"\n            >\n              {{ smartTable.customTableHeaders[i] }}\n              <smart-icon\n                class=\"sortableHeaderButtonIcon\"\n                *ngIf=\"getSortIcon(header)\"\n                title=\"sort\"\n                [icon]=\"getSortIcon(header)!\"\n              ></smart-icon>\n              <smart-icon\n                class=\"sortableHeaderButtonIcon\"\n                *ngIf=\"hasSortNumIcon(header)\"\n                title=\"sort\"\n                [icon]=\"getSortNumIcon(header)\"\n              ></smart-icon>\n            </button>\n          </ng-template>\n          <ng-template #notSortable>\n            {{ smartTable.customTableHeaders[i] }}\n          </ng-template>\n        </div>\n      </th>\n    }\n    <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\n      <mat-checkbox\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\n          !isDisabled(element)\n        \"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n                  : element\n              )\n            : null\n        \"\n        [disabled]=\"isDisabled(element)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n      >\n      </mat-checkbox>\n      <div\n        *ngIf=\"\n          smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\n        \"\n      >\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME\">\n          {{\n            getValue(element, header)\n              | smartDateTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATE\">\n          {{\n            getValue(element, header)\n              | smartDate: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().TIME\">\n          {{\n            getValue(element, header)\n              | smartTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX\">\n          <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\n        </div>\n        <div\n          *ngIf=\"\n            smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n            smartTable.customSmartTableHeaders[i].properties?.icons?.length\n          \"\n        >\n          <smart-icon\n            [smartTooltip]=\"getToolTip(element, i)\"\n            [icon]=\"getIcon(getValue(element, header), i)!\"\n            [color]=\"getColor(getValue(element, header), i)\"\n          >\n          </smart-icon>\n        </div>\n      </div>\n      <div class=\"smart-table-icon-container\">\n        <div *ngFor=\"let ir of getImageResourceIcons(element, header)\">\n          <smart-icon [imageResource]=\"ir\"> </smart-icon>\n        </div>\n      </div>\n      <div\n        *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons\"\n        class=\"smart-table-buttons-col\"\n      >\n        <div *ngFor=\"let button of smartTable.customSmartTableHeaders[i].buttons\">\n          <div *ngIf=\"showButton(button, element)\" [ngSwitch]=\"button.type\">\n            <button\n              (click)=\"customButtonClicked($event, button, element)\"\n              *ngSwitchCase=\"smartTableButtonType.ICON\"\n              mat-icon-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n            </button>\n            <button\n              (click)=\"customButtonClicked($event, button, element)\"\n              *ngSwitchCase=\"smartTableButtonType.NORMAL\"\n              mat-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\n              {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n            </button>\n            <button\n              (click)=\"customButtonClicked($event, button, element)\"\n              *ngSwitchCase=\"smartTableButtonType.RAISED\"\n              mat-raised-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\n              {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n            </button>\n            <!------ MENU ------>\n            <div *ngSwitchCase=\"smartTableButtonType.MENU\" class=\"menu-button\">\n              <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n              <smart-ui-action-toolbar\n                [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n              ></smart-ui-action-toolbar>\n              <!------ GENERIC HAMBURGER ------>\n              <!------ TOOLBAR ------>\n              @if (shouldShowMenuButton(element)) {\n                <smart-ui-action-toolbar\n                  [uiActionModels]=\"getMenuActions(element)\"\n                ></smart-ui-action-toolbar>\n              }\n            </div>\n            <!------ MENU ------>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon\">\n        <smart-icon\n          *ngIf=\"smartTable.customSmartTableHeaders[i].icon?.icon\"\n          [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n          [color]=\"smartTable.customSmartTableHeaders[i].icon?.color\"\n          [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n        >\n        </smart-icon>\n      </div>\n      <div\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].translator !== undefined\n        \"\n      >\n        {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\n      </div>\n      <button\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'expand'\n        \"\n        mat-icon-button\n        aria-label=\"expand row\"\n        (click)=\"onToggle(element, $event)\"\n      >\n        <smart-icon *ngIf=\"expandedElement !== element\" [icon]=\"'keyboard_arrow_down'\"></smart-icon>\n        <smart-icon *ngIf=\"expandedElement === element\" [icon]=\"'keyboard_arrow_up'\"></smart-icon>\n      </button>\n      <div\n        *ngIf=\"\n          !smartTable.customSmartTableHeaders ||\n          (smartTable.customSmartTableHeaders &&\n            !smartTable.customSmartTableHeaders[i].properties &&\n            !smartTable.customSmartTableHeaders[i].icon &&\n            !smartTable.customSmartTableHeaders[i].buttons &&\n            !smartTable.customSmartTableHeaders[i].translator &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n        \"\n      >\n        <smart-icon *ngIf=\"header === 'icon'\" [icon]=\"getValue(element, header)!\"> </smart-icon>\n        <img\n          *ngIf=\"header === 'img'\"\n          [src]=\"getValue(element, header)\"\n          alt=\"\"\n          class=\"smarttableImg\"\n        />\n        <!------ TOOLBAR ------>\n        <ng-container *ngIf=\"showCellToolbar(element, header)\">\n          <smart-ui-action-toolbar\n            [uiActionModels]=\"getRowColumnAction(element, header)\"\n          ></smart-ui-action-toolbar>\n        </ng-container>\n        <!------ TOOLBAR ------>\n        <div\n          *ngIf=\"\n            header !== 'icon' &&\n            header !== 'img' &&\n            header !== 'option' &&\n            header !== 'button' &&\n            !isImageResource(element, header)\n          \"\n          [innerHtml]=\"getValue(element, header)\"\n        ></div>\n      </div>\n    </td>\n  </ng-container>\n\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n  @if (smartTable.expandable) {\n    <ng-container matColumnDef=\"expandedDetail\">\n      <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\n        <div class=\"smart-table-detail\">\n          <div class=\"smart-table-detail-content\">\n            <ng-template #expandedArea></ng-template>\n          </div>\n        </div>\n      </td>\n    </ng-container>\n  }\n\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\n  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\n    <tr\n      mat-row\n      class=\"smart-table-row\"\n      [class.smart-table-row-expanded]=\"expandedElement === element\"\n      [ngClass]=\"getRowClasses(element)\"\n      [ngStyle]=\"getRowStyles(element)\"\n      (click)=\"handleOnRowClick(element)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\"\n      [attr.data-testid]=\"element?.id ?? null\"\n    ></tr>\n    <lib-default-actions-popup\n      *ngIf=\"smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0\"\n      #defaultActionMenu\n      [buttons]=\"getDefaultActionsForRow(element)!\"\n      [row]=\"element\"\n    ></lib-default-actions-popup>\n  </ng-container>\n  <!-- Only the expanded row has a detail row; no host style can give a collapsed one a height. -->\n  @if (smartTable.expandable) {\n    <tr\n      mat-row\n      *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\"\n      class=\"smart-table-detail-row\"\n      @detailRow\n    ></tr>\n  }\n</table>\n", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.smart-table-row:not(.smart-table-row-expanded):hover{background:#f5f5f5}tr.smart-table-row:not(.smart-table-row-expanded):active{background:#efefef}tr.smart-table-row-expanded td{border-bottom-width:0}tr.smart-table-detail-row{height:0}.smart-table-detail{display:grid;grid-template-rows:1fr}.smart-table-detail-content{min-height:0;overflow:hidden}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}\n"], dependencies: [{ kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4$3.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: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: DefaultActionsPopupComponent, selector: "lib-default-actions-popup", inputs: ["buttons", "row", "colIdx"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }], animations: [
+            // The detail row is rendered for the expanded row only, so it enters and leaves. The
+            // trigger sits on the row: a leave animation inside a removed element only plays when
+            // the removed element itself has a trigger. The fr track follows the content, which is
+            // created after the enter animation has already started; a `*` height would be 0 then.
+            trigger('detailRow', [
+                transition(':enter', [
+                    query('.smart-table-detail', [
+                        style({ gridTemplateRows: '0fr' }),
+                        animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ gridTemplateRows: '1fr' })),
+                    ]),
+                ]),
+                transition(':leave', [
+                    query('.smart-table-detail', [
+                        style({ gridTemplateRows: '1fr' }),
+                        animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ gridTemplateRows: '0fr' })),
+                    ]),
+                ]),
             ]),
         ] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MaterialTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-material-table', animations: [
-                        trigger('detailExpand', [
-                            state('collapsed', style({ height: '0px', minHeight: '0' })),
-                            state('expanded', style({ height: '*' })),
-                            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+                        // The detail row is rendered for the expanded row only, so it enters and leaves. The
+                        // trigger sits on the row: a leave animation inside a removed element only plays when
+                        // the removed element itself has a trigger. The fr track follows the content, which is
+                        // created after the enter animation has already started; a `*` height would be 0 then.
+                        trigger('detailRow', [
+                            transition(':enter', [
+                                query('.smart-table-detail', [
+                                    style({ gridTemplateRows: '0fr' }),
+                                    animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ gridTemplateRows: '1fr' })),
+                                ]),
+                            ]),
+                            transition(':leave', [
+                                query('.smart-table-detail', [
+                                    style({ gridTemplateRows: '1fr' }),
+                                    animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ gridTemplateRows: '0fr' })),
+                                ]),
+                            ]),
                         ]),
-                    ], template: "<table\n  #myTable\n  mat-table\n  [dataSource]=\"smartTable.tableRows\"\n  class=\"full-width\"\n  multiTemplateDataRows\n>\n  <!-- Column Descriptor -->\n  @if (smartTable.title) {\n    <caption *ngIf=\"smartTable.title\" class=\"captionTitle\">\n      {{ smartTable.title }}\n    </caption>\n  }\n  <ng-container\n    *ngFor=\"let header of smartTable.tableHeaders; let i = index\"\n    matColumnDef=\"{{ header }}\"\n  >\n    <!-- my_menu is the implicit action column present on all tables: -->\n    @if ('my_menu' === header) {\n      <th\n        mat-header-cell\n        *matHeaderCellDef\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n      >\n        <smart-ui-action-toolbar\n          #headerToolbar\n          [id]=\"\n            smartTable.getGridId()\n              ? smartTable.getGridId() + '_headerToolbar'\n              : 'grid_not_initialized'\n          \"\n        >\n        </smart-ui-action-toolbar>\n      </th>\n    } @else {\n      <th\n        mat-header-cell\n        *matHeaderCellDef\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n      >\n        <div\n          *ngIf=\"\n            header === 'icon' || header === 'img' || header === 'options' || header === 'button'\n          \"\n        ></div>\n        <div *ngIf=\"header === 'select'\">\n          <mat-checkbox\n            *ngIf=\"smartTable.customSmartTableHeaders![i].showCheckboxInHeader\"\n            (change)=\"$event ? toggleAllRows() : null\"\n            [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\n            [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\"\n            [aria-label]=\"checkboxLabel()\"\n          >\n          </mat-checkbox>\n          <div *ngIf=\"!smartTable.customSmartTableHeaders![i].showCheckboxInHeader\">\n            {{ smartTable.customTableHeaders[i] }}\n          </div>\n        </div>\n        <div\n          *ngIf=\"\n            header !== 'icon' &&\n            header !== 'img' &&\n            header !== 'options' &&\n            header !== 'button' &&\n            header !== 'select' &&\n            header !== 'expand' &&\n            header !== 'actions'\n          \"\n        >\n          <div *ngIf=\"smartTable.sortable; then sortable; else notSortable\"></div>\n          <ng-template #sortable>\n            <button\n              (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\"\n              *ngIf=\"smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])\"\n              mat-button\n              class=\"sortableHeaderButton\"\n            >\n              {{ smartTable.customTableHeaders[i] }}\n              <smart-icon\n                class=\"sortableHeaderButtonIcon\"\n                *ngIf=\"getSortIcon(header)\"\n                title=\"sort\"\n                [icon]=\"getSortIcon(header)!\"\n              ></smart-icon>\n              <smart-icon\n                class=\"sortableHeaderButtonIcon\"\n                *ngIf=\"hasSortNumIcon(header)\"\n                title=\"sort\"\n                [icon]=\"getSortNumIcon(header)\"\n              ></smart-icon>\n            </button>\n          </ng-template>\n          <ng-template #notSortable>\n            {{ smartTable.customTableHeaders[i] }}\n          </ng-template>\n        </div>\n      </th>\n    }\n    <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\n      <mat-checkbox\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\n          !isDisabled(element)\n        \"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n                  : element\n              )\n            : null\n        \"\n        [disabled]=\"isDisabled(element)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n      >\n      </mat-checkbox>\n      <div\n        *ngIf=\"\n          smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\n        \"\n      >\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME\">\n          {{\n            getValue(element, header)\n              | smartDateTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATE\">\n          {{\n            getValue(element, header)\n              | smartDate: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().TIME\">\n          {{\n            getValue(element, header)\n              | smartTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX\">\n          <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\n        </div>\n        <div\n          *ngIf=\"\n            smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n            smartTable.customSmartTableHeaders[i].properties?.icons?.length\n          \"\n        >\n          <smart-icon\n            [smartTooltip]=\"getToolTip(element, i)\"\n            [icon]=\"getIcon(getValue(element, header), i)!\"\n            [color]=\"getColor(getValue(element, header), i)\"\n          >\n          </smart-icon>\n        </div>\n      </div>\n      <div class=\"smart-table-icon-container\">\n        <div *ngFor=\"let ir of getImageResourceIcons(element, header)\">\n          <smart-icon [imageResource]=\"ir\"> </smart-icon>\n        </div>\n      </div>\n      <div\n        *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons\"\n        class=\"smart-table-buttons-col\"\n      >\n        <div *ngFor=\"let button of smartTable.customSmartTableHeaders[i].buttons\">\n          <div *ngIf=\"showButton(button, element)\" [ngSwitch]=\"button.type\">\n            <button\n              (click)=\"customButtonClicked($event, button, element)\"\n              *ngSwitchCase=\"smartTableButtonType.ICON\"\n              mat-icon-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n            </button>\n            <button\n              (click)=\"customButtonClicked($event, button, element)\"\n              *ngSwitchCase=\"smartTableButtonType.NORMAL\"\n              mat-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\n              {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n            </button>\n            <button\n              (click)=\"customButtonClicked($event, button, element)\"\n              *ngSwitchCase=\"smartTableButtonType.RAISED\"\n              mat-raised-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\n              {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n            </button>\n            <!------ MENU ------>\n            <div *ngSwitchCase=\"smartTableButtonType.MENU\" class=\"menu-button\">\n              <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n              <smart-ui-action-toolbar\n                [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n              ></smart-ui-action-toolbar>\n              <!------ GENERIC HAMBURGER ------>\n              <!------ TOOLBAR ------>\n              @if (shouldShowMenuButton(element)) {\n                <smart-ui-action-toolbar\n                  [uiActionModels]=\"getMenuActions(element)\"\n                ></smart-ui-action-toolbar>\n              }\n            </div>\n            <!------ MENU ------>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon\">\n        <smart-icon\n          *ngIf=\"smartTable.customSmartTableHeaders[i].icon?.icon\"\n          [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n          [color]=\"smartTable.customSmartTableHeaders[i].icon?.color\"\n          [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n        >\n        </smart-icon>\n      </div>\n      <div\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].translator !== undefined\n        \"\n      >\n        {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\n      </div>\n      <button\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'expand'\n        \"\n        mat-icon-button\n        aria-label=\"expand row\"\n        (click)=\"onToggle(element, $event)\"\n      >\n        <smart-icon *ngIf=\"expandedElement !== element\" [icon]=\"'keyboard_arrow_down'\"></smart-icon>\n        <smart-icon *ngIf=\"expandedElement === element\" [icon]=\"'keyboard_arrow_up'\"></smart-icon>\n      </button>\n      <div\n        *ngIf=\"\n          !smartTable.customSmartTableHeaders ||\n          (smartTable.customSmartTableHeaders &&\n            !smartTable.customSmartTableHeaders[i].properties &&\n            !smartTable.customSmartTableHeaders[i].icon &&\n            !smartTable.customSmartTableHeaders[i].buttons &&\n            !smartTable.customSmartTableHeaders[i].translator &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n        \"\n      >\n        <smart-icon *ngIf=\"header === 'icon'\" [icon]=\"getValue(element, header)!\"> </smart-icon>\n        <img\n          *ngIf=\"header === 'img'\"\n          [src]=\"getValue(element, header)\"\n          alt=\"\"\n          class=\"smarttableImg\"\n        />\n        <!------ TOOLBAR ------>\n        <ng-container *ngIf=\"showCellToolbar(element, header)\">\n          <smart-ui-action-toolbar\n            [uiActionModels]=\"getRowColumnAction(element, header)\"\n          ></smart-ui-action-toolbar>\n        </ng-container>\n        <!------ TOOLBAR ------>\n        <div\n          *ngIf=\"\n            header !== 'icon' &&\n            header !== 'img' &&\n            header !== 'option' &&\n            header !== 'button' &&\n            !isImageResource(element, header)\n          \"\n          [innerHtml]=\"getValue(element, header)\"\n        ></div>\n      </div>\n    </td>\n  </ng-container>\n\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\n      <div\n        class=\"example-element-detail\"\n        [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\"\n      >\n        <ng-template #expandedArea></ng-template>\n      </div>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\n  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\n    <tr\n      mat-row\n      class=\"example-element-row\"\n      [class.example-expanded-row]=\"expandedElement === element\"\n      [ngClass]=\"getRowClasses(element)\"\n      [ngStyle]=\"getRowStyles(element)\"\n      (click)=\"handleOnRowClick(element)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\"\n      [attr.data-testid]=\"element?.id ?? null\"\n    ></tr>\n    <lib-default-actions-popup\n      *ngIf=\"smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0\"\n      #defaultActionMenu\n      [buttons]=\"getDefaultActionsForRow(element)!\"\n      [row]=\"element\"\n    ></lib-default-actions-popup>\n  </ng-container>\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"example-detail-row\"></tr>\n</table>\n", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.example-detail-row{height:0}tr.example-element-row:not(.example-expanded-row):hover{background:#f5f5f5}tr.example-element-row:not(.example-expanded-row):active{background:#efefef}.example-element-row td{border-bottom-width:0}.example-element-detail{overflow:hidden;display:flex;flex-direction:column}.example-element-diagram{min-width:80px;border:2px solid black;padding:8px;font-weight:lighter;margin:8px 0;height:104px}.example-element-symbol{font-weight:700;font-size:40px;line-height:normal}.example-element-description{padding:16px}.example-element-description-attribution{opacity:.5}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}\n"] }]
+                    ], template: "<table\n  #myTable\n  mat-table\n  [dataSource]=\"smartTable.tableRows\"\n  class=\"full-width\"\n  multiTemplateDataRows\n>\n  <!-- Column Descriptor -->\n  @if (smartTable.title) {\n    <caption *ngIf=\"smartTable.title\" class=\"captionTitle\">\n      {{ smartTable.title }}\n    </caption>\n  }\n  <ng-container\n    *ngFor=\"let header of smartTable.tableHeaders; let i = index\"\n    matColumnDef=\"{{ header }}\"\n  >\n    <!-- my_menu is the implicit action column present on all tables: -->\n    @if ('my_menu' === header) {\n      <th\n        mat-header-cell\n        *matHeaderCellDef\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n      >\n        <smart-ui-action-toolbar\n          #headerToolbar\n          [id]=\"\n            smartTable.getGridId()\n              ? smartTable.getGridId() + '_headerToolbar'\n              : 'grid_not_initialized'\n          \"\n        >\n        </smart-ui-action-toolbar>\n      </th>\n    } @else {\n      <th\n        mat-header-cell\n        *matHeaderCellDef\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n      >\n        <div\n          *ngIf=\"\n            header === 'icon' || header === 'img' || header === 'options' || header === 'button'\n          \"\n        ></div>\n        <div *ngIf=\"header === 'select'\">\n          <mat-checkbox\n            *ngIf=\"smartTable.customSmartTableHeaders![i].showCheckboxInHeader\"\n            (change)=\"$event ? toggleAllRows() : null\"\n            [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\n            [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\"\n            [aria-label]=\"checkboxLabel()\"\n          >\n          </mat-checkbox>\n          <div *ngIf=\"!smartTable.customSmartTableHeaders![i].showCheckboxInHeader\">\n            {{ smartTable.customTableHeaders[i] }}\n          </div>\n        </div>\n        <div\n          *ngIf=\"\n            header !== 'icon' &&\n            header !== 'img' &&\n            header !== 'options' &&\n            header !== 'button' &&\n            header !== 'select' &&\n            header !== 'expand' &&\n            header !== 'actions'\n          \"\n        >\n          <div *ngIf=\"smartTable.sortable; then sortable; else notSortable\"></div>\n          <ng-template #sortable>\n            <button\n              (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\"\n              *ngIf=\"smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])\"\n              mat-button\n              class=\"sortableHeaderButton\"\n            >\n              {{ smartTable.customTableHeaders[i] }}\n              <smart-icon\n                class=\"sortableHeaderButtonIcon\"\n                *ngIf=\"getSortIcon(header)\"\n                title=\"sort\"\n                [icon]=\"getSortIcon(header)!\"\n              ></smart-icon>\n              <smart-icon\n                class=\"sortableHeaderButtonIcon\"\n                *ngIf=\"hasSortNumIcon(header)\"\n                title=\"sort\"\n                [icon]=\"getSortNumIcon(header)\"\n              ></smart-icon>\n            </button>\n          </ng-template>\n          <ng-template #notSortable>\n            {{ smartTable.customTableHeaders[i] }}\n          </ng-template>\n        </div>\n      </th>\n    }\n    <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\n      <mat-checkbox\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\n          !isDisabled(element)\n        \"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n                  : element\n              )\n            : null\n        \"\n        [disabled]=\"isDisabled(element)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n      >\n      </mat-checkbox>\n      <div\n        *ngIf=\"\n          smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\n        \"\n      >\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME\">\n          {{\n            getValue(element, header)\n              | smartDateTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATE\">\n          {{\n            getValue(element, header)\n              | smartDate: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().TIME\">\n          {{\n            getValue(element, header)\n              | smartTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\n          }}\n        </div>\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX\">\n          <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\n        </div>\n        <div\n          *ngIf=\"\n            smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n            smartTable.customSmartTableHeaders[i].properties?.icons?.length\n          \"\n        >\n          <smart-icon\n            [smartTooltip]=\"getToolTip(element, i)\"\n            [icon]=\"getIcon(getValue(element, header), i)!\"\n            [color]=\"getColor(getValue(element, header), i)\"\n          >\n          </smart-icon>\n        </div>\n      </div>\n      <div class=\"smart-table-icon-container\">\n        <div *ngFor=\"let ir of getImageResourceIcons(element, header)\">\n          <smart-icon [imageResource]=\"ir\"> </smart-icon>\n        </div>\n      </div>\n      <div\n        *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons\"\n        class=\"smart-table-buttons-col\"\n      >\n        <div *ngFor=\"let button of smartTable.customSmartTableHeaders[i].buttons\">\n          <div *ngIf=\"showButton(button, element)\" [ngSwitch]=\"button.type\">\n            <button\n              (click)=\"customButtonClicked($event, button, element)\"\n              *ngSwitchCase=\"smartTableButtonType.ICON\"\n              mat-icon-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n            </button>\n            <button\n              (click)=\"customButtonClicked($event, button, element)\"\n              *ngSwitchCase=\"smartTableButtonType.NORMAL\"\n              mat-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\n              {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n            </button>\n            <button\n              (click)=\"customButtonClicked($event, button, element)\"\n              *ngSwitchCase=\"smartTableButtonType.RAISED\"\n              mat-raised-button\n              color=\"{{ button.color }}\"\n            >\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\n              {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n            </button>\n            <!------ MENU ------>\n            <div *ngSwitchCase=\"smartTableButtonType.MENU\" class=\"menu-button\">\n              <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n              <smart-ui-action-toolbar\n                [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n              ></smart-ui-action-toolbar>\n              <!------ GENERIC HAMBURGER ------>\n              <!------ TOOLBAR ------>\n              @if (shouldShowMenuButton(element)) {\n                <smart-ui-action-toolbar\n                  [uiActionModels]=\"getMenuActions(element)\"\n                ></smart-ui-action-toolbar>\n              }\n            </div>\n            <!------ MENU ------>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon\">\n        <smart-icon\n          *ngIf=\"smartTable.customSmartTableHeaders[i].icon?.icon\"\n          [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n          [color]=\"smartTable.customSmartTableHeaders[i].icon?.color\"\n          [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n        >\n        </smart-icon>\n      </div>\n      <div\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].translator !== undefined\n        \"\n      >\n        {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\n      </div>\n      <button\n        *ngIf=\"\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'expand'\n        \"\n        mat-icon-button\n        aria-label=\"expand row\"\n        (click)=\"onToggle(element, $event)\"\n      >\n        <smart-icon *ngIf=\"expandedElement !== element\" [icon]=\"'keyboard_arrow_down'\"></smart-icon>\n        <smart-icon *ngIf=\"expandedElement === element\" [icon]=\"'keyboard_arrow_up'\"></smart-icon>\n      </button>\n      <div\n        *ngIf=\"\n          !smartTable.customSmartTableHeaders ||\n          (smartTable.customSmartTableHeaders &&\n            !smartTable.customSmartTableHeaders[i].properties &&\n            !smartTable.customSmartTableHeaders[i].icon &&\n            !smartTable.customSmartTableHeaders[i].buttons &&\n            !smartTable.customSmartTableHeaders[i].translator &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n        \"\n      >\n        <smart-icon *ngIf=\"header === 'icon'\" [icon]=\"getValue(element, header)!\"> </smart-icon>\n        <img\n          *ngIf=\"header === 'img'\"\n          [src]=\"getValue(element, header)\"\n          alt=\"\"\n          class=\"smarttableImg\"\n        />\n        <!------ TOOLBAR ------>\n        <ng-container *ngIf=\"showCellToolbar(element, header)\">\n          <smart-ui-action-toolbar\n            [uiActionModels]=\"getRowColumnAction(element, header)\"\n          ></smart-ui-action-toolbar>\n        </ng-container>\n        <!------ TOOLBAR ------>\n        <div\n          *ngIf=\"\n            header !== 'icon' &&\n            header !== 'img' &&\n            header !== 'option' &&\n            header !== 'button' &&\n            !isImageResource(element, header)\n          \"\n          [innerHtml]=\"getValue(element, header)\"\n        ></div>\n      </div>\n    </td>\n  </ng-container>\n\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n  @if (smartTable.expandable) {\n    <ng-container matColumnDef=\"expandedDetail\">\n      <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\n        <div class=\"smart-table-detail\">\n          <div class=\"smart-table-detail-content\">\n            <ng-template #expandedArea></ng-template>\n          </div>\n        </div>\n      </td>\n    </ng-container>\n  }\n\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\n  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\n    <tr\n      mat-row\n      class=\"smart-table-row\"\n      [class.smart-table-row-expanded]=\"expandedElement === element\"\n      [ngClass]=\"getRowClasses(element)\"\n      [ngStyle]=\"getRowStyles(element)\"\n      (click)=\"handleOnRowClick(element)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\"\n      [attr.data-testid]=\"element?.id ?? null\"\n    ></tr>\n    <lib-default-actions-popup\n      *ngIf=\"smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0\"\n      #defaultActionMenu\n      [buttons]=\"getDefaultActionsForRow(element)!\"\n      [row]=\"element\"\n    ></lib-default-actions-popup>\n  </ng-container>\n  <!-- Only the expanded row has a detail row; no host style can give a collapsed one a height. -->\n  @if (smartTable.expandable) {\n    <tr\n      mat-row\n      *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\"\n      class=\"smart-table-detail-row\"\n      @detailRow\n    ></tr>\n  }\n</table>\n", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.smart-table-row:not(.smart-table-row-expanded):hover{background:#f5f5f5}tr.smart-table-row:not(.smart-table-row-expanded):active{background:#efefef}tr.smart-table-row-expanded td{border-bottom-width:0}tr.smart-table-detail-row{height:0}.smart-table-detail{display:grid;grid-template-rows:1fr}.smart-table-detail-content{min-height:0;overflow:hidden}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}\n"] }]
         }], ctorParameters: () => [{ type: ComponentFactoryService }] });
 
 class MobileTableComponent extends Table {