@wolkabout/commons 0.2.5 → 0.3.0

package/fesm2022/wolkabout-commons.mjs

@@ -4749,6 +4749,8 @@ class DateTimeFormFieldComponent {
     timeLabel;
     validators = input(...(ngDevMode ? [undefined, { debugName: "validators" }] : []));
     showErrorInTooltip = input(false, ...(ngDevMode ? [{ debugName: "showErrorInTooltip" }] : []));
+    timezone = input(null, ...(ngDevMode ? [{ debugName: "timezone" }] : []));
+    tenantProperties = inject(TenantPropertiesService);
     formGroup = new FormGroup({
         date: new FormControl(null),
         time: new FormControl(null)
@@ -4775,8 +4777,11 @@ class DateTimeFormFieldComponent {
     writeValue(obj) {
         if (obj) {
             const jsDateValue = obj instanceof Date ? obj : new Date(obj);
-            const dateTimeValue = DateTime.fromJSDate(jsDateValue);
-            const minutesAndHours = String(jsDateValue.getHours() + ':' + jsDateValue.getMinutes());
+            const zone = this.resolveZone();
+            const dateTimeValue = zone
+                ? DateTime.fromJSDate(jsDateValue).setZone(zone)
+                : DateTime.fromJSDate(jsDateValue);
+            const minutesAndHours = `${String(dateTimeValue.hour).padStart(2, '0')}:${String(dateTimeValue.minute).padStart(2, '0')}`;
             this.formGroup.get('date')?.setValue(dateTimeValue, { emitEvent: false });
             this.formGroup.get('time')?.setValue(minutesAndHours, { emitEvent: false });
         }
@@ -4788,10 +4793,9 @@ class DateTimeFormFieldComponent {
     registerOnChange(fn) {
         combineLatest([this.formGroup.valueChanges, this.timeChange]).pipe(takeUntil(this.destroy$), map(([{ date }, time]) => {
             if (date && time && this.timeRegex.test(time)) {
-                const jsDate = date.toJSDate();
-                const [hours, minutes] = time.split(':');
-                jsDate.setHours(Number(hours), Number(minutes));
-                return jsDate;
+                const [hours, minutes] = time.split(':').map(Number);
+                const zone = this.resolveZone();
+                return DateTime.fromObject({ year: date.year, month: date.month, day: date.day, hour: hours, minute: minutes, second: 0, millisecond: 0 }, zone ? { zone } : {}).toJSDate();
             }
             else {
                 return null;
@@ -4830,6 +4834,9 @@ class DateTimeFormFieldComponent {
     getTimeErrorTooltip() {
         return this.getTimeErrors().map((error) => this.translate.instant('COMMON.ERROR_VALIDATION_' + error) + '\n').toString();
     }
+    resolveZone() {
+        return this.timezone() ?? this.tenantProperties.timezone ?? null;
+    }
     onInputChange(event) {
         const inputEl = event.target;
         const value = inputEl.value;
@@ -4838,7 +4845,7 @@ class DateTimeFormFieldComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DateTimeFormFieldComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DateTimeFormFieldComponent, isStandalone: true, selector: "app-date-time-form-field", inputs: { dateLabel: { classPropertyName: "dateLabel", publicName: "dateLabel", isSignal: false, isRequired: false, transformFunction: null }, timeLabel: { classPropertyName: "timeLabel", publicName: "timeLabel", isSignal: false, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DateTimeFormFieldComponent, isStandalone: true, selector: "app-date-time-form-field", inputs: { dateLabel: { classPropertyName: "dateLabel", publicName: "dateLabel", isSignal: false, isRequired: false, transformFunction: null }, timeLabel: { classPropertyName: "timeLabel", publicName: "timeLabel", isSignal: false, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null }, timezone: { classPropertyName: "timezone", publicName: "timezone", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DateTimeFormFieldComponent),
@@ -4869,7 +4876,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 type: Input
             }], timeLabel: [{
                 type: Input
-            }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }] } });
+            }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }], timezone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timezone", required: false }] }] } });
 
 class DragDropFileUploadComponent {
     controlDir;
@@ -5712,6 +5719,9 @@ class NestedListViewComponent {
                         return;
                     }
                     const isSelected = this.isChildSelected(item);
+                    if (this.selectedItems().length === 1 && this.selectedItems()[0].bulkSelectDisabled) {
+                        this.selectedItems.set([]);
+                    }
                     this.selectedItems.update((previous) => {
                         if (isSelected) {
                             return previous.filter((selected) => selected.id !== item.id);
@@ -6088,6 +6098,9 @@ class StandardListViewComponent {
             if (item.bulkSelectDisabled) {
                 return;
             }
+            if (this.selectedItems().length === 1 && this.selectedItems()[0].bulkSelectDisabled) {
+                this.selectedItems.set([]);
+            }
             this.selectedItems.update((previous) => {
                 if (isSelected) {
                     return previous.length > 1 ? previous.filter((selected) => selected.id !== item.id) : previous;
@@ -6155,11 +6168,11 @@ class StandardListViewComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StandardListViewComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StandardListViewComponent, isStandalone: true, selector: "app-standard-list-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, dataControl: { classPropertyName: "dataControl", publicName: "dataControl", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, isColoredInput: { classPropertyName: "isColoredInput", publicName: "isColoredInput", isSignal: true, isRequired: false, transformFunction: null }, enableMultiSelect: { classPropertyName: "enableMultiSelect", publicName: "enableMultiSelect", isSignal: true, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, hideDetails: { classPropertyName: "hideDetails", publicName: "hideDetails", isSignal: true, isRequired: false, transformFunction: null }, hidePadding: { classPropertyName: "hidePadding", publicName: "hidePadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected", itemsSelected: "itemsSelected" }, host: { listeners: { "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["standardListItemTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden {{hidePadding() ? 'pt-0' : 'pt-2'}}\">\r\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\r\n\r\n      <!-- SEARCH -->\r\n      @if (!hideSearch()) {\r\n        <mat-form-field class=\"w-full small-input\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n          <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\r\n          <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n          <mat-icon matSuffix>search</mat-icon>\r\n        </mat-form-field>\r\n      }\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n        @if (!loadingData()) {\r\n          @if (filteredItems(); as items) {\r\n            @if (items.length) {\r\n              <div class=\"flex flex-col w-full grow shrink overflow-y-auto overflow-x-hidden\" [overflowClass]=\"'pr-4'\">\r\n                @for (item of items; track $index) {\r\n                  <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultTemplate\" [ngTemplateOutletContext]=\"{$implicit: item, selectedItems: selectedItems(), selectItems: selectItems.bind(this) , isSelected: isSelected.bind(this), ctrlPressed: ctrlPressed(), shiftPressed: shiftPressed()}\"/>\r\n\r\n                  <!--DEFAULT TEMPLATE-->\r\n                  <ng-template #defaultTemplate>\r\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItems(item)\"\r\n                              [ngClass]=\"[isSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '', (ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled ? 'bg-disabled-color opacity-50 hover:cursor-auto disabled-item' : '']\"\r\n                              [appScrollIntoView]=\"selectedItems().length ? false : isSelected(item)\"\r\n                              [matTooltip]=\"(ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled && item.bulkSelectDisabledTooltip ? (item.bulkSelectDisabledTooltip | translate) : item.name\" matTooltipPosition=\"right\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        @if (item.icon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                        <span [ngClass]=\"isSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate flex-1\">{{ item.name }}</span>\r\n                        @if (item.rightIcon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                      </div>\r\n                    </mat-card>\r\n                  </ng-template>\r\n                }\r\n\r\n                <!--  Load more  -->\r\n                @if (this.dataSource().isPaged && !this.dataSource().isLastPage) {\r\n                  <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\r\n                    <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\r\n                      @if (loadingPage()) {\r\n                        <mat-spinner diameter=\"30\"></mat-spinner>\r\n                      } @else {\r\n                        <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\r\n                }\r\n              </div>\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <ng-content select=\"[app-no-items-message]\"></ng-content>\r\n              </div>\r\n            }\r\n          }\r\n        } @else {\r\n          <div class=\"flex flex-col grow justify-center items-center\">\r\n            <mat-spinner diameter=\"30\"></mat-spinner>\r\n          </div>\r\n        }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (!hideDetails()) {\r\n    <mat-divider [vertical]=\"true\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden\">\r\n      @if (selectedItems().length <= 1) {\r\n        <ng-content select=\"[app-details]\"/>\r\n      } @else {\r\n        <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\r\n          <div class=\"flex flex-col items-center justify-center\">\r\n            <mat-checkbox class=\"w-full\"\r\n                          [checked]=\"selectedItems().length === allSelectableItems().length\"\r\n                          (change)=\"toggleSelectAll()\">\r\n              {{ 'COMMON.SELECT_ALL' | translate }}\r\n            </mat-checkbox>\r\n            <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\r\n            <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate:  {numberOfItems: selectedItems().length} }} </span>\r\n          </div>\r\n          <div class=\"absolute bottom-0 right-0\">\r\n            <ng-content select=\"[app-bulk-actions]\"/>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.disabled-item{color:unset}.disabled-item:hover{background-color:var(--neutral-variant-color-60)!important}.disabled-item span{color:unset!important}.no-select-item{user-select:none;-webkit-user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i1$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: OverflowClassDirective, selector: "[overflowClass]", inputs: ["overflowClass"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[appScrollIntoView]", inputs: ["appScrollIntoView"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["icon"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StandardListViewComponent, isStandalone: true, selector: "app-standard-list-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, dataControl: { classPropertyName: "dataControl", publicName: "dataControl", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, isColoredInput: { classPropertyName: "isColoredInput", publicName: "isColoredInput", isSignal: true, isRequired: false, transformFunction: null }, enableMultiSelect: { classPropertyName: "enableMultiSelect", publicName: "enableMultiSelect", isSignal: true, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, hideDetails: { classPropertyName: "hideDetails", publicName: "hideDetails", isSignal: true, isRequired: false, transformFunction: null }, hidePadding: { classPropertyName: "hidePadding", publicName: "hidePadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected", itemsSelected: "itemsSelected" }, host: { listeners: { "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["standardListItemTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden {{hidePadding() ? 'pt-0' : 'pt-2'}}\">\r\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\r\n\r\n      <!-- SEARCH -->\r\n      @if (!hideSearch()) {\r\n        <mat-form-field class=\"w-full small-input\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n          <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\r\n          <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n          <mat-icon matSuffix>search</mat-icon>\r\n        </mat-form-field>\r\n      }\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n        @if (!loadingData()) {\r\n          @if (filteredItems(); as items) {\r\n            @if (items.length) {\r\n              <div class=\"flex flex-col w-full grow shrink overflow-y-auto overflow-x-hidden\" [overflowClass]=\"'pr-4'\">\r\n                @for (item of items; track $index) {\r\n                  <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultTemplate\" [ngTemplateOutletContext]=\"{$implicit: item, selectedItems: selectedItems(), selectItems: selectItems.bind(this) , isSelected: isSelected.bind(this), ctrlPressed: ctrlPressed(), shiftPressed: shiftPressed()}\"/>\r\n\r\n                  <!--DEFAULT TEMPLATE-->\r\n                  <ng-template #defaultTemplate>\r\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItems(item)\"\r\n                              [ngClass]=\"[isSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '', (ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled ? 'bg-disabled-color opacity-50 hover:cursor-auto disabled-item' : '']\"\r\n                              [appScrollIntoView]=\"selectedItems().length > 1 ? false : isSelected(item)\"\r\n                              [matTooltip]=\"(ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled && item.bulkSelectDisabledTooltip ? (item.bulkSelectDisabledTooltip | translate) : item.name\" matTooltipPosition=\"right\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        @if (item.icon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                        <span [ngClass]=\"isSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate flex-1\">{{ item.name }}</span>\r\n                        @if (item.rightIcon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                      </div>\r\n                    </mat-card>\r\n                  </ng-template>\r\n                }\r\n\r\n                <!--  Load more  -->\r\n                @if (this.dataSource().isPaged && !this.dataSource().isLastPage) {\r\n                  <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\r\n                    <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\r\n                      @if (loadingPage()) {\r\n                        <mat-spinner diameter=\"30\"></mat-spinner>\r\n                      } @else {\r\n                        <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\r\n                }\r\n              </div>\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <ng-content select=\"[app-no-items-message]\"></ng-content>\r\n              </div>\r\n            }\r\n          }\r\n        } @else {\r\n          <div class=\"flex flex-col grow justify-center items-center\">\r\n            <mat-spinner diameter=\"30\"></mat-spinner>\r\n          </div>\r\n        }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (!hideDetails()) {\r\n    <mat-divider [vertical]=\"true\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden\">\r\n      @if (selectedItems().length <= 1) {\r\n        <ng-content select=\"[app-details]\"/>\r\n      } @else {\r\n        <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\r\n          <div class=\"flex flex-col items-center justify-center\">\r\n            <mat-checkbox class=\"w-full\"\r\n                          [checked]=\"selectedItems().length === allSelectableItems().length\"\r\n                          (change)=\"toggleSelectAll()\">\r\n              {{ 'COMMON.SELECT_ALL' | translate }}\r\n            </mat-checkbox>\r\n            <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\r\n            <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate:  {numberOfItems: selectedItems().length} }} </span>\r\n          </div>\r\n          <div class=\"absolute bottom-0 right-0\">\r\n            <ng-content select=\"[app-bulk-actions]\"/>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.disabled-item{color:unset}.disabled-item:hover{background-color:var(--neutral-variant-color-60)!important}.disabled-item span{color:unset!important}.no-select-item{user-select:none;-webkit-user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i1$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: OverflowClassDirective, selector: "[overflowClass]", inputs: ["overflowClass"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[appScrollIntoView]", inputs: ["appScrollIntoView"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["icon"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StandardListViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-standard-list-view', imports: [SharedModule, OverflowClassDirective, ScrollIntoViewDirective, IconComponent], template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden {{hidePadding() ? 'pt-0' : 'pt-2'}}\">\r\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\r\n\r\n      <!-- SEARCH -->\r\n      @if (!hideSearch()) {\r\n        <mat-form-field class=\"w-full small-input\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n          <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\r\n          <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n          <mat-icon matSuffix>search</mat-icon>\r\n        </mat-form-field>\r\n      }\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n        @if (!loadingData()) {\r\n          @if (filteredItems(); as items) {\r\n            @if (items.length) {\r\n              <div class=\"flex flex-col w-full grow shrink overflow-y-auto overflow-x-hidden\" [overflowClass]=\"'pr-4'\">\r\n                @for (item of items; track $index) {\r\n                  <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultTemplate\" [ngTemplateOutletContext]=\"{$implicit: item, selectedItems: selectedItems(), selectItems: selectItems.bind(this) , isSelected: isSelected.bind(this), ctrlPressed: ctrlPressed(), shiftPressed: shiftPressed()}\"/>\r\n\r\n                  <!--DEFAULT TEMPLATE-->\r\n                  <ng-template #defaultTemplate>\r\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItems(item)\"\r\n                              [ngClass]=\"[isSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '', (ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled ? 'bg-disabled-color opacity-50 hover:cursor-auto disabled-item' : '']\"\r\n                              [appScrollIntoView]=\"selectedItems().length ? false : isSelected(item)\"\r\n                              [matTooltip]=\"(ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled && item.bulkSelectDisabledTooltip ? (item.bulkSelectDisabledTooltip | translate) : item.name\" matTooltipPosition=\"right\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        @if (item.icon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                        <span [ngClass]=\"isSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate flex-1\">{{ item.name }}</span>\r\n                        @if (item.rightIcon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                      </div>\r\n                    </mat-card>\r\n                  </ng-template>\r\n                }\r\n\r\n                <!--  Load more  -->\r\n                @if (this.dataSource().isPaged && !this.dataSource().isLastPage) {\r\n                  <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\r\n                    <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\r\n                      @if (loadingPage()) {\r\n                        <mat-spinner diameter=\"30\"></mat-spinner>\r\n                      } @else {\r\n                        <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\r\n                }\r\n              </div>\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <ng-content select=\"[app-no-items-message]\"></ng-content>\r\n              </div>\r\n            }\r\n          }\r\n        } @else {\r\n          <div class=\"flex flex-col grow justify-center items-center\">\r\n            <mat-spinner diameter=\"30\"></mat-spinner>\r\n          </div>\r\n        }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (!hideDetails()) {\r\n    <mat-divider [vertical]=\"true\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden\">\r\n      @if (selectedItems().length <= 1) {\r\n        <ng-content select=\"[app-details]\"/>\r\n      } @else {\r\n        <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\r\n          <div class=\"flex flex-col items-center justify-center\">\r\n            <mat-checkbox class=\"w-full\"\r\n                          [checked]=\"selectedItems().length === allSelectableItems().length\"\r\n                          (change)=\"toggleSelectAll()\">\r\n              {{ 'COMMON.SELECT_ALL' | translate }}\r\n            </mat-checkbox>\r\n            <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\r\n            <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate:  {numberOfItems: selectedItems().length} }} </span>\r\n          </div>\r\n          <div class=\"absolute bottom-0 right-0\">\r\n            <ng-content select=\"[app-bulk-actions]\"/>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.disabled-item{color:unset}.disabled-item:hover{background-color:var(--neutral-variant-color-60)!important}.disabled-item span{color:unset!important}.no-select-item{user-select:none;-webkit-user-select:none}\n"] }]
+            args: [{ selector: 'app-standard-list-view', imports: [SharedModule, OverflowClassDirective, ScrollIntoViewDirective, IconComponent], template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden {{hidePadding() ? 'pt-0' : 'pt-2'}}\">\r\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\r\n\r\n      <!-- SEARCH -->\r\n      @if (!hideSearch()) {\r\n        <mat-form-field class=\"w-full small-input\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n          <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\r\n          <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n          <mat-icon matSuffix>search</mat-icon>\r\n        </mat-form-field>\r\n      }\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n        @if (!loadingData()) {\r\n          @if (filteredItems(); as items) {\r\n            @if (items.length) {\r\n              <div class=\"flex flex-col w-full grow shrink overflow-y-auto overflow-x-hidden\" [overflowClass]=\"'pr-4'\">\r\n                @for (item of items; track $index) {\r\n                  <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultTemplate\" [ngTemplateOutletContext]=\"{$implicit: item, selectedItems: selectedItems(), selectItems: selectItems.bind(this) , isSelected: isSelected.bind(this), ctrlPressed: ctrlPressed(), shiftPressed: shiftPressed()}\"/>\r\n\r\n                  <!--DEFAULT TEMPLATE-->\r\n                  <ng-template #defaultTemplate>\r\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItems(item)\"\r\n                              [ngClass]=\"[isSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '', (ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled ? 'bg-disabled-color opacity-50 hover:cursor-auto disabled-item' : '']\"\r\n                              [appScrollIntoView]=\"selectedItems().length > 1 ? false : isSelected(item)\"\r\n                              [matTooltip]=\"(ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled && item.bulkSelectDisabledTooltip ? (item.bulkSelectDisabledTooltip | translate) : item.name\" matTooltipPosition=\"right\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        @if (item.icon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                        <span [ngClass]=\"isSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate flex-1\">{{ item.name }}</span>\r\n                        @if (item.rightIcon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                      </div>\r\n                    </mat-card>\r\n                  </ng-template>\r\n                }\r\n\r\n                <!--  Load more  -->\r\n                @if (this.dataSource().isPaged && !this.dataSource().isLastPage) {\r\n                  <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\r\n                    <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\r\n                      @if (loadingPage()) {\r\n                        <mat-spinner diameter=\"30\"></mat-spinner>\r\n                      } @else {\r\n                        <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\r\n                }\r\n              </div>\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <ng-content select=\"[app-no-items-message]\"></ng-content>\r\n              </div>\r\n            }\r\n          }\r\n        } @else {\r\n          <div class=\"flex flex-col grow justify-center items-center\">\r\n            <mat-spinner diameter=\"30\"></mat-spinner>\r\n          </div>\r\n        }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (!hideDetails()) {\r\n    <mat-divider [vertical]=\"true\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden\">\r\n      @if (selectedItems().length <= 1) {\r\n        <ng-content select=\"[app-details]\"/>\r\n      } @else {\r\n        <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\r\n          <div class=\"flex flex-col items-center justify-center\">\r\n            <mat-checkbox class=\"w-full\"\r\n                          [checked]=\"selectedItems().length === allSelectableItems().length\"\r\n                          (change)=\"toggleSelectAll()\">\r\n              {{ 'COMMON.SELECT_ALL' | translate }}\r\n            </mat-checkbox>\r\n            <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\r\n            <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate:  {numberOfItems: selectedItems().length} }} </span>\r\n          </div>\r\n          <div class=\"absolute bottom-0 right-0\">\r\n            <ng-content select=\"[app-bulk-actions]\"/>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.disabled-item{color:unset}.disabled-item:hover{background-color:var(--neutral-variant-color-60)!important}.disabled-item span{color:unset!important}.no-select-item{user-select:none;-webkit-user-select:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { onKeyDown: [{
                 type: HostListener,
                 args: ['window:keydown', ['$event']]
@@ -6666,7 +6679,7 @@ class ValueInputDateComponent {
                 useExisting: forwardRef(() => ValueInputDateComponent),
                 multi: true,
             }
-        ], ngImport: i0, template: "<app-date-time-form-field [formControl]=\"formControl\" [validators]=\"validators()\" [showErrorInTooltip]=\"showErrorInTooltip()\" class=\"w-full\"></app-date-time-form-field>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DateTimeFormFieldComponent, selector: "app-date-time-form-field", inputs: ["dateLabel", "timeLabel", "validators", "showErrorInTooltip"] }] });
+        ], ngImport: i0, template: "<app-date-time-form-field [formControl]=\"formControl\" [validators]=\"validators()\" [showErrorInTooltip]=\"showErrorInTooltip()\" class=\"w-full\"></app-date-time-form-field>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DateTimeFormFieldComponent, selector: "app-date-time-form-field", inputs: ["dateLabel", "timeLabel", "validators", "showErrorInTooltip", "timezone"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputDateComponent, decorators: [{
             type: Component,