@wolkabout/commons 0.0.28 → 0.0.29

package/fesm2022/wolkabout-commons.mjs

@@ -4299,11 +4299,14 @@ class CardLabeledValueComponent {
     }, ...(ngDevMode ? [{ debugName: "permissionFunction" }] : []));
     hasPermission = toSignal(this.permissionFunction());
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardLabeledValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CardLabeledValueComponent, isStandalone: true, selector: "app-card-labeled-value", inputs: { permissions: { classPropertyName: "permissions", publicName: "permissions", isSignal: true, isRequired: false, transformFunction: null }, useAssetPermissions: { classPropertyName: "useAssetPermissions", publicName: "useAssetPermissions", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, editFunction: { classPropertyName: "editFunction", publicName: "editFunction", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-card\r\n  [ngClass]=\"{'cursor-pointer hover:bg-hover-color': editFunction() && hasPermission() }\"\r\n  [matTooltipDisabled]=\"!hasPermission()\" (click)=\"editFunction() && hasPermission() ? editFunction()!() : null\"\r\n  [matTooltip]=\"tooltip() | translate\"\r\n  matTooltipPosition=\"above\"\r\n  class=\"h-full min-h-22\"\r\n>\r\n  <div class=\"flex items-center justify-between p-4 gap-x-4 h-full\">\r\n    <div class=\"flex flex-col w-full h-full overflow-hidden\">\r\n      <div class=\"font-semibold shrink-0\">{{ label() | translate }}</div>\r\n      <div class=\"text-mat-sys-primary flex items-center grow\">\r\n        <ng-content/>\r\n      </div>\r\n    </div>\r\n    @if (editFunction() && hasPermission()) {\r\n      <button mat-icon-button [ngClass]=\"icon() === 'delete' ? 'text-mat-sys-on-error-container' : 'text-mat-sys-primary'\" (click)=\"editFunction(); $event.stopPropagation()\">\r\n        <mat-icon>{{ icon() }}</mat-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n</mat-card>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "component", type: i12.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CardLabeledValueComponent, isStandalone: true, selector: "app-card-labeled-value", inputs: { permissions: { classPropertyName: "permissions", publicName: "permissions", isSignal: true, isRequired: false, transformFunction: null }, useAssetPermissions: { classPropertyName: "useAssetPermissions", publicName: "useAssetPermissions", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, editFunction: { classPropertyName: "editFunction", publicName: "editFunction", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.height": "\"22rem\"", "style.display": "\"block\"" } }, ngImport: i0, template: "<mat-card\r\n  [ngClass]=\"{'cursor-pointer hover:bg-hover-color': editFunction() && hasPermission() }\"\r\n  [matTooltipDisabled]=\"!hasPermission()\" (click)=\"editFunction() && hasPermission() ? editFunction()!() : null\"\r\n  [matTooltip]=\"tooltip() | translate\"\r\n  matTooltipPosition=\"above\"\r\n  class=\"h-full min-h-22\"\r\n>\r\n  <div class=\"flex items-center justify-between p-4 gap-x-4 h-full\">\r\n    <div class=\"flex flex-col w-full h-full overflow-hidden\">\r\n      <div class=\"font-semibold shrink-0\">{{ label() | translate }}</div>\r\n      <div class=\"text-mat-sys-primary flex items-center grow\">\r\n        <ng-content/>\r\n      </div>\r\n    </div>\r\n    @if (editFunction() && hasPermission()) {\r\n      <button mat-icon-button [ngClass]=\"icon() === 'delete' ? 'text-mat-sys-on-error-container' : 'text-mat-sys-primary'\" (click)=\"editFunction(); $event.stopPropagation()\">\r\n        <mat-icon>{{ icon() }}</mat-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n</mat-card>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "component", type: i12.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardLabeledValueComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-card-labeled-value', imports: [shared], template: "<mat-card\r\n  [ngClass]=\"{'cursor-pointer hover:bg-hover-color': editFunction() && hasPermission() }\"\r\n  [matTooltipDisabled]=\"!hasPermission()\" (click)=\"editFunction() && hasPermission() ? editFunction()!() : null\"\r\n  [matTooltip]=\"tooltip() | translate\"\r\n  matTooltipPosition=\"above\"\r\n  class=\"h-full min-h-22\"\r\n>\r\n  <div class=\"flex items-center justify-between p-4 gap-x-4 h-full\">\r\n    <div class=\"flex flex-col w-full h-full overflow-hidden\">\r\n      <div class=\"font-semibold shrink-0\">{{ label() | translate }}</div>\r\n      <div class=\"text-mat-sys-primary flex items-center grow\">\r\n        <ng-content/>\r\n      </div>\r\n    </div>\r\n    @if (editFunction() && hasPermission()) {\r\n      <button mat-icon-button [ngClass]=\"icon() === 'delete' ? 'text-mat-sys-on-error-container' : 'text-mat-sys-primary'\" (click)=\"editFunction(); $event.stopPropagation()\">\r\n        <mat-icon>{{ icon() }}</mat-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n</mat-card>\r\n" }]
+            args: [{ selector: 'app-card-labeled-value', imports: [shared], host: {
+                        '[style.height]': '"22rem"',
+                        '[style.display]': '"block"',
+                    }, template: "<mat-card\r\n  [ngClass]=\"{'cursor-pointer hover:bg-hover-color': editFunction() && hasPermission() }\"\r\n  [matTooltipDisabled]=\"!hasPermission()\" (click)=\"editFunction() && hasPermission() ? editFunction()!() : null\"\r\n  [matTooltip]=\"tooltip() | translate\"\r\n  matTooltipPosition=\"above\"\r\n  class=\"h-full min-h-22\"\r\n>\r\n  <div class=\"flex items-center justify-between p-4 gap-x-4 h-full\">\r\n    <div class=\"flex flex-col w-full h-full overflow-hidden\">\r\n      <div class=\"font-semibold shrink-0\">{{ label() | translate }}</div>\r\n      <div class=\"text-mat-sys-primary flex items-center grow\">\r\n        <ng-content/>\r\n      </div>\r\n    </div>\r\n    @if (editFunction() && hasPermission()) {\r\n      <button mat-icon-button [ngClass]=\"icon() === 'delete' ? 'text-mat-sys-on-error-container' : 'text-mat-sys-primary'\" (click)=\"editFunction(); $event.stopPropagation()\">\r\n        <mat-icon>{{ icon() }}</mat-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n</mat-card>\r\n" }]
         }], propDecorators: { permissions: [{ type: i0.Input, args: [{ isSignal: true, alias: "permissions", required: false }] }], useAssetPermissions: [{ type: i0.Input, args: [{ isSignal: true, alias: "useAssetPermissions", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], editFunction: [{ type: i0.Input, args: [{ isSignal: true, alias: "editFunction", required: false }] }] } });
 
 class ConfirmationDialogComponent {
@@ -4865,7 +4868,7 @@ class GoogleMapComponent {
         const lastReading = isOffset ? mapItem.trueLat + ',' + mapItem.trueLng : mapItem.lat + ',' + mapItem.lng;
         const offsetNotification = isOffset ? `<span>${this.translateService.instant('DASHBOARDS.MAP_WIDGET_OFFSET_NOTIFICATION')}</span>` : '';
         const infoWindowContent = `
-      <div class="text-black flex flex-col gap-y-2 mt-4 w-fit! h-fit! select-none">
+      <div class="text-black flex flex-col gap-y-2 mt-4 !w-fit !h-fit select-none">
         <span class="font-bold">${mapItem.path}</span>
         <span>${lastReadingTime ? this.simpleDateTimePipe.transform(lastReadingTime) : ''}</span>
         <span class="font-bold mt-4">${lastReading}</span>
@@ -4943,11 +4946,11 @@ class GoogleMapComponent {
         return result;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GoogleMapComponent, deps: [{ token: i1$1.TranslateService }, { token: SimpleDateTimePipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: GoogleMapComponent, isStandalone: true, selector: "app-google-map", inputs: { googleMapId: { classPropertyName: "googleMapId", publicName: "googleMapId", isSignal: true, isRequired: true, transformFunction: null }, darkTheme: { classPropertyName: "darkTheme", publicName: "darkTheme", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, pinColor: { classPropertyName: "pinColor", publicName: "pinColor", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { markerClicked: "markerClicked" }, providers: [SimpleDateTimePipe], viewQueries: [{ propertyName: "map", first: true, predicate: GoogleMap, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex w-full h-full\">\r\n  <google-map height=\"100%\" width=\"100%\" [options]=\"mapOptions()\" [zoom]=\"zoom()\" class=\"w-full h-full\"/>\r\n  <div class=\"absolute bottom-7 right-3 flex flex-col gap-y-1\">\r\n    <mat-card class=\"border-none!\">\r\n      <button mat-mini-fab (click)=\"fitBounds()\" class=\"bg-transparent! text-mat-sys-on-surface\" type=\"button\">\r\n        <mat-icon>filter_center_focus</mat-icon>\r\n      </button>\r\n    </mat-card>\r\n    <mat-card class=\"border-none!\">\r\n      <button mat-mini-fab (click)=\"changeZoom(+1)\" [disabled]=\"zoom() === 21\" class=\"bg-transparent! text-mat-sys-on-surface\" type=\"button\">\r\n        <mat-icon>add</mat-icon>\r\n      </button>\r\n    </mat-card>\r\n    <mat-card class=\"border-none!\">\r\n      <button mat-mini-fab (click)=\"changeZoom(-1)\" [disabled]=\"zoom() === 2\" class=\"bg-transparent! text-mat-sys-on-surface\" type=\"button\">\r\n        <mat-icon>remove</mat-icon>\r\n      </button>\r\n    </mat-card>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "ngmodule", type: i2.MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "component", type: i12.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "ngmodule", type: i32.DragDropModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: GoogleMapComponent, isStandalone: true, selector: "app-google-map", inputs: { googleMapId: { classPropertyName: "googleMapId", publicName: "googleMapId", isSignal: true, isRequired: true, transformFunction: null }, darkTheme: { classPropertyName: "darkTheme", publicName: "darkTheme", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, pinColor: { classPropertyName: "pinColor", publicName: "pinColor", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { markerClicked: "markerClicked" }, providers: [SimpleDateTimePipe], viewQueries: [{ propertyName: "map", first: true, predicate: GoogleMap, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex w-full h-full\">\r\n  <google-map height=\"100%\" width=\"100%\" [options]=\"mapOptions()\" [zoom]=\"zoom()\" class=\"w-full h-full\"/>\r\n  <div class=\"absolute bottom-7 right-3 flex flex-col gap-y-1\">\r\n    <mat-card class=\"!border-none\">\r\n      <button mat-mini-fab (click)=\"fitBounds()\" class=\"!bg-transparent text-mat-sys-on-surface\" type=\"button\">\r\n        <mat-icon>filter_center_focus</mat-icon>\r\n      </button>\r\n    </mat-card>\r\n    <mat-card class=\"!border-none\">\r\n      <button mat-mini-fab (click)=\"changeZoom(+1)\" [disabled]=\"zoom() === 21\" class=\"!bg-transparent text-mat-sys-on-surface\" type=\"button\">\r\n        <mat-icon>add</mat-icon>\r\n      </button>\r\n    </mat-card>\r\n    <mat-card class=\"!border-none\">\r\n      <button mat-mini-fab (click)=\"changeZoom(-1)\" [disabled]=\"zoom() === 2\" class=\"!bg-transparent text-mat-sys-on-surface\" type=\"button\">\r\n        <mat-icon>remove</mat-icon>\r\n      </button>\r\n    </mat-card>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "ngmodule", type: i2.MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "component", type: i12.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "ngmodule", type: i32.DragDropModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GoogleMapComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-google-map', imports: [GoogleMap, shared], providers: [SimpleDateTimePipe], template: "<div class=\"flex w-full h-full\">\r\n  <google-map height=\"100%\" width=\"100%\" [options]=\"mapOptions()\" [zoom]=\"zoom()\" class=\"w-full h-full\"/>\r\n  <div class=\"absolute bottom-7 right-3 flex flex-col gap-y-1\">\r\n    <mat-card class=\"border-none!\">\r\n      <button mat-mini-fab (click)=\"fitBounds()\" class=\"bg-transparent! text-mat-sys-on-surface\" type=\"button\">\r\n        <mat-icon>filter_center_focus</mat-icon>\r\n      </button>\r\n    </mat-card>\r\n    <mat-card class=\"border-none!\">\r\n      <button mat-mini-fab (click)=\"changeZoom(+1)\" [disabled]=\"zoom() === 21\" class=\"bg-transparent! text-mat-sys-on-surface\" type=\"button\">\r\n        <mat-icon>add</mat-icon>\r\n      </button>\r\n    </mat-card>\r\n    <mat-card class=\"border-none!\">\r\n      <button mat-mini-fab (click)=\"changeZoom(-1)\" [disabled]=\"zoom() === 2\" class=\"bg-transparent! text-mat-sys-on-surface\" type=\"button\">\r\n        <mat-icon>remove</mat-icon>\r\n      </button>\r\n    </mat-card>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'app-google-map', imports: [GoogleMap, shared], providers: [SimpleDateTimePipe], template: "<div class=\"flex w-full h-full\">\r\n  <google-map height=\"100%\" width=\"100%\" [options]=\"mapOptions()\" [zoom]=\"zoom()\" class=\"w-full h-full\"/>\r\n  <div class=\"absolute bottom-7 right-3 flex flex-col gap-y-1\">\r\n    <mat-card class=\"!border-none\">\r\n      <button mat-mini-fab (click)=\"fitBounds()\" class=\"!bg-transparent text-mat-sys-on-surface\" type=\"button\">\r\n        <mat-icon>filter_center_focus</mat-icon>\r\n      </button>\r\n    </mat-card>\r\n    <mat-card class=\"!border-none\">\r\n      <button mat-mini-fab (click)=\"changeZoom(+1)\" [disabled]=\"zoom() === 21\" class=\"!bg-transparent text-mat-sys-on-surface\" type=\"button\">\r\n        <mat-icon>add</mat-icon>\r\n      </button>\r\n    </mat-card>\r\n    <mat-card class=\"!border-none\">\r\n      <button mat-mini-fab (click)=\"changeZoom(-1)\" [disabled]=\"zoom() === 2\" class=\"!bg-transparent text-mat-sys-on-surface\" type=\"button\">\r\n        <mat-icon>remove</mat-icon>\r\n      </button>\r\n    </mat-card>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }, { type: SimpleDateTimePipe }], propDecorators: { map: [{ type: i0.ViewChild, args: [i0.forwardRef(() => GoogleMap), { isSignal: true }] }], googleMapId: [{ type: i0.Input, args: [{ isSignal: true, alias: "googleMapId", required: true }] }], darkTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "darkTheme", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], pinColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinColor", required: true }] }], markerClicked: [{ type: i0.Output, args: ["markerClicked"] }] } });
 
 class ImagePreviewComponent {
@@ -5137,7 +5140,7 @@ class LocalSortTableComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LocalSortTableComponent, deps: [{ token: TenantPropertiesService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LocalSortTableComponent, isStandalone: true, selector: "app-local-sort-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, translationPrefix: { classPropertyName: "translationPrefix", publicName: "translationPrefix", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, noValuesMessage: { classPropertyName: "noValuesMessage", publicName: "noValuesMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, ngImport: i0, template: "<table>\r\n  <thead>\r\n  <tr>\r\n    @for (column of columns(); track column.name) {\r\n      <th class=\"font-medium! truncate\" [ngClass]=\"{'sort-field': column.shouldSort, 'cursor-pointer': column.shouldSort}\" (click)=\"column.shouldSort ? sort(column.name) : undefined\">\r\n        <div class=\"flex flex-row items-center gap-x-2\">\r\n          {{ (translationPrefix().toUpperCase() +column.name.toUpperCase()) | translate }}\r\n          @if (column.shouldSort) {\r\n            <mat-icon>{{ sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward' }}</mat-icon>\r\n          }\r\n        </div>\r\n      </th>\r\n    }\r\n  </tr>\r\n  </thead>\r\n  <tbody>\r\n    @if (loading()) {\r\n      <div class=\"w-full h-full flex flex-col justify-center items-center\">\r\n        <mat-spinner diameter=\"30\"></mat-spinner>\r\n      </div>\r\n    } @else {\r\n      @if (displayData(); as displayData){\r\n        @if (!noValuesMessage()) {\r\n          @if (!sorting()) {\r\n            <cdk-virtual-scroll-viewport [itemSize]=\"56\" class=\"viewport\">\r\n              <tr *cdkVirtualFor=\"let element of displayData\" (click)=\"itemSelected.emit(element)\">\r\n                @for (column of columns(); track column.name) {\r\n                  <td class=\"cursor-pointer truncate\">\r\n              <span [matTooltip]=\"column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name]\">\r\n                {{ column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name] }}\r\n              </span>\r\n                }\r\n              </tr>\r\n            </cdk-virtual-scroll-viewport>\r\n          }\r\n        } @else {\r\n          <div class=\"w-full h-full flex flex-col justify-center items-center\">\r\n            <span>{{ noValuesMessage() | translate }}</span>\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n  </tbody>\r\n</table>\r\n", styles: [":host{display:block;overflow:hidden;height:100%;width:100%}table{height:100%;width:100%;display:block}table thead{height:56px}table tbody{display:block;height:calc(100% - 56px);width:100%;overflow:hidden}table tbody tr:hover{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}table th,table td{padding-left:1rem;text-align:left;vertical-align:middle;border-bottom:1px solid var(--mat-sys-outline-variant)}tr{height:56px;display:table;table-layout:fixed;width:100%}.viewport{display:block;width:100%;height:100%;overflow:auto}.sort-field mat-icon{font-size:18px;line-height:18px;height:18px;width:18px;opacity:0;transition:all ease-in .2s}.sort-field:hover mat-icon{opacity:1}\n"], dependencies: [{ kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "component", type: i21.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LocalSortTableComponent, isStandalone: true, selector: "app-local-sort-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, translationPrefix: { classPropertyName: "translationPrefix", publicName: "translationPrefix", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, noValuesMessage: { classPropertyName: "noValuesMessage", publicName: "noValuesMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, ngImport: i0, template: "<table>\r\n  <thead>\r\n  <tr>\r\n    @for (column of columns(); track column.name) {\r\n      <th class=\"!font-medium truncate\" [ngClass]=\"{'sort-field': column.shouldSort, 'cursor-pointer': column.shouldSort}\" (click)=\"column.shouldSort ? sort(column.name) : undefined\">\r\n        <div class=\"flex flex-row items-center gap-x-2\">\r\n          {{ (translationPrefix().toUpperCase() +column.name.toUpperCase()) | translate }}\r\n          @if (column.shouldSort) {\r\n            <mat-icon>{{ sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward' }}</mat-icon>\r\n          }\r\n        </div>\r\n      </th>\r\n    }\r\n  </tr>\r\n  </thead>\r\n  <tbody>\r\n    @if (loading()) {\r\n      <div class=\"w-full h-full flex flex-col justify-center items-center\">\r\n        <mat-spinner diameter=\"30\"></mat-spinner>\r\n      </div>\r\n    } @else {\r\n      @if (displayData(); as displayData){\r\n        @if (!noValuesMessage()) {\r\n          @if (!sorting()) {\r\n            <cdk-virtual-scroll-viewport [itemSize]=\"56\" class=\"viewport\">\r\n              <tr *cdkVirtualFor=\"let element of displayData\" (click)=\"itemSelected.emit(element)\">\r\n                @for (column of columns(); track column.name) {\r\n                  <td class=\"cursor-pointer truncate\">\r\n              <span [matTooltip]=\"column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name]\">\r\n                {{ column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name] }}\r\n              </span>\r\n                }\r\n              </tr>\r\n            </cdk-virtual-scroll-viewport>\r\n          }\r\n        } @else {\r\n          <div class=\"w-full h-full flex flex-col justify-center items-center\">\r\n            <span>{{ noValuesMessage() | translate }}</span>\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n  </tbody>\r\n</table>\r\n", styles: [":host{display:block;overflow:hidden;height:100%;width:100%}table{height:100%;width:100%;display:block}table thead{height:56px}table tbody{display:block;height:calc(100% - 56px);width:100%;overflow:hidden}table tbody tr:hover{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}table th,table td{padding-left:1rem;text-align:left;vertical-align:middle;border-bottom:1px solid var(--mat-sys-outline-variant)}tr{height:56px;display:table;table-layout:fixed;width:100%}.viewport{display:block;width:100%;height:100%;overflow:auto}.sort-field mat-icon{font-size:18px;line-height:18px;height:18px;width:18px;opacity:0;transition:all ease-in .2s}.sort-field:hover mat-icon{opacity:1}\n"], dependencies: [{ kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "component", type: i21.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LocalSortTableComponent, decorators: [{
             type: Component,
@@ -5147,7 +5150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         CdkVirtualScrollViewport,
                         shared,
                         TranslatePipe
-                    ], template: "<table>\r\n  <thead>\r\n  <tr>\r\n    @for (column of columns(); track column.name) {\r\n      <th class=\"font-medium! truncate\" [ngClass]=\"{'sort-field': column.shouldSort, 'cursor-pointer': column.shouldSort}\" (click)=\"column.shouldSort ? sort(column.name) : undefined\">\r\n        <div class=\"flex flex-row items-center gap-x-2\">\r\n          {{ (translationPrefix().toUpperCase() +column.name.toUpperCase()) | translate }}\r\n          @if (column.shouldSort) {\r\n            <mat-icon>{{ sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward' }}</mat-icon>\r\n          }\r\n        </div>\r\n      </th>\r\n    }\r\n  </tr>\r\n  </thead>\r\n  <tbody>\r\n    @if (loading()) {\r\n      <div class=\"w-full h-full flex flex-col justify-center items-center\">\r\n        <mat-spinner diameter=\"30\"></mat-spinner>\r\n      </div>\r\n    } @else {\r\n      @if (displayData(); as displayData){\r\n        @if (!noValuesMessage()) {\r\n          @if (!sorting()) {\r\n            <cdk-virtual-scroll-viewport [itemSize]=\"56\" class=\"viewport\">\r\n              <tr *cdkVirtualFor=\"let element of displayData\" (click)=\"itemSelected.emit(element)\">\r\n                @for (column of columns(); track column.name) {\r\n                  <td class=\"cursor-pointer truncate\">\r\n              <span [matTooltip]=\"column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name]\">\r\n                {{ column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name] }}\r\n              </span>\r\n                }\r\n              </tr>\r\n            </cdk-virtual-scroll-viewport>\r\n          }\r\n        } @else {\r\n          <div class=\"w-full h-full flex flex-col justify-center items-center\">\r\n            <span>{{ noValuesMessage() | translate }}</span>\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n  </tbody>\r\n</table>\r\n", styles: [":host{display:block;overflow:hidden;height:100%;width:100%}table{height:100%;width:100%;display:block}table thead{height:56px}table tbody{display:block;height:calc(100% - 56px);width:100%;overflow:hidden}table tbody tr:hover{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}table th,table td{padding-left:1rem;text-align:left;vertical-align:middle;border-bottom:1px solid var(--mat-sys-outline-variant)}tr{height:56px;display:table;table-layout:fixed;width:100%}.viewport{display:block;width:100%;height:100%;overflow:auto}.sort-field mat-icon{font-size:18px;line-height:18px;height:18px;width:18px;opacity:0;transition:all ease-in .2s}.sort-field:hover mat-icon{opacity:1}\n"] }]
+                    ], template: "<table>\r\n  <thead>\r\n  <tr>\r\n    @for (column of columns(); track column.name) {\r\n      <th class=\"!font-medium truncate\" [ngClass]=\"{'sort-field': column.shouldSort, 'cursor-pointer': column.shouldSort}\" (click)=\"column.shouldSort ? sort(column.name) : undefined\">\r\n        <div class=\"flex flex-row items-center gap-x-2\">\r\n          {{ (translationPrefix().toUpperCase() +column.name.toUpperCase()) | translate }}\r\n          @if (column.shouldSort) {\r\n            <mat-icon>{{ sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward' }}</mat-icon>\r\n          }\r\n        </div>\r\n      </th>\r\n    }\r\n  </tr>\r\n  </thead>\r\n  <tbody>\r\n    @if (loading()) {\r\n      <div class=\"w-full h-full flex flex-col justify-center items-center\">\r\n        <mat-spinner diameter=\"30\"></mat-spinner>\r\n      </div>\r\n    } @else {\r\n      @if (displayData(); as displayData){\r\n        @if (!noValuesMessage()) {\r\n          @if (!sorting()) {\r\n            <cdk-virtual-scroll-viewport [itemSize]=\"56\" class=\"viewport\">\r\n              <tr *cdkVirtualFor=\"let element of displayData\" (click)=\"itemSelected.emit(element)\">\r\n                @for (column of columns(); track column.name) {\r\n                  <td class=\"cursor-pointer truncate\">\r\n              <span [matTooltip]=\"column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name]\">\r\n                {{ column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name] }}\r\n              </span>\r\n                }\r\n              </tr>\r\n            </cdk-virtual-scroll-viewport>\r\n          }\r\n        } @else {\r\n          <div class=\"w-full h-full flex flex-col justify-center items-center\">\r\n            <span>{{ noValuesMessage() | translate }}</span>\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n  </tbody>\r\n</table>\r\n", styles: [":host{display:block;overflow:hidden;height:100%;width:100%}table{height:100%;width:100%;display:block}table thead{height:56px}table tbody{display:block;height:calc(100% - 56px);width:100%;overflow:hidden}table tbody tr:hover{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}table th,table td{padding-left:1rem;text-align:left;vertical-align:middle;border-bottom:1px solid var(--mat-sys-outline-variant)}tr{height:56px;display:table;table-layout:fixed;width:100%}.viewport{display:block;width:100%;height:100%;overflow:auto}.sort-field mat-icon{font-size:18px;line-height:18px;height:18px;width:18px;opacity:0;transition:all ease-in .2s}.sort-field:hover mat-icon{opacity:1}\n"] }]
         }], ctorParameters: () => [{ type: TenantPropertiesService }, { type: i1$1.TranslateService }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], translationPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationPrefix", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], noValuesMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noValuesMessage", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
 
 class MasterDetailsViewComponent {